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

package/form-controls/time-picker/src/time-selector/time-selector.component.spec.ts

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

package/form-controls/time-picker/src/time-selector/time-selector.component.ts

@@ -1,107 +0,0 @@
-import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-
-@Component({
-    selector: 'upd-time-selector',
-    templateUrl: './time-selector.component.html',
-    styleUrls: ['./time-selector.component.scss']
-})
-export class TimeSelectorComponent implements OnInit, OnChanges {
-    /**
-     * Whether seconds should be selectable.
-     */
-    @Input() shouldSelectSeconds = false;
-    /**
-     * Whether the 24-hour format will be used or the 12-hour one (AM/PM)
-     */
-    @Input() shouldUse24hFormat = true;
-    /**
-     * Hour from which where the list will begin.
-     */
-    @Input() startingHour = 0;
-    /**
-     * Hour from which where the list will end.
-     */
-    @Input() endingHour = 23;
-    /**
-     * Interval between hours displayed.
-     */
-    @Input() hourInterval = 1;
-    /**
-     * Minute from which where the list will begin.
-     */
-    @Input() startingMinute = 0;
-    /**
-     * Minute from which where the list will end.
-     */
-    @Input() endingMinute = 59;
-    /**
-     * Interval between minutes displayed.
-     */
-    @Input() minuteInterval = 5;
-    /**
-     * Second from which where the list will begin.
-     */
-    @Input() startingSecond = 0;
-    /**
-     * Second from which where the list will end.
-     */
-    @Input() endingSecond = 59;
-    /**
-     * Interval between seconds displayed.
-     */
-    @Input() secondInterval = 10;
-    /**
-     * Custom list of hours to be displayed for selection.
-     */
-    @Input() customHours?: number[];
-    /**
-     * Custom list of minutes to be displayed for selection.
-     */
-    @Input() customMinutes?: number[];
-    /**
-     * Custom list of seconds to be displayed for selection.
-     */
-    @Input() customSeconds?: number[];
-
-    hoursList: number[] = [];
-    minutesList: number[] = [];
-    secondsList: number[] = [];
-
-    ngOnInit(): void {
-        this.setupTimeLists();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.setupTimeLists();
-    }
-
-    private setupTimeLists(): void {
-        this.hoursList = [];
-        this.minutesList = [];
-        this.secondsList = [];
-
-        if (!!this.customHours) {
-            this.hoursList = this.customHours;
-        } else {
-            this.setupTimeList(this.hoursList, this.startingHour, this.endingHour, this.hourInterval);
-        }
-
-        if (!!this.customMinutes) {
-            this.minutesList = this.customMinutes;
-        } else {
-            this.setupTimeList(this.minutesList, this.startingMinute, this.endingMinute, this.minuteInterval);
-        }
-
-        if (!!this.customSeconds) {
-            this.secondsList = this.customSeconds;
-        } else {
-            this.setupTimeList(this.secondsList, this.startingSecond, this.endingSecond, this.secondInterval);
-        }
-    }
-
-    private setupTimeList(list: number[], start: number, end: number, interval: number): void {
-        for (let i = start; i <= end; i += interval) {
-            list.push(i);
-        }
-    }
-}

package/form-controls/time-picker/src/upd-time-picker.module.ts

@@ -1,39 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslocoService, TranslocoModule } from '@ngneat/transloco';
-import { UpdInputModule } from '@updevs/components/form-controls/input';
-import { UpdIconsModule } from '@updevs/icons';
-import { UpdButtonModule } from '@updevs/components/button';
-import { UpdListModule } from '@updevs/components/list';
-import { UpdDropdownModule } from '@updevs/components/dropdown';
-
-import * as en from './assets/i18n/en.json';
-import * as pt from './assets/i18n/pt.json';
-import { TimePickerComponent } from './time-picker.component';
-import { TimeSelectorComponent } from './time-selector/time-selector.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        TranslocoModule,
-        UpdInputModule,
-        UpdIconsModule,
-        UpdButtonModule,
-        UpdListModule,
-        UpdDropdownModule
-    ],
-    declarations: [
-        TimePickerComponent,
-        TimeSelectorComponent
-    ],
-    exports: [
-        TimePickerComponent,
-        TimeSelectorComponent
-    ]
-})
-export class UpdTimePickerModule {
-    constructor(translocoService: TranslocoService) {
-        translocoService.setTranslation(en, 'en');
-        translocoService.setTranslation(pt, 'pt');
-    }
-}

package/index.ts

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

package/layout/index.ts

@@ -1 +0,0 @@
-export * from './src/index';

package/layout/ng-package.json

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

package/layout/src/abstractions/base-page.component.ts

@@ -1,21 +0,0 @@
-import { OnDestroy, Directive, inject } from '@angular/core';
-import { BaseComponent, LayoutService } from '@updevs/sdk/layout';
-
-/**
- * Basic page structure.
- */
-@Directive({})
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-export abstract class BasePageComponent extends BaseComponent implements OnDestroy {
-    protected _layoutService: LayoutService;
-
-    protected constructor() {
-        super();
-        this._layoutService = inject(LayoutService);
-    }
-
-    override ngOnDestroy(): void {
-        super.ngOnDestroy();
-        // TODO: clear subheader.
-    }
-}

package/layout/src/layouts/blank-layout/blank-layout.component.html

@@ -1 +0,0 @@
-<p>blank-layout works!</p>

package/layout/src/layouts/blank-layout/blank-layout.component.spec.ts

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

package/layout/src/layouts/blank-layout/blank-layout.component.ts

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

package/layout/src/layouts/blank-layout/blank-layout.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { BlankLayoutComponent } from './blank-layout.component';
-
-@NgModule({
-    imports: [
-        CommonModule
-    ],
-    declarations: [
-        BlankLayoutComponent
-    ],
-    exports: [
-        BlankLayoutComponent
-    ]
-})
-export class BlankLayoutModule {}

package/layout/src/layouts/vertical-sidebar-layout/vertical-sidebar-layout.component.html

@@ -1,14 +0,0 @@
-<div class="page">
-    <upd-sidebar></upd-sidebar>
-    <upd-header></upd-header>
-
-    <div class="page-wrapper">
-        <upd-page-header *ngIf="showPageHeader" [model]="pageHeader!"></upd-page-header>
-        <div class="page-body">
-            <div class="container-xl">
-                <router-outlet></router-outlet>
-            </div>
-        </div>
-        <upd-footer></upd-footer>
-    </div>
-</div>

package/layout/src/layouts/vertical-sidebar-layout/vertical-sidebar-layout.component.spec.ts

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

package/layout/src/layouts/vertical-sidebar-layout/vertical-sidebar-layout.component.ts

@@ -1,31 +0,0 @@
-import { Component, ViewEncapsulation, OnInit, ChangeDetectorRef } from '@angular/core';
-import { BaseComponent, LayoutService, PageHeaderModel } from '@updevs/sdk/layout';
-
-@Component({
-    selector: 'upd-vertical-sidebar-layout',
-    templateUrl: './vertical-sidebar-layout.component.html',
-    styleUrls: ['./vertical-sidebar-layout.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class VerticalSidebarLayoutComponent extends BaseComponent implements OnInit {
-    showPageHeader = false;
-    pageHeader?: PageHeaderModel;
-
-    constructor(
-        private changeDetectorRef: ChangeDetectorRef,
-        private layoutService: LayoutService
-    ) {
-        super();
-    }
-
-    ngOnInit(): void {
-        const pHeaderSub = this.layoutService.onPageHeaderChange.subscribe(ph => {
-            this.showPageHeader = !!ph;
-            this.pageHeader = ph;
-
-            this.changeDetectorRef.detectChanges();
-        });
-
-        this.addSubscriptions(pHeaderSub);
-    }
-}

package/layout/src/layouts/vertical-sidebar-layout/vertical-sidebar-layout.module.ts

@@ -1,52 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { UpdIconsModule } from '@updevs/icons';
-import { UpdButtonModule } from '@updevs/components/button';
-import { UpdLinkModule } from '@updevs/components/link';
-import { UpdCoreLayoutModule } from '@updevs/sdk/layout';
-import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
-
-import * as en from '../../assets/i18n/en.json';
-import * as pt from '../../assets/i18n/pt.json';
-import { VerticalSidebarLayoutComponent } from './vertical-sidebar-layout.component';
-import { FooterComponent } from '../../partials/footer/footer.component';
-import { HeaderComponent } from '../../partials/header/header.component';
-import { FooterCopyrightDirective } from '../../partials/footer/footer-copyright.directive';
-import { SidebarComponent } from '../../partials/sidebar/sidebar.component';
-import { PageHeaderComponent } from '../../partials/page-header/page-header.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        RouterModule,
-        TranslocoModule,
-        UpdIconsModule,
-        UpdCoreLayoutModule,
-        UpdButtonModule,
-        UpdLinkModule
-    ],
-    declarations: [
-        VerticalSidebarLayoutComponent,
-        FooterComponent,
-        HeaderComponent,
-        SidebarComponent,
-        PageHeaderComponent
-    ],
-    exports: [
-        VerticalSidebarLayoutComponent,
-        FooterComponent,
-        HeaderComponent,
-        SidebarComponent,
-        PageHeaderComponent
-    ],
-    providers: [
-        FooterCopyrightDirective
-    ]
-})
-export class VerticalSidebarLayoutModule {
-    constructor(translocoService: TranslocoService) {
-        translocoService.setTranslation(en, 'en');
-        translocoService.setTranslation(pt, 'pt');
-    }
-}

package/layout/src/models/upd-layout-config.model.ts

@@ -1,71 +0,0 @@
-import { UpdLayoutConfig } from './upd-layout.config';
-
-/**
- * Layout configuration.
- */
-export class UpdLayoutConfigModel implements UpdLayoutConfig {
-    /**
-     * Main menu title.
-     */
-    menuTitle?: string;
-    /**
-     * Whether the menu should start expanded.
-     */
-    shouldMenuStartExpanded?: boolean;
-    /**
-     * Main application logo.
-     */
-    mainLogo?: string;
-    /**
-     * Small application logo.
-     */
-    smallLogo?: string;
-    /**
-     * Background image for the logged out page.
-     */
-    loggedOutBackground?: string;
-    /**
-     * Whether the default notifications button should be displayed.
-     */
-    showNotificationsButton?: boolean;
-    /**
-     * Whether the report error button should be displayed when an exception is thrown by the server.
-     */
-    displayReportErrorButton?: boolean;
-    /**
-     * Whether the logged user's menu should be displayed.
-     */
-    showUserMenu?: boolean;
-
-    constructor(init?: UpdLayoutConfig) {
-        Object.assign(this, init);
-
-        if (this.mainLogo === undefined) {
-            // this.mainLogo = LogoConstants.defaultLogo; // TODO: add images
-        }
-
-        if (this.smallLogo === undefined) {
-            // this.smallLogo = LogoConstants.smallLogo;
-        }
-
-        if (this.loggedOutBackground === undefined) {
-            // this.loggedOutBackground = ImageConstants.loggedOutBackground;
-        }
-
-        if (this.menuTitle === undefined) {
-            this.menuTitle = 'UpDevs';
-        }
-
-        if (this.showNotificationsButton === undefined) {
-            this.showNotificationsButton = true;
-        }
-
-        if (this.showUserMenu === undefined) {
-            this.showUserMenu = true;
-        }
-
-        if (this.displayReportErrorButton === undefined) {
-            this.displayReportErrorButton = false;
-        }
-    }
-}

package/layout/src/pages/auth-flow/auth-flow-routing.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { OauthCallbackComponent } from './oauth-callback/oauth-callback.component';
-import { LoggedOutComponent } from './logged-out/logged-out.component';
-import { LoginComponent } from './login/login.component';
-
-/**
- * Auth flow routes.
- */
-export const routes: Routes = [
-    { path: 'oauth/callback', component: OauthCallbackComponent },
-    { path: 'logged-out', component: LoggedOutComponent },
-    { path: 'login', component: LoginComponent }
-];
-
-@NgModule({
-    imports: [RouterModule.forRoot(routes, { useHash: true })],
-    exports: [RouterModule]
-})
-export class AuthFlowRoutingModule {}

package/layout/src/pages/auth-flow/auth-flow.module.ts

@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UpdButtonModule } from '@updevs/components/button';
-
-import { LoginComponent } from './login/login.component';
-import { OauthCallbackComponent } from './oauth-callback/oauth-callback.component';
-import { LoggedOutComponent } from './logged-out/logged-out.component';
-import { AuthFlowRoutingModule } from './auth-flow-routing.module';
-import { FormsModule } from '@angular/forms';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        AuthFlowRoutingModule,
-        UpdButtonModule,
-        FormsModule
-    ],
-    declarations: [
-        LoginComponent,
-        OauthCallbackComponent,
-        LoggedOutComponent
-    ],
-    exports: [
-        LoginComponent,
-        OauthCallbackComponent,
-        LoggedOutComponent
-    ]
-})
-export class AuthFlowModule {}

package/layout/src/pages/auth-flow/logged-out/logged-out.component.html

@@ -1 +0,0 @@
-<p>logged-out works!</p>

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

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

package/layout/src/pages/auth-flow/logged-out/logged-out.component.ts

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

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

@@ -1,96 +0,0 @@
-<div class="page page-center">
-    <ng-container [ngSwitch]="layout">
-        <div *ngSwitchCase="'centered-box'" class="container container-tight py-4">
-            <ng-container [ngTemplateOutlet]="loginCard"></ng-container>
-        </div>
-        <div *ngSwitchCase="'box-with-picture'" class="container container-normal py-4">
-            <div class="row align-items-center g-4">
-                <div class="col-lg">
-                    <div class="container-tight">
-                        <ng-container [ngTemplateOutlet]="loginCard"></ng-container>
-                    </div>
-                </div>
-                <div class="col-lg d-none d-lg-block">
-                    <img height="300" class="d-block mx-auto upd-right-login-image"/>
-                </div>
-            </div>
-        </div>
-    </ng-container>
-</div>
-
-<ng-template #loginCard>
-    <div class="text-center mb-4">
-        <a href="." class="navbar-brand navbar-brand-autodark">
-            <img height="36" class="navbar-brand-image upd-brand-logo"/>
-        </a>
-    </div>
-    <div class="card card-md">
-        <div class="card-body">
-            <h2 class="h2 text-center mb-4" i18n>Login to your account</h2>
-            <form action="./" method="get" autocomplete="off" novalidate>
-                <div class="mb-3">
-                    <label class="form-label">Email address</label>
-                    <input type="email" class="form-control" name="username" [(ngModel)]="username">
-                </div>
-                <div class="mb-2">
-                    <label class="form-label">
-                        Password
-                        <span class="form-label-description">
-                    <a href="./forgot-password.html" i18n>I forgot my password</a>
-                  </span>
-                    </label>
-                    <div class="input-group input-group-flat">
-                        <input type="password" class="form-control" name="password" [(ngModel)]="password">
-                        <span class="input-group-text">
-                    <a href="#" class="link-secondary" title="Show password" data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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"/><circle cx="12" cy="12" r="2"/><path
-                          d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/></svg>
-                    </a>
-                  </span>
-                    </div>
-                </div>
-                <div class="mb-2">
-                    <label class="form-check">
-                        <input type="checkbox" class="form-check-input"/>
-                        <span class="form-check-label" i18n>Remember me on this device</span>
-                    </label>
-                </div>
-                <div class="form-footer">
-                    <upd-button (clicked)="login()" customClasses="w-100">
-                        <span i18n>Sign in</span>
-                    </upd-button>
-                </div>
-            </form>
-        </div>
-        <div class="hr-text" i18n>or</div>
-        <div class="card-body">
-            <div class="row">
-                <div class="col"><a href="#" class="btn w-100">
-                    <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" 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="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"/>
-                    </svg>
-                    Login with Github
-                </a></div>
-                <div class="col"><a href="#" class="btn w-100">
-                    <!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon text-twitter" 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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"/>
-                    </svg>
-                    Login with Twitter
-                </a></div>
-            </div>
-        </div>
-    </div>
-    <div class="text-center text-muted mt-3">
-        Don't have account yet? <a href="./sign-up.html" tabindex="-1" i18n>Sign up</a>
-    </div>
-</ng-template>