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

package/list/src/list.component.ts

@@ -1,147 +0,0 @@
-import {
-    Component,
-    HostBinding,
-    Input,
-    Renderer2,
-    ElementRef,
-    OnInit,
-    RendererStyleFlags2,
-    ViewEncapsulation,
-    Output,
-    EventEmitter,
-    OnChanges,
-    SimpleChanges
-} from '@angular/core';
-
-import { ListItem } from './models/list-item';
-import { ListItemModel } from './models/list-item.model';
-
-@Component({
-    selector: 'upd-list',
-    templateUrl: './list.component.html',
-    styleUrls: ['./list.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class ListComponent implements OnInit, OnChanges {
-    @HostBinding('class') localWrapperClasses = '';
-
-    /**
-     * List items.
-     * If provided, the single will be considered static.
-     */
-    @Input() items?: ListItem[];
-    /**
-     * Whether the content should overflow or not.
-     */
-    @Input() shouldOverflow = false;
-    /**
-     * Whether the list will fit the layout of the container.
-     * If set to false, the list's round borders will be visible. It'll have a detached behavior.
-     */
-    @Input() isFlush = true;
-    @Input() isVisible = true;
-    @Input() isHoverable = false;
-    @Input() shouldDisplayItemsCounter = false;
-    @Input() wrapperClasses = '';
-    /**
-     * Maximum height of the component.
-     * Note: The unit should also be provided, i.e.: 350px, 35rem, etc.
-     */
-    @Input() maxHeight?: string;
-    /**
-     * Translation key used to inform no records have been found.
-     * If translation is not being used, you can insert the custom text here as well.
-     */
-    @Input() noRecordsFoundKey?: string = 'NoRecordsFound';
-    /**
-     * Translation key used to describe 1 item found.
-     * If translation is not being used, you can insert the custom text here as well.
-     */
-    @Input() itemFoundKey?: string = 'Item';
-    /**
-     * Translation key used to describe items (plural) found.
-     * If translation is not being used, you can insert the custom text here as well.
-     */
-    @Input() itemsFoundKey?: string = 'Items';
-
-    @Output() readonly checkboxChanged = new EventEmitter<ListItem>();
-    @Output() readonly selectedItem = new EventEmitter<ListItem>();
-
-    listItems: ListItemModel[] = [];
-    currentSelection: ListItem[] = [];
-
-    private localBackupItems: ListItem[] = [];
-
-    constructor(
-        private renderer: Renderer2,
-        private elementRef: ElementRef
-    ) {
-    }
-
-    ngOnInit(): void {
-        this.setupStyle();
-        this.updateWrapperClasses();
-        this.setupItems();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.updateWrapperClasses();
-
-        if (!!changes['items']) {
-            this.setupItems();
-        }
-    }
-
-    onCheckboxChange(item: ListItem, isChecked: boolean): void {
-        item.isChecked = isChecked;
-        this.checkboxChanged.emit(item);
-    }
-
-    onSelectItem(evt: any, item: ListItem): void {
-        evt.stopPropagation();
-        this.selectedItem.emit(item);
-    }
-
-    private setupItems(): void {
-        const tempItems: ListItemModel[] = [];
-
-        this.items?.forEach(it => {
-            const parent = new ListItemModel(it);
-
-            if ((it.children?.length || 0) > 0) {
-                parent.children = [];
-                it.children?.forEach(child => parent.children!.push(new ListItemModel(child)));
-            }
-
-            tempItems.push(parent);
-        });
-
-        this.listItems = [...tempItems];
-    }
-
-    private setupStyle(): void {
-        if (!!this.maxHeight) {
-            this.renderer.setStyle(this.elementRef.nativeElement, 'max-height', this.maxHeight, RendererStyleFlags2.Important);
-        }
-    }
-
-    private updateWrapperClasses(): void {
-        this.localWrapperClasses = 'list-group' + ` ${this.wrapperClasses}`;
-
-        if (this.isFlush) {
-            this.localWrapperClasses += ' list-group-flush';
-        }
-
-        if (this.isHoverable) {
-            this.localWrapperClasses += '  list-group-hoverable';
-        }
-
-        if (this.shouldOverflow) {
-            this.localWrapperClasses += '  overflow-auto';
-        }
-
-        if (!this.isVisible) {
-            this.localWrapperClasses += ' list-hidden';
-        }
-    }
-}

package/list/src/models/list-item.model.ts

@@ -1,35 +0,0 @@
-import { BgColorStyleType } from '@updevs/sdk/layout';
-
-import { ListItem } from './list-item';
-import { BadgePositionType } from './badge-position.type';
-
-export class ListItemModel implements ListItem {
-    id?: any;
-    text?: string;
-    description?: string;
-    icon?: string;
-    isChecked?: boolean;
-    isSwitch?: boolean;
-    hasCheckbox?: boolean;
-    isDisabled?: boolean;
-    isActive?: boolean;
-    leftBoxText?: string;
-    leftBoxImage?: string;
-    badgeColor?: BgColorStyleType;
-    badgeText?: string;
-    badgePosition?: BadgePositionType;
-    children?: ListItemModel[];
-    get hasLeftBox(): boolean {
-        return !!this.leftBoxImage || !!this.leftBoxText || !!this.badgeColor || this.hasCheckbox === true;
-    }
-    get hasLeftBadge(): boolean {
-        return !!this.badgeColor && this.badgePosition === 'left';
-    }
-    get hasBottomRightBadge(): boolean {
-        return !!this.badgeColor && this.badgePosition === 'left-box-bottom-right';
-    }
-
-    constructor(init?: ListItem) {
-        Object.assign(this, init);
-    }
-}

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

@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslocoService, TranslocoModule } from '@ngneat/transloco';
-import { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';
-import { UpdIconsModule } from '@updevs/icons';
-
-import * as en from './assets/i18n/en.json';
-import * as pt from './assets/i18n/pt.json';
-import { ListComponent } from './list.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TranslocoModule,
-        UpdCheckboxModule,
-        UpdIconsModule
-    ],
-    declarations: [
-        ListComponent
-    ],
-    exports: [
-        ListComponent
-    ]
-})
-export class UpdListModule {
-    constructor(translocoService: TranslocoService) {
-        translocoService.setTranslation(en, 'en');
-        translocoService.setTranslation(pt, 'pt');
-    }
-}

package/ng-package.json

@@ -1,10 +0,0 @@
-{
-    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-    "dest": "../../../node_modules/@updevs/components",
-    "lib": {
-        "entryFile": "src/public-api.ts"
-    },
-    "assets": [
-        "assets"
-    ]
-}

package/popover/index.ts

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

package/popover/ng-package.json

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

package/popover/src/popover.component.html

@@ -1,20 +0,0 @@
-<div class="popover-arrow upd-popover-arrow -{{placement}}"></div>
-<ng-container *ngIf="!!title || !!titleTemplate">
-    <h3 *ngIf="title; else titleTpl" [innerHTML]="title" class="popover-header"></h3>
-    <ng-template #titleTpl>
-        <div class="popover-header">
-            <ng-template [ngTemplateOutlet]="titleTemplate!"></ng-template>
-        </div>
-    </ng-template>
-</ng-container>
-<div class="popover-body">
-    <ng-container *ngIf="!!text; else contentTpl">
-        <span [innerHTML]="text"></span>
-    </ng-container>
-    <ng-template #contentTpl>
-        <ng-container *ngIf="!template; else customContentTpl">
-            <ng-content></ng-content>
-        </ng-container>
-        <ng-template #customContentTpl [ngTemplateOutlet]="template!"></ng-template>
-    </ng-template>
-</div>

package/popover/src/popover.component.scss

@@ -1,8 +0,0 @@
-.upd-popover {
-    position: absolute;
-    margin: 0;
-}
-
-.upd-popover-arrow {
-    position: absolute;
-}

package/popover/src/popover.component.spec.ts

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

package/popover/src/popover.component.ts

@@ -1,53 +0,0 @@
-import { Component, Input, HostBinding, SimpleChanges, OnInit, OnChanges, ViewEncapsulation, TemplateRef } from '@angular/core';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-
-@Component({
-    selector: 'upd-popover',
-    templateUrl: './popover.component.html',
-    styleUrls: ['./popover.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class PopoverComponent implements OnInit, OnChanges {
-    @HostBinding('class') classes = '';
-    @HostBinding('attr.data-popper-placement') popperPlacement = '';
-    @HostBinding('role') readonly role = 'tooltip';
-
-    @Input() title?: string;
-    @Input() text?: string;
-    @Input() titleTemplate?: TemplateRef<any>;
-    @Input() template?: TemplateRef<any>;
-    @Input() placement: TopBottomLeftRightType = 'top';
-    @Input() customClasses?: string;
-
-    get isVisible(): boolean {
-        return this._isVisible;
-    }
-
-    private _isVisible = false;
-
-    ngOnInit(): void {
-        this.updateClasses();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.updateClasses();
-    }
-
-    setVisible(isVisible: boolean): void {
-        this._isVisible = isVisible;
-        this.updateClasses();
-    }
-
-    private updateClasses(): void {
-        this.popperPlacement = this.placement;
-        this.classes = [
-            'popover',
-            'bs-popover-auto',
-            !this._isVisible ? 'fade' : '',
-            this._isVisible ? 'show' : '',
-            'upd-popover',
-            `-${this.placement}`,
-            ...(this.customClasses?.split(' ') || [])
-        ].join(' ');
-    }
-}

package/popover/src/popover.directive.spec.ts

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

package/popover/src/popover.directive.ts

@@ -1,128 +0,0 @@
-import {
-    Directive,
-    Input,
-    TemplateRef,
-    ViewContainerRef,
-    Renderer2,
-    ElementRef,
-    Injector,
-    NgZone,
-    ComponentRef,
-    HostListener
-} from '@angular/core';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-import { PositioningService, ComputePositionResult, DynamicComponentLoaderService } from '@updevs/sdk/layout';
-
-import { PopoverComponent } from './popover.component';
-
-@Directive({
-    selector: '[updPopover]'
-})
-export class PopoverDirective {
-    @Input('updPopover') text?: string;
-    @Input('updPopoverTitle') title?: string;
-    @Input('updPopoverTitleTemplate') popoverTitleTemplate?: TemplateRef<any>;
-    @Input('updPopoverTemplate') popoverTemplate?: TemplateRef<any>;
-    @Input('updPopoverPlacement') placement: TopBottomLeftRightType = 'top';
-    @Input('updPopoverCustomClasses') customClasses?: string;
-    /**
-     * This makes the popover behave like a tooltip.
-     * It means it'll show/hide depending on whether the mouse is over or not the element.
-     */
-    @Input('updPopoverActAsTooltip') actAsTooltip = false;
-
-    private popoverComponentRef?: ComponentRef<PopoverComponent>;
-
-    constructor(
-        private elementRef: ElementRef,
-        private renderer: Renderer2,
-        private viewContainerRef: ViewContainerRef,
-        private ngZone: NgZone,
-        private injector: Injector,
-        private positioningService: PositioningService,
-        private dynamicComponentLoaderService: DynamicComponentLoaderService
-    ) {
-    }
-
-    @HostListener('mouseenter')
-    onMouseEnter(): void {
-        if (this.actAsTooltip) {
-            this.initPopover();
-        }
-    }
-
-    @HostListener('mouseleave')
-    onMouseLeave(): void {
-        if (this.actAsTooltip) {
-            this.disposePopover();
-        }
-    }
-
-    @HostListener('click')
-    onClick(): void {
-        if (!this.actAsTooltip) {
-            if (this.popoverComponentRef?.instance.isVisible) {
-                this.disposePopover();
-            } else {
-                this.initPopover();
-            }
-        }
-    }
-
-    private initPopover(): void {
-        this.setupPopover();
-        this.popoverComponentRef!.instance.setVisible(true);
-        this.ngZone.runOutsideAngular(() =>
-            this.positioningService
-                .computePosition(this.elementRef, this.popoverComponentRef!.location, { placement: this.placement })
-                .subscribe(resp => this.updatePosition(resp))
-        );
-    }
-
-    private disposePopover(): void {
-        this.viewContainerRef.clear();
-        this.popoverComponentRef!.instance.setVisible(false);
-    }
-
-    private setupPopover(): void {
-        this.viewContainerRef.clear();
-
-        this.popoverComponentRef = this.dynamicComponentLoaderService.load(PopoverComponent, this.viewContainerRef, this.injector);
-        this.popoverComponentRef!.instance.title = this.title;
-        this.popoverComponentRef!.instance.text = this.text;
-        this.popoverComponentRef!.instance.titleTemplate = this.popoverTitleTemplate;
-        this.popoverComponentRef!.instance.template = this.popoverTemplate;
-        this.popoverComponentRef!.instance.placement = this.placement;
-        this.popoverComponentRef!.instance.customClasses = this.customClasses;
-    }
-
-    private updatePosition(result: ComputePositionResult): void {
-        const nativeElement = this.popoverComponentRef!.location.nativeElement;
-        const arrowElement = this.popoverComponentRef!.location.nativeElement.querySelector('.popover-arrow');
-        const popoverBox = nativeElement.getBoundingClientRect();
-        const arrowBox = arrowElement.getBoundingClientRect();
-
-        switch (this.placement) {
-            case 'top':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y - arrowBox.height}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x}px`);
-                this.renderer.setStyle(arrowElement, 'left', `${(popoverBox.width / 2) - (arrowBox.width / 2)}px`);
-                break;
-            case 'bottom':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y + arrowBox.height}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x}px`);
-                this.renderer.setStyle(arrowElement, 'left', `${(popoverBox.width / 2) - (arrowBox.width / 2)}px`);
-                break;
-            case 'left':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x - arrowBox.width}px`);
-                this.renderer.setStyle(arrowElement, 'top', `${(popoverBox.height / 2) - (arrowBox.height / 2)}px`);
-                break;
-            case 'right':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x + arrowBox.width}px`);
-                this.renderer.setStyle(arrowElement, 'top', `${(popoverBox.height / 2) - (arrowBox.height / 2)}px`);
-                break;
-        }
-    }
-}

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

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { PopoverComponent } from './popover.component';
-import { PopoverDirective } from './popover.directive';
-
-@NgModule({
-    imports: [
-        CommonModule
-    ],
-    declarations: [
-        PopoverComponent,
-        PopoverDirective
-    ],
-    exports: [
-        PopoverComponent,
-        PopoverDirective
-    ]
-})
-export class UpdPopoverModule {}

package/src/lib/public-api.ts

@@ -1,2 +0,0 @@
-export * from './types/public-api';
-export * from './upd-components.module';

package/src/lib/types/public-api.ts

@@ -1,2 +0,0 @@
-export * from './component-size.type';
-export * from './validation-status.type';

package/src/lib/types/validation-status.type.ts

@@ -1 +0,0 @@
-export type ValidationStatusType = 'valid' | 'invalid';

package/src/lib/upd-components.module.ts

@@ -1,6 +0,0 @@
-import { NgModule } from '@angular/core';
-
-@NgModule({
-    imports: []
-})
-export class UpdComponentsModule {}

package/src/public-api.ts

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

package/tsconfig.lib.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-    "extends": "../../../tsconfig.json",
-    "compilerOptions": {
-        "outDir": "../../../dist/updevs/components",
-        "declaration": true,
-        "declarationMap": true,
-        "inlineSources": true,
-        "types": []
-    },
-    "exclude": [
-        "**/*.spec.ts"
-    ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}