@gipisistemas/ngx-core 1.0.4 → 1.0.6

package/README.md

@@ -165,5 +165,4 @@ Utilizando tema padrão:
 ```
 
 ## 🚀 Produção
-
 Ainda será implementado

package/components/fieldset/fieldset.component.d.ts

@@ -0,0 +1,21 @@
+import { tIconFontSet, tIconGrade, tIconOptical, tIconVariation, tIconWeight } from '../icon/icon.component';
+import * as i0 from "@angular/core";
+export declare class FieldsetComponent {
+    protected readonly _uniqueId: string;
+    id: string;
+    name: string;
+    label: string;
+    border: 'solid' | 'dashed';
+    icon: string;
+    svgIcon: string;
+    iconFontSet: tIconFontSet;
+    iconSize: number;
+    iconVariation: tIconVariation;
+    iconWeight: tIconWeight;
+    iconGrade: tIconGrade;
+    iconOptical: tIconOptical;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FieldsetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldsetComponent, "gipi-fieldset", ["gFieldset"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "border": { "alias": "border"; "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;
+}

package/components/fieldset/fieldset.component.scss

@@ -0,0 +1,58 @@
+@use '../../theming/utils' as utils;
+
+@mixin fieldset-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-fieldset-content {
+        display: block;
+        min-width: 0;
+        width: 100%;
+        border-radius: 0.4rem;
+        position: relative;
+
+        border-width: 1.8px;
+        padding-inline: 1.6rem;
+        padding-block: 1.6rem;
+        margin-inline: 0;
+        border-color: $secondary-100;
+
+        &.g-fieldset-disabled {
+            opacity: 0.6;
+            pointer-events: none;
+        }
+
+        &.g-fieldset-border-solid {
+            border-style: solid;
+        }
+
+        &.g-fieldset-border-dashed {
+            border-style: dashed;
+        }
+
+        .g-fieldset-legend {
+            position: absolute;
+            top: -0.8rem;
+            left: 1rem;
+            white-space: nowrap;
+            padding: 0 0.6rem;
+            background-color: $white-100;
+            font-family: $font-family;
+            font-size: $font-size;
+            line-height: $font-size;
+            color: $font-color;
+
+            .g-fieldset-legend-icon {
+                display: inline-block;
+                vertical-align: middle;
+                margin-right: 0.6rem;
+
+                @include utils.user-select(none);
+            }
+        }
+    }
+}

package/components/fieldset/index.d.ts

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

package/components/index.d.ts

@@ -14,12 +14,14 @@ export * from './echarts';
 export * from './empty';
 export * from './expansion-panel';
 export * from './field-error';
+export * from './fieldset';
 export * from './flex-layout';
 export * from './form-wrapper';
 export * from './helpful-tip';
 export * from './icon';
 export * from './input';
 export * from './input-currency';
+export * from './input-file';
 export * from './input-group';
 export * from './input-phone';
 export * from './loading';

package/components/input-file/index.d.ts

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

package/components/input-file/input-file.component.d.ts

@@ -0,0 +1,65 @@
+import { ElementRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, NgControl, ValidationErrors, Validator } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class InputFileComponent implements ControlValueAccessor, Validator, OnChanges {
+    ngControl?: NgControl;
+    fileInput: ElementRef<HTMLInputElement>;
+    protected readonly _matFormFieldUniqueId: string;
+    protected readonly _uniqueId: string;
+    protected readonly isDragOver: import("@angular/core").WritableSignal<boolean>;
+    protected readonly isLoading: import("@angular/core").WritableSignal<boolean>;
+    protected readonly errorMessage: import("@angular/core").WritableSignal<string>;
+    id: string;
+    name: string;
+    label: string;
+    placeholder: string;
+    help: string;
+    hintLabel: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    /** Em bytes, ex: `1024` = `1 KB` */
+    maxSize: number;
+    /** Ex: `['svg', 'png', 'jpg', 'jpeg', 'pdf']` */
+    allowedExtensions: string[];
+    /** Ex: `['image/png', 'image/jpeg', 'application/pdf']` */
+    allowedTypes: string[];
+    private _selectedFile;
+    get selectedFile(): File | null;
+    set selectedFile(value: File | null);
+    readonly onFocusEvent: EventEmitter<FocusEvent>;
+    readonly onBlurEvent: EventEmitter<FocusEvent>;
+    readonly onKeydownEvent: EventEmitter<KeyboardEvent>;
+    readonly onFileChangeEvent: EventEmitter<File | null>;
+    readonly onFileErrorEvent: EventEmitter<string>;
+    protected get maxSizeText(): string;
+    protected get acceptAttr(): string;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    private _onChange;
+    private _onTouched;
+    private _validatorChangeFn;
+    writeValue(value: File | null): void;
+    registerOnChange(fn: (value: File | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    validate(control: AbstractControl<File | null>): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    protected onInputKeydown(event: KeyboardEvent): void;
+    protected onInputFocus(event: FocusEvent): void;
+    protected onInputBlur(event: FocusEvent): void;
+    protected onFileSelect(event: Event): void;
+    protected onDragOver(event: DragEvent): void;
+    protected onDragLeave(event: DragEvent): void;
+    protected onDrop(event: DragEvent): void;
+    private _handleFile;
+    private _validateFile;
+    protected removeFile(): void;
+    protected triggerFileInput(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputFileComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputFileComponent, "gipi-input-file", ["gInputFile"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "help": { "alias": "help"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "allowedExtensions": { "alias": "allowedExtensions"; "required": false; }; "allowedTypes": { "alias": "allowedTypes"; "required": false; }; "selectedFile": { "alias": "value"; "required": false; }; }, { "onFocusEvent": "focus"; "onBlurEvent": "blur"; "onKeydownEvent": "keydown"; "onFileChangeEvent": "fileChange"; "onFileErrorEvent": "fileError"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_readonly: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_maxSize: unknown;
+}

package/components/input-file/input-file.component.scss

@@ -0,0 +1,165 @@
+@use '../../theming/utils' as utils;
+
+@mixin input-file-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);
+
+    // Not disabled
+    $black-300: utils.get-color($theme, black, 300);
+    $black-400: utils.get-color($theme, black, 400);
+
+    $primary-500: utils.get-color($theme, primary, 500);
+    $primary-600: utils.get-color($theme, primary, 600);
+
+    // Disabled
+    $secondary-50: utils.get-color($theme, secondary, 50);
+    $secondary-200: utils.get-color($theme, secondary, 200);
+    $secondary-300: utils.get-color($theme, secondary, 300);
+    $secondary-500: utils.get-color($theme, secondary, 500);
+
+    .g-input-file-label {
+        @include utils.field-label($theme);
+    }
+
+    .g-input-file {
+        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-input-file-wrapper {
+            display: flex;
+            border-radius: 0.4rem;
+            height: 3.6rem;
+            border: 1px solid $black-400;
+            background-color: $white-100;
+            position: relative;
+            overflow: hidden;
+            transition: all 0.3s ease-in-out;
+
+            &:hover {
+                border-color: $black-300;
+            }
+
+            &:focus,
+            &:focus-within {
+                border-color: $black-300;
+                box-shadow:
+                    inset 0 1px 1px rgba(0, 0, 0, 0.075),
+                    0 0 8px rgba(101, 101, 101, 0.6);
+            }
+
+            &.drag-over {
+                background-color: $secondary-50;
+                border-color: $black-300;
+                box-shadow:
+                    inset 0 1px 1px rgba(0, 0, 0, 0.075),
+                    0 0 8px rgba(101, 101, 101, 0.6);
+            }
+
+            &.loading {
+                cursor: progress;
+                // Você pode adicionar uma animação aqui
+                // @include animate-pulse();
+            }
+
+            &.disabled {
+                @include utils.user-select(none);
+
+                cursor: not-allowed;
+                color: $secondary-300 !important;
+                background-color: $secondary-50 !important;
+                border-color: $secondary-200 !important;
+            }
+        }
+
+        .g-input-file-input-hidden {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            visibility: hidden;
+            cursor: pointer;
+        }
+
+        .g-input-file-select-button {
+            flex-shrink: 0;
+            padding: 1rem;
+            height: 100%;
+            font-weight: 500;
+            color: $white-100;
+            background-color: $primary-500;
+            border: none;
+            border-top-left-radius: 0.4rem;
+            border-bottom-left-radius: 0.4rem;
+            transition: background-color 0.3s;
+            cursor: pointer;
+
+            &:hover {
+                background-color: $primary-600;
+            }
+
+            &:disabled {
+                @include utils.user-select(none);
+
+                cursor: not-allowed;
+                background-color: $secondary-50 !important;
+                color: $secondary-300 !important;
+            }
+        }
+
+        .g-input-file-display-area {
+            flex-grow: 1;
+            padding: 0.4rem;
+            color: $font-color;
+            font-size: 1.4rem;
+            font-weight: 500;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: flex;
+            align-items: center;
+        }
+
+        .g-input-file-placeholder {
+            color: $secondary-500 !important;
+        }
+
+        .g-input-file-name {
+            color: $font-color;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .g-input-file-error {
+            margin-top: 0.5rem;
+            padding: 0.5rem 0.75rem;
+            border-radius: 0.5rem;
+            background-color: #ffebee;
+            border: 1px solid #ffcdd2;
+            color: #d32f2f;
+            font-size: 0.875rem;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+
+            &::before {
+                content: '⚠';
+                font-size: 1rem;
+            }
+        }
+    }
+}