@colijnit/corecomponents_v12 12.0.20 → 12.0.21

package/lib/components/base/base-input.component.d.ts

@@ -20,6 +20,7 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     get ngModel(): NgModel;
     static BaseFormInputComponentIndex: number;
     static HiddenClass: string;
+    showSaveCancel: boolean;
     set model(value: T);
     get model(): T;
     label: string;
@@ -81,17 +82,25 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     get touchedInvalid(): boolean;
     get valid(): boolean;
     get validationDisabled(): boolean;
+    onClick(event: MouseEvent): void;
+    onFocusIn(): void;
+    handleDocumentScroll(): void;
+    handleWindowResize(): void;
+    handleKeyDown(event: KeyboardEvent): void;
     get canChange(): boolean;
     get control(): FormControl;
     get formInputInstance(): BaseInputComponent<T>;
     get isDestroyed(): boolean;
     input: HTMLInputElement | HTMLTextAreaElement;
-    intersectionObserver: IntersectionObserver;
+    keepFocus: boolean;
+    canSaveOrCancel: boolean;
     objectConfigName: string;
     protected _markedAsUserTouched: boolean;
     protected _destroyed: boolean;
     protected _hasOnPushCdStrategy: boolean;
     protected _model: T;
+    protected _initialModel: T;
+    protected _initialModelSet: boolean;
     private _errorValidationComponent;
     private _decimals;
     private _hidden;
@@ -111,17 +120,18 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    commit: (model: any) => Promise<boolean>;
+    commitClick(event?: MouseEvent): Promise<void>;
+    cancelClick(event?: MouseEvent): void;
     showValidationError(error: string): void;
     /**
      * Emits a modelChange event with given value, indicating that the model of this form input
      * has changed and its new value is given value. Also emits userModelChange if markedAsUserTouched.
      */
     setModel(value: any): void;
-    onClick(event: MouseEvent): void;
-    onFocusIn(): void;
     requestFocus(): void;
-    doFocus(): void;
-    doBlur(): void;
+    doFocus(event: any): any;
+    doBlur(event?: any): any;
     detectChanges(): void;
     markForCheck(): void;
     detectChangesAfterAngular(): void;
@@ -152,5 +162,8 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     private _addSelfToForm;
     private _prepareInput;
     private _findInputNode;
-    private _handleElementPositionChange;
+    private _positionValidationError;
+    private _handleKeyDown;
+    private _createNewFocusEvent;
+    private _setFocusOnNextPossibleInput;
 }

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

@@ -31,7 +31,6 @@ export declare class FormComponent implements AfterViewInit, OnDestroy, OnInit {
     checkUpdateValidity(): boolean;
     isTouched(): boolean;
     isValid(): boolean;
-    onEnterKey(event: KeyboardEvent): void;
     reset(): void;
     submit(throughFormMaster?: boolean): boolean;
     showErrorTooltipOnFormGroupControl(key: string): void;

package/lib/components/input-checkbox/style/_material-definition.scss

@@ -1,2 +1 @@
-@import "ej2-base/styles/material.scss";
-@import "ej2-buttons/styles/material.scss";
+

package/lib/components/input-checkbox/style/material.scss

@@ -3,3 +3,5 @@
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
+@import "ej2-base/styles/material.scss";
+@import "ej2-buttons/styles/material.scss";

package/lib/components/input-text/style/_layout.scss

@@ -12,5 +12,37 @@
       margin: ($cc-item-size - 8px) / 2 0 0;
       outline: none;
     }
+    .input-save-cancel-button-wrapper {
+      position: absolute;
+      padding: 5px 0 0 5px;
+      top: -36px;
+      right: 0;
+      display: flex;
+      column-gap: 2px;
+      transform-origin: center bottom;
+      .input-save-cancel-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 30px;
+        width: 30px;
+        &.save {
+          background: $cc-co-input-text-button-background;
+          &:before {
+            content: "\2713";
+            font-size: 20px;
+            color: $cc-co-input-text-commit-color;
+          }
+        }
+        &.cancel {
+          background: #DAD9D9;
+          &:before {
+            content: "x";
+            font-size: 20px;
+            color: $cc-co-input-text-cancel-color;
+          }
+        }
+      }
+    }
   }
 }

package/lib/components/input-text/style/_material-definition.scss

@@ -2,3 +2,6 @@ $cc-co-input-text-font-family: $cc-font-family !default;
 $cc-co-input-text-font-size: $cc-font-size-default !default;
 $cc-co-input-text-font-color: $cc-color-dark !default;
 $cc-co-input-text-border-color: $cc-color-border !default;
+$cc-co-input-text-button-background: $cc-color-form-input-border !default;
+$cc-co-input-text-commit-color: green !default;
+$cc-co-input-text-cancel-color: red !default;

package/lib/components/input-text/style/_theme.scss

@@ -3,5 +3,21 @@
     input {
       background: transparent;
     }
+    .input-save-cancel-button-wrapper {
+      .input-save-cancel-button {
+        &.save {
+          background: $cc-co-input-text-button-background;
+          &:before {
+            color: $cc-co-input-text-commit-color;
+          }
+        }
+        &.cancel {
+          background: $cc-co-input-text-button-background;
+          &:before {
+            color: $cc-co-input-text-cancel-color;
+          }
+        }
+      }
+    }
   }
 }

package/lib/style/_input.mixins.scss

@@ -17,7 +17,7 @@
       content: "\2713";
       width: $cc-input-required-mark-width-height;
       height: $cc-input-required-mark-width-height;
-      background-color: white;
+      background: transparent;
       color: $cc-color-valid;
     }
   }

package/lib/style/_variables.scss

@@ -106,6 +106,20 @@ $cc-font-size-value-text: 13px !default;
 
 $cc-input-required-mark-width-height: 7px;
 
+/* checkbox */
+$cc-checkbox-border-radius: 2px !default;
+$cc-checkbox-background-color: $cc-color-light !default;
+$cc-checkbox-border-color: $cc-color-border !default;
+$cc-checkbox-check-background-color: $cc-color-action !default;
+$cc-checkbox-check-border-color: $cc-color-action !default;
+$cc-checkbox-check-color: $cc-color-light !default;
+$cc-checkbox-hover-background-color: $cc-checkbox-background-color !default;
+$cc-checkbox-hover-border-color: $cc-checkbox-border-color !default;
+$cc-checkbox-check-hover-background-color: $cc-checkbox-check-background-color !default;
+$cc-checkbox-check-hover-border-color: $cc-checkbox-check-border-color !default;
+$cc-checkbox-check-hover-color: $cc-checkbox-check-color !default;
+/************/
+
 /* syncfusion overrides */
 $input-header-font-color: $cc-color-label;
 $input-placeholder: $cc-color-label;
@@ -115,4 +129,17 @@ $input-group-full-border: none;
 $input-margin-top: $cc-input-margin-top;
 $input-group-full-border-width: 0;
 $input-group-border-width-focus: 0;
+
+$cbox-border-radius: $cc-checkbox-border-radius;
+$cbox-bgcolor: $cc-checkbox-background-color;
+$cbox-border-color: $cc-checkbox-border-color;
+$cbox-checkmark-bgcolor: $cc-checkbox-check-background-color;
+$cbox-checkmark-border-color: $cc-checkbox-check-border-color;
+$cbox-checkmark-color: $cc-checkbox-check-color;
+$cbox-hover-bgcolor: $cc-checkbox-hover-background-color;
+$cbox-hover-border-color: $cc-checkbox-hover-border-color;
+$cbox-checkmark-hover-bgcolor: $cc-checkbox-check-hover-background-color;
+$cbox-checkmark-hover-border-color: $cc-checkbox-check-hover-border-color;
+$cbox-checkmark-hover-color: $cc-checkbox-check-hover-color;
 /************************/
+

package/package.json

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

package/public-api.d.ts

@@ -71,3 +71,5 @@ export * from './lib/components/simple-grid/simple-grid.component';
 export * from './lib/components/simple-grid/simple-grid.module';
 export * from './lib/components/carousel-3d/carousel-3d.component';
 export * from './lib/components/carousel-3d/carousel-3d.module';
+export * from './lib/pipes/price-display.pipe';
+export * from './lib/pipes/price-display-pipe.module';