@colijnit/corecomponents_v12 12.0.13 → 12.0.16

package/lib/components/icon/icon-cache.service.d.ts

@@ -0,0 +1,20 @@
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { CoreComponentsIcon } from '../../core/enum/core-components-icon.enum';
+export declare class IconCacheService {
+    private _sanitizer;
+    /**
+     * All the icons as a large JSON object, from the all-icons.json file.
+     * The object has property keys that are the icon names, and property values with the data string of the actual svg icon.
+     */
+    get iconCache(): {
+        [iconName: string]: SafeHtml;
+    };
+    private _iconCache;
+    private _allIcons;
+    constructor(_sanitizer: DomSanitizer);
+    getIcon(iconName: CoreComponentsIcon): SafeHtml;
+    getRawIcon(iconName: CoreComponentsIcon): string;
+    getIconAsBase64(iconName: CoreComponentsIcon): SafeHtml;
+    getIconRawBase64(iconName: CoreComponentsIcon): string;
+    setIconCache(): void;
+}

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

@@ -0,0 +1,10 @@
+import { SafeHtml } from '@angular/platform-browser';
+import { CoreComponentsIcon } from '../../core/enum/core-components-icon.enum';
+import { IconCacheService } from './icon-cache.service';
+export declare class IconComponent {
+    private _iconCache;
+    set icon(value: CoreComponentsIcon);
+    iconData: SafeHtml | undefined;
+    constructor(_iconCache: IconCacheService);
+    private _setIconFromEnum;
+}

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

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

package/{src/lib → lib}/components/icon/icon.scss

@@ -1,3 +1,4 @@
+@import "../../style/variables";
 :host {
     display: flex;
     align-items: center;
@@ -19,9 +20,9 @@
 }
 
 :host.light ::ng-deep [fill] {
-    fill: #FFF;
+    fill: $cc-color-light;
 }
 
 :host.dark ::ng-deep [fill] {
-    fill: #22313C;
+    fill: $cc-color-dark;
 }

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

@@ -0,0 +1,4 @@
+export declare class ImageComponent {
+    source: string;
+    constructor();
+}

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

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

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

@@ -0,0 +1,16 @@
+import { ChangeDetectorRef, EventEmitter } 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 InputCheckboxComponent extends BaseInputComponent<boolean> {
+    formComponent: FormComponent;
+    name: string;
+    label: string;
+    cssClass: string;
+    modelChange: EventEmitter<boolean>;
+    showClass(): boolean;
+    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, formUserChangeListener: FormInputUserModelChangeListenerService, ngZoneWrapper: NgZoneWrapperService);
+    setModel(value: boolean): void;
+    handleModelChange(value: boolean): void;
+}

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

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

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

@@ -0,0 +1,5 @@
+@import "./material-definition";
+
+@include export-module('cc-input-checkbox-layout') {
+
+}

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

@@ -0,0 +1,2 @@
+@import "ej2-base/styles/material.scss";
+@import "ej2-buttons/styles/material.scss";

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

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

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

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

package/lib/components/input-checkbox-multi-select/input-checkbox-multi-select.component.d.ts

@@ -0,0 +1,22 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit } 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 InputCheckboxMultiSelectComponent extends BaseInputComponent<any> implements OnInit, AfterViewInit, OnDestroy {
+    formComponent: FormComponent;
+    protected changeDetector: ChangeDetectorRef;
+    protected formUserChangeListener?: FormInputUserModelChangeListenerService;
+    protected ngZoneWrapper?: NgZoneWrapperService;
+    elementRef?: ElementRef;
+    source: Object[] | string[] | number[] | boolean[];
+    fields: Object;
+    selected: number | string | boolean;
+    placeholder: string;
+    filterPlaceholder: string;
+    showClass(): boolean;
+    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
+    ngOnDestroy(): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+}

package/lib/components/input-checkbox-multi-select/input-checkbox-multi-select.module.d.ts

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

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

@@ -0,0 +1,5 @@
+@import "./material-definition";
+
+@include export-module('cc-input-checkbox-multi-select-layout') {
+
+}

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

@@ -0,0 +1,7 @@
+@import 'ej2-base/styles/material.scss';
+@import 'ej2-buttons/styles/material.scss';
+@import 'ej2-dropdowns/styles/material.scss';
+@import 'ej2-inputs/styles/material.scss';
+@import 'ej2-popups/styles/material.scss';
+@import 'ej2-lists/styles/material.scss';
+@import 'ej2-angular-dropdowns/styles/material.scss';

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

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

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

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

package/lib/components/input-combo-box/input-combo-box.component.d.ts

@@ -0,0 +1,25 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit } 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";
+import { ComboBoxComponent } from "@syncfusion/ej2-angular-dropdowns";
+export declare class InputComboBoxComponent extends BaseInputComponent<any> implements OnInit, AfterViewInit, OnDestroy {
+    formComponent: FormComponent;
+    protected changeDetector: ChangeDetectorRef;
+    protected formUserChangeListener?: FormInputUserModelChangeListenerService;
+    protected ngZoneWrapper?: NgZoneWrapperService;
+    elementRef?: ElementRef;
+    combo: ComboBoxComponent;
+    source: Object[] | string[] | number[] | boolean[];
+    fields: Object;
+    selected: number | string | boolean;
+    placeholder: string;
+    shopPopup: boolean;
+    showClass(): boolean;
+    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
+    ngOnDestroy(): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    onFocus(): void;
+}

package/lib/components/input-combo-box/input-combo-box.module.d.ts

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

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

@@ -0,0 +1,5 @@
+@import "./material-definition";
+
+@include export-module('cc-input-combo-box-layout') {
+
+}

package/lib/components/input-combo-box/style/_material-definition.scss

@@ -0,0 +1,7 @@
+@import 'ej2-base/styles/material.scss';
+@import 'ej2-buttons/styles/material.scss';
+@import 'ej2-dropdowns/styles/material.scss';
+@import 'ej2-inputs/styles/material.scss';
+@import 'ej2-popups/styles/material.scss';
+@import 'ej2-lists/styles/material.scss';
+@import 'ej2-angular-dropdowns/styles/material.scss';

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

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

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

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

package/lib/components/input-date-picker/input-date-picker.component.d.ts

@@ -0,0 +1,30 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit } from "@angular/core";
+import { BaseInputComponent } from "../base/base-input.component";
+import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
+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";
+import { DatePickerComponent } from "@syncfusion/ej2-angular-calendars";
+import { IconCacheService } from "../icon/icon-cache.service";
+export declare class InputDatePickerComponent extends BaseInputComponent<Date> implements OnInit, AfterViewInit, OnDestroy {
+    iconCacheService: IconCacheService;
+    formComponent: FormComponent;
+    protected changeDetector: ChangeDetectorRef;
+    protected formUserChangeListener?: FormInputUserModelChangeListenerService;
+    protected ngZoneWrapper?: NgZoneWrapperService;
+    elementRef?: ElementRef;
+    readonly icons: any;
+    ejsDatePicker: DatePickerComponent;
+    dateFormat: string;
+    calendarIconName: CoreComponentsIcon;
+    iconHeight: string;
+    placeholder: string;
+    width: string | number;
+    readonly blur: EventEmitter<Event>;
+    showClass(): boolean;
+    constructor(iconCacheService: IconCacheService, formComponent: FormComponent, changeDetector: ChangeDetectorRef, formUserChangeListener?: FormInputUserModelChangeListenerService, ngZoneWrapper?: NgZoneWrapperService, elementRef?: ElementRef);
+    ngOnDestroy(): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    change(): void;
+}

package/lib/components/input-date-picker/input-date-picker.module.d.ts

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

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

@@ -0,0 +1,5 @@
+@import "./material-definition";
+
+@include export-module('cc-input-date-picker-layout') {
+
+}

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

@@ -0,0 +1,8 @@
+@import 'ej2-base/styles/material.scss';
+@import 'ej2-buttons/styles/material.scss';
+@import 'ej2-inputs/styles/material.scss';
+@import 'ej2-popups/styles/material.scss';
+@import 'ej2-lists/styles/material.scss';
+@import 'ej2-splitbuttons/styles/material.scss';
+@import 'ej2-calendars/styles/material.scss';
+@import 'ej2-angular-calendars/styles/material.scss';

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

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

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

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

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;

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

@@ -0,0 +1,14 @@
+@import "./material-definition";
+
+@include export-module('cc-input-listbox-theme') {
+  .co-input-listbox {
+    color: $cc-co-input-listbox-font-color;
+    .co-input-listbox-header {
+      color: $cc-co-input-listbox-header-font-color;
+    }
+    .e-listbox-wrapper .e-list-item.e-selected {
+      background-color: $cc-co-input-listbox-item-selected-background-color;
+      color: $cc-co-input-listbox-item-selected-color;
+    }
+  }
+}

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

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

package/lib/components/input-number-picker/input-number-picker.component.d.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectorRef, EventEmitter, NgZone, OnDestroy, OnInit } from "@angular/core";
+import { BaseInputComponent } from "../base/base-input.component";
+import { BoundsConstrainedNumberValue } from "../../core/model/bounds-constrained-number-value";
+import { KeyboardCode } from "../../core/enum/keyboard-code.enum";
+import { InputTextComponent } from "../input-text/input-text.component";
+import { FormInputUserModelChangeListenerService } from "../../core/service/form-input-user-change-listener.service";
+import { InputNumberPickerButtonShowMode } from "../../core/enum/input-number-picker-show-mode.enum";
+import { IconCacheService } from "../icon/icon-cache.service";
+import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
+import { FloatLabelTypeEnum } from "../../core/enum/float-label-type.enum";
+export declare class InputNumberPickerComponent extends BaseInputComponent<number> implements OnInit, OnDestroy {
+    iconCacheService: IconCacheService;
+    private _ngZone;
+    floatLabelType: FloatLabelTypeEnum;
+    cssClass: string;
+    set model(model: number);
+    get model(): number;
+    set min(min: number);
+    set step(step: number);
+    set max(max: number);
+    ngModelOptions: any;
+    minusIcon: CoreComponentsIcon;
+    plusIcon: CoreComponentsIcon;
+    buttonShowMode: InputNumberPickerButtonShowMode;
+    noValidation: boolean;
+    set decimals(decimals: number);
+    readonly modelChange: EventEmitter<number>;
+    inputTextComp: InputTextComponent;
+    get showButtonsOnFocusOnly(): boolean;
+    get hasLabel(): boolean;
+    showClass(): boolean;
+    showButtons: boolean;
+    readonly myKeyDownWhiteList: KeyboardCode[];
+    readonly numberLogic: BoundsConstrainedNumberValue;
+    minSelected: boolean;
+    plusSelected: boolean;
+    private _numberInputHasFocus;
+    private _numberLogicValueChangeSub;
+    private readonly _delayBeforeStartAutoCountMs;
+    private readonly _stepFactors;
+    private readonly _msChangeStepFactor;
+    private readonly _msDoStep;
+    private _stepFactor;
+    private _mayAutoCount;
+    private _autoCountTimeout;
+    private _stepIncrementTimeout;
+    private _startAutocountTimeout;
+    constructor(iconCacheService: IconCacheService, _ngZone: NgZone, changeDetector: ChangeDetectorRef, formUserChangeListener: FormInputUserModelChangeListenerService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    doIncrementAuto(): void;
+    handleKeyDown(event: KeyboardEvent): boolean;
+    doDecrementAuto(): void;
+    stopAutoCounting(): void;
+    setValue(newValue: number, silent?: boolean): void;
+    increment(steps?: number): void;
+    decrement(steps?: number): void;
+    onPlusMouseDown(event: Event): void;
+    onMinusMouseDown(event: Event): void;
+    onNumberInputFocus(): void;
+    onNumberInputBlur(): void;
+    private _doIncreaseStepFactor;
+    private _getNextStepFactorMouseDown;
+    private _updateButtonsShowState;
+}

package/lib/components/input-number-picker/input-number-picker.module.d.ts

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

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

@@ -0,0 +1,43 @@
+@import "./material-definition";
+
+@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,22 @@
+@import "./material-definition";
+
+@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,4 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";

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

@@ -0,0 +1,15 @@
+import { ChangeDetectorRef } 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;
+    value: any;
+    label: string;
+    name: string;
+    checked: boolean;
+    showClass(): boolean;
+    constructor(formComponent: FormComponent, changeDetector: ChangeDetectorRef, formUserChangeListener: FormInputUserModelChangeListenerService, ngZoneWrapper: NgZoneWrapperService);
+    handleModelChange(change: any): void;
+}

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

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

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

@@ -0,0 +1,28 @@
+@import "./material-definition";
+
+@include export-module('cc-radio-button-layout') {
+
+  .co-radio-button {
+    font-family: $cc-rb-font-family;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    height: $cc-rb-height;
+    border-radius: $cc-rb-border-radius;
+    padding: $cc-rb-padding;
+    overflow: hidden;
+    .e-radio-wrapper {
+      width: 100%;
+      label {
+        display: flex;
+        width: 100%;
+        .e-label {
+          font-family: $cc-rb-font-family;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+$cc-rb-font-family: $cc-font-family !default;
+$cc-rb-height: $cc-item-height !default;
+$cc-rb-border-radius: $cc-default-border-radius !default;
+$cc-rb-padding: 10px 20px !default;
+$cc-rb-border-color: $cc-color-border !default;
+$cc-rb-color-action: $cc-color-action !default;
+
+@import "ej2-base/styles/material.scss";
+@import "ej2-buttons/styles/material.scss";

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

@@ -0,0 +1,11 @@
+@import "./material-definition";
+
+@include export-module('cc-radio-button-theme') {
+
+  .co-radio-button {
+    border: 1px solid $cc-rb-border-color;
+    &.checked {
+      border: 1px solid $cc-rb-color-action;
+    }
+  }
+}

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

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