@colijnit/corecomponents_v12 12.0.103 → 12.0.104

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

@@ -0,0 +1,91 @@
+@include export-module('co-base-input-date-picker') {
+  .co-base-input-date-picker {
+    .date-picker-container {
+      position: relative;
+    }
+
+    .date-picker-input {
+      padding: 5px;
+      border: 1px solid #ccc;
+      font-size: 16px;
+    }
+
+    .calendar {
+
+      top: 30px;
+      left: 0;
+      width: 230px;
+      padding: 10px;
+      background-color: #fff;
+      border: 1px solid #ccc;
+      box-shadow: 0 0 5px #ccc;
+      z-index: 1;
+    }
+
+    .calendar-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .calendar-header span {
+      cursor: pointer;
+    }
+
+    .calendar-body {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      grid-gap: 5px;
+    }
+
+    .calendar-date {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 40px;
+      border: 1px solid #ccc;
+      cursor: pointer;
+    }
+
+    .day-names {
+      display: contents;
+    }
+
+    .weekday {
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+
+    .day-number {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .calendar-date:hover {
+      background-color: #f0f0f0;
+    }
+
+    .calendar-date.selected {
+      background-color: #007bff;
+      color: #fff;
+    }
+
+    .month-selection {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-gap: 5px;
+    }
+
+    .year-selection {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-gap: 5px;
+    }
+
+  }
+}

package/lib/components/base-input-date-picker/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('co-base-input-date-picker') {
+  .co-base-input-date-picker {
+  }
+}

package/lib/components/base-input-date-picker/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

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

@@ -0,0 +1,5 @@
+@include export-module('co-input-date-picker') {
+  .co-input-date-picker {
+
+  }
+}

package/lib/components/co-input-date-picker/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

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

@@ -0,0 +1,18 @@
+@include export-module('co-input-date-range-picker') {
+  .co-input-date-range-picker {
+
+    .input-date-range-calendar-wrapper {
+      display: flex;
+      justify-content: space-between;
+      width: 240px;
+    }
+
+    .left-calendar {
+      display: inline-block;
+    }
+
+    .right-calendar {
+      display: inline-block;
+    }
+  }
+}

package/lib/components/co-input-date-range-picker/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

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

@@ -12,7 +12,7 @@ $cc-co-filter-item-header-border-radius: 20px 20px 0 0 !default;
 $cc-co-filter-item-header-border-color: #DCE4EA !default;
 $cc-co-filter-item-header-icon-size: 30px !default;
 
-$cc-co-filter-item-collapsible-content-padding: 0 10px !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-collection-results-container-padding: 10px !default;

package/lib/components/filter-item/style/_theme.scss

@@ -11,7 +11,7 @@
     }
 
     .collapsible-header {
-      border-bottom: 1px solid $cc-co-filter-item-header-border-color;
+      border-bottom: none;
     }
 
     .co-filter-item-collection-results {
@@ -20,6 +20,9 @@
 
     .clickable {
       color:$cc-co-filter-item-clickable-color;
+      span {
+        color:$cc-co-filter-item-clickable-color;
+      }
     }
   }
 }

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

@@ -30,9 +30,6 @@
 
       &.show {
         opacity: 1;
-        //animation-duration: 800ms;
-        //animation-timing-function: ease;
-        //animation-name: checkmark;
         transform: scaleX(-1) rotate(135deg);
         height: $cc-input-checkbox-check-mark-height;
         width: $cc-input-checkbox-check-mark-width;
@@ -40,7 +37,7 @@
         border-right: $cc-input-checkbox-check-mark-thickness solid $cc-input-checkbox-check-mark-color;
         border-top: $cc-input-checkbox-check-mark-thickness solid $cc-input-checkbox-check-mark-color;
         content: '';
-        left: $cc-input-checkbox-check-mark-width * .3;
+        left: $cc-input-checkbox-check-mark-width * .2;
         top: $cc-input-checkbox-check-mark-height / 1.6;
         position: absolute;
       }

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

@@ -4,7 +4,8 @@
       border-color: $cc-input-checkbox-border-color;
       background-color: $cc-input-checkbox-background-color;
       &.checked {
-        border-color: $cc-input-checkbox-check-mark-color;
+        border-color: $cc-checkbox-check-background-color;
+        background-color: $cc-checkbox-check-background-color;
       }
     }
   }

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

@@ -0,0 +1,22 @@
+import { ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { BaseInputComponent } from "../base/base-input.component";
+export declare class ListOfValuesPopupComponent extends BaseInputComponent<any> implements OnInit {
+    showClass(): boolean;
+    chosenOption: EventEmitter<any>;
+    closePopup: EventEmitter<any>;
+    displayField: string;
+    searchPlaceholder: string;
+    customCssClass: string;
+    searchDisabled: boolean;
+    parentForOverlay: ElementRef;
+    set collection(value: any[]);
+    get collection(): any[];
+    filteredOptions: any[];
+    searchTerm: string;
+    selectedModel: string;
+    private _collection;
+    ngOnInit(): void;
+    filterOptions(): void;
+    onOptionClick(option: any): void;
+    optionClicked(): void;
+}

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

@@ -0,0 +1,35 @@
+import { ElementRef, OnInit } from '@angular/core';
+import { BaseInputComponent } from "../base/base-input.component";
+import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
+export declare class ListOfValuesComponent extends BaseInputComponent<any> implements OnInit {
+    readonly icons: typeof CoreComponentsIcon;
+    parentForOverlay: ElementRef;
+    multiselect: boolean;
+    showClass(): boolean;
+    displayField: string;
+    set collection(value: any[]);
+    get collection(): any[];
+    searchPlaceholder: string;
+    label: string;
+    customCssClass: string;
+    searchDisabled: boolean;
+    selectedOptions: any[];
+    filteredOptions: any[];
+    searchTerm: string;
+    isSelectOpen: boolean;
+    state: string;
+    searchClicked: boolean;
+    multiselectTags: any[];
+    selectedModel: string;
+    chosenOption: any;
+    private _collection;
+    ngOnInit(): void;
+    filterOptions(): void;
+    onOptionClick(option: any): void;
+    toggleSelect(): void;
+    multiselectOkClick(): void;
+    createMultiSelectTags(tags: any): void;
+    openMultiselectSearch(): void;
+    optionChosen(option: any): void;
+    closePopup(): void;
+}

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

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

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

@@ -1,24 +1,38 @@
 @include export-module('co-list-of-values') {
   .co-list-of-values {
-    @include input;
+    //@include input;
+    z-index: 999;
+    font-family: $cc-co-input-text-font-family;
+    font-size: $cc-co-input-text-font-size;
+
+    .lov-container {
+      width: $cc-co-list-of-values-lov-options-container;
+    }
 
     &:before, &:after {
       background: transparent;
     }
 
     .lov-search {
+      @include input;
       width: 100%;
     }
 
+    .lov-container-child {
+      width: inherit;
+    }
+
     .lov-options {
-      position: sticky;
-      z-index: 90008000000000088;
-      max-height: 150px;
+      width: inherit;
+      overflow: hidden;
+      position: $cc-co-list-of-values-lov-options-position;
+      z-index: $cc-co-list-of-values-lov-options-z-index;
+      max-height: $cc-co-list-of-values-lov-options-max-height;
       overflow-y: auto;
-      background-color: #fff;
-      border: 1px solid #ccc;
-      border-top: none;
-      border-radius: 0 0 4px 4px;
+      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: 2px;
     }
 
     .lov-options ul {
@@ -26,12 +40,14 @@
       padding: 0;
       margin: 0;
       cursor: pointer;
+      user-select: none;
     }
 
     .lov-options li {
       display: flex;
-      padding: 8px;
-      border-bottom: 1px solid #ccc;
+      padding: $cc-co-list-of-values-lov-options-li-padding;
+      border-radius: 5px;
+      margin: 5px;
     }
 
     .lov-options li:last-child {
@@ -39,11 +55,12 @@
     }
 
     .lov-options li:hover {
-      background-color: #f5f5f5;
+      background-color: $cc-co-list-of-values-lov-options-li-hover;
     }
 
     .lov-options li.selected {
-      background-color: #ccc;
+      background-color: $cc-co-list-of-values-lov-options-li-selected;
+      color: $cc-co-list-of-values-lov-options-li-selected-text-color;
     }
 
     .lov-options-checkbox {
@@ -51,7 +68,7 @@
     }
 
     .arrow-icon {
-      border-top: 8px solid #888;
+      border-top: $cc-co-list-of-values-lov-arrow-icon-border;
       border-left: 6px solid transparent;
       border-right: 6px solid transparent;
       transform: translateY(-50%);
@@ -61,6 +78,77 @@
 
     .search-wrapper {
       display: flex;
+      border-radius: 5px;
+    }
+
+    .search-wrapper-multiselect {
+      border: 3px solid skyblue;
+      background: white;
+      border-radius: 5px;
+    }
+
+    .tag-wrapper {
+      min-height: 35px
+    }
+
+    .tag-ul-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      place-content: flex-start;
+    }
+
+    .tag {
+      border: 3px solid skyblue;
+      border-radius: 5px;
+      list-style: none;
+      background: skyblue;
+      margin: 5px;
+    }
+  }
+
+  .co-list-of-values-popup {
+    .lov-options {
+      width: inherit;
+      overflow: hidden;
+      position: $cc-co-list-of-values-lov-options-position;
+      z-index: $cc-co-list-of-values-lov-options-z-index;
+      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: 2px;
+    }
+
+    .lov-options ul {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .lov-options li {
+      display: flex;
+      padding: $cc-co-list-of-values-lov-options-li-padding;
+      border-radius: 5px;
+      margin: 5px;
+    }
+
+    .lov-options li:last-child {
+      border-bottom: none;
+    }
+
+    .lov-options li:hover {
+      background-color: $cc-co-list-of-values-lov-options-li-hover;
+    }
+
+    .lov-options li.selected {
+      background-color: $cc-co-list-of-values-lov-options-li-selected;
+      color: $cc-co-list-of-values-lov-options-li-selected-text-color;
     }
   }
 }

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

@@ -0,0 +1,15 @@
+$cc-co-input-text-font-family: $cc-font-family !default;
+$cc-co-input-text-font-size: $cc-font-size-default !default;
+$cc-co-list-of-values-lov-options-container: 320px !default;
+$cc-co-list-of-values-lov-options-position: fixed !default;
+$cc-co-list-of-values-lov-options-z-index: 99 !default;
+$cc-co-list-of-values-lov-options-max-height: 150px !default;
+$cc-co-list-of-values-lov-options-background-color: #fff !default;
+$cc-co-list-of-values-lov-options-border: 1px solid #ccc !default;
+$cc-co-list-of-values-lov-options-border-radius: 10px !default;
+$cc-co-list-of-values-lov-options-li-border-bottom: 1px solid #ccc !default;
+$cc-co-list-of-values-lov-options-li-padding: 8px !default;
+$cc-co-list-of-values-lov-options-li-hover: $cc-color-hover !default;
+$cc-co-list-of-values-lov-options-li-selected: $cc-color-grey !default;
+$cc-co-list-of-values-lov-options-li-selected-text-color: $cc-color-font !default;
+$cc-co-list-of-values-lov-arrow-icon-border: 8px solid $cc-color-grey !default;

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

@@ -0,0 +1,21 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { BaseInputComponent } from "../base/base-input.component";
+import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
+export declare class ListOfValuesMultiselectSearch extends BaseInputComponent<any> implements OnInit {
+    readonly icons: typeof CoreComponentsIcon;
+    showClass(): boolean;
+    collection: any;
+    returnChosenCollection: any[];
+    chosenCollection: EventEmitter<any[]>;
+    okButtonClicked: EventEmitter<boolean>;
+    selectedCollection: any[];
+    selectedOptions: any[];
+    allOptionsSelected: boolean;
+    searchTerm: string;
+    get filteredCollection(): any;
+    ngOnInit(): void;
+    onOptionClick(option: any): void;
+    okClicked(): void;
+    onToggleSelectAll(): void;
+    searchCollection(): void;
+}

package/lib/components/list-of-values-multiselect-search/list-of-values-multiselect-search.module.d.ts

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

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

@@ -0,0 +1,69 @@
+@include export-module('co-list-of-values-multiselect-search') {
+  .co-list-of-values-multiselect-search {
+
+    .list-of-values-multiselect-search {
+      flex-direction: column;
+      box-sizing: border-box;
+      display: flex;
+      position: fixed;
+    }
+
+    .list-of-values-multiselect-search-deselect {
+      display: flex;
+      user-select: none;
+      cursor: pointer;
+      justify-content: space-between;
+
+      span {
+        align-self: center;
+      }
+    }
+
+    .list-of-values-multiselect-list {
+      background-color: white;
+      overflow: auto;
+      max-height: 200px;
+
+      .co-input-checkbox {
+        float: left;
+      }
+
+      ul {
+        list-style-type: none;
+        padding: 10px;
+        margin: 0;
+        cursor: pointer;
+        user-select: none;
+      }
+
+      li {
+        border-radius: 5px;
+        margin: 5px;
+        display: flex;
+        padding: $cc-co-list-of-values-multiselect-search-options-li-padding;
+      }
+
+      li:hover {
+        background-color: $cc-co-list-of-values-multiselect-search-li-hover;
+
+      }
+    }
+
+    .list-of-values-multiselect-ok-button {
+      display: flex;
+      cursor: pointer;
+      user-select: none;
+      justify-content: end;
+    }
+
+    .list-of-values-multiselect-options {
+      position: $cc-co-list-of-values-multiselect-search-options-position;
+      z-index: $cc-co-list-of-values-multiselect-search-options-z-index;
+      overflow-y: auto;
+      background-color: $cc-co-list-of-values-multiselect-search-options-background-color;
+      border: $cc-co-list-of-values-multiselect-search-options-border;
+      border-radius: $cc-co-list-of-values-multiselect-search-options-border-radius;
+      margin-top: 2px;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+$cc-co-list-of-values-multiselect-search-li-hover: rgba(135, 206, 235, 0.40) !default;
+$cc-co-list-of-values-multiselect-search-options-position: sticky !default;
+$cc-co-list-of-values-multiselect-search-options-z-index: 99 !default;
+$cc-co-list-of-values-multiselect-search-options-max-height: 150px !default;
+$cc-co-list-of-values-multiselect-search-options-background-color: #fff !default;
+$cc-co-list-of-values-multiselect-search-options-border: 1px solid #ccc !default;
+$cc-co-list-of-values-multiselect-search-options-border-radius: 10px !default;
+$cc-co-list-of-values-multiselect-search-options-li-padding: 8px !default;

package/lib/components/list-of-values-multiselect-search/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

@@ -12,11 +12,12 @@
         border-radius: $cc-simple-grid-input-checkbox-border-radius;
         border-color: $cc-simple-grid-input-checkbox-color;
         background-color: $cc-simple-grid-input-checkbox-color;
-        opacity: 0.2;
+        opacity: 1;
         margin-right: 0;
         &.checked {
           opacity: 1;
-          border-color: $cc-simple-grid-input-checkbox-color;
+          border-color: $cc-simple-grid-input-checkbox-checked-color;
+          background-color: $cc-simple-grid-input-checkbox-checked-color;
         }
         .checkmark {
           opacity: 1;
@@ -28,7 +29,7 @@
           border-right: $cc-simple-grid-input-checkbox-check-mark-thickness solid $cc-simple-grid-input-checkbox-check-mark-color;
           border-top: $cc-simple-grid-input-checkbox-check-mark-thickness solid $cc-simple-grid-input-checkbox-check-mark-color;
           content: '';
-          left: $cc-simple-grid-input-checkbox-check-mark-width * .2;
+          left: $cc-simple-grid-input-checkbox-check-mark-width * .15;
           top: $cc-simple-grid-input-checkbox-check-mark-height / 1.4;
           &.show {
           }

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

@@ -32,9 +32,10 @@ $cc-simple-grid-pagination-background-color: white !default;
 $cc-simple-grid-pagination-bar-margin: 10px 0 0 0 !default;
 
 $cc-simple-grid-input-checkbox-height: 18px !default;
-$cc-simple-grid-input-checkbox-color: #797979;
+$cc-simple-grid-input-checkbox-color: #F5F5FC;
+$cc-simple-grid-input-checkbox-checked-color: #1a73e8;
 $cc-simple-grid-input-checkbox-check-mark-width: $cc-simple-grid-input-checkbox-height * .35 !default;
 $cc-simple-grid-input-checkbox-check-mark-height: $cc-simple-grid-input-checkbox-height * .55 !default;
 $cc-simple-grid-input-checkbox-check-mark-color: white !default;
 $cc-simple-grid-input-checkbox-check-mark-thickness: 2px !default;
-$cc-simple-grid-input-checkbox-border-radius: 100% !default;
+$cc-simple-grid-input-checkbox-border-radius: 0 !default;

package/lib/directives/overlay/overlay.directive.d.ts

@@ -3,6 +3,7 @@ import { OverlayParentDirective } from "./overlay-parent.directive";
 export declare class OverlayDirective implements OnDestroy, OnInit {
     set parent(value: OverlayParentDirective | ElementRef);
     keepInView: boolean;
+    inheritWidth: boolean;
     private _elementRef;
     private _resizeObserver;
     private _intersectionObserver;

package/lib/service/overlay.service.d.ts

@@ -5,6 +5,6 @@ export declare class OverlayService {
     private _injector;
     private _componentRef;
     constructor(_componentFactoryResolver: ComponentFactoryResolver, _appRef: ApplicationRef, _injector: Injector);
-    createComponent(compClass: any, inputs: any): void;
+    createComponent(compClass: any, inputs: any, events?: any): void;
     removeComponent(): void;
 }

package/lib/style/_variables.scss

@@ -24,6 +24,8 @@ $cc-color-dark: #22313C !default;
 $cc-color-main: #1060AD !default;
 $cc-color-light-accent: #DCE4EA !default;
 $cc-color-light: #FFFFFF !default;
+$cc-color-blue: #1A73E8 !default;
+$cc-color-grey: #F5F5FC !default;
 $cc-color-icons-dark: #29363F !default;
 $cc-color-form-input-border: #EDEBEC !default;
 $cc-color-label: #8083A3 !default;
@@ -47,7 +49,7 @@ $cc-color-input-important: $cc-color-light !default;
 $cc-color-input-info: #e4e6eb !default;
 $cc-color-active-accent: #8faba6 !default;
 $cc-color-less-light: #F7FAFA !default;
-$cc-color-border: #DCE4EA !default;
+$cc-color-border: #F5F5FC !default;
 $cc-color-border-light: #f7f5f4 !default;
 $cc-color-form-input-background-focus: #BBD9E6 !default;
 $cc-color-inactive: #A5CBDA !default;
@@ -116,21 +118,21 @@ $cc-input-border-width: 1px !default;
 $cc-input-border-color: $cc-color-border !default;
 $cc-input-border-radius: 5px !default;
 $cc-input-border-hover-style: solid !default;
-$cc-input-border-hover-width: 2px !default;
+$cc-input-border-hover-width: 1px !default;
 $cc-input-border-hover-color: $cc-input-hover-color !default;
 
 $cc-input-focused-border-style: solid !default;
-$cc-input-focused-border-width: 2px !default;
+$cc-input-focused-border-width: 1px !default;
 $cc-input-focused-border-color: $cc-color-action;
 /**********/
 
 /* checkbox */
 $cc-checkbox-border-radius: 0 !default;
-$cc-checkbox-background-color: $cc-color-light !default;
+$cc-checkbox-background-color: $cc-color-grey !default;
 $cc-checkbox-border-color: $cc-color-border !default;
-$cc-checkbox-check-background-color:  $cc-color-light !default;
-$cc-checkbox-check-border-color: #5FDCB3 !default;
-$cc-checkbox-check-color: #5FDCB3 !default;
+$cc-checkbox-check-background-color:  $cc-color-blue !default;
+$cc-checkbox-check-border-color: $cc-color-blue !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;