@colijnit/corecomponents_v12 12.1.2 → 12.1.3

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

@@ -40,10 +40,10 @@
       align-items: center;
       font-family: $cc-co-dialog-header-font-family;
       font-size: $cc-co-dialog-header-font-size;
+      padding: $cc-co-dialog-header-padding;
       .dialog-header-caption {
         width: 100%;
         font-weight: $cc-co-dialog-header-font-weight;
-        padding: $cc-co-dialog-header-padding;
         margin: $cc-co-dialog-header-margin;
         border-style: $cc-co-dialog-header-border-style;
         border-width: $cc-co-dialog-header-border-width;
@@ -52,16 +52,13 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        position: absolute;
-        top: 0;
-        right: 5px;
-        transform: translateY(-50%);
-        width: 36px;
-        height: 36px;
+        width: $cc-co-dialog-header-close-button-size;
+        height: $cc-co-dialog-header-close-button-size;
         border-radius: 5px;
-        .co-icon [fill] {
-          fill: white;
-        }
+        position: absolute;
+        right: $cc-co-dialog-header-close-button-right;
+        top: $cc-co-dialog-header-close-button-top;
+        background: $cc-co-dialog-header-close-button-background-color;
       }
     }
     .dialog-content {
@@ -79,7 +76,27 @@
       margin: $cc-co-dialog-footer-margin;
       border-style: $cc-co-dialog-footer-border-style;
       border-width: $cc-co-dialog-footer-border-width;
-
+      co-button ::ng-deep {
+        cursor: pointer;
+        &.ok-click  {
+          co-icon {
+            svg {
+              path {
+                fill: #5FDCB3;
+              }
+            }
+          }
+        }
+        &.cancel-click {
+          co-icon {
+            svg {
+              path {
+                fill: #6b6e8a;
+              }
+            }
+          }
+        }
+      }
     }
     .dialog-close-button {
       cursor: pointer;

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

@@ -11,7 +11,10 @@ $cc-co-dialog-header-margin: 0 0 10px 0 !default;
 $cc-co-dialog-header-border-style: solid !default;
 $cc-co-dialog-header-border-color: $cc-color-border !default;
 $cc-co-dialog-header-border-width: 0 0 1px 0 !default;
-$cc-co-dialog-header-close-button-background-color: #4682b4 !default;
+$cc-co-dialog-header-close-button-background-color: transparent !default;
+$cc-co-dialog-header-close-button-right: 20px !default;
+$cc-co-dialog-header-close-button-top: 10px !default;
+$cc-co-dialog-header-close-button-size: 30px !default;
 $cc-co-dialog-min-width: 250px !default;
 $cc-co-dialog-background-color: $cc-color-light !default;
 $cc-co-dialog-box-shadow: 0 0 10px #484f6040 !default;

package/lib/components/input-date-range-picker/input-date-range-picker.component.d.ts

@@ -6,6 +6,7 @@ export declare class InputDateRangePickerComponent extends BaseInputDatePickerDi
     showClass(): boolean;
     handleDatesSelected(dates: Date[]): void;
     handleSecondDateSelected(): void;
+    clearDate(index: number): void;
     toggleCalendar(): void;
     handleFirstDateChanged(value: string): void;
     handleSecondDateChanged(value: string): void;

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

@@ -24,18 +24,19 @@ export declare class ListOfValuesPopupComponent implements OnInit {
     get searchTerm(): string;
     viewModels: lovViewModel[];
     viewModelsMain: lovViewModel[];
+    highLightModel: lovViewModel;
     private _collection;
     private _searchTerm;
     private _lovItems;
-    private _activeIndex;
     private _searchInput;
     ngOnInit(): void;
+    handleInputKeyDown(event: KeyboardEvent): boolean;
     filterViewModels(): void;
-    selectViewModel(viewModel: lovViewModel): void;
-    selectOptionByActiveIndex(closePopup?: boolean): void;
+    selectViewModel(viewModel: lovViewModel, closePopup?: boolean): void;
+    selectModelByViewModel(viewModel: lovViewModel, closePopup?: boolean): void;
+    selectOptionAndClosePopup(): void;
     selectOptions(): void;
-    selectNextOption(): void;
-    selectPreviousOption(): void;
+    selectNextOption(back?: boolean): void;
     private _prepareViewModelsMain;
     private _prepareViewModels;
     private _scrollIntoView;

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

@@ -32,5 +32,6 @@ export declare class ListOfValuesComponent extends BaseInputComponent<any> imple
     removeOptionFromModel(chip: any): void;
     optionChosen(option: any): void;
     closePopup(): void;
+    checkModel(): void;
     private _setSelectedModel;
 }

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

@@ -76,17 +76,26 @@
     font-family: $cc-co-list-of-values-font-family;
     font-size: $cc-co-list-of-values-font-size;
     .lov-options {
+      display: flex;
+      flex-direction: column;
       overflow: hidden;
       position: fixed;
       max-height: $cc-co-list-of-values-lov-options-max-height;
-      overflow-y: auto;
       background-color: $cc-co-list-of-values-lov-options-background-color;
       border: $cc-co-list-of-values-lov-options-border;
       border-radius: $cc-co-list-of-values-lov-options-border-radius;
-      margin-top: $cc-co-list-of-values-lov-options-margin;
       z-index: 99999999;
     }
-    .lov-options ul {
+    .co-input-search {
+      display: flex;
+      flex-shrink: 0;
+      width: 100%;
+      .co-input-text {
+        width: 100%;
+      }
+    }
+    .dropdown-list {
+      overflow-y: auto;
       list-style-type: none;
       padding: 0;
       margin: 0;

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

@@ -62,6 +62,10 @@
   }
   .co-simple-grid-cell {
     width: 100%;
+    .co-icon {
+      width: $cc-simple-grid-cell-icon-size;
+      height: $cc-simple-grid-cell-icon-size;
+    }
   }
   .simple-grid-column-cell-value {
     //height: 100%;

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

@@ -27,6 +27,7 @@ $cc-simple-grid-row-border-width: 10px 0 0 0 !default;
 $cc-simple-grid-cell-padding: 15px 5px !default;
 $cc-simple-grid-row-height: auto !default;
 $cc-simple-grid-row-even-background: #F5F5FC !default;
+$cc-simple-grid-cell-icon-size: 20px !default;
 
 $cc-simple-grid-pagination-background-color: white !default;
 $cc-simple-grid-pagination-bar-margin: 10px 0 0 0 !default;

package/package.json

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