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

package/paginator/src/paginator.component.html

@@ -1,83 +0,0 @@
-<ng-container *transloco="let t; prefix: 'UpDevs.Paginator'">
-    <div class="d-flex m-0 ms-auto align-items-center">
-        <div class="text-secondary me-2">
-            {{ t('ItemsPerPage') }}
-        </div>
-        <upd-select [items]="pageOptions()" [selected]="selectedPageSize()" (selectedItem)="onSelectPageSize($event)"
-            [shouldShowClearButton]="false" [isCompact]="true" [useSystemStyle]="true"></upd-select>
-        <p class="m-0 text-secondary ms-4">
-            @if (totalRecords() > 0) {
-                {{ t('FromToOf', { first: currentFirstDisplayed(), last: currentLastDisplayed(), totalRecords: totalRecords() }) }}
-            } @else {
-                {{ t('NoRecords') }}
-            }
-        </p>
-        <ul class="pagination m-0 ms-4">
-            @if (!previousDescription()) {
-                <li class="page-item">
-                    <upd-button customClasses="page-link" [isLink]="true" [isIcon]="!shouldDisplayFirstText()" colorStyle="secondary"
-                        [attr.tabindex]="isFirstDisabled() ? -1 : 0" [attr.aria-disabled]="isFirstDisabled()"
-                        [isDisabled]="isPreviousDisabled()" (clicked)="selectPage(startPageIndex())">
-                        @if (shouldDisplayFirstIcon()) {
-                            <upd-icon tablerIcon="chevron-left-pipe"></upd-icon>
-                        }
-                        @if (shouldDisplayFirstText()) {
-                            {{ t('First') }}
-                        }
-                    </upd-button>
-                </li>
-            }
-
-            <li class="page-item" [class.page-prev]="!!previousDescription()">
-                <upd-button customClasses="page-link" [isLink]="true" [isIcon]="!shouldDisplayPreviousText()" colorStyle="secondary"
-                    [attr.tabindex]="isPreviousDisabled() ? -1 : 0" [attr.aria-disabled]="isPreviousDisabled()"
-                    [isDisabled]="isPreviousDisabled()" (clicked)="selectPage(currentPage() - 1)">
-                    @if (!!previousDescription()) {
-                        <div class="page-item-subtitle">{{ t('Previous') }}</div>
-                        <div class="page-item-title">{{ textService.getText(previousDescription()) }}</div>
-                    } @else {
-                        @if (shouldDisplayPreviousIcon()) {
-                            <upd-icon tablerIcon="chevron-left"></upd-icon>
-                        }
-                        @if (shouldDisplayPreviousText()) {
-                            {{ t('PreviousShort') }}
-                        }
-                    }
-                </upd-button>
-            </li>
-
-            <li class="page-item" [class.page-next]="!!nextDescription()">
-                <upd-button customClasses="page-link" [isLink]="true" [isIcon]="!shouldDisplayNextText()" colorStyle="secondary"
-                    [attr.tabindex]="isNextDisabled() ? -1 : 0" [attr.aria-disabled]="isNextDisabled()" [isDisabled]="isNextDisabled()"
-                    (clicked)="selectPage(currentPage() + 1)">
-                    @if (!!nextDescription()) {
-                        <div class="page-item-subtitle">{{ t('Next') }}</div>
-                        <div class="page-item-title">{{ textService.getText(nextDescription()) }}</div>
-                    } @else {
-                        @if (shouldDisplayNextText()) {
-                            {{ t('NextShort') }}
-                        }
-                        @if (shouldDisplayNextIcon()) {
-                            <upd-icon tablerIcon="chevron-right"></upd-icon>
-                        }
-                    }
-                </upd-button>
-            </li>
-
-            @if (!nextDescription()) {
-                <li class="page-item">
-                    <upd-button customClasses="page-link" [isLink]="true" [isIcon]="!shouldDisplayLastText()" colorStyle="secondary"
-                        [attr.tabindex]="isLastDisabled() ? -1 : 0" [attr.aria-disabled]="isLastDisabled()" [isDisabled]="isNextDisabled()"
-                        (clicked)="selectPage(totalPages() - (startPageIndex() === 0 ? 1 : 0))">
-                        @if (shouldDisplayLastText()) {
-                            {{ t('Last') }}
-                        }
-                        @if (shouldDisplayLastIcon()) {
-                            <upd-icon tablerIcon="chevron-right-pipe"></upd-icon>
-                        }
-                    </upd-button>
-                </li>
-            }
-        </ul>
-    </div>
-</ng-container>

package/paginator/src/paginator.component.scss

@@ -1 +0,0 @@
-

package/paginator/src/paginator.component.spec.ts

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

package/paginator/src/paginator.component.ts

@@ -1,62 +0,0 @@
-import { Component, inject, HostBinding, effect, input, computed, Signal, model, Output, EventEmitter } from '@angular/core';
-import { TextModel, TextService } from '@updevs/sdk';
-import { SelectItem } from '@updevs/components/form-controls/select';
-
-@Component({
-    selector: 'upd-paginator',
-    templateUrl: './paginator.component.html',
-    styleUrl: './paginator.component.scss'
-})
-export class PaginatorComponent {
-    @HostBinding('class') hostClasses = '';
-    @Output() readonly changed = new EventEmitter<void>();
-
-    startPageIndex = input<0 | 1>(0);
-    currentPage = model<number>(this.startPageIndex());
-    wrapperClasses = input<string>('');
-    availablePageSizes = input<number[]>([5, 10, 15, 25, 50]);
-    defaultInitPageSize = input<number>(10);
-    pageSize = model<number>(this.defaultInitPageSize());
-    shouldDisplayFirstIcon = input<boolean>(true);
-    shouldDisplayFirstText = input<boolean>(true);
-    shouldDisplayPreviousIcon = input<boolean>(true);
-    shouldDisplayPreviousText = input<boolean>(true);
-    shouldDisplayNextIcon = input<boolean>(true);
-    shouldDisplayNextText = input<boolean>(true);
-    shouldDisplayLastIcon = input<boolean>(true);
-    shouldDisplayLastText = input<boolean>(true);
-    previousDescription = input<TextModel>();
-    nextDescription = input<TextModel>();
-    totalRecords = input<number>(0);
-    isFirstDisabled = computed(() => this.currentPage() === this.startPageIndex() || this.totalRecords() === 0);
-    isPreviousDisabled = computed(() => this.currentPage() === this.startPageIndex() || this.totalRecords() === 0);
-    isNextDisabled = computed(() => this.currentPage() + 1 === this.totalPages() || this.totalRecords() === 0);
-    isLastDisabled = computed(() => this.currentPage() + 1 === this.totalPages() || this.totalRecords() === 0);
-    pageOptions: Signal<SelectItem[]> = computed(() => this.availablePageSizes().map(ps => ({ value: ps, text: ps.toString() })));
-    selectedPageSize = computed(() => this.pageOptions().find(po => po.value === this.pageSize()));
-    totalPages = computed(() => Math.ceil(this.totalRecords() / this.pageSize()));
-    currentFirstDisplayed = computed(() => ((this.currentPage() - this.startPageIndex()) * this.pageSize()) + 1);
-    currentLastDisplayed = computed(() => (this.expectedLast() > this.totalRecords() ? this.totalRecords() : this.expectedLast()));
-
-    readonly textService = inject(TextService);
-
-    private expectedLast = computed(() => (this.currentPage() + (this.startPageIndex() === 1 ? 0 : 1)) * this.pageSize());
-    private readonly defaultWrapperClasses = 'd-flex align-items-center';
-
-    constructor() {
-        effect(() => {
-            this.hostClasses = `${this.defaultWrapperClasses} ${this.wrapperClasses()}`;
-        });
-    }
-
-    onSelectPageSize(page?: SelectItem): void {
-        console.log('page', page);
-        this.pageSize.set(page?.value || 1);
-        this.changed.emit();
-    }
-
-    selectPage(page: number): void {
-        this.currentPage.set(page);
-        this.changed.emit();
-    }
-}

package/paginator/src/upd-paginator.module.ts

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UpdIconsModule } from '@updevs/icons';
-import { UpdButtonModule } from '@updevs/components/button';
-import { UpdSelectModule } from '@updevs/components/form-controls/select';
-import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
-
-import * as en from './assets/i18n/en.json';
-import * as pt from './assets/i18n/pt.json';
-import { PaginatorComponent } from './paginator.component';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        UpdIconsModule,
-        UpdButtonModule,
-        UpdSelectModule,
-        TranslocoDirective
-    ],
-    declarations: [
-        PaginatorComponent
-    ],
-    exports: [
-        PaginatorComponent
-    ]
-})
-export class UpdPaginatorModule {
-    constructor(translocoService: TranslocoService) {
-        translocoService.setTranslation(en, 'en');
-        translocoService.setTranslation(pt, 'pt');
-    }
-}

package/popover/index.ts

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

package/popover/ng-package.json

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

package/popover/src/popover.component.html

@@ -1,21 +0,0 @@
-<div class="popover-arrow upd-popover-arrow -{{placement}}"></div>
-@if (!!title || !!titleTemplate) {
-    @if (!!title) {
-        <h3 [innerHTML]="title" class="popover-header"></h3>
-    } @else {
-        <div class="popover-header">
-            <ng-template [ngTemplateOutlet]="titleTemplate!"></ng-template>
-        </div>
-    }
-}
-<div class="popover-body">
-    @if (!!text) {
-        <span [innerHTML]="text"></span>
-    } @else {
-        @if (!template) {
-            <ng-content></ng-content>
-        } @else {
-            <ng-template [ngTemplateOutlet]="template!"></ng-template>
-        }
-    }
-</div>

package/popover/src/popover.component.scss

@@ -1,8 +0,0 @@
-.upd-popover {
-    position: absolute;
-    margin: 0;
-}
-
-.upd-popover-arrow {
-    position: absolute;
-}

package/popover/src/popover.component.spec.ts

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

package/popover/src/popover.component.ts

@@ -1,53 +0,0 @@
-import { Component, Input, HostBinding, OnInit, OnChanges, ViewEncapsulation, TemplateRef } from '@angular/core';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-
-@Component({
-    selector: 'upd-popover',
-    templateUrl: './popover.component.html',
-    styleUrls: ['./popover.component.scss'],
-    encapsulation: ViewEncapsulation.None
-})
-export class PopoverComponent implements OnInit, OnChanges {
-    @HostBinding('class') classes = '';
-    @HostBinding('attr.data-popper-placement') popperPlacement = '';
-    @HostBinding('role') readonly role = 'tooltip';
-
-    @Input() title?: string;
-    @Input() text?: string;
-    @Input() titleTemplate?: TemplateRef<any>;
-    @Input() template?: TemplateRef<any>;
-    @Input() placement: TopBottomLeftRightType = 'top';
-    @Input() customClasses?: string;
-
-    get isVisible(): boolean {
-        return this._isVisible;
-    }
-
-    private _isVisible = false;
-
-    ngOnInit(): void {
-        this.updateClasses();
-    }
-
-    ngOnChanges(): void {
-        this.updateClasses();
-    }
-
-    setVisible(isVisible: boolean): void {
-        this._isVisible = isVisible;
-        this.updateClasses();
-    }
-
-    private updateClasses(): void {
-        this.popperPlacement = this.placement;
-        this.classes = [
-            'popover',
-            'bs-popover-auto',
-            !this._isVisible ? 'fade' : '',
-            this._isVisible ? 'show' : '',
-            'upd-popover',
-            `-${this.placement}`,
-            ...(this.customClasses?.split(' ') || [])
-        ].join(' ');
-    }
-}

package/popover/src/popover.directive.spec.ts

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

package/popover/src/popover.directive.ts

@@ -1,125 +0,0 @@
-import {
-    Directive,
-    Input,
-    TemplateRef,
-    ViewContainerRef,
-    Renderer2,
-    ElementRef,
-    Injector,
-    NgZone,
-    ComponentRef,
-    HostListener, inject
-} from '@angular/core';
-import { TopBottomLeftRightType } from '@updevs/sdk/types';
-import { PositioningService, ComputePositionResult, DynamicComponentLoaderService } from '@updevs/sdk/layout';
-
-import { PopoverComponent } from './popover.component';
-
-@Directive({
-    selector: '[updPopover]'
-})
-export class PopoverDirective {
-    @Input('updPopover') text?: string;
-    @Input('updPopoverTitle') title?: string;
-    @Input('updPopoverTitleTemplate') popoverTitleTemplate?: TemplateRef<any>;
-    @Input('updPopoverTemplate') popoverTemplate?: TemplateRef<any>;
-    @Input('updPopoverPlacement') placement: TopBottomLeftRightType = 'top';
-    @Input('updPopoverCustomClasses') customClasses?: string;
-    /**
-     * This makes the popover behave like a tooltip.
-     * It means it'll show/hide depending on whether the mouse is over or not the element.
-     */
-    @Input('updPopoverActAsTooltip') actAsTooltip = false;
-
-    private popoverComponentRef?: ComponentRef<PopoverComponent>;
-
-    private readonly elementRef = inject(ElementRef);
-    private readonly renderer = inject(Renderer2);
-    private readonly viewContainerRef = inject(ViewContainerRef);
-    private readonly ngZone = inject(NgZone);
-    private readonly injector = inject(Injector);
-    private readonly positioningService = inject(PositioningService);
-    private readonly dynamicComponentLoaderService = inject(DynamicComponentLoaderService);
-
-    @HostListener('mouseenter')
-    onMouseEnter(): void {
-        if (this.actAsTooltip) {
-            this.initPopover();
-        }
-    }
-
-    @HostListener('mouseleave')
-    onMouseLeave(): void {
-        if (this.actAsTooltip) {
-            this.disposePopover();
-        }
-    }
-
-    @HostListener('click')
-    onClick(): void {
-        if (!this.actAsTooltip) {
-            if (this.popoverComponentRef?.instance.isVisible) {
-                this.disposePopover();
-            } else {
-                this.initPopover();
-            }
-        }
-    }
-
-    private initPopover(): void {
-        this.setupPopover();
-        this.popoverComponentRef!.instance.setVisible(true);
-        this.ngZone.runOutsideAngular(() =>
-            this.positioningService
-                .computePosition(this.elementRef, this.popoverComponentRef!.location, { placement: this.placement })
-                .subscribe(resp => this.updatePosition(resp))
-        );
-    }
-
-    private disposePopover(): void {
-        this.viewContainerRef.clear();
-        this.popoverComponentRef!.instance.setVisible(false);
-    }
-
-    private setupPopover(): void {
-        this.viewContainerRef.clear();
-
-        this.popoverComponentRef = this.dynamicComponentLoaderService.load(PopoverComponent, this.viewContainerRef, this.injector);
-        this.popoverComponentRef!.instance.title = this.title;
-        this.popoverComponentRef!.instance.text = this.text;
-        this.popoverComponentRef!.instance.titleTemplate = this.popoverTitleTemplate;
-        this.popoverComponentRef!.instance.template = this.popoverTemplate;
-        this.popoverComponentRef!.instance.placement = this.placement;
-        this.popoverComponentRef!.instance.customClasses = this.customClasses;
-    }
-
-    private updatePosition(result: ComputePositionResult): void {
-        const nativeElement = this.popoverComponentRef!.location.nativeElement;
-        const arrowElement = this.popoverComponentRef!.location.nativeElement.querySelector('.popover-arrow');
-        const popoverBox = nativeElement.getBoundingClientRect();
-        const arrowBox = arrowElement.getBoundingClientRect();
-
-        switch (this.placement) {
-            case 'top':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y - arrowBox.height}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x}px`);
-                this.renderer.setStyle(arrowElement, 'left', `${(popoverBox.width / 2) - (arrowBox.width / 2)}px`);
-                break;
-            case 'bottom':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y + arrowBox.height}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x}px`);
-                this.renderer.setStyle(arrowElement, 'left', `${(popoverBox.width / 2) - (arrowBox.width / 2)}px`);
-                break;
-            case 'left':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x - arrowBox.width}px`);
-                this.renderer.setStyle(arrowElement, 'top', `${(popoverBox.height / 2) - (arrowBox.height / 2)}px`);
-                break;
-            case 'right':
-                this.renderer.setStyle(nativeElement, 'top', `${result.y}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${result.x + arrowBox.width}px`);
-                this.renderer.setStyle(arrowElement, 'top', `${(popoverBox.height / 2) - (arrowBox.height / 2)}px`);
-                break;
-        }
-    }
-}

package/popover/src/upd-popover.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { PopoverComponent } from './popover.component';
-import { PopoverDirective } from './popover.directive';
-
-@NgModule({
-    imports: [
-        CommonModule
-    ],
-    declarations: [
-        PopoverComponent,
-        PopoverDirective
-    ],
-    exports: [
-        PopoverComponent,
-        PopoverDirective
-    ]
-})
-export class UpdPopoverModule {}

package/project.json

@@ -1,40 +0,0 @@
-{
-    "name": "components",
-    "$schema": "../../node_modules/nx/schemas/project-schema.json",
-    "sourceRoot": "libs/components/src",
-    "prefix": "upd",
-    "projectType": "library",
-    "tags": [],
-    "targets": {
-        "build": {
-            "executor": "@nx/angular:package",
-            "outputs": [
-                "{workspaceRoot}/dist/{projectRoot}"
-            ],
-            "options": {
-                "project": "libs/components/ng-package.json"
-            },
-            "configurations": {
-                "production": {
-                    "tsConfig": "libs/components/tsconfig.lib.prod.json"
-                },
-                "development": {
-                    "tsConfig": "libs/components/tsconfig.lib.json"
-                }
-            },
-            "defaultConfiguration": "production"
-        },
-        "test": {
-            "executor": "@nx/jest:jest",
-            "outputs": [
-                "{workspaceRoot}/coverage/{projectRoot}"
-            ],
-            "options": {
-                "jestConfig": "libs/components/jest.config.ts"
-            }
-        },
-        "lint": {
-            "executor": "@nx/eslint:lint"
-        }
-    }
-}

package/src/lib/models/public-api.ts

@@ -1 +0,0 @@
-export * from './row-column-size';

package/src/lib/models/row-column-size.ts

@@ -1,5 +0,0 @@
-export interface RowColumnSize {
-    default: number;
-    medium?: number;
-    small?: number;
-}

package/src/lib/public-api.ts

@@ -1,4 +0,0 @@
-export * from './models/public-api';
-export * from './tools/public-api';
-export * from './types/public-api';
-export * from './upd-components.module';

package/src/lib/tools/column-size.helper.ts

@@ -1,19 +0,0 @@
-import { RowColumnSize } from '../models/row-column-size';
-
-export class ColumnSizeHelper {
-    static getSizeClasses(colSize?: RowColumnSize, defaultIfEmpty?: number): string {
-        if (!colSize) {
-            return `col-${defaultIfEmpty || 12}`;
-        }
-
-        return this.getClasses(
-            `col-${colSize.default}`,
-            `col-md-${colSize.medium || colSize.default}`,
-            `col-sm-${(colSize.small || 12)}`
-        );
-    }
-
-    static getClasses(...classes: string[]): string {
-        return classes.join(' ').trim();
-    }
-}

package/src/lib/tools/public-api.ts

@@ -1 +0,0 @@
-export * from './column-size.helper';

package/src/lib/types/component-size.type.ts

@@ -1 +0,0 @@
-export type ComponentSizeType = 'small' | 'default' | 'large';

package/src/lib/types/horizontal-vertical.type.ts

@@ -1 +0,0 @@
-export type HorizontalVerticalType = 'horizontal' | 'vertical';

package/src/lib/types/public-api.ts

@@ -1,3 +0,0 @@
-export * from './component-size.type';
-export * from './horizontal-vertical.type';
-export * from './validation-status.type';

package/src/lib/types/validation-status.type.ts

@@ -1 +0,0 @@
-export type ValidationStatusType = 'valid' | 'invalid';

package/src/lib/upd-components.module.ts

@@ -1,6 +0,0 @@
-import { NgModule } from '@angular/core';
-
-@NgModule({
-    imports: []
-})
-export class UpdComponentsModule {}

package/src/public-api.ts

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

package/src/test-setup.ts

@@ -1,8 +0,0 @@
-// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
-globalThis.ngJest = {
-    testEnvironmentOptions: {
-        errorOnUnknownElements: true,
-        errorOnUnknownProperties: true,
-    },
-};
-import 'jest-preset-angular/setup-jest';

package/table/index.ts

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

package/table/ng-package.json

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