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

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

@@ -1,50 +0,0 @@
-<div class="d-flex">
-    <div class="time-items-list">
-        <ul class="list">
-            @for (h of hoursList; track h) {
-                <li>
-                    <div class="cell">{{ h.toString().padStart(2, '0') }}</div>
-                </li>
-            }
-        </ul>
-    </div>
-    <div class="time-dots-separator">
-        <span>:</span>
-    </div>
-    <div class="time-items-list">
-        <ul class="list">
-            @for (m of minutesList; track m) {
-                <li>
-                    <div class="cell">{{ m.toString().padStart(2, '0') }}</div>
-                </li>
-            }
-        </ul>
-    </div>
-    @if (shouldSelectSeconds) {
-        <div class="time-dots-separator">
-            <span>:</span>
-        </div>
-        <div class="time-items-list">
-            <ul class="list">
-                @for (s of secondsList; track s) {
-                    <li>
-                        <div class="cell">{{ s.toString().padStart(2, '0') }}</div>
-                    </li>
-                }
-            </ul>
-        </div>
-    }
-    @if (!shouldUse24hFormat) {
-        <div class="time-items-list">
-            <ul class="list">
-                <li>
-                    <div class="cell">{{ 'AM' | transloco }}</div>
-                    <div class="cell">{{ 'PM' | transloco }}</div>
-                </li>
-            </ul>
-        </div>
-    }
-</div>
-<div>
-    <upd-button>{{ 'Select' | transloco }}</upd-button>
-</div>

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

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

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

@@ -1,22 +0,0 @@
-/* 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

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

package/layout/ng-package.json

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

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

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

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

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

@@ -1,20 +0,0 @@
-{
-    "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

@@ -1,20 +0,0 @@
-{
-    "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/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,16 +0,0 @@
-<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

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

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

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

@@ -1,42 +0,0 @@
-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[];
-}