Merge branch 'development' of github.com:svetoldo4444ka/ngx-bootstrap…

… into docs-add-key-navigation-accordion

demo/src/app/components/+alerts/alerts-section.list.ts

@@ -39,8 +39,7 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>Alerts are available for any length of text, as well as an optional dismiss
           button. For proper styling, use one of the four <strong>required</strong>
           contextual classes (e.g., <code>.alert-success</code>). For inline
-          dismissal, use the <a routerLink="." fragment="dismissing"><code>dismiss
-          property</code></a>.</p>`,
+          dismissal, use the <code>dismissible</code> property.</p>`,
         component: require('!!raw-loader?lang=typescript!./demos/basic/basic'),
         html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         outlet: DemoAlertBasicComponent

demo/src/app/components/+collapse/collapse-section.list.ts

@@ -1,5 +1,6 @@
 import { CollapseDemoComponent } from './demos/basic/basic';
 import { ToggleManualDemoComponent } from './demos/toggle-manual/toggle-manual';
+import { CollapseDemoEventsComponent } from './demos/events/events';
 
 import { ContentSection } from '../../docs/models/content-section.model';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
@@ -30,6 +31,15 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         outlet: CollapseDemoComponent
       },
+      {
+        title: 'Events',
+        anchor: 'events',
+        component: require('!!raw-loader?lang=typescript!./demos/events/events'),
+        html: require('!!raw-loader?lang=markup!./demos/events/events.html'),
+        description: `Collapse directive exposes 2 events: <code>collapsed</code>, that fires when a content was hidden, 
+                      and <code>expanded</code>, that fires when a content was shown`,
+        outlet: CollapseDemoEventsComponent
+      },
       {
         title: 'Manual toggle',
         anchor: 'manual-toggle',

demo/src/app/components/+collapse/demos/basic/basic.html

@@ -2,9 +2,6 @@
         (click)="isCollapsed = !isCollapsed">Toggle collapse
 </button>
 <hr>
-<div (collapsed)="collapsed($event)"
-     (expanded)="expanded($event)"
-     [collapse]="isCollapsed"
-     class="card card-block card-header">
+<div [collapse]="isCollapsed" class="card card-block card-header">
   <div class="well well-lg">Some content</div>
 </div>

demo/src/app/components/+collapse/demos/basic/basic.ts

@@ -5,13 +5,5 @@ import { Component } from '@angular/core';
   templateUrl: './basic.html'
 })
 export class CollapseDemoComponent {
-  isCollapsed: boolean = false;
-
-  collapsed(event: any): void {
-    console.log(event);
-  }
-
-  expanded(event: any): void {
-    console.log(event);
-  }
+  isCollapsed = false;
 }

demo/src/app/components/+collapse/demos/events/events.html

@@ -0,0 +1,17 @@
+<div class="row">
+  <div class="col-md-3">
+    <button type="button" class="btn btn-primary"
+            (click)="isCollapsed = !isCollapsed">Toggle collapse
+    </button>
+  </div>
+  <div class="col-md-9">
+    <pre class="card card-block card-header">Event: {{message}}</pre>
+  </div>
+</div>
+<hr>
+<div (collapsed)="collapsed()"
+     (expanded)="expanded()"
+     [collapse]="isCollapsed"
+     class="card card-block card-header">
+  <div class="well well-lg">Some content</div>
+</div>

demo/src/app/components/+collapse/demos/events/events.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'collapse-demo-events',
+  templateUrl: './events.html'
+})
+export class CollapseDemoEventsComponent {
+  isCollapsed = false;
+  message: string;
+
+  collapsed(): void {
+    this.message = 'collapsed';
+  }
+
+  expanded(): void {
+    this.message = 'expanded';
+  }
+}

demo/src/app/components/+collapse/demos/index.ts

@@ -1,9 +1,11 @@
 import { CollapseDemoComponent } from './basic/basic';
 import { ToggleManualDemoComponent } from './toggle-manual/toggle-manual';
+import { CollapseDemoEventsComponent } from './events/events';
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
 
 export const DEMO_COMPONENTS = [
   CollapseDemoComponent,
+  CollapseDemoEventsComponent,
   ToggleManualDemoComponent,
   DemoAccessibilityComponent
 ];

demo/src/app/components/+datepicker/datepicker-section.list.ts

@@ -147,11 +147,11 @@ export const demoComponentContent: ContentSection[] = [
         outlet: DemoDatepickerMinMaxComponent
       },
       {
-        title: 'Disabled (scratch, WIP)',
+        title: 'Disabled',
         anchor: 'disabled-datepicker',
         component: require('!!raw-loader?lang=typescript!./demos/disabled/disabled.component.ts'),
         html: require('!!raw-loader?lang=markup!./demos/disabled/disabled.component.html'),
-        description: `<p>If you want to disable datepicker set <code>isDisabled</code> property to true</p>`,
+        description: `<p>If you want to disable datepicker's or daterangepicker's content set <code>isDisabled</code> property to true</p>`,
         outlet: DemoDatepickerDisabledComponent
       },
       {
@@ -160,7 +160,8 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader?lang=typescript!./demos/forms/forms.component.ts'),
         html: require('!!raw-loader?lang=markup!./demos/forms/forms.component.html'),
         description: `<p>Datepicker and daterangepicker can be used in forms. Keep in mind that
-          value of <code>ngModel</code> is <code>Date</code> object (array of 2 object for daterangepicker)</p>`,
+          value of <code>ngModel</code> is <code>Date</code> object for datepicker and array of 2 
+          <code>Date</code> objects for daterangepicker</p>`,
         outlet: DemoDatepickerFormsComponent
       },
       {

demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html

@@ -1,4 +1,4 @@
-<p>bsValue property sets initial state in this example</p>
+<p><code>bsValue</code> property sets initial state in this example</p>
 <div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
     <input type="text"
@@ -12,7 +12,7 @@
   </div>
 </div>
 
-<p>ngModel property sets two-way data binding in this example</p>
+<p><code>ngModel</code> property sets two-way data binding in this example</p>
 <div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
     <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue">

demo/src/app/components/+datepicker/demos/disabled/disabled.component.html

@@ -1,9 +1,13 @@
 <div class="row">
   <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
-    <input class="form-control" placeholder="Datepicker" bsDatepicker #dp="bsDatepicker">
+    <input class="form-control" placeholder="Datepicker" bsDatepicker #dp="bsDatepicker"
+           [isDisabled]="isDisabled">
   </div>
   <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
-    <input class="form-control" placeholder="Daterangepicker" bsDaterangepicker #dpr="bsDaterangepicker">
+    <input class="form-control" placeholder="Daterangepicker" bsDaterangepicker #dpr="bsDaterangepicker"
+           [isDisabled]="isDisabled">
+  </div>
+  <div class="col-xs-12 col-12 col-sm-4 col-md-12 col-lg-4 form-group">
+    <button class="btn btn-success" (click)="toggleDisabling()">Toggle disabling</button>
   </div>
 </div>
-

demo/src/app/components/+datepicker/demos/disabled/disabled.component.ts

@@ -6,4 +6,8 @@ import { Component } from '@angular/core';
 })
 export class DemoDatepickerDisabledComponent {
   isDisabled = false;
+
+  toggleDisabling(): void {
+    this.isDisabled = !this.isDisabled;
+  }
 }

demo/src/app/components/+datepicker/demos/placement/placement.html

@@ -1,27 +1,27 @@
 <div class="row">
   <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group">
-    <label>The datepicker's placement is right</label>
+    <p>The datepicker's placement is right</p>
     <input class="form-control"
       placeholder="Datepicker"
       bsDatepicker
       placement="right">
   </div>
   <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group">
-    <label>The datepicker's placement is top</label>
+    <p>The datepicker's placement is top</p>
     <input class="form-control"
       placeholder="Datepicker"
       bsDatepicker
       placement="top">
   </div>
   <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group">
-    <label>The datepicker's placement is bottom</label>
+    <p>The datepicker's placement is bottom</p>
     <input class="form-control"
       placeholder="Datepicker"
       bsDatepicker
       placement="bottom">
     </div>
   <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group">
-    <label>The datepicker's placement is left</label>
+    <p>The datepicker's placement is left</p>
     <input class="form-control"
       placeholder="Datepicker"
       bsDatepicker

demo/src/app/components/+modal/demos/events/events.html

@@ -1,6 +1,6 @@
 <button type="button" class="btn btn-primary" (click)="showModal()">Open a modal</button>
 <br><br>
-<pre *ngFor="let message of messages">{{message}}</pre>
+<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>
 
 <div class="modal fade" bsModal #modal="bs-modal" tabindex="-1" role="dialog"
      aria-labelledby="mySmallModalLabel" aria-hidden="true"

demo/src/app/components/+modal/demos/events/events.ts

@@ -3,7 +3,13 @@ import { ModalDirective } from 'ngx-bootstrap/modal';
 
 @Component({
   selector: 'demo-modal-events',
-  templateUrl: './events.html'
+  templateUrl: './events.html',
+  styles: [`
+    .card {
+      margin-bottom: 0.75rem;
+      padding: 8px;
+    }
+  `]
 })
 export class DemoModalEventsComponent {
   @ViewChild(ModalDirective) modal: ModalDirective;

demo/src/app/components/+modal/demos/service-confirm-window/service-confirm-window.html

@@ -1,6 +1,6 @@
 <button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
 <br><br>
-<pre>{{message}}</pre>
+<pre class="card card-block card-header">{{message}}</pre>
 <ng-template #template>
   <div class="modal-body text-center">
     <p>Do you want to confirm?</p>

demo/src/app/components/+modal/demos/service-events/service-events.html

@@ -1,6 +1,6 @@
 <button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
 <br><br>
-<pre *ngFor="let message of messages">{{message}}</pre>
+<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>
 <ng-template #template>
   <div class="modal-header">
     <h4 class="modal-title pull-left">Modal</h4>

demo/src/app/components/+modal/demos/service-events/service-events.ts

@@ -8,7 +8,13 @@ import 'rxjs/add/observable/combineLatest';
 
 @Component({
   selector: 'demo-modal-service-events',
-  templateUrl: './service-events.html'
+  templateUrl: './service-events.html',
+  styles: [`
+    .card {
+      margin-bottom: 0.75rem;
+      padding: 8px;
+    }
+  `]
 })
 export class DemoModalServiceEventsComponent {
   modalRef: BsModalRef;

demo/src/ng-api-doc.ts

@@ -695,7 +695,7 @@ export const ngdoc: any = {
       {
         "name": "isDisabled",
         "type": "boolean",
-        "description": "<p>Indicates whether datepicker is enabled or not</p>\n"
+        "description": "<p>Indicates whether datepicker&#39;s content is enabled or not</p>\n"
       },
       {
         "name": "isOpen",
@@ -845,7 +845,7 @@ export const ngdoc: any = {
       {
         "name": "isDisabled",
         "type": "boolean",
-        "description": "<p>Indicates whether daterangepicker is enabled or not</p>\n"
+        "description": "<p>Indicates whether daterangepicker&#39;s content is enabled or not</p>\n"
       },
       {
         "name": "isOpen",

src/datepicker/bs-datepicker.component.ts

@@ -77,7 +77,7 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
    */
   @Input() bsConfig: Partial<BsDatepickerConfig>;
   /**
-   * Indicates whether datepicker is enabled or not
+   * Indicates whether datepicker's content is enabled or not
    */
   @Input() isDisabled: boolean;
   /**

src/datepicker/bs-daterangepicker.component.ts

@@ -77,7 +77,7 @@ export class BsDaterangepickerDirective
    */
   @Input() bsConfig: Partial<BsDaterangepickerConfig>;
   /**
-   * Indicates whether daterangepicker is enabled or not
+   * Indicates whether daterangepicker's content is enabled or not
    */
   @Input() isDisabled: boolean;
   /**

src/datepicker/monthpicker.component.ts

@@ -31,7 +31,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
   </thead>
   <tbody>
     <tr *ngFor="let rowz of rows">
-      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" id="{{dtz.uid}}" [ngClass]="dtz.customClass">
+      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid" [ngClass]="dtz.customClass">
         <button type="button" style="min-width:100%;" class="btn btn-default"
                 [ngClass]="{'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)), disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz)}"
                 [disabled]="dtz.disabled"

src/datepicker/yearpicker.component.ts

@@ -32,7 +32,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
   </thead>
   <tbody>
     <tr *ngFor="let rowz of rows">
-      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell">
+      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid">
         <button type="button" style="min-width:100%;" class="btn btn-default"
                 [ngClass]="{'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)), disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz)}"
                 [disabled]="dtz.disabled"