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

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

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

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

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

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

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

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

@@ -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,72 +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">
-            @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

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

@@ -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/tools/layout.constants.ts

@@ -1,18 +0,0 @@
-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);
-}