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

package/dropdown/src/dropdown.component.ts

@@ -1,182 +0,0 @@
-import {
-    Component,
-    HostBinding,
-    ViewEncapsulation,
-    Input,
-    OnInit,
-    OnChanges,
-    SimpleChanges,
-    Output,
-    EventEmitter,
-    NgZone,
-    ElementRef,
-    Renderer2,
-    RendererStyleFlags2,
-    inject
-} from '@angular/core';
-import { BaseComponent, PositioningService, ComputePositionResult, DomEventsService } from '@updevs/sdk/layout';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-
-import { DropdownItem } from './models/dropdown-item';
-
-@Component({
-    selector: 'upd-dropdown',
-    templateUrl: './dropdown.component.html',
-    styleUrls: ['./dropdown.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class DropdownComponent extends BaseComponent implements OnInit, OnChanges {
-    @HostBinding('class') localWrapperClasses = '';
-
-    @Input() items: DropdownItem[] = [];
-    @Input() header?: string;
-    @Input()
-    set isOpen(value: boolean) {
-        this.updateOpenState(value);
-
-        if (this.shouldCloseOnOutsideClick) {
-            this.closeOnOutsideClick();
-        }
-    }
-    @Input() shouldCloseOnOutsideClick = false;
-    @Input() arrowType?: 'left' | 'right';
-    @Input() wrapperClasses = '';
-    /**
-     * Elements that won't trigger the close of the dropdown if clicked upon.
-     * Only works when `shouldCloseOnOutsideClick` is set to true.
-     */
-    @Input() elementsExcludedFromOutsideClick?: HTMLElement[];
-    /**
-     * Maximum height of the component.
-     * If set, scroll bars will be used when the content's size is bigger than the component's.
-     */
-    @Input() maxHeight?: number;
-    /**
-     * Maximum width of the component.
-     * If set, scroll bars will be used when the content's size is bigger than the component's.
-     */
-    @Input() maxWidth?: number;
-    /**
-     * If set, the position of the dropdown will be set according to this element.
-     */
-    @Input() dropdownReference?: ElementRef;
-    /**
-     * If a reference is provided, this will be the position of the dropdown in relation to that reference.
-     */
-    @Input() dropdownReferencePosition: TopBottomLeftRightType = 'bottom';
-
-    @Output() readonly isOpenChange = new EventEmitter<boolean>();
-    @Output() readonly selectedItem = new EventEmitter<DropdownItem>();
-    @Output() readonly checkboxChanged = new EventEmitter<DropdownItem>();
-
-    get isOpen(): boolean {
-        return this._isOpen;
-    }
-
-    private baseWrapperClasses = 'dropdown-menu';
-    private _isOpen = false;
-    private readonly dropdownElement: HTMLElement;
-    private readonly ngZone = inject(NgZone);
-    private readonly elementRef = inject(ElementRef);
-    private readonly renderer = inject(Renderer2);
-    private readonly positioningService = inject(PositioningService);
-    private readonly domEventsService = inject(DomEventsService);
-
-    constructor() {
-        super();
-        this.dropdownElement = this.elementRef.nativeElement;
-    }
-
-    ngOnInit(): void {
-        this.updateStyle();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.updateStyle();
-    }
-
-    onSelect(item: DropdownItem): void {
-        this.selectedItem.emit(item);
-    }
-
-    onCheckboxChange(item: DropdownItem, isChecked: boolean): void {
-        item.isChecked = isChecked;
-        this.checkboxChanged.emit(item);
-    }
-
-    private closeOnOutsideClick(): void {
-        const excludedElements = [];
-
-        if (!!this.dropdownReference) {
-            excludedElements.push(this.dropdownReference.nativeElement);
-        }
-
-        const outsideClickSub = this.domEventsService.startOutsideClickListener(
-            () => this.ngZone.run(() => {
-                this.updateOpenState(false);
-                this.ngZone.run(() => this.updateWrapperClasses());
-            }),
-            this.dropdownElement,
-            true,
-            ...excludedElements
-        );
-        this.addSubscriptions(outsideClickSub);
-    }
-
-    private updateStyle(): void {
-        this.updateWrapperClasses();
-        this.updateMaxHeight();
-        this.startPositionUpdate();
-    }
-
-    private updateWrapperClasses(): void {
-        this.localWrapperClasses = this.baseWrapperClasses + ' ' + this.wrapperClasses;
-
-        if (this.isOpen) {
-            this.localWrapperClasses += ' dropdown-show';
-        }
-
-        if (!!this.arrowType) {
-            this.localWrapperClasses += ' dropdown-menu-arrow' + (this.arrowType === 'right' ? ' dropdown-menu-end' : '');
-        }
-
-        if (!!this.maxHeight) {
-            this.localWrapperClasses += ' dropdown-overflow';
-        }
-    }
-
-    private updateOpenState(isOpen: boolean): void {
-        this._isOpen = isOpen;
-        this.isOpenChange.emit(isOpen);
-    }
-
-    private updateMaxHeight(): void {
-        this.renderer.setStyle(this.dropdownElement, 'max-height', `${this.maxHeight}px`, RendererStyleFlags2.Important);
-    }
-
-    private startPositionUpdate(): void {
-        if (!this.dropdownReference) {
-            return;
-        }
-
-        this.ngZone.runOutsideAngular(() =>
-            this.positioningService
-                .computePosition(this.dropdownReference!, this.elementRef, { placement: this.dropdownReferencePosition })
-                .subscribe(resp => this.updatePosition(resp))
-        );
-    }
-
-    private updatePosition(result: ComputePositionResult): void {
-        const reference = this.dropdownReference!.nativeElement.getBoundingClientRect();
-        const ddElement = this.dropdownElement;
-
-        if (!!this.maxWidth) {
-            this.renderer.setStyle(ddElement, 'max-width', `${this.maxWidth}px`, RendererStyleFlags2.Important);
-        }
-
-        this.renderer.setStyle(ddElement, 'position', result.strategy, RendererStyleFlags2.Important);
-        this.renderer.setStyle(ddElement, 'width', `${Math.abs(reference.width)}px`, RendererStyleFlags2.Important);
-        this.renderer.setStyle(ddElement, 'left', `${result.x}px`, RendererStyleFlags2.Important);
-        this.renderer.setStyle(ddElement, 'top', `${result.y}px`, RendererStyleFlags2.Important);
-    }
-}

package/dropdown/src/upd-dropdown.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UpdIconsModule } from '@updevs/icons';
-import { UpdButtonModule } from '@updevs/components/button';
-import { UpdRadioModule } from '@updevs/components/form-controls/radio';
-import { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';
-
-import { DropdownComponent } from './dropdown.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        UpdIconsModule,
-        UpdRadioModule,
-        UpdCheckboxModule,
-        UpdButtonModule
-    ],
-    declarations: [
-        DropdownComponent
-    ],
-    exports: [
-        DropdownComponent
-    ]
-})
-export class UpdDropdownModule {}

package/form/index.ts

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

package/form/ng-package.json

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

package/form/src/form.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-    declarations: [],
-    imports: [
-        CommonModule
-    ]
-})
-export class FormModule {}

package/form-controls/checkbox/index.ts

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

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

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

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

@@ -1,7 +0,0 @@
-<label class="form-check" [class.form-check-inline]="isInline" [class.form-switch]="isSwitch">
-    <input type="checkbox" (change)="changed.emit(isChecked)" [disabled]="isDisabled" [ngClass]="classes" [value]="value"
-        [attr.name]="name" [attr.readonly]="isReadOnly ? '' : undefined" [(ngModel)]="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/checkbox/src/checkbox.component.spec.ts

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

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

@@ -1,48 +0,0 @@
-import { Component, SimpleChanges, Input, OnInit, OnChanges, ViewEncapsulation, HostBinding, Output, EventEmitter } from '@angular/core';
-import { ValidationStatusType } from '@updevs/components';
-
-@Component({
-    selector: 'upd-checkbox',
-    templateUrl: './checkbox.component.html',
-    styleUrls: ['./checkbox.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class CheckboxComponent 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() isSwitch = false;
-    @Input() validationStatus?: ValidationStatusType;
-    @Input() invalidStatusText?: string;
-
-    @Output() readonly changed = new EventEmitter<boolean>();
-
-    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/checkbox/src/upd-checkbox.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { CheckboxComponent } from './checkbox.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        FormsModule
-    ],
-    declarations: [
-        CheckboxComponent
-    ],
-    exports: [
-        CheckboxComponent
-    ]
-})
-export class UpdCheckboxModule {}

package/form-controls/input/index.ts

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

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

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

package/form-controls/input/src/directives/input-append.directive.spec.ts

@@ -1,8 +0,0 @@
-import { InputAppendDirective } from './input-append.directive';
-
-describe('InputAppendDirective', () => {
-  it('should create an instance', () => {
-    const directive = new InputAppendDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/form-controls/input/src/directives/input-append.directive.ts

@@ -1,11 +0,0 @@
-import { Directive, TemplateRef } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updInputAppend]'
-})
-export class InputAppendDirective {
-    constructor(
-        public templateRef: TemplateRef<any>
-    ) {
-    }
-}

package/form-controls/input/src/directives/input-prepend.directive.spec.ts

@@ -1,8 +0,0 @@
-import { InputPrependDirective } from './input-prepend.directive';
-
-describe('InputPrependDirective', () => {
-  it('should create an instance', () => {
-    const directive = new InputPrependDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/form-controls/input/src/directives/input-prepend.directive.ts

@@ -1,11 +0,0 @@
-import { Directive, TemplateRef } from '@angular/core';
-
-@Directive({
-    selector: 'ng-template[updInputPrepend]'
-})
-export class InputPrependDirective {
-    constructor(
-        public templateRef: TemplateRef<any>
-    ) {
-    }
-}

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

@@ -1,82 +0,0 @@
-<ng-container *ngIf="!!appendTemplate || !!prependTemplate; else structureTpl">
-    <ng-template [ngTemplateOutlet]="labelTpl"></ng-template>
-    <div class="input-group" [class.input-group-flat]="isInputGroupFlat">
-        <ng-container *ngIf="!!prependTemplate">
-            <div *ngIf="!isPrependButton" class="input-group-text">
-                <ng-template [ngTemplateOutlet]="prependTemplate.templateRef"></ng-template>
-            </div>
-            <ng-template *ngIf="isPrependButton" [ngTemplateOutlet]="prependTemplate.templateRef"></ng-template>
-        </ng-container>
-        <ng-template [ngTemplateOutlet]="inputTpl"></ng-template>
-        <ng-container *ngIf="!!appendTemplate">
-            <div *ngIf="!isAppendButton" class="input-group-text">
-                <ng-template [ngTemplateOutlet]="appendTemplate.templateRef"></ng-template>
-            </div>
-            <ng-template *ngIf="isAppendButton" [ngTemplateOutlet]="appendTemplate.templateRef"></ng-template>
-        </ng-container>
-    </div>
-</ng-container>
-
-<ng-template #structureTpl>
-    <ng-template *ngIf="!!prependIconModel || !!appendIconModel || isLoading; else inputTpl" [ngTemplateOutlet]="inputIconTpl"></ng-template>
-</ng-template>
-
-<ng-template #inputTpl>
-    <ng-container *ngIf="(!hint && !hintTemplate); else hintTpl">
-        <ng-template *ngIf="shouldDisplayInnerLabel && !isFloating" [ngTemplateOutlet]="labelTpl"></ng-template>
-        <ng-template [ngTemplateOutlet]="basicInputTpl"></ng-template>
-        <ng-template *ngIf="shouldDisplayInnerLabel && isFloating" [ngTemplateOutlet]="labelTpl"></ng-template>
-    </ng-container>
-</ng-template>
-
-<ng-template #inputIconTpl>
-    <ng-template [ngTemplateOutlet]="labelTpl"></ng-template>
-    <div class="input-icon">
-        <span *ngIf="!!prependIconModel || (isLoading && loaderPosition === 'prepend')" class="input-icon-addon">
-            <ng-container *ngIf="!!prependIconModel; else loaderTpl">
-                <upd-icon [model]="prependIconModel"></upd-icon>
-            </ng-container>
-        </span>
-        <ng-template [ngTemplateOutlet]="inputTpl"></ng-template>
-        <span *ngIf="!!appendIconModel || (isLoading && loaderPosition === 'append')" class="input-icon-addon">
-            <ng-container *ngIf="!!appendIconModel; else loaderTpl">
-                <upd-icon [model]="appendIconModel"></upd-icon>
-            </ng-container>
-        </span>
-    </div>
-</ng-template>
-
-<ng-template #hintTpl>
-    <ng-template [ngTemplateOutlet]="labelTpl"></ng-template>
-    <div class="row g-2">
-        <div class="col">
-            <ng-template [ngTemplateOutlet]="basicInputTpl"></ng-template>
-        </div>
-        <div class="col-auto align-self-center">
-            <span class="form-help" [updPopover]="hint" [updPopoverTemplate]="hintTemplate"
-                [updPopoverActAsTooltip]="hintAsTooltip">?</span>
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #loaderTpl>
-    <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
-</ng-template>
-
-<ng-template #basicInputTpl>
-    <ng-container *ngIf="!!mask; else defaultInputTpl">
-        <input [updMask]="mask" [updMaskConfig]="maskConfig" [attr.type]="type" [attr.maxlength]="maxLength" [disabled]="isDisabled"
-            [ngClass]="classes" [placeholder]="placeholder" [value]="value || ''" [attr.name]="name"
-            [attr.readonly]="isReadOnly ? '' : undefined" (input)="onInputChange($event)"/>
-    </ng-container>
-    <ng-template #defaultInputTpl>
-        <input [attr.type]="type" [attr.maxlength]="maxLength" [disabled]="isDisabled" [ngClass]="classes"
-            [placeholder]="placeholder" [value]="value || ''" [attr.name]="name" [attr.readonly]="isReadOnly ? '' : undefined"
-            (input)="onInputChange($event)"/>
-    </ng-template>
-    <div *ngIf="validationStatus === 'invalid' && !!invalidStatusText" class="invalid-feedback">{{invalidStatusText}}</div>
-</ng-template>
-
-<ng-template #labelTpl>
-    <label *ngIf="!!label" class="form-label" [class.required]="isRequired">{{label}}</label>
-</ng-template>

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

@@ -1,13 +0,0 @@
-.input-group-text .form-check > .form-check-input {
-    margin: 0 !important;
-}
-
-.input-group-text > upd-checkbox {
-    height: 16px !important; // TODO: validate if it won't break other sizes.
-}
-
-.input-group-text .form-check {
-    margin: 0 !important;
-    padding-left: 0 !important;
-    min-height: 16px !important;
-}

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

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

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(' ')];
-    }
-}