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

package/popover/src/popover.component.ts

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

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

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

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

@@ -0,0 +1,40 @@
+{
+    "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/index.ts

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

package/src/lib/index.ts

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

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

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

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

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

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

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

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

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

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

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

package/{lib/types/public-api.d.ts → src/lib/types/public-api.ts}

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

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

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

package/src/test-setup.ts

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

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

package/table/ng-package.json

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

package/table/src/abstractions/base-column.model.ts

@@ -0,0 +1,69 @@
+import { TextModel } from '@updevs/sdk';
+import { DataTypeEnum } from '@updevs/sdk/stores';
+import { TextAlignmentType, TextDecorationType, OverflowStrategyType, FontWeightType, WidthModel } from '@updevs/sdk/layout';
+import { OptionalType } from '@updevs/sdk/types';
+
+import { ColumnTypeEnum } from '../models/enums/column-type.enum';
+
+export class BaseColumnModel {
+    name!: string;
+    title?: TextModel;
+    titleAlignment: TextAlignmentType = 'left';
+    allowSort = true;
+    isItalic = false;
+    type = ColumnTypeEnum.Text;
+    /**
+     * Width.
+     */
+    width?: WidthModel;
+    alignment: TextAlignmentType = 'left';
+    decoration?: TextDecorationType;
+    weight: FontWeightType = 'normal';
+    overflowStrategy: OverflowStrategyType = 'truncate';
+    shouldSpaceAfterPrefix = true;
+    shouldSpaceBeforeSuffix = true;
+    isHidden = false;
+    prefix?: TextModel;
+    suffix?: TextModel;
+    get dataType(): DataTypeEnum {
+        switch (this.type) {
+            case ColumnTypeEnum.Boolean:
+                return DataTypeEnum.Boolean;
+            case ColumnTypeEnum.DateTime:
+            case ColumnTypeEnum.Date:
+            case ColumnTypeEnum.Time:
+                return DataTypeEnum.Date;
+            case ColumnTypeEnum.Currency:
+            case ColumnTypeEnum.Number:
+                return DataTypeEnum.Number;
+            case ColumnTypeEnum.Guid:
+                return DataTypeEnum.Guid;
+            default:
+                return DataTypeEnum.String;
+        }
+    }
+    get widthClass(): string {
+        if (!this.width || !!this.width.pixels) {
+            return '';
+        }
+
+        const prefix = !!this.width.gridColumn ? 'col' : 'w';
+        const auto = !!this.width.gridColumn && this.width.gridColumn === 0 ? 'auto' : '';
+
+        return `${prefix}-${auto || this.widthSize}`;
+    }
+    get widthSize(): number {
+        return !this.width ? 0 : this.width.gridColumn || this.width.percentage || 0;
+    }
+    get pixelsSize(): OptionalType<number> {
+        return this.width?.pixels;
+    }
+
+    constructor(columnType: ColumnTypeEnum, init?: Partial<BaseColumnModel>) {
+        if (!!init) {
+            Object.assign(this, init);
+        }
+
+        this.type = columnType;
+    }
+}

package/table/src/abstractions/base.column.ts

@@ -0,0 +1,99 @@
+import { inject, Directive } from '@angular/core';
+import { TextService } from '@updevs/sdk';
+
+import { BaseColumnModel } from './base-column.model';
+import { ColumnTypeEnum } from '../models/enums/column-type.enum';
+
+@Directive()
+export abstract class BaseColumn<TConfig extends BaseColumnModel> {
+    record!: any;
+    config!: TConfig;
+    get value(): any {
+        return (this.record as any)[this.config.name];
+    }
+    get isTextType(): boolean {
+        return this.config.type !== ColumnTypeEnum.Boolean
+            && this.config.type !== ColumnTypeEnum.Image
+            && this.config.type !== ColumnTypeEnum.Custom;
+    }
+    get prefix(): string {
+        return this.textService.getText(this.config.prefix);
+    }
+    get suffix(): string {
+        return this.textService.getText(this.config.suffix);
+    }
+    get prefixSpace(): string {
+        return !!this.prefix && this.config.shouldSpaceAfterPrefix ? ' ' : '';
+    }
+    get suffixSpace(): string {
+        return !!this.suffix && this.config.shouldSpaceBeforeSuffix ? ' ' : '';
+    }
+    readonly textService = inject(TextService);
+
+    private get alignmentClass(): string {
+        const prefix = this.isTextType ? 'text' : 'justify-content';
+
+        switch (this.config.alignment) {
+            case 'justify':
+                return `${prefix}-${(this.isTextType ? 'justify' : 'between')}`;
+            case 'center':
+                return `${prefix}-center`;
+            case 'right':
+                return `${prefix}-end`;
+            default:
+                return `${prefix}-start`;
+        }
+    }
+    private get overflowClass(): string {
+        switch (this.config.overflowStrategy) {
+            case 'no-wrap':
+                return 'text-nowrap';
+            case 'wrap':
+                return 'text-wrap';
+            case 'word-break':
+                return 'text-break';
+            default:
+                return 'text-truncate';
+        }
+    }
+    private get decorationClass(): string {
+        switch (this.config.decoration) {
+            case 'underline':
+                return 'text-decoration-underline';
+            case 'strikethrough':
+                return 'text-decoration-line-through';
+            case 'none':
+                return 'text-decoration-none';
+            default:
+                return '';
+        }
+    }
+    private get weightClass(): string {
+        switch (this.config.weight) {
+            case 'bold':
+                return 'fw-bold';
+            case 'bolder':
+                return 'fw-bolder';
+            case 'light':
+                return 'fw-light';
+            case 'lighter':
+                return 'fw-lighter';
+            default:
+                return 'fw-normal';
+        }
+    }
+
+    getRecordAs<T>(): T {
+        return this.record as T;
+    }
+
+    getClasses(): string[] {
+        return [
+            this.alignmentClass,
+            this.overflowClass,
+            this.decorationClass,
+            this.weightClass,
+            this.config.isItalic ? 'fst-italic' : ''
+        ];
+    }
+}

package/table/src/abstractions/filters-operands.service.ts

@@ -0,0 +1,10 @@
+import { DataTypeEnum } from '@updevs/sdk/stores';
+import { NonNullableDictionaryType } from '@updevs/sdk/types';
+
+import { FilterOperandConfig } from '../models/filter-operand.config';
+
+export abstract class FiltersOperandsService {
+    abstract get isLoaded(): boolean;
+    abstract getOperands(type: DataTypeEnum): FilterOperandConfig[];
+    abstract getAllOperands(): NonNullableDictionaryType<FilterOperandConfig[]>;
+}

package/table/src/abstractions/public-api.ts

@@ -0,0 +1,2 @@
+export * from './base-column.model';
+export * from './filters-operands.service';

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

@@ -0,0 +1,74 @@
+{
+    "UpDevs": {
+        "Table": {
+            "Search": "Search",
+            "NoRecordsFoundTitle": "No records found",
+            "NoRecordsFoundSubtitle": "Please, adjust your search terms to find what you're looking for",
+            "HiddenColumnsTooltip": "Hidden columns",
+            "SaveCurrentView": "Save current view",
+            "ApplyFilters": "Apply filters",
+            "AddNewFilter": "Add new filter",
+            "Loading": "Loading",
+            "VisibleColumns": "Visible",
+            "HiddenColumns": "Hidden",
+            "ColumnTitleNotSet": "Title not set",
+            "NoSavedViews": "No saved views",
+            "CurrentSavedView": "View currently applied",
+            "ColumnsManagerButton": "Columns manager",
+            "ResetView": "Reset table state",
+            "Filters": {
+                "General": {
+                    "Equals": "Equals",
+                    "NotEquals": "Different than",
+                    "IsEmpty": "Is empty",
+                    "IsNotEmpty": "Is not empty"
+                },
+                "String": {
+                    "StartsWith": "Starts with",
+                    "EndsWith": "Ends with",
+                    "Contains": "Contains",
+                    "NotContains": "Doesn't contain",
+                    "In": "In"
+                },
+                "Boolean": {
+                    "True": "True",
+                    "False": "False"
+                },
+                "DateOrNumber": {
+                    "GreaterThan": "Greater than",
+                    "LessThan": "Less than",
+                    "GreaterThanOrEqualTo": "Greater than or equal to",
+                    "LessThanOrEqualTo": "Less than or equal to"
+                },
+                "Date": {
+                    "Between": "Between"
+                },
+                "Number": {
+                    "In": "In"
+                }
+            },
+            "ColumnsManager": {
+                "Apply": "Apply"
+            },
+            "SaveSearch": {
+                "Title": "Save view",
+                "Save": "Save",
+                "Cancel": "Cancel",
+                "Name": "Name",
+                "IsDefault": "Is default",
+                "IsDefaultHint": "If this option is checked, this view will be loaded by default.",
+                "NoSavedViews": "No saved views"
+            },
+            "SavedViews": {
+                "ButtonTitle": "Saved views",
+                "MarkAsDefault": "Mark as default (loads on start)",
+                "Duplicate": "Duplicate",
+                "DuplicateSuffix": "copy",
+                "Edit": "Edit",
+                "Remove": "Remove",
+                "ConfirmRemove": "Are you sure you would like to remove the view \"{{view}}\"?<br><br><b class='text-danger'>This action can not be undone.</b>",
+                "NameNotUnique": "There is already a saved view with that name, please choose another."
+            }
+        }
+    }
+}

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

@@ -0,0 +1,74 @@
+{
+    "UpDevs": {
+        "Table": {
+            "Search": "Pesquisar",
+            "NoRecordsFoundTitle": "Nenhum registro encontrado",
+            "NoRecordsFoundSubtitle": "Por favor, ajuste sua pesquisa para encontrar o que você está procurando",
+            "HiddenColumnsTooltip": "Colunas ocultas",
+            "SaveCurrentView": "Salvar consulta atual",
+            "ApplyFilters": "Aplicar filtros",
+            "AddNewFilter": "Adicionar novo filtro",
+            "Loading": "Carregando",
+            "VisibleColumns": "Visíveis",
+            "HiddenColumns": "Ocultas",
+            "ColumnTitleNotSet": "Título não definido",
+            "NoSavedViews": "Nenhuma consulta salva",
+            "CurrentSavedView": "Consulta sendo visualizada",
+            "ColumnsManagerButton": "Gerenciar colunas",
+            "ResetView": "Restaurar a condição tabela",
+            "Filters": {
+                "General": {
+                    "Equals": "Igual à",
+                    "NotEquals": "Diferente de",
+                    "IsEmpty": "Está vazio",
+                    "IsNotEmpty": "Não está vazio"
+                },
+                "String": {
+                    "StartsWith": "Começa com",
+                    "EndsWith": "Termina com",
+                    "Contains": "Contém",
+                    "NotContains": "Não contém",
+                    "In": "Está em"
+                },
+                "Boolean": {
+                    "True": "Verdadeiro",
+                    "False": "Falso"
+                },
+                "DateOrNumber": {
+                    "GreaterThan": "Maior que",
+                    "LessThan": "Menor que",
+                    "GreaterThanOrEqualTo": "Maior que ou igual à",
+                    "LessThanOrEqualTo": "Menor que ou igual à"
+                },
+                "Date": {
+                    "Between": "Entre"
+                },
+                "Number": {
+                    "In": "Está em"
+                }
+            },
+            "ColumnsManager": {
+                "Apply": "Aplicar"
+            },
+            "SaveSearch": {
+                "Title": "Salvar consulta",
+                "Save": "Salvar",
+                "Cancel": "Cancelar",
+                "Name": "Nome",
+                "IsDefault": "É padrão",
+                "IsDefaultHint": "Se esta opção estiver marcada, esta consulta será carregada por padrão.",
+                "NoSavedViews": "Sem consultas salvas"
+            },
+            "SavedViews": {
+                "ButtonTitle": "Consultas salvas",
+                "MarkAsDefault": "Mark como padrão (carrega automaticamente)",
+                "Duplicate": "Duplicar",
+                "DuplicateSuffix": "cópia",
+                "Edit": "Editar",
+                "Remove": "Remover",
+                "ConfirmRemove": "Deseja realmente remover a consulta \"{{view}}\"?<br><br><b class='text-danger'>Esta ação não pode ser desfeita.</b>",
+                "NameNotUnique": "Já existe uma consulta com esse nome, favor escolher outro."
+            }
+        }
+    }
+}