@gipisistemas/ngx-core 1.0.1

package/components/scroll-fade/scroll-fade.directive.d.ts

@@ -0,0 +1,24 @@
+import { AfterViewInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ScrollFadeDirective implements AfterViewInit, OnDestroy, OnChanges {
+    private _elementRef;
+    private _renderer;
+    private _scrollContainer;
+    private _fadeTop;
+    private _fadeBottom;
+    private _scrollListener;
+    private _isInitialized;
+    gScrollFade: boolean;
+    gScrollOverflow: 'posY' | 'posX';
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private _applyBaseStyles;
+    private _createFadeElement;
+    private _appendFade;
+    private _bindScrollListener;
+    private _updateFadeState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollFadeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ScrollFadeDirective, "[gScrollFade]", never, { "gScrollFade": { "alias": "gScrollFade"; "required": false; }; "gScrollOverflow": { "alias": "gScrollOverflow"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_gScrollFade: unknown;
+}

package/components/select/index.d.ts

@@ -0,0 +1,4 @@
+export * from './select.component';
+export * from './shared/mat-select-media-tracker';
+export * from './shared/mat-select-options-helper';
+export * from './shared/mat-select.directive';

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

@@ -0,0 +1,85 @@
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { BasePageModel } from '../../base/models/base-page.model';
+import { MatSelectDirective } from './shared/mat-select.directive';
+import * as i0 from "@angular/core";
+export declare class SelectComponent<TOption> implements OnChanges, ControlValueAccessor, Validator {
+    protected matSelect: MatSelectDirective<TOption>;
+    protected readonly _uniqueId: string;
+    protected readonly _matFormFieldUniqueId: string;
+    private _changeDetectorRef;
+    private _model;
+    protected set model(value: TOption | TOption[] | null);
+    protected get model(): TOption | TOption[] | null;
+    id: string;
+    name: string;
+    label: string;
+    placeholder: string;
+    hintLabel: string;
+    help: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    multiple: boolean;
+    debounceTime: number;
+    /** Se true, ativa carregamento contínuo ao rolar a lista */
+    infiniteScroll: boolean;
+    propertyLabel: string | ((obj: TOption) => string) | null;
+    propertyValue: string | ((obj: TOption) => string) | null;
+    compareWithFn: ((a: TOption, b: TOption) => boolean) | null;
+    optionsExclud: TOption[];
+    pageSize: number;
+    fetchFn: ((search: string, pageNumber: number, pageSize: number) => Observable<BasePageModel<TOption>>) | null;
+    options: TOption[];
+    isStringArray: boolean;
+    showSearch: boolean;
+    title: string;
+    /** Se true, a função de busca será chamada ao criar o componente */
+    inFirstLoadCallSearcher: boolean;
+    /** Valor inicial usado na primeira chamada de busca */
+    inFirstLoadSearcherValue: string | null;
+    useMobileView: boolean;
+    fragment: string;
+    onSelectionChange: EventEmitter<TOption | TOption[] | null>;
+    protected get hasMultipleSelected(): boolean;
+    protected get firstSelectedLabel(): string;
+    protected get additionalSelectedCount(): number;
+    protected get additionSelectedLabel(): string;
+    protected get showClearButton(): boolean;
+    readonly onFocusEvent: EventEmitter<FocusEvent>;
+    readonly onBlurEvent: EventEmitter<FocusEvent>;
+    readonly onKeydownEvent: EventEmitter<KeyboardEvent>;
+    readonly onChangeEvent: EventEmitter<Event>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    _onChange: (value: TOption | TOption[] | null) => void;
+    _onTouched: () => void;
+    _validatorChangeFn: () => void;
+    writeValue(value: TOption | TOption[] | null): void;
+    registerOnChange(fn: (value: TOption | TOption[] | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    validate(control: AbstractControl<TOption | TOption[] | null>): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    protected onHandleClear(): void;
+    protected getOptionLabel(option: TOption): string;
+    protected getOptionValue(option: TOption): any;
+    protected optionExcluded(option: TOption): boolean;
+    protected onInputKeydown(event: KeyboardEvent): void;
+    protected onInputFocus(event: FocusEvent): void;
+    protected onInputBlur(event: FocusEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent<any>, "gipi-select", ["gSelect"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; "help": { "alias": "help"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "debounceTime": { "alias": "debounceTime"; "required": false; }; "infiniteScroll": { "alias": "infiniteScroll"; "required": false; }; "propertyLabel": { "alias": "propertyLabel"; "required": true; }; "propertyValue": { "alias": "propertyValue"; "required": false; }; "compareWithFn": { "alias": "compareWithFn"; "required": false; }; "optionsExclud": { "alias": "optionsExclud"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "fetchFn": { "alias": "fetchFn"; "required": false; }; "options": { "alias": "options"; "required": false; }; "isStringArray": { "alias": "isStringArray"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "title": { "alias": "title"; "required": false; }; "inFirstLoadCallSearcher": { "alias": "inFirstLoadCallSearcher"; "required": false; }; "inFirstLoadSearcherValue": { "alias": "inFirstLoadSearcherValue"; "required": false; }; "useMobileView": { "alias": "useMobileView"; "required": false; }; "fragment": { "alias": "fragment"; "required": false; }; }, { "onSelectionChange": "selectionChange"; "onFocusEvent": "focus"; "onBlurEvent": "blur"; "onKeydownEvent": "keydown"; "onChangeEvent": "change"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_readonly: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_debounceTime: unknown;
+    static ngAcceptInputType_infiniteScroll: unknown;
+    static ngAcceptInputType_pageSize: unknown;
+    static ngAcceptInputType_isStringArray: unknown;
+    static ngAcceptInputType_showSearch: unknown;
+    static ngAcceptInputType_inFirstLoadCallSearcher: unknown;
+    static ngAcceptInputType_useMobileView: unknown;
+}

package/components/select/select.component.scss

@@ -0,0 +1,52 @@
+@use '../../theming/utils' as utils;
+@use './shared/mat-select-styles.scss' as mat-select;
+
+@mixin select-theme($theme: ()) {
+    $font-family: utils.get-font-family($theme);
+    $font-size: utils.get-font-size($theme);
+    $font-color: utils.get-font-color($theme);
+
+    @include mat-select.mat-select-theme($theme);
+
+    .g-select-label {
+        @include utils.field-label($theme);
+    }
+
+    .g-select {
+        @include utils.mat-form-field-reset($theme);
+
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-family: $font-family;
+        color: $font-color;
+        min-width: 0;
+        width: 100%;
+        min-height: fit-content;
+        height: fit-content;
+    }
+
+    .g-select-loading .mdc-list-item__primary-text {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        width: 100% !important;
+        opacity: 1 !important;
+    }
+
+    .g-select-form-field {
+        .mat-mdc-form-field-flex {
+            position: relative !important;
+        }
+
+        .mat-mdc-form-field-icon-suffix {
+            position: absolute !important;
+            top: 0 !important;
+            right: 2.2rem !important;
+        }
+
+        .mat-mdc-select-value {
+            padding-right: 4rem !important;
+        }
+    }
+}

package/components/select/shared/mat-select-media-tracker.d.ts

@@ -0,0 +1,15 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare abstract class MatSelectMediaTracker implements OnInit, OnDestroy {
+    private readonly _mediaMatcher;
+    private readonly _platformId;
+    private _mobileQueryListenerFunc?;
+    protected mobileQuery: MediaQueryList | null;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Método a ser implementado por subclasses. */
+    abstract onChangeMediaTracker(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSelectMediaTracker, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSelectMediaTracker, never, never, {}, {}, never, never, true, never>;
+}

package/components/select/shared/mat-select-options-helper.d.ts

@@ -0,0 +1,6 @@
+export declare class MatSelectOptionsHelper {
+    static getOptionLabel<TOption = any>(option: TOption, propertyLabel: string | ((obj: TOption) => string) | null): string;
+    static getOptionValue<TOption = any>(option: TOption, propertyValue: string | ((obj: TOption) => string) | null): any;
+    static optionExcluded<TOption = any>(option: TOption, optionsExclud: TOption[]): boolean;
+    static isEqualOption(option1: unknown, option2: unknown): boolean;
+}

package/components/select/shared/mat-select-styles.scss

@@ -0,0 +1,429 @@
+@use '../../../theming/utils' as utils;
+
+@mixin mat-select-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);
+
+    .cdk-overlay-pane:has(.mat-mdc-select-panel) {
+        position: relative !important;
+    }
+
+    .ngx-mat-select-opacity {
+        opacity: 0 !important;
+    }
+
+    .ngx-mat-mobile .ngx-mat-select-mobile-wrapper {
+        position: fixed !important;
+        bottom: 0 !important;
+        max-height: 100% !important;
+        max-width: 100% !important;
+        transform: none !important;
+        background: $white-100 !important;
+    }
+
+    .ngx-mat-mobile .ngx-mat-select-mobile-open-fullScreen {
+        top: 0 !important;
+        right: 0 !important;
+        left: 0 !important;
+        width: 100%;
+        height: 100%;
+    }
+
+    .cdk-overlay-container.bottomToTop .cdk-overlay-backdrop {
+        background: rgba(0, 0, 0, 0.32) !important;
+        opacity: 1 !important;
+    }
+
+    .ngx-mat-mobile .ngx-mat-select-mobile {
+        max-width: 100%;
+        width: 100%;
+        overflow: hidden;
+        background: $white-100;
+        transition: opacity 100ms linear;
+        min-width: auto !important;
+        transform: none !important;
+        transform-origin: unset !important;
+    }
+
+    .ngx-mat-select-mobile-select-panel .mat-dialog-content {
+        max-height: calc(100vh - 150px);
+    }
+
+    .ngx-mat-select-search-box-container.abs {
+        margin: 0;
+        border: none !important;
+    }
+
+    .ngx-mat-mobile .ngx-mat-select-search-box-container.abs {
+        width: 100%;
+    }
+
+    .ngx-mat-select-search-box-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        width: 100%;
+        max-width: 100%;
+        height: 4rem;
+        padding-inline: 1rem;
+
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        background: $white-100;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    }
+
+    // .ngx-mat-select-mobile .ngx-mat-select-search-box-wrap {
+    // position: fixed;
+    // }
+
+    .ngx-mat-select-mobile > .mat-option:first-child {
+        margin-top: 52px;
+    }
+
+    .hide-selected {
+        display: none !important;
+    }
+
+    .ngx-mat-select-mobile-title {
+        width: 100%;
+        background: $white-100;
+        z-index: 1;
+        padding: 11px;
+        display: flex;
+        align-items: center;
+    }
+
+    html[dir='rtl'] .first-selected:after {
+        right: 0;
+    }
+
+    .ngx-mat-select-not-found-container {
+        padding: 1rem;
+        height: 8rem;
+        background: $white-100;
+        justify-content: center;
+        align-items: center;
+        display: none;
+    }
+
+    .hide-options mat-option {
+        opacity: 0 !important;
+    }
+
+    .remove-options mat-option {
+        display: none !important;
+    }
+
+    .mat-selected.abs {
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+    }
+
+    .ngx-mat-select-search-box-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+    }
+
+    .ngx-mat-select-search-box-input {
+        display: flex;
+        width: 100%;
+        border: 0;
+        outline: 0;
+        background: inherit;
+        height: 3.6rem;
+    }
+
+    .ngx-mat-select-search-box-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 2.4rem;
+        max-width: 2.4rem;
+        flex: 0 0 2.4rem;
+        font-size: 2rem;
+    }
+
+    .arrow-right,
+    .arrow-left {
+        width: 100%;
+        height: 2.4rem;
+        max-width: 2.4rem;
+        margin: 8px 15px 8px 8px;
+        cursor: pointer;
+    }
+
+    /* loading */
+    @keyframes ldio-v2b57u5sqa7 {
+        0% {
+            transform: translate(6px, 40px) scale(0);
+        }
+        25% {
+            transform: translate(6px, 40px) scale(0);
+        }
+        50% {
+            transform: translate(6px, 40px) scale(1);
+        }
+        75% {
+            transform: translate(40px, 40px) scale(1);
+        }
+        100% {
+            transform: translate(74px, 40px) scale(1);
+        }
+    }
+
+    @keyframes ldio-v2b57u5sqa7-r {
+        0% {
+            transform: translate(74px, 40px) scale(1);
+        }
+        100% {
+            transform: translate(74px, 40px) scale(0);
+        }
+    }
+
+    @keyframes ldio-v2b57u5sqa7-c {
+        0% {
+            background: #292664;
+        }
+        25% {
+            background: #b5ccf1;
+        }
+        50% {
+            background: #94a9ce;
+        }
+        75% {
+            background: #667395;
+        }
+        100% {
+            background: #292664;
+        }
+    }
+
+    @keyframes ldio-it58uqzfg5 {
+        0% {
+            transform: translate(6px, 40px) scale(0);
+        }
+        25% {
+            transform: translate(6px, 40px) scale(0);
+        }
+        50% {
+            transform: translate(6px, 40px) scale(1);
+        }
+        75% {
+            transform: translate(40px, 40px) scale(1);
+        }
+        100% {
+            transform: translate(74px, 40px) scale(1);
+        }
+    }
+
+    @keyframes ldio-it58uqzfg5-r {
+        0% {
+            transform: translate(74px, 40px) scale(1);
+        }
+        100% {
+            transform: translate(74px, 40px) scale(0);
+        }
+    }
+
+    @keyframes ldio-it58uqzfg5-c {
+        0% {
+            background: #292664;
+        }
+        25% {
+            background: #b5ccf1;
+        }
+        50% {
+            background: #94a9ce;
+        }
+        75% {
+            background: #667395;
+        }
+        100% {
+            background: #292664;
+        }
+    }
+
+    .ldio-it58uqzfg5 div {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        transform: translate(40px, 40px) scale(1);
+        background: #292664;
+        animation: ldio-it58uqzfg5 1s infinite cubic-bezier(0, 0.5, 0.5, 1);
+    }
+
+    .ldio-it58uqzfg5 div:nth-child(1) {
+        background: #667395;
+        transform: translate(74px, 40px) scale(1);
+        animation:
+            ldio-it58uqzfg5-r 0.25s infinite cubic-bezier(0, 0.5, 0.5, 1),
+            ldio-it58uqzfg5-c 1s infinite step-start;
+    }
+
+    .ldio-it58uqzfg5 div:nth-child(2) {
+        animation-delay: -0.25s;
+        background: #292664;
+    }
+
+    .ldio-it58uqzfg5 div:nth-child(3) {
+        animation-delay: -0.5s;
+        background: #667395;
+    }
+
+    .ldio-it58uqzfg5 div:nth-child(4) {
+        animation-delay: -0.75s;
+        background: #94a9ce;
+    }
+
+    .ldio-it58uqzfg5 div:nth-child(5) {
+        animation-delay: -1s;
+        background: #b5ccf1;
+    }
+
+    .loadingio-spinner-ellipsis-ao6bq46b8nt {
+        width: 28px;
+        height: 28px;
+        display: inline-block;
+        overflow: hidden;
+        background: $white-100;
+    }
+
+    .ldio-it58uqzfg5 {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        transform: translateZ(0) scale(0.28);
+        backface-visibility: hidden;
+        transform-origin: 0 0; /* see note above */
+    }
+
+    .ldio-it58uqzfg5 div {
+        box-sizing: content-box;
+    }
+
+    .ngx-mat-select-loading-container {
+        display: none;
+        align-items: center;
+        height: 40px;
+        justify-content: center;
+        position: absolute;
+        right: 15px;
+    }
+
+    html[dir='rtl'] .ngx-mat-select-loading-container {
+        left: 15px;
+        right: unset;
+    }
+
+    @keyframes ldio-o6nze7by54l {
+        0% {
+            transform: translate(-50%, -50%) rotate(0deg);
+        }
+        100% {
+            transform: translate(-50%, -50%) rotate(360deg);
+        }
+    }
+
+    .ldio-o6nze7by54l div {
+        position: absolute;
+        width: 65px;
+        height: 65px;
+        border: 3px solid #0a0a0a;
+        border-top-color: transparent;
+        border-radius: 50%;
+    }
+
+    .ldio-o6nze7by54l div {
+        animation: ldio-o6nze7by54l 1s linear infinite;
+        top: 50px;
+        left: 50px;
+    }
+
+    .loadingio-spinner-rolling-2vwh2v284qu {
+        width: 34px;
+        height: 34px;
+        display: inline-block;
+        overflow: hidden;
+        background: $white-100;
+    }
+
+    .ldio-o6nze7by54l {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        transform: translateZ(0) scale(0.34);
+        backface-visibility: hidden;
+        transform-origin: 0 0; /* see note above */
+    }
+
+    .ldio-o6nze7by54l div {
+        box-sizing: content-box;
+    }
+
+    /* generated by https://loading.io/ */
+    .ngx-mat-select-scroll-loading > div {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .ngx-mat-select-scroll-loading {
+        display: none;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        background: $white-100;
+        z-index: 1;
+        height: 34px;
+        opacity: 0.7;
+    }
+
+    .ngx-mat-select-scroll-no-more {
+        display: none;
+        width: 100%;
+        /*position: absolute;*/
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 34px;
+        text-align: center;
+        background: $white-100;
+        z-index: 1;
+        font-style: italic;
+        padding-top: 8px;
+        border-top: 1px dashed #e0e0e0;
+    }
+
+    .ngx-mat-select-main-loading {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 51px;
+        background: $white-100;
+        opacity: 0.9;
+        display: none;
+    }
+
+    .ngx-mat-select-main-loading > div {
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        position: absolute;
+    }
+}