@colijnit/corecomponents_v12 12.0.18 → 12.0.21

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

@@ -16,9 +16,11 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     protected ngZoneWrapper?: NgZoneWrapperService;
     elementRef?: ElementRef;
     validationErrorContainer: ViewContainerRef;
+    _ngModel: NgModel;
     get ngModel(): NgModel;
     static BaseFormInputComponentIndex: number;
     static HiddenClass: string;
+    showSaveCancel: boolean;
     set model(value: T);
     get model(): T;
     label: string;
@@ -61,7 +63,6 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     readonly modelChange: EventEmitter<any>;
     readonly userModelChange: EventEmitter<any>;
     readonly hiddenChange: EventEmitter<boolean>;
-    _ngModel: NgModel;
     focused: boolean;
     formComponent: FormComponent;
     formInput: boolean;
@@ -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;
-    showValidationError(error: string): void;
     input: HTMLInputElement | HTMLTextAreaElement;
+    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,15 +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;
-    doBlur(): void;
+    doFocus(event: any): any;
+    doBlur(event?: any): any;
     detectChanges(): void;
     markForCheck(): void;
     detectChangesAfterAngular(): void;
@@ -148,4 +160,10 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     private _updateSelfInForm;
     private _removeSelfFromForm;
     private _addSelfToForm;
+    private _prepareInput;
+    private _findInputNode;
+    private _positionValidationError;
+    private _handleKeyDown;
+    private _createNewFocusEvent;
+    private _setFocusOnNextPossibleInput;
 }

package/lib/components/co-kanban/style/_layout.scss

@@ -11,6 +11,10 @@
       color: $cc-kanban-header-text-color;
     }
 
+    div.e-kanban-content {
+      max-height: $cc-kanban-content-max-height;
+    }
+
     div.e-item-count {
       font-family: $cc-kanban-header-item-count-font-family;
       font-size: $cc-kanban-header-item-count-font-size;

package/lib/components/co-kanban/style/_material-definition.scss

@@ -11,6 +11,8 @@ $cc-kanban-header-border: 1px solid transparent !default;
 $cc-kanban-header-padding: 5px 8px !default;
 $cc-kanban-header-margin-bottom: 0 !default;
 
+$cc-kanban-content-max-height: auto !default;
+
 $cc-kanban-card-background-color: #ffffff !default;
 $cc-kanban-card-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 16%) !default;
 $cc-kanban-card-border: 1px solid transparent !default;

package/lib/components/drop-down-list/style/_layout.scss

@@ -1,7 +1,8 @@
 @include export-module('cc-co-drop-down-list-layout') {
   .co-drop-down-list {
-    position: relative; // for validation message
     @include input;
+    font-family: $cc-co-drop-down-list-font-family;
+    font-size: $cc-co-drop-down-list-font-size;
     .e-dropdownlist {
       height: 100%;
       span {

package/lib/components/drop-down-list/style/_material-definition.scss

@@ -0,0 +1,2 @@
+$cc-co-drop-down-list-font-family: $cc-font-family !default;
+$cc-co-drop-down-list-font-size: $cc-font-size-default !default;

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

@@ -1,8 +1,8 @@
 import { AfterViewInit, EventEmitter, OnDestroy, OnInit } from "@angular/core";
 import { FormControl, FormGroup } from "@angular/forms";
 import { Subject } from "rxjs";
-import { BaseInputComponent } from '../base/base-input.component';
-import { FormMasterService } from '../../core/service/form-master.service';
+import { BaseInputComponent } from "../base/base-input.component";
+import { FormMasterService } from "../../core/service/form-master.service";
 export declare class FormComponent implements AfterViewInit, OnDestroy, OnInit {
     private _formMaster;
     set readonly(value: boolean);
@@ -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-checkbox-multi-select/style/_layout.scss

@@ -1,3 +1,7 @@
 @include export-module('cc-input-checkbox-multi-select-layout') {
-
+  .co-input-checkbox-multi-select {
+    @include input;
+    font-family: $cc-co-input-checkbox-multi-select-font-family;
+    font-size: $cc-co-input-checkbox-multi-select-font-size;
+  }
 }

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

@@ -1,3 +1,5 @@
+$cc-co-input-checkbox-multi-select-font-family: $cc-font-family !default;
+$cc-co-input-checkbox-multi-select-font-size: $cc-font-size-default !default;
 @import 'ej2-base/styles/material.scss';
 @import 'ej2-buttons/styles/material.scss';
 @import 'ej2-dropdowns/styles/material.scss';

package/lib/components/input-combo-box/style/_layout.scss

@@ -1,11 +1,13 @@
 @include export-module('cc-input-combo-box-layout') {
   .co-input-combo-box {
-    position: relative; // for validation message
     @include input;
+    font-family: $cc-co-input-combo-box-font-family;
+    font-size: $cc-co-input-combo-box-font-size;
+    border-bottom: 1px solid $cc-color-border;
     .e-combobox {
       height: 100%;
       div {
-        height: 100%;
+        height: calc(100% - #{$cc-input-margin-top});
       }
     }
   }

package/lib/components/input-combo-box/style/_material-definition.scss

@@ -0,0 +1,2 @@
+$cc-co-input-combo-box-font-family: $cc-font-family !default;
+$cc-co-input-combo-box-font-size: $cc-font-size-default !default;

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

@@ -1,6 +1,7 @@
 @include export-module('cc-input-date-picker-layout') {
   .co-input-date {
-    position: relative; // for validation message
     @include input;
+    font-family: $cc-co-input-date-font-family;
+    font-size: $cc-co-input-date-font-size;
   }
 }

package/lib/components/input-date-picker/style/_material-definition.scss

@@ -1,3 +1,7 @@
+$cc-co-input-date-font-family: $cc-font-family !default;
+$cc-co-input-date-font-size: $cc-font-size-default !default;
+$input-border: none;
+@import 'ej2-inputs/styles/input/_material-definition.scss';
 @import 'ej2-base/styles/material.scss';
 @import 'ej2-buttons/styles/material.scss';
 @import 'ej2-inputs/styles/material.scss';

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

@@ -1,6 +1,5 @@
 @include export-module('cc-input-listbox-layout') {
   .co-input-listbox {
-    position: relative; // for validation message
     @include input;
     font-family: $cc-co-input-listbox-font-family;
     font-size: $cc-co-input-listbox-font-size;

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

@@ -3,8 +3,8 @@ $cc-co-input-listbox-font-size: $cc-font-size-default !default;
 $cc-co-input-listbox-font-color: $cc-color-dark !default;
 $cc-co-input-listbox-max-height: 200px !default;
 $cc-co-input-listbox-header-font-family: $cc-font-family !default;
-$cc-co-input-listbox-header-font-size: $cc-font-size-default !default;
-$cc-co-input-listbox-header-font-color: $cc-color-dark !default;
+$cc-co-input-listbox-header-font-size: $cc-font-size-input-label !default;
+$cc-co-input-listbox-header-font-color: $cc-color-label !default;
 $cc-co-input-listbox-header-margin: 5px 0 !default;
 $cc-co-input-listbox-item-selected-background-color: $cc-color-action !default;
 $cc-co-input-listbox-item-selected-color: $cc-color-light !default;

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

@@ -1,3 +1,23 @@
 @include export-module('cc-input-text-theme') {
-
+  .co-input-text {
+    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/components/input-textarea/style/_theme.scss

@@ -2,6 +2,7 @@
   .co-input-textarea {
     color: $cc-co-input-textarea-font-color;
     textarea {
+      background: transparent;
       border-color: $cc-co-input-textarea-border-color;
     }
   }

package/lib/components/multi-select-list/style/_layout.scss

@@ -1,7 +1,8 @@
 @include export-module('cc-multi-select-list-layout') {
   .co-multi-select-list {
-    position: relative; // for validation message
     @include input;
+    font-family: $cc-co-multi-select-list-font-family;
+    font-size: $cc-co-multi-select-list-font-size;
     .e-multiselect {
       height: 100%;
       div {

package/lib/components/multi-select-list/style/_material-definition.scss

@@ -1,3 +1,5 @@
+$cc-co-multi-select-list-font-family: $cc-font-family !default;
+$cc-co-multi-select-list-font-size: $cc-font-size-default !default;
 @import 'ej2-base/styles/material.scss';
 @import 'ej2-buttons/styles/material.scss';
 @import 'ej2-dropdowns/styles/material.scss';

package/lib/components/multi-select-list/style/_theme.scss

@@ -1,3 +1,7 @@
 @include export-module('cc-multi-select-list-theme') {
-
+  .co-multi-select-list {
+    input {
+      color: blue;
+    }
+  }
 }

package/lib/components/validation-error/style/_layout.scss

@@ -2,8 +2,11 @@
   .co-validation-error {
     font-family: $cc-validation-error-font-family;
     font-size: $cc-validation-error-font-size;
-    display: block;
-    position: absolute;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 10px;
+    position: fixed;
     padding: $cc-validation-error-padding;
     min-height: 20px;
     min-width: 200px;
@@ -32,6 +35,11 @@
       z-index: 1;
     }
   }
+  .validation-error-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 

package/lib/components/validation-error/validation-error.component.d.ts

@@ -1,4 +1,10 @@
+import { IconCacheService } from "../icon/icon-cache.service";
 export declare class ValidationErrorComponent {
+    icons: IconCacheService;
+    readonly Icons: any;
     error: string;
+    top: number;
+    left: number;
     showClass(): boolean;
+    constructor(icons: IconCacheService);
 }

package/lib/style/_input.mixins.scss

@@ -6,6 +6,7 @@
   .required-indicator {
     display: none;
     position: absolute;
+    background: transparent;
     top: $cc-input-required-mark-width-height;
     right: $cc-input-required-mark-width-height;
     pointer-events: none;
@@ -16,12 +17,12 @@
       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;
     }
   }
   &:not(.custom-height) {
-    height: $cc-item-size - 8px;
+    height: $cc-item-size - 10px;
     padding-bottom: 7px;
     border-bottom: 1px solid;
     border-color: $cc-color-border;
@@ -41,7 +42,7 @@
     label {
       width: 100%;
       color: $cc-color-label;
-      font-size: 13px;
+      font-size: $cc-font-size-input-label;
       position: absolute;
       top: $cc-item-size / 2;
       transform: translateY(-50%);

package/lib/style/_variables.scss

@@ -82,11 +82,13 @@ $cc-shadow-size-small: 5px !default;
 $cc-item-size-very-small: 20px !default;
 $cc-action-size: 40px !default;
 
-$cc-font-size-input-label: 11px !default;
+$cc-font-size-input-label: 13px !default;
 $cc-font-size-small: 13px !default;
 $cc-font-size-default: 15px !default;
 $cc-font-size-medium: 12px !default;
 
+$cc-input-margin-top: 16px !default;
+
 $cc-popup-background-dark: #484F60 !default;
 $cc-popup-background-white: #FFFFFF !default;
 $cc-popup-background-grey: #CFD0D1 !default;
@@ -103,3 +105,41 @@ $cc-pretty-hover-transition-time: 0.14s !default;
 $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;
+$input-active-border-color: transparent;
+$input-group-border-type-focus: none;
+$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.18",
+  "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';