Merge pull request #4 from valor-software/development

Updating latest changes

README.md

@@ -152,6 +152,11 @@ First time:
  - `npm install`
  - `npm run build`
 
+If you're using Windows, run:
+ - `npm run build.windows` instead of `npm run build`
+ - You will have to install [cwRsync](https://en.wikipedia.org/wiki/CwRsync) because one of
+ the scripts requires `rsync`
+
 To update your fork and prepare it for local usage:
  - `git pull upstream development`
  - `rm -rf node_modules`

cypress/full/buttons_page_spec.ts

@@ -98,7 +98,7 @@ describe('Buttons page test suite', () => {
   });
 
   describe('Radio buttons', () => {
-    const radioCheck = buttons.exampleDemosArr.radioBtn;
+    const radioCheck = buttons.exampleDemosArr.radioBtnWithGroup;
     const btnRadioGroup = buttons.btnRadioGroup;
 
     it('example contains btns, Radio btns and output window. Middle btn is active and other btns - inactive', () => {

cypress/full/datepicker/min_mode_spec.ts

@@ -10,15 +10,15 @@ describe('Datepicker demo test suite: Min-mode', () => {
   });
 
   it(`example contains 1 input of Datepicker and button "Date Picker"`, () => {
-    datepicker.isInputValueEqual(minMode, '08/01/2017');
+    datepicker.isInputValueEqual(minMode, '08/01/2020');
     datepicker.isBtnTxtEqual(minMode, 'Date Picker');
   });
 
   it(`when user clicks on Datepicker input, then container opened and user see list with months (mode=month)`, () => {
     datepicker.clickOnDatepickerInput(minMode);
     datepicker.isDatepickerOpened(true);
     datepicker.isDatePickerBodyExistAndCorrect('month');
-    datepicker.isDatepickerNavigationFullyActiveAndCorrect('month', 'body', '08', '2017');
+    datepicker.isDatepickerNavigationFullyActiveAndCorrect('month', 'body', '08', '2020');
   });
 
   it(`when user clicks on any month, then this month chosen and date shown in the input in format "mm/01/yyyy"`, () => {
@@ -27,7 +27,7 @@ describe('Datepicker demo test suite: Min-mode', () => {
     datepicker.isDatepickerOpened(true);
     datepicker.isDatePickerBodyExistAndCorrect('month');
     datepicker.clickOnDatepickerTableItem('month', 'body', monthIndexToChose);
-    datepicker.isInputValueEqual(minMode, `${monthIndexToChose + 1}/01/2017`);
+    datepicker.isInputValueEqual(minMode, `${monthIndexToChose + 1}/01/2020`);
   });
 
   it(`when user clicks on Datepicker btn, then container opened with mode=month
@@ -48,9 +48,9 @@ describe('Datepicker demo test suite: Min-mode', () => {
     datepicker.isDatePickerBodyExistAndCorrect('year');
     datepicker.clickOnDatepickerTableItem('year', 'body', yearIndexToChose);
     datepicker.isDatePickerBodyExistAndCorrect('month');
-    datepicker.isDatepickerNavigationFullyActiveAndCorrect('month', 'body', '01', `${Math.round(yearIndexToChose / 2 + 2017)}`);
+    datepicker.isDatepickerNavigationFullyActiveAndCorrect('month', 'body', '01', `${Math.round(yearIndexToChose / 2 + 2020)}`);
     datepicker.clickOnDatepickerTableItem('month', 'body', monthIndexToChose);
     datepicker.isDatepickerOpened(false);
-    datepicker.isInputValueEqual(minMode, `${monthIndexToChose + 1}/01/2025`);
+    datepicker.isInputValueEqual(minMode, `${monthIndexToChose + 1}/01/2028`);
   });
 });

cypress/full/modals_service_page_spec.ts

@@ -36,7 +36,7 @@ describe('Modals demo page test suite: Service examples', () => {
     const nestedDemo = modals.exampleDemosArr.serviceNested;
     const btnText = 'Open first modal';
     const open2ndModal = 'Open second modal';
-    const close1stModal = 'Close first modal';
+    const close1stModal = 'Close self';
     const firstModalTitle = 'First modal';
     const secondModalTitle = 'Second modal';
 
@@ -53,15 +53,15 @@ describe('Modals demo page test suite: Service examples', () => {
     });
 
     it(`when user clicks on the button "Open second modal" then the second modal with title "Second modal" is opened,
-        "Close first modal" is present`, () => {
+        "Close self" is present`, () => {
       modals.clickByText(nestedDemo, btnText);
       modals.clickByText(modals.modalBtn, open2ndModal);
       modals.isModalTitleIs(secondModalTitle);
       modals.isButtonExist(modals.modalBody, close1stModal, 3);
       modals.checkElementsQuantity(modals.modalContainer, 2);
     });
 
-    it('when user clicks on the button "Close first modal" then the first modal is closed', () => {
+    it('when user clicks on the button "Close self" then the first modal is closed', () => {
       modals.clickByText(nestedDemo, btnText);
       modals.clickByText(modals.modalBtn, open2ndModal);
       modals.clickByText(modals.modalRedBtn, close1stModal);

cypress/full/timepicker/min_max_spec.ts

@@ -16,7 +16,6 @@ describe('Timepicker demo page test suite: Min - Max', () => {
     timepicker.isInputValueContain(minMax, `${timepicker.getHoursIn12Format(newDate)}`, 0);
     timepicker.isInputValueContain(minMax, `${newDate.getMinutes()}`, 1);
     timepicker.isButtonExist(minMax, `${(newDate.getHours() >= 12) ? 'PM' : 'AM'} `, 0);
-    timepicker.isButtonDisabled(minMax, 0);
   });
 
   describe(`Hours`, () => {
@@ -59,8 +58,7 @@ describe('Timepicker demo page test suite: Min - Max', () => {
       const hourToSet = new Date().getHours() <= 12 ? 16 : 4;
       timepicker.setTimeInInputs(minMax, hourToSet, minToSet);
       timepicker.clickOnArrow(minMax, 'up', 0);
-      timepicker.isAlertContains(minMax, `${timepicker.getHoursIn24Format(hourToSet)}`);
-      timepicker.isArrowDisabled(minMax, 'up', 0);
+      timepicker.isAlertContains(minMax, `${timepicker.getHoursIn24Format(hourToSet + 1)}`);
     });
 
     it(`when user chose (B) hour, then arrow down become unclickable, min hour, which user can chose - B`, () => {

cypress/full/typeahead_page_spec.ts

@@ -296,6 +296,41 @@ describe('Typeahead demo page test suite', () => {
       });
   });
 
+  describe('Multiple Search', () => {
+    beforeEach(() => typeahead.scrollToMenu('Multiple search'));
+
+    const multipleSearch = typeahead.exampleDemosArr.multipleSearch;
+    const formTemplate = 'Model: ';
+    const stateForCheck = 'New York';
+    const textToInput = 'New Mexico,New York';
+    const textWithDelimiters = 'New Mexico,';
+
+    it('example contains typeahead input and typeahead card with "Model:"', () => {
+      typeahead.isElementVisible(multipleSearch, typeahead.inputSelector);
+      typeahead.isPreviewExist(multipleSearch, formTemplate);
+    });
+
+    it('When user uses "," and types "New Mexico," then drop-down with 20 states should be shown',
+      () => {
+        typeahead.clearInputAndSendKeys(multipleSearch, textWithDelimiters);
+        typeahead.isElementVisible(multipleSearch, typeahead.activeDropdown);
+        typeahead.isDropdownHasNItems(typeahead.dropdownBtn, 20);
+      });
+
+    it('when user starts to type "New Mexico,New York" then a drop-down with the second match is shown', () => {
+      typeahead.clearInputAndSendKeys(multipleSearch, textToInput);
+      typeahead.isElementVisible(multipleSearch, typeahead.activeDropdown);
+    });
+
+    it('when user clicks on any item in typeahead drop-down, then typeahead container appends with a selected State',
+      () => {
+        typeahead.clearInputAndSendKeys(multipleSearch, textToInput);
+        typeahead.clickByText(typeahead.activeDropdown, stateForCheck);
+        typeahead.isPreviewExist(multipleSearch, stateForCheck);
+        typeahead.isInputValueEqual(multipleSearch, textToInput);
+      });
+  });
+
   describe('Dropup', () => {
     beforeEach(() => typeahead.scrollToMenu('Dropup'));
 

cypress/support/buttons.po.ts

@@ -22,6 +22,7 @@ export class ButtonsPo extends BaseComponent {
     checkboxWithForms: 'demo-buttons-checkbox-reactiveforms',
     radioUnckeckable: 'demo-buttons-radio-uncheckable',
     radioBtn: 'demo-buttons-radio',
+    radioBtnWithGroup: 'demo-buttons-radio-with-group',
     radioBtnWithForms: 'demo-buttons-radio-reactiveforms',
     disabled: 'demo-buttons-disabled'
   };

cypress/support/typeahead.po.ts

@@ -26,6 +26,7 @@ export class TypeaheadPo extends BaseComponent {
     groupingResults: 'demo-typeahead-grouping',
     ignoreSpaceAndOrder: 'demo-typeahead-single-world',
     delimiters: 'demo-typeahead-phrase-delimiters',
+    multipleSearch: 'demo-typeahead-multiple-search',
     dropUp: 'demo-typeahead-dropup',
     onBlur: 'demo-typeahead-on-blur',
     appendToBody: 'demo-typeahead-container',

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

@@ -6,11 +6,12 @@ import { DemoButtonsCheckboxReactiveFormsComponent } from './demos/checkbox-reac
 import { DemoButtonsRadioReactiveFormsComponent } from './demos/radio-reactiveforms/radio-reactiveforms';
 import { DemoButtonsDisabledComponent } from './demos/disabled/disabled';
 import { DemoButtonsCustomCheckboxValueComponent } from './demos/custom-checkbox-value/custom-checkbox-value';
+import { DemoButtonsRadioWithGroupComponent } from './demos/radio-with-group/radio-with-group';
 
 import { ContentSection } from '../../docs/models/content-section.model';
-import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
-import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
-import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
+import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section';
+import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section';
+import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section';
 
 import { NgApiDocComponent } from '../../docs/api-docs';
 
@@ -59,11 +60,30 @@ export const demoComponentContent: ContentSection[] = [
         outlet: DemoButtonsCheckboxReactiveFormsComponent
       },
       {
-        title: 'Radio',
+        title: 'Radio with radio group',
+        anchor: 'radio-button-with-group',
+        description: `<p>Radio buttons with checked/unchecked states. Radio buttons used together with a <code>btnRadioGroup</code> can be
+used in template driven and reactive forms.
+They follow the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton">W3C WAI-AIRA design pattern for radio groups</a>.
+Meaning
+<ul>
+<li>The Radio Group is inserted in the tab-order of the page by automatically adding a tabindex attribute</li>
+<li>The selected radio element can be changed with the arrow keys if the focus is in the group</li>
+<li>The role of the group is set to "radiogroup" and the aria-checked attributes are added according to the state</li>
+</ul>
+Individual buttons or the whole group can be marked as disabled.
+</p>`,
+        component: require('!!raw-loader!./demos/radio-with-group/radio-with-group.ts'),
+        html: require('!!raw-loader!./demos/radio-with-group/radio-with-group.html'),
+        outlet: DemoButtonsRadioWithGroupComponent
+      },
+      {
+        title: 'Radio without explicit group',
         anchor: 'radio-button',
-        description: `<p>Radio buttons with checked/unchecked states. Group can be created in two ways: using
-<code>btnRadioGroup</code> directive or using the same <code>ngModel</code> binding with several buttons (works only for
-template driven forms). Check the demo below for more info.</p>`,
+        description: `<p> The second method to create a radio button group is to use the same <code>ngModel</code> binding with several buttons.
+ This works only for template driven forms and is not generally advised. But there are use cases were this might be useful, e.g. in tables.
+ In terms of accessibility the buttons in the group can not be selected with the arrow keys, but individually reached by using the tab key
+ and then be toggled by using the space key. You can check out the demo below.</p>`,
         component: require('!!raw-loader!./demos/radio/radio.ts'),
         html: require('!!raw-loader!./demos/radio/radio.html'),
         outlet: DemoButtonsRadioComponent

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

@@ -6,12 +6,14 @@ import { DemoButtonsDisabledComponent } from './disabled/disabled';
 import { DemoButtonsRadioReactiveFormsComponent } from './radio-reactiveforms/radio-reactiveforms';
 import { DemoButtonsUncheckableRadioComponent } from './uncheckable-radio/uncheckable-radio';
 import { DemoButtonsCustomCheckboxValueComponent } from './custom-checkbox-value/custom-checkbox-value';
+import { DemoButtonsRadioWithGroupComponent } from './radio-with-group/radio-with-group';
 
 export const DEMO_COMPONENTS = [
   DemoButtonsBasicComponent,
   DemoButtonsCustomCheckboxValueComponent,
   DemoButtonsCheckboxComponent,
   DemoButtonsRadioComponent,
+  DemoButtonsRadioWithGroupComponent,
   DemoButtonsCheckboxReactiveFormsComponent,
   DemoButtonsRadioReactiveFormsComponent,
   DemoButtonsDisabledComponent,

demo/src/app/components/+buttons/demos/radio-reactiveforms/radio-reactiveforms.html

@@ -2,12 +2,11 @@
 <form [formGroup]="myForm" class="form-inline">
   <div class="form-group">
     <div class="btn-group" btnRadioGroup formControlName="radio">
-      <label btnRadio="A" class="btn btn-primary"
-             tabindex="0" role="button">A</label>
-      <label btnRadio="B" class="btn btn-primary"
-             tabindex="0" role="button">B</label>
-      <label btnRadio="C" class="btn btn-primary"
-             tabindex="0" role="button">C</label>
+      <label btnRadio="A" class="btn btn-primary">A</label>
+      <label btnRadio="B" class="btn btn-primary">B</label>
+      <label btnRadio="C" class="btn btn-primary">C</label>
     </div>
+    <button class="btn btn-primary" (click)="myForm.disabled ? myForm.enable() : myForm.disable()">Enable/Disable</button>
   </div>
+
 </form>

demo/src/app/components/+buttons/demos/radio-with-group/radio-with-group.html

@@ -0,0 +1,20 @@
+<pre class="card card-block card-header">{{radioModel || 'null'}}</pre>
+<div class="form-inline">
+  <div class="btn-group" btnRadioGroup [(ngModel)]="radioModel" [disabled]="modelGroupDisabled">
+    <label class="btn btn-success" btnRadio="Left">Left</label>
+    <label class="btn btn-success" btnRadio="Middle">Middle</label>
+    <label class="btn btn-success" btnRadio="Another" [disabled]="true">Disabled</label>
+    <label class="btn btn-success" btnRadio="Right">Right</label>
+  </div>
+  <button class="btn btn-warning" (click)="modelGroupDisabled = !modelGroupDisabled">Enable/Disable</button>
+</div>
+
+
+<pre class="card card-block card-header">{{radioModelDisabled || 'null'}}</pre>
+<div class="form-inline">
+  <div class="btn-group" btnRadioGroup [(ngModel)]="radioModelDisabled" disabled>
+    <label class="btn btn-success" btnRadio="Left">Left</label>
+    <label class="btn btn-success" btnRadio="Middle">Middle</label>
+    <label class="btn btn-success" btnRadio="Right">Right</label>
+  </div>
+</div>

demo/src/app/components/+buttons/demos/radio-with-group/radio-with-group.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-buttons-radio-with-group',
+  templateUrl: './radio-with-group.html'
+})
+export class DemoButtonsRadioWithGroupComponent {
+  radioModel = 'Middle';
+  radioModelDisabled = 'Middle';
+  modelGroupDisabled=false
+}

demo/src/app/components/+buttons/demos/radio/radio.html

@@ -7,11 +7,3 @@
   <label class="btn btn-primary" [(ngModel)]="radioModel"
          btnRadio="Right" tabindex="0" role="button">Right</label>
 </div>
-<div class="btn-group" btnRadioGroup [(ngModel)]="radioModel">
-  <label class="btn btn-success" btnRadio="Left"
-         tabindex="0" role="button">Left</label>
-  <label class="btn btn-success" btnRadio="Middle"
-         tabindex="0" role="button">Middle</label>
-  <label class="btn btn-success" btnRadio="Right"
-         tabindex="0" role="button">Right</label>
-</div>

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

@@ -45,6 +45,7 @@ import {
 import { DemoDatePickerQuickSelectRangesComponent } from './demos/quick-select-ranges/quick-select-ranges';
 import { DemoDateRangePickerShowPreviousMonth } from './demos/daterangepicker-show-previous-month/show-previous-month';
 import { DemoDatePickerSelectWeekRangeComponent } from './demos/select-week-range/select-week-range';
+import { DemoDatePickerTooltipToSelectedDates } from './demos/tooltip-to-selected-dates/tooltip-to-selected-dates';
 import { DemoDateRangePickerMaxDateRangeComponent } from './demos/max-date-range/max-date-range';
 import { DemoDateRangePickerDisplayOneMonth } from './demos/daterangepicker-display-one-month/display-one-month';
 import { DemoDatepickerTodayButtonComponent } from './demos/today-button/today-button';
@@ -392,6 +393,14 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>Style dates with custom classes</p>`,
         outlet: DemoDatepickerDateCustomClassesComponent
       },
+      {
+        title: 'Tooltip for selected dates',
+        anchor: 'tooltip-for-selected-dates',
+        component: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts'),
+        html: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.html'),
+        description: ``,
+        outlet: DemoDatePickerTooltipToSelectedDates
+      },
       {
         title: 'Quick select ranges',
         anchor: 'quick-select-ranges',

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

@@ -36,6 +36,7 @@ import { DemoDatepickerValueChangeEventComponent } from './value-change-event/va
 import { DemoDatePickerVisibilityEventsComponent } from './visibility-events/visibility-events';
 import { DemoDatePickerQuickSelectRangesComponent } from './quick-select-ranges/quick-select-ranges';
 import { DemoDateRangePickerShowPreviousMonth } from './daterangepicker-show-previous-month/show-previous-month';
+import { DemoDatePickerTooltipToSelectedDates } from './tooltip-to-selected-dates/tooltip-to-selected-dates';
 import { DemoDateRangePickerMaxDateRangeComponent } from './max-date-range/max-date-range';
 import { DemoDateRangePickerDisplayOneMonth } from './daterangepicker-display-one-month/display-one-month';
 import { DemoDatepickerTodayButtonComponent } from './today-button/today-button';
@@ -72,6 +73,7 @@ export const DEMO_COMPONENTS = [
   DemoDatePickerSelectDatesFromOtherMonthsComponent,
   DemoDatePickerSelectWeekComponent,
   DemoDatePickerSelectWeekRangeComponent,
+  DemoDatePickerTooltipToSelectedDates,
   DemoDatepickerTriggersCustomComponent,
   DemoDatepickerTriggersManualComponent,
   DemoDatepickerValueChangeEventComponent,

demo/src/app/components/+datepicker/demos/min-mode/min-mode.component.html

@@ -4,10 +4,23 @@
            class="form-control"
            [bsConfig]="bsConfig"
            #dp="bsDatepicker"
-           bsDatepicker [(bsValue)]="bsValue">
+           bsDatepicker [(bsValue)]="datePickerValue">
   </div>
   <div class="col-xs-12 col-12 col-md-3 form-group">
     <button class="btn btn-success" (click)="dp.toggle()" type="button">Date Picker</button>
   </div>
 </div>
+
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           class="form-control"
+           [bsConfig]="bsConfig"
+           #drp="bsDaterangepicker"
+           bsDaterangepicker [(bsValue)]="dateRangePickerValue">
+  </div>
+  <div class="col-xs-12 col-12 col-md-3 form-group">
+    <button class="btn btn-success" (click)="drp.toggle()" type="button">DateRange Picker</button>
+  </div>
+</div>
 <br>

demo/src/app/components/+datepicker/demos/min-mode/min-mode.component.ts

@@ -7,12 +7,16 @@ import { BsDatepickerConfig, BsDatepickerViewMode } from 'ngx-bootstrap/datepick
   templateUrl: './min-mode.component.html'
 })
 export class DemoDatepickerMinModeComponent implements OnInit {
-  bsValue: Date = new Date(2017, 7);
+  datePickerValue: Date = new Date(2020, 7);
+  dateRangePickerValue: Date[];
+  range1: Date = new Date(2020, 5);
+  range2: Date = new Date(2020, 8);
   minMode: BsDatepickerViewMode = 'month';
 
   bsConfig: Partial<BsDatepickerConfig>;
 
   ngOnInit(): void {
+    this.dateRangePickerValue = [this.range1, this.range2];
     this.bsConfig = Object.assign({}, {
       minMode : this.minMode
     });

demo/src/app/components/+datepicker/demos/tooltip-to-selected-dates/tooltip-to-selected-dates.html

@@ -0,0 +1,10 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Datepicker"
+           class="form-control"
+           bsDatepicker
+           [dateTooltipTexts]="selectedDates"
+           [bsConfig]="{ dateTooltipTexts: selectedDates }">
+  </div>
+</div>

demo/src/app/components/+datepicker/demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { DatepickerDateTooltipText } from 'ngx-bootstrap/datepicker';
+
+@Component({
+  selector: 'demo-datepicker-tooltip-to-selected-dates',
+  templateUrl: './tooltip-to-selected-dates.html'
+})
+export class DemoDatePickerTooltipToSelectedDates {
+  selectedDates : DatepickerDateTooltipText[] = [{ date: new Date('2020-08-08'), tooltipText: '8th of August'},
+    { date: new Date('2020-08-09'), tooltipText: '9th of August'},
+    { date: new Date('2020-08-07'), tooltipText: '7th of August'}
+  ]
+}