@colijnit/corecomponents_v12 12.0.15 → 12.0.18

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

@@ -0,0 +1,41 @@
+@include export-module('cc-input-number-picker-layout') {
+  .co-input-number-picker {
+    font-family: $cc-co-input-number-picker-font-family;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    //height: $cc-co-input-number-picker-height;
+    width: fit-content;
+    border: $cc-co-input-number-picker-border;
+    border-width: $cc-co-input-number-picker-border-width;
+    border-radius: $cc-co-input-number-picker-border-radius;
+    .button-wrapper {
+      padding: $cc-co-input-number-picker-button-padding;
+    }
+    input {
+      font-family: $cc-co-input-number-picker-font-family;
+      padding: 0;
+      width: 100%;
+      border: none;
+      text-align: $cc-co-input-number-picker-text-align;
+      &:focus {
+        outline: none;
+      }
+      &:read-only {
+        opacity: $cc-co-input-number-picker-readonly-opacity;
+      }
+    }
+    .co-button.circle {
+      height: $cc-co-input-number-picker-button-height;
+      width: $cc-co-input-number-picker-button-width;
+      > co-icon {
+        height: $cc-co-input-number-picker-button-height;
+        width: $cc-co-input-number-picker-button-width;
+      }
+    }
+    span, span.e-input-focus {
+      border: none !important;
+    }
+  }
+}
+

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

@@ -0,0 +1,17 @@
+$cc-co-input-number-picker-font-family: $cc-font-family !default;
+$cc-co-input-number-picker-height: 40px !default;
+$cc-co-input-number-picker-width: 125px !default;
+$cc-co-input-number-picker-readonly-opacity: 0.5 !default;
+$cc-co-input-number-picker-text-align: center !default;
+$cc-co-input-number-picker-border: 1px solid !default;
+$cc-co-input-number-picker-border-width: 1px 1px 1px 1px !default;
+$cc-co-input-number-picker-button-padding: 5px !default;
+$cc-co-input-number-picker-border-color: $cc-color-dark !default;
+$cc-co-input-number-picker-border-radius: 3px !default;
+$cc-co-input-number-picker-button-height: 25px !default;
+$cc-co-input-number-picker-button-width: 25px !default;
+$cc-co-input-number-picker-button-background-color: transparent !default;
+$cc-co-input-number-picker-button-background-color-hover: $cc-color-hover !default;
+$cc-co-input-number-picker-button-background-color-select: $cc-color-action !default;
+$cc-co-input-number-picker-button-icon-color: $cc-color-dark !default;
+$cc-co-input-number-picker-button-icon-color-hover: $cc-color-light !default;

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

@@ -0,0 +1,20 @@
+@include export-module('cc-input-number-picker-theme') {
+  .co-input-number-picker {
+    border-color: $cc-co-input-number-picker-border-color;
+    .co-button.circle {
+      background-color: $cc-co-input-number-picker-button-background-color;
+      co-icon [fill] {
+        fill: $cc-co-input-number-picker-button-icon-color;
+      }
+      &:hover {
+        background-color: $cc-co-input-number-picker-button-background-color-hover;
+        co-icon [fill] {
+          fill: $cc-co-input-number-picker-button-icon-color-hover;
+        }
+      }
+      &.select {
+        background-color: $cc-co-input-number-picker-button-background-color-select;
+      }
+    }
+  }
+}

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

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

package/lib/components/input-radio-button/input-radio-button.component.d.ts

@@ -1,15 +1,20 @@
-import { ChangeDetectorRef } from "@angular/core";
+import { ChangeDetectorRef, ComponentFactoryResolver, ElementRef } from "@angular/core";
 import { BaseInputComponent } from "../base/base-input.component";
 import { FormComponent } from "../form/form.component";
 import { FormInputUserModelChangeListenerService } from "../../core/service/form-input-user-change-listener.service";
 import { NgZoneWrapperService } from "../../core/service/ng-zone-wrapper.service";
 export declare class InputRadioButtonComponent extends BaseInputComponent<any> {
     formComponent: FormComponent;
+    protected changeDetector: ChangeDetectorRef;
+    protected componentFactoryResolver: ComponentFactoryResolver;
+    protected formUserChangeListener?: FormInputUserModelChangeListenerService;
+    protected ngZoneWrapper?: NgZoneWrapperService;
+    elementRef?: ElementRef;
     value: any;
     label: string;
     name: string;
     checked: boolean;
     showClass(): boolean;
-    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, formUserChangeListener: FormInputUserModelChangeListenerService, ngZoneWrapper: NgZoneWrapperService);
+    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, componentFactoryResolver: ComponentFactoryResolver, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
     handleModelChange(change: any): void;
 }

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

@@ -1,5 +1,3 @@
-@import "./material-definition";
-
 @include export-module('cc-radio-button-layout') {
 
   .co-radio-button {

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

@@ -1,5 +1,3 @@
-@import "./material-definition";
-
 @include export-module('cc-radio-button-theme') {
 
   .co-radio-button {

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

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

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

@@ -0,0 +1,39 @@
+@include export-module('cc-input-search-layout') {
+  .co-input-search {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    flex-grow: 0;
+    outline: none;
+    overflow: hidden;
+    width: $cc-input-search-width;
+    min-height: $cc-input-search-min-height;
+    border-radius: 3px;
+
+    .input {
+      min-height: $cc-input-search-min-height;
+      width: 100%;
+      background: $cc-input-search-color;
+      font-family: $cc-input-search-font-family;
+      font-size: $cc-input-search-font-size;
+      color: $cc-input-search-text-color;
+      border: none;
+      border-radius: 3px;
+    }
+
+    .input:focus {
+      outline: none;
+      border: none;
+    }
+
+    .input-search-content {
+      overflow: hidden;
+    }
+
+    .search-icon {
+      align-self: center;
+      padding-right: 5px;
+      padding-left: 5px;
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+$cc-input-search-font-family: $cc-font-family !default;
+$cc-input-search-font-size: $cc-font-size-default !default;
+$cc-input-search-color: #e0e0e0 !default;
+$cc-input-search-text-color: #252525 !default;
+$cc-input-search-min-height: 35px !default;
+$cc-input-search-width: 320px !default;

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

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

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

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

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

@@ -1,47 +1,23 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from "@angular/core";
+import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ElementRef } from "@angular/core";
 import { BaseInputComponent } from "../base/base-input.component";
 import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
 import { KeyboardCode } from "../../core/enum/keyboard-code.enum";
-import { InputTextType } from "../../core/enum/input-text-type.enum";
 import { FormInputUserModelChangeListenerService } from "../../core/service/form-input-user-change-listener.service";
 import { NgZoneWrapperService } from "../../core/service/ng-zone-wrapper.service";
-import { NumericalRange } from "../../core/model/numerical-range";
-import { TextBoxComponent } from "@syncfusion/ej2-angular-inputs";
 import { FormComponent } from "../form/form.component";
-import { FloatLabelTypeEnum } from "../../core/enum/float-label-type.enum";
-export declare class InputTextComponent extends BaseInputComponent<any> implements OnInit, AfterViewInit, OnDestroy {
+export declare class InputTextComponent extends BaseInputComponent<any> implements AfterViewInit {
     formComponent: FormComponent;
     protected changeDetector: ChangeDetectorRef;
+    protected componentFactoryResolver: ComponentFactoryResolver;
     protected formUserChangeListener?: FormInputUserModelChangeListenerService;
     protected ngZoneWrapper?: NgZoneWrapperService;
     elementRef?: ElementRef;
-    textBox: TextBoxComponent;
-    floatLabelType: FloatLabelTypeEnum;
+    readonly Icons: typeof CoreComponentsIcon;
     placeholder: string;
     type: string;
     showClearButton: boolean;
-    cssClass: string;
-    alwaysShowClearIcon: boolean;
-    alwaysShowClearIconOnFocus: boolean;
-    noEmailValidation: boolean;
-    extraIcon: CoreComponentsIcon;
-    extraIconOnFocusOnly: boolean;
     keyDownWhiteList: KeyboardCode[];
-    extraIconClass: string;
-    inputType: InputTextType;
-    ngModelOptions: any;
-    readonly blur: EventEmitter<Event>;
-    readonly inputClick: EventEmitter<MouseEvent>;
-    readonly extraIconClick: EventEmitter<MouseEvent>;
-    readonly clearIconClick: EventEmitter<MouseEvent>;
     showClass(): boolean;
-    validEmailClick: boolean;
-    readonly Icons: typeof CoreComponentsIcon;
-    private _pattern;
-    private _regex;
-    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
-    ngOnDestroy(): void;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    setSelectionRange(range: NumericalRange): void;
+    hasOwnLabel: boolean;
+    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, componentFactoryResolver: ComponentFactoryResolver, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
 }

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

@@ -1,5 +1,16 @@
-@import "./material-definition";
-
 @include export-module('cc-input-text-layout') {
-
+  .co-input-text {
+    @include input;
+    font-family: $cc-co-input-text-font-family;
+    font-size: $cc-co-input-text-font-size;
+    input {
+      font-family: $cc-co-input-text-font-family;
+      font-size: $cc-co-input-text-font-size;
+      border: none;
+      width: 100%;
+      padding: 0;
+      margin: ($cc-item-size - 8px) / 2 0 0;
+      outline: none;
+    }
+  }
 }

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

@@ -1,3 +1,4 @@
-@import 'ej2-base/styles/material.scss';
-@import 'ej2-inputs/styles/material.scss';
-@import 'ej2-angular-inputs/styles/material.scss';
+$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-border-color: $cc-color-border !default;

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

@@ -1,5 +1,3 @@
-@import "./material-definition";
-
 @include export-module('cc-input-text-theme') {
 
 }

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

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

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

@@ -0,0 +1,18 @@
+import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ElementRef } from "@angular/core";
+import { BaseInputComponent } from "../base/base-input.component";
+import { FormInputUserModelChangeListenerService } from "../../core/service/form-input-user-change-listener.service";
+import { NgZoneWrapperService } from "../../core/service/ng-zone-wrapper.service";
+import { FormComponent } from "../form/form.component";
+export declare class InputTextareaComponent extends BaseInputComponent<any> implements AfterViewInit {
+    formComponent: FormComponent;
+    protected changeDetector: ChangeDetectorRef;
+    protected componentFactoryResolver: ComponentFactoryResolver;
+    protected formUserChangeListener?: FormInputUserModelChangeListenerService;
+    protected ngZoneWrapper?: NgZoneWrapperService;
+    elementRef?: ElementRef;
+    placeholder: string;
+    showClass(): boolean;
+    hasOwnLabel: boolean;
+    customHeight: boolean;
+    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, componentFactoryResolver: ComponentFactoryResolver, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
+}

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

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

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

@@ -0,0 +1,20 @@
+@include export-module('cc-input-textarea-layout') {
+  .co-input-textarea {
+    @include input;
+    font-family: $cc-co-input-textarea-font-family;
+    font-size: $cc-co-input-textarea-font-size;
+    min-height: $cc-item-size;
+    border-bottom: 1px solid $cc-color-border;
+    textarea {
+      font-family: $cc-co-input-textarea-font-family;
+      font-size: $cc-co-input-textarea-font-size;
+      margin: $cc-item-size / 2 0 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      outline: none;
+      border: none;
+      resize: vertical;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+$cc-co-input-textarea-font-family: $cc-font-family !default;
+$cc-co-input-textarea-font-size: $cc-font-size-default !default;
+$cc-co-input-textarea-font-color: $cc-color-dark !default;
+$cc-co-input-textarea-border-color: $cc-color-border !default;

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

@@ -0,0 +1,8 @@
+@include export-module('cc-input-textarea-theme') {
+  .co-input-textarea {
+    color: $cc-co-input-textarea-font-color;
+    textarea {
+      border-color: $cc-co-input-textarea-border-color;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+@import "../../../style/mixin";
+@import "../../../style/input.mixins";
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";
+@import "../../validation-error/style/material";

package/lib/components/multi-select-list/multi-select-list.component.d.ts

@@ -1,13 +1,22 @@
-import { TemplateRef } from "@angular/core";
+import { ChangeDetectorRef, ComponentFactoryResolver, ElementRef, TemplateRef } from "@angular/core";
 import { BaseInputComponent } from "../base/base-input.component";
+import { FormInputUserModelChangeListenerService } from "../../core/service/form-input-user-change-listener.service";
+import { NgZoneWrapperService } from "../../core/service/ng-zone-wrapper.service";
+import { FormComponent } from "../form/form.component";
 export declare class MultiSelectListComponent extends BaseInputComponent<any[]> {
+    formComponent: FormComponent;
+    protected changeDetector: ChangeDetectorRef;
+    protected componentFactoryResolver: ComponentFactoryResolver;
+    protected formUserChangeListener?: FormInputUserModelChangeListenerService;
+    protected ngZoneWrapper?: NgZoneWrapperService;
+    elementRef?: ElementRef;
     collection: any[];
     /**
      * In the form { text: 'name', value: 'id' }
      * Where 'text' is showing in the dropdown and 'id' used for the model binding
      */
     fields: Object;
-    placeHolder: string;
+    placeholder: string;
     itemTemplate: TemplateRef<any>;
     headerTemplate: TemplateRef<any>;
     valueTemplate: TemplateRef<any>;
@@ -15,5 +24,7 @@ export declare class MultiSelectListComponent extends BaseInputComponent<any[]>
     showSelectAll: boolean;
     set showCheckbox(value: boolean);
     showClass(): boolean;
+    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, componentFactoryResolver: ComponentFactoryResolver, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
     mode: any;
+    handleModelChange(val: any): void;
 }

package/lib/components/multi-select-list/style/_layout.scss

@@ -1,5 +1,12 @@
-@import "./material-definition";
-
 @include export-module('cc-multi-select-list-layout') {
-
+  .co-multi-select-list {
+    position: relative; // for validation message
+    @include input;
+    .e-multiselect {
+      height: 100%;
+      div {
+        height: 100%;
+      }
+    }
+  }
 }

package/lib/components/multi-select-list/style/_theme.scss

@@ -1,5 +1,3 @@
-@import "./material-definition";
-
 @include export-module('cc-multi-select-list-theme') {
 
 }

package/lib/components/multi-select-list/style/material.scss

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

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

@@ -1,6 +1,6 @@
 import { AfterViewInit, EventEmitter, OnInit } from "@angular/core";
-import { IDataOptions, PivotViewComponent, SaveReportArgs, LoadReportArgs, FetchReportArgs, RenameReportArgs, RemoveReportArgs, ToolbarArgs, ToolbarItems } from "@syncfusion/ej2-angular-pivotview";
-import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
+import { FetchReportArgs, IDataOptions, LoadReportArgs, PivotViewComponent, RemoveReportArgs, RenameReportArgs, SaveReportArgs, ToolbarArgs, ToolbarItems } from "@syncfusion/ej2-angular-pivotview";
+import { GridSettings } from "@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings";
 export declare class CoPivotComponent implements OnInit, AfterViewInit {
     pivot: PivotViewComponent;
     dataSourceSettings: IDataOptions;

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

@@ -1,5 +1,3 @@
-@import "./material-definition";
-
 @include export-module('cc-co-pivot-layout') {
 
 }

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

@@ -1,5 +1,3 @@
-@import "./material-definition";
-
 @include export-module('cc-co-pivot-theme') {
 
 }

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

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

package/lib/components/simple-grid/simple-grid-column.directive.d.ts

@@ -0,0 +1,18 @@
+import { TemplateRef } from "@angular/core";
+export declare enum ColumnAlign {
+    Left = "left-align",
+    Center = "center-align",
+    Right = "right-align"
+}
+export declare class SimpleGridColumnDirective {
+    private static _MinManualResizeWidthPx;
+    set template(template: TemplateRef<any>);
+    get template(): TemplateRef<any>;
+    headerText: string;
+    field: string;
+    textAlign: ColumnAlign;
+    format: string;
+    resizable: boolean;
+    width: number;
+    private _template;
+}

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

@@ -0,0 +1,26 @@
+import { EventEmitter, QueryList } from "@angular/core";
+import { CdkDrag, CdkDragDrop, CdkDropList } from "@angular/cdk/drag-drop";
+import { ColumnAlign, SimpleGridColumnDirective } from "./simple-grid-column.directive";
+export declare class SimpleGridComponent {
+    readonly defaultTextAlign: ColumnAlign;
+    set content(columnComponents: QueryList<SimpleGridColumnDirective>);
+    data: Object[];
+    dragDropEnabled: boolean;
+    /**
+     * Should component emit drag and drop actions instead of handle
+     * (update collection) by itself
+     */
+    emitDragDrop: boolean;
+    onDrop: EventEmitter<{
+        from: number;
+        to: number;
+    }>;
+    showClass(): boolean;
+    handleMouseMove(event: MouseEvent): void;
+    handleMouseUp(event: MouseEvent): void;
+    columns: SimpleGridColumnDirective[];
+    private _columnForResize;
+    handleSizerMouseDown(event: MouseEvent, column: SimpleGridColumnDirective): void;
+    handleCanDragDrop(drag: CdkDrag, drop: CdkDropList): boolean;
+    handleDrop(event: CdkDragDrop<Object[]>): void;
+}

package/lib/components/simple-grid/simple-grid.module.d.ts

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

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

@@ -0,0 +1,78 @@
+@include export-module('cc-simple-grid-layout') {
+  .co-simple-grid {
+    font-family: $cc-simple-grid-font-familiy;
+    font-size: $cc-simple-grid-font-size;
+  }
+  // styling outside of grid because of drag and drop functionality
+  .simple-grid-column-header-wrapper {
+    font-family: $cc-simple-grid-header-font-familiy;
+    font-size: $cc-simple-grid-header-font-size;
+    display: flex;
+    flex-direction: row;
+  }
+  .simple-grid-column-header, .simple-grid-column-cell {
+    display: flex;
+    flex-direction: row;
+    padding-right: 5px;
+    flex-basis: 100%;
+  }
+  .simple-grid-column-header {
+    justify-content: space-between;
+  }
+  .simple-grid-column-cell {
+    padding-top: $cc-simple-grid-cell-padding-top;
+    padding-bottom: $cc-simple-grid-cell-padding-bottom;
+  }
+  .simple-grid-column-header-label {
+    user-select: none;
+    padding: $cc-simple-grid-header-padding;
+    width: 100%;
+  }
+  .simple-grid-column-sizer {
+    cursor: col-resize;
+    width: 5px;
+    height: 100%;
+  }
+  .simple-grid-column-sizer-placeholder {
+    width: 5px;
+    height: 100%;
+  }
+  .simple-grid-row {
+    font-family: $cc-simple-grid-font-familiy;
+    font-size: $cc-simple-grid-font-size;
+    display: flex;
+    flex-direction: row;
+    border: $cc-simple-grid-row-border;
+    border-width: $cc-simple-grid-row-border-width;
+  }
+  .right-align {
+    text-align: right;
+  }
+  .center-align {
+    text-align: center;
+  }
+  .left-align {
+    text-align: left;
+  }
+
+  .simple-grid-row.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+
+  .simple-grid-row.cdk-drag-placeholder {
+    opacity: 0.3;
+  }
+
+  .cdk-drag-animating {
+    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .simple-grid-row:last-child {
+    border: none;
+  }
+}
+

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

@@ -0,0 +1,16 @@
+$cc-simple-grid-font-familiy: $cc-font-family !default;
+$cc-simple-grid-font-size: $cc-font-size-default !default;
+
+$cc-simple-grid-header-font-familiy: $cc-font-family !default;
+$cc-simple-grid-header-font-size: $cc-font-size-default !default;
+$cc-simple-grid-header-text-transform: normal !default;
+$cc-simple-grid-header-background-color: $cc-color-light-accent !default;
+$cc-simple-grid-header-padding: 10px 0 !default;
+$cc-simple-grid-header-sizer-background-color: white !default;
+
+$cc-simple-grid-row-background-color: white !default;
+$cc-simple-grid-row-border: 1px solid !default;
+$cc-simple-grid-row-border-color: $cc-color-border !default;
+$cc-simple-grid-row-border-width: 1px 1px 1px 1px !default;
+$cc-simple-grid-cell-padding-top: 10px !default;
+$cc-simple-grid-cell-padding-bottom: 10px !default;

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

@@ -0,0 +1,15 @@
+@include export-module('cc-simple-grid-theme') {
+  .co-simple-grid {
+    .simple-grid-column-sizer {
+      background-color: $cc-simple-grid-header-sizer-background-color;
+    }
+  }
+  // styling outside of grid because of drag and drop functionality
+  .simple-grid-column-header-wrapper {
+    background-color: $cc-simple-grid-header-background-color;
+  }
+  .simple-grid-row {
+    background-color: $cc-simple-grid-row-background-color;
+    border-color: $cc-simple-grid-row-border-color;
+  }
+}

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

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