@gipisistemas/ngx-core 1.0.1

package/components/tree-table/shared/tree-table-menu-item-context.model.d.ts

@@ -0,0 +1,45 @@
+import { BaseModel } from '../../../base/models/base.model';
+import { tIconFontSet, tIconGrade, tIconOptical, tIconVariation, tIconWeight } from '../../icon/icon.component';
+import { tTreeTableColumnCondition } from './tree-table-column-condition.enum';
+export declare class TreeTableMenuItemContext<TRow extends BaseModel = BaseModel> {
+    /** Identificador do menu-item. */
+    id: string;
+    /** Nome identificador do menu-item. */
+    name: string;
+    /** Tooltip do menu-item. */
+    tooltip: string;
+    /** Controla a visibilidade do item de menu. */
+    visible: tTreeTableColumnCondition<TRow>;
+    /** Ícone do menu-item. */
+    icon: string;
+    /** Ícone SVG do menu-item. */
+    svgIcon: string;
+    /**
+     * Define o estilo do conjunto de ícones a ser utilizado.
+     * - Pode ser `OUTLINED`, `ROUNDED` ou `SHARP`, conforme os estilos do Material Icons.
+     * - Valor padrão: `ROUNDED`.
+     */
+    iconFontSet: tIconFontSet;
+    /**
+     * Define o valor de fill no font-variation-settings
+     * @FILLED FILL = 1;
+     * @OUTILINE FILL = 0;
+     */
+    iconVariation: tIconVariation;
+    /** Define o valor de wght no font-variation-settings */
+    iconWeight: tIconWeight;
+    /**
+     * Define o valor de GRAD no font-variation-settings
+     * @LOW GRAD = -25;
+     * @DEFAULT GRAD = 0;
+     * @HIGH GRAD = 200;
+     */
+    iconGrade: tIconGrade;
+    /** Define o valor de opsz no font-variation-settings */
+    iconOptical: tIconOptical;
+    /** Exibe o ícone de novo (new) abaixo do menu-item. */
+    showTagNew: tTreeTableColumnCondition<TRow>;
+    /** Ação disparada ao clicar no menu-item. */
+    action: ((object: TRow) => void) | null;
+    constructor(init?: Partial<TreeTableMenuItemContext<TRow>>);
+}

package/components/tree-table/tree-table.component.d.ts

@@ -0,0 +1,91 @@
+import { ElementRef, EventEmitter, OnInit, TemplateRef } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { BaseModel } from '../../base/models/base.model';
+import { tPageEvent } from '../../types/page-event.type';
+import { tTreeTableColumnCondition } from './shared/tree-table-column-condition.enum';
+import { tTreeTableColumnPartial } from './shared/tree-table-column-partial.model';
+import { TreeTableColumn } from './shared/tree-table-column.model';
+import { TreeTableMenuItemContext } from './shared/tree-table-menu-item-context.model';
+import * as i0 from "@angular/core";
+export declare class TreeTableComponent<TNode extends BaseModel> implements OnInit {
+    set tableFooterRef(value: ElementRef<HTMLElement> | null);
+    set menuContextWrapperRef(value: ElementRef | null);
+    matPaginatorRef: MatPaginator;
+    actionsRef: TemplateRef<unknown> | null;
+    menuContextRef: TemplateRef<unknown> | null;
+    private readonly _uniqueId;
+    private readonly _changeDetectionRef;
+    private readonly _destroyRef;
+    private readonly _ngZone;
+    protected menuContextWrapperElement: import("@angular/core").WritableSignal<HTMLElement | null>;
+    protected tableFooterElement: import("@angular/core").WritableSignal<HTMLElement | null>;
+    protected menuContextHover: boolean;
+    protected menuContextRow: import("@angular/core").WritableSignal<TNode | null>;
+    protected get treeTableMinHeight(): string;
+    id: string;
+    name: string;
+    /**
+     * Define o nome da propriedade que contém os filhos.
+     * - Por padrão, é `children`.
+     */
+    propertyTree: string;
+    private _data;
+    set data(value: TNode[]);
+    get data(): TNode[];
+    /** Indica se é para a tabela ter uma altura minima */
+    calcMinHeight: boolean;
+    /** Indica se irá exibir o header da tabela */
+    showToolbar: boolean;
+    /** Indica se irá exibir a tabela */
+    showTable: boolean;
+    /** Indica se irá exibir o header da tabela */
+    showHeader: boolean;
+    /** Indica se a tabela está em modo de loading */
+    loading: boolean;
+    columns: tTreeTableColumnPartial[] | TreeTableColumn[];
+    /** Lista de itens do menu de contexto exibido ao passar o mouse sobre uma linha da tabela. */
+    menuItemsContext: TreeTableMenuItemContext<TNode>[];
+    /** Define a coluna inicial do menu de contexto */
+    columnInitial: number | null;
+    /** Define a coluna final do menu de contexto */
+    columnFinal: number | null;
+    when?: (index: number, nodeData: TNode) => boolean;
+    paginator: boolean;
+    paginatorFrontend: boolean;
+    paginatorDisabled: boolean;
+    paginatorPageSize: number;
+    paginatorPageNumber: number;
+    paginatorLength: number;
+    paginatorPageSizeOptions: number[];
+    paginatorHidePageSize: boolean;
+    protected readonly _childrenAccessor: (node: TNode) => TNode[];
+    protected readonly _when: (index: number, node: TNode) => boolean;
+    onPage: EventEmitter<tPageEvent>;
+    constructor();
+    ngOnInit(): void;
+    private _emitPaginator;
+    private _getNodeChildren;
+    protected coerceCondition(condition: tTreeTableColumnCondition<TNode> | null | undefined): boolean;
+    protected _columnWidth(width?: string | number): string;
+    protected columnCellValue(column: TreeTableColumn | tTreeTableColumnPartial, node: TNode): string;
+    protected columnCellSubValue(column: TreeTableColumn | tTreeTableColumnPartial, node: TNode): string;
+    protected onHandlePage(pageEvent: tPageEvent): void;
+    protected showMenuContext(event: MouseEvent, row: TNode): void;
+    protected closeMenuContext(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeTableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TreeTableComponent<any>, "gipi-tree-table", ["gTreeTable"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "propertyTree": { "alias": "propertyTree"; "required": false; }; "data": { "alias": "data"; "required": false; }; "calcMinHeight": { "alias": "calcMinHeight"; "required": false; }; "showToolbar": { "alias": "showToolbar"; "required": false; }; "showTable": { "alias": "showTable"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "menuItemsContext": { "alias": "menuItemsContext"; "required": false; }; "columnInitial": { "alias": "columnInitial"; "required": false; }; "columnFinal": { "alias": "columnFinal"; "required": false; }; "when": { "alias": "when"; "required": false; }; "paginator": { "alias": "paginator"; "required": false; }; "paginatorFrontend": { "alias": "paginatorFrontend"; "required": false; }; "paginatorDisabled": { "alias": "paginatorDisabled"; "required": false; }; "paginatorPageSize": { "alias": "paginatorPageSize"; "required": false; }; "paginatorPageNumber": { "alias": "paginatorPageNumber"; "required": false; }; "paginatorLength": { "alias": "paginatorLength"; "required": false; }; "paginatorPageSizeOptions": { "alias": "paginatorPageSizeOptions"; "required": false; }; "paginatorHidePageSize": { "alias": "paginatorHidePageSize"; "required": false; }; }, { "onPage": "onPage"; }, ["actionsRef", "menuContextRef"], ["*"], true, never>;
+    static ngAcceptInputType_calcMinHeight: unknown;
+    static ngAcceptInputType_showToolbar: unknown;
+    static ngAcceptInputType_showTable: unknown;
+    static ngAcceptInputType_showHeader: unknown;
+    static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_columnInitial: unknown;
+    static ngAcceptInputType_columnFinal: unknown;
+    static ngAcceptInputType_paginator: unknown;
+    static ngAcceptInputType_paginatorFrontend: unknown;
+    static ngAcceptInputType_paginatorDisabled: unknown;
+    static ngAcceptInputType_paginatorPageSize: unknown;
+    static ngAcceptInputType_paginatorPageNumber: unknown;
+    static ngAcceptInputType_paginatorLength: unknown;
+    static ngAcceptInputType_paginatorHidePageSize: unknown;
+}

package/components/tree-table/tree-table.component.scss

@@ -0,0 +1,216 @@
+@use '../../theming/utils' as utils;
+
+@mixin tree-table-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $font-color: utils.get-font-color($theme);
+
+    @include utils.mat-paginator($theme);
+
+    .material-symbols-rounded {
+        @include utils.user-select(none);
+    }
+
+    .g-tree-table {
+        .g-tree-table-content {
+            width: 100%;
+            background-color: utils.get-color($theme, white, 100) !important;
+            font-weight: 500;
+            font-size: 1.2rem;
+            text-transform: uppercase;
+        }
+
+        .g-tree-table-toolbar {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+            padding-inline: 1.6rem;
+            height: 4.4rem;
+            background-color: utils.get-color($theme, white, 100);
+
+            // Usamos box-shadow para simular a border-bottom, pois com position: sticky ela pode desaparecer.
+            box-shadow: inset 0 -1px 0 utils.get-color($theme, primary, 500);
+        }
+
+        .g-tree-table-header {
+            display: flex;
+            flex-direction: row;
+            padding-inline: 1.6rem;
+            height: 4.4rem;
+            align-items: center;
+            background-color: utils.get-color($theme, white, 100);
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+
+            // Usamos box-shadow para simular a border-bottom, pois com position: sticky ela pode desaparecer.
+            box-shadow: inset 0 -1px 0 utils.get-color($theme, primary, 500);
+
+            .g-tree-table-header-column {
+                background-color: utils.get-color($theme, white, 100);
+                color: utils.get-color($theme, primary, 500);
+                font-size: 1.4rem;
+                font-weight: bold;
+                text-transform: none;
+                flex: 1 0 0;
+            }
+        }
+
+        .mat-tree-node,
+        .g-tree-table-row {
+            border-bottom: 1px solid utils.get-color($theme, secondary, 100);
+            padding-right: 1.6rem !important;
+            font-weight: 500;
+            font-size: 1.2rem;
+
+            // &.g-tree-table-row-expandable {
+            //     padding-left: 1.6rem !important;
+            // }
+
+            &[aria-level='1'] {
+                padding-left: 1.6rem !important;
+            }
+
+            &:hover,
+            &.g-tree-table-row-hover {
+                background-color: utils.get-color($theme, white, 300);
+            }
+        }
+
+        .g-tree-table-column {
+            margin: 0;
+            border: 0;
+            text-align: inherit;
+            vertical-align: middle;
+            align-content: center;
+            height: 4.4rem;
+            flex: 1 0 0;
+            font-weight: 500;
+            font-size: 1.2rem;
+
+            > span,
+            > small {
+                text-align: inherit;
+                width: 100%;
+                font-family: $font-family;
+                color: $font-color;
+            }
+
+            > span {
+                font-size: 1.2rem;
+                font-weight: 500;
+            }
+
+            > small {
+                color: utils.get-color($theme, secondary, 300);
+            }
+
+            &.g-tree-table-align-start,
+            &.g-tree-table-align-left {
+                text-align: start;
+
+                .mat-sort-header-container {
+                    justify-content: flex-start;
+                }
+            }
+            &.g-tree-table-align-center {
+                text-align: center;
+
+                .mat-sort-header-container {
+                    justify-content: center;
+                }
+            }
+            &.g-tree-table-align-end,
+            &.g-tree-table-align-right {
+                text-align: end;
+
+                .mat-sort-header-container {
+                    justify-content: flex-end;
+                }
+            }
+            &.g-tree-table-align-justify {
+                text-align: justify;
+
+                .mat-sort-header-container {
+                    justify-content: space-between;
+                }
+            }
+        }
+    }
+
+    .g-tree-table-button-expand {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border-radius: 50%;
+        outline: none;
+        border: none;
+        background-color: transparent;
+        transition: all 0.2s ease-in-out;
+        cursor: pointer;
+
+        &:hover {
+            background-color: #{utils.get-color($theme, secondary, 100)};
+        }
+    }
+
+    .g-tree-table-footer-row {
+        position: sticky;
+        bottom: 0;
+        z-index: 1000;
+        background-color: #{utils.get-color($theme, white, 100)};
+    }
+
+    .g-tree-table-menu-context {
+        display: inline-flex;
+        gap: 10px;
+        padding: 6px 10px;
+        width: auto;
+        border-radius: 0 0 10px 10px;
+        border: 1px solid #{utils.get-color($theme, secondary, 100)};
+        border-top: 0;
+        background-color: #{utils.get-color($theme, white, 300)};
+        position: fixed;
+        z-index: 1001;
+        visibility: hidden;
+
+        > button {
+            @include utils.user-select(none);
+
+            &.g-tree-table-menu-item-context-show-tag-new {
+                @include utils.novelties($theme);
+            }
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.2rem;
+            outline: none;
+            border: none;
+            border-radius: 0.4rem;
+            background-color: transparent;
+            transition:
+                background-color 0.2s ease-in,
+                transform 0.2s ease-out;
+            cursor: pointer;
+
+            .g-button-icon {
+                color: #{utils.get-color($theme, black, 300)};
+            }
+
+            &:hover {
+                background-color: #{utils.get-color($theme, secondary, 100)};
+            }
+
+            &:active {
+                transform: scale(0.95);
+            }
+        }
+    }
+
+    .g-tree-table-menu-item-context-tooltip {
+        margin-top: 10px;
+    }
+}

package/components/user-profile/index.d.ts

@@ -0,0 +1 @@
+export * from './user-profile.component';

package/components/user-profile/shared/user-profile-arrow-animations.d.ts

@@ -0,0 +1 @@
+export declare const rotateArrow: import("@angular/animations").AnimationTriggerMetadata;

package/components/user-profile/user-profile.component.d.ts

@@ -0,0 +1,28 @@
+import { AfterViewInit, DestroyRef, EventEmitter } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { PopoverTriggerDirective } from '../popover';
+import * as i0 from "@angular/core";
+type tArrowType = 'arrow_down' | 'arrow_up';
+export declare class UserProfileComponent implements AfterViewInit {
+    popoverTrigger?: PopoverTriggerDirective;
+    protected readonly _uniqueId: string;
+    protected destroyRef: DestroyRef;
+    protected arrowType$: BehaviorSubject<tArrowType>;
+    id: string;
+    name: string;
+    username: string;
+    email: string;
+    lastAccess: Date | null;
+    imageSrc: string;
+    readonly onImageError: EventEmitter<Event>;
+    readonly onClick: EventEmitter<MouseEvent>;
+    protected get _firstName(): string;
+    protected get _lastAccessText(): string;
+    constructor();
+    ngAfterViewInit(): void;
+    imageError(event: Event): void;
+    onPopoverToggle(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UserProfileComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UserProfileComponent, "gipi-user-profile", ["gUserProfile"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "username": { "alias": "username"; "required": true; }; "email": { "alias": "email"; "required": true; }; "lastAccess": { "alias": "lastAccess"; "required": false; }; "imageSrc": { "alias": "imageSrc"; "required": false; }; }, { "onImageError": "onImageError"; "onClick": "onClick"; }, never, ["*"], true, never>;
+}
+export {};

package/components/user-profile/user-profile.component.scss

@@ -0,0 +1,76 @@
+@use '../../theming/utils' as utils;
+
+@mixin user-profile-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $font-color: utils.get-font-color($theme);
+    $white-100: utils.get-color($theme, white, 100);
+    $secondary-600: utils.get-color($theme, secondary, 600);
+    $black-300: utils.get-color($theme, black, 300);
+    $black-400: utils.get-color($theme, black, 400);
+    $pastels-info: utils.get-color($theme, pastels, info);
+
+    .g-user-profile-content {
+        display: flex;
+        align-items: center;
+        padding: 0.6rem 0.6rem;
+        border: 1px solid $black-400;
+        border-radius: 2rem;
+        background-color: $white-100;
+        transition: all 0.2s;
+        cursor: pointer;
+
+        @include utils.user-select(none);
+
+        &:hover {
+            border-color: $black-300;
+        }
+
+        .g-user-profile-username {
+            margin-inline: 0.8rem;
+            font-family: $font-family;
+            font-size: $font-size;
+            color: $font-color;
+            font-weight: 500;
+        }
+
+        .g-user-profile-arrow {
+            font-size: 2rem;
+            line-height: 1.4rem;
+            color: $font-color;
+        }
+    }
+
+    .g-user-profile-popover-content {
+        min-width: 20rem;
+
+        .g-user-profile-popover-header {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+
+            .g-user-profile-popover-user-info {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                height: 4rem;
+                flex: 1;
+            }
+        }
+
+        .g-user-profile-popover-actions .g-user-profile-last-access {
+            display: block;
+            width: 100%;
+            padding: 4px;
+            border-radius: 4px;
+            background-color: $pastels-info;
+            color: $secondary-600;
+            font-family: $font-family;
+            font-size: 1.2rem;
+            font-weight: 400;
+            line-height: 100%;
+            text-align: center;
+        }
+    }
+}

package/decorators/debounce.decorator.d.ts

@@ -0,0 +1,33 @@
+interface iDebounceOptions {
+    /** Tempo de debounce em milissegundos (padrão: 300ms) */
+    ms?: number;
+    /** Executa a função imediatamente na primeira chamada (padrão: false) */
+    leading?: boolean;
+    /** Executa a função no final do período de debounce (padrão: true) */
+    trailing?: boolean;
+}
+/**
+ * Decorator para aplicar debounce em métodos de classes.
+ * Pode ser usado para limitar a frequência de execuções, especialmente útil em eventos como
+ * digitação, cliques rápidos, ou chamadas frequentes que você deseja otimizar.
+ *
+ * @param options - Tempo de debounce em ms ou objeto de opções com:
+ *                  - ms: número (tempo em ms)
+ *                  - leading: boolean (executa imediatamente na primeira chamada)
+ *                  - trailing: boolean (executa após o período de debounce)
+ *
+ * @example
+ * class Exemplo {
+ *   .@Debounce(500)
+ *   onInputChange(value: string) {
+ *     console.log('Executado após o usuário parar de digitar 500ms:', value);
+ *   }
+ *
+ *   .@Debounce({ ms: 300, leading: true, trailing: false })
+ *   onResize() {
+ *     console.log('Executado imediatamente e ignora chamadas seguintes por 300ms');
+ *   }
+ * }
+ */
+export declare function Debounce(options?: number | iDebounceOptions): <T>(target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<(...args: any[]) => T | undefined>) => TypedPropertyDescriptor<(...args: any[]) => T | undefined>;
+export {};

package/decorators/index.d.ts

@@ -0,0 +1 @@
+export * from './debounce.decorator';

package/enums/index.d.ts

@@ -0,0 +1,3 @@
+export * from './menu-type.enum';
+export * from './sort-direction.enum';
+export * from './type-operation-dialog.enum';

package/enums/menu-type.enum.d.ts

@@ -0,0 +1,6 @@
+export declare enum eMenuType {
+    GROUP = "GROUP",
+    COLLAPSABLE = "COLLAPSABLE",
+    ITEM = "ITEM"
+}
+export type tMenuType = keyof typeof eMenuType;

package/enums/sort-direction.enum.d.ts

@@ -0,0 +1,5 @@
+export declare enum eSortDirection {
+    ASC = "Crescente",
+    DESC = "Decrescente"
+}
+export type tSortDirection = keyof typeof eSortDirection | '';

package/enums/type-operation-dialog.enum.d.ts

@@ -0,0 +1,12 @@
+export declare enum eTypeOperationDialog {
+    NEW = "Novo",
+    EDIT = "Editar",
+    VIEW = "Visualizar"
+}
+export type tTypeOperationDialog = keyof typeof eTypeOperationDialog;
+export declare enum eTypeOperationCloseDialogEnum {
+    RELOAD_TABLE = "Atualizar a tabela",
+    REMARK_SELECTED = "Remarcar os registros selecionados",
+    NONE = "Nenhuma a\u00E7\u00E3o ser\u00E1 executada"
+}
+export type tTypeOperationCloseDialog = keyof typeof eTypeOperationCloseDialogEnum;