chrv-components 1.11.37 → 1.11.39

package/index.d.ts

@@ -1,8 +1,8 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, ViewContainerRef, Type, ApplicationRef, EnvironmentInjector, ComponentRef, AfterViewInit, OnDestroy, EventEmitter, ElementRef, AfterViewChecked, AfterContentChecked, QueryList, AfterContentInit, InjectionToken } from '@angular/core';
+import { OnInit, ViewContainerRef, Type, ApplicationRef, EnvironmentInjector, ComponentRef, AfterViewInit, OnDestroy, ElementRef, AfterViewChecked, AfterContentChecked, QueryList, AfterContentInit, InjectionToken } from '@angular/core';
 import { Router, UrlTree } from '@angular/router';
 import * as rxjs from 'rxjs';
-import { Observable, Subject, Subscription, BehaviorSubject } from 'rxjs';
+import { Observable, Subject, BehaviorSubject } from 'rxjs';
 import * as _angular_forms from '@angular/forms';
 import { AbstractControl, ValidationErrors, ValidatorFn, AsyncValidatorFn, FormControl, FormGroup, ControlValueAccessor, NgControl, Validator } from '@angular/forms';
 import { MatAutocomplete } from '@angular/material/autocomplete';
@@ -46,12 +46,12 @@ declare class ChrButtonComponent {
     readonly textColor: _angular_core.InputSignal<Color | undefined>;
     readonly flat: _angular_core.InputSignal<boolean>;
     readonly predicate: _angular_core.InputSignal<boolean | undefined>;
-    readonly type: _angular_core.InputSignal<"fixed" | "small" | "none" | "responsive" | "table" | "full">;
+    readonly type: _angular_core.InputSignal<"none" | "responsive" | "table" | "full" | "fixed" | "small">;
     readonly href: _angular_core.InputSignal<string | undefined>;
     readonly target: _angular_core.InputSignal<"_blank" | "_parent" | "_self" | "_top" | undefined>;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly tooltip: _angular_core.InputSignal<string | undefined>;
-    readonly tooltipPosition: _angular_core.InputSignal<"left" | "right" | "above" | "below" | "before" | "after" | undefined>;
+    readonly tooltipPosition: _angular_core.InputSignal<"above" | "below" | "left" | "right" | "before" | "after" | undefined>;
     constructor();
     doClick: () => void;
     getBackgroundColor: (color: Color) => string;
@@ -240,6 +240,19 @@ declare function SyncValidatorToAsync(validator: ValidatorFn): AsyncValidatorFn;
 declare function getValidators(rules?: IControlValidation[]): ValidatorFn[];
 declare function getAsyncValidators(rules?: IControlValidation[]): AsyncValidatorFn[];
 declare function getSyncValidators(rules?: IControlValidation[]): ValidatorFn[];
+declare const BaseErrorDisplays: {
+    min: string;
+    max: string;
+    required: string;
+    email: string;
+    minlength: string;
+    maxlength: string;
+    type: string;
+    decimal: string;
+    maxdate: string;
+    maxfilesize: string;
+    minfilesize: string;
+};
 
 type InputType = 'text' | 'password' | 'textArea' | 'number' | 'date' | 'datetime' | 'searchSelect' | 'tagSelect' | 'color' | 'toggle' | 'file' | 'hidden';
 interface ISearchFilter {
@@ -277,6 +290,9 @@ interface IControl {
      */
     base64?: boolean;
     autofocus?: boolean;
+    mask?: string;
+    shownMaskExpression?: string;
+    maskValidation?: boolean;
 }
 
 interface IFormSection {
@@ -428,20 +444,21 @@ declare class ChrBaseInputComponent implements OnInit, ControlValueAccessor, Aft
     /**
      * The name of the input. It's the model's property name or the key that will be set to the value object
      */
-    readonly name: _angular_core.InputSignal<string | null>;
-    private _value;
-    get value(): any | null;
-    set value(value: any | null);
-    private valueSubject;
-    private valueSubscription;
+    readonly name: _angular_core.ModelSignal<string | null>;
+    /**
+     * The value of the input.
+     */
+    readonly value: _angular_core.ModelSignal<any>;
     /**
-     * The value change event. This will be triggered both by onChange and by onValueChange (they technically should not be fired together as onValueChange ends up calling onChange)
+     * The subject that holds the current value of the input.
      */
-    valueChanges: EventEmitter<any>;
+    readonly valueSubject: BehaviorSubject<any | null>;
+    readonly displayValue: _angular_core.ModelSignal<string | null>;
+    readonly displayValueSubject: BehaviorSubject<string | null>;
     /**
      * Whether or not the input is required
      */
-    protected required: boolean;
+    readonly required: _angular_core.WritableSignal<boolean>;
     /**
      * Span that will be shown under the input
      */
@@ -475,9 +492,13 @@ declare class ChrBaseInputComponent implements OnInit, ControlValueAccessor, Aft
      */
     readonly validations: _angular_core.InputSignal<IControlValidation[]>;
     /**
-     * Indicates whether or not this input is being used outside a ReactiveForm. Default is false. If this is false, the input will create it's own FormControl as to enable it's complex behaviors
+     * The error messages to display for the input.
+     * The key is the error name and the value the message to display
      */
-    readonly standalone: _angular_core.InputSignal<boolean>;
+    readonly errors: _angular_core.InputSignal<{
+        [index: string]: string;
+    } | null>;
+    private readonly errorDisplays;
     /**
      * Event that will be triggered when the input is focused
      */
@@ -520,11 +541,25 @@ declare class ChrBaseInputComponent implements OnInit, ControlValueAccessor, Aft
     /**
      * The NgControl associated with this input
      */
-    protected control: NgControl | null;
+    protected control: _angular_core.WritableSignal<NgControl>;
     /**
      * The validity status of the related FormControl
      */
     isValid: boolean | null;
+    /**
+     * Input mask to be applied
+     * @see https://www.npmjs.com/package/ngx-mask
+     * @see https://jsdaddy.github.io/ngx-mask/#7
+     */
+    mask: _angular_core.InputSignal<string>;
+    /**
+     * Mask expression shown in the input during typing
+     */
+    shownMaskExpression: _angular_core.InputSignal<string | null>;
+    /**
+     * Should the mask be validated
+     */
+    maskValidation: _angular_core.InputSignal<boolean>;
     /**
      * Every child should either call super(ngControl) or implement the logic for the input to bind the control to the FormControl.
      * @param ngControl the FormControl binded to this CVA
@@ -562,7 +597,7 @@ declare class ChrBaseInputComponent implements OnInit, ControlValueAccessor, Aft
      * @param value The new value of the input
      * @returns the value observable
      */
-    onValueChange: (value: any) => Subscription;
+    onValueChange: (value: any) => Observable<any>;
     writeValue(obj: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
@@ -596,10 +631,9 @@ declare class ChrBaseInputComponent implements OnInit, ControlValueAccessor, Aft
     private configureTouchBehavior;
     private configureValidityReplication;
     private configureFormControl;
-    private buildFormControl;
     protected doCallback: () => void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChrBaseInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChrBaseInputComponent, "chr-base-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "span": { "alias": "span"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconCallback": { "alias": "iconCallback"; "required": false; "isSignal": true; }; "iconCallbackDisabled": { "alias": "iconCallbackDisabled"; "required": false; "isSignal": true; }; "iconTooltip": { "alias": "iconTooltip"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "validations": { "alias": "validations"; "required": false; "isSignal": true; }; "standalone": { "alias": "standalone"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "base64": { "alias": "base64"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "siblings": { "alias": "siblings"; "required": false; "isSignal": true; }; }, { "valueChanges": "valueChanges"; "focus": "focus"; "blur": "blur"; "disabled": "disabledChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChrBaseInputComponent, "chr-base-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "displayValue": { "alias": "displayValue"; "required": false; "isSignal": true; }; "span": { "alias": "span"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconCallback": { "alias": "iconCallback"; "required": false; "isSignal": true; }; "iconCallbackDisabled": { "alias": "iconCallbackDisabled"; "required": false; "isSignal": true; }; "iconTooltip": { "alias": "iconTooltip"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "validations": { "alias": "validations"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "base64": { "alias": "base64"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "siblings": { "alias": "siblings"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "shownMaskExpression": { "alias": "shownMaskExpression"; "required": false; "isSignal": true; }; "maskValidation": { "alias": "maskValidation"; "required": false; "isSignal": true; }; }, { "name": "nameChange"; "value": "valueChange"; "displayValue": "displayValueChange"; "focus": "focus"; "blur": "blur"; "disabled": "disabledChange"; }, never, never, true, never>;
 }
 
 declare class ChrColorInputComponent extends ChrBaseInputComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -639,6 +673,18 @@ interface IFile {
     url?: string | null;
     data?: string | null;
     extension?: string | null;
+    contentType?: string | null;
+}
+declare class ChrFile implements IFile {
+    name?: string;
+    file?: File | null;
+    url?: string | null;
+    data?: string | null;
+    extension?: string | null;
+    contentType?: string | null;
+    constructor(file: IFile);
+    getUrl: () => string;
+    private parseNameAndExtensionFromFile;
 }
 
 declare class ChrFileInputComponent extends ChrBaseInputComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
@@ -657,7 +703,7 @@ declare class ChrFileInputComponent extends ChrBaseInputComponent implements Con
      * Whether or not the progress bar that display a file's conversion progress will be editable by the user
      */
     readonly editable: _angular_core.InputSignal<boolean>;
-    errors: {
+    fileErrors: {
         [index: number]: boolean;
     } | null;
     files: Observable<{
@@ -762,6 +808,25 @@ declare class ChrSearchSelectComponent extends ChrBaseInputComponent implements
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChrSearchSelectComponent, "app-chr-search-select, [app-chr-search-select], chr-search-select, [chr-search-select]", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "addCallback": { "alias": "addCallback"; "required": false; "isSignal": true; }; "acceptText": { "alias": "acceptText"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+interface IContextMenuItem {
+    /**
+     * Label for the menu item
+     */
+    label: string;
+    /**
+     * Action to trigger when the menu item is clicked
+     */
+    action: Function;
+    /**
+     * Optional Material Icon name to display
+     */
+    icon?: string;
+    /**
+     * Optional color for the hover background
+     */
+    color?: Color;
+}
+
 declare class ChrTagSelectComponent extends ChrBaseInputComponent implements ControlValueAccessor, OnInit, OnDestroy {
     predicate: boolean;
     readonly autocomplete: _angular_core.Signal<MatAutocomplete>;
@@ -815,11 +880,7 @@ declare class ChrTagSelectComponent extends ChrBaseInputComponent implements Con
     protected enableShowPanel: (input: any) => void;
     protected disableShowPanel: () => void;
     protected getTooltip: () => "" | "Appuyez sur 'Enter' pour ajouter la valeur du champs à la liste" | "Entrez un espace pour voir les choix disponibles";
-    protected contextMenuItems: (entry: any) => {
-        label: string;
-        icon: string;
-        action: () => void;
-    }[];
+    protected contextMenuItems: (entry: any) => IContextMenuItem[];
     private _filterModel;
     private _doFilterModelInt;
     private _doFilterModelString;
@@ -828,21 +889,6 @@ declare class ChrTagSelectComponent extends ChrBaseInputComponent implements Con
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChrTagSelectComponent, "app-chr-tag-select, [app-chr-tag-select], chr-tag-select, [chr-tag-select]", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "editCallback": { "alias": "editCallback"; "required": false; "isSignal": true; }; "addCallback": { "alias": "addCallback"; "required": false; "isSignal": true; }; "removeCallback": { "alias": "removeCallback"; "required": false; "isSignal": true; }; "acceptText": { "alias": "acceptText"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-interface IContextMenuItem {
-    /**
-     * Label for the menu item
-     */
-    label: string;
-    /**
-     * Action to trigger when the menu item is clicked
-     */
-    action: Function;
-    /**
-     * Optional Material Icon name to display
-     */
-    icon?: string;
-}
-
 type Alignment = 'left' | 'center' | 'right';
 declare const Aligments: {
     [key: string]: string;
@@ -1406,6 +1452,8 @@ declare class ChrContextMenuComponent implements AfterViewInit {
     click: _angular_core.OutputEmitterRef<any>;
     trigger: (item: IContextMenuItem) => void;
     ngAfterViewInit(): void;
+    getHoverTextColor(item: any): string;
+    getHoverBgColor(item: any): string;
     private position;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChrContextMenuComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChrContextMenuComponent, "chr-context-menu", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "origin": { "alias": "origin"; "required": true; "isSignal": true; }; }, { "click": "click"; }, never, never, true, never>;
@@ -1601,10 +1649,10 @@ declare class RequiredValidatorDirective implements Validator {
 declare function required(required?: boolean): ValidatorFn;
 
 declare class TypeValidatorDirective implements Validator {
-    readonly type: _angular_core.InputSignal<string | undefined>;
+    readonly expectedType: _angular_core.InputSignal<string | undefined>;
     validate(control: AbstractControl): ValidationErrors | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TypeValidatorDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TypeValidatorDirective, "[app-type]", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TypeValidatorDirective, "[app-type]", never, { "expectedType": { "alias": "expectedType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<TypeValidatorDirective>;
 }
 declare function type(type: string): ValidatorFn;
@@ -1626,5 +1674,5 @@ declare const XSRFHEADERNAME: InjectionToken<string>;
 declare const XSRFCOOKIENAME: InjectionToken<string>;
 declare const HUBURL: InjectionToken<string>;
 
-export { Aligments, AutofocusDirective, BreadcrumbComponent, ButtonComponent, CHR_MODAL_DATA, CHR_MODAL_REF, CarouselComponent, ChrBaseInputComponent, ChrButtonComponent, ChrCheckboxComponent, ChrColorInputComponent, ChrContextMenuComponent, ChrDataTable, ChrDateInputComponent, ChrDatetimeInputComponent, ChrDefaultModalComponent, ChrDeleteModalComponent, ChrDropdownComponent, ChrFileInputComponent, ChrFormComponent, ChrModalComponent, ChrNiceFileInputComponent, ChrPaginatorComponent, ChrSearchSelectComponent, ChrSearchbarComponent, ChrSeparatorComponent, ChrSpinnerComponent, ChrTableComponent, ChrTableHeaderCellComponent, ChrTagSelectComponent, ChrTextareaInputComponent, ChrToastComponent, ChrToggleInputComponent, Colors, ContextMenuDirective, CookiesService, DEFAULTLIVEUPDATEMESSAGE, DataService, DecimalValidatorDirective, DefaultLiveUpdateMessage, FileService, HUBURL, InlineSvgComponent, LiveUpdateService, LiveUpdateStatus, LoaderService, MaxDateValidatorDirective, MaxFileSizeValidator, MaxLengthValidatorDirective, MinFileSizeValidator, MinLengthValidatorDirective, ModalRef, ModalService, RequiredValidatorDirective, SpinnerInterceptor, SyncValidatorToAsync, TabComponent, TabGroupComponent, TabToEnterHandlerDirective, TabToInputHandlerDirective, ToastService, TypeValidatorDirective, WaitAndStoreXsrfToken, XSRFCOOKIENAME, XSRFHEADERNAME, XsrfInterceptor, decimal, getAsyncValidators, getBackgroundColor, getBorderColor, getContrastBackgroundColor, getContrastBorderColor, getContrastTextColor, getSyncValidators, getTextColor, getValidators, inOutAnimation, maxDate, maxFileSize, maxLength, minFileSize, minLength, provideXsrfHttpClient, required, rotationAnimation, type };
+export { Aligments, AutofocusDirective, BaseErrorDisplays, BreadcrumbComponent, ButtonComponent, CHR_MODAL_DATA, CHR_MODAL_REF, CarouselComponent, ChrBaseInputComponent, ChrButtonComponent, ChrCheckboxComponent, ChrColorInputComponent, ChrContextMenuComponent, ChrDataTable, ChrDateInputComponent, ChrDatetimeInputComponent, ChrDefaultModalComponent, ChrDeleteModalComponent, ChrDropdownComponent, ChrFile, ChrFileInputComponent, ChrFormComponent, ChrModalComponent, ChrNiceFileInputComponent, ChrPaginatorComponent, ChrSearchSelectComponent, ChrSearchbarComponent, ChrSeparatorComponent, ChrSpinnerComponent, ChrTableComponent, ChrTableHeaderCellComponent, ChrTagSelectComponent, ChrTextareaInputComponent, ChrToastComponent, ChrToggleInputComponent, Colors, ContextMenuDirective, CookiesService, DEFAULTLIVEUPDATEMESSAGE, DataService, DecimalValidatorDirective, DefaultLiveUpdateMessage, FileService, HUBURL, InlineSvgComponent, LiveUpdateService, LiveUpdateStatus, LoaderService, MaxDateValidatorDirective, MaxFileSizeValidator, MaxLengthValidatorDirective, MinFileSizeValidator, MinLengthValidatorDirective, ModalRef, ModalService, RequiredValidatorDirective, SpinnerInterceptor, SyncValidatorToAsync, TabComponent, TabGroupComponent, TabToEnterHandlerDirective, TabToInputHandlerDirective, ToastService, TypeValidatorDirective, WaitAndStoreXsrfToken, XSRFCOOKIENAME, XSRFHEADERNAME, XsrfInterceptor, decimal, getAsyncValidators, getBackgroundColor, getBorderColor, getContrastBackgroundColor, getContrastBorderColor, getContrastTextColor, getSyncValidators, getTextColor, getValidators, inOutAnimation, maxDate, maxFileSize, maxLength, minFileSize, minLength, provideXsrfHttpClient, required, rotationAnimation, type };
 export type { Alignment, Breadcrumb, Color, IAction, IChip, IChips, IColumn, IComputedColumn, IComputedRow, IContextMenuItem, IControl, IControlValidation, IDefaultDialogConfig, IFile, IFormSection, IInputSearchFilter, ILiveUpdateMessage, IModalRef, ISearchFilter, IXsrfProviderParams, InputType, ModalData, ModalOptions, TColumn, TColumnType, Toast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrv-components",
-  "version": "1.11.37",
+  "version": "1.11.39",
   "peerDependencies": {
     "@angular/common": ">=17.0.0",
     "@angular/core": ">=17.0.0",

package/src/lib/styles/_colors-selectors.css

@@ -18,26 +18,6 @@
     color: var(--error-color);
 }
 
-[data-accent-color='primary'] {
-    accent-color: var(--primary-color);
-}
-
-[data-accent-color='secondary'] {
-    accent-color: var(--secondary-color);
-}
-
-[data-accent-color='tertiary'] {
-    accent-color: var(--tertiary-color);
-}
-
-[data-accent-color='warn'] {
-    accent-color: var(--warn-color);
-}
-
-[data-accent-color='error'] {
-    accent-color: var(--error-color);
-}
-
 [data-border-color='primary'] {
     border-color: var(--primary-color);
 }

package/src/lib/styles/_hover-colors-selectors.css

@@ -0,0 +1,59 @@
+[data-hover-color='primary']:hover {
+    color: var(--primary-color);
+}
+
+[data-hover-color='secondary']:hover {
+    color: var(--secondary-color);
+}
+
+[data-hover-color='tertiary']:hover {
+    color: var(--tertiary-color);
+}
+
+[data-hover-color='warn']:hover {
+    color: var(--warn-color);
+}
+
+[data-hover-color='error']:hover {
+    color: var(--error-color);
+}
+
+[data-hover-border-color='primary']:hover {
+    border-color: var(--primary-color);
+}
+
+[data-hover-border-color='secondary']:hover {
+    border-color: var(--secondary-color);
+}
+
+[data-hover-border-color='tertiary']:hover {
+    border-color: var(--tertiary-color);
+}
+
+[data-hover-border-color='warn']:hover {
+    border-color: var(--warn-color);
+}
+
+[data-hover-border-color='error']:hover {
+    border-color: var(--error-color);
+}
+
+[data-hover-bg-color='primary']:hover {
+    background-color: var(--primary-color);
+}
+
+[data-hover-bg-color='secondary']:hover {
+    background-color: var(--secondary-color);
+}
+
+[data-hover-bg-color='tertiary']:hover {
+    background-color: var(--tertiary-color);
+}
+
+[data-hover-bg-color='warn']:hover {
+    background-color: var(--warn-color);
+}
+
+[data-hover-bg-color='error']:hover {
+    background-color: var(--error-color);
+}

package/src/lib/styles/colors.css

@@ -1,2 +1,3 @@
 @import '_colors-selectors.css';
-@import '_colors-classes.css';
+@import '_colors-classes.css';
+@import '_hover-colors-selectors.css';