@gipisistemas/ngx-core 1.0.1

package/base/models/base-page.model.d.ts

@@ -0,0 +1,11 @@
+export declare class BasePageModel<TEntity> {
+    /** Conteúdo da página */
+    content: TEntity[];
+    /** Número da página */
+    number: number;
+    /** Total de registros */
+    totalElements: number;
+    /** Total de páginas */
+    totalPages: number;
+    constructor(content?: TEntity[], number?: number, totalElements?: number, totalPages?: number);
+}

package/base/models/base-query-params.model.d.ts

@@ -0,0 +1,12 @@
+import type { BaseSortModel } from './base-sort.model';
+export declare class BaseQueryParams {
+    /** Número da página */
+    page: number;
+    /** Tamanho da página */
+    size: number;
+    /** Campo para ordenação */
+    sort: BaseSortModel | BaseSortModel[] | null;
+    /** Parâmetros dinâmicos */
+    [key: string]: unknown | null;
+    constructor(params?: Partial<BaseQueryParams>);
+}

package/base/models/base-sort.model.d.ts

@@ -0,0 +1,8 @@
+import type { tSortDirection } from '../../enums/sort-direction.enum';
+export declare class BaseSortModel {
+    /** Direção da ordenação */
+    direction: tSortDirection;
+    /** Nome do campo para a ordenação */
+    field: string;
+    constructor(field?: string, direction?: tSortDirection);
+}

package/base/models/base-token.model.d.ts

@@ -0,0 +1,11 @@
+import { BaseUserModel } from './base-user.model';
+export declare class BaseTokenModel<TUser extends BaseUserModel> {
+    access_token: string;
+    refresh_token: string;
+    expires_in: number;
+    expiration: Date;
+    accessToken: string;
+    user: TUser;
+    refreshToken: string;
+    constructor(access_token: string, refresh_token: string, expires_in: number, expiration: Date, accessToken: string, user: TUser, refreshToken: string);
+}

package/base/models/base-user.model.d.ts

@@ -0,0 +1,18 @@
+import { BaseAuthorityModel } from './base-authority.model';
+import { BaseMenuModel } from './base-menu.model';
+import { BaseModel } from './base.model';
+export declare class BaseUserModel extends BaseModel {
+    /** Nome do usuário */
+    name: string;
+    /** E-mail do usuário */
+    username: string;
+    /** Senha do usuário */
+    password: string;
+    /** Último acesso do usuário */
+    lastAccess: Date | null;
+    /** Lista de permissões do usuário */
+    authorities: BaseAuthorityModel[];
+    /** Lista de menus que o usuário tem acesso */
+    menuList: BaseMenuModel[];
+    constructor(data?: Partial<BaseUserModel>);
+}

package/base/models/base.model.d.ts

@@ -0,0 +1,20 @@
+import { GIPIUuid } from '../../types/uuid.type';
+export declare abstract class BaseModel {
+    /** ID */
+    id: GIPIUuid;
+    /** Identificador de integração */
+    integrationIdentifier: GIPIUuid;
+    /** ID da empresa */
+    companyId: GIPIUuid;
+    /** Relacionamento entre mútiplas empresas */
+    tenantId: GIPIUuid;
+    /** Indica se está ativo */
+    enabled: boolean;
+    /** Data de criação */
+    createdDate: Date | null;
+    /** Data de modificação */
+    modifiedDate: Date | null;
+    /** @Transient Indica se o registro foi seleciona usado em tabelas(table) */
+    selected: boolean;
+    constructor(data: Partial<BaseModel>);
+}

package/base/services/base-auth.service.d.ts

@@ -0,0 +1,31 @@
+import { HttpHeaders } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { BaseTokenModel } from '../models/base-token.model';
+import { BaseUserModel } from '../models/base-user.model';
+import { BaseService } from './base.service';
+import * as i0 from "@angular/core";
+export declare class BaseAuthService<TUser extends BaseUserModel> extends BaseService {
+    protected readonly TOKEN_KEY = "auth_token";
+    protected router: Router;
+    private _token;
+    private _user;
+    token$: Observable<BaseTokenModel<TUser> | null>;
+    user$: Observable<TUser | null>;
+    get token(): BaseTokenModel<TUser> | null;
+    get user(): TUser | null;
+    constructor();
+    login(username: string, password: string): Observable<void>;
+    logout(): void;
+    revokeToken(token: BaseTokenModel<TUser> | null): Observable<boolean>;
+    refreshToken(): Observable<BaseTokenModel<TUser> | null>;
+    isAuthenticated(): boolean;
+    load(): Observable<boolean>;
+    isValidToken(token: BaseTokenModel<TUser> | null): boolean;
+    hasPermission(permission: string): boolean;
+    protected setSession(token: BaseTokenModel<TUser>): void;
+    protected clearSession(): void;
+    protected buildHeaders(): HttpHeaders;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseAuthService<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BaseAuthService<any>>;
+}

package/base/services/base-crud.service.d.ts

@@ -0,0 +1,178 @@
+import { OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import { GIPIUuid } from '../../types/uuid.type';
+import { BaseFilterModel } from '../models/base-filter.model';
+import { BasePageModel } from '../models/base-page.model';
+import { BaseSortModel } from '../models/base-sort.model';
+import { BaseModel } from '../models/base.model';
+import { BaseService } from './base.service';
+import * as i0 from "@angular/core";
+export declare class BaseCrudService<TEntity extends BaseModel, TFilter extends BaseFilterModel> extends BaseService implements OnDestroy {
+    protected path: string;
+    protected version: string;
+    constructor(path: string, version: string);
+    ngOnDestroy(): void;
+    /**
+     * `POST` - Refere-se ao endpoint find-all com filtros via URL save.
+     *
+     * @param entity A entidade a ser salva.
+     * @param version (Opcional) Versão da API a ser utilizada na URL.
+     * @returns Um `Observable<T>` contendo a entidade salva.
+     *
+     * @example
+     * save<User>({ id: '123e4567-e89b-12d3-a456-426614174000', name: 'John' })
+     *    .subscribe(user => console.log(user));
+     */
+    save<T = TEntity>(entity: T, version?: string): Observable<T>;
+    /**
+     * `POST` - Refere-se ao endpoint find-all com filtros via URL save-all.
+     *
+     * @param entities Um array de entidades a serem salvas.
+     * @param version (Opcional) Versão da API a ser utilizada na URL.
+     * @returns Um `Observable<T[]>` contendo a lista de entidades salvas.
+     *
+     * @example
+     * saveAll<User>([{ id: '123e4567-e89b-12d3-a456-426614174000', name: 'John' }, { id: 2, name: 'Jane' }])
+     *    .subscribe(users => console.log(users));
+     */
+    saveAll<T = TEntity>(entities: T[], version?: string): Observable<T[]>;
+    /**
+     * `DELETE` - Refere-se ao endpoint find-all com filtros via URL delete.
+     *
+     * @param id O identificador único (UUID) da entidade a ser excluída.
+     * @param version (Opcional) Versão da API a ser utilizada na URL.
+     * @returns Um `Observable<boolean>` que retorna `true` se a exclusão for bem-sucedida.
+     *
+     * @example
+     * delete('123e4567-e89b-12d3-a456-426614174000')
+     *    .subscribe(isDeleted => console.log(isDeleted));
+     */
+    delete(id: GIPIUuid, version?: string): Observable<boolean>;
+    /**
+     * `POST` - Refere-se ao endpoint find-all com filtros via URL delete-all.
+     *
+     * @param idList Lista de identificadores (UUIDs) das entidades a serem excluídas.
+     * @param version (Opcional) Versão da API a ser utilizada na URL.
+     * @returns Um `Observable<boolean>` que retorna `true` se todas as exclusões forem bem-sucedidas ou `false` se algum identificador for inválido.
+     *
+     * @example
+     * deleteAll(['123e4567-e89b-12d3-a456-426614174000', '987e6543-e21b-12d3-a456-426614174001'])
+     *    .subscribe(isDeleted => console.log(isDeleted));
+     */
+    deleteAll(idList: GIPIUuid[], version?: string): Observable<boolean>;
+    /**
+     * `GET` - Refere-se ao endpoint find-all com filtros via URL get-one.
+     *
+     * @param id O identificador (UUID) da entidade a ser recuperada.
+     * @param version (Opcional) Versão da API a ser utilizada na URL.
+     * @returns Um `Observable<T>` contendo a entidade recuperada.
+     *
+     * @example
+     * getOne('123e4567-e89b-12d3-a456-426614174000')
+     *    .subscribe(entity => console.log(entity));
+     */
+    getOne<T = TEntity>(id: GIPIUuid, version?: string): Observable<T>;
+    /**
+     * `GET` - Refere-se ao endpoint find-all com filtros via URL.
+     *
+     * @param version (Opcional) Versão da API a ser utilizada na URL.
+     * @returns Um `Observable<BasePageModel<T>>` que retorna uma página de entidades.
+     * A resposta será um objeto contendo dados paginados, como os itens da página e informações sobre a página atual.
+     *
+     * @example
+     * find()
+     *   .subscribe(page => console.log(page.content));
+     */
+    find<T = TEntity>(version?: string): Observable<BasePageModel<T>>;
+    /**
+     * `POST` - Refere-se ao endpoint find-all com filtros via BODY.
+     *
+     * @param filter (Opcional) Objeto com os critérios de filtro para a consulta.
+     * @param version (Opcional) Versão da API a ser utilizada na URL.
+     * @returns Um `Observable<BasePageModel<T>>` que retorna uma página de entidades filtradas.
+     * A resposta será um objeto contendo dados paginados, como os itens da página e informações sobre a página atual.
+     *
+     * @example
+     * findAll({ name: 'John' })
+     *   .subscribe(page => console.log(page.content));
+     */
+    findAll<F = TFilter, T = TEntity>(filter?: F, version?: string): Observable<BasePageModel<T>>;
+    /**
+     * `GET` - Refere-se ao endpoint find-all-enabled.
+     *
+     * @param page Número da página a ser recuperada, com valor mínimo de 0.
+     * @param size Número de itens por página, com valor mínimo de 10.
+     * @param version (Opcional) Versão da API a ser utilizada na URL.
+     * @returns Um `Observable<BasePageModel<T>>` que retorna uma página de entidades "Ativas".
+     * A resposta será um objeto contendo dados paginados, como os itens da página e informações sobre a página atual.
+     *
+     * @example
+     * findAllEnabled(0, 10)
+     *   .subscribe(page => console.log(page.content));
+     */
+    findAllEnabled<T = TEntity>(page: number, size: number, version?: string): Observable<BasePageModel<T>>;
+    /**
+     * `GET` - Refere-se ao endpoint find-by-value.
+     *
+     * @param value (Opcional) Valor a ser buscado. Vazio para não validar.
+     * @param page Número da página a ser recuperada, com valor mínimo de 0.
+     * @param size Número de itens por página, com valor mínimo de 10.
+     * @param sort (Opcional) Modelo de ordenação que especifica o campo e a direção da ordenação.
+     * @param version (Opcional) Versão da API a ser utilizada na URL.
+     * @returns Um `Observable<BasePageModel<T>>` que retorna uma página de entidades baseadas no valor fornecido.
+     * A resposta será um objeto contendo dados paginados, como os itens da página e informações sobre a página atual.
+     *
+     * @example
+     * findByValue('', 0, 10, { field: 'name', direction: 'ASC' })
+     *   .subscribe(page => console.log(page.content));
+     *
+     * findByValue('John', 0, 10)
+     *   .subscribe(page => console.log(page.content));
+     */
+    findByValue<T = TEntity>(value: string, page: number, size: number, sort?: BaseSortModel[], version?: string): Observable<BasePageModel<T>>;
+    /**
+     * `PATCH` - Refere-se ao endpoint enable-or-disable.
+     *
+     * @param id ID da entidade a ser habilitada ou desabilitada. Deve ser um UUID válido.
+     * @param action Ação a ser realizada. Pode ser 'DISABLE' ou 'ENABLE'.
+     * @param version (Opcional) Versão da API a ser utilizada na URL.
+     * @returns Um `Observable<boolean>` que emite `true` caso a operação tenha sido bem-sucedida, ou `false` caso contrário.
+     *
+     * @example
+     * enableOrDisable('123e4567-e89b-12d3-a456-426614174000', 'ENABLE')
+     *   .subscribe(success => console.log('Entidade ativa'));
+     *
+     * enableOrDisable('123e4567-e89b-12d3-a456-426614174000', 'DISABLE')
+     *   .subscribe(success => console.log('Entidade inativa'));
+     */
+    enableOrDisable(id: GIPIUuid, action: 'DISABLE' | 'ENABLE', version?: string): Observable<boolean>;
+    /**
+     * `PATCH` - Refere-se ao endpoint enable-or-disable-all.
+     *
+     * @param idList Lista de IDs das entidades a serem habilitadas ou desabilitadas. Cada ID deve ser um UUID válido.
+     * @param action Ação a ser realizada. Pode ser 'DISABLE' ou 'ENABLE'.
+     * @param version (Opcional) Versão da API a ser utilizada na URL.
+     * @returns Um `Observable<boolean>` que emite `true` caso a operação tenha sido bem-sucedida para todas as entidades, ou `false` caso algum ID seja inválido ou ocorra um erro.
+     *
+     * @example
+     * enableOrDisableAll(['123e4567-e89b-12d3-a456-426614174000', '987e6543-e21b-12d3-a456-426614174001'], 'ENABLE')
+     *   .subscribe(success => console.log('Entidades ativas'));
+     *
+     * enableOrDisableAll(['123e4567-e89b-12d3-a456-426614174000', '987e6543-e21b-12d3-a456-426614174001'], 'DISABLE')
+     *   .subscribe(success => console.log('Entidades inativas'));
+     */
+    enableOrDisableAll(idList: GIPIUuid[], action: 'DISABLE' | 'ENABLE', version?: string): Observable<boolean>;
+    /**
+     * Valida um objeto, verificando se ele está vazio.
+     *
+     * @param entity O objeto a ser validado.
+     * @returns Uma mensagem de erro caso o objeto esteja vazio. Caso contrário, retorna uma string vazia.
+     *
+     * @example
+     * const result = validate(myEntity);
+     * console.log(result); // Se vazio, retornará 'Objeto não pode ser vazio', caso contrário, retorna ''.
+     */
+    validate<T = TEntity>(entity: T): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseCrudService<any, any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BaseCrudService<any, any>>;
+}

package/base/services/base.service.d.ts

@@ -0,0 +1,97 @@
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { ToastService } from '../../components/toast/shared/toast.service';
+import { CacheableService } from '../../services/cacheable.service';
+import { Nullable } from '../../types/nullable.type';
+import { BaseQueryParams } from '../models/base-query-params.model';
+import * as i0 from "@angular/core";
+export declare abstract class BaseService implements OnDestroy {
+    protected path: string;
+    protected version: string;
+    protected handleDestroy: Subject<void>;
+    protected readonly httpClient: HttpClient;
+    protected readonly toastService: ToastService;
+    protected readonly cacheableService: CacheableService;
+    constructor(path: string, version: string);
+    ngOnDestroy(): void;
+    /**
+     * Constrói a URL base da API com caminho, versão e recurso especificados.
+     *
+     * @param resource O recurso específico da API a ser adicionado à URL (ex.: 'users', 'orders').
+     * @param version A versão da API (ex.: 'v1', 'v2'). Se não for informada, utiliza a versão padrão da instância.
+     * @returns A URL completa formatada como `api/{path}/{version}/{resource}`.
+     *
+     * @example
+     * url('users', 'v1'); // Retorna 'api/{path}/v1/users'.
+     * url('products'); // Retorna 'api/{path}/{version}/products' se `this.version` estiver definida.
+     */
+    protected url(resource?: string, version?: string): string;
+    /**
+     * Gera as opções para uma requisição HTTP, incluindo headers e parâmetros.
+     * - Se os headers ou os parâmetros não forem fornecidos, são gerados valores padrão.
+     *
+     * @param params Os parâmetros da requisição (HttpParams). Se não informado, será utilizado um padrão.
+     * @param headers Os headers da requisição (HttpHeaders). Se não informado, será utilizado um padrão.
+     * @returns Um objeto contendo os headers e os parâmetros da requisição.
+     *
+     * @example
+     * options(); // Retorna `{ headers: defaultHeaders, params: defaultParams }`.
+     * options(null, new HttpHeaders({ 'Authorization': 'Bearer token' })); // Retorna opções com headers personalizados.
+     */
+    protected options(params?: HttpParams | null, headers?: HttpHeaders | null): {
+        headers: HttpHeaders;
+        params: HttpParams;
+    };
+    /**
+     * Cria e retorna um objeto `HttpHeaders` padrão.
+     * Pode ser sobrescrito por classes que estendem esta classe para personalizar os headers.
+     *
+     * @returns Um objeto `HttpHeaders` vazio.
+     */
+    protected buildHeaders(): HttpHeaders;
+    /**
+     * Cria e retorna um objeto `HttpParams` padrão.
+     * Pode ser sobrescrito por classes que estendem esta classe para personalizar os parâmetros da requisição.
+     *
+     * @returns Um objeto `HttpParams` vazio.
+     */
+    protected buildParams(): HttpParams;
+    /**
+     * Constrói uma string de parâmetros de consulta a partir de um objeto `BaseQueryParams`.
+     * - Coloque as keys dos parâmetros adicionais exatamente como estão no endpoint.
+     * - Os parâmetros são formatados como `?key1=value1&key2=value2`.
+     * - Se não houver parâmetros, retorna uma string vazia.
+     *
+     * @param queryParams Parâmetros de consulta a serem adicionados à URL.
+     * @returns Uma string de parâmetros de consulta formatada para ser anexada à URL.
+     * @example
+     * ```typescript
+     * buildQueryParams({ page: 1, size: 10 }); // Retorna '?page=1&size=10'.
+     * buildQueryParams({ page: 1, size: 10, sort: { field: 'name', direction: 'ASC' }, value: '', extraParam: 'extra' }); // Retorna '?page=1&size=10&sort=name,asc&extraParam=extra'.
+     * ```
+     */
+    protected buildQueryParams(queryParams?: BaseQueryParams): string;
+    /**
+     * Converte um objeto JSON para o tipo esperado.
+     *
+     * @param jsonObj O objeto JSON a ser convertido.
+     * @returns O objeto convertido para o tipo `T`.
+     *
+     * @example
+     * handleMapper<User>({ id: '123e4567-e89b-12d3-a456-426614174000', name: 'John' }); // Retorna um objeto do tipo `User`.
+     */
+    protected handleMapper<T = unknown>(jsonObj: Nullable<unknown>): T;
+    /**
+     * Manipula erros de requisições HTTP e retorna um Observable que emite um erro.
+     *
+     * @param error A mensagem de erro a ser lançada.
+     * @returns Um `Observable<never>` que emite um erro.
+     *
+     * @example
+     * handleError('Falha ao buscar os dados'); // Lança um erro com a mensagem especificada.
+     */
+    protected handleError(error: string): Observable<never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BaseService>;
+}

package/components/action-row/action-row.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class ActionRowComponent {
+    protected readonly _uniqueId: string;
+    id: string;
+    name: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionRowComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActionRowComponent, "gipi-action-row", ["gActionRow"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/components/action-row/action-row.component.scss

@@ -0,0 +1,26 @@
+@use '../../theming/utils' as utils;
+
+@mixin action-row-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-100: utils.get-color($theme, secondary, 100);
+
+    .g-action-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 1.6rem;
+        padding: 1.6rem 0;
+        font-family: $font-family;
+        font-size: $font-size;
+        color: $font-color;
+        background-color: $white-100;
+        border-top: 1px solid $secondary-100;
+        box-shadow:
+            0px 11px 8px -10px $secondary-100,
+            0px -11px 8px -10px $secondary-100;
+    }
+}

package/components/action-row/index.d.ts

@@ -0,0 +1 @@
+export * from './action-row.component';

package/components/auto-focus/auto-focus.directive.d.ts

@@ -0,0 +1,17 @@
+import { AfterContentChecked, AfterViewChecked } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class AutoFocusDirective implements AfterContentChecked, AfterViewChecked {
+    private _focused;
+    private _elementRef;
+    private _platformId;
+    private _renderer;
+    autofocus: boolean;
+    constructor();
+    ngAfterContentChecked(): void;
+    ngAfterViewChecked(): void;
+    private _setAutoFocus;
+    private _getFocusableElements;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutoFocusDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AutoFocusDirective, "[gAutoFocus]", ["gAutoFocus"], { "autofocus": { "alias": "gAutoFocus"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_autofocus: any;
+}

package/components/auto-focus/index.d.ts

@@ -0,0 +1 @@
+export * from './auto-focus.directive';

package/components/avatar/avatar.component.d.ts

@@ -0,0 +1,23 @@
+import { NumberInput, type BooleanInput } from '@angular/cdk/coercion';
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class AvatarComponent {
+    protected readonly _uniqueId: string;
+    id: string;
+    name: string;
+    text: string;
+    imageSrc: string;
+    shape: 'circle' | 'square';
+    size: NumberInput;
+    textSize: NumberInput;
+    loading: BooleanInput;
+    readonly onImageError: EventEmitter<Event>;
+    get _firstLetter(): string;
+    constructor();
+    imageError(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "gipi-avatar", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "text": { "alias": "text"; "required": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "size": { "alias": "size"; "required": false; }; "textSize": { "alias": "textSize"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "onImageError": "onImageError"; }, never, never, true, never>;
+    static ngAcceptInputType_size: unknown;
+    static ngAcceptInputType_textSize: unknown;
+    static ngAcceptInputType_loading: unknown;
+}

package/components/avatar/avatar.component.scss

@@ -0,0 +1,155 @@
+@use '../../theming/utils' as utils;
+
+@mixin avatar-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $secondary-100: utils.get-color($theme, secondary, 100);
+    $primary-500: utils.get-color($theme, primary, 500);
+
+    .g-avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 0.6rem;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .g-user-photo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        text-transform: uppercase;
+        font-size: 1.6rem;
+        font-weight: 600;
+        object-fit: cover;
+        background-color: $secondary-100;
+        width: 2.4rem;
+        height: 2.4rem;
+        border-radius: 50%;
+        user-select: none;
+
+        &.circle {
+            border-radius: 50% !important;
+        }
+
+        &.square {
+            border-radius: 0.6rem !important;
+        }
+    }
+
+    img:not(.loading).g-user-photo {
+        box-shadow: 0 0 0 2px $secondary-100;
+    }
+
+    .user-name {
+        font-weight: 600;
+        line-height: 100%;
+        margin-inline: 0.8rem 0.4rem;
+    }
+
+    .g-loading.circle {
+        width: 2.4rem;
+        height: 2.4rem;
+        border-radius: 50%;
+        border: 2px solid $primary-500;
+        border-top-color: transparent;
+        animation: spin 1.4s linear infinite;
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    }
+
+    .g-loading.square {
+        width: 2.4rem;
+        height: 2.4rem;
+        display: grid;
+        color: $primary-500;
+        border-radius: 0.6rem;
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        &:before {
+            content: '';
+            grid-area: 1/1;
+            --color1: linear-gradient(
+                90deg,
+                #e0e1e2 calc(100% / 3),
+                currentColor 0 calc(2 * 100% / 3),
+                #e0e1e2 0
+            );
+            --color2: linear-gradient(
+                0deg,
+                #e0e1e2 calc(100% / 3),
+                currentColor 0 calc(2 * 100% / 3),
+                #e0e1e2 0
+            );
+            background: var(--color1), var(--color2), var(--color1), var(--color2);
+            background-size:
+                300% 4px,
+                4px 300%;
+            background-repeat: no-repeat;
+            border-radius: 0.6rem;
+            animation: spin 1.4s infinite linear;
+        }
+
+        @keyframes spin {
+            0% {
+                background-position:
+                    50% 0,
+                    100% 100%,
+                    0 100%,
+                    0 0;
+            }
+
+            25% {
+                background-position:
+                    0 0,
+                    100% 50%,
+                    0 100%,
+                    0 0;
+            }
+
+            50% {
+                background-position:
+                    0 0,
+                    100% 0,
+                    50% 100%,
+                    0 0;
+            }
+
+            75% {
+                background-position:
+                    0 0,
+                    100% 0,
+                    100% 100%,
+                    0 50%;
+            }
+
+            75.1% {
+                background-position:
+                    100% 0,
+                    100% 0,
+                    100% 100%,
+                    0 50%;
+            }
+
+            100% {
+                background-position:
+                    50% 0,
+                    100% 0,
+                    100% 100%,
+                    0 100%;
+            }
+        }
+    }
+}

package/components/avatar/index.d.ts

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