fix conflicts

CHANGELOG.md

@@ -2,6 +2,46 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="0.5.3-rc.56"></a>
+## [0.5.3-rc.56](https://github.com/SAP/fundamental-ngx/compare/v0.5.3-rc.55...v0.5.3-rc.56) (2019-06-26)
+
+
+
+<a name="0.5.3-rc.55"></a>
+## [0.5.3-rc.55](https://github.com/SAP/fundamental-ngx/compare/v0.5.3-rc.54...v0.5.3-rc.55) (2019-06-25)
+
+
+
+<a name="0.5.3-rc.54"></a>
+## [0.5.3-rc.54](https://github.com/SAP/fundamental-ngx/compare/v0.5.3-rc.53...v0.5.3-rc.54) (2019-06-25)
+
+
+### Bug Fixes
+
+* cleaned up badge/label component ([#946](https://github.com/SAP/fundamental-ngx/issues/946)) ([00d672f](https://github.com/SAP/fundamental-ngx/commit/00d672f))
+
+
+
+<a name="0.5.3-rc.53"></a>
+## [0.5.3-rc.53](https://github.com/SAP/fundamental-ngx/compare/v0.5.3-rc.52...v0.5.3-rc.53) (2019-06-25)
+
+
+
+<a name="0.5.3-rc.52"></a>
+## [0.5.3-rc.52](https://github.com/SAP/fundamental-ngx/compare/v0.5.3-rc.51...v0.5.3-rc.52) (2019-06-24)
+
+
+
+<a name="0.5.3-rc.51"></a>
+## [0.5.3-rc.51](https://github.com/SAP/fundamental-ngx/compare/v0.5.3-rc.50...v0.5.3-rc.51) (2019-06-21)
+
+
+### Bug Fixes
+
+* remove isComponent ([#937](https://github.com/SAP/fundamental-ngx/issues/937)) ([53fbef3](https://github.com/SAP/fundamental-ngx/commit/53fbef3))
+
+
+
 <a name="0.5.3-rc.50"></a>
 ## [0.5.3-rc.50](https://github.com/SAP/fundamental-ngx/compare/v0.5.3-rc.49...v0.5.3-rc.50) (2019-06-20)
 

docs/app/documentation/component-docs/badge-label/badge-label-docs.component.html

@@ -62,23 +62,24 @@ <h2>Status Indicator Label with sementic colors</h2>
 
 <playground [schema]="schema" [schemaInitialValues]="data" (onFormChanges)="onSchemaValues($event)">
     <div *ngIf="data.properties.type === 'badge'">
-        <fd-badge [status]="data.properties.status"
-                  [modifier]="data.properties.modifier">{{data.properties.text}}</fd-badge>
+        <span fd-badge [status]="data.properties.status" [modifier]="data.properties.modifier">{{data.properties.text}}
+        </span>
     </div>
     <div *ngIf="data.properties.type === 'label'">
-        <fd-label [status]="data.properties.status">{{data.properties.text}}</fd-label>
+        <span fd-label [status]="data.properties.status">{{data.properties.text}}</span>
     </div>
     <div *ngIf="data.properties.type === 'status label'">
-        <fd-label *ngIf="!data.properties.icon" [isStatusLabel]="true" [status]="data.properties.status"
-                  [statusIcon]="data.properties.statusIcon">{{data.properties.text}}</fd-label>
-        <fd-label *ngIf="data.properties.icon" [isStatusLabel]="true" [status]="data.properties.status"
-                  [icon]="data.properties.icon">{{data.properties.text}}</fd-label>
+        <span fd-label *ngIf="!data.properties.icon" [isStatusLabel]="true" [status]="data.properties.status"
+            [statusIcon]="data.properties.statusIcon">{{data.properties.text}}</span>
+        <span fd-label *ngIf="data.properties.icon" [isStatusLabel]="true" [status]="data.properties.status"
+            [icon]="data.properties.icon">{{data.properties.text}}</span>
     </div>
 </playground>
 
 <style>
-    ::ng-deep fd-badge,
-    ::ng-deep fd-label {
+    ::ng-deep .fd-badge,
+    ::ng-deep .fd-label,
+    ::ng-deep .fd-status-label {
         margin-right: 20px;
     }
-</style>
+</style>

docs/app/documentation/component-docs/badge-label/badge-label-header/badge-label-header.component.html

@@ -1,4 +1,4 @@
-<header>Badge and Label</header>
+<header>Status Indicators</header>
 <description>
     <p>Badges and labels are used to indicate status. Colors, generally in combination with text, are used to easily
         highlight
@@ -11,4 +11,4 @@
 <import module="BadgeLabelModule" path="fundamental-ngx"></import>
 
 <fd-header-tabs></fd-header-tabs>
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

docs/app/documentation/component-docs/badge-label/examples/badge-default-example.component.html

@@ -1,4 +1,4 @@
-<fd-badge>Default</fd-badge>
-<fd-badge [status]="'success'">Default</fd-badge>
-<fd-badge [status]="'warning'">Default</fd-badge>
-<fd-badge [status]="'error'">Default</fd-badge>
+<span fd-badge>Default</span>
+<span fd-badge [status]="'success'">Default</span>
+<span fd-badge [status]="'warning'">Default</span>
+<span fd-badge [status]="'error'">Default</span>

docs/app/documentation/component-docs/badge-label/examples/badge-filled-example.component.html

@@ -1,4 +1,4 @@
-<fd-badge [modifier]="'filled'">Default</fd-badge>
-<fd-badge [status]="'success'" [modifier]="'filled'">Default</fd-badge>
-<fd-badge [status]="'warning'" [modifier]="'filled'">Default</fd-badge>
-<fd-badge [status]="'error'" [modifier]="'filled'">Default</fd-badge>
+<span fd-badge [modifier]="'filled'">Default</span>
+<span fd-badge [status]="'success'" [modifier]="'filled'">Default</span>
+<span fd-badge [status]="'warning'" [modifier]="'filled'">Default</span>
+<span fd-badge [status]="'error'" [modifier]="'filled'">Default</span>

docs/app/documentation/component-docs/badge-label/examples/badge-pill-example.component.html

@@ -1,4 +1,4 @@
-<fd-badge [modifier]="'pill'">Default</fd-badge>
-<fd-badge [status]="'success'" [modifier]="'pill'">Default</fd-badge>
-<fd-badge [status]="'warning'" [modifier]="'pill'">Default</fd-badge>
-<fd-badge [status]="'error'" [modifier]="'pill'">Default</fd-badge>
+<span fd-badge [modifier]="'pill'">Default</span>
+<span fd-badge [status]="'success'" [modifier]="'pill'">Default</span>
+<span fd-badge [status]="'warning'" [modifier]="'pill'">Default</span>
+<span fd-badge [status]="'error'" [modifier]="'pill'">Default</span>

docs/app/documentation/component-docs/badge-label/examples/label-build-status-example.component.html

@@ -1,4 +1,4 @@
-<fd-label [isStatusLabel]="true" [statusIcon]="'available'">Available</fd-label>
-<fd-label [isStatusLabel]="true" [statusIcon]="'away'">Away</fd-label>
-<fd-label [isStatusLabel]="true" [statusIcon]="'busy'">Busy</fd-label>
-<fd-label [isStatusLabel]="true" [statusIcon]="'offline'">Appear Offline</fd-label>
+<span fd-label [isStatusLabel]="true" [statusIcon]="'available'">Available</span>
+<span fd-label [isStatusLabel]="true" [statusIcon]="'away'">Away</span>
+<span fd-label [isStatusLabel]="true" [statusIcon]="'busy'">Busy</span>
+<span fd-label [isStatusLabel]="true" [statusIcon]="'offline'">Appear Offline</span>

docs/app/documentation/component-docs/badge-label/examples/label-default-example.component.html

@@ -1,4 +1,4 @@
-<fd-label>Default</fd-label>
-<fd-label [status]="'success'">Success</fd-label>
-<fd-label [status]="'warning'">Warning</fd-label>
-<fd-label [status]="'error'">Error</fd-label>
+<span fd-label>Default</span>
+<span fd-label [status]="'success'">Success</span>
+<span fd-label [status]="'warning'">Warning</span>
+<span fd-label [status]="'error'">Error</span>

docs/app/documentation/component-docs/badge-label/examples/label-icon-status-example.component.html

@@ -1,4 +1,4 @@
-<fd-label [isStatusLabel]="true" [icon]="'history'">Custom Icon</fd-label>
-<fd-label [isStatusLabel]="true" [icon]="'message-success'">Success</fd-label>
-<fd-label [isStatusLabel]="true" [icon]="'message-warning'">Warning</fd-label>
-<fd-label [isStatusLabel]="true" [icon]="'message-error'">Error</fd-label>
+<span fd-label [isStatusLabel]="true" [icon]="'history'">Custom Icon</span>
+<span fd-label [isStatusLabel]="true" [icon]="'message-success'">Success</span>
+<span fd-label [isStatusLabel]="true" [icon]="'message-warning'">Warning</span>
+<span fd-label [isStatusLabel]="true" [icon]="'message-error'">Error</span>

docs/app/documentation/component-docs/badge-label/examples/label-status-colors-example.component.html

@@ -1,4 +1,4 @@
-<fd-label [isStatusLabel]="true">Default</fd-label>
-<fd-label [isStatusLabel]="true" [status]="'success'">Success</fd-label>
-<fd-label [isStatusLabel]="true" [status]="'warning'">Warning</fd-label>
-<fd-label [isStatusLabel]="true" [status]="'error'">Error</fd-label>
+<span fd-label [isStatusLabel]="true">Default</span>
+<span fd-label [isStatusLabel]="true" [status]="'success'">Success</span>
+<span fd-label [isStatusLabel]="true" [status]="'warning'">Warning</span>
+<span fd-label [isStatusLabel]="true" [status]="'error'">Error</span>

docs/app/documentation/component-docs/date-picker/date-picker-docs.component.html

@@ -57,10 +57,17 @@ <h2>Date Picker in Form</h2>
 </component-example>
 <code-example [code]="datePickerFormTs" [language]="'typescript'"></code-example>
 
+<separator></separator>
+<h2>Date Picker in Form with a range of dates</h2>
+<component-example [name]="'ex7'">
+  <fd-date-picker-form-range-example></fd-date-picker-form-range-example>
+</component-example>
+<code-example [code]="datePickerRangeFormTs" [language]="'typescript'"></code-example>
+
 <separator></separator>
 <h2>Position</h2>
 <description>There is also added <code>[position]</code> attribute which allows us to decide where popup should be shown.</description>
-<component-example name="'ex7'">
+<component-example name="'ex8'">
     <fd-date-picker-position-example></fd-date-picker-position-example>
 </component-example>
 <code-example [code]="datePickerPositionTs" [language]="'typescript'"></code-example>

docs/app/documentation/component-docs/date-picker/date-picker-docs.component.ts

@@ -6,6 +6,7 @@ import * as datePickeri18nSrc from '!raw-loader!./examples/date-picker-i18n-exam
 import * as datePickerFormatSrc from '!raw-loader!./examples/date-picker-format-example.component.ts';
 import * as datePickerAllowNullSrc from '!raw-loader!./examples/date-picker-allow-null-example.component.ts';
 import * as datePickerFormTsSrc from '!raw-loader!./examples/date-picker-form-example.component.ts';
+import * as datePickerRangeFormTsSrc from '!raw-loader!./examples/date-picker-form-range-example.component.ts';
 import * as datePickerPositionSrc from '!raw-loader!./examples/date-picker-position-example.component.ts';
 import * as datePickerDisabledSrc from '!raw-loader!./examples/date-picker-disabled-example.component.ts';
 
@@ -21,6 +22,8 @@ export class DatePickerDocsComponent {
     datePickerFormatTs = datePickerFormatSrc;
     datePickerAllowNullTs = datePickerAllowNullSrc;
     datePickerFormTs = datePickerFormTsSrc;
+    datePickerRangeFormTs = datePickerRangeFormTsSrc;
     datePickerPositionTs = datePickerPositionSrc;
     datePickerDisabledTs = datePickerDisabledSrc;
+
 }

docs/app/documentation/component-docs/date-picker/examples/date-picker-form-example.component.ts

@@ -7,6 +7,9 @@ import { FormGroup, FormControl } from '@angular/forms';
         <form [formGroup]="customForm">
             <fd-date-picker formControlName="date"></fd-date-picker>
         </form>
+        
+        Touched: {{customForm.controls.date.touched}}<br/>
+        Dirty: {{customForm.controls.date.dirty}}<br/>
 
         Selected Date: {{ customForm.controls.date.value.date ? customForm.controls.date.value.date.toDateString() : 'null' }}
     `

docs/app/documentation/component-docs/date-picker/examples/date-picker-form-range-example.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+
+@Component({
+    selector: 'fd-date-picker-form-range-example',
+    template: `
+        <form [formGroup]="customForm">
+            <fd-date-picker type="range" formControlName="dates"></fd-date-picker>
+        </form>
+        
+        Touched: {{customForm.controls.dates.touched}}<br/>
+        Dirty: {{customForm.controls.dates.dirty}}<br/>
+
+        Range Start Date: {{ customForm.controls.dates.value.date ? customForm.controls.dates.value.date.toDateString() : 'null' }}<br/>
+        Range End Date: {{ customForm.controls.dates.value.rangeEnd ? customForm.controls.dates.value.rangeEnd.toDateString() : 'null' }}
+    `
+})
+export class DatePickerFormRangeExampleComponent {
+
+    today: Date = new Date();
+
+    customForm = new FormGroup({
+        dates: new FormControl({ date: this.today, rangeEnd: new Date(this.today.getTime() + 432000000) })
+    });
+};

docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.html

@@ -51,9 +51,19 @@ <h2>Formatting</h2>
 <code-example [code]="datetimeFormatTs" [language]="'typescript'"></code-example>
 
 <separator></separator>
+
 <h2>Disabled state</h2>
 <component-example [name]="'ex6'">
     <fd-datetime-disabled-example></fd-datetime-disabled-example>
 </component-example>
 <code-example [code]="datetimeDisabledHtml" [language]="'HTML'"></code-example>
 <code-example [code]="datetimeDisabledTs" [language]="'typescript'"></code-example>
+
+<separator></separator>
+
+<h2>Use in a form</h2>
+<component-example [name]="'ex5'">
+    <fd-datetime-form-example></fd-datetime-form-example>
+</component-example>
+<code-example [code]="datetimeFormHtml" [language]="'HTML'"></code-example>
+<code-example [code]="datetimeFormTs" [language]="'typescript'"></code-example>

docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.ts

@@ -16,7 +16,8 @@ import * as dateTimeFormatTs from '!raw-loader!./examples/datetime-format-exampl
 
 import * as dateTimeDisabledHtml from '!raw-loader!./examples/datetime-disabled-example/datetime-disabled-example.component.html';
 import * as dateTimeDisabledTs from '!raw-loader!./examples/datetime-disabled-example/datetime-disabled-example.component.ts';
-
+import * as dateTimeFormHtml from '!raw-loader!./examples/datetime-form-example/datetime-form-example.component.html';
+import * as dateTimeFormTs from '!raw-loader!./examples/datetime-form-example/datetime-form-example.component.ts';
 
 @Component({
     selector: 'app-datetime-picker-docs',
@@ -40,6 +41,9 @@ export class DatetimePickerDocsComponent {
     datetimeDisabledHtml = dateTimeDisabledHtml;
     datetimeDisabledTs = dateTimeDisabledTs;
 
+    datetimeFormHtml = dateTimeFormHtml;
+    datetimeFormTs = dateTimeFormTs;
+
     datetimePickerAllowNullTs = dateTimePickerAllowNullTs;
 
 }

docs/app/documentation/component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html

@@ -0,0 +1,8 @@
+<form [formGroup]="customForm">
+    <fd-datetime-picker formControlName="date"></fd-datetime-picker>
+</form>
+
+Touched: {{customForm.controls.date.touched}}<br/>
+Dirty: {{customForm.controls.date.dirty}}<br/>
+
+Selected Date: {{ customForm.controls.date.value ? customForm.controls.date.value.toDateString() : 'null' }}

docs/app/documentation/component-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+    selector: 'fd-datetime-form-example',
+    templateUrl: './datetime-form-example.component.html'
+})
+export class DatetimeFormExampleComponent {
+    customForm = new FormGroup({
+        date: new FormControl(new Date())
+    });
+}

docs/app/documentation/component-docs/dropdown/examples/dropdown-default-example.component.html

@@ -1,6 +1,5 @@
-<fd-popover style="margin-right: 12px;"
-            [isDropdown]="true">
-    Dropdown
+<fd-popover style="margin-right: 12px;">
+    <fd-dropdown-control>Compact Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length || menu2 && menu2.length">
         <fd-menu>
             <ul fd-menu-list>
@@ -22,9 +21,8 @@ <h1 fd-menu-title>
     </fd-popover-body>
 </fd-popover>
 
-<fd-popover [isDropdown]="true"
-            [compact]="true">
-    Compact Dropdown
+<fd-popover>
+    <fd-dropdown-control [compact]="true">Compact Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length">
         <fd-menu>
             <ul fd-menu-list>

docs/app/documentation/component-docs/dropdown/examples/dropdown-icons-example.component.html

@@ -1,6 +1,5 @@
-<fd-popover [isDropdown]="true"
-            [glyph]="'filter'">
-    Dropdown
+<fd-popover>
+    <fd-dropdown-control [glyph]="'filter'">Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length">
         <fd-menu>
             <ul fd-menu-list>

docs/app/documentation/component-docs/dropdown/examples/dropdown-infinite-scroll-example.component.html

@@ -1,5 +1,5 @@
-<fd-popover [isDropdown]="true">
-    Dropdown
+<fd-popover>
+    <fd-dropdown-control>Dropdown</fd-dropdown-control>
     <fd-popover-body>
         <fd-menu>
             <ul fd-menu-list fdInfiniteScroll (onScrollAction)="loadMoreElements()" [scrollPercent]="scrollPercent"

docs/app/documentation/component-docs/dropdown/examples/dropdown-state-example.component.html

@@ -1,6 +1,5 @@
-<fd-popover [isDropdown]="true"
-            [disabled]="true">
-    Dropdown
+<fd-popover [disabled]="true">
+    <fd-dropdown-control [disabled]="true">Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length">
         <fd-menu>
             <ul fd-menu-list>

docs/app/documentation/component-docs/dropdown/examples/dropdown-toolbar-example.component.html

@@ -1,7 +1,5 @@
-<fd-popover style="margin-right: 12px"
-            [isDropdown]="true"
-            [toolbar]="true">
-    Dropdown
+<fd-popover style="margin-right: 12px">
+    <fd-dropdown-control [toolbar]="true">Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length || menu2 && menu2.length">
         <fd-menu>
             <ul fd-menu-list>
@@ -23,10 +21,8 @@ <h1 fd-menu-title>
     </fd-popover-body>
 </fd-popover>
 
-<fd-popover [isDropdown]="true"
-            [compact]="true"
-            [toolbar]="true">
-    Compact Dropdown
+<fd-popover>
+    <fd-dropdown-control [toolbar]="true" [compact]="true">Compact Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length">
         <fd-menu>
             <ul fd-menu-list>

docs/app/documentation/component-docs/tile/examples/tile-actions-example.component.html

@@ -1,10 +1,10 @@
 <fd-tile>
-    <fd-tile-content>
+    <div fd-tile-content>
         <h2 fd-tile-title>
             Tile Title
         </h2>
-    </fd-tile-content>
-    <fd-tile-actions>
+    </div>
+    <div fd-tile-actions>
         <fd-popover>
             <fd-popover-control>
                 <button fd-button
@@ -21,5 +21,5 @@ <h2 fd-tile-title>
                 </fd-menu>
             </fd-popover-body>
         </fd-popover>
-    </fd-tile-actions>
+    </div>
 </fd-tile>