@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.3

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

@@ -0,0 +1,86 @@
+import { Component, ViewEncapsulation, Input, HostBinding, OnChanges, SimpleChanges, OnInit } from '@angular/core';
+import { UpdCoreLayoutConfigService, BaseComponent, LayoutService } from '@updevs/sdk/layout';
+import { TablerIconsType } from '@updevs/icons';
+import { TranslocoService } from '@ngneat/transloco';
+
+import { HeaderStyleType } from './header-style.type';
+
+@Component({
+    selector: 'upd-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class HeaderComponent extends BaseComponent implements OnInit, OnChanges {
+    @HostBinding('class') wrapperClasses = '';
+
+    @Input() style: HeaderStyleType = 'light';
+    @Input() showSearchBar = true;
+
+    nextThemeIcon: TablerIconsType = 'moon';
+    nextThemeColor = 'black';
+    currentNotificationsIcon: TablerIconsType = 'bell';
+    hasNewNotifications = false;
+    showNotifications = false;
+    showLanguageSwitcher = true; // TODO: add on config.
+    showUserMenu = false;
+
+    private baseWrapperClasses = 'navbar navbar-expand-md d-none d-lg-flex d-print-none';
+
+    constructor(
+        private coreLayoutConfigService: UpdCoreLayoutConfigService,
+        private layoutService: LayoutService,
+        private translocoService: TranslocoService
+    ) {
+        super();
+    }
+
+    ngOnInit(): void {
+        this.updateWrapperClasses();
+
+        if (this.coreLayoutConfigService.config.showNotificationsButton) {
+            this.setupNotifications();
+        }
+
+        if (this.coreLayoutConfigService.config.showUserMenu) {
+            this.showUserMenu = true;
+        }
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (!!changes['style'].currentValue) {
+            this.updateWrapperClasses();
+        }
+    }
+
+    switchTheme(): void {
+        const isDarkMode = this.nextThemeIcon === 'moon';
+        this.nextThemeIcon = isDarkMode ? 'sun' : 'moon';
+        this.nextThemeColor = isDarkMode ? 'white' : 'black';
+
+        this.layoutService.toggleDarkMode(isDarkMode);
+    }
+
+    // TODO: implement.
+    switchLanguage(): void {
+        const currentLang = this.translocoService.getActiveLang();
+        this.translocoService.setActiveLang(currentLang === 'en' ? 'pt' : 'en');
+    }
+
+    openNotifications(): void {
+        this.updateNotificationsIcon();
+    }
+
+    private setupNotifications(): void {
+        this.showNotifications = true;
+    }
+
+    private updateNotificationsIcon(): void {
+        this.currentNotificationsIcon = this.currentNotificationsIcon === 'bell' ? 'bell-ringing' : 'bell';
+        this.hasNewNotifications = !this.hasNewNotifications;
+    }
+
+    private updateWrapperClasses(): void {
+        this.wrapperClasses = `${this.baseWrapperClasses} navbar-${this.style}`;
+    }
+}

package/layout/src/partials/header/public-api.ts

@@ -0,0 +1,2 @@
+export * from './header.component';
+export * from './header-style.type';

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

@@ -0,0 +1,19 @@
+<div class="page-header d-print-none">
+    <div class="container-xl">
+        <div class="row g-2 align-items-center">
+            <div class="col">
+                <div class="page-pretitle">
+                    {{model.titleHeader}}
+                </div>
+                <h2 class="page-title">
+                    {{model.title}}
+                </h2>
+            </div>
+            <div *ngIf="(model.actionButtons?.length || 0) > 0" class="col-auto ms-auto d-print-none">
+                <div class="btn-list">
+                    <upd-button *ngFor="let btn of model.actionButtons" [model]="btn!"></upd-button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

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

@@ -0,0 +1,11 @@
+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/page-header/public-api.ts

@@ -0,0 +1 @@
+export * from './page-header.component';

package/layout/src/partials/public-api.ts

@@ -0,0 +1,4 @@
+export * from './footer/public-api';
+export * from './header/public-api';
+export * from './page-header/public-api';
+export * from './sidebar/public-api';

package/layout/src/partials/sidebar/public-api.ts

@@ -0,0 +1 @@
+export * from './sidebar.component';

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

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

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

@@ -0,0 +1,161 @@
+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/public-api.ts

@@ -0,0 +1,7 @@
+export * from './abstractions/public-api';
+export * from './layouts/public-api';
+export * from './models/public-api';
+export * from './pages/public-api';
+export * from './partials/public-api';
+export * from './services/public-api';
+export * from './upd-layout.module';

package/layout/src/services/public-api.ts

@@ -0,0 +1 @@
+export * from './upd-layout-config.service';

package/{src/lib/components.service.spec.ts → layout/src/services/upd-layout-config.service.spec.ts}

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

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

@@ -0,0 +1,20 @@
+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/tools/layout.constants.ts

@@ -0,0 +1,18 @@
+import { InjectionToken } from '@angular/core';
+
+import { UpdLayoutConfig } from '../models/upd-layout.config';
+
+/**
+ * Layout constants.
+ */
+export class LayoutConstants {
+    /**
+     * Key to inject the default configuration.
+     */
+    static defaultOptionsKey = 'upd-layout-default-options';
+
+    /**
+     * Injection token for the default configuration.
+     */
+    static defaultOptionsInjectionToken = new InjectionToken<UpdLayoutConfig>(LayoutConstants.defaultOptionsKey);
+}

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

@@ -0,0 +1,34 @@
+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/ng-package.json

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

package/link/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/link/src/link.component.html

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

package/link/src/link.component.scss

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

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

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

@@ -0,0 +1,48 @@
+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/public-api.ts

@@ -0,0 +1,3 @@
+export * from './link.component';
+export * from './target.type';
+export * from './upd-link.module';

package/link/src/target.type.ts

@@ -0,0 +1 @@
+export type LinkTargetType = '_blank' | '_self' | '_parent' | '_top';

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

@@ -0,0 +1,17 @@
+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/ng-package.json

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

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

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

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

package/list/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';