@updevs/components 1.0.0-alpha.6 → 1.0.0-alpha.9

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

@@ -0,0 +1,173 @@
+<div class="container-xl">
+    <button class="navbar-toggler" type="button">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="navbar-nav flex-row order-md-last">
+        <div class="d-none d-md-flex me-3">
+            <div class="nav-item">
+                <upd-link [isNavigation]="true" [customClasses]="['px-0']" (clicked)="switchTheme()">
+                    <upd-icon [tablerIcon]="nextThemeIcon"></upd-icon>
+                </upd-link>
+            </div>
+            @if (showLanguageSwitcher) {
+                <div class="nav-item">
+                    <upd-link [isNavigation]="true" [customClasses]="['px-0']" (clicked)="switchLanguage()">
+                        <upd-icon tablerIcon="flag"></upd-icon>
+                    </upd-link>
+                </div>
+            }
+            @if (showNotifications) {
+                <div class="nav-item dropdown d-none d-md-flex">
+                    <upd-link [isNavigation]="true" [customClasses]="['px-0']" (clicked)="openNotifications()">
+                        <upd-icon [tablerIcon]="currentNotificationsIcon"></upd-icon>
+                        @if (hasNewNotifications) {
+                            <span class="badge bg-red"></span>
+                        }
+                    </upd-link>
+                    <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                        <div class="card">
+                            <div class="card-header">
+                                <h3 class="card-title">Last updates</h3>
+                            </div>
+                            <div class="list-group list-group-flush list-group-hoverable">
+                                <div class="list-group-item">
+                                    <div class="row align-items-center">
+                                        <div class="col-auto"><span
+                                            class="status-dot status-dot-animated bg-red d-block"></span></div>
+                                        <div class="col text-truncate">
+                                            <a href="#" class="text-body d-block">Example 1</a>
+                                            <div class="d-block text-muted text-truncate mt-n1">
+                                                Change deprecated html tags to text decoration classes (#29604)
+                                            </div>
+                                        </div>
+                                        <div class="col-auto">
+                                            <a href="#" class="list-group-item-actions">
+                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted"
+                                                    width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                                                    stroke="currentColor" fill="none" stroke-linecap="round"
+                                                    stroke-linejoin="round">
+                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                                                    <path
+                                                        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/>
+                                                </svg>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="list-group-item">
+                                    <div class="row align-items-center">
+                                        <div class="col-auto"><span class="status-dot d-block"></span></div>
+                                        <div class="col text-truncate">
+                                            <a href="#" class="text-body d-block">Example 2</a>
+                                            <div class="d-block text-muted text-truncate mt-n1">
+                                                justify-content:between ⇒ justify-content:space-between (#29734)
+                                            </div>
+                                        </div>
+                                        <div class="col-auto">
+                                            <a href="#" class="list-group-item-actions show">
+                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow"
+                                                    width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                                                    stroke="currentColor" fill="none" stroke-linecap="round"
+                                                    stroke-linejoin="round">
+                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                                                    <path
+                                                        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/>
+                                                </svg>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="list-group-item">
+                                    <div class="row align-items-center">
+                                        <div class="col-auto"><span class="status-dot d-block"></span></div>
+                                        <div class="col text-truncate">
+                                            <a href="#" class="text-body d-block">Example 3</a>
+                                            <div class="d-block text-muted text-truncate mt-n1">
+                                                Update change-version.js (#29736)
+                                            </div>
+                                        </div>
+                                        <div class="col-auto">
+                                            <a href="#" class="list-group-item-actions">
+                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted"
+                                                    width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                                                    stroke="currentColor" fill="none" stroke-linecap="round"
+                                                    stroke-linejoin="round">
+                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                                                    <path
+                                                        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/>
+                                                </svg>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="list-group-item">
+                                    <div class="row align-items-center">
+                                        <div class="col-auto"><span
+                                            class="status-dot status-dot-animated bg-green d-block"></span></div>
+                                        <div class="col text-truncate">
+                                            <a href="#" class="text-body d-block">Example 4</a>
+                                            <div class="d-block text-muted text-truncate mt-n1">
+                                                Regenerate package-lock.json (#29730)
+                                            </div>
+                                        </div>
+                                        <div class="col-auto">
+                                            <a href="#" class="list-group-item-actions">
+                                                <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted"
+                                                    width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                                                    stroke="currentColor" fill="none" stroke-linecap="round"
+                                                    stroke-linejoin="round">
+                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                                                    <path
+                                                        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/>
+                                                </svg>
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
+        @if (showUserMenu) {
+            <div class="nav-item dropdown">
+                <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
+                    aria-label="Open user menu">
+                    <!--<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>-->
+                    <span class="avatar avatar-sm"></span>
+                    <div class="d-none d-xl-block ps-2">
+                        <div>Eros Stein</div>
+                        <div class="mt-1 small text-muted">Administrator</div>
+                    </div>
+                </a>
+                <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item">Status</a>
+                    <a href="./profile.html" class="dropdown-item">Profile</a>
+                    <a href="#" class="dropdown-item">Feedback</a>
+                    <div class="dropdown-divider"></div>
+                    <a href="./settings.html" class="dropdown-item">Settings</a>
+                    <a href="./sign-in.html" class="dropdown-item">Logout</a>
+                </div>
+            </div>
+        }
+    </div>
+    @if (showSearchBar) {
+        <div class="collapse navbar-collapse">
+            <div>
+                <form autocomplete="off" novalidate>
+                    <div class="input-icon">
+                        <span class="input-icon-addon">
+                            <upd-icon tablerIcon="search"></upd-icon>
+                        </span>
+                        <input type="text" value="" class="form-control" placeholder="Search…">
+                    </div>
+                </form>
+            </div>
+        </div>
+    }
+</div>

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

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

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

@@ -0,0 +1,82 @@
+import { Component, ViewEncapsulation, Input, HostBinding, OnChanges, SimpleChanges, OnInit, inject } from '@angular/core';
+import { UpdCoreLayoutConfigService, BaseComponent, LayoutService } from '@updevs/sdk/layout';
+import { TablerIconsType } from '@updevs/icons';
+import { TranslocoService } from '@jsverse/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';
+
+    private readonly coreLayoutConfigService = inject(UpdCoreLayoutConfigService);
+    private readonly layoutService = inject(LayoutService);
+    private readonly translocoService = inject(TranslocoService);
+
+    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/page-header/page-header.component.html

@@ -0,0 +1,23 @@
+<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>
+            @if (model.actionButtons.length > 0) {
+                <div class="col-auto ms-auto d-print-none">
+                    <div class="btn-list">
+                        @for (btn of model.actionButtons; track btn) {
+                            <upd-button [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/sidebar/sidebar.component.html

@@ -0,0 +1,72 @@
+<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">
+            @for (item of menuItems; track item) {
+                <li 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]="getItemClasses(item, 'show', hasChildren(item) ? 'dropdown-toggle':'')">
+        <ng-container [ngTemplateOutlet]="linkContent" [ngTemplateOutletContext]="{menuItem: item}"></ng-container>
+    </upd-link>
+    @if (hasChildren(item)) {
+        <ng-container [ngTemplateOutlet]="childrenTpl" [ngTemplateOutletContext]="{menuItem: item}"></ng-container>
+    }
+</ng-template>
+
+<ng-template #linkContent let-item="menuItem">
+    @if (!!item.icon) {
+        <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>
+    @if (item.isLocked) {
+        <upd-icon class="ms-auto" [model]="{tablerIcon: 'lock'}"></upd-icon>
+    }
+</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">
+                @for (child of asMenuItem(item).children; track child) {
+                    @if (!hasChildren(child)) {
+                        <upd-link (clicked)="onMenuItemClick(child)" [customClasses]="getItemClasses(child, 'active', 'dropdown-item')">
+                            <ng-container [ngTemplateOutlet]="linkContent" [ngTemplateOutletContext]="{menuItem: child}"></ng-container>
+                        </upd-link>
+                    } @else {
+                        <div class="dropend">
+                            <upd-link (clicked)="onMenuItemClick(child)" [customClasses]="getItemClasses(child, 'active', 'dropdown-item')">
+                                <ng-container [ngTemplateOutlet]="linkContent" [ngTemplateOutletContext]="{menuItem: child}"></ng-container>
+                            </upd-link>
+                            <div class="dropdown-menu" [class.show]="child.isActive">
+                                @for (grandchild of child.children; track grandchild) {
+                                    <upd-link (clicked)="onMenuItemClick(grandchild)"
+                                        [customClasses]="getItemClasses(grandchild, 'active', 'dropdown-item')">
+                                        <ng-container [ngTemplateOutlet]="linkContent" [ngTemplateOutletContext]="{menuItem: grandchild}">
+                                        </ng-container>
+                                    </upd-link>
+                                }
+                            </div>
+                        </div>
+                    }
+                }
+            </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,129 @@
+import { Component, HostBinding, ViewEncapsulation, OnInit, inject } from '@angular/core';
+import { Router, NavigationStart } from '@angular/router';
+import { OptionalType } from '@updevs/sdk/types';
+import { RouteDataModel, MenuService } 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[] = [];
+
+    private readonly router = inject(Router);
+    private readonly menuService = inject(MenuService);
+
+    ngOnInit(): void {
+        this.menuItems = this.menuService.generateMenu();
+        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 {
+        if (item.isLocked) {
+            if (!!item.lockedClickFunction) {
+                item.lockedClickFunction();
+            }
+
+            return;
+        }
+
+        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;
+    }
+
+    asMenuItem(item: any): RouteDataModel {
+        return item as RouteDataModel;
+    }
+
+    getItemClasses(item: RouteDataModel, activeClass: string, ...classes: string[]): string[] {
+        return [
+            ...classes,
+            item.isActive ? activeClass : '',
+            item.isLocked ? 'disabled' : ''
+        ];
+    }
+
+    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

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

@@ -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/{tools/layout.constants.d.ts → src/tools/layout.constants.ts}

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