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

package/form-controls/select/src/models/abstractions/base-select.component.ts

@@ -0,0 +1,286 @@
+import {
+    Directive,
+    HostBinding,
+    ElementRef,
+    OnInit,
+    Output,
+    EventEmitter,
+    inject,
+    NgZone,
+    Renderer2,
+    RendererStyleFlags2,
+    input,
+    viewChild,
+    computed, effect
+} from '@angular/core';
+import { DomEventsService, PositioningService, ComputePositionResult } from '@updevs/sdk/layout';
+import { Tools } from '@updevs/sdk/core';
+import { BaseSearchStore, ObservableSearchType } from '@updevs/sdk/stores';
+import { HorizontalVerticalType, RowColumnSize, ColumnSizeHelper } from '@updevs/components';
+import { ListItem } from '@updevs/components/list';
+import { BaseControl } from '@updevs/components/form-controls/abstractions';
+import { tap, debounceTime, Subject } from 'rxjs';
+
+import { SelectItem } from '../select-item';
+import { Defaults } from '../defaults';
+
+import Utils = Tools.Utils;
+
+@Directive()
+export abstract class BaseSelectComponent extends BaseControl implements OnInit {
+    @HostBinding('class') get wrapperClasses() {
+        return this.hostWrapperClasses();
+    }
+    @Output() readonly dropdownOpenStatusChange = new EventEmitter<boolean>();
+
+    componentBox = viewChild('componentBox', { read: ElementRef });
+    searchBox = viewChild('searchBox', { read: ElementRef });
+    searchBoxChild = viewChild('searchBoxChild', { read: ElementRef });
+    list = viewChild('list', { read: ElementRef });
+
+    /**
+     * Name of the HTML component.
+     */
+    name = input<string>();
+    /**
+     * Select items.
+     * If provided, the select will be considered static.
+     */
+    items = input<SelectItem[]>();
+    /**
+     * Store used to load/filter the items.
+     */
+    store = input<BaseSearchStore>();
+    /**
+     * Observable used to load/filter the items.
+     */
+    observable = input<ObservableSearchType>();
+    /**
+     * Name of the property in the object that represents the ID/key of the option.
+     * **Note:** used only for remote data.
+     */
+    itemKey = input<string>();
+    /**
+     * Name of the property in the object that represents the value/description of the option.
+     * **Note:** used only for remote data.
+     */
+    itemValue = input<string>();
+    /**
+     * Maximum height of the dropdown.
+     */
+    dropdownMaxHeight = input(Defaults.dropdownMaxHeight);
+    typeaheadDebounce = input(Defaults.typeaheadDebounce);
+    shouldAutoSearch = input(Defaults.shouldAutoSearch);
+    shouldCloseOnOutsideClick = input(Defaults.shouldCloseOnOutsideClick);
+    layout = input<HorizontalVerticalType>(Defaults.layout);
+    labelColSize = input<RowColumnSize>();
+    isDisabled = input(false); // TODO: implementar.
+    layoutClasses = computed(() => this.layout() === 'horizontal' ? ['col', 'align-self-center'] : []);
+    isLoading = false;
+    localItems: SelectItem[] = [];
+    listItems: ListItem[] = [];
+    dropdownClasses = 'select-dropdown-content remove-top-radius';
+    get isDropdownOpen(): boolean {
+        return this._isDropdownOpen;
+    }
+    set isDropdownOpen(value: boolean) {
+        this._isDropdownOpen = value;
+
+        this.dropdownOpenStatusChange.emit(value);
+
+        if (value) {
+            this.dropdownClasses += ' select-dropdown-content-open';
+        } else {
+            this.dropdownClasses = this.dropdownClasses.replace(' select-dropdown-content-open', '');
+        }
+    }
+    get labelSizeClasses(): string {
+        if (this.layout() !== 'horizontal') {
+            return 'form-label';
+        }
+
+        return ColumnSizeHelper.getClasses(
+            'col-form-label',
+            ColumnSizeHelper.getSizeClasses(this.labelColSize(), 3)
+        );
+    }
+
+    protected _currentTerm?: string;
+    protected _localBackupItems: SelectItem[] = [];
+
+    private hasExternalList = false;
+    private _isDropdownOpen = false;
+    private hostWrapperClasses = computed(() => this.layout() === 'horizontal' ? 'row' : '');
+    private readonly searchInputSubject = new Subject<string>();
+    private readonly renderer = inject(Renderer2);
+    private readonly ngZone = inject(NgZone);
+    private readonly domEventsService = inject(DomEventsService);
+    private readonly positioningService = inject(PositioningService);
+
+    protected constructor() {
+        super();
+
+        effect(() => {
+            if (!!this.items()) {
+                this._setupLocalItems(this.items()!);
+            }
+        });
+    }
+
+    ngOnInit(): void {
+        this.hasExternalList = !this.observable() && !this.store();
+
+        if (this.shouldAutoSearch()) {
+            if (this.hasExternalList) {
+                this._setupLocalItems(this.items()!);
+            } else {
+                this.searchRemote();
+            }
+        }
+
+        if (this.hasExternalList) {
+            return;
+        }
+
+        const typeaheadSubscription = this.searchInputSubject
+            .pipe(
+                tap(value => this._currentTerm = value),
+                debounceTime(this.typeaheadDebounce())
+            )
+            .subscribe(() => this.searchRemote());
+
+        this.addSubscriptions(typeaheadSubscription);
+    }
+
+    openDropdown(): void {
+        this.isDropdownOpen = true;
+
+        if (this.shouldCloseOnOutsideClick()) {
+            const outsideClickSub = this.domEventsService.startOutsideClickListener(
+                () => this.ngZone.run(() => this.isDropdownOpen = false),
+                this.list()?.nativeElement,
+                true,
+                this.componentBox()?.nativeElement,
+                this.searchBox()?.nativeElement
+            );
+            this.addSubscriptions(outsideClickSub);
+        }
+
+        this.ngZone.runOutsideAngular(() =>
+            this.positioningService
+                .computePosition(this.componentBox()!, this.list()!, { placement: 'bottom' })
+                .subscribe(resp => this.updatePosition(resp))
+        );
+    }
+
+    search(term?: string): void {
+        if (this.hasExternalList) {
+            this.searchLocal();
+        } else {
+            this.searchInputSubject.next(term || '');
+        }
+    }
+
+    protected _setupLocalItems(items: SelectItem[]): void {
+        this.localItems = Utils.deepCopy(items);
+        this._localBackupItems = Utils.deepCopy(items);
+        const tempItems: ListItem[] = [];
+
+        for (const item of this._localBackupItems) {
+            const listItem = this.getListItem(item);
+            item.listItem = Object.assign(listItem, {});
+
+            tempItems.push(listItem);
+        }
+
+        this.listItems = [...tempItems];
+        this.isLoading = false;
+    }
+
+    private searchLocal(): void {
+        if (!this._currentTerm) {
+            this.listItems = Utils.deepCopy(this._localBackupItems.map(li => li.listItem!));
+            this.localItems = Utils.deepCopy(this._localBackupItems);
+
+            return;
+        }
+
+        this.ngZone.run(() => {
+            this.listItems = Utils.deepCopy<SelectItem[]>(this._localBackupItems).filter(si => {
+                let hasChildrenInSearch = false;
+
+                if ((si.children?.length || 0) > 0) {
+                    hasChildrenInSearch = si.children!.filter(
+                        ci => ci.text!.toLowerCase().includes(this._currentTerm!.toLowerCase())
+                    ).length > 0;
+                }
+
+                return si.text!.toLowerCase().includes(this._currentTerm!.toLowerCase()) || hasChildrenInSearch;
+            }).map(si => {
+                const bkpItem = this._localBackupItems.find(lbi => lbi.value === si.value);
+
+                if ((bkpItem?.children?.length || 0) > 0) {
+                    si.children = [...bkpItem!.children!].filter(
+                        ci => ci.text!.toLowerCase().includes(this._currentTerm!.toLowerCase())
+                    );
+                }
+
+                return this.getListItem(si);
+            });
+        });
+    }
+
+    private searchRemote(): void {
+        this.isLoading = true;
+        const request = { description: this._currentTerm };
+        const observable = !!this.observable() ? this.observable()!(request) : this.store()!.search(request);
+
+        observable.subscribe(r => {
+            const items: SelectItem[] = [];
+
+            r.records.forEach(item => {
+                items.push({
+                    value: item[this.itemKey()!],
+                    text: item[this.itemValue()!],
+                    objectData: item
+                });
+            });
+            this._setupLocalItems(items);
+        });
+    }
+
+    private getListItem(item: SelectItem): ListItem {
+        let listItem: ListItem;
+
+        if (!!item.listItem) {
+            listItem = item.listItem;
+            listItem.id = item.value;
+            listItem.text = item.text;
+        } else {
+            listItem = {
+                id: item.value,
+                text: item.text
+            };
+        }
+
+        if ((item.children?.length || 0) > 0) {
+            listItem.children = [...item.children!].map(c => this.getListItem(c));
+        }
+
+        return listItem;
+    }
+
+    private updatePosition(result: ComputePositionResult): void {
+        const componentBox = this.componentBox()!.nativeElement.getBoundingClientRect();
+        const searchBoxChildElement = this.searchBoxChild()?.nativeElement;
+        const ddElement = this.list()!.nativeElement;
+
+        this.renderer.setStyle(searchBoxChildElement, 'width', `${Math.abs(componentBox.width)}px`, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'top', `${result.y + searchBoxChildElement.scrollHeight}px`, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'left', 0, RendererStyleFlags2.Important);
+        this.renderer.setStyle(ddElement, 'width', `${Math.abs(componentBox.width)}px`, RendererStyleFlags2.Important);
+    }
+
+    abstract clearSelection(): void;
+    abstract onSelectItem(item: ListItem): void;
+}

package/form-controls/select/src/models/defaults.ts

@@ -0,0 +1,9 @@
+import { HorizontalVerticalType } from '@updevs/components';
+
+export class Defaults {
+    static dropdownMaxHeight = 300;
+    static typeaheadDebounce = 200;
+    static shouldAutoSearch = true;
+    static shouldCloseOnOutsideClick = true;
+    static layout: HorizontalVerticalType = 'vertical';
+}

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

@@ -1 +1,2 @@
+export * from './defaults';
 export * from './select-item';

package/form-controls/select/{models/select-item.d.ts → src/models/select-item.ts}

@@ -1,4 +1,5 @@
 import { ListItem } from '@updevs/components/list';
+
 export interface SelectItem {
     /**
      * Value of the single item if selected.

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

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslocoModule } from '@jsverse/transloco';
+import { UpdIconsModule } from '@updevs/icons';
+import { UpdCoreLayoutModule } from '@updevs/sdk/layout';
+import { UpdListModule } from '@updevs/components/list';
+import { UpdButtonModule } from '@updevs/components/button';
+import { UpdInputModule } from '@updevs/components/form-controls/input';
+import { UpdPopoverModule } from '@updevs/components/popover';
+
+import { SelectComponent } from './components/single/select.component';
+import { SelectMultipleComponent } from './components/multiple/select-multiple.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        UpdCoreLayoutModule,
+        UpdListModule,
+        UpdInputModule,
+        UpdIconsModule,
+        UpdButtonModule,
+        UpdPopoverModule,
+        TranslocoModule
+    ],
+    declarations: [
+        SelectComponent,
+        SelectMultipleComponent
+    ],
+    exports: [
+        SelectComponent,
+        SelectMultipleComponent
+    ]
+})
+export class UpdSelectModule {}

package/form-controls/textarea/index.ts

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

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

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

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

@@ -0,0 +1,13 @@
+@if (!!labelText || displayCharactersCount()) {
+    <label class="form-label">
+        {{ labelText }}
+        @if (displayCharactersCount() && !!maxLength()) {
+            <span class="form-label-description">{{ value()?.length || 0 }}/{{ maxLength() }}</span>
+        }
+    </label>
+}
+
+<textarea [attr.maxlength]="maxLength()" [disabled]="isDisabled()" [ngClass]="classes" [placeholder]="placeholderText"
+    [value]="value() || ''" [attr.name]="name()" [attr.readonly]="isDisabled() ? '' : undefined" [attr.rows]="rows()"
+    (input)="updateValue($event)">
+</textarea>

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

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

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

@@ -0,0 +1,45 @@
+import { Component, ViewEncapsulation, HostBinding, OnInit, OnChanges, input, model } from '@angular/core';
+import { BaseControl } from '@updevs/components/form-controls/abstractions';
+
+@Component({
+    selector: 'upd-textarea',
+    templateUrl: './textarea.component.html',
+    styleUrls: ['./textarea.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TextareaComponent extends BaseControl implements OnInit, OnChanges {
+    @HostBinding('class') hostWrapperClasses = '';
+
+    value = model<string>();
+    customClasses = input<string>();
+    wrapperClasses = input<string>();
+    name = input<string>();
+    maxLength = input<number>();
+    rows = input<number>();
+    isDisabled = input(false);
+    displayCharactersCount = input(false);
+    classes: string[] = [];
+
+    ngOnInit(): void {
+        this.updateClasses();
+    }
+
+    ngOnChanges(): void {
+        this.updateClasses();
+    }
+
+    updateValue(event?: any): void {
+        if (!event && !event.target) {
+            return;
+        }
+
+        const target = event.target as HTMLTextAreaElement;
+
+        this.value.set(target.value);
+    }
+
+    private updateClasses(): void {
+        const lClasses: string[] = ['form-control'];
+        this.classes = [...lClasses, ...(this.customClasses() || '').split(' ')];
+    }
+}

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TextareaComponent } from './textarea.component';
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    declarations: [
+        TextareaComponent
+    ],
+    exports: [
+        TextareaComponent
+    ]
+})
+export class UpdTextareaModule {}

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

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

package/form-controls/time-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/time-picker/src/time-picker.component.html

@@ -0,0 +1,17 @@
+<upd-input #input [mask]="inputMask" [maskConfig]="{showMaskTyped:showMask}" [isInputGroupFlat]="true">
+    <ng-template updInputAppend>
+        <upd-button [shouldIgnoreBtnClass]="true" (clicked)="openDropdown()" customClasses="link-secondary ms-2">
+            <upd-icon tablerIcon="calendar-time"></upd-icon>
+        </upd-button>
+    </ng-template>
+</upd-input>
+<upd-dropdown [isOpen]="isDropdownOpen" [dropdownReference]="inputRef" [maxHeight]="dropdownMaxHeight" [maxWidth]="maxWidth"
+    wrapperClasses="overflow-x-hidden">
+    <div class="time-options-wrapper" [style.max-width.px]="maxWidth">
+        <upd-time-selector [shouldSelectSeconds]="shouldSelectSeconds" [shouldUse24hFormat]="shouldUse24hFormat"
+            [startingHour]="startingHour" [endingHour]="endingHour" [hourInterval]="hourInterval"
+            [startingMinute]="startingMinute" [endingMinute]="endingMinute" [minuteInterval]="minuteInterval"
+            [startingSecond]="startingSecond" [endingSecond]="endingSecond" [secondInterval]="secondInterval"
+            [customHours]="customHours" [customMinutes]="customMinutes" [customSeconds]="customSeconds"></upd-time-selector>
+    </div>
+</upd-dropdown>

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

@@ -0,0 +1,10 @@
+.time-options-wrapper {
+    padding: 10px 20px 15px;
+    width: 100%;
+    border-radius: 6px;
+    font-size: 25px;
+    font-weight: 500;
+    text-align: center;
+    -webkit-user-select: none;
+    user-select: none;
+}

package/form-controls/time-picker/src/time-picker.component.spec.ts

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

package/form-controls/time-picker/src/time-picker.component.ts

@@ -0,0 +1,110 @@
+import { Component, Input, OnInit, OnChanges, SimpleChanges, ViewChild, ElementRef } from '@angular/core';
+
+@Component({
+    selector: 'upd-time-picker',
+    templateUrl: './time-picker.component.html',
+    styleUrls: ['./time-picker.component.scss']
+})
+export class TimePickerComponent implements OnInit, OnChanges {
+    @ViewChild('input', { read: ElementRef }) inputRef?: ElementRef;
+
+    /**
+     * Maximum height of the dropdown.
+     */
+    @Input() dropdownMaxHeight = 300;
+    /**
+     * Whether the mask should be shown.
+     */
+    @Input() showMask = true;
+    /**
+     * Whether seconds should be selectable.
+     */
+    @Input() shouldSelectSeconds = false;
+    /**
+     * Whether the 24-hour format will be used or the 12-hour one (AM/PM)
+     */
+    @Input() shouldUse24hFormat = true;
+    /**
+     * Hour from which where the list will begin.
+     */
+    @Input() startingHour = 0;
+    /**
+     * Hour from which where the list will end.
+     */
+    @Input() endingHour = 23;
+    /**
+     * Interval between hours displayed.
+     */
+    @Input() hourInterval = 1;
+    /**
+     * Minute from which where the list will begin.
+     */
+    @Input() startingMinute = 0;
+    /**
+     * Minute from which where the list will end.
+     */
+    @Input() endingMinute = 59;
+    /**
+     * Interval between minutes displayed.
+     */
+    @Input() minuteInterval = 5;
+    /**
+     * Second from which where the list will begin.
+     */
+    @Input() startingSecond = 0;
+    /**
+     * Second from which where the list will end.
+     */
+    @Input() endingSecond = 59;
+    /**
+     * Interval between seconds displayed.
+     */
+    @Input() secondInterval = 10;
+    /**
+     * Custom list of hours to be displayed for selection.
+     */
+    @Input() customHours?: number[];
+    /**
+     * Custom list of minutes to be displayed for selection.
+     */
+    @Input() customMinutes?: number[];
+    /**
+     * Custom list of seconds to be displayed for selection.
+     */
+    @Input() customSeconds?: number[];
+
+    maxWidth = 0;
+    isDropdownOpen = false;
+
+    get inputMask(): string {
+        return this.shouldSelectSeconds ? 'Hh:m0:s0' : 'Hh:m0';
+    }
+
+    ngOnInit(): void {
+        this.setupStyle();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.setupStyle();
+    }
+
+    openDropdown(): void {
+        this.isDropdownOpen = true;
+    }
+
+    private setupStyle(): void {
+        let finalWidth = 195;
+
+        if (this.shouldSelectSeconds) {
+            finalWidth += 60 + 10;
+        }
+
+        if (!this.shouldUse24hFormat) {
+            finalWidth += 60;
+        }
+
+        this.maxWidth = finalWidth;
+
+        console.log('max w', this.maxWidth);
+    }
+}

package/form-controls/time-picker/src/time-selector/time-selector.component.html

@@ -0,0 +1,50 @@
+<div class="d-flex">
+    <div class="time-items-list">
+        <ul class="list">
+            @for (h of hoursList; track h) {
+                <li>
+                    <div class="cell">{{ h.toString().padStart(2, '0') }}</div>
+                </li>
+            }
+        </ul>
+    </div>
+    <div class="time-dots-separator">
+        <span>:</span>
+    </div>
+    <div class="time-items-list">
+        <ul class="list">
+            @for (m of minutesList; track m) {
+                <li>
+                    <div class="cell">{{ m.toString().padStart(2, '0') }}</div>
+                </li>
+            }
+        </ul>
+    </div>
+    @if (shouldSelectSeconds) {
+        <div class="time-dots-separator">
+            <span>:</span>
+        </div>
+        <div class="time-items-list">
+            <ul class="list">
+                @for (s of secondsList; track s) {
+                    <li>
+                        <div class="cell">{{ s.toString().padStart(2, '0') }}</div>
+                    </li>
+                }
+            </ul>
+        </div>
+    }
+    @if (!shouldUse24hFormat) {
+        <div class="time-items-list">
+            <ul class="list">
+                <li>
+                    <div class="cell">{{ 'AM' | transloco }}</div>
+                    <div class="cell">{{ 'PM' | transloco }}</div>
+                </li>
+            </ul>
+        </div>
+    }
+</div>
+<div>
+    <upd-button>{{ 'Select' | transloco }}</upd-button>
+</div>