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

package/layout/src/partials/page-header/page-header.component.spec.ts

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

package/layout/src/partials/page-header/page-header.component.ts

@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { PageHeaderModel } from '@updevs/sdk/layout';
-
-@Component({
-    selector: 'upd-page-header',
-    templateUrl: './page-header.component.html',
-    styleUrls: ['./page-header.component.scss']
-})
-export class PageHeaderComponent {
-    @Input() model!: PageHeaderModel;
-}

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

@@ -1,62 +0,0 @@
-<div class="container-fluid">
-    <button class="navbar-toggler" type="button">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <h1 class="navbar-brand navbar-brand-autodark">
-        <a href=".">
-            <img width="110" height="32" class="navbar-brand-image upd-brand-logo"/>
-        </a>
-    </h1>
-    <div class="collapse navbar-collapse">
-        <ul class="navbar-nav pt-lg-3">
-            <li *ngFor="let item of menuItems" class="nav-item" [class.dropdown]="hasChildren(item)"
-                [class.active]="item.isActive">
-                <ng-container [ngTemplateOutlet]="itemTpl" [ngTemplateOutletContext]="{menuItem: item}">
-                </ng-container>
-            </li>
-        </ul>
-    </div>
-</div>
-
-<ng-template #itemTpl let-item="menuItem">
-    <upd-link [isNavigation]="true" (clicked)="onMenuItemClick(item)"
-        [customClasses]="[hasChildren(item) ? 'dropdown-toggle' : '', item.isActive ? 'show' : '']">
-        <span class="nav-link-icon d-md-none d-lg-inline-block">
-            <upd-icon [model]="item.icon"></upd-icon>
-        </span>
-        <span class="nav-link-title">{{item.title}}</span>
-    </upd-link>
-    <ng-container *ngIf="hasChildren(item)" [ngTemplateOutlet]="childrenTpl" [ngTemplateOutletContext]="{menuItem: item}">
-    </ng-container>
-</ng-template>
-
-<ng-template #childrenTpl let-item="menuItem">
-    <div class="dropdown-menu" [class.show]="item.isActive">
-        <div class="dropdown-menu-columns">
-            <div class="dropdown-menu-column">
-                <ng-container *ngFor="let child of item.children">
-                    <upd-link *ngIf="!hasChildren(child); else grandchildTpl" (clicked)="onMenuItemClick(child)"
-                        [customClasses]="['dropdown-item', child.isActive ? 'active' : '']">
-                        {{child.title}}
-                    </upd-link>
-                    <ng-template #grandchildTpl>
-                        <div class="dropend">
-                            <upd-link (clicked)="onMenuItemClick(child)"
-                                [customClasses]="['dropdown-item', 'dropdown-toggle', child.isActive ? 'active' : '']">
-                                {{child.title}}
-                            </upd-link>
-                            <div class="dropdown-menu" [class.show]="child.isActive">
-                                <ng-container *ngFor="let grandchild of child.children">
-                                    <upd-link (clicked)="onMenuItemClick(grandchild)"
-                                        [customClasses]="['dropdown-item', grandchild.isActive ? 'active' : '']">
-                                        {{grandchild.title}}
-                                    </upd-link>
-                                </ng-container>
-                            </div>
-                        </div>
-                    </ng-template>
-                </ng-container>
-            </div>
-        </div>
-    </div>
-</ng-template>

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/assets/i18n/en.json

@@ -1,5 +0,0 @@
-{
-    "NoRecordsFound": "No records found.",
-    "Item": "item",
-    "Items": "items"
-}

package/list/src/assets/i18n/pt.json

@@ -1,5 +0,0 @@
-{
-    "NoRecordsFound": "Nenhum registro encontrado.",
-    "Item": "item",
-    "Items": "itens"
-}

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