Fixed #677

components/accordion/accordion.ts

@@ -23,7 +23,7 @@ export class Accordion {
 
     public tabs: AccordionTab[] = [];
 
-    constructor(private el: ElementRef) {}
+    constructor(protected el: ElementRef) {}
 
     addTab(tab: AccordionTab) {
         this.tabs.push(tab);

components/accordion/accordiontab.ts

@@ -28,7 +28,7 @@ export class AccordionTab {
 
     @ContentChild(Header) headerFacet;
 
-    constructor(private accordion: Accordion) {
+    constructor(protected accordion: Accordion) {
         this.accordion.addTab(this);
     }
 

components/autocomplete/autocomplete.ts

@@ -112,7 +112,7 @@ export class AutoComplete implements AfterViewInit,DoCheck,AfterViewChecked,Cont
 
     highlightOptionChanged: boolean;
 
-    constructor(private el: ElementRef, private domHandler: DomHandler, differs: IterableDiffers, private renderer: Renderer) {
+    constructor(protected el: ElementRef, protected domHandler: DomHandler, differs: IterableDiffers, protected renderer: Renderer) {
         this.differ = differs.find([]).create(null);
     }
 

components/breadcrumb/breadcrumb.ts

@@ -29,7 +29,7 @@ export class Breadcrumb implements OnDestroy {
 
     @Input() styleClass: string;
 
-    constructor(private router: Router) {}
+    constructor(protected router: Router) {}
 
     itemClick(event, item: MenuItem) {
         if(!item.url||item.routerLink) {

components/button/button.ts

@@ -17,17 +17,17 @@ export class Button implements AfterViewInit, OnDestroy {
 
     @Input() iconPos: string = 'left';
 
-    private _label: string;
+    protected _label: string;
 
-    private hover: boolean;
+    protected hover: boolean;
 
-    private focus: boolean;
+    protected focus: boolean;
 
-    private active: boolean;
+    protected active: boolean;
 
-    private initialized: boolean;
+    protected initialized: boolean;
 
-    constructor(private el: ElementRef, private domHandler: DomHandler) {}
+    constructor(protected el: ElementRef, protected domHandler: DomHandler) {}
 
     ngAfterViewInit() {
         this.domHandler.addMultipleClasses(this.el.nativeElement, this.getStyleClass());

components/calendar/calendar.ts

@@ -126,7 +126,7 @@ export class Calendar implements AfterViewInit,OnChanges,OnDestroy,ControlValueA
 
     calendarElement: any;
 
-    constructor(private el: ElementRef, private zone:NgZone) {
+    constructor(protected el: ElementRef, protected zone:NgZone) {
         this.initialized = false;
     }
 

components/carousel/carousel.ts

@@ -66,37 +66,37 @@ export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,DoCheck,O
 
     @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;
 
-    private container: any;    
+    protected container: any;    
 
-    private left: any = 0;
+    protected left: any = 0;
 
-    private viewport: any;
+    protected viewport: any;
 
-    private itemsContainer: any;
+    protected itemsContainer: any;
 
-    private items: any;
+    protected items: any;
 
-    private columns: any;
+    protected columns: any;
 
-    private page: number;
+    protected page: number;
 
-    private valuesChanged: any;
+    protected valuesChanged: any;
 
-    private interval: any;
+    protected interval: any;
 
-    private anchorPageLinks: any[];
+    protected anchorPageLinks: any[];
 
-    private mobileDropdownOptions: any[];
+    protected mobileDropdownOptions: any[];
 
-    private selectDropdownOptions: any[];
+    protected selectDropdownOptions: any[];
 
-    private shrinked: boolean;
+    protected shrinked: boolean;
 
     documentResponsiveListener: any;
 
     differ: any;
 
-    constructor(private el: ElementRef, private domHandler: DomHandler, differs: IterableDiffers, private renderer: Renderer) {
+    constructor(protected el: ElementRef, protected domHandler: DomHandler, differs: IterableDiffers, protected renderer: Renderer) {
         this.differ = differs.find([]).create(null);
     }
 

components/chart/chart.ts

@@ -30,7 +30,7 @@ export class UIChart implements AfterViewInit, OnDestroy, DoCheck {
 
     differ: any;
 
-    constructor(private el: ElementRef, differs: IterableDiffers) {
+    constructor(protected el: ElementRef, differs: IterableDiffers) {
         this.differ = differs.find([]).create(null);
     }
 

components/codehighlighter/codehighlighter.ts

@@ -7,7 +7,7 @@ declare var Prism: any;
 })
 export class CodeHighlighter implements OnInit {
 
-    constructor(private el: ElementRef) {}
+    constructor(protected el: ElementRef) {}
 
     ngOnInit() {
         Prism.highlightElement(this.el.nativeElement);

components/column/columntemplateloader.ts

@@ -14,7 +14,7 @@ export class ColumnTemplateLoader {
 
     @Input() rowIndex: number;
 
-    constructor(private viewContainer: ViewContainerRef) {}
+    constructor(protected viewContainer: ViewContainerRef) {}
 
     ngOnInit() {
         let view = this.viewContainer.createEmbeddedView(this.column.template, {

components/common.ts

@@ -72,7 +72,7 @@ export class TemplateWrapper implements OnInit {
 
     @Input('pTemplateWrapper') templateRef: TemplateRef<any>;
 
-    constructor(private viewContainer: ViewContainerRef) {}
+    constructor(protected viewContainer: ViewContainerRef) {}
 
     ngOnInit() {
         let view = this.viewContainer.createEmbeddedView(this.templateRef, {

components/contextmenu/contextmenu.ts

@@ -31,7 +31,7 @@ export class ContextMenuSub {
 
     @Input() root: boolean;
 
-    constructor(private domHandler: DomHandler, private router: Router) {}
+    constructor(protected domHandler: DomHandler, protected router: Router) {}
 
     activeItem: any;
 
@@ -113,7 +113,7 @@ export class ContextMenu implements AfterViewInit,OnDestroy {
 
     documentRightClickListener: any;
 
-    constructor(private el: ElementRef, private domHandler: DomHandler, private renderer: Renderer) {}
+    constructor(protected el: ElementRef, protected domHandler: DomHandler, protected renderer: Renderer) {}
 
     ngAfterViewInit() {
         this.container = this.el.nativeElement.children[0];

components/datagrid/datagrid.ts

@@ -56,15 +56,15 @@ export class DataGrid implements AfterViewInit,DoCheck {
 
     @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;
 
-    private dataToRender: any[];
+    protected dataToRender: any[];
 
-    private first: number = 0;
+    protected first: number = 0;
 
-    private page: number = 0;
+    protected page: number = 0;
 
     differ: any;
 
-    constructor(private el: ElementRef, differs: IterableDiffers) {
+    constructor(protected el: ElementRef, differs: IterableDiffers) {
         this.differ = differs.find([]).create(null);
     }
 

components/datalist/datalist.ts

@@ -59,15 +59,15 @@ export class DataList implements AfterViewInit,DoCheck {
 
     @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;
 
-    private dataToRender: any[];
+    protected dataToRender: any[];
 
-    private first: number = 0;
+    protected first: number = 0;
 
-    private page: number = 0;
+    protected page: number = 0;
 
     differ: any;
 
-    constructor(private el: ElementRef, differs: IterableDiffers) {
+    constructor(protected el: ElementRef, differs: IterableDiffers) {
         this.differ = differs.find([]).create(null);
     }
 

components/datascroller/datascroller.ts

@@ -54,17 +54,17 @@ export class DataScroller implements AfterViewInit,DoCheck,OnDestroy {
 
     @Input() loader: any;
 
-    private dataToRender: any[] = [];
+    protected dataToRender: any[] = [];
 
-    private first: number = 0;
+    protected first: number = 0;
 
     differ: any;
 
     scrollFunction: any;
 
     contentElement: any;
 
-    constructor(private el: ElementRef, differs: IterableDiffers, private renderer: Renderer, private domHandler: DomHandler) {
+    constructor(protected el: ElementRef, differs: IterableDiffers, protected renderer: Renderer, protected domHandler: DomHandler) {
         this.differ = differs.find([]).create(null);
     }
 

components/datatable/datatable.ts

@@ -328,59 +328,59 @@ export class DataTable implements AfterViewChecked,AfterViewInit,OnInit,DoCheck,
 
     @ContentChild(TemplateRef) rowExpansionTemplate: TemplateRef<any>;
 
-    private dataToRender: any[];
+    protected dataToRender: any[];
 
-    private first: number = 0;
+    protected first: number = 0;
 
-    private page: number = 0;
+    protected page: number = 0;
 
-    private filterTimeout: any;
+    protected filterTimeout: any;
 
-    private filters: {[s: string]: FilterMetadata;} = {};
+    protected filters: {[s: string]: FilterMetadata;} = {};
 
-    private filteredValue: any[];
+    protected filteredValue: any[];
 
-    private columns: Column[];
+    protected columns: Column[];
 
-    private columnsUpdated: boolean = false;
+    protected columnsUpdated: boolean = false;
 
-    private stopSortPropagation: boolean;
+    protected stopSortPropagation: boolean;
 
-    private sortColumn: Column;
+    protected sortColumn: Column;
 
-    private percentageScrollHeight: boolean;
+    protected percentageScrollHeight: boolean;
 
-    private scrollBody: any;
+    protected scrollBody: any;
 
-    private scrollHeader: any
+    protected scrollHeader: any
 
-    private scrollHeaderBox: any;
+    protected scrollHeaderBox: any;
 
-    private bodyScrollListener: any;
+    protected bodyScrollListener: any;
 
-    private headerScrollListener: any;
+    protected headerScrollListener: any;
 
-    private resizeScrollListener: any;
+    protected resizeScrollListener: any;
 
-    private columnResizing: boolean;
+    protected columnResizing: boolean;
 
-    private lastPageX: number;
+    protected lastPageX: number;
 
-    private documentColumnResizeListener: any;
+    protected documentColumnResizeListener: any;
 
-    private documentColumnResizeEndListener: any;
+    protected documentColumnResizeEndListener: any;
 
-    private resizerHelper: any;
+    protected resizerHelper: any;
 
-    private resizeColumn: any;
+    protected resizeColumn: any;
 
-    private reorderIndicatorUp: any;
+    protected reorderIndicatorUp: any;
 
-    private reorderIndicatorDown: any;
+    protected reorderIndicatorDown: any;
 
-    private draggedColumn: any;
+    protected draggedColumn: any;
 
-    private tbody: any;
+    protected tbody: any;
 
     differ: any;
 
@@ -390,8 +390,8 @@ export class DataTable implements AfterViewChecked,AfterViewInit,OnInit,DoCheck,
 
     columnsSubscription: Subscription;
 
-    constructor(private el: ElementRef, private domHandler: DomHandler, differs: IterableDiffers, 
-        @Query(Column) cols: QueryList<Column>, private renderer: Renderer, changeDetector: ChangeDetectorRef) {
+    constructor(protected el: ElementRef, protected domHandler: DomHandler, differs: IterableDiffers, 
+        @Query(Column) cols: QueryList<Column>, protected renderer: Renderer, changeDetector: ChangeDetectorRef) {
         this.differ = differs.find([]).create(null);
         this.columnsSubscription = cols.changes.subscribe(_ => {
             this.columns = cols.toArray();

components/datatable/rowexpansionloader.ts

@@ -12,7 +12,7 @@ export class RowExpansionLoader {
 
     @Input() rowData: any;
 
-    constructor(private viewContainer: ViewContainerRef) {}
+    constructor(protected viewContainer: ViewContainerRef) {}
 
     ngOnInit() {
         let view = this.viewContainer.createEmbeddedView(this.template, {

components/dialog/dialog.ts

@@ -101,7 +101,7 @@ export class Dialog implements AfterViewInit,AfterViewChecked,OnDestroy {
 
     positionInitialized: boolean;
 
-    constructor(private el: ElementRef, private domHandler: DomHandler, private renderer: Renderer) {}
+    constructor(protected el: ElementRef, protected domHandler: DomHandler, protected renderer: Renderer) {}
 
     @Input() get visible(): boolean {
         return this._visible;

components/dragdrop/draggable.ts

@@ -22,9 +22,9 @@ export class Draggable {
 
     @Output() onDrag: EventEmitter<any> = new EventEmitter();
 
-    private handle: any;
+    protected handle: any;
 
-    constructor(private el: ElementRef, private domHandler: DomHandler) {}
+    constructor(protected el: ElementRef, protected domHandler: DomHandler) {}
 
     @HostListener('dragstart', ['$event']) 
     dragStart(event) {

components/dragdrop/droppable.ts

@@ -19,7 +19,7 @@ export class Droppable {
 
     @Output() onDragOver: EventEmitter<any> = new EventEmitter();
 
-    constructor(private el: ElementRef, private domHandler: DomHandler) {}
+    constructor(protected el: ElementRef, protected domHandler: DomHandler) {}
 
     @HostListener('drop', ['$event'])
     drop(event) {