@colijnit/corecomponents_v12 12.0.15 → 12.0.16

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

@@ -1,10 +1,10 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
-import { AsyncValidatorFn, FormControl, NgModel, ValidatorFn } from '@angular/forms';
-import { ConfigurationAdapterComponent } from './configuration-adapter-component.interface';
-import { FormInputUserModelChangeListenerService } from '../../core/service/form-input-user-change-listener.service';
-import { NgZoneWrapperService } from '../../core/service/ng-zone-wrapper.service';
-import { CoreComponentsIcon } from '../../core/enum/core-components-icon.enum';
-import { FormComponent } from '../form/form.component';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from "@angular/core";
+import { AsyncValidatorFn, FormControl, NgModel, ValidatorFn } from "@angular/forms";
+import { ConfigurationAdapterComponent } from "./configuration-adapter-component.interface";
+import { FormInputUserModelChangeListenerService } from "../../core/service/form-input-user-change-listener.service";
+import { NgZoneWrapperService } from "../../core/service/ng-zone-wrapper.service";
+import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
+import { FormComponent } from "../form/form.component";
 /**
  * Abstract base class for all concrete form input components that contain a native <input> element. Provides common data and functionality, such as
  * adding self as a control to the parent form.
@@ -88,7 +88,7 @@ export declare abstract class BaseInputComponent<T> implements OnInit, OnDestroy
     protected _markedAsUserTouched: boolean;
     protected _destroyed: boolean;
     protected _hasOnPushCdStrategy: boolean;
-    private _model;
+    protected _model: T;
     private _decimals;
     private _hidden;
     private _disabled;

package/lib/components/button/style/_co-ripple.scss

@@ -0,0 +1,69 @@
+/*
+// NOTE: Copied and adapted to CoreComponents from iOneJS on 9-may-2018.
+
+$mat-ripple-color-opacity: 0.1;
+
+@mixin mat-ripple() {
+  // The host element of an md-ripple directive should always have a position of "absolute" or
+  // "relative" so that the ripple divs it creates inside itself are correctly positioned.
+  .mat-ripple {
+    overflow: hidden;
+  }
+
+  .mat-ripple.mat-ripple-unbounded {
+    overflow: visible;
+  }
+
+  .mat-ripple-element {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+
+    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
+    transform: scale(0);
+  }
+}
+
+!* Theme for the ripple elements.*!
+@mixin mat-ripple-theme($theme) {
+  $foreground: map_get($theme, foreground);
+  $foreground-base: map_get($foreground, base);
+
+  .mat-ripple-element {
+    background-color: rgba($foreground-base, $mat-ripple-color-opacity);
+  }
+}
+
+
+// A mixin, which generates temporary ink ripple on a given component.
+// To be removed once the real ripple is applied to all elements.
+// When $bindToParent is set to true, it will check for the focused class on the same selector as you included
+// that mixin.
+// It is also possible to specify the color palette of the temporary ripple. By default it uses the
+// accent palette for its background.
+@mixin mat-temporary-ink-ripple($component, $bindToParent: false) {
+  // A placeholder ink ripple, shown when keyboard focused.
+  .mat-ink-ripple {
+    border-radius: 50%;
+    opacity: 0;
+    height: 48px;
+    left: 50%;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: opacity ease 280ms, background-color ease 280ms;
+    width: 48px;
+  }
+
+  // Fade in when radio focused.
+  #{if($bindToParent, '&', '')}.mat-#{$component}-focused .mat-ink-ripple {
+    opacity: 1;
+  }
+
+  // this state.
+  #{if($bindToParent, '&', '')}.mat-#{$component}-disabled .mat-ink-ripple {
+    background-color: #000;
+  }
+}*/

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

@@ -16,6 +16,8 @@
     overflow: hidden;
     padding: $cc-btn-padding;
     font-size: $cc-btn-font-size;
+    place-content: $cc-btn-place-content;
+    pointer-events: all;
 
     &.smaller {
       transform: scale(0.8);
@@ -29,22 +31,25 @@
       transform: scale(0.4);
     }
 
-    &.has-icon {
+    &:not(.circle).has-icon {
       padding-left: 10px;
     }
 
     &.circle {
       padding: 0;
+      height: $cc-btn-height;
       width: $cc-btn-height;
 
       > co-icon {
         position: relative;
-        left: 5px;
+        height: $cc-btn-height;
+        width: $cc-btn-height;
       }
     }
 
     &.disabled {
       filter: opacity(50%);
+      pointer-events: none;
     }
 
     .rippler {
@@ -54,7 +59,6 @@
       bottom: 0;
       left: 0;
       z-index: 1;
-      pointer-events: none;
     }
   }
 }

package/lib/components/button/style/_material-definition.scss

@@ -6,3 +6,4 @@ $cc-btn-height: 40px !default;
 $cc-btn-border-radius: 20px !default;
 $cc-btn-padding: 0 20px !default;
 $cc-btn-color-dark: $cc-color-dark !default;
+$cc-btn-place-content: baseline !default;

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

@@ -64,20 +64,6 @@
       transform: scale(0.4);
     }
 
-    &.has-icon {
-      padding-left: 10px;
-    }
-
-    &.circle {
-      padding: 0;
-      width: 40px;
-
-      > co-icon {
-        position: relative;
-        left: 5px;
-      }
-    }
-
     &.disabled {
       filter: opacity(50%);
     }
@@ -91,15 +77,5 @@
         }
       }
     }
-
-    .rippler {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-      pointer-events: none;
-    }
   }
 }

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

@@ -2,3 +2,21 @@
 @import "./material-definition";
 @import "./layout";
 @import "./theme";
+/*
+@import "co-ripple";
+@import "../../../style/material2/theming/palette";
+
+@mixin mat-core() {
+  @include mat-ripple();
+}
+
+// Mixin that renders all of the core styles that depend on the theme.
+@mixin mat-core-theme($theme) {
+  @include mat-ripple-theme($theme);
+}
+
+$theme: mat-dark-theme(mat-palette($mat-purple, 700, 500, 800), mat-palette($mat-green, A200, A100, A400));
+@include mat-core-theme(
+  mat-dark-theme(mat-palette($mat-purple, 700, 500, 800), mat-palette($mat-green, A200, A100, A400))
+);
+*/

package/lib/components/co-dialog/co-dialog.component.d.ts

@@ -1,19 +1,12 @@
-import { EventEmitter } from '@angular/core';
-import { DialogComponent, PositionDataModel } from "@syncfusion/ej2-angular-popups";
-import { EmitType } from '@syncfusion/ej2-base';
+import { EventEmitter } from "@angular/core";
+import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
 export declare class CoDialogComponent {
-    coDialog: DialogComponent;
-    targetElement: HTMLElement;
+    readonly icons: typeof CoreComponentsIcon;
     showCloseIcon: boolean;
-    width: string;
-    visible: boolean;
-    position: PositionDataModel;
     modal: boolean;
+    animation: boolean;
     readonly closeClick: EventEmitter<MouseEvent>;
     readonly overlayClick: EventEmitter<MouseEvent>;
-    constructor();
-    open(): void;
-    close(): void;
-    onOverlayClick: EmitType<object>;
-    onCloseClick: EmitType<object>;
+    showClass(): boolean;
+    handleOverlayClick(event: MouseEvent): void;
 }

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

@@ -0,0 +1,47 @@
+@import "../../../style/input.mixins";
+@import "../../../style/mixin";
+
+@include export-module('co-dialog-layout') {
+  .co-dialog {
+    font-family: $cc-co-dialog-font-family;
+    font-size: $cc-co-dialog-font-size;
+    .co-dialog-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 800;
+    }
+    .co-dialog-wrapper {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      min-width: $cc-co-dialog-min-width;
+      max-width: 100vw;
+      z-index: 801;
+      height: auto;
+      width: auto;
+    }
+    .dialog-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      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-content {
+      font-family: $cc-co-dialog-content-font-family;
+      font-size: $cc-co-dialog-content-font-size;
+      padding: $cc-co-dialog-content-padding;
+    }
+    .dialog-footer {
+      font-family: $cc-co-dialog-footer-font-family;
+      font-size: $cc-co-dialog-footer-font-size;
+      padding: $cc-co-dialog-footer-padding;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+$cc-co-dialog-font-family: $cc-font-family !default;
+$cc-co-dialog-font-size: $cc-font-size-default !default;
+$cc-co-dialog-header-font-family: $cc-font-family !default;
+$cc-co-dialog-header-font-size: $cc-font-size-default !default;
+$cc-co-dialog-header-text-color: $cc-color-dark !default;
+$cc-co-dialog-header-background-color: $cc-color-light-accent !default;
+$cc-co-dialog-header-padding: 10px !default;
+$cc-co-dialog-min-width: 250px !default;
+$cc-co-dialog-background-color: $cc-color-light !default;
+$cc-co-dialog-box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5) !default;
+$cc-co-dialog-overlay-background-color: rgba(0, 0, 0, 0.3) !default;
+$cc-co-dialog-overlay-backdrop-filter: blur(2px) !default;
+$cc-co-dialog-content-padding: 10px !default;
+$cc-co-dialog-content-font-family: $cc-font-family !default;
+$cc-co-dialog-content-font-size: $cc-font-size-default !default;
+$cc-co-dialog-content-text-color: $cc-color-dark !default;
+$cc-co-dialog-content-background-color: $cc-color-light !default;
+$cc-co-dialog-footer-padding: 10px !default;
+$cc-co-dialog-footer-font-family: $cc-font-family !default;
+$cc-co-dialog-footer-font-size: $cc-font-size-default !default;
+$cc-co-dialog-footer-text-color: $cc-color-dark !default;
+$cc-co-dialog-footer-background-color: $cc-color-light !default;
+

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

@@ -0,0 +1,27 @@
+@import "../../../style/input.mixins";
+@import "../../../style/mixin";
+
+@include export-module('co-dialog-theme') {
+  .co-dialog {
+    .co-dialog-overlay {
+      background-color: $cc-co-dialog-overlay-background-color;
+      backdrop-filter: $cc-co-dialog-overlay-backdrop-filter;
+    }
+    .co-dialog-wrapper {
+      background-color: $cc-co-dialog-background-color;
+      box-shadow: $cc-co-dialog-box-shadow;
+    }
+    .dialog-header {
+      color: $cc-co-dialog-header-text-color;
+      background-color: $cc-co-dialog-header-background-color;
+    }
+    .dialog-content {
+      color: $cc-co-dialog-content-text-color;
+      background-color: $cc-co-dialog-content-background-color;
+    }
+    .dialog-footer {
+      color: $cc-co-dialog-footer-text-color;
+      background-color: $cc-co-dialog-footer-background-color;
+    }
+  }
+}

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

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

package/lib/components/co-dialog-prompt/co-dialog-prompt.component.d.ts

@@ -1,6 +1,6 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter } from "@angular/core";
 import { DialogComponent } from "@syncfusion/ej2-angular-popups";
-import { EmitType } from '@syncfusion/ej2-base';
+import { EmitType } from "@syncfusion/ej2-base";
 export declare class CoDialogPromptComponent {
     coDialogPrompt: DialogComponent;
     header: string;

package/lib/components/co-kanban/co-kanban.component.d.ts

@@ -16,6 +16,7 @@ export declare class CoKanbanComponent implements OnInit, AfterViewInit {
     cardDoubleClickEvent: EventEmitter<CardClickEventArgs>;
     dragStartEvent: EventEmitter<DragEventArgs>;
     dragStopEvent: EventEmitter<DragEventArgs>;
+    showClass(): boolean;
     constructor();
     ngOnInit(): void;
     ngAfterViewInit(): void;

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

@@ -0,0 +1,51 @@
+@import "../../../style/input.mixins";
+@import "../../../style/mixin";
+
+@include export-module('cc-kanban-layout') {
+  .co-kanban {
+
+    div.e-kanban-header {
+      margin-bottom: $cc-kanban-header-margin-bottom;
+    }
+
+    div.e-header-text {
+      font-family: $cc-kanban-header-font-family;
+      font-size: $cc-kanban-header-font-size;
+      color: $cc-kanban-header-text-color;
+    }
+
+    div.e-item-count {
+      font-family: $cc-kanban-header-item-count-font-family;
+      font-size: $cc-kanban-header-item-count-font-size;
+      color: $cc-kanban-header-item-count-text-color;
+    }
+
+    div.e-card {
+      background-color: $cc-kanban-card-background-color;
+      box-shadow: $cc-kanban-card-box-shadow;
+      border: $cc-kanban-card-border !important;
+      cursor: pointer;
+    }
+
+    div.e-card-header-title {
+      font-family: $cc-kanban-card-header-font-family;
+      font-size: $cc-kanban-card-header-font-size;
+    }
+
+    div.e-card-content {
+      font-family: $cc-kanban-card-content-font-family;
+      font-size: $cc-kanban-card-content-font-size;
+    }
+
+    th.e-header-cells {
+      background-color: $cc-kanban-header-background-color !important;
+      border: $cc-kanban-header-border !important;
+      padding: $cc-kanban-header-padding !important;
+    }
+
+    td.e-content-cells {
+      background-color: $cc-kanban-column-background-color !important;
+      border: $cc-kanban-column-border !important;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+$cc-kanban-header-font-family: $cc-font-family !default;
+$cc-kanban-header-font-size: 15px !default;
+$cc-kanban-header-text-color: #000000 !default;
+
+$cc-kanban-header-item-count-font-family: $cc-font-family !default;
+$cc-kanban-header-item-count-font-size: 12px !default;
+$cc-kanban-header-item-count-text-color: #000000 !default;
+
+$cc-kanban-header-background-color: #f5f5f5 !default;
+$cc-kanban-header-border: 1px solid transparent !default;
+$cc-kanban-header-padding: 5px 8px !default;
+$cc-kanban-header-margin-bottom: 0 !default;
+
+$cc-kanban-card-background-color: #ffffff !default;
+$cc-kanban-card-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 16%) !default;
+$cc-kanban-card-border: 1px solid transparent !default;
+
+$cc-kanban-card-header-font-family: $cc-font-family !default;
+$cc-kanban-card-header-font-size: 14px !default;
+
+$cc-kanban-card-content-font-family: $cc-font-family !default;
+$cc-kanban-card-content-font-size: 13px !default;
+
+$cc-kanban-column-background-color: #f5f5f5 !default;
+$cc-kanban-column-border: 1px solid transparent !default;

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

@@ -0,0 +1,7 @@
+@import "../../../style/input.mixins";
+@import "../../../style/mixin";
+@import "./material-definition";
+
+@include export-module('cc-kanban-layout') {
+
+}

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

@@ -0,0 +1,13 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+
+@import '~@syncfusion/ej2-angular-kanban/styles/material.scss';
+@import '~@syncfusion/ej2-base/styles/material.scss';
+@import '~@syncfusion/ej2-buttons/styles/material.scss';
+@import '~@syncfusion/ej2-dropdowns/styles/material.scss';
+@import '~@syncfusion/ej2-inputs/styles/material.scss';
+@import '~@syncfusion/ej2-layouts/styles/material.scss';
+@import '~@syncfusion/ej2-navigations/styles/material.scss';
+@import '~@syncfusion/ej2-popups/styles/material.scss';

package/lib/components/co-rich-text-editor/co-rich-text-editor.component.d.ts

@@ -1,5 +1,5 @@
 import { AfterViewInit, EventEmitter, OnInit } from "@angular/core";
-import { RichTextEditorComponent, ChangeEventArgs } from '@syncfusion/ej2-angular-richtexteditor';
+import { ChangeEventArgs, RichTextEditorComponent } from "@syncfusion/ej2-angular-richtexteditor";
 export declare class CoRichTextEditorComponent implements OnInit, AfterViewInit {
     editor: RichTextEditorComponent;
     onChangeEvent: EventEmitter<ChangeEventArgs>;

package/lib/components/co-toggle/co-toggle.component.scss

@@ -0,0 +1 @@
+//$cc-co-toggle-opacity: $switch-off-opacity !default;

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

@@ -0,0 +1,16 @@
+import { ElementRef, EventEmitter, OnDestroy } from "@angular/core";
+import { SafeHtml } from "@angular/platform-browser";
+export declare class CollapsibleComponent implements OnDestroy {
+    private _elementRef;
+    headerTitle: string;
+    iconData: SafeHtml | undefined;
+    expandButtonLast: boolean;
+    expanded: boolean;
+    expandedChange: EventEmitter<boolean>;
+    showClass(): boolean;
+    onHostClick(event: MouseEvent): void;
+    constructor(_elementRef: ElementRef);
+    ngOnDestroy(): void;
+    focus(): void;
+    changeExpanded(): void;
+}

package/lib/components/collapsible/collapsible.module.d.ts

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

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

@@ -0,0 +1,53 @@
+@import "../../../style/input.mixins";
+@import "../../../style/mixin";
+
+@include export-module('cc-collapsible-layout') {
+  .co-collapsible {
+    font-family: $cc-collapsible-font-family;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    flex-grow: 0;
+    outline: none;
+    overflow: hidden;
+    font-size: $cc-collapsible-font-size;
+
+    .collapsible-header {
+      display: flex;
+      flex-direction: row;
+      column-gap: 5px;
+      height: $cc-collapsible-height;
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+      border-bottom: $cc-collapsible-border-bottom;
+    }
+
+    .collapsible-title {
+      font-weight: bold;
+    }
+
+    .expand-icon-wrapper {
+      display: flex;
+      transition: .3s ease-in-out;
+      margin-right: $cc-collapsible-icon-margin-right;
+      .expand-icon {
+        height: $cc-collapsible-icon-size;
+        width: $cc-collapsible-icon-size;
+      }
+      &.expanded {
+        transform: rotate(180deg);
+      }
+    }
+
+    .end {
+      justify-content: space-between;
+    }
+
+    .collapsible-content {
+      overflow: hidden;
+      padding: $cc-collapsible-content-padding;
+    }
+  }
+}

package/lib/components/collapsible/style/_material-definition.scss

@@ -0,0 +1,9 @@
+$cc-collapsible-font-family: $cc-font-family !default;
+$cc-collapsible-font-size: $cc-font-size-default !default;
+$cc-collapsible-color: $cc-color-action !default;
+$cc-collapsible-text-color: #000000 !default;
+$cc-collapsible-height: 40px !default;
+$cc-collapsible-icon-size: 20px !default;
+$cc-collapsible-border-bottom: 1px solid gray !default;
+$cc-collapsible-icon-margin-right: 15px !default;
+$cc-collapsible-content-padding: 10px 0px 0px 10px !default;

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

@@ -0,0 +1,9 @@
+@import "../../../style/input.mixins";
+@import "../../../style/mixin";
+@import "./material-definition";
+
+@include export-module('cc-collapsible-theme') {
+  .co-collapsible {
+    color: $cc-collapsible-text-color;
+  }
+}

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

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

package/lib/components/grid/base/base-selection-grid.component.d.ts

@@ -1,10 +1,9 @@
 import { EventEmitter, OnInit, TemplateRef } from "@angular/core";
-import { RowDropEventArgs, SelectionSettingsModel } from "@syncfusion/ej2-angular-grids";
+import { RowDragEventArgs, RowDropEventArgs, SelectionSettingsModel } from "@syncfusion/ej2-angular-grids";
 import { BaseInlineEditGridComponent } from "./base-inline-edit-grid.component";
 import { MenuEventArgs } from "@syncfusion/ej2-navigations";
 import { GridRowDragEventArgs } from "../interface/grid-row-drag-event-args";
 import { GridRowDropEventArgs } from "../interface/grid-row-drop-event-args";
-import { RowDragEventArgs } from "@syncfusion/ej2-angular-grids";
 import { GridMenuEventArgs } from "../interface/grid-menu-event-args";
 export declare class BaseSelectionGridComponent<T> extends BaseInlineEditGridComponent<T> implements OnInit {
     set multipleSelect(value: boolean);

package/lib/components/grid/co-grid.component.d.ts

@@ -1,5 +1,5 @@
 import { OnInit } from "@angular/core";
-import { BaseSelectionGridComponent } from './base/base-selection-grid.component';
+import { BaseSelectionGridComponent } from "./base/base-selection-grid.component";
 export declare class CoGridComponent<T> extends BaseSelectionGridComponent<T> implements OnInit {
     showClass(): boolean;
     ngOnInit(): void;

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

@@ -0,0 +1,14 @@
+import { OnDestroy, OnInit } from "@angular/core";
+import { BaseInputComponent } from "../base/base-input.component";
+import { SelectionSettingsModel } from "@syncfusion/ej2-angular-dropdowns";
+export declare class InputListboxComponent extends BaseInputComponent<any> implements OnInit, OnDestroy {
+    placeholder: string;
+    value: string[] | number[];
+    collection: {}[];
+    fields: {};
+    set singleSelect(value: boolean);
+    set showCheckbox(value: boolean);
+    set showSelectAll(value: boolean);
+    showClass(): boolean;
+    selectionSettings: SelectionSettingsModel;
+}

package/lib/components/input-listbox/input-listbox.module.d.ts

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

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

@@ -0,0 +1,22 @@
+@import "./material-definition";
+
+@include export-module('cc-input-listbox-layout') {
+  .co-input-listbox {
+    font-family: $cc-co-input-listbox-font-family;
+    font-size: $cc-co-input-listbox-font-size;
+    .co-input-listbox-header {
+      font-family: $cc-co-input-listbox-header-font-family;
+      font-size: $cc-co-input-listbox-header-font-size;
+      margin: $cc-co-input-listbox-header-margin;
+    }
+    .e-listbox-wrapper {
+      font-family: $cc-co-input-listbox-font-family;
+      font-size: $cc-co-input-listbox-font-size;
+    }
+    .co-input-listbox-content {
+      max-height: $cc-co-input-listbox-max-height;
+      overflow-y: auto;
+    }
+  }
+}
+

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

@@ -0,0 +1,10 @@
+$cc-co-input-listbox-font-family: $cc-font-family !default;
+$cc-co-input-listbox-font-size: $cc-font-size-default !default;
+$cc-co-input-listbox-font-color: $cc-color-dark !default;
+$cc-co-input-listbox-max-height: 200px !default;
+$cc-co-input-listbox-header-font-family: $cc-font-family !default;
+$cc-co-input-listbox-header-font-size: $cc-font-size-default !default;
+$cc-co-input-listbox-header-font-color: $cc-color-dark !default;
+$cc-co-input-listbox-header-margin: 5px 0 !default;
+$cc-co-input-listbox-item-selected-background-color: $cc-color-action !default;
+$cc-co-input-listbox-item-selected-color: $cc-color-light !default;