@colijnit/corecomponents_v12 261.20.17 → 261.20.18

package/index.d.ts

@@ -532,7 +532,6 @@ declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy, After
     get canSaveOrCancel(): boolean;
     objectConfigName: string;
     validationError: string;
-    shouldCommit: boolean;
     protected _markedAsUserTouched: boolean;
     protected _destroyed: boolean;
     protected _hasOnPushCdStrategy: boolean;
@@ -558,6 +557,7 @@ declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy, After
     private _formReadonlyChangeSub;
     private _clearMarkedAsUserTouchedSub;
     private _canSaveOrCancel;
+    private _committing;
     private _commitButtonsComponentRef;
     private _validationComponentRef;
     constructor(changeDetector: ChangeDetectorRef, overlayService: OverlayService, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
@@ -598,7 +598,7 @@ declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy, After
     private _controlExists;
     private _controlIsValid;
     private _setNativeDisabled;
-    private _setNativeMaxLength;
+    protected _setNativeMaxLength(maxlength: number): void;
     protected _setNativeReadOnly(readonly: boolean): void;
     private _setNativeRequired;
     private _subscribeToSpeechInput;
@@ -1421,10 +1421,30 @@ declare enum KeyboardCode {
     Tilde = 192
 }
 
+/**
+ * Resolves the locale-specific decimal separator (e.g. ',' for nl-NL) from the app-wide LOCALE_ID and
+ * converts between a numeric model value and its user-facing display string. Injected app-wide, so no
+ * component has to be given a locale explicitly.
+ *
+ * The model always stays a real number (dot-based / JSON-safe); the separator only affects the display
+ * string shown in the input, never the stored value.
+ */
+declare class NumberLocaleService {
+    private readonly _decimalSeparator;
+    constructor(localeId: string);
+    get decimalSeparator(): string;
+    parse(text: string | number | null | undefined): number;
+    format(value: number | null | undefined): string;
+    insertDecimalSeparator(input: HTMLInputElement | HTMLTextAreaElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NumberLocaleService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NumberLocaleService>;
+}
+
 declare class InputTextComponent extends BaseInputComponent<any> implements AfterViewInit {
     formComponent: FormComponent;
     protected changeDetector: ChangeDetectorRef;
     protected overlayService: OverlayService;
+    private _numberLocale;
     protected formUserChangeListener?: FormInputUserModelChangeListenerService;
     protected ngZoneWrapper?: NgZoneWrapperService;
     elementRef?: ElementRef;
@@ -1451,6 +1471,7 @@ declare class InputTextComponent extends BaseInputComponent<any> implements Afte
     noStyle: boolean;
     hideArrowButtons: boolean;
     get isDate(): boolean;
+    get hasValue(): boolean;
     leftIconClick: EventEmitter<MouseEvent>;
     leftIconMouseDown: EventEmitter<MouseEvent>;
     leftIconMouseUp: EventEmitter<MouseEvent>;
@@ -1466,13 +1487,19 @@ declare class InputTextComponent extends BaseInputComponent<any> implements Afte
     handleDocumentPointerUp(event: PointerEvent): void;
     set model(value: any);
     get model(): any;
+    protected modelSet(): void;
+    handleInputModelChange(value: any): void;
     get pipedModel(): any;
+    get displayValue(): string;
     isFocusedOnDate: boolean;
     weekInputBuffer: string;
     isWeekInputMode: boolean;
     private _isLeftIconMouseDown;
     private _isRightIconMouseDown;
-    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, overlayService: OverlayService, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
+    private _userTyping;
+    private _displayValue;
+    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, overlayService: OverlayService, _numberLocale: NumberLocaleService, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
+    ngAfterViewInit(): void;
     handleLeftIconClick(event: MouseEvent): void;
     handleLeftIconMouseDown(event: MouseEvent): void;
     handleLeftIconMouseUp(event: MouseEvent): void;
@@ -1484,11 +1511,12 @@ declare class InputTextComponent extends BaseInputComponent<any> implements Afte
     handleInputFocus(event: FocusEvent): void;
     handleBlur(event: FocusEvent): void;
     handleDoFocus(event: MouseEvent): void;
+    protected _setNativeMaxLength(maxlength: number): void;
     clearInput(event: MouseEvent): void;
     handleKeyDownInput(event: KeyboardEvent): void;
     private convertWeekToDate;
     private formatDateLocal;
-    static ɵfac: i0.ɵɵFactoryDeclaration<InputTextComponent, [{ optional: true; }, null, null, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputTextComponent, [{ optional: true; }, null, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<InputTextComponent, "co-input-text", never, { "useContent": { "alias": "useContent"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "align": { "alias": "align"; "required": false; }; "type": { "alias": "type"; "required": false; }; "formatPipe": { "alias": "formatPipe"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "digitsOnly": { "alias": "digitsOnly"; "required": false; }; "excludePlusMinus": { "alias": "excludePlusMinus"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "keyDownWhiteList": { "alias": "keyDownWhiteList"; "required": false; }; "showPlaceholderOnFocus": { "alias": "showPlaceholderOnFocus"; "required": false; }; "leftIcon": { "alias": "leftIcon"; "required": false; }; "rightIcon": { "alias": "rightIcon"; "required": false; }; "leftIconData": { "alias": "leftIconData"; "required": false; }; "rightIconData": { "alias": "rightIconData"; "required": false; }; "selectOnFocus": { "alias": "selectOnFocus"; "required": false; }; "emptyPlace": { "alias": "emptyPlace"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; "noStyle": { "alias": "noStyle"; "required": false; }; "hideArrowButtons": { "alias": "hideArrowButtons"; "required": false; }; "model": { "alias": "model"; "required": false; }; }, { "leftIconClick": "leftIconClick"; "leftIconMouseDown": "leftIconMouseDown"; "leftIconMouseUp": "leftIconMouseUp"; "rightIconClick": "rightIconClick"; "rightIconMouseDown": "rightIconMouseDown"; "rightIconMouseUp": "rightIconMouseUp"; "clearIconClick": "clearIconClick"; "isFocused": "isFocused"; }, never, ["*"], false, never>;
 }
 
@@ -1914,10 +1942,12 @@ declare class InputNumberPickerComponent extends BaseInputComponent<number> impl
     iconCacheService: IconCacheService;
     protected overlayService: OverlayService;
     private _ngZone;
+    private _numberLocale;
     protected ngZoneWrapper?: NgZoneWrapperService;
     elementRef?: ElementRef;
     set model(model: number);
     get model(): number;
+    get displayValue(): string;
     modelChangeOnEnter: boolean;
     showPermanentLabel: boolean;
     leftIconData: SafeHtml | undefined;
@@ -1930,6 +1960,7 @@ declare class InputNumberPickerComponent extends BaseInputComponent<number> impl
     buttonShowMode: InputNumberPickerButtonShowMode;
     noValidation: boolean;
     set decimals(decimals: number);
+    get decimals(): number;
     readonly modelChange: EventEmitter<number>;
     readonly iconClick: EventEmitter<MouseEvent>;
     get showButtonsOnFocusOnly(): boolean;
@@ -1942,6 +1973,8 @@ declare class InputNumberPickerComponent extends BaseInputComponent<number> impl
     plusSelected: boolean;
     private _numberInputHasFocus;
     private _changeFromButton;
+    private _userTyping;
+    private _displayValue;
     private _numberLogicValueChangeSub;
     private readonly _delayBeforeStartAutoCountMs;
     private readonly _stepFactors;
@@ -1952,13 +1985,14 @@ declare class InputNumberPickerComponent extends BaseInputComponent<number> impl
     private _autoCountTimeout;
     private _stepIncrementTimeout;
     private _startAutocountTimeout;
-    constructor(formComponent: FormComponent, iconCacheService: IconCacheService, overlayService: OverlayService, _ngZone: NgZone, changeDetector: ChangeDetectorRef, formUserChangeListener: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
+    constructor(formComponent: FormComponent, iconCacheService: IconCacheService, overlayService: OverlayService, _ngZone: NgZone, changeDetector: ChangeDetectorRef, formUserChangeListener: FormInputUserModelChangeListenerService, _numberLocale: NumberLocaleService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     doIncrementAuto(): void;
     handleInputKeyDown(event: KeyboardEvent): boolean;
+    protected _setNativeMaxLength(): void;
     handleBlur(): void;
-    handleChangeModel(value: number): void;
+    handleChangeModel(text: string): void;
     doDecrementAuto(): void;
     stopAutoCounting(): void;
     setValue(newValue: number, silent?: boolean): void;
@@ -1969,7 +2003,7 @@ declare class InputNumberPickerComponent extends BaseInputComponent<number> impl
     private _doIncreaseStepFactor;
     private _getNextStepFactorMouseDown;
     private _updateButtonsShowState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<InputNumberPickerComponent, [{ optional: true; }, null, null, null, null, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputNumberPickerComponent, [{ optional: true; }, null, null, null, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<InputNumberPickerComponent, "co-input-number-picker", never, { "model": { "alias": "model"; "required": false; }; "modelChangeOnEnter": { "alias": "modelChangeOnEnter"; "required": false; }; "showPermanentLabel": { "alias": "showPermanentLabel"; "required": false; }; "leftIconData": { "alias": "leftIconData"; "required": false; }; "min": { "alias": "min"; "required": false; }; "step": { "alias": "step"; "required": false; }; "max": { "alias": "max"; "required": false; }; "ngModelOptions": { "alias": "ngModelOptions"; "required": false; }; "minusIcon": { "alias": "minusIcon"; "required": false; }; "plusIcon": { "alias": "plusIcon"; "required": false; }; "buttonShowMode": { "alias": "buttonShowMode"; "required": false; }; "noValidation": { "alias": "noValidation"; "required": false; }; "decimals": { "alias": "decimals"; "required": false; }; }, { "modelChange": "modelChange"; "iconClick": "iconClick"; }, never, never, false, never>;
 }
 
@@ -2707,6 +2741,17 @@ declare class ViewModeButtonsModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<ViewModeButtonsModule>;
 }
 
+interface LovHighlightPart {
+    text: string;
+    match: boolean;
+}
+
+declare class LovUtils {
+    static getDisplayValue(model: any, displayField: string): string;
+    static getHighlightParts(value: string, term: string): LovHighlightPart[];
+    private static _escapeRegExp;
+}
+
 declare class ListOfValuesComponent extends BaseInputComponent<any> implements OnInit {
     formComponent: FormComponent;
     iconCacheService: IconCacheService;
@@ -2716,6 +2761,7 @@ declare class ListOfValuesComponent extends BaseInputComponent<any> implements O
     protected ngZoneWrapper?: NgZoneWrapperService;
     elementRef?: ElementRef;
     readonly icons: typeof CoreComponentsIcon;
+    readonly lovUtils: typeof LovUtils;
     set model(value: any);
     get model(): any;
     parentForOverlay: ElementRef;
@@ -2742,12 +2788,15 @@ declare class ListOfValuesComponent extends BaseInputComponent<any> implements O
     isLoading: boolean;
     private _collection;
     private debounceTimeout;
+    private _filterRequestId;
     private _lovPopupComponentRef;
     constructor(formComponent: FormComponent, iconCacheService: IconCacheService, changeDetector: ChangeDetectorRef, overlayService: OverlayService, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
     ngOnInit(): void;
+    get inputModel(): any;
+    handleModelChange(model: string): void;
     handleInputModelChange(model: string): void;
     onModelChange(model: string): void;
-    applyFilter(text: string): Promise<[]>;
+    applyFilter(text: string, requestId?: number): Promise<void>;
     handleInputKeyDown(event: KeyboardEvent): boolean;
     clearModel(event: MouseEvent): void;
     toggleSelect(): void;
@@ -2764,6 +2813,7 @@ declare class ListOfValuesComponent extends BaseInputComponent<any> implements O
 interface lovViewModel {
     checked: boolean;
     model: any;
+    highlightParts?: LovHighlightPart[];
 }
 declare class ListOfValuesPopupComponent implements OnInit {
     iconCacheService: IconCacheService;
@@ -3138,7 +3188,7 @@ declare class PrependPipeModule {
 
 declare class FilterItemModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterItemModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FilterItemModule, [typeof FilterItemComponent], [typeof i2.CommonModule, typeof CollapsibleModule, typeof InputTextModule, typeof InputCheckboxModule, typeof IconModule, typeof i7.ScrollingModule, typeof AppendPipeModule, typeof PrependPipeModule, typeof InputTextModule, typeof InputRadioButtonModule, typeof InputTextModule, typeof CoreComponentsTranslationModule, typeof InputDatePickerModule, typeof InputDateRangePickerModule], [typeof FilterItemComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FilterItemModule, [typeof FilterItemComponent], [typeof i2.CommonModule, typeof CollapsibleModule, typeof InputTextModule, typeof InputCheckboxModule, typeof IconModule, typeof i7.ScrollingModule, typeof AppendPipeModule, typeof PrependPipeModule, typeof InputRadioButtonModule, typeof CoreComponentsTranslationModule, typeof InputDatePickerModule, typeof InputDateRangePickerModule], [typeof FilterItemComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FilterItemModule>;
 }
 

package/lib/components/grid-toolbar/style/_layout.scss

@@ -23,6 +23,7 @@
       opacity: 1;
       cursor: pointer;
       &.disabled {
+        pointer-events: none;
         cursor: default;
         opacity: 0.5;
       }

package/lib/components/grid-toolbar-button/style/_layout.scss

@@ -9,6 +9,7 @@
       cursor: pointer;
 
       &.disabled {
+        pointer-events: none;
         opacity: 0.6;
         cursor: default;
         background: #e3e3e3;

package/lib/components/input-number-picker/style/_layout.scss

@@ -70,6 +70,14 @@
       width: 100%;
       border: none;
       text-align: $cc-co-input-number-picker-text-align;
+      // the component provides its own +/- buttons, so hide the native number spinners
+      -moz-appearance: textfield;
+      appearance: textfield;
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
       &:focus {
         outline: none;
       }

package/lib/components/list-of-values/style/_layout.scss

@@ -172,6 +172,10 @@
       border-bottom: none;
     }
 
+    .lov-highlight {
+      font-weight: $cc-co-list-of-values-highlight-font-weight;
+    }
+
     .lov-options li:hover {
       //color: $cc-co-list-of-values-lov-options-li-hover-text-color;
       background-color: $cc-co-list-of-values-lov-options-li-hover;

package/lib/components/list-of-values/style/_material-definition.scss

@@ -23,6 +23,10 @@ $cc-co-list-of-values-lov-options-li-hover-text-color: $cc-color-input-lov !defa
 $cc-co-list-of-values-lov-options-li-selected: $cc-color-grey !default;
 $cc-co-list-of-values-lov-options-li-selected-text-color: $cc-color-input-lov !default;
 
+$cc-co-list-of-values-highlight-font-weight: 700 !default;
+$cc-co-list-of-values-highlight-background-color: transparent !default;
+$cc-co-list-of-values-highlight-text-color: $cc-color-font !default;
+
 $cc-co-list-of-values-multiselect-chips-padding: 0 10px 10px 10px !default;
 $cc-co-list-of-values-multiselect-chips-column-gap: 5px !default;
 $cc-co-list-of-values-multiselect-chips-row-gap: 2px !default;

package/lib/components/list-of-values/style/_theme.scss

@@ -0,0 +1,8 @@
+@include export-module('co-list-of-values-theme') {
+  .co-list-of-values-popup {
+    .lov-highlight {
+      background-color: $cc-co-list-of-values-highlight-background-color;
+      color: $cc-co-list-of-values-highlight-text-color;
+    }
+  }
+}

package/lib/components/simple-grid/style/_layout.scss

@@ -196,6 +196,7 @@
     border-color: $cc-simple-grid-row-border-color;
 
     &.disabled {
+      pointer-events: none;
       opacity: $cc-simple-grid-row-disabled-opacity;
       background: $cc-simple-grid-row-disabled-background-color;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "261.20.17",
+  "version": "261.20.18",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {