ui-core-abv 0.1.55 → 0.1.82

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

@@ -36,16 +36,21 @@ export interface FormField {
     minLength?: number;
     maxLength?: number;
     showCounter?: boolean;
+    monthMode?: boolean;
+    monthDay?: 'first' | 'last';
+    fileTypes?: string[] | string;
+    poolEnabledListView?: boolean;
+    poolTitle?: string;
     sliderInterval?: number;
     sliderMarks?: number;
     pattern?: RegExp;
     options?: AppSelectOption[];
-    multyoption?: boolean;
+    multyEnabled?: boolean;
     searchFn?: (query: string) => Observable<any[]>;
     searchDisplayFn?: (item: any) => string;
     searchIsEnabledFn?: (item: any) => boolean;
 }
-export type FieldType = 'text' | 'number' | 'date' | 'time' | 'select' | 'checkbox' | 'switch' | 'textarea' | 'pool' | 'searcher' | 'slider';
+export type FieldType = 'text' | 'number' | 'phone' | 'date' | 'time' | 'select' | 'checkbox' | 'switch' | 'textarea' | 'pool' | 'file' | 'multyselect' | 'searcher' | 'slider';
 export interface FormResult {
     result: boolean;
     form: any;

package/lib/components/dynamic-form/steps-form/step-tabs/step-tabs.component.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class StepTabsComponent {
+export declare class UicStepTabsComponent {
     tabs: string[];
     currentTab: string;
     navigationEnabled: boolean;
@@ -8,6 +8,6 @@ export declare class StepTabsComponent {
     currentTabChange: EventEmitter<string>;
     currentIndex: number;
     changeTab(newTab: string): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<StepTabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StepTabsComponent, "ui-step-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "currentTab": { "alias": "currentTab"; "required": false; }; "navigationEnabled": { "alias": "navigationEnabled"; "required": false; }; "showStepTitle": { "alias": "showStepTitle"; "required": false; }; }, { "currentTabChange": "currentTabChange"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UicStepTabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicStepTabsComponent, "ui-step-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "currentTab": { "alias": "currentTab"; "required": false; }; "navigationEnabled": { "alias": "navigationEnabled"; "required": false; }; "showStepTitle": { "alias": "showStepTitle"; "required": false; }; }, { "currentTabChange": "currentTabChange"; }, never, never, true, never>;
 }

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

@@ -24,6 +24,8 @@ export declare class UicDatePickerComponent extends base {
     tip: string;
     max: string;
     min: string;
+    justMonth: boolean;
+    monthDay: 'last' | 'first';
     calendarTemplate: TemplateRef<any>;
     private overlayRef;
     months: string[];
@@ -38,6 +40,8 @@ export declare class UicDatePickerComponent extends base {
     selectedMonth: null;
     monthWeeks: (Date | null)[][];
     decadeRange: number[];
+    displayValue: string;
+    get inputPlaceholder(): string;
     private readonly overlay;
     private readonly vcr;
     private readonly host;
@@ -60,7 +64,22 @@ export declare class UicDatePickerComponent extends base {
     parseDateLimits(date: string): Date | null;
     cleanInput(): void;
     pickToday(): void;
+    onInputChange(event: Event): void;
+    onInputBlur(): void;
+    onInputKeydown(event: KeyboardEvent): void;
+    writeValue(value: string | null): void;
+    private applyValue;
+    private clearValue;
+    private setCurrentViewDate;
+    private formatDisplay;
+    private parseDisplay;
+    private isWithinLimits;
+    private normalizeDate;
+    private toIsoString;
+    private buildMonthDate;
+    isMonthDisabled(monthIndex: number): boolean;
+    isSelectedMonth(monthIndex: number): boolean;
     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; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "error": { "alias": "error"; "required": false; }; "tip": { "alias": "tip"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; }, {}, never, never, true, 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; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "error": { "alias": "error"; "required": false; }; "tip": { "alias": "tip"; "required": false; }; "max": { "alias": "max"; "required": false; }; "min": { "alias": "min"; "required": false; }; "justMonth": { "alias": "justMonth"; "required": false; }; "monthDay": { "alias": "monthDay"; "required": false; }; }, {}, never, never, true, never>;
 }
 export {};

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

@@ -0,0 +1,53 @@
+import { ButtonColor } from '../../button/button.component';
+import * as i0 from "@angular/core";
+type FileInputValue = {
+    name: string;
+    blob: Blob;
+};
+declare const base: abstract new () => {
+    value: FileInputValue[];
+    valueChange: import("@angular/core").EventEmitter<FileInputValue[]>;
+    onChange: (value: FileInputValue[]) => void;
+    onTouched: () => void;
+    writeValue(obj: FileInputValue[]): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(isDisabled: boolean): void;
+    notifyChange(value: FileInputValue[]): void;
+};
+export declare class UicFileInputComponent extends base {
+    icon: string;
+    iconColor: ButtonColor;
+    internalIcon: string;
+    size: 's' | 'm' | 'l';
+    label: string;
+    error: string;
+    tip: string;
+    disabled: boolean;
+    loading: boolean;
+    multy: boolean;
+    fileTypes: string[] | string | null;
+    private fileInput?;
+    value: FileInputValue[];
+    files: FileInputValue[];
+    isDragging: boolean;
+    get acceptAttribute(): string | null;
+    openFileBrowser(): void;
+    onNativeInputChange(event: Event): void;
+    removeFile(index: number): void;
+    onDragOver(event: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    getIcon(file: FileInputValue): string;
+    onDrop(event: DragEvent): void;
+    writeValue(value: FileInputValue[] | null): void;
+    private processIncomingFiles;
+    private mergeFiles;
+    private applyFiles;
+    private filterAllowedFiles;
+    private matchesAcceptTokens;
+    private isExcelType;
+    private isWordType;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UicFileInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicFileInputComponent, "ui-file-input", 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; }; "loading": { "alias": "loading"; "required": false; }; "multy": { "alias": "multy"; "required": false; }; "fileTypes": { "alias": "fileTypes"; "required": false; }; }, {}, never, ["[counter]"], true, never>;
+}
+export {};

package/lib/components/inputs/phone-input/phone-countries.data.d.ts

@@ -0,0 +1,8 @@
+export interface PhoneCountry {
+    name: string;
+    iso2: string;
+    dialCode: string;
+    priority?: number;
+    areaCodes?: string[];
+}
+export declare const PHONE_COUNTRIES: PhoneCountry[];

package/lib/components/inputs/phone-input/phone-input.component.d.ts

@@ -0,0 +1,72 @@
+import { OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { ButtonColor } from '../../button/button.component';
+import { PhoneCountry } from './phone-countries.data';
+import * as i0 from "@angular/core";
+export interface UicPhoneInputValue {
+    countryIso2: string;
+    dialCode: string;
+    nationalNumber: string;
+    internationalNumber: string;
+}
+type PhoneInputModel = UicPhoneInputValue | null;
+declare const base: abstract new () => {
+    value: PhoneInputModel;
+    valueChange: import("@angular/core").EventEmitter<PhoneInputModel>;
+    onChange: (value: PhoneInputModel) => void;
+    onTouched: () => void;
+    writeValue(obj: PhoneInputModel): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(isDisabled: boolean): void;
+    notifyChange(value: PhoneInputModel): void;
+};
+export declare class UicPhoneInputComponent extends base implements OnChanges, OnDestroy {
+    icon: string;
+    iconColor: ButtonColor;
+    internalIcon: string;
+    size: 's' | 'm' | 'l';
+    label: string;
+    error: string;
+    tip: string;
+    placeholder: string;
+    disabled: boolean;
+    loading: boolean;
+    preferredCountries: string[];
+    flagPath: string;
+    set countries(value: PhoneCountry[]);
+    get countries(): PhoneCountry[];
+    private readonly searchInput?;
+    private readonly dropdownTemplate?;
+    dropdownOpen: boolean;
+    searchTerm: string;
+    phoneNumber: string;
+    selectedCountry: PhoneCountry;
+    filteredCountries: PhoneCountry[];
+    readonly dropdownId: string;
+    private _countries;
+    private readonly host;
+    private readonly overlay;
+    private readonly vcr;
+    private overlayRef?;
+    private readonly overlayPositions;
+    constructor();
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    writeValue(value: PhoneInputModel): void;
+    toggleDropdown(): void;
+    selectCountry(country: PhoneCountry): void;
+    onNumberInput(event: Event): void;
+    onBlur(): void;
+    onSearchChange(event: Event): void;
+    clearSearch(): void;
+    getFlagUrl(iso: string): string;
+    private emitValue;
+    private openDropdown;
+    private closeDropdown;
+    private resetSearch;
+    private resetCountryLists;
+    private getDefaultCountry;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UicPhoneInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicPhoneInputComponent, "ui-phone-input", 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; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "preferredCountries": { "alias": "preferredCountries"; "required": false; }; "flagPath": { "alias": "flagPath"; "required": false; }; "countries": { "alias": "countries"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};

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

@@ -1,5 +1,6 @@
 import { SimpleChanges, TemplateRef } from '@angular/core';
 import { ConnectedPosition } from '@angular/cdk/overlay';
+import { ButtonColor } from '../../button/button.component';
 import * as i0 from "@angular/core";
 type selectId = number | string | null;
 declare const base: abstract new () => {
@@ -15,7 +16,7 @@ declare const base: abstract new () => {
 };
 export declare class UicSelectComponent extends base {
     icon: string;
-    iconColor: 'primary' | 'secondary';
+    iconColor: ButtonColor;
     internalIcon: string;
     size: 's' | 'm' | 'l';
     label: string;

package/lib/components/pool-options/pool-options.component.d.ts

@@ -1,16 +1,21 @@
+import { SimpleChanges } from '@angular/core';
 import { AppSelectOption } from '../inputs/select/select.component';
 import * as i0 from "@angular/core";
 type selectId = number | string;
+type selectedDetailed = {
+    id: selectId;
+    detail?: string;
+};
 declare const base: abstract new () => {
-    value: selectId[];
-    valueChange: import("@angular/core").EventEmitter<selectId[]>;
-    onChange: (value: selectId[]) => void;
+    value: selectedDetailed[];
+    valueChange: import("@angular/core").EventEmitter<selectedDetailed[]>;
+    onChange: (value: selectedDetailed[]) => void;
     onTouched: () => void;
-    writeValue(obj: selectId[]): void;
+    writeValue(obj: selectedDetailed[]): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState?(isDisabled: boolean): void;
-    notifyChange(value: selectId[]): void;
+    notifyChange(value: selectedDetailed[]): void;
 };
 export declare class UicPoolOptionsComponent extends base {
     icon: string;
@@ -22,11 +27,20 @@ export declare class UicPoolOptionsComponent extends base {
     disabled: boolean;
     loading: boolean;
     multy: boolean;
+    enabledListView: boolean;
+    listViewTitle: string;
     options: AppSelectOption[];
-    selectedSet: Set<selectId>;
+    private selectedItems;
+    get selectedValues(): selectedDetailed[];
     updateOptions(id: selectId): void;
-    writeValue(value: selectId[]): void;
+    updateDetail(id: selectId, detail: string): void;
+    writeValue(value?: selectedDetailed[] | selectId[] | null): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    isSelected(id: selectId): boolean;
+    getItemName(id: selectId): selectId;
+    private emitSelectionChange;
+    private normalizeIncomingValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<UicPoolOptionsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UicPoolOptionsComponent, "ui-pool-options", never, { "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "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; }; "loading": { "alias": "loading"; "required": false; }; "multy": { "alias": "multy"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UicPoolOptionsComponent, "ui-pool-options", never, { "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "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; }; "loading": { "alias": "loading"; "required": false; }; "multy": { "alias": "multy"; "required": false; }; "enabledListView": { "alias": "enabledListView"; "required": false; }; "listViewTitle": { "alias": "listViewTitle"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, never, never, true, never>;
 }
 export {};

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

@@ -30,7 +30,6 @@ export declare class UicTableComponent {
     sortAsc: boolean;
     filter: string;
     page: number;
-    ngOnInit(): void;
     getValue(data: TableRowData[], key: string): string;
     getMoreActions(actions: TableButton[]): ActionMenuOption[];
     getFontColor(data: TableRowData[], key: string): string;

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

@@ -7,11 +7,14 @@ export interface TableColums {
     type: ColumnTypes;
     sortEnable?: boolean;
     actions?: TableButton[];
-    moreActions?: TableButton[];
+    moreActions?: {
+        icon?: string;
+        actions: TableButton[];
+    }[];
 }
 export interface TableButton {
     key: string;
-    color: ButtonColor;
+    color?: ButtonColor;
     icon?: string;
     text?: string;
     type?: ButtonType;

package/package.json

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

package/public-api.d.ts

@@ -3,10 +3,13 @@ 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/dynamic-form/steps-form/steps-form.component';
+export * from './lib/components/dynamic-form/steps-form/step-tabs/step-tabs.component';
 export * from './lib/components/inputs/input/input.component';
 export * from './lib/components/inputs/date-picker/date-picker.component';
 export * from './lib/components/inputs/uic-searcher/uic-searcher.component';
+export * from './lib/components/inputs/file-input/file-input.component';
 export * from './lib/components/inputs/select/select.component';
+export * from './lib/components/inputs/phone-input/phone-input.component';
 export * from './lib/components/inputs/multy-select/multy-select.component';
 export * from './lib/components/inputs/time-picker/time-picker.component';
 export * from './lib/components/table/table.component';

package/src/lib/styles/_tokens.scss

@@ -45,8 +45,7 @@
 
   --button-radius: 8px;
   --input-radius: 8px;
-  --input-label-space: 8px;
-
+  
   --border-width-thin: 1px;
   --border-width-thick: 2px;
   
@@ -54,9 +53,11 @@
   --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;
+  --input-label-space: calc( var(--form-ref) * .8 );
 
   --disabled-color: var(--grey-700);
   --disabled-color-placeholder: var(--grey-300);

package/src/lib/styles/_variables.scss

@@ -46,4 +46,6 @@ $skeleton-gradient: linear-gradient(
   var(--grey-100) 75%
 );
 
-$input-heigth: calc( 4 * var(--form-ref));
+$input-heigth: calc( 4 * var(--form-ref));
+$input-fontsize: max(calc( var(--form-ref) + 4px ) , 14px) ;
+$input-radius: var(--input-radius);