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

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

@@ -0,0 +1,124 @@
+import {
+    Component,
+    ViewEncapsulation,
+    Input,
+    SimpleChanges,
+    OnInit,
+    OnChanges,
+    ContentChild,
+    TemplateRef,
+    HostBinding,
+    Output,
+    EventEmitter
+} from '@angular/core';
+import { IconModel } from '@updevs/icons';
+import { UpdMaskConfig } from '@updevs/sdk/mask';
+import { ValidationStatusType, ComponentSizeType } from '@updevs/components';
+
+import { InputType } from './types/input.type';
+import { InputAppendDirective } from './directives/input-append.directive';
+import { InputPrependDirective } from './directives/input-prepend.directive';
+import { LoaderPositionType } from './types/loader-position.type';
+
+@Component({
+    selector: 'upd-input',
+    templateUrl: './input.component.html',
+    styleUrls: ['./input.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class InputComponent implements OnInit, OnChanges {
+    @HostBinding('class') hostWrapperClasses = '';
+    @ContentChild(InputAppendDirective) appendTemplate?: InputAppendDirective;
+    @ContentChild(InputPrependDirective) prependTemplate?: InputPrependDirective;
+
+    @Input() type: InputType = 'text';
+    @Input() placeholder = '';
+    @Input() label?: string;
+    @Input() mask?: string;
+    @Input() maskConfig?: UpdMaskConfig;
+    @Input() hint?: string;
+    @Input() hintTemplate?: TemplateRef<any>;
+    @Input() hintAsTooltip = false;
+    @Input() value?: any;
+    @Input() size: ComponentSizeType = 'default';
+    @Input() customClasses?: string;
+    @Input() wrapperClasses?: string;
+    @Input() name?: string;
+    @Input() maxLength?: number;
+    @Input() isDisabled = false;
+    @Input() isPlainText = false;
+    @Input() isReadOnly = false;
+    @Input() isLoading = false;
+    @Input() isRound = false;
+    @Input() isFlush = false;
+    @Input() isInputGroupFlat = false;
+    @Input() isPrependButton = false;
+    @Input() isAppendButton = false;
+    @Input() isFloating = false;
+    @Input() isRequired = false;
+    @Input() loaderPosition: LoaderPositionType = 'append';
+    @Input() prependIconModel?: IconModel;
+    @Input() appendIconModel?: IconModel;
+    @Input() validationStatus?: ValidationStatusType;
+    @Input() isValidationStatusLight = false;
+    @Input() invalidStatusText?: string;
+
+    @Output() readonly valueChange = new EventEmitter<any>();
+
+    classes: string[] = [];
+    get shouldDisplayInnerLabel(): boolean {
+        return !!this.label
+            && !this.prependIconModel
+            && !this.appendIconModel
+            && !this.isLoading
+            && !this.appendTemplate
+            && !this.prependTemplate;
+    }
+
+    ngOnInit(): void {
+        this.updateClasses();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.updateClasses();
+    }
+
+    onInputChange(evt: Event): void {
+        if (!evt.target) {
+            return;
+        }
+
+        this.valueChange.emit((evt.target as any).value);
+    }
+
+    private updateClasses(): void {
+        const lClasses: string[] = !this.isPlainText ? ['form-control'] : ['form-control-plaintext'];
+
+        if (this.isRound) {
+            lClasses.push('form-control-rounded');
+        }
+
+        if (this.isFlush) {
+            lClasses.push('form-control-flush');
+        }
+
+        if (this.size !== 'default') {
+            lClasses.push(`form-control-${this.size === 'large' ? 'lg' : 'sm'}`);
+        }
+
+        if (!!this.validationStatus) {
+            const statusCls = `is-${this.validationStatus}`;
+            lClasses.push(statusCls);
+
+            if (this.isValidationStatusLight) {
+                lClasses.push(`${statusCls}-lite`);
+            }
+        }
+
+        if (this.isFloating) {
+            this.hostWrapperClasses = (this.wrapperClasses || '') + ' form-floating';
+        }
+
+        this.classes = [...lClasses, ...(this.customClasses || '').split(' ')];
+    }
+}

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

@@ -0,0 +1,4 @@
+export * from './directives/public-api';
+export * from './types/public-api';
+export * from './input.component';
+export * from './upd-input.module';

package/form-controls/input/src/types/input.type.ts

@@ -0,0 +1 @@
+export type InputType = 'text' | 'number' | 'email' | 'file' | 'hidden' | 'password';

package/form-controls/input/src/types/loader-position.type.ts

@@ -0,0 +1 @@
+export type LoaderPositionType = 'append' | 'prepend';

package/form-controls/input/src/types/public-api.ts

@@ -0,0 +1,2 @@
+export * from './input.type';
+export * from './loader-position.type';

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

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdIconsModule } from '@updevs/icons';
+import { UpdMaskModule } from '@updevs/sdk/mask';
+import { UpdPopoverModule } from '@updevs/components/popover';
+
+import { InputComponent } from './input.component';
+import { InputAppendDirective } from './directives/input-append.directive';
+import { InputPrependDirective } from './directives/input-prepend.directive';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        UpdIconsModule,
+        UpdMaskModule,
+        UpdPopoverModule
+    ],
+    declarations: [
+        InputComponent,
+        InputAppendDirective,
+        InputPrependDirective
+    ],
+    exports: [
+        InputComponent,
+        InputAppendDirective,
+        InputPrependDirective
+    ]
+})
+export class UpdInputModule {}

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+<label class="form-check" [class.form-check-inline]="isInline">
+    <input type="radio" (change)="selected.emit()" [disabled]="isDisabled" [ngClass]="classes" [value]="value" [attr.name]="name"
+        [attr.readonly]="isReadOnly ? '' : undefined" [checked]="isChecked">
+    <span *ngIf="!!label" class="form-check-label">{{label}}</span>
+    <span *ngIf="!!description" class="form-check-description">{{description}}</span>
+    <div *ngIf="validationStatus === 'invalid' && !!invalidStatusText" class="invalid-feedback">{{invalidStatusText}}</div>
+</label>

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

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

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

@@ -0,0 +1,47 @@
+import { Component, OnInit, OnChanges, Input, SimpleChanges, HostBinding, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
+import { ValidationStatusType } from '@updevs/components';
+
+@Component({
+    selector: 'upd-radio',
+    templateUrl: './radio.component.html',
+    styleUrls: ['./radio.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class RadioComponent implements OnInit, OnChanges {
+    @HostBinding('class') @Input() wrapperClasses = '';
+
+    @Input() label?: string;
+    @Input() value?: any;
+    @Input() customClasses?: string;
+    @Input() name?: string;
+    @Input() description?: string;
+    @Input() isDisabled = false;
+    @Input() isReadOnly = false;
+    @Input() isChecked = false;
+    @Input() isInline = false;
+    @Input() validationStatus?: ValidationStatusType;
+    @Input() invalidStatusText?: string;
+
+    @Output() readonly selected = new EventEmitter<void>();
+
+    classes: string[] = [];
+
+    ngOnInit(): void {
+        this.updateClasses();
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.updateClasses();
+    }
+
+    private updateClasses(): void {
+        const lClasses: string[] = ['form-check-input'];
+
+        if (!!this.validationStatus) {
+            const statusCls = `is-${this.validationStatus}`;
+            lClasses.push(statusCls);
+        }
+
+        this.classes = [...lClasses, ...(this.customClasses || '').split(' ')];
+    }
+}

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

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

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

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

package/form-controls/select/src/components/multiple/select-multiple.component.html

@@ -0,0 +1,41 @@
+<label *ngIf="!!label" class="form-label">{{label}}</label>
+
+<div class="dropdown">
+    <div #componentBox class="input-group input-group-flat">
+        <div class="form-control" [class.remove-bottom-radius]="isDropdownOpen">
+            <ng-container *ngFor="let sel of currentSelection">
+                <span class="badge bg-primary select-multiple-value">{{sel.text}}
+                    <upd-button [isIcon]="true" [shouldIgnoreBtnClass]="true" (clicked)="onRemoveItem(sel)">
+                        <upd-icon tablerIcon="x"></upd-icon>
+                    </upd-button></span>&nbsp;
+            </ng-container>
+        </div>
+        <div class="input-group-text" [class.remove-bottom-radius]="isDropdownOpen">
+            <upd-button *ngIf="currentSelection.length > 0" [shouldIgnoreBtnClass]="true" (clicked)="clearSelection()"
+                customClasses="link-secondary">
+                <upd-icon [model]="{heroIcon:'x-mark', heroIconType: 'outline', heroIconSize:'small'}"></upd-icon>
+            </upd-button>
+            <upd-button *ngIf="!isLoading; else loadingIcon" [shouldIgnoreBtnClass]="true" (clicked)="openDropdown()"
+                customClasses="link-secondary ms-2">
+                <upd-icon [model]="{heroIcon:'chevron-down', heroIconType: 'outline', heroIconSize:'small'}"></upd-icon>
+            </upd-button>
+            <ng-template #loadingIcon>
+                <div class="select-loader-wrapper">
+                    <div class="spinner-border spinner-border-sm text-muted select-loader" role="status"></div>
+                </div>
+            </ng-template>
+        </div>
+    </div>
+    <div #searchBox>
+        <div #searchBoxChild [style.visibility]="isDropdownOpen ? 'visible' : 'hidden'" class="select-search-box">
+            <upd-input [placeholder]="placeholder" [isInputGroupFlat]="true" (click)="openDropdown()" (valueChange)="search($event)">
+                <ng-template updInputPrepend>
+                    <upd-icon [model]="{heroIcon:'magnifying-glass'}"></upd-icon>
+                </ng-template>
+            </upd-input>
+        </div>
+    </div>
+    <upd-list #list [items]="listItems" [maxHeight]="dropdownMaxHeight + 'px'" (selectedItem)="onSelectItem($event)"
+        [wrapperClasses]="dropdownClasses" [isVisible]="isDropdownOpen" [shouldOverflow]="true" [shouldDisplayItemsCounter]="true">
+    </upd-list>
+</div>

package/form-controls/select/src/components/multiple/select-multiple.component.scss

@@ -0,0 +1,6 @@
+@import "../shared";
+
+.select-multiple-value {
+    display: inline-flex;
+    align-items: center;
+}

package/form-controls/select/src/components/multiple/select-multiple.component.spec.ts

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

package/form-controls/select/src/components/multiple/select-multiple.component.ts

@@ -0,0 +1,69 @@
+import { Component, ViewEncapsulation, EventEmitter, Output } from '@angular/core';
+import { ListItem } from '@updevs/components/list';
+
+import { BaseSelectComponent } from '../../models/abstractions/base-select.component';
+import { SelectItem } from '../../models/select-item';
+
+@Component({
+    selector: 'upd-select-multiple',
+    templateUrl: './select-multiple.component.html',
+    styleUrls: ['./select-multiple.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class SelectMultipleComponent extends BaseSelectComponent {
+    /**
+     * Triggered when an item is selected.
+     */
+    @Output() readonly selectedItems = new EventEmitter<SelectItem[]>();
+
+    currentSelection: SelectItem[] = [];
+
+    clearSelection(): void {
+        this.currentSelection = [];
+        this._currentTerm = undefined;
+
+        this.updateActiveItemsOnList();
+    }
+
+    onSelectItem(item: ListItem): void {
+        const selectedItem = this.currentSelection.find(cs => cs.value === item.id);
+
+        if (!!selectedItem) {
+            this.onRemoveItem(selectedItem);
+            return;
+        }
+
+        for (const localBackupItem of this._localBackupItems) {
+            if ((localBackupItem.children?.length || 0) > 0) {
+                const child = localBackupItem.children?.find(c => c.value === item.id);
+
+                if (!!child) {
+                    this.currentSelection.push(child);
+                    break;
+                }
+            } else if (localBackupItem.value === item.id) {
+                this.currentSelection.push(localBackupItem);
+                break;
+            }
+        }
+
+        this.updateActiveItemsOnList();
+        this.selectedItems.emit(this.currentSelection);
+    }
+
+    onRemoveItem(item: SelectItem): void {
+        const idx = this.currentSelection.findIndex(cs => cs.value === item.value);
+
+        this.currentSelection.splice(idx, 1);
+        this.updateActiveItemsOnList();
+    }
+
+    private updateActiveItemsOnList(): void {
+        for (const backupItem of this._localBackupItems) {
+            const selectedItem = this.currentSelection.find(cs => cs.value === backupItem.value);
+            backupItem.listItem!.isActive = !!selectedItem;
+        }
+
+        this._setupLocalItems(this._localBackupItems);
+    }
+}

package/form-controls/select/src/components/shared.scss

@@ -0,0 +1,40 @@
+.select-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%);
+}
+
+.select-dropdown-content-open {
+    display: block !important;
+}
+
+.select-loader-wrapper {
+    height: 24px;
+
+    .select-loader {
+        height: 24px;
+        width: 24px;
+    }
+}
+
+.select-search-box {
+    position: absolute;
+    z-index: 1;
+    padding: 0.5rem;
+    margin-top: -1px;
+    background: var(--upd-body-bg);
+    border: var(--upd-border-width) var(--upd-border-style) var(--upd-border-color);
+}
+
+.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;;
+}

package/form-controls/select/src/components/single/select.component.html

@@ -0,0 +1,53 @@
+<label *ngIf="!!label" class="form-label">{{label}}</label>
+
+<ng-container *ngIf="!useSystemStyle; else defaultOsTpl">
+    <div class="dropdown">
+        <div #componentBox class="input-group input-group-flat">
+            <div class="form-control" [class.remove-bottom-radius]="isDropdownOpen">
+                <span *ngIf="!!currentSelection">{{currentSelection.text}}</span>
+            </div>
+            <div class="input-group-text" [class.remove-bottom-radius]="isDropdownOpen">
+                <upd-button *ngIf="!!currentSelection" [shouldIgnoreBtnClass]="true" (clicked)="clearSelection()"
+                    customClasses="link-secondary">
+                    <upd-icon [model]="{heroIcon:'x-mark', heroIconType: 'outline', heroIconSize:'small'}"></upd-icon>
+                </upd-button>
+                <upd-button *ngIf="!isLoading; else loadingIcon" [shouldIgnoreBtnClass]="true" (clicked)="openDropdown()"
+                    customClasses="link-secondary ms-2">
+                    <upd-icon [model]="{heroIcon:'chevron-down', heroIconType: 'outline', heroIconSize:'small'}"></upd-icon>
+                </upd-button>
+                <ng-template #loadingIcon>
+                    <div class="select-loader-wrapper">
+                        <div class="spinner-border spinner-border-sm text-muted select-loader" role="status"></div>
+                    </div>
+                </ng-template>
+            </div>
+        </div>
+        <div #searchBox>
+            <div #searchBoxChild [style.visibility]="isDropdownOpen ? 'visible' : 'hidden'" class="select-search-box">
+                <upd-input [placeholder]="placeholder" [isInputGroupFlat]="true" (click)="openDropdown()" (valueChange)="search($event)">
+                    <ng-template updInputPrepend>
+                        <upd-icon [model]="{heroIcon:'magnifying-glass'}"></upd-icon>
+                    </ng-template>
+                </upd-input>
+            </div>
+        </div>
+        <upd-list #list [items]="listItems" [maxHeight]="dropdownMaxHeight + 'px'" (selectedItem)="onSelectItem($event)"
+            [wrapperClasses]="dropdownClasses" [isVisible]="isDropdownOpen" [shouldOverflow]="true" [shouldDisplayItemsCounter]="true">
+        </upd-list>
+    </div>
+</ng-container>
+
+<ng-template #defaultOsTpl>
+    <select class="form-select" [attr.placeholder]="placeholder">
+        <ng-container *ngFor="let item of localItems">
+            <ng-container *ngIf="(item.children?.length || 0) > 0; else defaultTpl">
+                <optgroup [label]="item.text">
+                    <option *ngFor="let child of item.children" [value]="child.value">{{child.text}}</option>
+                </optgroup>
+            </ng-container>
+            <ng-template #defaultTpl>
+                <option [value]="item.value">{{item.text}}</option>
+            </ng-template>
+        </ng-container>
+    </select>
+</ng-template>

package/form-controls/select/src/components/single/select.component.scss

@@ -0,0 +1,3 @@
+@import "../shared";
+
+

package/form-controls/select/src/components/single/select.component.spec.ts

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

package/form-controls/select/src/components/single/select.component.ts

@@ -0,0 +1,58 @@
+import {
+    Component,
+    Input,
+    ViewEncapsulation,
+    Output,
+    EventEmitter
+} from '@angular/core';
+import { ListItem } from '@updevs/components/list';
+
+import { BaseSelectComponent } from '../../models/abstractions/base-select.component';
+import { SelectItem } from '../../models/select-item';
+
+@Component({
+    selector: 'upd-select',
+    templateUrl: './select.component.html',
+    styleUrls: ['./select.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class SelectComponent extends BaseSelectComponent {
+    /**
+     * If true, it'll use the default style of the OS, no search capabilities.
+     */
+    @Input() useSystemStyle = false;
+
+    /**
+     * Triggered when an item is selected.
+     */
+    @Output() readonly selectedItem = new EventEmitter<SelectItem>();
+
+    currentSelection?: SelectItem;
+
+    onSelectItem(item: ListItem): void {
+        this._currentTerm = item.text;
+        this.isDropdownOpen = false;
+
+        for (const localBackupItem of this._localBackupItems) {
+            if ((localBackupItem.children?.length || 0) > 0) {
+                this.currentSelection = localBackupItem.children?.find(c => c.value === item.id);
+
+                if (!!this.currentSelection) {
+                    break;
+                }
+            } else if (localBackupItem.value === item.id) {
+                this.currentSelection = localBackupItem;
+                break;
+            }
+        }
+
+        this.selectedItem.emit(this.currentSelection);
+    }
+
+    clearSelection(): void {
+        this.currentSelection = undefined;
+        this._currentTerm = undefined;
+
+        this.search();
+    }
+}

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

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