@colijnit/corecomponents_v12 12.0.33 → 12.0.34

package/lib/components/base/commit-buttons/style/material.scss

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

package/lib/components/button/style/material.scss

@@ -1,7 +1,7 @@
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
+@import "../../icon/style/material";
 /*
 @import "co-ripple";
 @import "../../../style/material2/theming/palette";

package/lib/components/button-drop-down/style/material.scss

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

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

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { IconCacheService } from "../icon/icon-cache.service";
-import { LevelIndicatorLevel } from "../level-indicator/level-indicator-level.enum";
+import { IconCacheService } from '../icon/icon-cache.service';
+import { LevelIndicatorLevel } from '../level-indicator/level-indicator-level.enum';
 export declare class CardComponent {
     icons: IconCacheService;
     private _changeDetector;
@@ -15,8 +15,9 @@ export declare class CardComponent {
     readonly contentClick: EventEmitter<MouseEvent>;
     readonly infoButtonClick: EventEmitter<MouseEvent>;
     readonly magnifierButtonClick: EventEmitter<MouseEvent>;
+    showClass: boolean;
+    onHostClick(event: MouseEvent): void;
     readonly Icons: any;
     heightCard: number;
-    onHostClick(event: MouseEvent): void;
     constructor(icons: IconCacheService, _changeDetector: ChangeDetectorRef);
 }

package/lib/components/card/style/_layout.scss

@@ -0,0 +1,102 @@
+@include export-module('co-card-layout') {
+  .co-card {
+    display: block;
+    .co-card-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      //flex-shrink: 0;
+      //flex-grow: 0;
+      //width: 150px;
+      //height: 220px;
+      border-radius: 5px;
+      padding: 10px;
+      transition: all 0.14s ease-out;
+      .content-wrapper {
+        position: relative;
+        width: 100%;
+        padding-top: 100%;
+      }
+      .image {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        background-color: white;
+        border-radius: 15%;
+        overflow: hidden;
+      }
+      .check {
+        position: absolute;
+        background-color: #8faba6;
+        z-index: 1;
+        border-radius: 50%;
+        transform: scale(1.1);
+        right: 7px;
+        top: 7px;
+        ::ng-deep svg {
+          transform: scale(0.9);
+        }
+      }
+      .magnify {
+        position: absolute;
+        visibility: hidden;
+        top: 1px;
+        left: 1px;
+        z-index: 2; /* above co-icon.check */
+        ::ng-deep svg {
+          transform: scale(1.5);
+        }
+      }
+      .info {
+        position: absolute;
+        bottom: 1px;
+        right: 1px;
+      }
+      .co-level-indicator {
+        position: absolute;
+        bottom: 1px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      .description-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    }
+    &.border-hover:hover {
+      .co-card-wrapper {
+        box-shadow: 0 0 3px 2px rgba(128, 128, 128, 0.4);
+        background-color: initial;
+      }
+    }
+
+    &:hover {
+      .co-card-wrapper {
+        background-color: rgb(228, 233, 232);
+      }
+    }
+
+    &:hover co-button.magnify {
+      visibility: visible;
+    }
+    co-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+    span.description {
+      font-size: $cc-input-font-size;
+      margin-top: 10px;
+      text-align: center;
+    }
+
+    span.price {
+      //position: absolute;
+      //bottom: 10px;
+      font-weight: bold;
+    }
+  }
+}

package/lib/components/card/style/_theme.scss

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

package/lib/components/card/style/material.scss

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

package/lib/components/carousel-3d/style/material.scss

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

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

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

package/lib/components/co-dialog-wizard/style/material.scss

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

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

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

package/lib/components/co-rich-text-editor/style/material.scss

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

package/lib/components/collapsible/style/material.scss

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

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

@@ -1,6 +1,5 @@
 @import "../../../style/mixin";
 @import "../../../style/input.mixins";
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

package/lib/components/filter-item/filter-item.component.d.ts

@@ -1,14 +1,15 @@
-import { EventEmitter, OnInit } from '@angular/core';
-import { CoreComponentsIcon } from '../../core/enum/core-components-icon.enum';
-import { IconCacheService } from '../icon/icon-cache.service';
+import { EventEmitter, OnInit } from "@angular/core";
+import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
+import { FilterViewmodel } from "../../core/interface/filter-viewmodel";
+import { IconCacheService } from "../icon/icon-cache.service";
 export declare class FilterItemComponent implements OnInit {
     iconService: IconCacheService;
     icons: typeof CoreComponentsIcon;
-    set collection(value: any[]);
-    get collection(): any[];
+    set collection(value: FilterViewmodel);
+    get collection(): FilterViewmodel;
     fields: {
-        text: string;
-        value: string;
+        text: any;
+        value: any;
         count?: string;
     };
     placeholder: string;
@@ -16,24 +17,22 @@ export declare class FilterItemComponent implements OnInit {
     expanded: boolean;
     customContent: boolean;
     searchable: boolean;
-    showMore: boolean;
+    showAllResults: boolean;
     searchPlaceholder: string;
     showMoreLabel: string;
     showLessLabel: string;
-    selectionChange: EventEmitter<any>;
+    noResultsLabel: string;
+    collectionChanged: EventEmitter<any>;
     showClass(): boolean;
-    selectedCollection: any[];
-    filteredCollection: any[];
+    filteredCollection: FilterViewmodel;
     limitTo: number;
     filterText: string;
-    maxItems: number;
     private _collection;
     constructor(iconService: IconCacheService);
     ngOnInit(): void;
     setToInitialLimit(): void;
     increaseLimit(): void;
-    updateSelection(): void;
     moreToShow(): boolean;
     lessToShow(): boolean;
-    applyFilter(text: string): any[];
+    applyFilter(text: string): FilterViewmodel;
 }

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

@@ -14,6 +14,7 @@
         font-weight: $cc-co-filter-item-header-font-weight;
         padding: $cc-co-filter-item-header-padding;
       }
+
       .expand-icon-wrapper {
         .expand-icon {
           height: $cc-co-filter-item-header-icon-size;
@@ -22,28 +23,37 @@
       }
     }
 
-    .co-filter-item-collection-results {
-      max-height: 200px;
-      margin: 10px 0;
-    }
+    .co-filter-item-collection-content {
+      .no-results {
+        display: flex;
+        align-items: center;
+        height: $cc-co-filter-item-no-results-height;
+      }
+
+      .co-filter-item-collection-results {
+        margin: 10px 0;
+      }
 
-    .co-filter-item-collection-result-item {
-      display: flex;
-      align-items: center;
-      height: 25px;
-      .co-filter-item-amount {
+      .co-filter-item-collection-result-item {
         display: flex;
         align-items: center;
-        height: 100%;
-        font-size: $cc-co-filter-item-collection-result-item-amount-font-size;
-        opacity: $cc-co-filter-item-collection-result-item-amount-opacity;
-        margin: 0 0 0 5px;
+        height: $cc-co-filter-item-collection-result-item-height;
+
+        .co-filter-item-amount {
+          display: flex;
+          align-items: center;
+          height: 100%;
+          font-size: $cc-co-filter-item-collection-result-item-amount-font-size;
+          opacity: $cc-co-filter-item-collection-result-item-amount-opacity;
+          margin: 0 0 0 5px;
+        }
       }
-    }
 
-    a {
-      display: flex;
-      align-items: center;
+      a {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+      }
     }
   }
 }

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

@@ -1,5 +1,6 @@
 $cc-co-filter-item-font-family: $cc-font-family !default;
 $cc-co-filter-item-font-size: $cc-font-size-default !default;
+$cc-co-filter-item-border-color: #DCE4EA !default;
 $cc-co-filter-item-border-radius: 0 !default;
 $cc-co-filter-item-header-font-family: $cc-font-family !default;
 $cc-co-filter-item-header-font-size: $cc-font-size-default !default;
@@ -12,10 +13,10 @@ $cc-co-filter-item-header-border-color: #DCE4EA !default;
 
 $cc-co-filter-item-collection-results-container-padding: 10px !default;
 $cc-co-filter-item-collection-results-background-color: $cc-color-light !default;
-$cc-co-filter-item-collection-result-item-height: 1.8rem !default;
+$cc-co-filter-item-collection-result-item-height: 25px !default;
 $cc-co-filter-item-collection-result-item-amount-font-size: 10px !default;
 $cc-co-filter-item-collection-result-item-amount-opacity: 0.7 !default;
 
-$cc-co-filter-item-show-more-less-color: $cc-float-label-font-color !default;
-
 $cc-co-filter-item-header-icon-size: 30px !default;
+$cc-co-filter-item-no-results-height: 50px !default;
+$cc-co-filter-item-clickable-color: $cc-color-action !default;

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

@@ -4,6 +4,7 @@
 @include export-module('co-filter-item-theme') {
   .co-filter-item {
     background-color: $cc-co-filter-item-header-background-color;
+    border-bottom: 1px solid $cc-co-filter-item-border-color;
 
     .collapsible-title {
       color: $cc-co-filter-item-header-text-color;
@@ -18,8 +19,7 @@
     }
 
     .clickable {
-      cursor: pointer;
-      color: $cc-co-filter-item-show-more-less-color;
+      color:$cc-co-filter-item-clickable-color;
     }
   }
 }

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

@@ -1,4 +1,5 @@
-@import "../../../style/variables";
+@import "../../../style/mixin";
+@import "../../../style/input.mixins";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

package/lib/components/grid/style/material.scss

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

package/lib/components/grid-toolbar/style/material.scss

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

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

@@ -5,6 +5,7 @@ export declare class IconComponent {
     private _iconCache;
     set icon(value: CoreComponentsIcon);
     iconData: SafeHtml | undefined;
+    showClass: boolean;
     constructor(_iconCache: IconCacheService);
     private _setIconFromEnum;
 }

package/lib/components/icon/style/_layout.scss

@@ -0,0 +1,39 @@
+@include export-module('co-icon-layout') {
+  .co-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    flex-shrink: 0;
+    svg {
+      max-height: 100%;
+      max-width: 100%;
+      width: 100%;
+      height: 100%;
+    }
+    &.big {
+      width: 50px;
+      height: 50px;
+    }
+
+    &.light {
+      svg { // for fontawesome icons
+        fill: $cc-color-light;
+      }
+      & [fill] { // for own icons
+        fill: $cc-color-light;
+      }
+    }
+
+    &.dark [fill] {
+      svg { // for fontawesome icons
+        fill: $cc-color-dark;
+      }
+      & [fill] { // for own icons
+        fill: $cc-color-dark;
+      }
+    }
+  }
+}
+

package/lib/components/icon/style/_theme.scss

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

package/lib/components/icon/style/material.scss

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

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

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

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

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

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

@@ -1,6 +1,5 @@
 @import "../../../style/mixin";
 @import "../../../style/input.mixins";
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -1,6 +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-base/styles/_material-definition.scss';
 @import 'ej2-inputs/styles/input/_material-definition.scss';
 @import 'ej2-base/styles/material.scss';
 @import 'ej2-buttons/styles/material.scss';

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

@@ -1,6 +1,5 @@
 @import "../../../style/mixin";
 @import "../../../style/input.mixins";
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -1,6 +1,5 @@
 @import "../../../style/mixin";
 @import "../../../style/input.mixins";
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

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

@@ -1,6 +1,5 @@
 @import "../../../style/mixin";
 @import "../../../style/input.mixins";
-@import "../../../style/variables";
 @import "./material-definition";
 @import "./layout";
 @import "./theme";

package/lib/components/input-number-picker/style/material.scss

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

package/lib/components/input-radio-button/style/material.scss

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

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

@@ -4,6 +4,8 @@ import { BaseInputComponent } from '../base/base-input.component';
 export declare class InputSearchComponent extends BaseInputComponent<string> implements OnDestroy {
     readonly searchIcon: CoreComponentsIcon;
     placeholder: string;
+    iconRight: boolean;
+    noIcon: boolean;
     search: EventEmitter<string>;
     showClass(): boolean;
     handleKeyDown(event: KeyboardEvent): void;

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

@@ -1,4 +1,17 @@
 @include export-module('cc-input-search-layout') {
   .co-input-search {
+    .co-input-text {
+      border-radius: $cc-co-input-search-border-radius;
+      label {
+        font-style: $cc-co-input-search-label-font-style;
+      }
+    }
+    &.no-icon {
+      .co-input-text {
+        label {
+          margin: $cc-co-input-search-label-margin;
+        }
+      }
+    }
   }
 }

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

@@ -0,0 +1,5 @@
+$cc-co-input-search-background-color: #F5F5FA !default;
+$cc-co-input-search-border-radius: 10px !default;
+$cc-co-input-search-label-color: #8083A3 !default;
+$cc-co-input-search-label-font-style: italic !default;
+$cc-co-input-search-label-margin: 0 0 0 15% !default;

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

@@ -1,4 +1,10 @@
 @include export-module('cc-input-search-theme') {
   .co-input-search {
+    .co-input-text {
+      background: $cc-co-input-search-background-color;
+      label {
+        color: $cc-co-input-search-label-color;
+      }
+    }
   }
 }

package/lib/components/input-search/style/material.scss

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

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

@@ -20,10 +20,12 @@ export declare class InputTextComponent extends BaseInputComponent<any> implemen
     keyDownWhiteList: KeyboardCode[];
     showPlaceholderOnFocus: boolean;
     leftIcon: CoreComponentsIcon;
+    rightIcon: CoreComponentsIcon;
     set model(value: any);
     get model(): any;
     showClass(): boolean;
     get hasLeftIcon(): boolean;
+    get hasRightIcon(): boolean;
     hasOwnLabel: boolean;
     hideArrowButtons: boolean;
     constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, componentFactoryResolver: ComponentFactoryResolver, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);

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

@@ -23,6 +23,18 @@
         width: calc(100% - #{$cc-item-size});
       }
     }
+    &.has-right-icon {
+      .input-text-right-icon {
+        position: absolute;
+        height: $cc-item-size;
+        width: $cc-item-size;
+        top: 0;
+        right: 0;
+      }
+      input, label {
+        width: calc(100% - #{$cc-item-size});
+      }
+    }
     &.hideArrows {
       input::-webkit-outer-spin-button,
       input::-webkit-inner-spin-button {

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

@@ -1,4 +1,9 @@
 $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-background-color: white !default;
 $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-label-color: $cc-color-border !default;
+//$cc-co-input-label-font-style: normal !default;

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

@@ -1,7 +1,23 @@
 @include export-module('cc-input-text-theme') {
   .co-input-text {
+    background: $cc-co-input-text-background-color;
     input {
       background: transparent;
     }
+    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+      color: $cc-color-input-placeholder-color;
+      font-style: $cc-co-input-placeholder-font-style;
+      opacity: 1; /* Firefox */
+    }
+
+    :-ms-input-placeholder { /* Internet Explorer 10-11 */
+      color: $cc-color-input-placeholder-color;
+      font-style: $cc-co-input-placeholder-font-style;
+    }
+
+    ::-ms-input-placeholder { /* Microsoft Edge */
+      color: $cc-color-input-placeholder-color;
+      font-style: $cc-co-input-placeholder-font-style;
+    }
   }
 }