@colijnit/corecomponents_v12 12.1.2 → 12.1.4

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/filter-item/style/_layout.scss

@@ -27,6 +27,16 @@
           width: $cc-co-filter-item-header-icon-size;
         }
       }
+      .collapsible-header {
+        .collapsible-button {
+          border-color: $cc-co-filter-item-collapsible-header-search-border;
+          color: $cc-co-filter-item-collapsible-header-search-color;
+          &:hover {
+            background: $cc-co-filter-item-collapsible-header-search-hover-background;
+            color: $cc-co-filter-item-collapsible-header-search-hover-color;
+          }
+        }
+      }
     }
 
     .co-filter-item-collection-content {

package/lib/components/filter-item/style/_material-definition.scss

@@ -13,8 +13,13 @@ $cc-co-filter-item-header-border-color: #DCE4EA !default;
 $cc-co-filter-item-header-border-width: 0 !default;
 $cc-co-filter-item-header-icon-size: 30px !default;
 
+
 $cc-co-filter-item-collapsible-content-padding: 0 10px 20px 10px !default;
 $cc-co-filter-item-collapsible-width: 95% !default;
+$cc-co-filter-item-collapsible-header-search-color: $cc-color-action !default;
+$cc-co-filter-item-collapsible-header-search-hover-background: $cc-color-action !default;
+$cc-co-filter-item-collapsible-header-search-border: $cc-color-action !default;
+$cc-co-filter-item-collapsible-header-search-hover-color: $cc-color-light !default;
 
 $cc-co-filter-item-collection-results-container-padding: 10px !default;
 $cc-co-filter-item-collection-results-background-color: $cc-color-light !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/input-text/style/_material-definition.scss

@@ -10,6 +10,7 @@ $cc-co-input-text-icon-max-height: 80px !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;
+$cc-co-input-text-right-spacer-width: 0 !default;
 $cc-co-input-text-spacer-color: $cc-input-border-color !default;
 //$cc-co-input-label-color: $cc-color-border !default;
 //$cc-co-input-label-font-style: normal !default;

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

@@ -32,6 +32,16 @@
           box-shadow: none;
         }
       }
+      .right-icon {
+        min-width: $cc-co-list-of-values-right-icon-spacer-width;
+      }
+      .input-text-right-icon svg {
+        width: $cc-co-list-of-values-right-icon-width;
+        height: $cc-co-list-of-values-right-icon-width;
+        padding: $cc-co-list-of-values-right-icon-padding;
+        background: $cc-co-list-of-values-right-icon-background;
+        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);
@@ -76,17 +86,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/list-of-values/style/_material-definition.scss

@@ -9,6 +9,11 @@ $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;

package/lib/components/responsive-text/responsive-text.component.d.ts

@@ -0,0 +1,4 @@
+export declare class ResponsiveTextComponent {
+    text: string;
+    showClass(): boolean;
+}

package/lib/components/responsive-text/responsive-text.module.d.ts

@@ -0,0 +1,2 @@
+export declare class ResponsiveTextModule {
+}

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

@@ -0,0 +1,9 @@
+@include export-module('co-responsive-text-layout') {
+  .co-responsive-text {
+    svg {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+@include export-module('co-responsive-text-theme') {
+  .co-responsive-text {
+  }
+}

package/lib/components/responsive-text/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

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.4",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {

package/public-api.d.ts

@@ -73,6 +73,8 @@ export * from './lib/components/view-mode-buttons/content-view-mode.enum';
 export * from './lib/components/list-of-values/list-of-values.component';
 export * from './lib/components/list-of-values/list-of-values-popup.component';
 export * from './lib/components/list-of-values/list-of-values.module';
+export * from './lib/components/responsive-text/responsive-text.component';
+export * from './lib/components/responsive-text/responsive-text.module';
 export * from './lib/pipes/price-display.pipe';
 export * from './lib/pipes/price-display-pipe.module';
 export * from './lib/pipes/filter.pipe';