@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.3

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

@@ -0,0 +1,259 @@
+import {
+    Directive,
+    HostBinding,
+    ViewChild,
+    ElementRef,
+    OnInit,
+    Input,
+    Output,
+    EventEmitter,
+    inject,
+    NgZone,
+    Renderer2, RendererStyleFlags2
+} from '@angular/core';
+import { BaseComponent, DomEventsService, PositioningService, ComputePositionResult } from '@updevs/sdk/layout';
+import { ListItem } from '@updevs/components/list';
+import { Tools } from '@updevs/sdk/core';
+import { SearchRequestModel, SearchResponseModel, BaseSearchStore } from '@updevs/sdk/stores';
+import { tap, debounceTime, Observable, Subject } from 'rxjs';
+
+import { SelectItem } from '../select-item';
+
+import Utils = Tools.Utils;
+
+@Directive()
+export abstract class BaseSelectComponent extends BaseComponent implements OnInit {
+    @HostBinding('class') wrapperClasses = '';
+    @ViewChild('componentBox', { read: ElementRef }) componentBox?: ElementRef;
+    @ViewChild('searchBox', { read: ElementRef }) searchBox?: ElementRef;
+    @ViewChild('searchBoxChild', { read: ElementRef }) searchBoxChild?: ElementRef;
+    @ViewChild('list', { read: ElementRef }) list?: ElementRef;
+
+    /**
+     * Select items.
+     * If provided, the select will be considered static.
+     */
+    @Input() items?: SelectItem[];
+    /**
+     * Store used to load/filter the items.
+     */
+    @Input() store?: BaseSearchStore<any>;
+    /**
+     * Observable used to load/filter the items.
+     */
+    @Input() observable?: (request?: SearchRequestModel, masterId?: any) => Observable<SearchResponseModel<any>>;
+    /**
+     * Name of the property in the object that represents the ID/key of the option.
+     * **Note:** used only for remote data.
+     */
+    @Input() itemKey?: string;
+    /**
+     * Name of the property in the object that represents the value/description of the option.
+     * **Note:** used only for remote data.
+     */
+    @Input() itemValue?: string;
+    /**
+     * Description of the field.
+     */
+    @Input() label?: string;
+    /**
+     * Placeholder.
+     */
+    @Input() placeholder = '';
+    /**
+     * Maximum height of the dropdown.
+     */
+    @Input() dropdownMaxHeight = 300;
+    @Input() typeaheadDebounce = 200;
+    @Input() shouldAutoSearch = true;
+    @Input() shouldCloseOnOutsideClick = true;
+
+    @Output() readonly dropdownOpenStatusChange = new EventEmitter<boolean>();
+
+    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', '');
+        }
+    }
+
+    protected _currentTerm?: string;
+    protected _localBackupItems: SelectItem[] = [];
+
+    private isStaticList = false;
+    private _isDropdownOpen = false;
+    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);
+
+    abstract clearSelection(): void;
+    abstract onSelectItem(item: ListItem): void;
+
+    ngOnInit(): void {
+        this.isStaticList = (this.items?.length || 0) > 0;
+
+        if (this.shouldAutoSearch) {
+            if (this.isStaticList) {
+                this._setupLocalItems(this.items!);
+            } else {
+                this.searchRemote();
+            }
+        }
+
+        if (this.isStaticList) {
+            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.isStaticList) {
+            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) {
+            let 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 = new SearchRequestModel({ 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);
+    }
+}

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

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

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

@@ -0,0 +1,26 @@
+import { ListItem } from '@updevs/components/list';
+
+export interface SelectItem {
+    /**
+     * Value of the single item if selected.
+     * If grouped, will be the group key.
+     */
+    value?: any;
+    /**
+     * Description of the single item.
+     * If grouped, will be the group name.
+     */
+    text: string;
+    /**
+     * Full object's data.
+     */
+    objectData?: any;
+    /**
+     * Allows to customize the list item.
+     */
+    listItem?: ListItem;
+    /**
+     * Children.
+     */
+    children?: SelectItem[];
+}

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

@@ -0,0 +1,4 @@
+export * from './models/public-api';
+export * from './components/single/select.component';
+export * from './components/multiple/select-multiple.component';
+export * from './upd-select.module';

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

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslocoModule } from '@ngneat/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 { SelectComponent } from './components/single/select.component';
+import { SelectMultipleComponent } from './components/multiple/select-multiple.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        UpdCoreLayoutModule,
+        UpdListModule,
+        UpdInputModule,
+        UpdIconsModule,
+        UpdButtonModule,
+        TranslocoModule
+    ],
+    declarations: [
+        SelectComponent,
+        SelectMultipleComponent
+    ],
+    exports: [
+        SelectComponent,
+        SelectMultipleComponent
+    ]
+})
+export class UpdSelectModule {}

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

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../../../node_modules/@updevs/components/form-controls/textarea",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

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

@@ -0,0 +1 @@
+export * from './public-api';

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

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

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

@@ -0,0 +1,8 @@
+<label *ngIf="!!label || displayCharactersCount" class="form-label">
+    {{label}}
+    <span *ngIf="displayCharactersCount && !!maxLength" class="form-label-description">{{value?.length || 0}}/{{maxLength}}</span>
+</label>
+<textarea [attr.maxlength]="maxLength" [disabled]="isDisabled" [ngClass]="classes"
+    [placeholder]="placeholder" [value]="value || ''" [attr.name]="name" [attr.readonly]="isReadOnly ? '' : 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,47 @@
+import { Component, ViewEncapsulation, Input, HostBinding, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+
+@Component({
+    selector: 'upd-textarea',
+    templateUrl: './textarea.component.html',
+    styleUrls: ['./textarea.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class TextareaComponent implements OnInit, OnChanges {
+    @HostBinding('class') hostWrapperClasses = '';
+
+    @Input() placeholder = '';
+    @Input() label?: string;
+    @Input() value?: string;
+    @Input() customClasses?: string;
+    @Input() wrapperClasses?: string;
+    @Input() name?: string;
+    @Input() maxLength?: number;
+    @Input() rows?: number;
+    @Input() isDisabled = false;
+    @Input() isReadOnly = false;
+    @Input() displayCharactersCount = false;
+
+    classes: string[] = [];
+
+    ngOnInit(): void {
+        this.updateClasses();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.updateClasses();
+    }
+
+    updateValue(event?: any): void {
+        if (!event && !event.target) {
+            return;
+        }
+
+        const target = event.target as HTMLTextAreaElement;
+        this.value = 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/ng-package.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../../../node_modules/@updevs/components/form-controls/time-picker",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}

package/form-controls/time-picker/src/assets/i18n/en.json

@@ -0,0 +1,5 @@
+{
+    "AM": "AM",
+    "PM": "PM",
+    "Select": "Select"
+}

package/form-controls/time-picker/src/assets/i18n/pt.json

@@ -0,0 +1,5 @@
+{
+    "AM": "AM",
+    "PM": "PM",
+    "Select": "Selecionar"
+}

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

@@ -0,0 +1 @@
+export * from './public-api';

package/form-controls/time-picker/src/public-api.ts

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

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);
+    }
+}