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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-{
-    "$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

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

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

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

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

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

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

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

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

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

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

@@ -1,58 +0,0 @@
-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();
-    }
-}