@gipisistemas/ngx-core 1.0.1

package/components/select/shared/mat-select.directive.d.ts

@@ -0,0 +1,127 @@
+import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Observable } from 'rxjs';
+import { BasePageModel } from '../../../base/models/base-page.model';
+import { MatSelectMediaTracker } from './mat-select-media-tracker';
+import * as i0 from "@angular/core";
+export declare class MatSelectDirective<TOption> extends MatSelectMediaTracker implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+    private _destroyRef;
+    private _changeDetectorRef;
+    private _router;
+    private _activatedRoute;
+    private _matSelect;
+    private _elementRef;
+    private _ngModel;
+    private _formControlName;
+    private _lastSourceLen;
+    private _currentEl;
+    private _clickableEl;
+    private _afterClickFunc;
+    private _isFirstLoading;
+    private _pageNumber;
+    private _hasMoreRow;
+    private _searchValue;
+    private _htmlScrollTop;
+    private _htmlScrollLeft;
+    private _listBoxEl;
+    private _searchBoxInputEl;
+    private _mainLoadingElement;
+    private _fromSearch;
+    private _scrollInfFunc;
+    private _scrollProcess;
+    private _scrollInfLoadingEl;
+    private _noMoreResultEl;
+    private _loadingContainer;
+    private _loadingScrollContainer;
+    filteredOptions: TOption[];
+    debounceTime: number;
+    isStringArray: boolean;
+    showSearch: boolean;
+    title: string;
+    pageSize: number;
+    options: TOption[];
+    propertyLabel: string | ((obj: TOption) => string) | null;
+    propertyValue: string | ((obj: TOption) => string) | null;
+    fetchFn: ((search: string, pageNumber: number, pageSize: number) => Observable<BasePageModel<TOption>>) | null;
+    compareWithFn: ((a: TOption, b: TOption) => boolean) | null;
+    infiniteScroll: boolean | null;
+    inFirstLoadCallSearcher: boolean | null;
+    inFirstLoadSearcherValue: string | null;
+    /** Mobile */
+    useMobileView: boolean;
+    fragment: string;
+    /** ------- */
+    onFilteredOptionsChange: EventEmitter<TOption[]>;
+    private get _lazyLoad();
+    constructor();
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private _setloading;
+    private _checkIsFirstLoading;
+    protected onPopState(_event: PopStateEvent): void;
+    protected onClick(_event: MouseEvent): void;
+    onChangeMediaTracker: () => void;
+    private _populateConfigs;
+    private _bindAfterClick;
+    private _handleValueChanges;
+    private _valueChangeDetected;
+    private _addLoadingElementForScrollInf;
+    protected changeScrollLoadingState(show: boolean): void;
+    private _addMainLoading;
+    protected scrollInfChange(event: Event): void;
+    private _addScrollInf;
+    private _changeNoMoreResultState;
+    private _scrollToNextItem;
+    private _scrollInList;
+    private _getListMainContainerElement;
+    private _addNoMoreResultElement;
+    private _removeScrollInfEvent;
+    private _changeSearchBoxEnableStatus;
+    private _cleanNullKeyToOption;
+    private _addNullKeyToOption;
+    private _moveCursorToEnd;
+    private _handleBackDropAfterClose;
+    private _handleOverflowAfterClose;
+    private _handleSelectionAfterClose;
+    private _addSearchablePanelClass;
+    private _createHeaderElement;
+    private _afterOpen;
+    private _afterClose;
+    private _handleObserverForInputValue;
+    private _allowedKeyCode;
+    private _debounceTime;
+    private _checkKeyCode;
+    deviceType: () => "tablet" | "mobile" | "desktop";
+    private _init;
+    private _syncValueAndOptions;
+    private _syncSourceAndOptions;
+    private _hideOptions;
+    private _getPagedResult;
+    refreshData(): Promise<any>;
+    private _onSearch;
+    private _appendNotFoundHtmlTag;
+    private _handleNotFoundLabel;
+    private _setMaxCount;
+    private _getExp;
+    private _getExpForOption;
+    private _getMaxSize;
+    private _changeMedia;
+    private _addTitleForMobileView;
+    private _removeOpacity;
+    private _afterOpenForMobile;
+    private _toggleParentClass;
+    private _removeParentClass;
+    protected getOptionLabel(option: TOption): string;
+    protected getOptionValue(option: TOption): any;
+    resetData(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectDirective<any>, "mat-select[gMatSelect]", ["gMatSelect"], { "debounceTime": { "alias": "debounceTime"; "required": false; }; "isStringArray": { "alias": "isStringArray"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "title": { "alias": "title"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "options": { "alias": "options"; "required": false; }; "propertyLabel": { "alias": "propertyLabel"; "required": true; }; "propertyValue": { "alias": "propertyValue"; "required": true; }; "fetchFn": { "alias": "fetchFn"; "required": false; }; "compareWithFn": { "alias": "compareWithFn"; "required": false; }; "infiniteScroll": { "alias": "infiniteScroll"; "required": false; }; "inFirstLoadCallSearcher": { "alias": "inFirstLoadCallSearcher"; "required": false; }; "inFirstLoadSearcherValue": { "alias": "inFirstLoadSearcherValue"; "required": false; }; "useMobileView": { "alias": "useMobileView"; "required": false; }; "fragment": { "alias": "fragment"; "required": false; }; }, { "onFilteredOptionsChange": "filteredOptionsChange"; }, never, never, true, never>;
+    static ngAcceptInputType_debounceTime: unknown;
+    static ngAcceptInputType_isStringArray: unknown;
+    static ngAcceptInputType_showSearch: unknown;
+    static ngAcceptInputType_pageSize: unknown;
+    static ngAcceptInputType_infiniteScroll: unknown;
+    static ngAcceptInputType_inFirstLoadCallSearcher: unknown;
+    static ngAcceptInputType_useMobileView: unknown;
+}

package/components/select-enum/index.d.ts

@@ -0,0 +1,3 @@
+export * from './select-enum.component';
+export * from './shared/option-select-enum.type';
+export * from './shared/select-check-all.component';

package/components/select-enum/select-enum.component.d.ts

@@ -0,0 +1,65 @@
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { iInternalOptions, tOptionInternalType, tOptionSelectEnum } from './shared/option-select-enum.type';
+import * as i0 from "@angular/core";
+export declare class SelectEnumComponent implements ControlValueAccessor, Validator, OnChanges {
+    protected readonly _matFormFieldUniqueId: string;
+    protected readonly _matSelectUniqueId: string;
+    protected readonly _uniqueId: string;
+    private _changeDetectorRef;
+    protected internalOptions: import("@angular/core").WritableSignal<iInternalOptions[]>;
+    id: string;
+    name: string;
+    label: string;
+    placeholder: string;
+    nullValueLabel: string;
+    help: string;
+    hintLabel: string;
+    disabled: boolean;
+    required: boolean;
+    multiple: boolean;
+    labelPosition: 'after' | 'before';
+    align: 'row' | 'column';
+    private _options;
+    set options(value: tOptionSelectEnum);
+    get options(): tOptionSelectEnum;
+    private _optionsExclud;
+    set optionsExclud(value: string[]);
+    get optionsExclud(): string[];
+    private _optionsDisable;
+    set optionsDisable(value: string[]);
+    get optionsDisable(): string[];
+    private _value;
+    get value(): tOptionInternalType;
+    set value(value: tOptionInternalType);
+    readonly onFocusEvent: EventEmitter<FocusEvent>;
+    readonly onBlurEvent: EventEmitter<FocusEvent>;
+    readonly onKeydownEvent: EventEmitter<KeyboardEvent>;
+    readonly onChangeEvent: EventEmitter<Event>;
+    protected get nullValue(): string;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    _onChange: (value: tOptionInternalType) => void;
+    _onTouched: () => void;
+    _validatorChangeFn: () => void;
+    writeValue(value: tOptionInternalType): void;
+    registerOnChange(fn: (value: tOptionInternalType) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    validate(control: AbstractControl<tOptionInternalType>): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    protected isOptionDisabled(key: tOptionInternalType): boolean;
+    protected isOptionExclud(key: tOptionInternalType): boolean;
+    protected getSelectedLength(): number;
+    protected getFirstSelectedLabel(): string;
+    protected getSelectedLabel(value: tOptionInternalType): string;
+    private _getLabelByKey;
+    protected onInputKeydown(event: KeyboardEvent): void;
+    protected onInputFocus(event: FocusEvent): void;
+    protected onInputBlur(event: FocusEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectEnumComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectEnumComponent, "gipi-select-enum", ["gSelectEnum"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "nullValueLabel": { "alias": "nullValueLabel"; "required": false; }; "help": { "alias": "help"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "align": { "alias": "align"; "required": false; }; "options": { "alias": "options"; "required": true; }; "optionsExclud": { "alias": "optionsExclud"; "required": false; }; "optionsDisable": { "alias": "optionsDisable"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "onFocusEvent": "focus"; "onBlurEvent": "blur"; "onKeydownEvent": "keydown"; "onChangeEvent": "change"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_multiple: unknown;
+}

package/components/select-enum/select-enum.component.scss

@@ -0,0 +1,41 @@
+@use '../../theming/utils' as utils;
+
+@mixin select-enum-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $font-color: utils.get-font-color($theme);
+
+    .g-select-enum-label {
+        @include utils.field-label($theme);
+    }
+
+    .g-select-enum {
+        @include utils.mat-form-field-reset($theme);
+
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-family: $font-family;
+        color: $font-color;
+        position: relative;
+        overflow: visible;
+        min-width: 0;
+        width: 100%;
+        min-height: fit-content;
+        height: fit-content;
+    }
+
+    .g-select-enum-trigger {
+        display: inline-flex;
+        justify-content: space-between;
+        width: 100%;
+        padding-right: 1rem;
+    }
+
+    .g-select-enum-additional-selection {
+        color: #{utils.get-color($theme, secondary, 500)};
+        font-size: 1.2rem;
+        font-weight: 500;
+        margin-left: 0.6rem;
+    }
+}

package/components/select-enum/shared/option-select-enum.type.d.ts

@@ -0,0 +1,6 @@
+export type tOptionSelectEnum = Record<string | number, string | number>;
+export interface iInternalOptions {
+    key: string | number;
+    value: string | number;
+}
+export type tOptionInternalType = string | number | (string | number)[] | null;

package/components/select-enum/shared/select-check-all.component.d.ts

@@ -0,0 +1,15 @@
+import { type MatCheckboxChange } from '@angular/material/checkbox';
+import * as i0 from "@angular/core";
+export declare class SelectCheckAllComponent {
+    private readonly _uniqueId;
+    private _matSelect;
+    id: string;
+    name: string;
+    label: string;
+    constructor();
+    protected isChecked(): boolean;
+    protected isIndeterminate(): boolean;
+    protected toggleSelection(change: MatCheckboxChange): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectCheckAllComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectCheckAllComponent, "gipi-select-check-all", ["gSelectCheckAll"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, never, true, never>;
+}

package/components/sidenav/index.d.ts

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

package/components/sidenav/shared/sidenav-arrow-animations.d.ts

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

package/components/sidenav/sidenav.component.d.ts

@@ -0,0 +1,47 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { type Observable } from 'rxjs';
+import { BaseMenuModel } from '../../base/models/base-menu.model';
+import * as i0 from "@angular/core";
+export declare class SidenavMenuItemComponent {
+    protected readonly _uniqueId: string;
+    private _router;
+    id: string;
+    name: string;
+    menu: BaseMenuModel;
+    sidenavOpened: boolean;
+    onSelect: EventEmitter<BaseMenuModel>;
+    protected get isMenuActive(): boolean;
+    protected get menuName(): Observable<string>;
+    protected get menuRoute(): Observable<string[] | null>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidenavMenuItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidenavMenuItemComponent, "gipi-sidenav-menu-item", ["gSidenavMenuItem"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "menu": { "alias": "menu"; "required": true; }; "sidenavOpened": { "alias": "sidenavOpened"; "required": true; }; }, { "onSelect": "onSelect"; }, never, never, true, never>;
+}
+export declare class SidenavComponent implements OnChanges {
+    protected readonly _uniqueId: string;
+    protected arrowType: import("@angular/core").WritableSignal<"arrow_left" | "arrow_right">;
+    private _menuLevel;
+    private _changeDetectorRef;
+    private _router;
+    id: string;
+    name: string;
+    private _opened;
+    set opened(value: BooleanInput);
+    get opened(): boolean;
+    private _menuList;
+    set menuList(value: BaseMenuModel[]);
+    get menuList(): BaseMenuModel[];
+    private _menuFooterList;
+    set menuFooterList(value: BaseMenuModel[]);
+    get menuFooterList(): BaseMenuModel[];
+    protected menuListApplied: import("@angular/core").Signal<BaseMenuModel[]>;
+    protected menuLevelName: import("@angular/core").Signal<string>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    onHandleToggleSidenav(): void;
+    onHandleMenuLevelGoBack(): void;
+    onHandleMenuItemSelect(menu: BaseMenuModel): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidenavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidenavComponent, "gipi-sidenav", ["gSidenav"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "menuList": { "alias": "menuList"; "required": false; }; "menuFooterList": { "alias": "menuFooterList"; "required": false; }; }, {}, never, never, true, never>;
+}

package/components/sidenav/sidenav.component.scss

@@ -0,0 +1,187 @@
+@use '../../theming/utils' as utils;
+
+@mixin sidenav-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $font-color: utils.get-font-color($theme);
+
+    .g-sidenav {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 1.6rem;
+
+        &.g-sidenav-opened {
+            width: 260px;
+        }
+
+        &.g-sidenav-closed {
+            width: 76px;
+
+            .g-sidenav-menu-list-base {
+                scrollbar-width: none !important;
+            }
+        }
+    }
+
+    .g-sidenav-control {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        gap: 1.2rem;
+        padding: 1.2rem;
+        border-radius: 4px;
+        border: none;
+        text-align: left;
+        font-family: $font-family;
+        font-size: $font-size;
+        font-weight: 600;
+        background-color: #{utils.get-color($theme, primary, 500)};
+        color: #{utils.get-color($theme, white, 100)};
+        cursor: pointer;
+
+        .g-sidenav-control-icon {
+            width: 2rem;
+            height: 2rem;
+            font-size: 2rem;
+        }
+
+        &:hover {
+            background-color: #{utils.get-color($theme, primary, 600)};
+        }
+    }
+
+    .g-sidenav-menu {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        gap: 1.6rem;
+    }
+
+    .g-sidenav-menu-list-base {
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+
+        overflow-y: auto;
+        overflow-x: hidden;
+        scrollbar-width: thin;
+        scroll-snap-type: x mandatory;
+
+        position: relative;
+    }
+
+    .g-sidenav-menu-list {
+        flex: 1 1 0;
+        gap: 0.4rem;
+        background-color: #{utils.get-color($theme, secondary, 50)};
+    }
+
+    .g-sidenav-menu-list-footer {
+        border-radius: 4px;
+        gap: 1.6rem;
+        background-color: transparent;
+    }
+
+    .g-sidenav-menu-item > a,
+    .g-sidenav-menu-item-level-back {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        max-height: 4.4rem;
+        gap: 1.2rem;
+        padding: 1.2rem;
+        border-radius: 4px;
+        border: none;
+        text-align: left;
+        font-family: $font-family;
+        font-size: $font-size;
+        font-weight: 700;
+        background-color: #{utils.get-color($theme, secondary, 50)};
+        color: #{utils.get-color($theme, black, 300)};
+        cursor: pointer;
+        text-decoration: none;
+        position: relative;
+        overflow: hidden;
+        transition: all 0.2s;
+
+        scroll-snap-align: start;
+        scroll-snap-stop: always;
+        flex: 0 0 100%;
+
+        .g-sidenav-menu-item-content {
+            @include utils.user-select(none);
+
+            display: flex;
+            align-items: center;
+            flex: 1;
+            gap: 1.2rem;
+
+            .g-sidenav-menu-item-icon {
+                width: 2rem;
+                height: 2rem;
+                font-size: 2rem;
+                color: #{utils.get-color($theme, black, 300)};
+                fill: #{utils.get-color($theme, black, 300)};
+
+                .g-sidenav-menu-item-icon > path {
+                    color: #{utils.get-color($theme, black, 300)};
+                    fill: #{utils.get-color($theme, black, 300)};
+                }
+            }
+        }
+
+        .g-sidenav-menu-item-icon-collapsable {
+            width: 2rem;
+            height: 2rem;
+            font-size: 2rem;
+        }
+
+        &.g-menu-item-active {
+            color: #{utils.get-color($theme, primary, 500)} !important;
+            background-color: #{utils.get-color($theme, secondary, 100)} !important;
+
+            .g-sidenav-menu-item-content {
+                color: #{utils.get-color($theme, primary, 500)} !important;
+                fill: #{utils.get-color($theme, primary, 500)} !important;
+
+                .g-sidenav-menu-item-icon,
+                .g-sidenav-menu-item-icon > path {
+                    color: #{utils.get-color($theme, primary, 500)} !important;
+                    fill: #{utils.get-color($theme, primary, 500)} !important;
+                }
+            }
+        }
+
+        &:hover {
+            background-color: #{utils.get-color($theme, secondary, 100)};
+        }
+    }
+
+    .g-sidenav-tag-new {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #{utils.get-color($theme, primary, 500)};
+        color: #{utils.get-color($theme, white, 100)};
+        padding: 0.2rem 0.6rem;
+        font-size: 1rem;
+        line-height: 1rem;
+        border-radius: 0.4rem;
+
+        &.g-sidenav-tag-new-closed {
+            position: absolute;
+            top: 15px;
+            right: 20px;
+            width: 52px;
+            z-index: 1;
+            transform: translateX(70%) translateY(-85%) rotate(45deg);
+            transform-origin: center;
+            overflow: hidden;
+            font-size: 0.8rem !important;
+            line-height: 0.8rem !important;
+        }
+    }
+}

package/components/skeleton/index.d.ts

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

package/components/skeleton/skeleton.component.d.ts

@@ -0,0 +1,37 @@
+import * as i0 from "@angular/core";
+export declare class SkeletonComponent {
+    private readonly _uniqueId;
+    id: string;
+    name: string;
+    /** Class of the element. */
+    styleClass: string;
+    /** Inline style of the element. */
+    style: {
+        [klass: string]: unknown;
+    } | null | undefined;
+    /** Shape of the element. */
+    shape: 'rectangle' | 'circle' | 'square' | 'img';
+    /** Type of the animation. */
+    animation: string;
+    /** Border radius of the element, defaults to value from theme. */
+    borderRadius: string | undefined;
+    /** Size of the skeleton. */
+    size: string | undefined;
+    /** Size of the image skeleton. */
+    imgSize: string | undefined;
+    /** Width of the element. */
+    width: string;
+    /** Height of the element */
+    height: string;
+    protected get hostWidth(): string;
+    protected get hostHeight(): string;
+    protected get containerStyle(): {
+        borderRadius: string | undefined;
+    };
+    constructor();
+    protected containerClass(): {
+        [key: string]: boolean;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonComponent, "gipi-skeleton", ["gSkeleton"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "style": { "alias": "style"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "size": { "alias": "size"; "required": false; }; "imgSize": { "alias": "imgSize"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
+}

package/components/skeleton/skeleton.component.scss

@@ -0,0 +1,76 @@
+@use '../../theming/utils' as utils;
+
+@mixin skeleton-theme($theme: ()) {
+    .g-skeleton {
+        display: block;
+    }
+
+    .g-skeleton-shape {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        background: #e0e1e2;
+        border-radius: 0.4rem;
+
+        &.g-skeleton-shape-circle {
+            border-radius: 50%;
+        }
+
+        &.g-skeleton-shape-square {
+            border-radius: 0.4rem;
+        }
+
+        &.g-skeleton-shape-img {
+            border-radius: 0.4rem;
+            color: #bbbdc1;
+        }
+
+        &::after {
+            content: '';
+            animation: g-skeleton-shape-animation 1.5s infinite;
+            height: 100%;
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+            transform: translateX(-100%);
+            z-index: 1;
+            background: linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0) 0%,
+                rgba(255, 255, 255, 0.4) 50%,
+                rgba(255, 255, 255, 0) 100%
+            );
+        }
+
+        [dir='rtl'] &::after {
+            animation-name: g-skeleton-shape-animation-rtl;
+        }
+
+        &.g-skeleton-shape-animation-none::after {
+            animation: none;
+        }
+
+        @keyframes g-skeleton-shape-animation {
+            from {
+                transform: translateX(-100%);
+            }
+            to {
+                transform: translateX(100%);
+            }
+        }
+
+        @keyframes g-skeleton-shape-animation-rtl {
+            from {
+                transform: translateX(100%);
+            }
+            to {
+                transform: translateX(-100%);
+            }
+        }
+    }
+}

package/components/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './step.component';
+export * from './stepper.component';

package/components/stepper/step.component.d.ts

@@ -0,0 +1,24 @@
+import { TemplateRef } from '@angular/core';
+import { tIconFontSet, tIconGrade, tIconOptical, tIconVariation, tIconWeight } from '../icon/icon.component';
+import * as i0 from "@angular/core";
+export declare class StepComponent {
+    contentStep: TemplateRef<unknown>;
+    protected readonly stepPanelUniqueId: string;
+    protected readonly stepUniqueId: string;
+    id: string;
+    name: string;
+    label: string;
+    template: TemplateRef<void> | null;
+    icon: string;
+    svgIcon: string;
+    iconFontSet: tIconFontSet;
+    iconSize: number;
+    iconVariation: tIconVariation;
+    iconWeight: tIconWeight;
+    iconGrade: tIconGrade;
+    iconOptical: tIconOptical;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<StepComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepComponent, "gipi-step", ["gStep"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "template": { "alias": "template"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "iconFontSet": { "alias": "iconFontSet"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "iconVariation": { "alias": "iconVariation"; "required": false; }; "iconWeight": { "alias": "weight"; "required": false; }; "iconGrade": { "alias": "grade"; "required": false; }; "iconOptical": { "alias": "optical"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_iconSize: unknown;
+}