@updevs/components 1.0.0-alpha.5 → 1.0.0-alpha.50

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

@@ -1,259 +0,0 @@
-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/upd-select.module.ts

@@ -1,32 +0,0 @@
-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/index.ts

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

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

@@ -1,7 +0,0 @@
-{
-    "$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/textarea.component.html

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-{
-    "$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/time-picker.component.html

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

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

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

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

@@ -1,44 +0,0 @@
-<div class="d-flex">
-    <div class="time-items-list">
-        <ul class="list">
-            <li *ngFor="let h of hoursList">
-                <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">
-            <li *ngFor="let m of minutesList">
-                <div class="cell">{{m.toString().padStart(2, '0')}}</div>
-            </li>
-        </ul>
-    </div>
-    <ng-container *ngIf="shouldSelectSeconds">
-        <div class="time-dots-separator">
-            <span>:</span>
-        </div>
-        <div class="time-items-list">
-            <ul class="list">
-                <li *ngFor="let s of secondsList">
-                    <div class="cell">{{s.toString().padStart(2, '0')}}</div>
-                </li>
-            </ul>
-        </div>
-    </ng-container>
-    <ng-container *ngIf="!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>
-    </ng-container>
-</div>
-<div>
-    <upd-button>{{'Select' | transloco}}</upd-button>
-</div>

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

@@ -1,47 +0,0 @@
-.time-dots-separator {
-    display: flex;
-    align-items: center;
-}
-
-.time-items-list {
-    padding-left: 15px;
-    padding-right: 15px;
-    display: flex;
-    justify-items: center;
-    flex: auto;
-    height: 240px;
-
-    .list {
-        position: relative;
-        flex: 1 0 auto;
-        margin: 0;
-        padding: 0;
-        overflow-y: auto;
-        text-align: center;
-        list-style: none;
-
-
-        li {
-            margin-top: 0;
-            display: block;
-            height: 40px;
-            cursor: pointer;
-
-            .-item {
-                display: block;
-                cursor: pointer;
-                transition: color .3s;
-            }
-        }
-    }
-}
-
-.list {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.list::-webkit-scrollbar {
-    display: none;
-}