ui-core-abv 0.0.7 → 0.0.90

package/lib/components/dynamic-form/form.models.d.ts

@@ -19,6 +19,7 @@ export interface FormField {
     label: string;
     icon?: string;
     tooltip?: string;
+    tip?: string;
     colSpan?: number;
     newLine?: boolean;
     description?: string;
@@ -26,10 +27,12 @@ export interface FormField {
     required?: boolean;
     min?: number;
     max?: number;
+    sliderInterval?: number;
+    sliderMarks?: number;
     pattern?: RegExp;
     options?: AppSelectOption[];
 }
-export type FieldType = 'text' | 'number' | 'select' | 'date' | 'checkbox';
+export type FieldType = 'text' | 'number' | 'date' | 'select' | 'search' | 'checkbox' | 'switch' | 'slider';
 export interface FormResult {
     result: boolean;
     form: any;

package/lib/components/{checkbox → inputs/checkbox}/checkbox.component.d.ts

@@ -1,3 +1,4 @@
+import { ButtonColor } from '../../button/button.component';
 import * as i0 from "@angular/core";
 declare const base: abstract new () => {
     value: boolean;
@@ -11,12 +12,16 @@ declare const base: abstract new () => {
     notifyChange(value: boolean): void;
 };
 export declare class UicCheckboxComponent extends base {
+    icon: string;
+    iconColor: ButtonColor;
     label: string;
+    tip: string;
+    type: 'check' | 'switch';
     placeholder: string;
     disabled: boolean;
     loading: boolean;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<UicCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UicCheckboxComponent, "ui-checkbox", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicCheckboxComponent, "ui-checkbox", never, { "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "label": { "alias": "label"; "required": false; }; "tip": { "alias": "tip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, {}, never, never, true, never>;
 }
 export {};

package/lib/components/inputs/date-picker/date-picker.component.d.ts

@@ -0,0 +1,66 @@
+import { TemplateRef } from '@angular/core';
+import { ConnectedPosition } from '@angular/cdk/overlay';
+import { ButtonColor } from '../../button/button.component';
+import * as i0 from "@angular/core";
+type CalendarView = 'days' | 'months' | 'years';
+declare const base: abstract new () => {
+    value: string;
+    valueChange: import("@angular/core").EventEmitter<string>;
+    onChange: (value: string) => void;
+    onTouched: () => void;
+    writeValue(obj: string): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(isDisabled: boolean): void;
+    notifyChange(value: string): void;
+};
+export declare class UicDatePickerComponent extends base {
+    icon: string;
+    iconColor: ButtonColor;
+    internalIcon: string;
+    label: string;
+    error: string;
+    tip: string;
+    disabled: boolean;
+    max: string;
+    min: string;
+    calendarTemplate: TemplateRef<any>;
+    private overlayRef;
+    months: string[];
+    today: Date;
+    currentYear: number;
+    maxDate: Date | null;
+    minDate: Date | null;
+    view: CalendarView;
+    paintedDate: Date | null;
+    selectedDate: Date;
+    selectedYear: number;
+    selectedMonth: null;
+    monthWeeks: (Date | null)[][];
+    decadeRange: number[];
+    private readonly overlay;
+    private readonly vcr;
+    private readonly host;
+    ngOnInit(): void;
+    overlayPositions: ConnectedPosition[];
+    openCalendar(): void;
+    closeCalendar(): void;
+    get monthName(): string;
+    getDecadeRange(): number[];
+    getWeeks(): (Date | null)[][];
+    prev(): void;
+    next(): void;
+    changeView(): void;
+    selectYear(year: number): void;
+    selectMonth(monthIndex: number): void;
+    selectDate(date: Date): void;
+    isToday(day: Date | null): boolean;
+    isPainted(day: Date | null): boolean;
+    isThisMonth(m: string): boolean;
+    parseDateLimits(date: string): Date | null;
+    cleanInput(): void;
+    pickToday(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UicDatePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicDatePickerComponent, "ui-date-picker", never, { "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "internalIcon": { "alias": "internalIcon"; "required": false; }; "label": { "alias": "label"; "required": false; }; "error": { "alias": "error"; "required": false; }; "tip": { "alias": "tip"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};

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

@@ -1,4 +1,4 @@
-import { ElementRef } from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import { ConnectedPosition } from '@angular/cdk/overlay';
 import * as i0 from "@angular/core";
 declare const base: abstract new () => {
@@ -20,23 +20,23 @@ export declare class UicSelectComponent extends base {
     label: string;
     error: string;
     tip: string;
+    showSubtitle: boolean;
+    emptyText: string;
     disabled: boolean;
     nullable: boolean;
     options: AppSelectOption[];
-    showSubtitle: boolean;
+    dropdownTemplate: TemplateRef<any>;
+    private overlayRef;
     overlayPositions: ConnectedPosition[];
-    open: boolean;
-    emptyText: string;
-    private readonly renderer;
-    toggleButton: ElementRef;
-    private unlistener;
+    private readonly overlay;
+    private readonly vcr;
+    private readonly host;
     ngOnInit(): void;
     openList(): void;
     selectOption(option: AppSelectOption | null): void;
     closeList(): void;
-    openListOverlay(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<UicSelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UicSelectComponent, "ui-select", never, { "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "internalIcon": { "alias": "internalIcon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "error": { "alias": "error"; "required": false; }; "tip": { "alias": "tip"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "nullable": { "alias": "nullable"; "required": false; }; "options": { "alias": "options"; "required": false; }; "showSubtitle": { "alias": "showSubtitle"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicSelectComponent, "ui-select", never, { "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "internalIcon": { "alias": "internalIcon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "label": { "alias": "label"; "required": false; }; "error": { "alias": "error"; "required": false; }; "tip": { "alias": "tip"; "required": false; }; "showSubtitle": { "alias": "showSubtitle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "nullable": { "alias": "nullable"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, never, never, true, never>;
 }
 export interface AppSelectOption {
     id?: string | number | null;

package/lib/components/{toggle-button → inputs/toggle-button}/toggle-button.component.d.ts

@@ -5,7 +5,8 @@ export declare class UicSwichComponent {
     checkedChange: EventEmitter<boolean>;
     disabled: boolean;
     placeholder: string;
+    label: string;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<UicSwichComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UicSwichComponent, "ui-switch", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicSwichComponent, "ui-switch", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
 }

package/lib/components/inputs/ui-slider/ui-slider.component.d.ts

@@ -0,0 +1,38 @@
+import { ButtonColor } from '../../button/button.component';
+import * as i0 from "@angular/core";
+declare const base: abstract new () => {
+    value: number;
+    valueChange: import("@angular/core").EventEmitter<number>;
+    onChange: (value: number) => void;
+    onTouched: () => void;
+    writeValue(obj: number): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(isDisabled: boolean): void;
+    notifyChange(value: number): void;
+};
+export declare class UicSliderComponent extends base {
+    icon: string;
+    iconColor: ButtonColor;
+    label: string;
+    error: string;
+    tip: string;
+    min: number;
+    max: number;
+    step: number;
+    markerCount: number;
+    markers: number[];
+    disabled: boolean;
+    loading: boolean;
+    ngOnInit(): void;
+    get percent(): number;
+    updateFromClientX(clientX: number, el: HTMLElement): void;
+    dragging: boolean;
+    private activeTrack?;
+    onMouseDown(event: MouseEvent, track: HTMLElement): void;
+    onMouseMove(event: MouseEvent): void;
+    onMouseUp(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UicSliderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicSliderComponent, "ui-slider", never, { "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "label": { "alias": "label"; "required": false; }; "error": { "alias": "error"; "required": false; }; "tip": { "alias": "tip"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "markerCount": { "alias": "markerCount"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};

package/lib/components/push-alerts/alert-container/alert-container.component.d.ts

@@ -2,12 +2,12 @@ import { OnInit } from '@angular/core';
 import { Alert } from '../alert.model';
 import { UicPushAlertService } from '../../../services/push-alert.service';
 import * as i0 from "@angular/core";
-export declare class UiAlertContainerComponent implements OnInit {
+export declare class UicAlertContainerComponent implements OnInit {
     private readonly alertService;
     alerts: Alert[];
     constructor(alertService: UicPushAlertService);
     ngOnInit(): void;
     dismis(id: number): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<UiAlertContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UiAlertContainerComponent, "lib-alert-container", never, {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UicAlertContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicAlertContainerComponent, "ui-alert-container", never, {}, {}, never, never, true, never>;
 }

package/lib/components/push-alerts/alert.model.d.ts

@@ -1,13 +1,13 @@
 export interface Alert {
     id: number;
     message: string;
+    type: 'success' | 'error' | 'warning' | 'info';
     title?: string;
     icon?: string;
     okButtonText?: string;
     showProgressBar?: boolean;
     cancelButtonText?: string;
     style?: 'filled' | 'bordered';
-    type?: 'success' | 'error' | 'warning' | 'info';
     duration?: number;
 }
 export type AlertConfigParams = Omit<Alert, 'id'>;

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

@@ -1,6 +1,7 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class UicTablePaginationComponent {
+    buttonSize: 's' | 'm' | 'l';
     currentPage: number;
     totalPages: number;
     size: number;
@@ -12,5 +13,5 @@ export declare class UicTablePaginationComponent {
     get pages(): (number | string)[];
     changePage(newPage: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<UicTablePaginationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UicTablePaginationComponent, "uic-table-pagination", never, { "currentPage": { "alias": "currentPage"; "required": false; }; "totalPages": { "alias": "totalPages"; "required": false; }; "size": { "alias": "size"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "pageChange": "pageChange"; "sizeChange": "sizeChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicTablePaginationComponent, "uic-table-pagination", never, { "buttonSize": { "alias": "buttonSize"; "required": false; }; "currentPage": { "alias": "currentPage"; "required": false; }; "totalPages": { "alias": "totalPages"; "required": false; }; "size": { "alias": "size"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "pageChange": "pageChange"; "sizeChange": "sizeChange"; }, never, never, true, never>;
 }

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

@@ -7,6 +7,8 @@ export declare class UicTableComponent {
     loading: boolean;
     pages: number;
     size: number;
+    squeletonRows: number;
+    buttonSize: 'm' | 'l' | 's';
     highlightedId: string | number;
     headerText: string;
     totalItems: number;
@@ -27,11 +29,11 @@ export declare class UicTableComponent {
     page: number;
     getValue(data: TableRowData[], key: string): string | number;
     getFontColor(data: TableRowData[], key: string): string;
-    getBackgroundColor(data: TableRowData[], key: string): import("./table.models").BackgroundColors;
+    getBackgroundColor(data: TableRowData[], key: string): import("ui-core-abv").BackgroundColors;
     isValidRule(data: TableRowData[], key: string[] | undefined): boolean;
     getIcon(data: TableRowData[], key: string): string;
-    getList(data: TableRowData[], key: string): import("./table.models").TableList[];
-    getUser(data: TableRowData[], key: string): import("./table.models").TableUser | undefined;
+    getList(data: TableRowData[], key: string): import("ui-core-abv").TableList[];
+    getUser(data: TableRowData[], key: string): import("ui-core-abv").TableUser | undefined;
     sortClick(key: string): void;
     sizeChabge(newSize: number): void;
     pageChage(newPage: number): void;
@@ -45,5 +47,5 @@ export declare class UicTableComponent {
     doAction(rowId: string | number, key: string): void;
     resetCheckedIds(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<UicTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UicTableComponent, "ui-table", never, { "columns": { "alias": "columns"; "required": false; }; "data": { "alias": "data"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "pages": { "alias": "pages"; "required": false; }; "size": { "alias": "size"; "required": false; }; "highlightedId": { "alias": "highlightedId"; "required": false; }; "headerText": { "alias": "headerText"; "required": false; }; "totalItems": { "alias": "totalItems"; "required": false; }; "searchEnabled": { "alias": "searchEnabled"; "required": false; }; "searchLabel": { "alias": "searchLabel"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "showPagination": { "alias": "showPagination"; "required": false; }; "showEmptyMessage": { "alias": "showEmptyMessage"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; }, { "action": "action"; "update": "update"; "checkedChange": "checkedChange"; }, never, ["[actions]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicTableComponent, "ui-table", never, { "columns": { "alias": "columns"; "required": false; }; "data": { "alias": "data"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "pages": { "alias": "pages"; "required": false; }; "size": { "alias": "size"; "required": false; }; "squeletonRows": { "alias": "squeletonRows"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; "highlightedId": { "alias": "highlightedId"; "required": false; }; "headerText": { "alias": "headerText"; "required": false; }; "totalItems": { "alias": "totalItems"; "required": false; }; "searchEnabled": { "alias": "searchEnabled"; "required": false; }; "searchLabel": { "alias": "searchLabel"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "showPagination": { "alias": "showPagination"; "required": false; }; "showEmptyMessage": { "alias": "showEmptyMessage"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; }, { "action": "action"; "update": "update"; "checkedChange": "checkedChange"; }, never, ["[actions]"], true, never>;
 }

package/lib/components/tiny-alert/tiny-alert.component.d.ts

@@ -11,5 +11,5 @@ export declare class TinyAlertComponent {
     response: AlertResponseData;
     close(value: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TinyAlertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TinyAlertComponent, "lib-tiny-alert", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TinyAlertComponent, "ui-tiny-alert", never, {}, {}, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-core-abv",
-  "version": "0.0.7",
+  "version": "0.0.90",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

package/public-api.d.ts

@@ -1,13 +1,16 @@
 export * from './lib/components/button/button.component';
-export * from './lib/components/checkbox/checkbox.component';
+export * from './lib/components/inputs/checkbox/checkbox.component';
+export * from './lib/components/inputs/toggle-button/toggle-button.component';
 export * from './lib/components/dynamic-form/form-wrapper/form-wrapper.component';
 export * from './lib/components/inputs/input/input.component';
+export * from './lib/components/inputs/date-picker/date-picker.component';
 export * from './lib/components/inputs/searcher/searcher.component';
 export * from './lib/components/inputs/select/select.component';
 export * from './lib/components/table/table.component';
-export * from './lib/components/toggle-button/toggle-button.component';
+export * from './lib/components/table/table.models';
 export * from './lib/components/skeleton-loader/skeleton-loader.component';
 export * from './lib/components/push-alerts/alert-container/alert-container.component';
+export * from './lib/components/inputs/ui-slider/ui-slider.component';
 export * from './lib/animations/animatios.index';
 export * from './lib/components/dynamic-form/form.models';
 export * from './lib/services/modal.service';

package/src/lib/styles/_tokens.scss

@@ -37,8 +37,8 @@
   @each $shade, $color in $yellow {
     --yellow-#{$shade}: #{$color};
   }
-  
   --white: #fff;
+  --secondary-alpha: #8130c464;
 
   --border-radius-sm: 4px;
   --border-radius-md: 8px;
@@ -50,4 +50,13 @@
 
   --border-width-thin: 1px;
   --border-width-thick: 2px;
+  
+  // CONTEXTUAL
+  --table-header-background: var(--grey-200);
+  --table-header-color: var(--grey-900);
+  --table-border-color: var(--grey-300);
+  --table-spacing-ref: 10px;
+  --design-size-ref:10px; 
+  --form-ref: 10px;
+
 }

package/src/lib/styles/_variables.scss

@@ -1,5 +1,4 @@
-$focus-shadow: 0 0 0 3px rgba(var(--secondary-400), .4);
-
+$focus-shadow: 0 0 0 3px var(--secondary-alpha);
 
 // ==========  TYPOGRAPHY ==========
 $font-family-base: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
@@ -45,4 +44,6 @@ $skeleton-gradient: linear-gradient(
   var(--grey-100) 25%,
   var(--grey-200) 50%,
   var(--grey-100) 75%
-);
+);
+
+$input-heigth: calc( 4 * var(--form-ref));