@iamgld/ui 1.19.10 → 1.20.2

package/lib/components/buttons/dropdown-button/dropdown-button.component.d.ts

@@ -1,3 +1,4 @@
+import { ElementRef } from '@angular/core';
 import { Icons } from '../../../models';
 import * as i0 from "@angular/core";
 export declare class DropdownButtonComponent {
@@ -13,6 +14,7 @@ export declare class DropdownButtonComponent {
     disabled: import("@angular/core").WritableSignal<boolean>;
     error: import("@angular/core").WritableSignal<boolean>;
     selected: import("@angular/core").Signal<boolean>;
+    buttonChild: import("@angular/core").Signal<ElementRef<any> | undefined>;
     select(value: unknown): void;
     keyup(value: unknown): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownButtonComponent, never>;

package/lib/components/buttons/dropdown-menu/dropdown-menu.component.d.ts

@@ -16,6 +16,7 @@ export declare class DropdownMenuComponent implements AfterContentInit {
     full: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
     direction: import("@angular/core").InputSignal<"left" | "right">;
     background: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    selected: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
     initialValue: import("@angular/core").InputSignal<unknown>;
     changeValue: import("@angular/core").OutputEmitterRef<unknown>;
     changeFocus: import("@angular/core").OutputEmitterRef<boolean>;
@@ -25,5 +26,5 @@ export declare class DropdownMenuComponent implements AfterContentInit {
     updateCurrentInChildren(value: unknown): void;
     updateErrorInChildren(error: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropdownMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownMenuComponent, "gld-dropdown-menu", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "moveTopToBottom": { "alias": "moveTopToBottom"; "required": false; "isSignal": true; }; "moveLeftToRight": { "alias": "moveLeftToRight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "full": { "alias": "full"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "initialValue": { "alias": "initialValue"; "required": false; "isSignal": true; }; }, { "changeValue": "changeValue"; "changeFocus": "changeFocus"; }, ["dropdownButtonChildren"], ["*", "gld-dropdown-button"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownMenuComponent, "gld-dropdown-menu", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": true; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "moveTopToBottom": { "alias": "moveTopToBottom"; "required": false; "isSignal": true; }; "moveLeftToRight": { "alias": "moveLeftToRight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "full": { "alias": "full"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "background": { "alias": "background"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "initialValue": { "alias": "initialValue"; "required": false; "isSignal": true; }; }, { "changeValue": "changeValue"; "changeFocus": "changeFocus"; }, ["dropdownButtonChildren"], ["*", "gld-dropdown-button"], true, never>;
 }

package/lib/components/controls/textarea/textarea.component.d.ts

@@ -1,6 +1,6 @@
 import { OnInit } from '@angular/core';
 import { ControlValueAccessor, FormControl } from '@angular/forms';
-import { InputType } from '../../../models/controls';
+import { InputType } from '../../../models';
 import * as i0 from "@angular/core";
 export declare class TextareaComponent implements ControlValueAccessor, OnInit {
     #private;

package/lib/components/index.d.ts

@@ -1,20 +1,23 @@
-export * from './icon/icon.component';
-export * from './image/image.component';
-export * from './loaders/loader/loader.component';
-export * from './buttons/button/button.component';
-export * from './buttons/link/link.component';
-export * from './buttons/icon-button/icon-button.component';
-export * from './buttons/dropdown-menu/dropdown-menu.component';
-export * from './buttons/dropdown-button/dropdown-button.component';
-export * from './buttons/toggle-group/toggle-group.component';
-export * from './buttons/toggle-button/toggle-button.component';
-export * from './controls/input-date/input-date.component';
-export * from './controls/input-error/input-error.component';
-export * from './controls/input-hint/input-hint.component';
-export * from './controls/input/input.component';
-export * from './controls/radio-button/radio-button.component';
-export * from './controls/radio-group/radio-group.component';
-export * from './controls/select-option/select-option.component';
-export * from './controls/select/select.component';
-export * from './controls/textarea/textarea.component';
-export * from './tile/tile.component';
+export { IconComponent } from './icon/icon.component';
+export { ButtonComponent } from './buttons/button/button.component';
+export { IconButtonComponent } from './buttons/icon-button/icon-button.component';
+export { LinkComponent } from './buttons/link/link.component';
+export { DropdownButtonComponent } from './buttons/dropdown-button/dropdown-button.component';
+export { DropdownMenuComponent } from './buttons/dropdown-menu/dropdown-menu.component';
+export { ToggleButtonComponent } from './buttons/toggle-button/toggle-button.component';
+export { ToggleGroupComponent } from './buttons/toggle-group/toggle-group.component';
+export { InputComponent } from './controls/input/input.component';
+export { InputDateComponent } from './controls/input-date/input-date.component';
+export { InputHintComponent } from './controls/input-hint/input-hint.component';
+export { InputErrorComponent } from './controls/input-error/input-error.component';
+export { TextareaComponent } from './controls/textarea/textarea.component';
+export { RadioButtonComponent } from './controls/radio-button/radio-button.component';
+export { RadioGroupComponent } from './controls/radio-group/radio-group.component';
+export { SelectOptionComponent } from './controls/select-option/select-option.component';
+export { SelectComponent } from './controls/select/select.component';
+export { ImageComponent } from './image/image.component';
+export { LoaderComponent } from './loaders/loader/loader.component';
+export { TablePaginationComponent } from './tables/table-pagination/table-pagination.component';
+export { TableSearchComponent } from './tables/table-search/table-search.component';
+export { TableComponent } from './tables/table/table.component';
+export { TileComponent } from './tile/tile.component';

package/lib/components/tables/table/table.component.d.ts

@@ -0,0 +1,43 @@
+import { Icons, TableColumn, TableColumnAction, TableColumnActionOutput, TableColumnToTableColumns } from '../../../models';
+import * as i0 from "@angular/core";
+export declare class TableComponent {
+    #private;
+    readonly Icons: typeof Icons;
+    tableColumns: import("@angular/core").InputSignal<TableColumn[]>;
+    emptyMessage: import("@angular/core").InputSignal<string>;
+    tableHeight: import("@angular/core").InputSignal<string>;
+    loading: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    selects: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    selectsAll: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    search: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    pagination: import("@angular/core").InputSignalWithTransform<boolean, string | boolean>;
+    tableColumnAction: import("@angular/core").OutputEmitterRef<TableColumnActionOutput>;
+    tableColumnsToShow: import("@angular/core").Signal<TableColumn[]>;
+    tableColumnActions: import("@angular/core").WritableSignal<TableColumnAction[]>;
+    constructor();
+    tableActionFunction({ tableColumnActionAsEvent, tableColumns, index }: TableActionFunction): void;
+    changeValue(event: unknown): void;
+    buildTableColumns<T>({ tableColumnStructures, tableColumnActions, dataStructures, }: TableColumnToTableColumns): TableColumn[];
+    buildDataStructure({ index }: {
+        index: number;
+    }): {
+        name?: string | undefined;
+        label?: string | undefined;
+        width?: string | undefined;
+        minWidth?: string | undefined;
+        maxWidth?: string | undefined;
+        template?: import("@angular/core").TemplateRef<unknown> | undefined;
+        justify?: "left" | "right" | "center" | undefined;
+        hide?: boolean | undefined;
+        transform?: ((value: unknown) => string | number) | undefined;
+        values?: unknown[] | undefined;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "gld-table", never, { "tableColumns": { "alias": "tableColumns"; "required": true; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "tableHeight": { "alias": "tableHeight"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "selects": { "alias": "selects"; "required": false; "isSignal": true; }; "selectsAll": { "alias": "selectsAll"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; }, { "tableColumnAction": "tableColumnAction"; }, never, ["gld-table-search", "gld-table-pagination"], true, never>;
+}
+interface TableActionFunction {
+    tableColumnActionAsEvent: unknown;
+    tableColumns: TableColumn[];
+    index: number;
+}
+export {};

package/lib/components/tables/table-pagination/table-pagination.component.d.ts

@@ -0,0 +1,16 @@
+import { Icons, TablePagination } from '../../../models';
+import * as i0 from "@angular/core";
+export declare class TablePaginationComponent {
+    readonly Icons: typeof Icons;
+    pagination: import("@angular/core").InputSignal<TablePagination>;
+    page: import("@angular/core").OutputEmitterRef<number>;
+    changeToNext: import("@angular/core").OutputEmitterRef<number>;
+    changeToPrevious: import("@angular/core").OutputEmitterRef<number>;
+    currentPage: import("@angular/core").WritableSignal<number>;
+    maxPages: import("@angular/core").Signal<number>;
+    constructor();
+    nextPage(): void;
+    previousPage(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TablePaginationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TablePaginationComponent, "gld-table-pagination", never, { "pagination": { "alias": "pagination"; "required": true; "isSignal": true; }; }, { "page": "page"; "changeToNext": "changeToNext"; "changeToPrevious": "changeToPrevious"; }, never, never, true, never>;
+}

package/lib/components/tables/table-search/table-search.component.d.ts

@@ -0,0 +1,14 @@
+import { Icons, TableSearchOutput } from '../../../models';
+import * as i0 from "@angular/core";
+export declare class TableSearchComponent {
+    #private;
+    readonly Icons: typeof Icons;
+    placeholder: import("@angular/core").InputSignal<string>;
+    width: import("@angular/core").InputSignal<string>;
+    debounceTime: import("@angular/core").InputSignal<number>;
+    searching: import("@angular/core").OutputEmitterRef<TableSearchOutput>;
+    control: import("@angular/forms").FormControl<string | null>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableSearchComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableSearchComponent, "gld-table-search", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; }, { "searching": "searching"; }, never, never, true, never>;
+}

package/lib/directives/index.d.ts

@@ -1,2 +1,2 @@
-export * from './dropdown-menu-template/dropdown-menu-template.directive';
-export * from './input-error-message/input-error-message.directive';
+export { DropdownMenuTemplateDirective } from './dropdown-menu-template/dropdown-menu-template.directive';
+export { InputErrorMessageDirective } from './input-error-message/input-error-message.directive';

package/lib/models/icon/icon.model.d.ts

@@ -30,7 +30,10 @@ export declare enum Icons {
     gitRepositoryPrivateLine = "ri-git-repository-private-line",
     starLine = "ri-star-line",
     calendar2Line = "ri-calendar-2-line",
-    macLine = "ri-mac-line"
+    macLine = "ri-mac-line",
+    more2Fill = "ri-more-2-fill",
+    editLine = "ri-edit-line",
+    deleteBinLine = "ri-delete-bin-line"
 }
 export declare enum IconsSize {
     tiny = "tiny",

package/lib/models/index.d.ts

@@ -1,8 +1,9 @@
-export * from './buttons/button.model';
-export * from './buttons/link.model';
-export * from './buttons/dropdown.model';
-export * from './controls/input.model';
-export * from './controls/radio.model';
-export * from './controls/select.model';
-export * from './icon/icon.model';
-export * from './tiles/tile.model';
+export { ButtonColor, ButtonSize } from './buttons/button.model';
+export { DropdownType, DropdownDirection } from './buttons/dropdown.model';
+export { LinkType, LinkAlign } from './buttons/link.model';
+export type { InputType, InputValue } from './controls/input.model';
+export { RadioDirection } from './controls/radio.model';
+export { SelectType } from './controls/select.model';
+export { Icons, IconsSize, IconsSpace } from './icon/icon.model';
+export { type TableColumn, type TableColumnStructure, type TableColumnToTableColumns, type TableColumnAction, type TableColumnActionOutput, type TableSearchOutput, type TablePagination, TableColumnActionType, TableSearchAction } from './tables/table.model';
+export { TileColor, TilePaddingSize } from './tiles/tile.model';

package/lib/models/tables/table.model.d.ts

@@ -0,0 +1,59 @@
+import { TemplateRef } from '@angular/core';
+import { Icons } from '../icon/icon.model';
+export interface TableColumn {
+    name: string;
+    label: string;
+    width: string;
+    minWidth: string;
+    maxWidth: string;
+    template: TemplateRef<unknown> | undefined;
+    justify: 'left' | 'center' | 'right';
+    hide: boolean;
+    transform: (value: unknown) => string | number;
+    values: unknown[];
+}
+export interface TableColumnStructure {
+    name: string;
+    label: string;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    template?: TemplateRef<unknown>;
+    justify?: 'left' | 'center' | 'right';
+    hide?: boolean;
+    transform?: (value: unknown) => string | number;
+}
+export interface TableColumnToTableColumns {
+    tableColumnStructures: TableColumnStructure[];
+    tableColumnActions: TableColumnAction[];
+    dataStructures: unknown[];
+}
+export interface TableColumnAction {
+    label: string;
+    icon: Icons;
+    type: TableColumnActionType;
+    showWhen: (dataStructure: unknown) => boolean;
+}
+export declare enum TableColumnActionType {
+    show = "show",
+    open = "open",
+    update = "update",
+    delete = "delete"
+}
+export interface TableColumnActionOutput {
+    tableColumnAction: TableColumnAction;
+    object: unknown;
+}
+export interface TableSearchOutput {
+    action: TableSearchAction;
+    searching: string;
+}
+export declare enum TableSearchAction {
+    searching = "searching",
+    cleared = "cleared"
+}
+export interface TablePagination {
+    itemsPerPage: number;
+    initialPage: number;
+    maxItems: number;
+}

package/lib/utils/date/date.util.d.ts

@@ -1,4 +1,5 @@
 export declare function formatDateToISO(outerDate: string | Date): string | null;
+export declare function formatDateFromISOToDDMMYYYY(dateAsString: string): string | null;
 export declare function formatDateFromISOToYYYYMMDD(dateAsString: string | null): string | null;
 export declare function getDateWithOffsetInYears({ years }: {
     years: number;

package/lib/utils/index.d.ts

@@ -1,2 +1,2 @@
-export * from './date/date.util';
-export * from './string/string.util';
+export { formatDateToISO, formatDateFromISOToDDMMYYYY, formatDateFromISOToYYYYMMDD, getDateWithOffsetInYears } from './date/date.util';
+export { capitalizeFirstLetter } from './string/string.util';

package/lib/validators/index.d.ts

@@ -1,9 +1,9 @@
-export * from './is-date/is-date.validator';
-export * from './is-document/is-document.validator';
-export * from './is-email/is-email.validator';
-export * from './is-form-select-item/is-form-select-item.validator';
-export * from './is-license-plate/is-license-plate.validator';
-export * from './is-natural-number/is-natural-number.validator';
-export * from './minimum-age/minimum-age.validator';
-export * from './must-match/must-match.validator';
-export * from './must-unmatch/must-unmatch.validator';
+export { isDateValidator } from './is-date/is-date.validator';
+export { isDocumentValidator } from './is-document/is-document.validator';
+export { isEmailValidator } from './is-email/is-email.validator';
+export { isFormSelectItemValidator } from './is-form-select-item/is-form-select-item.validator';
+export { isLicensePlateValidator } from './is-license-plate/is-license-plate.validator';
+export { isNaturalNumberValidator } from './is-natural-number/is-natural-number.validator';
+export { minimumAgeValidator } from './minimum-age/minimum-age.validator';
+export { mustMatchValidator } from './must-match/must-match.validator';
+export { mustUnmatchValidator } from './must-unmatch/must-unmatch.validator';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@iamgld/ui",
-  "version": "1.19.10",
+  "version": "1.20.2",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/common": "19.1.5",
-    "@angular/core": "19.1.5"
+    "@angular/common": "19.1.7",
+    "@angular/core": "19.1.7"
   },
   "dependencies": {
     "tslib": "2.8.1"

package/public/styles/layers/_setting.scss

@@ -115,7 +115,7 @@
   --gld-darkblue-transparent--010: #{rgba(#101827, 0.1)};
 
   // Borders
-  --gld-border-size: 1px;
+  --gld-border-size: 2px;
 
   // Animations
   --gld-animation-time--150: 150ms;

package/public/styles/layers/_tools.scss

@@ -90,25 +90,38 @@
 @mixin scrollbar {
   // Chrome, Edge y Safari.
   &::-webkit-scrollbar {
-    width: var(--spacing--xxs);
-    height: var(--spacing--xxs);
+    width: var(--gld-spacing--xxs);
+    height: var(--gld-spacing--xxs);
   }
 
   &::-webkit-scrollbar-track {
-    background-color: transparent; // color of the tracking area
+    background: transparent; // color of the tracking area
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: var(--green); // color of the scroll thumb
-    border-radius: var(--radius--s); // roundness of the scroll thumb
+    background: light-dark(
+      var(--gray-transparent--040),
+      var(--gray-transparent--020)
+    ); // color of the scroll thumb
+    will-change: background;
+    transition: background var(--gld-animation-time--150) ease;
+    border-radius: var(--gld-radius--s); // roundness of the scroll thumb
     // border: 2px solid Palette(Primary); // creates padding around scroll thumb
+
+    &:hover {
+      background: light-dark(
+        var(--gray-transparent--060),
+        var(--gray-transparent--040)
+      ); // color of the scroll thumb on hover
+    }
   }
 
+  // Firefox
   overflow: auto;
   scrollbar-width: thin;
-
   // color of the scroll thumb, color of the tracking area
-  scrollbar-color: var(--green) transparent;
+  scrollbar-color: light-dark(var(--gray-transparent--040), var(--gray-transparent--020))
+    transparent;
   scroll-behavior: smooth;
 }
 

package/lib/models/controls/index.d.ts

@@ -1,3 +0,0 @@
-export * from './select.model';
-export * from './radio.model';
-export * from './input.model';