extensible components

components/accordion/accordion-group.component.ts

@@ -47,8 +47,8 @@ export class AccordionPanelComponent implements OnInit, OnDestroy {
     }
   }
 
-  private _isOpen:boolean;
-  private accordion:AccordionComponent;
+  protected _isOpen:boolean;
+  protected accordion:AccordionComponent;
 
   public constructor(@Inject(AccordionComponent) accordion:AccordionComponent) {
     this.accordion = accordion;

components/accordion/accordion.component.ts

@@ -15,7 +15,7 @@ export class AccordionComponent {
   public addClass:boolean = true;
   /* tslint:enable:no-unused-variable */
 
-  private groups:Array<AccordionPanelComponent> = [];
+  protected groups:Array<AccordionPanelComponent> = [];
 
   public closeOtherPanels(openGroup:AccordionPanelComponent):void {
     if (!this.closeOthers) {

components/accordion/readme.md

@@ -32,7 +32,7 @@ export class AccordionGroupComponent implements OnInit, OnDestroy {
   @Input() public get isOpen();
 
   // should be inside of Accordion element
-  constructor(private accordion:Accordion) {}
+  constructor(protected accordion:Accordion) {}
 }
 ```
 

components/alert/alert.component.ts

@@ -23,7 +23,7 @@ export class AlertComponent implements OnInit {
   @Output() public close:EventEmitter<AlertComponent> = new EventEmitter<AlertComponent>(false);
 
   public closed:boolean;
-  private classes:Array<string> = [];
+  protected classes:Array<string> = [];
 
   public ngOnInit():any {
     this.classes[0] = `alert-${this.type}`;

components/buttons/button-checkbox.directive.ts

@@ -17,7 +17,7 @@ export class ButtonCheckboxDirective implements ControlValueAccessor, OnInit {
   protected onChange:any = Function.prototype;
   protected onTouched:any = Function.prototype;
 
-  private value:any;
+  protected value:any;
 
   // view -> model
   @HostListener('click')
@@ -36,13 +36,13 @@ export class ButtonCheckboxDirective implements ControlValueAccessor, OnInit {
     this.toggle(this.trueValue === this.value);
   }
 
-  private get trueValue():boolean {
+  protected get trueValue():boolean {
     return typeof this.btnCheckboxTrue !== 'undefined'
       ? this.btnCheckboxTrue
       : true;
   }
 
-  private get falseValue():boolean {
+  protected get falseValue():boolean {
     return typeof this.btnCheckboxFalse !== 'undefined'
       ? this.btnCheckboxFalse
       : false;

components/buttons/button-radio.directive.ts

@@ -42,7 +42,7 @@ export class ButtonRadioDirective implements ControlValueAccessor, OnInit {
         this.onChange(this.value);
     }
 
-    public constructor( private el: ElementRef) {
+    public constructor( protected el: ElementRef) {
     }
 
     public ngOnInit(): void {

components/carousel/carousel.component.ts

@@ -51,11 +51,11 @@ export class CarouselComponent implements OnDestroy {
   }
 
   public slides:Array<SlideComponent> = [];
-  private currentInterval:any;
-  private isPlaying:boolean;
-  private destroyed:boolean = false;
-  private currentSlide:SlideComponent;
-  private _interval:number;
+  protected currentInterval:any;
+  protected isPlaying:boolean;
+  protected destroyed:boolean = false;
+  protected currentSlide:SlideComponent;
+  protected _interval:number;
 
   public get isBS4():boolean {
     return Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4;
@@ -144,7 +144,7 @@ export class CarouselComponent implements OnDestroy {
     }
   }
 
-  private goNext(slide:SlideComponent, direction:Direction):void {
+  protected goNext(slide:SlideComponent, direction:Direction):void {
     if (this.destroyed) {
       return;
     }
@@ -163,7 +163,7 @@ export class CarouselComponent implements OnDestroy {
     this.restartTimer();
   }
 
-  private getSlideByIndex(index:number):any {
+  protected getSlideByIndex(index:number):any {
     let len = this.slides.length;
     for (let i = 0; i < len; ++i) {
       if (this.slides[i].index === index) {
@@ -173,11 +173,11 @@ export class CarouselComponent implements OnDestroy {
     return void 0;
   }
 
-  private getCurrentIndex():number {
+  protected getCurrentIndex():number {
     return !this.currentSlide ? 0 : this.currentSlide.index;
   }
 
-  private restartTimer():any {
+  protected restartTimer():any {
     this.resetTimer();
     let interval = +this.interval;
     if (!isNaN(interval) && interval > 0) {
@@ -194,7 +194,7 @@ export class CarouselComponent implements OnDestroy {
     }
   }
 
-  private resetTimer():void {
+  protected resetTimer():void {
     if (this.currentInterval) {
       clearInterval(this.currentInterval);
       this.currentInterval = void 0;

components/carousel/slide.component.ts

@@ -21,7 +21,7 @@ export class SlideComponent implements OnInit, OnDestroy {
   @HostBinding('class.carousel-item')
   public addClass:boolean = true;
 
-  private carousel:CarouselComponent;
+  protected carousel:CarouselComponent;
 
   public constructor(carousel:CarouselComponent) {
     this.carousel = carousel;

components/collapse/collapse.directive.ts

@@ -27,12 +27,12 @@ import { Directive, ElementRef, EventEmitter, HostBinding, Input, OnInit, Output
 // TODO: #576 add callbacks: expanding, collapsing after adding animation
 @Directive({selector: '[collapse]'})
 export class CollapseDirective implements OnInit {
-  // private animation:any;
+  // protected animation:any;
   @Output() public collapsed:EventEmitter<any> = new EventEmitter<any>(false);
   @Output() public expanded:EventEmitter<any> = new EventEmitter<any>(false);
   // style
   // @HostBinding('style.height')
-  // private height:string;
+  // protected height:string;
   @HostBinding('style.display')
   public display:string;
   // shown
@@ -49,7 +49,7 @@ export class CollapseDirective implements OnInit {
   @HostBinding('class.collapsing')
   public isCollapsing:boolean = false;
 
-  // @Input() private transitionDuration:number = 500; // Duration in ms
+  // @Input() protected transitionDuration:number = 500; // Duration in ms
 
   @Input()
   public set collapse(value:boolean) {
@@ -61,10 +61,10 @@ export class CollapseDirective implements OnInit {
     return this.isExpanded;
   }
 
-  // private open: boolean;
-  // private _ab:AnimationBuilder;
-  private _el:ElementRef;
-  private _renderer:Renderer;
+  // protected open: boolean;
+  // protected _ab:AnimationBuilder;
+  protected _el:ElementRef;
+  protected _renderer:Renderer;
 
   public constructor(/*_ab:AnimationBuilder, */_el:ElementRef, _renderer:Renderer) {
     // this._ab = _ab;

components/common.ts

@@ -12,7 +12,7 @@ export interface KeyAttribute {
 export class NgTranscludeDirective {
   public viewRef:ViewContainerRef;
 
-  private _ngTransclude:TemplateRef<any>;
+  protected _ngTransclude:TemplateRef<any>;
 
   @Input()
   public set ngTransclude(templateRef:TemplateRef<any>) {
@@ -26,7 +26,7 @@ export class NgTranscludeDirective {
     return this._ngTransclude;
   }
 
-  public constructor(private _viewRef:ViewContainerRef) {
+  public constructor(protected _viewRef:ViewContainerRef) {
     this.viewRef = _viewRef;
   }
 }

components/datepicker/datepicker-inner.component.ts

@@ -79,19 +79,19 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
   public stepMonth: any = {};
   public stepYear: any = {};
 
-  private modes: Array<string> = ['day', 'month', 'year'];
-  private dateFormatter: DateFormatter = new DateFormatter();
-  private uniqueId: string;
-  private _activeDate: Date;
-  private selectedDate: Date;
-  private activeDateId: string;
-
-  private refreshViewHandlerDay: Function;
-  private compareHandlerDay: Function;
-  private refreshViewHandlerMonth: Function;
-  private compareHandlerMonth: Function;
-  private refreshViewHandlerYear: Function;
-  private compareHandlerYear: Function;
+  protected modes: Array<string> = ['day', 'month', 'year'];
+  protected dateFormatter: DateFormatter = new DateFormatter();
+  protected uniqueId: string;
+  protected _activeDate: Date;
+  protected selectedDate: Date;
+  protected activeDateId: string;
+
+  protected refreshViewHandlerDay: Function;
+  protected compareHandlerDay: Function;
+  protected refreshViewHandlerMonth: Function;
+  protected compareHandlerMonth: Function;
+  protected refreshViewHandlerYear: Function;
+  protected compareHandlerYear: Function;
 
   @Input()
   public get activeDate(): Date {
@@ -303,7 +303,7 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
     this.refreshView();
   }
 
-  private getCustomClassForDate(date: Date): string {
+  protected getCustomClassForDate(date: Date): string {
     if (!this.customClass) {
       return '';
     }
@@ -316,7 +316,7 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
     return customClassObject === undefined ? '' : customClassObject.clazz;
   }
 
-  private isDisabled(date: Date): boolean {
+  protected isDisabled(date: Date): boolean {
     // todo: implement dateDisabled attribute
     return ((this.minDate && this.compare(date, this.minDate) < 0) ||
     (this.maxDate && this.compare(date, this.maxDate) > 0));

components/datepicker/datepicker.component.ts

@@ -70,8 +70,8 @@ export class DatePickerComponent implements ControlValueAccessor {
   public onTouched:any = Function.prototype;
 
   public cd:NgModel;
-  private _now:Date = new Date();
-  private _activeDate:Date;
+  protected _now:Date = new Date();
+  protected _activeDate:Date;
 
   @Input()
   public get activeDate():Date {

components/datepicker/daypicker.component.ts

@@ -96,7 +96,7 @@ export class DayPickerComponent implements OnInit {
     return Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4;
   }
 
-  /*private getDaysInMonth(year:number, month:number) {
+  /*protected getDaysInMonth(year:number, month:number) {
    return ((month === 1) && (year % 4 === 0) &&
    ((year % 100 !== 0) || (year % 400 === 0))) ? 29 : DAYS_IN_MONTH[month];
    }*/
@@ -158,7 +158,7 @@ export class DayPickerComponent implements OnInit {
     this.datePicker.refreshView();
   }
 
-  private getDates(startDate:Date, n:number):Array<Date> {
+  protected getDates(startDate:Date, n:number):Array<Date> {
     let dates:Array<Date> = new Array(n);
     let current = new Date(startDate.getTime());
     let i = 0;
@@ -172,7 +172,7 @@ export class DayPickerComponent implements OnInit {
     return dates;
   }
 
-  private getISO8601WeekNumber(date:Date):number {
+  protected getISO8601WeekNumber(date:Date):number {
     let checkDate = new Date(date.getTime());
     // Thursday
     checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));

components/datepicker/yearpicker.component.ts

@@ -49,8 +49,8 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
 })
 export class YearPickerComponent implements OnInit {
   public datePicker:DatePickerInnerComponent;
-  private title:string;
-  private rows:Array<any> = [];
+  protected title:string;
+  protected rows:Array<any> = [];
 
   public constructor(datePicker:DatePickerInnerComponent) {
     this.datePicker = datePicker;
@@ -89,7 +89,7 @@ export class YearPickerComponent implements OnInit {
     this.datePicker.refreshView();
   }
 
-  private getStartingYear(year:number):number {
+  protected getStartingYear(year:number):number {
     // todo: parseInt
     return ((year - 1) / this.datePicker.yearRange) * this.datePicker.yearRange + 1;
   }

components/dropdown/dropdown-keyboard-nav.directive.ts

@@ -9,8 +9,8 @@ const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
   selector: '[dropdown][dropdownKeyboardNav]'
 })
 export class KeyboardNavDirective {
-  private dd:DropdownDirective;
-  private el:ElementRef;
+  protected dd:DropdownDirective;
+  protected el:ElementRef;
 
   public constructor(dd:DropdownDirective, el:ElementRef) {
     this.dd = dd;

components/dropdown/dropdown.directive.ts

@@ -31,9 +31,9 @@ export class DropdownDirective implements OnInit, OnDestroy {
   // drop down toggle element
   public toggleEl:ElementRef;
   public el:ElementRef;
-  private _isOpen:boolean;
+  protected _isOpen:boolean;
 
-  private _changeDetector:ChangeDetectorRef;
+  protected _changeDetector:ChangeDetectorRef;
 
   public constructor(el:ElementRef, ref:ChangeDetectorRef) {
     // @Query('dropdownMenu', {descendants: false})

components/dropdown/dropdown.service.ts

@@ -11,10 +11,10 @@ const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
 const MouseEvent = (global as any).MouseEvent as MouseEvent;
 
 export class DropdownService {
-  private openScope:DropdownDirective;
+  protected openScope:DropdownDirective;
 
-  private closeDropdownBind:EventListener = this.closeDropdown.bind(this);
-  private keybindFilterBind:EventListener = this.keybindFilter.bind(this);
+  protected closeDropdownBind:EventListener = this.closeDropdown.bind(this);
+  protected keybindFilterBind:EventListener = this.keybindFilter.bind(this);
 
   public open(dropdownScope:DropdownDirective):void {
     if (!this.openScope) {
@@ -39,7 +39,7 @@ export class DropdownService {
     window.document.removeEventListener('keydown', this.keybindFilterBind);
   }
 
-  private closeDropdown(event:MouseEvent):void {
+  protected closeDropdown(event:MouseEvent):void {
     if (!this.openScope) {
       return;
     }
@@ -69,7 +69,7 @@ export class DropdownService {
     this.openScope.isOpen = false;
   }
 
-  private keybindFilter(event:KeyboardEvent):void {
+  protected keybindFilter(event:KeyboardEvent):void {
     if (event.which === 27) {
       this.openScope.focusToggleElement();
       this.closeDropdown(void 0);

components/modal/modal-backdrop.component.ts

@@ -37,8 +37,8 @@ export class ModalBackdropComponent {
   public element:ElementRef;
   public renderer:Renderer;
 
-  private _isAnimated:boolean;
-  private _isShown:boolean = false;
+  protected _isAnimated:boolean;
+  protected _isShown:boolean = false;
 
   public constructor(options:ModalBackdropOptions, element:ElementRef, renderer:Renderer) {
     this.element = element;