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

package/layout/src/partials/sidebar/sidebar.component.spec.ts

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

package/layout/src/partials/sidebar/sidebar.component.ts

@@ -1,161 +0,0 @@
-import { Component, HostBinding, ViewEncapsulation, OnInit } from '@angular/core';
-import { Router, NavigationStart } from '@angular/router';
-import { OptionalType } from '@updevs/sdk/types';
-import { RouteDataModel } from '@updevs/sdk/routes';
-import { BaseComponent } from '@updevs/sdk/layout';
-import { filter } from 'rxjs';
-
-@Component({
-    selector: 'upd-sidebar',
-    templateUrl: './sidebar.component.html',
-    styleUrls: ['./sidebar.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class SidebarComponent extends BaseComponent implements OnInit {
-    @HostBinding('class') wrapperClasses = 'navbar navbar-vertical navbar-expand-lg';
-    @HostBinding('attr.data-bs-theme') theme = 'dark';
-
-    menuItems: RouteDataModel[] = [];
-
-    constructor(
-        private router: Router
-    ) {
-        super();
-    }
-
-    ngOnInit(): void {
-        // TODO: remove demo code.
-        const sampleCardsItem = new RouteDataModel({
-            title: 'Sample cards',
-            icon: { tablerIcon: 'home' }
-        });
-        const cardActionsItem = new RouteDataModel({
-            title: 'Card actions',
-            icon: { tablerIcon: 'folder' }
-        });
-        const emptyPageItem = new RouteDataModel({
-            title: 'Empty page',
-            icon: { tablerIcon: 'home' }
-        });
-        const cardsItem = new RouteDataModel({
-            title: 'Cards',
-            icon: { tablerIcon: 'user' },
-            children: [
-                sampleCardsItem,
-                cardActionsItem
-            ]
-        });
-        const interfaceItem = new RouteDataModel({
-            title: 'Interface',
-            icon: { tablerIcon: 'device-desktop' },
-            children: [
-                emptyPageItem,
-                cardsItem
-            ]
-        });
-        sampleCardsItem.parent = cardsItem;
-        cardActionsItem.parent = cardsItem;
-        emptyPageItem.parent = interfaceItem;
-        cardsItem.parent = interfaceItem;
-        this.menuItems = [
-            new RouteDataModel({
-                title: 'Home',
-                icon: { tablerIcon: 'home' }
-            }),
-            new RouteDataModel({
-                title: 'Archives',
-                icon: { tablerIcon: 'folder' }
-            }),
-            interfaceItem,
-            new RouteDataModel({
-                title: 'Library',
-                icon: { tablerIcon: 'building' }
-            })
-        ];
-        // END demo code
-
-        const routerSub = this.router.events.pipe(
-            filter(event => event instanceof NavigationStart)
-        ).subscribe(event => this.updateActiveRoute((<NavigationStart> event).url));
-
-        this.updateActiveRoute(this.router.url);
-        this.addSubscriptions(routerSub);
-    }
-
-    onMenuItemClick(item: RouteDataModel): void {
-        this.resetMenuState(this.menuItems);
-
-        item.isActive = true;
-
-        this.updateParents(item);
-
-        if (!!item.clickFunction) {
-            item.clickFunction();
-            return;
-        }
-
-        if ((item.children?.length || 0) > 0) {
-            return;
-        }
-
-        this.router.navigate(item.getFullPath()).then();
-    }
-
-    hasChildren(item: RouteDataModel): boolean {
-        return (item.children?.length || 0) > 0;
-    }
-
-    private findActiveNode(item: RouteDataModel, fullPath: string): OptionalType<RouteDataModel> {
-        if (item.fullPath === fullPath) {
-            return item;
-        } else if (item.children.length > 0) {
-            let result;
-
-            for (let i = 0; !result && i < item.children.length; i++) {
-                result = this.findActiveNode(item.children[i], fullPath);
-            }
-
-            return result;
-        }
-
-        return undefined;
-    }
-
-    private updateActiveRoute(newPath: string): void {
-        this.resetMenuState(this.menuItems);
-
-        let item: OptionalType<RouteDataModel>;
-
-        for (const mi of this.menuItems) {
-            item = this.findActiveNode(mi, newPath);
-
-            if (!!item) {
-                break;
-            }
-        }
-
-        while (!!item) {
-            item.isActive = true;
-            item = item.parent;
-        }
-    }
-
-    private resetMenuState(items: RouteDataModel[]): void {
-        items.forEach(i => {
-            i.isActive = false;
-
-            if (i.children.length > 0) {
-                this.resetMenuState(i.children);
-            }
-        });
-    }
-
-    private updateParents(menuItem: RouteDataModel): void {
-        let item: OptionalType<RouteDataModel> = menuItem;
-
-        while (!!item) {
-            item.isActive = true;
-            item = item.parent;
-        }
-    }
-}

package/layout/src/services/upd-layout-config.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { UpdLayoutConfigService } from './upd-layout-config.service';
-
-describe('UpdLayoutConfigService', () => {
-    let service: UpdLayoutConfigService;
-
-    beforeEach(() => {
-        TestBed.configureTestingModule({});
-        service = TestBed.inject(UpdLayoutConfigService);
-    });
-
-    it('should be created', () => {
-        expect(service).toBeTruthy();
-    });
-});

package/layout/src/services/upd-layout-config.service.ts

@@ -1,20 +0,0 @@
-import { Injectable, Inject } from '@angular/core';
-
-import { UpdLayoutConfigModel } from '../models/upd-layout-config.model';
-import { LayoutConstants } from '../tools/layout.constants';
-import { UpdLayoutConfig } from '../models/upd-layout.config';
-
-/**
- * Layout configuration data.
- */
-@Injectable()
-export class UpdLayoutConfigService {
-    /**
-     * Configuration (See: #upsee[p:models, i:UpdCoreLayoutConfigModel]).
-     */
-    readonly config: UpdLayoutConfigModel;
-
-    constructor(@Inject(LayoutConstants.defaultOptionsInjectionToken) layoutConfig: UpdLayoutConfig) {
-        this.config = new UpdLayoutConfigModel(layoutConfig);
-    }
-}

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

@@ -1,34 +0,0 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UpdCoreLayoutModule } from '@updevs/sdk/layout';
-
-import { UpdLayoutConfig } from './models/upd-layout.config';
-import { LayoutConstants } from './tools/layout.constants';
-import { UpdLayoutConfigService } from './services/upd-layout-config.service';
-
-/**
- * Layout module.
- */
-@NgModule({
-    imports: [
-        CommonModule,
-        UpdCoreLayoutModule
-    ],
-    providers: [
-        UpdLayoutConfigService
-    ]
-})
-export class UpdLayoutModule {
-    /**
-     * Sets up the layout module with the provided configuration.
-     * @param config Configuration (See: #updsee[p:abstractions, i:UpdCoreLayoutConfig]).
-     */
-    static forRoot(config: UpdLayoutConfig): ModuleWithProviders<UpdLayoutModule> {
-        return {
-            ngModule: UpdLayoutModule,
-            providers: [
-                { provide: LayoutConstants.defaultOptionsInjectionToken, useValue: config }
-            ]
-        };
-    }
-}

package/link/index.ts

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

package/link/ng-package.json

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

package/link/src/link.component.html

@@ -1,3 +0,0 @@
-<a [attr.href]="href" [attr.target]="target" [ngClass]="classes" (click)="onClick($event)">
-    <ng-content></ng-content>
-</a>

package/link/src/link.component.scss

@@ -1,3 +0,0 @@
-a:hover {
-    cursor: pointer;
-}

package/link/src/link.component.spec.ts

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

package/link/src/link.component.ts

@@ -1,48 +0,0 @@
-import { Component, Output, EventEmitter, SimpleChanges, OnInit, OnChanges, Input, ViewEncapsulation } from '@angular/core';
-
-import { LinkTargetType } from './target.type';
-
-@Component({
-    selector: 'upd-link',
-    templateUrl: './link.component.html',
-    styleUrls: ['./link.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class LinkComponent implements OnInit, OnChanges {
-    @Input() href?: string;
-    @Input() target: LinkTargetType = '_self';
-    @Input() customClasses: string[] = [];
-    @Input() isNavigation = false;
-
-    /**
-     * Emitted when the link is clicked.
-     * **NOTE:** The name of the event can not be 'click'. It would generate a conflict with the HTML event of same name.
-     * That would cause strange behaviors like preventing `isDisabled` from working correctly.
-     */
-    @Output() readonly clicked = new EventEmitter<any>();
-
-    classes: string[] = [];
-
-    ngOnInit(): void {
-        this.updateWrapperClasses();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.updateWrapperClasses();
-    }
-
-    onClick(event: MouseEvent): void {
-        this.clicked.emit(undefined);
-        event.stopPropagation();
-    }
-
-    private updateWrapperClasses(): void {
-        const lClasses: string[] = [];
-
-        if (this.isNavigation) {
-            lClasses.push('nav-link');
-        }
-
-        this.classes = [...lClasses, ...this.customClasses];
-    }
-}

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

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

package/list/index.ts

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

package/list/ng-package.json

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

package/list/src/list.component.html

@@ -1,58 +0,0 @@
-<ng-container *ngIf="listItems.length > 0; else noDataTpl">
-    <ng-container *ngFor="let item of listItems">
-        <ng-container *ngIf="(item.children?.length || 0) > 0; else rowTpl">
-            <div class="list-group-header sticky-top">{{item.text}}</div>
-            <ng-container *ngFor="let child of item.children">
-                <ng-container [ngTemplateOutlet]="listItemTpl" [ngTemplateOutletContext]="{item:child}"></ng-container>
-            </ng-container>
-        </ng-container>
-        <ng-template #rowTpl>
-            <ng-container [ngTemplateOutlet]="listItemTpl" [ngTemplateOutletContext]="{item:item}"></ng-container>
-        </ng-template>
-    </ng-container>
-</ng-container>
-<ng-template #noDataTpl>
-    <div class="list-group-item">
-        <upd-icon tablerIcon="alert-triangle" wrapperClasses="text-yellow"></upd-icon>
-        {{noRecordsFoundKey | transloco}}
-    </div>
-</ng-template>
-
-<div *ngIf="shouldDisplayItemsCounter" class="list-items-counter bg-muted text-muted-fg">
-    {{listItems.length}} {{(listItems.length === 1 ? itemFoundKey : itemsFoundKey) | transloco}}
-</div>
-
-<ng-template #listItemTpl let-item="item">
-    <div class="list-group-item" [class.list-group-item-action]="!item.hasLeftBox" [class.active]="item.isActive"
-        [class.disabled]="item.isDisabled" (click)="onSelectItem($event, item)">
-        <span *ngIf="!item.hasLeftBox; else customContentTpl">{{item.text}}</span>
-        <ng-template #customContentTpl>
-            <div class="row">
-                <ng-container [ngTemplateOutlet]="leftBoxTpl" [ngTemplateOutletContext]="{item:item}"></ng-container>
-                <div class="col text-truncate">
-                    <div *ngIf="!!item.text" class="text-body d-block">{{item.text}}</div>
-                    <div *ngIf="!!item.description" class="text-muted text-truncate mt-n1">{{item.description}}</div>
-                </div>
-            </div>
-        </ng-template>
-    </div>
-</ng-template>
-
-<ng-template #leftBoxTpl let-item="item">
-    <div *ngIf="item.hasCheckbox" class="col-auto">
-        <upd-checkbox (changed)="onCheckboxChange(item, $event)" [isChecked]="item.isChecked || false"
-            [isSwitch]="item.isSwitch || false"></upd-checkbox>
-        <!--        [wrapperClasses]="'dropdown-item' + (item.isDisabled ? ' disabled' : '') +(item.isActive ? ' active' : '')"-->
-    </div>
-    <div *ngIf="item.hasLeftBadge" class="col-auto">
-        <span class="badge bg-{{item.badgeColor}} ms-auto">{{item.badgeText}}</span>
-    </div>
-    <div *ngIf="!!item.leftBoxImage || !!item.leftBoxText" class="col-auto">
-        <a href="#"> <!-- TODO: change. -->
-            <span class="avatar" style="background-image: url({{item.leftBoxImage}})">{{item.leftBoxText}}
-                <span *ngIf="item.hasBottomRightBadge"
-                    class="badge bg-{{item.badgeColor}} ms-auto">{{item.badgeText}}</span>
-            </span>
-        </a>
-    </div>
-</ng-template>

package/list/src/list.component.scss

@@ -1,21 +0,0 @@
-upd-list {
-    width: 100%;
-}
-
-.list-group-item {
-    cursor: pointer;
-}
-
-.list-hidden {
-    display: none !important;
-}
-
-.list-items-counter {
-    position: sticky;
-    bottom: 0;
-    right: 0;
-    float: right;
-    border-top-left-radius: 2px;
-    opacity: .6;
-    padding: 2px 12px;
-}

package/list/src/list.component.spec.ts

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

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/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';