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

package/layout/src/pages/auth-flow/login/login.component.spec.ts

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

package/layout/src/pages/auth-flow/login/login.component.ts

@@ -1,26 +0,0 @@
-import { Component, ViewEncapsulation, inject } from '@angular/core';
-import { LayoutService } from '@updevs/sdk/layout';
-import { AuthService } from '@updevs/sdk/security';
-
-@Component({
-    selector: 'upd-login',
-    templateUrl: './login.component.html',
-    styleUrls: ['./login.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class LoginComponent {
-    layout: 'centered-box' | 'box-with-picture' = 'centered-box';
-    username = '';
-    password = '';
-
-    private readonly authService = inject(AuthService);
-    private readonly layoutService = inject(LayoutService);
-
-    constructor() {
-        this.layoutService.addBodyClasses('border-top-wide', 'border-primary', 'd-flex', 'flex-column');
-    }
-
-    login(): void {
-        this.authService.login(this.username, this.password).subscribe();
-    }
-}

package/layout/src/pages/auth-flow/oauth-callback/oauth-callback.component.html

@@ -1 +0,0 @@
-<p>oauth-callback works!</p>

package/layout/src/pages/auth-flow/oauth-callback/oauth-callback.component.spec.ts

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

package/layout/src/pages/auth-flow/oauth-callback/oauth-callback.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'upd-oauth-callback',
-  templateUrl: './oauth-callback.component.html',
-  styleUrls: ['./oauth-callback.component.scss']
-})
-export class OauthCallbackComponent {
-
-}

package/layout/src/partials/footer/footer-copyright.directive.spec.ts

@@ -1,8 +0,0 @@
-import { FooterCopyrightDirective } from './footer-copyright.directive';
-
-describe('FooterCopyrightDirective', () => {
-  it('should create an instance', () => {
-    const directive = new FooterCopyrightDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/layout/src/partials/footer/footer-copyright.directive.ts

@@ -1,9 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-    selector: '[updFooterCopyright]'
-})
-export class FooterCopyrightDirective {
-    constructor() {
-    }
-}

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

@@ -1,30 +0,0 @@
-<div class="container-xl">
-    <div class="row text-center align-items-center flex-row-reverse">
-        <div class="col-lg-auto ms-lg-auto">
-            <ul *ngIf="links.length > 0" class="list-inline list-inline-dots mb-0">
-                <li *ngFor="let link of links" class="list-inline-item">
-                    <a href="{{link.url}}" target="{{link.target}}" class="link-secondary">
-                        <span [innerHTML]="link.text"></span>
-                        <ng-container *transloco="let t">
-                            {{t('Layout.Aloha')}}
-                        </ng-container>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-            <ng-container *ngIf="!!footerCopyrightTemplate; else defaultFooterTpl"
-                [ngTemplateOutlet]="footerCopyrightTemplate"></ng-container>
-            <ng-template #defaultFooterTpl>
-                <ul class="list-inline list-inline-dots mb-0">
-                    <li class="list-inline-item">
-                        {{copyrightPrefix}} &copy; {{currentYear}} {{copyrightSuffix}}
-                    </li>
-                    <li *ngIf="!!version" class="list-inline-item">
-                        {{version}}
-                    </li>
-                </ul>
-            </ng-template>
-        </div>
-    </div>
-</div>

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

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

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

@@ -1,73 +0,0 @@
-import { Component, ContentChild, TemplateRef, HostBinding, OnInit, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
-import { LinkModel } from '@updevs/sdk/core';
-import { BaseComponent } from '@updevs/sdk/layout';
-import { TranslocoService } from '@ngneat/transloco';
-
-import { FooterCopyrightDirective } from './footer-copyright.directive';
-
-@Component({
-    selector: 'upd-footer',
-    templateUrl: './footer.component.html',
-    styleUrls: ['./footer.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class FooterComponent extends BaseComponent implements OnInit, OnChanges {
-    @HostBinding('class') wrapperClasses = '';
-    @ContentChild(FooterCopyrightDirective, { read: TemplateRef, static: true }) footerCopyrightTemplate?: TemplateRef<any>;
-
-    /**
-     * Whether the footer will always be shown.
-     */
-    isSticky = false;
-    /**
-     * Whether the footer is transparent or not.
-     */
-    isTransparent = true;
-    /**
-     * Links.
-     */
-    links: LinkModel[] = [];
-    /**
-     * Current year.
-     */
-    currentYear = new Date().getFullYear();
-    /**
-     * Text displayed in the copyright section before the symbol and year.
-     */
-    copyrightPrefix = 'Copyright';
-    /**
-     * Text displayed in the copyright section after the symbol and year.
-     */
-    copyrightSuffix = '';
-    /**
-     * Version of the application.
-     */
-    version?: string;
-
-    private baseWrapperClasses = 'footer d-print-none';
-
-    constructor(
-        private translocoService: TranslocoService
-    ) {
-        super();
-    }
-
-    ngOnInit(): void {
-        const footerCpsSub = this.translocoService.selectTranslate('Footer.AllRightsReserved').subscribe(r => this.copyrightSuffix = r);
-
-        this.updateWrapperClasses();
-        this.addSubscriptions(footerCpsSub);
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        if (!!changes['isSticky'].currentValue || !!changes['isTransparent'].currentValue) {
-            this.updateWrapperClasses();
-        }
-    }
-
-    private updateWrapperClasses(): void {
-        const stickyBottomCls = this.isSticky ? ' sticky-bottom' : '';
-        const transparentCls = this.isTransparent ? ' footer-transparent' : '';
-        this.wrapperClasses = `${this.baseWrapperClasses}${stickyBottomCls}${transparentCls}`;
-    }
-}

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

@@ -1,163 +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>
-            <div *ngIf="showLanguageSwitcher" class="nav-item">
-                <upd-link [isNavigation]="true" [customClasses]="['px-0']" (clicked)="switchLanguage()">
-                    <upd-icon tablerIcon="flag"></upd-icon>
-                </upd-link>
-            </div>
-            <div *ngIf="showNotifications" class="nav-item dropdown d-none d-md-flex">
-                <upd-link [isNavigation]="true" [customClasses]="['px-0']" (clicked)="openNotifications()">
-                    <upd-icon [tablerIcon]="currentNotificationsIcon"></upd-icon>
-                    <span *ngIf="hasNewNotifications" 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>
-        <div *ngIf="showUserMenu" 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>
-    <div *ngIf="showSearchBar" 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,86 +0,0 @@
-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/page-header/page-header.component.html

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

@@ -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>