@gipisistemas/ngx-core 1.0.1

package/components/button/button.component.d.ts

@@ -0,0 +1,74 @@
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { type MatBadgePosition, type MatBadgeSize } from '@angular/material/badge';
+import { Nullable } from '../../types/nullable.type';
+import { tIconFontSet, tIconGrade, tIconOptical, tIconVariation, tIconWeight } from '../icon';
+import { PopoverTriggerDirective } from '../popover/popover-trigger.directive';
+import * as i0 from "@angular/core";
+type tButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'icon' | 'link' | 'action' | 'input';
+type tButtonIconPosition = 'left' | 'right';
+type tButtonType = 'submit' | 'reset' | 'button';
+type tButtonSize = 'small' | 'large';
+export declare class ButtonComponent implements AfterViewInit, OnDestroy {
+    popoverTrigger: PopoverTriggerDirective;
+    protected readonly _uniqueId: string;
+    protected readonly invisibleBadgeChar = "\u2060";
+    private readonly _focusMonitor;
+    elementRef: ElementRef<HTMLElement>;
+    id: string;
+    name: string;
+    label: string;
+    title: string;
+    tooltip: string;
+    type: tButtonType;
+    size: tButtonSize;
+    iconPos: tButtonIconPosition;
+    variant: tButtonVariant;
+    disabled: boolean;
+    loading: boolean;
+    popover: BooleanInput;
+    ariaLabel: string;
+    ariaDisabled: boolean;
+    icon: string;
+    svgIcon: string;
+    iconFontSet: tIconFontSet;
+    iconSize: number;
+    iconVariation: tIconVariation;
+    iconWeight: tIconWeight;
+    iconGrade: tIconGrade;
+    iconOptical: tIconOptical;
+    badgeShow: boolean;
+    badgeOverlap: BooleanInput;
+    badgeContent: string | number | undefined | null;
+    badgePosition: MatBadgePosition;
+    badgeSize: MatBadgeSize;
+    onClickEvent: EventEmitter<MouseEvent>;
+    onFocusEvent: EventEmitter<FocusEvent>;
+    onBlurEvent: EventEmitter<FocusEvent>;
+    onOpenedEvent: EventEmitter<void>;
+    onClosedEvent: EventEmitter<void>;
+    protected get _ariaDisabled(): Nullable<boolean>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    focus(origin?: FocusOrigin, options?: FocusOptions): void;
+    onHandleClick(event: MouseEvent): void;
+    onHandleFocus(event: FocusEvent): void;
+    onHandleBlur(event: FocusEvent): void;
+    onHandleOpened(): void;
+    onHandleClosed(): void;
+    showPopover(): void;
+    closePopover(): void;
+    onResize(event: UIEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "gipi-button", ["gButton"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "title": { "alias": "title"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "iconPos": { "alias": "iconPos"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "popover": { "alias": "popover"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDisabled": { "alias": "aria-disabled"; "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; }; "badgeShow": { "alias": "badgeShow"; "required": false; }; "badgeOverlap": { "alias": "badgeOverlap"; "required": false; }; "badgeContent": { "alias": "badgeContent"; "required": false; }; "badgePosition": { "alias": "badgePosition"; "required": false; }; "badgeSize": { "alias": "badgeSize"; "required": false; }; }, { "onClickEvent": "click"; "onFocusEvent": "focus"; "onBlurEvent": "blur"; "onOpenedEvent": "opened"; "onClosedEvent": "closed"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_popover: unknown;
+    static ngAcceptInputType_ariaDisabled: unknown;
+    static ngAcceptInputType_iconSize: unknown;
+    static ngAcceptInputType_badgeShow: unknown;
+    static ngAcceptInputType_badgeOverlap: unknown;
+}
+export {};

package/components/button/button.component.scss

@@ -0,0 +1,196 @@
+@use '../../theming/utils' as utils;
+
+:host {
+    position: relative;
+}
+
+@mixin button-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);
+    $primary-500: utils.get-color($theme, primary, 500);
+    $primary-600: utils.get-color($theme, primary, 600);
+    $secondary-50: utils.get-color($theme, secondary, 50);
+    $secondary-100: utils.get-color($theme, secondary, 100);
+    $secondary-200: utils.get-color($theme, secondary, 200);
+    $secondary-500: utils.get-color($theme, secondary, 500);
+    $black-200: utils.get-color($theme, black, 200);
+    $black-300: utils.get-color($theme, black, 300);
+    $black-400: utils.get-color($theme, black, 400);
+    $warning-500: utils.get-color($theme, warning, 500);
+    $pastels-secondary: utils.get-color($theme, pastels, secondary);
+
+    @include utils.mat-badge-reset($theme);
+
+    .g-button {
+        display: block;
+        position: relative;
+
+        &:has(.g-button-only-icon) {
+            width: fit-content;
+        }
+    }
+
+    .g-button-content {
+        @include utils.button-reset($theme);
+
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 0.6rem;
+        padding: 1rem 0.6rem;
+        width: 100%;
+        min-width: 3.6rem;
+        max-height: 3.6rem;
+        border-radius: 0.4rem;
+        text-align: center;
+        vertical-align: middle;
+        box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1);
+        transition: 0.2s;
+        border: 1px solid transparent;
+        position: relative;
+
+        font-family: $font-family;
+        font-size: $font-size;
+        font-weight: 700;
+        line-height: 100%;
+
+        &.g-button-icon-left {
+            flex-direction: row;
+        }
+
+        &.g-button-icon-right {
+            flex-direction: row-reverse;
+        }
+
+        .g-button-icon {
+            width: 2rem;
+            height: 2rem;
+            font-size: 2rem;
+            line-height: 100%;
+        }
+
+        &.g-button-primary {
+            background-color: $primary-500;
+            color: $white-100;
+
+            &:not(:disabled):hover {
+                background-color: $primary-600;
+            }
+            .g-button-icon {
+                color: $white-100;
+            }
+
+            .mat-badge-content {
+                background-color: $warning-500 !important;
+            }
+        }
+
+        &.g-button-secondary {
+            background-color: transparent;
+            border-color: $black-300;
+            color: $black-300;
+
+            &:not(:disabled):hover {
+                background-color: $secondary-100;
+            }
+            .g-button-icon {
+                color: $black-300;
+            }
+        }
+
+        &.g-button-tertiary {
+            background-color: $pastels-secondary;
+            color: $black-300;
+            box-shadow: none;
+
+            &:not(:disabled):hover {
+                background-color: $secondary-100;
+            }
+            .g-button-icon {
+                color: $black-300;
+            }
+        }
+
+        &.g-button-link {
+            background-color: transparent;
+            color: $black-200;
+            box-shadow: none;
+
+            &:not(:disabled):hover .g-button-label {
+                text-decoration: underline;
+                text-decoration-color: $black-200;
+                color: $black-200;
+            }
+            &:not(:disabled):hover {
+                color: $black-200;
+            }
+            .g-button-icon {
+                color: $black-200;
+            }
+        }
+
+        &.g-button-only-icon {
+            background-color: transparent;
+            color: $black-200;
+            box-shadow: none;
+            width: 3.6rem;
+            height: 3.6rem;
+
+            &:not(:disabled):hover {
+                background-color: $secondary-100;
+            }
+            .g-button-icon {
+                color: $black-200;
+            }
+        }
+
+        &.g-button-action {
+            background-color: transparent;
+            box-shadow: none;
+            display: flex;
+            justify-content: flex-start !important;
+            color: $black-200;
+
+            &:not(:disabled):hover {
+                background-color: $secondary-50;
+            }
+            .g-button-icon {
+                color: $black-200;
+            }
+        }
+
+        &.g-button-input {
+            background-color: transparent;
+            box-shadow: none;
+            padding: 0.4rem;
+            border-radius: 50%;
+            transition: background-color 0.2s;
+            min-width: 3rem;
+            width: 3rem;
+            height: 3rem;
+
+            @include utils.user-select(none);
+
+            &:not(:disabled):hover {
+                background-color: $secondary-200 !important;
+            }
+
+            .g-button-icon {
+                color: $black-400;
+            }
+
+            &:disabled {
+                background-color: transparent !important;
+                border-color: transparent !important;
+                color: $secondary-500 !important;
+
+                .gipi-icon {
+                    color: $secondary-500 !important;
+                }
+            }
+        }
+    }
+}

package/components/button/index.d.ts

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

package/components/button-group/button-group.component.d.ts

@@ -0,0 +1,39 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, ValidationErrors } from '@angular/forms';
+import { ButtonGroupOption } from './shared/button-group-option.model';
+import * as i0 from "@angular/core";
+export declare class ButtonGroupComponent implements OnChanges {
+    protected readonly _controlUniqueId: string;
+    protected readonly _uniqueId: string;
+    private readonly _changeDetectorRef;
+    id: string;
+    name: string;
+    label: string;
+    help: string;
+    disabled: BooleanInput;
+    required: BooleanInput;
+    private _options;
+    set options(value: ButtonGroupOption[]);
+    get options(): ButtonGroupOption[];
+    private _value;
+    set value(value: string | number | null);
+    get value(): string | number | null;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    _onChange: (value: string | number | null) => void;
+    _onTouched: () => void;
+    _validatorChangeFn: () => void;
+    writeValue(value: string | number | null): void;
+    registerOnChange(fn: (value: string | number | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    validate(control: AbstractControl<string | number | null>): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    protected isOptionDisabled(option: ButtonGroupOption): boolean;
+    onHandleOptionClick(option: ButtonGroupOption): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "gipi-button-group", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "help": { "alias": "help"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "options": { "alias": "options"; "required": true; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_required: unknown;
+}

package/components/button-group/button-group.component.scss

@@ -0,0 +1,89 @@
+@use '../../theming/utils' as utils;
+
+@mixin button-group-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);
+    $black-300: utils.get-color($theme, black, 300);
+    $secondary-100: utils.get-color($theme, secondary, 100);
+    $primary-500: utils.get-color($theme, primary, 500);
+    $primary-600: utils.get-color($theme, primary, 600);
+
+    .g-button-group-label {
+        @include utils.field-label($theme);
+    }
+
+    .g-button-group {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-family: $font-family;
+        color: $font-color;
+        position: relative;
+        overflow: visible;
+        width: 100%;
+        flex: 1;
+    }
+
+    .g-button-group-option-list {
+        display: flex;
+        flex-direction: row;
+        box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1);
+
+        .g-button-group-option {
+            @include utils.button-reset($theme);
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            vertical-align: middle;
+            padding: 1rem 0.6rem;
+            width: 100%;
+            min-width: 3.6rem;
+            max-height: 3.6rem;
+            transition: 0.2s;
+            border: 1px solid transparent;
+            position: relative;
+
+            font-family: $font-family;
+            font-size: $font-size;
+            font-weight: 700;
+            line-height: 100%;
+
+            background-color: transparent;
+            border-color: $black-300;
+            color: $black-300;
+
+            &:first-child {
+                border-top-left-radius: 0.4rem;
+                border-bottom-left-radius: 0.4rem;
+            }
+
+            &:not(:first-child) {
+                border-left: none;
+            }
+
+            &:last-child {
+                border-top-right-radius: 0.4rem;
+                border-bottom-right-radius: 0.4rem;
+            }
+
+            &:not(:disabled):hover {
+                background-color: $secondary-100;
+            }
+
+            &.g-button-group-option-selected {
+                background-color: $primary-500;
+                border-color: $primary-500;
+                color: $white-100;
+
+                &:not(:disabled):hover {
+                    background-color: $primary-600;
+                }
+            }
+        }
+    }
+}

package/components/button-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './button-group.component';
+export * from './shared/button-group-option.model';

package/components/button-group/shared/button-group-option.model.d.ts

@@ -0,0 +1,6 @@
+export declare class ButtonGroupOption {
+    label: string;
+    value: string | number;
+    disabled: boolean | ((object: ButtonGroupOption) => boolean) | null;
+    constructor(data?: Partial<ButtonGroupOption>);
+}

package/components/checkbox/checkbox.component.d.ts

@@ -0,0 +1,74 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+import { Booleanish } from '../../types/booleanish.type';
+import * as i0 from "@angular/core";
+export declare class CheckboxChange {
+    source: CheckboxComponent;
+    checked: boolean;
+}
+export declare enum eCheckboxState {
+    /** The initial state of the component before any user interaction. */
+    INIT = 0,
+    /** The state representing the component when it's becoming checked. */
+    CHECKED = 1,
+    /** The state representing the component when it's becoming unchecked. */
+    UNCHECKED = 2,
+    /** The state representing the component when it's becoming indeterminate. */
+    INDETERMINATE = 3
+}
+export declare class CheckboxComponent implements ControlValueAccessor, Validator, OnChanges, AfterViewInit {
+    _inputRef: ElementRef<HTMLInputElement>;
+    _labelRef?: ElementRef<HTMLInputElement>;
+    private readonly _uniqueId;
+    protected _inputId: string;
+    private _currentCheckState;
+    protected _currentCheckState$: BehaviorSubject<"INIT" | "CHECKED" | "UNCHECKED" | "INDETERMINATE">;
+    private _changeDetectorRef;
+    elementRef: ElementRef<HTMLElement>;
+    id: string;
+    name: string;
+    variant: 'primary' | 'secondary';
+    label: string;
+    help: string;
+    required: boolean;
+    private _disabled;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _checked;
+    get checked(): boolean;
+    set checked(value: boolean);
+    private _indeterminate;
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+    readonly onChange: EventEmitter<CheckboxChange>;
+    readonly onIndeterminate: EventEmitter<boolean>;
+    readonly onFocus: EventEmitter<FocusEvent>;
+    readonly onBlur: EventEmitter<FocusEvent>;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    _onChange: (value: Booleanish) => void;
+    _onTouched: () => void;
+    _validatorChangeFn: () => void;
+    writeValue(value: Booleanish): void;
+    registerOnChange(fn: (value: Booleanish) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    validate(control: AbstractControl<boolean>): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    protected _preventBubblingFromLabel(event: MouseEvent): void;
+    protected _createChangeEvent(isChecked: boolean): CheckboxChange;
+    private _syncIndeterminate;
+    private _transitionCheckState;
+    onHandleClick(): void;
+    onHandleFocus(event: FocusEvent): void;
+    onHandleBlur(event: FocusEvent): void;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "gipi-checkbox", ["gCheckbox"], { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "label": { "alias": "label"; "required": false; }; "help": { "alias": "help"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "onChange": "onChange"; "onIndeterminate": "onIndeterminate"; "onFocus": "onFocus"; "onBlur": "onBlur"; }, never, never, true, never>;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_checked: unknown;
+    static ngAcceptInputType_indeterminate: unknown;
+}

package/components/checkbox/checkbox.component.scss

@@ -0,0 +1,147 @@
+@use '../../theming/utils' as utils;
+
+@mixin checkbox-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);
+    $primary-500: utils.get-color($theme, primary, 500);
+    $secondary-200: utils.get-color($theme, secondary, 200);
+    $secondary-500: utils.get-color($theme, secondary, 500);
+    $secondary-300: utils.get-color($theme, secondary, 300);
+
+    .g-checkbox {
+        display: flex;
+        align-items: center;
+        width: fit-content;
+        gap: 1rem;
+
+        &:has(> input[type='checkbox']:disabled) {
+            cursor: not-allowed !important;
+        }
+
+        > input[type='checkbox'] {
+            appearance: none;
+            width: 1.8rem;
+            height: 1.8rem;
+            border: 2px solid transparent;
+            border-radius: 0.4rem;
+            outline: none;
+            cursor: pointer;
+            background-color: $white-100;
+            position: relative;
+            transition:
+                background-color 0.3s ease,
+                border-color 0.3s ease;
+
+            &.primary {
+                border-color: $primary-500;
+            }
+            &.secondary {
+                border-color: $secondary-300;
+            }
+
+            &:checked::after {
+                content: '✔';
+                display: block;
+                text-align: center;
+                font-family: $font-family;
+                font-size: 1.4rem;
+                font-weight: 400;
+                line-height: 1.6rem;
+                height: 1.6rem;
+
+                &.primary,
+                &.secondary {
+                    color: $white-100;
+                }
+            }
+
+            &[data-state='INDETERMINATE']::after {
+                content: '-';
+                display: block;
+                text-align: center;
+                font-family: $font-family;
+                font-size: 2.6rem;
+                font-weight: 700;
+                line-height: 1.2rem;
+                height: 1.6rem;
+
+                &.primary,
+                &.secondary {
+                    color: $primary-500;
+                }
+            }
+
+            /* Estado "unchecked" */
+            &:not(:checked)[data-state='UNCHECKED'] {
+                color: transparent;
+
+                &.primary {
+                    background-color: $white-100;
+                    border-color: $primary-500;
+                }
+                &.secondary {
+                    background-color: $white-100;
+                    border-color: $secondary-300;
+                }
+            }
+
+            /* Estado "checked" */
+            &:checked,
+            &[data-state='CHECKED'] {
+                color: $white-100;
+
+                &.primary,
+                &.secondary {
+                    background-color: $primary-500;
+                    border-color: $primary-500;
+                }
+            }
+
+            /* Estado "indeterminate" */
+            &[data-state='INDETERMINATE'] {
+                &.primary {
+                    background-color: $white-100;
+                    border-color: $primary-500;
+                    color: $primary-500;
+                }
+                &.secondary {
+                    background-color: $white-100;
+                    border-color: $secondary-300;
+                    color: $secondary-300;
+                }
+            }
+
+            &:disabled {
+                color: $secondary-500 !important;
+                background-color: $secondary-200 !important;
+                border-color: $secondary-500 !important;
+                cursor: not-allowed !important;
+
+                &::after {
+                    color: $secondary-500 !important;
+                }
+            }
+        }
+
+        > label {
+            display: flex;
+            align-items: center;
+            gap: 0.2rem;
+
+            font-family: $font-family;
+            font-size: $font-size;
+            color: $font-color;
+            line-height: 2rem;
+            cursor: pointer;
+
+            @include utils.user-select(none);
+
+            &.disabled {
+                cursor: not-allowed !important;
+                color: $secondary-200 !important;
+            }
+        }
+    }
+}

package/components/checkbox/index.d.ts

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