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

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

@@ -0,0 +1,47 @@
+.time-dots-separator {
+    display: flex;
+    align-items: center;
+}
+
+.time-items-list {
+    padding-left: 15px;
+    padding-right: 15px;
+    display: flex;
+    justify-items: center;
+    flex: auto;
+    height: 240px;
+
+    .list {
+        position: relative;
+        flex: 1 0 auto;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+        text-align: center;
+        list-style: none;
+
+
+        li {
+            margin-top: 0;
+            display: block;
+            height: 40px;
+            cursor: pointer;
+
+            .-item {
+                display: block;
+                cursor: pointer;
+                transition: color .3s;
+            }
+        }
+    }
+}
+
+.list {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.list::-webkit-scrollbar {
+    display: none;
+}

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

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

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

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslocoService, TranslocoModule } from '@jsverse/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/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+    displayName: 'components',
+    preset: '../../jest.preset.js',
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+    coverageDirectory: '../../coverage/libs/components',
+    transform: {
+        '^.+\\.(ts|mjs|js|html)$': [
+            'jest-preset-angular',
+            {
+                tsconfig: '<rootDir>/tsconfig.spec.json',
+                stringifyContentPathRegex: '\\.(html|svg)$',
+            },
+        ],
+    },
+    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+    snapshotSerializers: [
+        'jest-preset-angular/build/serializers/no-ng-attributes',
+        'jest-preset-angular/build/serializers/ng-snapshot',
+        'jest-preset-angular/build/serializers/html-comment',
+    ],
+};

package/layout/index.ts

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

package/layout/ng-package.json

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

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

@@ -0,0 +1,16 @@
+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 readonly _layoutService = inject(LayoutService);
+
+    override ngOnDestroy(): void {
+        super.ngOnDestroy();
+        // TODO: clear subheader.
+    }
+}

package/layout/src/abstractions/base.layout.ts

@@ -0,0 +1,27 @@
+import { BaseComponent, LayoutService } from '@updevs/sdk/layout';
+import { inject, OnInit, Directive, OnDestroy } from '@angular/core';
+
+import { UpdLayoutConfigService } from '../services/upd-layout-config.service';
+
+/**
+ * Basic layout structure.
+ */
+@Directive()
+export abstract class BaseLayout extends BaseComponent implements OnInit, OnDestroy {
+    protected readonly _layoutConfigService = inject(UpdLayoutConfigService);
+    protected readonly _layoutService = inject(LayoutService);
+
+    ngOnInit(): void {
+        if (this._layoutConfigService.config.useFluidLayout) {
+            this._layoutService.addBodyClasses('layout-fluid');
+        }
+    }
+
+    override ngOnDestroy(): void {
+        super.ngOnDestroy();
+
+        if (this._layoutConfigService.config.useFluidLayout) {
+            this._layoutService.removeBodyClasses('layout-fluid');
+        }
+    }
+}

package/layout/src/assets/i18n/en.json

@@ -0,0 +1,20 @@
+{
+    "UpDevs": {
+        "Login": {
+            "Title": "Login",
+            "NoAccountYet": "Don't have an account?",
+            "SignUp": "Sign-up",
+            "SignIn": "Sign-in",
+            "RecoverPassword": "Recover my password",
+            "RememberMe": "Remember me on this device",
+            "Or": "or",
+            "Email": "Email",
+            "Password": "Password"
+        },
+        "Footer": {
+            "Prefix": "Copyright",
+            "Symbol": "©",
+            "Suffix": "All rights reserved."
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+{
+    "UpDevs": {
+        "Login": {
+            "Title": "Login",
+            "NoAccountYet": "Não tem conta?",
+            "SignUp": "Cadastre-se",
+            "SignIn": "Entrar",
+            "RecoverPassword": "Recuperar minha senha",
+            "RememberMe": "Lembrar",
+            "Or": "ou",
+            "Email": "Email",
+            "Password": "Senha"
+        },
+        "Footer": {
+            "Prefix": "Copyright",
+            "Symbol": "©",
+            "Suffix": "Todos os direitos reservados."
+        }
+    }
+}

package/layout/src/index.ts

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+<div class="page">
+    <upd-sidebar></upd-sidebar>
+    <upd-header></upd-header>
+
+    <div class="page-wrapper">
+        @if (showPageHeader) {
+            <upd-page-header [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

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

@@ -0,0 +1,30 @@
+import { Component, ViewEncapsulation, OnInit, ChangeDetectorRef, inject } from '@angular/core';
+import { PageHeaderModel } from '@updevs/sdk/layout';
+
+import { BaseLayout } from '../../abstractions/base.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 BaseLayout implements OnInit {
+    showPageHeader = false;
+    pageHeader?: PageHeaderModel;
+
+    private readonly changeDetectorRef = inject(ChangeDetectorRef);
+
+    override ngOnInit(): void {
+        super.ngOnInit();
+
+        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

@@ -0,0 +1,51 @@
+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 '@jsverse/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,
+        FooterCopyrightDirective
+    ],
+    exports: [
+        VerticalSidebarLayoutComponent,
+        FooterComponent,
+        HeaderComponent,
+        SidebarComponent,
+        PageHeaderComponent,
+        FooterCopyrightDirective
+    ]
+})
+export class VerticalSidebarLayoutModule {
+    constructor(translocoService: TranslocoService) {
+        translocoService.setTranslation(en, 'en');
+        translocoService.setTranslation(pt, 'pt');
+    }
+}

package/layout/src/models/login-page-config.model.ts

@@ -0,0 +1,57 @@
+import { BgColorStyleType, ColorStyleType, ButtonModel } from '@updevs/sdk/layout';
+
+import { LoginPageConfig } from './login-page.config';
+
+/**
+ * Configuration of the login page layout.
+ */
+export class LoginPageConfigModel implements LoginPageConfig {
+    /**
+     * Layout of the login page.
+     */
+    layout: 'centered-box' | 'box-with-picture' | 'cover';
+
+    /**
+     * Background color of the login box (exclusive with bgStyle).
+     * Should be the name of a CSS class.
+     */
+    bgColor?: string;
+
+    /**
+     * Background color of the login box (exclusive with bgColor).
+     */
+    bgStyle?: BgColorStyleType;
+
+    /**
+     * Color of the border used in the login page.
+     */
+    borderColor: ColorStyleType;
+
+    /**
+     * Color of the sign-in button.
+     */
+    signInButtonColor: ColorStyleType;
+
+    /**
+     * Color of all links in the login page.
+     */
+    linksColor: ColorStyleType;
+
+    /**
+     * Buttons used for social login (google, facebook, etc).
+     */
+    socialLoginButtons: ButtonModel[] = [];
+
+    constructor(init?: LoginPageConfig) {
+        Object.assign(this, init);
+
+        this.layout = init?.layout || 'centered-box';
+        this.borderColor = init?.borderColor || 'primary';
+        this.signInButtonColor = init?.signInButtonColor || 'primary';
+        this.linksColor = init?.linksColor || this.signInButtonColor;
+
+        if (init?.socialLoginButtons) {
+            this.socialLoginButtons = init.socialLoginButtons;
+        }
+    }
+}

package/layout/src/models/login-page.config.ts

@@ -0,0 +1,42 @@
+import { BgColorStyleType, ColorStyleType, ButtonModel } from '@updevs/sdk/layout';
+
+/**
+ * Configuration of the login page layout.
+ */
+export interface LoginPageConfig {
+    /**
+     * Layout of the login page.
+     */
+    layout?: 'centered-box' | 'box-with-picture' | 'cover';
+
+    /**
+     * Background color of the login box (exclusive with bgStyle).
+     * Should be the name of a CSS class.
+     */
+    bgColor?: string;
+
+    /**
+     * Background color of the login box (exclusive with bgColor).
+     */
+    bgStyle?: BgColorStyleType;
+
+    /**
+     * Color of the border used in the login page.
+     */
+    borderColor?: ColorStyleType;
+
+    /**
+     * Color of the sign-in button.
+     */
+    signInButtonColor?: ColorStyleType;
+
+    /**
+     * Color of all links in the login page.
+     */
+    linksColor?: ColorStyleType;
+
+    /**
+     * Buttons used for social login (google, facebook, etc).
+     */
+    socialLoginButtons?: ButtonModel[];
+}

package/layout/{models/public-api.d.ts → src/models/public-api.ts}

@@ -1 +1,2 @@
 export * from './upd-layout.config';
+export * from './login-page.config';

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

@@ -0,0 +1,16 @@
+import { SecurityLayoutConfig } from './security-layout.config';
+import { LoginPageConfigModel } from './login-page-config.model';
+
+/**
+ * Configuration for the pages related to the security.
+ */
+export class SecurityLayoutConfigModel implements SecurityLayoutConfig {
+    /**
+     * Configuration of the login page.
+     */
+    loginPage: LoginPageConfigModel;
+
+    constructor(init?: SecurityLayoutConfig) {
+        this.loginPage = new LoginPageConfigModel(init?.loginPage);
+    }
+}

package/layout/src/models/security-layout.config.ts

@@ -0,0 +1,11 @@
+import { LoginPageConfig } from './login-page.config';
+
+/**
+ * Configuration for the pages related to the security.
+ */
+export interface SecurityLayoutConfig {
+    /**
+     * Configuration of the login page.
+     */
+    loginPage?: LoginPageConfig;
+}