@colijnit/corecomponents_v12 12.2.0 → 12.2.1

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

@@ -73,6 +73,7 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     customWidth: boolean;
     customHeight: boolean;
     noTriangleGraphic: boolean;
+    keepFocussed: boolean;
     halfWidth: boolean;
     fullWidth: boolean;
     excludeUserModelChange: boolean;

package/lib/components/grid-toolbar/style/_material-definition.scss

@@ -8,7 +8,7 @@ $cc-grid-toolbar-padding: 0 !default;
 
 $cc-grid-toolbar-button-size: 30px !default;
 $cc-grid-toolbar-button-background-color: white !default;
-$cc-grid-toolbar-button-color: black !default;
+$cc-grid-toolbar-button-color: #009EE0 !default;
 $cc-grid-toolbar-button-border-style: solid !default;
 $cc-grid-toolbar-button-border-color: black !default;
 $cc-grid-toolbar-button-border-width: 1px !default;

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

@@ -20,6 +20,11 @@
         text-align: right;
       }
     }
+    .input-input-hidden { // positioned way of so it looks hidden
+      position: absolute;
+      top: -200px;
+      opacity: 0;
+    }
     &.hide-arrows {
       input::-webkit-outer-spin-button,
       input::-webkit-inner-spin-button {
@@ -83,6 +88,10 @@
       text-overflow: ellipsis;
       width: 100%;
     }
+    .input-content-wrapper {
+      width: 100%;
+      padding: $cc-input-content-padding;
+    }
     &.has-left-icon {
       .input-text-left-icon {
         border-radius: $cc-input-border-radius 0 0 $cc-input-border-radius;

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

@@ -6,7 +6,7 @@ $cc-co-input-text-border-color: $cc-color-border !default;
 $cc-co-input-placeholder-color: $cc-color-border !default;
 $cc-co-input-placeholder-font-style: italic !default;
 $cc-co-input-text-small-height: 45px !default;
-$cc-co-input-text-icon-max-height: 80px !default;
+$cc-co-input-text-icon-max-height: $cc-item-size !default;
 $cc-co-input-text-icon-size: 50% !default;
 $cc-co-input-text-icon-margin-number: 0 !default;
 $cc-co-input-text-spacer-width: $cc-input-border-width !default;

package/lib/components/list-of-values/list-of-values-popup.component.d.ts

@@ -5,6 +5,7 @@ export interface lovViewModel {
     model: any;
 }
 export declare class ListOfValuesPopupComponent implements OnInit {
+    private _elementRef;
     set lovItems(children: any);
     dropDownList: ElementRef;
     set inputSearch(component: InputSearchComponent);
@@ -19,6 +20,7 @@ export declare class ListOfValuesPopupComponent implements OnInit {
     get collection(): any[];
     modelChange: EventEmitter<any>;
     closePopup: EventEmitter<Event>;
+    keyDown: EventEmitter<KeyboardEvent>;
     showClass(): boolean;
     set searchTerm(value: string);
     get searchTerm(): string;
@@ -29,6 +31,7 @@ export declare class ListOfValuesPopupComponent implements OnInit {
     private _searchTerm;
     private _lovItems;
     private _searchInput;
+    constructor(_elementRef: ElementRef);
     ngOnInit(): void;
     handleInputKeyDown(event: KeyboardEvent): boolean;
     filterViewModels(): void;

package/lib/components/list-of-values/list-of-values.component.d.ts

@@ -16,7 +16,6 @@ export declare class ListOfValuesComponent extends BaseInputComponent<any> imple
     label: string;
     customCssClass: string;
     searchDisabled: boolean;
-    closeAfterOptionChosen: boolean;
     showClass(): boolean;
     isSelectOpen: boolean;
     state: string;

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

@@ -6,12 +6,12 @@
     font-size: $cc-co-list-of-values-font-size;
     height: $cc-co-list-of-values-height;
     background: $cc-co-list-of-values-background-color;
-    border-radius: $cc-co-list-of-values-border-radius;
+    border-radius: $cc-input-border-radius;
     overflow: hidden;
     &:before {
       content: '';
-      box-shadow: inset 0 0 0 $cc-co-list-of-values-border-width $cc-co-list-of-values-border-color;
-      border-radius: $cc-co-list-of-values-border-radius;
+      box-shadow: inset 0 0 0 $cc-input-border-width $cc-input-border-color;
+      border-radius: $cc-input-border-radius;
       position: absolute;
       pointer-events: none;
       top: 0;
@@ -21,9 +21,10 @@
       z-index: 1;
     }
     &:not(.read-only):hover {
-      @include hover($cc-co-list-of-values-border-hover-style, $cc-co-list-of-values-border-hover-width, $cc-co-list-of-values-border-hover-color, $cc-co-list-of-values-border-radius);
+      @include hover($cc-input-border-hover-style, $cc-input-border-hover-width, $cc-input-border-hover-color, $cc-input-border-radius);
     }
     .co-input-text {
+      height: 100%;
       &:before {
         box-shadow: none;
       }
@@ -43,9 +44,11 @@
         border-radius: $cc-co-list-of-values-right-icon-radius;
       }
     }
-    //&.cc-input-focused:not(.no-focus-line) {
-    //  @include focus($cc-co-list-of-values-border-focus-style, $cc-co-list-of-values-border-focus-width, $cc-co-list-of-values-border-focus-color, $cc-co-list-of-values-border-radius);
-    //}
+    @if $cc-input-show-focus-line != false {
+      &.cc-input-focused:not(.no-focus-line) {
+        @include focus($cc-input-focused-border-style, $cc-input-focused-border-width, $cc-input-focused-border-color, $cc-input-border-radius);
+      }
+    }
     .multiselect-chips-wrapper {
       display: flex;
       flex-wrap: wrap;
@@ -77,6 +80,18 @@
           fill: $cc-co-list-of-values-multiselect-chip-delete-icon-color;
         }
       }
+      .input-text-clear-button {
+        display: flex;
+        visibility: hidden;
+        cursor: pointer;
+        height: $cc-input-clear-icon-size;
+        width: $cc-input-clear-icon-size;
+        align-self: end;
+        padding: $cc-input-clear-icon-padding;
+        &.show {
+          visibility: visible;
+        }
+      }
     }
     &.multi-select.hasvalue {
       height: auto;

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

@@ -3,22 +3,12 @@ $cc-co-list-of-values-font-size: $cc-font-size-default !default;
 $cc-co-list-of-values-height: $cc-item-size !default;
 $cc-co-list-of-values-background-color: $cc-color-input-background-color !default;
 $cc-co-list-of-values-border-style: solid !default;
-$cc-co-list-of-values-border-width: 1px !default;
-$cc-co-list-of-values-border-color: $cc-input-border-color !default;
-$cc-co-list-of-values-border-radius: 5px !default;
-$cc-co-list-of-values-border-hover-style: solid !default;
-$cc-co-list-of-values-border-hover-width: 2px !default;
-$cc-co-list-of-values-border-hover-color: $cc-color-input-lov !default;
 $cc-co-list-of-values-right-icon-spacer-width: 0 !default;
 $cc-co-list-of-values-right-icon-width: 24px !default;
 $cc-co-list-of-values-right-icon-background: #f5f5fc !default;
 $cc-co-list-of-values-right-icon-radius: 100% !default;
 $cc-co-list-of-values-right-icon-padding: 5px !default;
 
-$cc-co-list-of-values-border-focus-style: solid !default;
-$cc-co-list-of-values-border-focus-width: 1px !default;
-$cc-co-list-of-values-border-focus-color: $cc-color-input-lov !default;
-
 $cc-co-list-of-values-lov-options-max-height: 250px !default;
 $cc-co-list-of-values-lov-options-background-color: #fff !default;
 $cc-co-list-of-values-lov-options-border: 1px solid $cc-input-border-color !default;

package/lib/style/_variables.scss

@@ -108,6 +108,7 @@ $cc-input-placeholder-font-style: normal !default;
 $cc-input-width: 300px !default;
 $cc-input-margin-left: 10px !default;
 $cc-input-input-padding: 0 0 5px 10px !default;
+$cc-input-content-padding: 20px 0 25px 0 !default;
 $cc-input-margin-top: 16px !default;
 $cc-input-show-focus-line: true !default;
 $cc-input-focus-line-color: $cc-color-action !default;

package/package.json

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