- Covalent Components & Addons
-
-
-
-
-
+
-
-
-
+
+
+ Code
+
+
+
+
+ star
+ Google
+
+
+ 1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA
+
+
+
+
+ pin_drop
+ Google
+
+
+
+
+
+
+
+
+
- TdExpansionPanelComponent
- How to use this component
+ Expansion panel with header template
+ replace the entire header as needed and disable ripple
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ Demo
+
- ... add header content (overrides label and sublabel)
-
-
- ... add label content (if not used, falls back to [label] input)
-
-
- ... add sublabel content (if not used, falls back to [sublabel] input)
+
+ Custom td-expansion-panel-header
+
- ... add summary that will be shown when expansion-panel is "collapsed".
+
- ... add content that will be shown when the step is "expanded"
+
+
+ account_box
+
+
+ description
+
+
+ vpn_key
+
+
- ]]>
-
-
-
-
-
-
-
-
-
+
+
+ Code
+
+
+
+
+
+ Custom td-expansion-panel-header
+
+
+
+
+
+
+ account_box
+
+
+ description
+
+
+ vpn_key
+
+
+
+ ]]>
+
+
+
+
+
+
-
+ Components & Addons
+
-
+
+
+
@@ -102,32 +118,3 @@
-
-
- Min/Max Validators
-
-
-
-
-
- ]]>
-
-
-
diff --git a/src/app/components/components/expansion-panel/expansion-panel.component.html b/src/app/components/components/expansion-panel/expansion-panel.component.html
index 993a400654..d7af2f304e 100644
--- a/src/app/components/components/expansion-panel/expansion-panel.component.html
+++ b/src/app/components/components/expansion-panel/expansion-panel.component.html
@@ -1,17 +1,146 @@
- Expansion Panels
- Expand & collapse containers
+ Expansion panels
+ Use single or multiple expansion panels
-
- with custom headings, columns, and inline editing
columns: ITdDataTableColumn[] = [ { name: 'sku', label: 'SKU #', tooltip: 'Stock Keeping Unit' }, { name: 'item', label: 'Item name' }, - { name: 'price', label 'Price (US$)', numeric: true, format: v => v.toFixed(2) }, + { name: 'price', label: 'Price (US$)', numeric: true, format: v => v.toFixed(2) }, ]; constructor(private _dialogService: TdDialogService) {} @@ -267,6 +267,7 @@No results to display.
[multiple]="multiple" [sortable]="true" [sortBy]="sortBy" + [(ngModel)]="selectedRows" [sortOrder]="sortOrder" (sortChange)="sort($event)"> @@ -305,6 +306,7 @@No results to display.
currentPage: number = 1; pageSize: number = 5; sortBy: string = 'sku'; + selectedRows: any[] = []; sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Descending; constructor(private _dataTableService: TdDataTableService) {} diff --git a/src/app/components/components/directives/directives.component.html b/src/app/components/components/directives/directives.component.html index bf25f1a54b..ec3d52f7a8 100644 --- a/src/app/components/components/directives/directives.component.html +++ b/src/app/components/components/directives/directives.component.html @@ -6,6 +6,22 @@A directive is essentially like a component functionally without a template. There are structural and attribute directives.
Structural directives can change the DOM layout by adding and removing DOM elements. NgFor and NgIf are two familiar examples.
An Attribute directive can change the appearance or behavior of an element. The built-in NgStyle directive, for example, can change several element styles at the same time.
+ +Setup:
+Import the [CovalentCommonModule] in your NgModule:
+We've added min/max validations since @angular doesnt support them at the moment.
-Supported:
--
-
TdMinValidatorfor selector:[min][formControlName],[min][formControl],[min][ngModel]
- TdMaxValidatorfor selector:[max][formControlName],[max][formControl],[max][ngModel]
-
Example enter lower than 5 or higher than 10:
-
-
-
-
-
- Errors:
-{{el?.errors | json}}
- HTML:
-Expand/Collapse Event for Expansion 1: {{expandCollapseExpansion1Msg}}
-
-
-
-
-
- star
- Custom Label (template)
-
-
- list
- Custom Sublabel (template)
-
-
-
-
-
+
+
+ Demo
+
+
+
+
+
+
+ Code
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+ Grouped Expansion panels
+ Add margin animation between grouped expansion panels
+
+
+ Demo
+
+
+
+
+
+
+
+
+
+
+ Code
+
+
+
+
+
+
+
+
+
+
+ ]]>
+
+
+
+
+
+
+
+ Expansion panel with summary and templates
+ Expand to view form, collapse to view summary
+
+
+ Demo
+
+
+ star
+ Google
+
+
+ 1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA
+
@@ -38,201 +167,155 @@
-
+
+ md-padding class
+Demo 1
+ Demo 2
+ Demo 3
+ Demo 4
+
+
+ md-padding class
+Demo 5
+ Demo 6
+ Demo 7
+ Demo 8
+ HTML:
+
+
+ md-padding class
+Demo 1
+ Demo 2
+ Demo 3
+ Demo 4
+
+
+ md-padding class
+Demo 5
+ Demo 6
+ Demo 7
+ Demo 8
+ Typescript:
+
+
+ Disabled
+
+
+
+
+ md-padding class
+
+
+ md-padding class
+
+
+ md-padding class
+HTML:
+
+
+ md-padding class
+
+
+ md-padding class
+
+
+ md-padding class
+Headquarters
-
- md-padding class
-Demo 1
- Demo 2
- Demo 3
- Demo 4
-
-
- md-padding class
-Phase 1
- Phase 2
- Phase 3
- The entire panel header can be replaced as well:
-
-
-
-
-
-
-
- Custom td-expansion-panel-header
-
-
-
-
-
-
- account_box
-
-
- description
-
-
- vpn_key
-
-
- access_time
-
-
- today
-
-
-
-
-
-
-
- Owner
- chevron_right
- John Jameson
-
-
- API Key
- chevron_right
- 1141e8e8-8d24-4956-93c2
-
-
- Last Updated
- chevron_right
- Wed, July 6, 2016 11:13 AM
-
- Metadata
-John Jameson
-Owner
-An item description
-Description
-1141e8e8-8d24-4956-93c2
-API Key
-Dates
-Wed, July 6, 2016 11:13 AM
-Last Updated
-Wed, July 4, 2016 09:11 AM
-Created
-HTML:
+Headquarters
+
+ 1600 Amphitheatre Pkwy
Mountain View, CA 94043, USA
+
+
+
+
+
+ ]]>
+ ]]>
- Use ]]> element to add expand/collapse feature to your html blocks
Place your html in ]]> element.
Behavior:
-Collapsed panel
-A collapsed panel displays summary information. Upon selecting the collapsed panel, it expands to display the full expansion panel.
- -Expanded panel
-Upon selection, a collapsed panel expands, allowing users to add or edit information. Helper text may be added to the panel to assist the user.
- -Usage:
-The ]]> component can be used two ways:
Editing
-Expansion panels are best used for lightweight editing of an element, such as selecting a value for a setting.
- -Creation flows
-Expansion panels may be displayed in a sequence to form creation flows.
- -Properties:
-The ]]> component has {{expansionAttrs.length}} properties:
{{attr.name}}: {{attr.type}}
-{{attr.description}}
- -Example:
-HTML:
-
+
+ Owner
+ chevron_right
+ John Jameson
+
+
+ API Key
+ chevron_right
+ 1141e8e8-8d24-4956-93c2
+
+ Metadata
+John Jameson
+Owner
+An item description
+Description
+1141e8e8-8d24-4956-93c2
+API Key
+Typescript:
-Setup:
-Import the [CovalentExpansionPanelModule] in your NgModule:
-HTML:
+
+
+
+ Owner
+ chevron_right
+ John Jameson
+
+
+ API Key
+ chevron_right
+ 1141e8e8-8d24-4956-93c2
+
+ Metadata
+John Jameson
+Owner
+An item description
+Description
+1141e8e8-8d24-4956-93c2
+API Key
+
+
{{item.icon}}
@@ -28,7 +28,7 @@
-
+
{{item.icon}}
@@ -50,7 +50,7 @@
-
+
-
+
{{item.icon}}
diff --git a/src/app/components/components/overview/overview.component.ts b/src/app/components/components/overview/overview.component.ts
index 03548e424d..ff796eec12 100644
--- a/src/app/components/components/overview/overview.component.ts
+++ b/src/app/components/components/overview/overview.component.ts
@@ -14,116 +14,116 @@ export class ComponentsOverviewComponent {
@HostBinding('class.td-route-animation') classAnimation: boolean = true;
items: Object[] = [{
- color: 'deep-purple-700',
+ color: 'deep-purple-A700',
icon: 'view_list',
route: 'steps',
title: 'Stepper',
}, {
- color: 'blue-700',
+ color: 'blue-A700',
icon: 'open_with',
route: 'expansion-panel',
title: 'Expansion Panel',
}, {
- color: 'light-blue-700',
+ color: 'pink-A700',
icon: 'space_bar',
route: 'file-input',
title: 'File Input',
}, {
- color: 'cyan-700',
+ color: 'cyan-A700',
icon: 'attach_file',
route: 'file-upload',
title: 'File Upload',
}, {
- color: 'grey-700',
+ color: 'deep-orange-A700',
icon: 'label',
route: 'chips',
title: 'Chips',
}, {
- color: 'light-green-700',
+ color: 'lime-A700',
icon: 'hourglass_empty',
route: 'loading',
title: 'Loading',
}, {
- color: 'amber-700',
+ color: 'amber-A700',
icon: 'open_in_browser',
route: 'dialogs',
title: 'Simple Dialogs',
}, {
- color: 'green-700',
+ color: 'green-A700',
icon: 'grid_on',
route: 'data-table',
title: 'Data Table',
}, {
- color: 'teal-700',
+ color: 'teal-A700',
icon: 'format_indent_increase',
route: 'json-formatter',
title: 'JSON Formatter',
}, {
- color: 'blue-grey-700',
+ color: 'indigo-A700',
icon: 'swap_horiz',
route: 'paging',
title: 'Paging',
}, {
- color: 'purple-700',
+ color: 'purple-A700',
icon: 'notifications',
route: 'notifications',
title: 'Notifications',
}, {
- color: 'light-blue-A400',
+ color: 'light-blue-A700',
icon: 'info_outline',
route: 'message',
title: 'Messages',
}, {
- color: 'lime-700',
+ color: 'indigo-A700',
icon: 'search',
route: 'search',
title: 'Search',
}, {
- color: 'red-700',
+ color: 'red-A700',
icon: 'devices',
route: 'media',
title: 'Media Queries',
}, {
- color: 'light-blue-700',
+ color: 'light-blue-A700',
icon: 'wb_iridescent',
route: 'directives',
title: 'Directives',
}, {
- color: 'deep-orange-700',
+ color: 'deep-orange-A700',
icon: 'filter_list',
route: 'pipes',
title: 'Pipes',
},
];
optional: Object[] = [{
- color: 'pink-700',
+ color: 'pink-A700',
icon: 'code',
route: 'syntax-highlighting',
title: 'Highlighting',
}, {
- color: 'orange-700',
+ color: 'orange-A700',
icon: 'chrome_reader_mode',
route: 'markdown',
title: 'Markdown',
}, {
- color: 'green-700',
+ color: 'green-A700',
icon: 'format_align_center',
route: 'dynamic-forms',
title: 'Dynamic Forms',
}, {
- color: 'indigo-700',
+ color: 'indigo-A700',
icon: 'http',
route: 'http',
title: 'HTTP Service',
},
];
external: Object[] = [{
- color: 'purple-600',
+ color: 'purple-A700',
icon: 'insert_chart',
route: 'ngx-charts',
title: 'NGX-Charts',
}, {
- color: 'blue-600',
+ color: 'blue-A700',
icon: 'language',
route: 'ngx-translate',
title: 'NGX-Translate',
diff --git a/src/app/components/components/pipes/pipes.component.html b/src/app/components/components/pipes/pipes.component.html
index 484ffe05f1..01cf4550ab 100644
--- a/src/app/components/components/pipes/pipes.component.html
+++ b/src/app/components/components/pipes/pipes.component.html
@@ -7,6 +7,21 @@
+
+
@@ -177,4 +192,15 @@ Original value:
]]>
-
\ No newline at end of file
+
+
+
+ Angular Pipes
+
+
+ launch
+ Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe
+
+
+
\ No newline at end of file
diff --git a/src/app/components/components/steps/steps.component.html b/src/app/components/components/steps/steps.component.html
index fdf1ea6571..5dfb34fc82 100644
--- a/src/app/components/components/steps/steps.component.html
+++ b/src/app/components/components/steps/steps.component.html
@@ -21,7 +21,7 @@ Basic Usage (template)
Include any content you like for an active stepper
-
+
This step is required!
@@ -50,7 +50,7 @@ Basic Usage (template)
Include any content you like for an active stepper
-
+
This step is required!
@@ -195,7 +195,7 @@
+
... add label content (if not used, falls back to [label] input)
diff --git a/src/app/components/components/steps/steps.component.ts b/src/app/components/components/steps/steps.component.ts
index 6f5f806893..f1b9328b8b 100644
--- a/src/app/components/components/steps/steps.component.ts
+++ b/src/app/components/components/steps/steps.component.ts
@@ -46,6 +46,10 @@ export class StepsDemoComponent implements OnInit, OnDestroy {
description: 'Sets state of [TdStepComponent] depending on value. Defaults to [StepState.None | "none"]',
name: 'state?',
type: 'StepState or ["none" | "required" | "complete"]',
+ }, {
+ description: ' Whether the ripple effect for this component is disabled',
+ name: 'disableRipple?',
+ type: 'boolean',
}, {
description: 'Event emitted when [TdStepComponent] is activated.',
name: 'activated?',
diff --git a/src/app/components/docs/docs.component.html b/src/app/components/docs/docs.component.html
index a554b53906..96f22fb1a2 100644
--- a/src/app/components/docs/docs.component.html
+++ b/src/app/components/docs/docs.component.html
@@ -19,9 +19,11 @@
-
A pipe takes in data as input and transforms it to a desired output.+
Setup:
+Import the [CovalentCommonModule] in your NgModule:
+Original value: { { log.text_value } }
]]>
- {{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}
{{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}
Example:
HTML:
{{item.title}}
- Documentation
-
+
-
+ Documentation
+
+
+
-
-
-
-
-
-
-
-
- {{item.icon}}
-
-
- change_history
-
+
Updates
- {{item.description}}
-{{item.title}}
- -Angular v4.1 and material@beta.5 support
-Dependencies updated
+
+
+
+
-
-
-
- {{item.icon}}
-
-
-
Resources
launch
+ Angular Material Card Docs
+
+ launch
Google Now Cards
diff --git a/src/app/components/style-guide/style-guide.component.html b/src/app/components/style-guide/style-guide.component.html
index 6eefac4055..048ad80ce9 100644
--- a/src/app/components/style-guide/style-guide.component.html
+++ b/src/app/components/style-guide/style-guide.component.html
@@ -34,8 +34,10 @@
+
+
+
+
+
diff --git a/src/app/components/templates/templates.component.scss b/src/app/components/templates/templates.component.scss
new file mode 100644
index 0000000000..7c397a7636
--- /dev/null
+++ b/src/app/components/templates/templates.component.scss
@@ -0,0 +1,10 @@
+:host /deep/ {
+ md-grid-tile img {
+ width: 100%;
+ height: auto;
+ }
+ .mat-grid-tile .mat-figure {
+ align-items: flex-start;
+ justify-content: flex-start;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/templates/templates.component.ts b/src/app/components/templates/templates.component.ts
new file mode 100644
index 0000000000..b19130125e
--- /dev/null
+++ b/src/app/components/templates/templates.component.ts
@@ -0,0 +1,32 @@
+import { Component, HostBinding, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { TdMediaService } from '@covalent/core';
+import { fadeAnimation } from '../../app.animations';
+
+import { Observable } from 'rxjs/Observable';
+
+import { InternalDocsService, ITemplate } from '../../services';
+
+@Component({
+ selector: 'app-templates',
+ styleUrls: ['./templates.component.scss'],
+ templateUrl: './templates.component.html',
+ animations: [fadeAnimation],
+})
+export class TemplatesComponent implements AfterViewInit {
+
+ @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+ @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
+ templatesObs: Observable;
+
+ constructor(public media: TdMediaService,
+ private _changeDetectorRef: ChangeDetectorRef,
+ private _internalDocsService: InternalDocsService) {
+ this.templatesObs = this._internalDocsService.queryTemplates();
+ }
+
+ ngAfterViewInit(): void {
+ this.media.broadcast();
+ this._changeDetectorRef.detectChanges();
+ }
+}
diff --git a/src/app/components/toolbar/toolbar.component.html b/src/app/components/toolbar/toolbar.component.html
new file mode 100644
index 0000000000..3dcdf4b407
--- /dev/null
+++ b/src/app/components/toolbar/toolbar.component.html
@@ -0,0 +1,51 @@
+
+ {
+ return new Observable((subscriber: Subscriber) => {
+ this._http.get(INTERNAL_DOCS_URL + '/templates.json').subscribe((response: Response) => {
+ let data: ITemplate[];
+ try {
+ data = response.json();
+ } catch (e) {
+ data = [];
+ subscriber.error();
+ }
+ subscriber.next(data);
+ subscriber.complete();
+ }, (error: any) => {
+ subscriber.error();
+ });
+ });
+ }
+
+}
diff --git a/src/app/services/selective-preloading-strategy.service.ts b/src/app/services/selective-preloading-strategy.service.ts
new file mode 100755
index 0000000000..1a968b188b
--- /dev/null
+++ b/src/app/services/selective-preloading-strategy.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { PreloadingStrategy, Route } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+
+@Injectable()
+export class SelectivePreloadingStrategyService implements PreloadingStrategy {
+
+ preload(route: Route, load: () => Observable): Observable {
+
+ // Configured on lazyload module route
+ if (route.data && route.data.preload) {
+ return load();
+ } else {
+ /* tslint:disable-next-line */
+ return Observable.of(null);
+ }
+ }
+}
diff --git a/src/app/utilities/direction.ts b/src/app/utilities/direction.ts
new file mode 100644
index 0000000000..706e7ee6f9
--- /dev/null
+++ b/src/app/utilities/direction.ts
@@ -0,0 +1,20 @@
+export const DIRECTION_STORAGE_KEY: string = 'app-direction';
+
+/**
+ * Utility method to get selected direction from sessionStorage
+ */
+export function getDirection(): 'ltr' | 'rtl' {
+ let storedDirection: 'ltr' | 'rtl' = sessionStorage.getItem(DIRECTION_STORAGE_KEY);
+ // Check if the direction was stored
+ if (storedDirection) {
+ return storedDirection;
+ }
+ return 'ltr';
+}
+
+/**
+ * Utility method to set selected direction to sessionStorage
+ */
+export function setDirection(direction: 'ltr' | 'rtl'): void {
+ sessionStorage.setItem(DIRECTION_STORAGE_KEY, direction);
+}
diff --git a/src/favicon.ico b/src/favicon.ico
index f3699612c3..fe7278dc3f 100644
Binary files a/src/favicon.ico and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
index f5e9c60746..7af51097e4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -10,7 +10,7 @@
-
+ star {{starCount}}
-
-
- View Full Changelog
-
-
-
- flash_on
-
-
+
+ Covalent UI Platform for building enterprise desktop web apps
+An open-source UI Platform from Teradata that combines a comprehensive design language with a powerful web framework, built on Angular & Angular Material (Design).
+ + + +
-
+
- Teradata Covalent UI Platform
- a UI platform built on Angular + Material Design
+
+
+
- {{item.title}}
-{{item.description}}
- -
-
-
- Card with header & images
- A card with header, avatar & image
+ Card with various components
+ A card with header, images, action icons & progress bar
@@ -326,16 +338,115 @@ Header title
Header subtitle
- 
+ 
+
+
+
+
]]>
+
+ Card with image variations
+ md-card-sm-image, md-card-md-image, md-card-lg-image & md-card-title-group
+
+
+
+
+
+ Card with image first
+ 100% width image
+
+ Notice if the image is first it has proper rounded corners.
+
+
+
+
-
-
- {{item.icon}}
-
-
-
+
+
+
diff --git a/src/app/components/style-guide/cards/cards.component.html b/src/app/components/style-guide/cards/cards.component.html
index 68d2ced694..746d9a9ec6 100644
--- a/src/app/components/style-guide/cards/cards.component.html
+++ b/src/app/components/style-guide/cards/cards.component.html
@@ -300,8 +300,8 @@
-
+
+ {{item.title}}
- {{item.description}}
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
- ]]>
-
- FAQs
-
- Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design).
- Covalent gives you a quickstart to build a modern web application UI and ensure consistency across your enterprise products.
- Some of Covalent's most important features include:
-
- -
-
- Angular-Material -
- Angular Command-line interface (CLI) for builds, deploys, testing & more. -
- Drastically simplified interface layouts (for dashboards, lists, etc). -
- Custom web components (stepper, file upload, expansion panels & more). -
- 750+ Material Design icons. -
- Style Guide with brand standards, color palettes & tips. -
- Design Patterns for consistent, reusable web components such as cards, forms, etc. -
- Testing Tools for both unit tests and end-to-end tests. -
- Quickstart app to get started right away! -
- We follow Atomic Design principles and apply them to Angular-Material web components. In Atomic Design, several atoms (such as buttons and inputs) form molecules (such as a search box).
- Our covalent bonds are the molecules that we're building on top of Angular-Material. Also, covalent bonds are liquid and conform to their container, just like our responsive layouts!
-
-
- By using Covalent as a unified UI Platform there are a ton of benefits. Here are some highlights:
-
- -
-
- Angular-Material doesn't have a full app quickstart. Covalent does. -
- Covalent provides the Angular-Material (AngularJS) flexbox layout that was removed in Angular-Material (angular). -
- Covalent provides several custom components such as steppers & expansion panels. -
- Custom layouts & components in Covalent are developed specifically for enterprise solutions. -
- Covalent provides a selection of UI layouts out of the box. -
- Our team is continuously adding tools like Syntax Highlighting & Markdown. -
- Our team will always maintain native compatibility with Angular & Material -
- Our team will always follow the principles of the official Material Design spec. -
- By adopting Material Design along with Angular, we get a style guide spec that is perfectly matched with an incredbly powerful and modern web framework, all for free.
- Along with that, there are lots of other great benefits such as:
-
- -
-
- A design spec that is married to code implementation. -
- Official implementations from the the designer/developer (Google). -
- Free code implementation and updates from a continuously evolving design spec. -
- Compatability with many devices & breakpoints, from watch and mobile all the way up to fullscreen desktop. -
- Usage familiarity for users, designers & developers. -
- Focus on out-of the box accessibility. -
- Open sourced design & code. -
- Modularity that gives a natural bridge to agile development principles. -
- Inspiration, community & resources from around the world. -
- With any new framework, people's intial reaction is that they'll lose their company brand or identity.
- Consider when 960 grids came out, or Bootstrap from Twitter. Many said "all sites will look the same!".
- They weren't completely wrong, for a time, when adoption of these new frameworks began. However, with time, usage, and innovation, your special brand identity and uniqueness will always shine through!
- Also consider:
-
- -
-
- Material Design is being embraced across the web, and is not specific to Google anymore -
- Material Design can be thought of as a native Web SDK, similar to developing a MacOS or iOS app. -
- Onboarding users is a simpler process if design patterns are familiar. -
- Think of your favorite iOS, Android or Windows app that adheres to the OS's design. Aren’t the features more important? What woud you really consider “brand”? -
-
- The short answer: we had to pick something & we believe Angular has won the adoption war.
- The longer answer: - Before passing judgement if you have Angular 1.x experience, remember that Angular is a complete rewrite from the ground up. - Angular moved from an opinionated framework to a sophistated platform. - Angular utilizes ES2015 (previously ES6) and the power of Typescript, which results in a much more native JavaScript platform with coding paradigms & power previously reserved for backend languages. - This means many more back end engineers can jump into the front end and ramp up quickly to productivity. - Also there are many other benefits, such as: --
-
- New & exciting software to learn & advocate -
- More easily attract new hires -
- An incredibly powerful standardized CLI that is provided to us -
- More powerful IDEs for development -
- Integrated testing tools -
- Native mobile & desktop app support -
- We give you everything you need to quickly get started on your UI, but you have the domain knowledge and are the expert in your product.
- You'll need to build all the custom views, controllers & services for your product, and hook them up to your RESTful APIs.
- Don't worry though, we have detailed docs & tips, and there's a wealth of help on the internet (it's why we chose such a popular platform).
-
-
- We'd LOVE any type of contribution and collaboration! There's all kinds of ways you can join in:
-
+
+ -
-
- Submit a bug (cool) -
- Open a pull request to fix a bug (cooler) -
- Suggest a new feature (which we'll prioritize by demand) -
- Open a pull request with new feature (make sure it follows the guidelines) -
- Give us feedback on any aspect of this site or the platform -
- Join the Teradata UX team! -
+
-
-
-
- ]]>
-
-
+
+
-
+
-
-
+ Built with
+
-
- Built with favorite on Angular
+ Teradata is one of the largest enterprise consumers of Angular. Currently the entire product suite is being built or revamped on Angular v4.
+As Angular unites Teradata developers across the organization, they are able to contribute back to the open-source community with the powerful new tools being developed internally.
-
-
-
+
+
- To build an atomic, standardized, reusable UI component platform based on Material Design, for Teradata to use for all user interfaces, while collaborating in an open source model.
+
+
+
+
+
+
-
-
- ]]>
-
-
+
+
+
-
-
+
+
+
+ {{item.icon}}
+
+
+
-
- launch
- launch
- launch
-
-
-
-
-
-
+
+ {{item.title}}
+{{item.description}}
+ +
+
+
-
-
-
-
- Teradata's UX team is extremely lean & agile (notice agile is lower case). We have a simple list of milestones and issues prioritized by demand across products.
- Some big ticket items are underway such as TD Charts, an extensive & standardized component built on Google Charts (continuing w/ the Google web stack).
- We're also building Dynamic Forms which will allow products to build complex forms with a simple key:value pair JSON structure.
- Remember, we're agile so our roadmap is iterative & bite sized for frequent, rapid releases.
+
Releases
-Our latest version you can use today!
- -Milestones
-Rough time estimates
- -Feature Requests & Bugs
-Priotized by demand
- -
- Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design).
- Electron is a framework for creating native desktop applications with web technologies like JavaScript, HTML, and CSS.
- Covalent Electron is the Electron Platform to build desktop apps using Covalent and Electron
- View Repo
-
-
- Covalent Data is a Mock API server for rapid prototyping and API standards
- Built on Golang
- Allows for quick prototyping for your Covalent Applications with an easy to mock http backend server
- View Repo
+
+
+
+
-
-
+
+
+
+
-
+
+ Following the Material Design spec
+Covalent follows the Material Design specification as closely as possible through the construction of all components.
+Adopting Material Design as our own spec allows our UI/UX staff to adopt and share powerful open-source resources, while Covalent end users enjoy the immediate familiarity and affordance of this global deign spec.
+
- Copyright © 2016 - 2017 Teradata. All rights reserved
+
+
+
+
+
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
index 5b11e4278c..35ad04d7f1 100644
--- a/src/app/components/home/home.component.scss
+++ b/src/app/components/home/home.component.scss
@@ -9,9 +9,26 @@
width: 60px;
margin-left: 16px;
}
+.mat-icon-svg-xxl {
+ width: 90%;
+ height: auto;
+}
.md-icon-ux {
width: 165px;
}
-[td-after-card] {
- margin: 64px 8px 8px 8px;
+@media (max-width: 799px) {
+ .mat-icon-md {
+ font-size: 50px;
+ }
+ .mat-icon-xl {
+ font-size: 120px;
+ }
+}
+@media (min-width: 800px) {
+ .mat-icon-md {
+ font-size: 70px;
+ }
+ .mat-icon-xl {
+ font-size: 160px;
+ }
}
\ No newline at end of file
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index c65630815a..9bf61853be 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -1,5 +1,5 @@
-import { Component, HostBinding, OnInit } from '@angular/core';
-
+import { Component, HostBinding, AfterViewInit } from '@angular/core';
+import { TdMediaService } from '@covalent/core';
import { GitHubService } from '../../services';
import { fadeAnimation } from '../../app.animations';
@@ -11,102 +11,73 @@ import { fadeAnimation } from '../../app.animations';
animations: [fadeAnimation],
})
-export class HomeComponent implements OnInit {
+export class HomeComponent implements AfterViewInit {
@HostBinding('@routeAnimation') routeAnimation: boolean = true;
@HostBinding('class.td-route-animation') classAnimation: boolean = true;
starCount: number = 0;
- items: Object[] = [{
- color: 'purple-700',
+ sections: Object[] = [{
+ color: 'deep-purple-A400',
description: 'Your guide to start using the UI platform in your app!',
icon: 'library_books',
route: 'docs',
title: 'Documentation',
}, {
- color: 'blue-700',
- description: 'Teradata brand logo usage, color palettes and more',
- icon: 'color_lens',
- route: 'style-guide',
- title: 'Style Guide',
+ color: 'teal-A700',
+ description: 'Covalent Components, Directives, Pipes & Services',
+ icon: 'picture_in_picture',
+ route: 'components',
+ title: 'Components',
}, {
- color: 'teal-700',
+ color: 'cyan-A700',
description: 'Several different material design layout options for your apps',
icon: 'view_quilt',
route: 'layouts',
title: 'Layouts',
}, {
- color: 'green-700',
- description: 'Covalent Components, Directives, Pipes & Services',
- icon: 'picture_in_picture',
- route: 'components',
- title: 'Components & Addons',
+ color: 'indigo-A400',
+ description: 'Teradata brand logo usage, color palettes and more',
+ icon: 'color_lens',
+ route: 'style-guide',
+ title: 'Style Guide',
+ }, {
+ color: 'green-A700',
+ description: 'Gallery of example applications and usages',
+ icon: 'view_carousel',
+ route: 'templates',
+ title: 'Templates',
},
];
- updates: Object[] = [{
- description: 'Keyboard support for selection',
- icon: 'grid_on',
- route: 'components/data-table',
- title: 'Data Table feature',
- }, {
- description: 'Row click events',
- icon: 'grid_on',
- route: 'components/data-table',
- title: 'Data Table feature',
- }, {
- description: 'Hide columns & exclude from filtering',
- icon: 'grid_on',
- route: 'components/data-table',
- title: 'Data Table feature',
- }, {
- description: 'Async & boolean loading',
- icon: 'hourglass_empty',
- route: 'components/loading',
- title: 'Loading features',
+ repos: Object[] = [{
+ color: 'amber-A400',
+ description: 'A pre-built Angular 4 app using Covalent ready to go!',
+ icon: 'flash_on',
+ link: 'https://github.com/Teradata/covalent-quickstart',
+ title: 'Covalent Quickstart',
}, {
- description: 'Component for alerts/info/warning/error/success',
- icon: 'info_outline',
- route: 'components/message',
- title: 'New Messages component',
+ color: 'orange-A400',
+ description: 'A native desktop hybrid starter app built on Electron.',
+ icon: 'laptop_mac',
+ link: 'https://github.com/Teradata/covalent-electron',
+ title: 'Covalent Electron',
}, {
- description: 'Numbered page links to jump ahead',
- icon: 'swap_horiz',
- route: 'components/paging',
- title: 'Pagination feature',
- }, {
- description: 'Disable adding of chips',
- icon: 'label',
- route: 'components/chips',
- title: 'Chips feature',
- }, {
- description: 'New formData property',
- icon: 'attach_file',
- route: 'components/file-upload',
- title: 'File service feature',
- }, {
- description: 'New contentReady event binding',
- icon: 'chrome_reader_mode',
- route: 'components/markdown',
- title: 'Markdown feature',
- }, {
- description: 'New contentReady event binding',
- icon: 'code',
- route: 'components/highlight',
- title: 'Highlight feature',
- }, {
- description: 'Make navigationRoute optional',
- icon: 'view_quilt',
- route: 'components/layouts',
- title: 'Layouts feature',
+ color: 'deep-orange-A400',
+ description: 'Mock API server for rapid prototyping and API standards.',
+ icon: 'aspect_ratio',
+ link: 'https://github.com/Teradata/covalent-data',
+ title: 'Covalent Data',
},
];
- constructor(private _gitHubService: GitHubService) {
+ constructor(private _gitHubService: GitHubService,
+ public media: TdMediaService) {
}
- ngOnInit(): void {
+ ngAfterViewInit(): void {
+ this.media.broadcast();
this._gitHubService.queryStartCount().subscribe((starsCount: number) => {
this.starCount = starsCount;
});
diff --git a/src/app/components/layouts/card-over/card-over.component.html b/src/app/components/layouts/card-over/card-over.component.html
index 87f14599a2..59f50e6ba9 100644
--- a/src/app/components/layouts/card-over/card-over.component.html
+++ b/src/app/components/layouts/card-over/card-over.component.html
@@ -1,4 +1,5 @@
+
Card Over Layout
A card overlaying a toolbar (this page is using card over)
diff --git a/src/app/components/layouts/layouts.module.ts b/src/app/components/layouts/layouts.module.ts
index af4b83f962..29cb47ce20 100644
--- a/src/app/components/layouts/layouts.module.ts
+++ b/src/app/components/layouts/layouts.module.ts
@@ -17,6 +17,8 @@ import { CovalentHighlightModule } from '../../../platform/highlight';
import { DocumentationToolsModule } from '../../documentation-tools';
+import { ToolbarModule } from '../../components/toolbar/toolbar.module';
+
@NgModule({
declarations: [
LayoutsComponent,
@@ -44,6 +46,7 @@ import { DocumentationToolsModule } from '../../documentation-tools';
CovalentHighlightModule,
DocumentationToolsModule,
layoutsRoutes,
+ ToolbarModule,
],
})
export class LayoutsModule {}
diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
index 14b8787b9d..f4d246648d 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.html
+++ b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -1,5 +1,6 @@
-
+
diff --git a/src/app/components/layouts/manage-list/manage-list.component.ts b/src/app/components/layouts/manage-list/manage-list.component.ts
index 912ecc7957..66470202c8 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.ts
+++ b/src/app/components/layouts/manage-list/manage-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, HostBinding, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { TdMediaService } from '@covalent/core';
import { fadeAnimation } from '../../../app.animations';
@@ -15,11 +15,15 @@ export class ManageListComponent implements AfterViewInit {
@HostBinding('@routeAnimation') routeAnimation: boolean = true;
@HostBinding('class.td-route-animation') classAnimation: boolean = true;
- constructor(public media: TdMediaService) {}
+ constructor(private _changeDetectorRef: ChangeDetectorRef,
+ public media: TdMediaService) {}
ngAfterViewInit(): void {
// broadcast to all listener observables when loading the page
- this.media.broadcast();
+ Promise.resolve(undefined).then(() => {
+ this.media.broadcast();
+ this._changeDetectorRef.markForCheck();
+ });
}
}
diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html
index 5bb057dcc3..a17ecee8ab 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.html
+++ b/src/app/components/layouts/nav-list/nav-list.component.html
@@ -18,9 +18,9 @@
+
+
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ launch
+ launch
+ launch
+
+
+
+
+
+
+
+
+
+ FAQs
+
+ Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design).
+ Covalent gives you a quickstart to build a modern web application UI and ensure consistency across your enterprise products.
+ Some of Covalent's most important features include:
+
+ -
+
- Angular-Material +
- Angular Command-line interface (CLI) for builds, deploys, testing & more. +
- Drastically simplified interface layouts (for dashboards, lists, etc). +
- Custom web components (stepper, file upload, expansion panels & more). +
- 750+ Material Design icons. +
- Style Guide with brand standards, color palettes & tips. +
- Design Patterns for consistent, reusable web components such as cards, forms, etc. +
- Testing Tools for both unit tests and end-to-end tests. +
- Quickstart app to get started right away! +
+ We follow Atomic Design principles and apply them to Angular-Material web components. In Atomic Design, several atoms (such as buttons and inputs) form molecules (such as a search box).
+ Our covalent bonds are the molecules that we're building on top of Angular-Material. Also, covalent bonds are liquid and conform to their container, just like our responsive layouts!
+
+
+ By using Covalent as a unified UI Platform there are a ton of benefits. Here are some highlights:
+
+ -
+
- Angular-Material doesn't have a full app quickstart. Covalent does. +
- Covalent provides the Angular-Material (AngularJS) flexbox layout that was removed in Angular-Material (angular). +
- Covalent provides several custom components such as steppers & expansion panels. +
- Custom layouts & components in Covalent are developed specifically for enterprise solutions. +
- Covalent provides a selection of UI layouts out of the box. +
- Our team is continuously adding tools like Syntax Highlighting & Markdown. +
- Our team will always maintain native compatibility with Angular & Material +
- Our team will always follow the principles of the official Material Design spec. +
+ By adopting Material Design along with Angular, we get a style guide spec that is perfectly matched with an incredbly powerful and modern web framework, all for free.
+ Along with that, there are lots of other great benefits such as:
+
+ -
+
- A design spec that is married to code implementation. +
- Official implementations from the the designer/developer (Google). +
- Free code implementation and updates from a continuously evolving design spec. +
- Compatability with many devices & breakpoints, from watch and mobile all the way up to fullscreen desktop. +
- Usage familiarity for users, designers & developers. +
- Focus on out-of the box accessibility. +
- Open sourced design & code. +
- Modularity that gives a natural bridge to agile development principles. +
- Inspiration, community & resources from around the world. +
+ With any new framework, people's intial reaction is that they'll lose their company brand or identity.
+ Consider when 960 grids came out, or Bootstrap from Twitter. Many said "all sites will look the same!".
+ They weren't completely wrong, for a time, when adoption of these new frameworks began. However, with time, usage, and innovation, your special brand identity and uniqueness will always shine through!
+ Also consider:
+
+ -
+
- Material Design is being embraced across the web, and is not specific to Google anymore +
- Material Design can be thought of as a native Web SDK, similar to developing a MacOS or iOS app. +
- Onboarding users is a simpler process if design patterns are familiar. +
- Think of your favorite iOS, Android or Windows app that adheres to the OS's design. Aren’t the features more important? What woud you really consider “brand”? +
+
+ The short answer: we had to pick something & we believe Angular has won the adoption war.
+ The longer answer: + Before passing judgement if you have Angular 1.x experience, remember that Angular v2+ is a complete rewrite from the ground up. + Angular moved from an opinionated framework to a sophistated platform. + Angular utilizes ES2015 (previously ES6) and the power of Typescript, which results in a much more native JavaScript platform with coding paradigms & power previously reserved for backend languages. + This means many more back end engineers can jump into the front end and ramp up quickly to productivity. + Also there are many other benefits, such as: +-
+
- New & exciting software to learn & advocate +
- More easily attract new hires +
- An incredibly powerful standardized CLI that is provided to us +
- More powerful IDEs for development +
- Integrated testing tools +
- Native mobile & desktop app support +
+ We give you everything you need to quickly get started on your UI, but you have the domain knowledge and are the expert in your product.
+ You'll need to build all the custom views, controllers & services for your product, and hook them up to your RESTful APIs.
+ Don't worry though, we have detailed docs & tips, and there's a wealth of help on the internet (it's why we chose such a popular platform).
+
+
+ We'd LOVE any type of contribution and collaboration! There's all kinds of ways you can join in:
+
+ -
+
- Submit a bug (cool) +
- Open a pull request to fix a bug (cooler) +
- Suggest a new feature (which we'll prioritize by demand) +
- Open a pull request with new feature (make sure it follows the guidelines) +
- Give us feedback on any aspect of this site or the platform +
- Join the Teradata UX team! +
+
+
+
+
+
+
+ To build an atomic, standardized, reusable UI component platform based on Material Design, for Teradata to use for all user interfaces, while collaborating in an open source model.
+
+
+ Teradata's UX team is extremely lean & agile (notice agile is lower case). We have a simple list of milestones and issues prioritized by demand across products.
+ Some big ticket items are underway such as TD Charts, an extensive & standardized component built on Google Charts (continuing w/ the Google web stack).
+ We're also building Dynamic Forms which will allow products to build complex forms with a simple key:value pair JSON structure.
+ Remember, we're agile so our roadmap is iterative & bite sized for frequent, rapid releases.
+
+ Releases
+Our latest version you can use today!
+ +Milestones
+Rough time estimates
+ +Feature Requests & Bugs
+Priotized by demand
+ +
+ Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design).
+ Electron is a framework for creating native desktop applications with web technologies like JavaScript, HTML, and CSS.
+ Covalent Electron is the Electron Platform to build desktop apps using Covalent and Electron
+ View Repo
+
+
+ Covalent Data is a Mock API server for rapid prototyping and API standards
+ Built on Golang
+ Allows for quick prototyping for your Covalent Applications with an easy to mock http backend server
+ View Repo
+
+ Item Name
item description
-
- Page Title
-
+
Nav List Layout
diff --git a/src/app/components/layouts/nav-list/nav-list.component.ts b/src/app/components/layouts/nav-list/nav-list.component.ts
index e53ea52e63..31e685a7f2 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.ts
+++ b/src/app/components/layouts/nav-list/nav-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, HostBinding, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { TdMediaService } from '@covalent/core';
import { fadeAnimation } from '../../../app.animations';
@@ -15,11 +15,15 @@ export class NavListComponent implements AfterViewInit {
@HostBinding('@routeAnimation') routeAnimation: boolean = true;
@HostBinding('class.td-route-animation') classAnimation: boolean = true;
- constructor(public media: TdMediaService) {}
+ constructor(private _changeDetectorRef: ChangeDetectorRef,
+ public media: TdMediaService) {}
ngAfterViewInit(): void {
// broadcast to all listener observables when loading the page
- this.media.broadcast();
+ Promise.resolve(undefined).then(() => {
+ this.media.broadcast();
+ this._changeDetectorRef.markForCheck();
+ });
}
}
diff --git a/src/app/components/layouts/nav-view/nav-view.component.html b/src/app/components/layouts/nav-view/nav-view.component.html
index 5bf2418deb..cdee9ddbb4 100644
--- a/src/app/components/layouts/nav-view/nav-view.component.html
+++ b/src/app/components/layouts/nav-view/nav-view.component.html
@@ -1,4 +1,5 @@
+
Nav View
diff --git a/src/app/components/layouts/overview/overview.component.html b/src/app/components/layouts/overview/overview.component.html
index 9262571359..6397c947d3 100644
--- a/src/app/components/layouts/overview/overview.component.html
+++ b/src/app/components/layouts/overview/overview.component.html
@@ -1,4 +1,5 @@
+
-
-
-
-
-
- ]]>
-
-
-
-
-
-
-
- ]]>
-
-
+ Nav List
+
For your entire app or for different sections of your app, select one of these Material Design layout options:
@@ -25,145 +26,147 @@{{item.title}}
Flexbox Layout ("grid")
-
-
- We've ported the CSS3 Flexbox layout system from Angular-Material v1, so those docs shoud be your starting point.
-In a nutshell, the Flexbox layout gives you:
--
-
- Horizontal row layout for child elements -
- Vertical column layout for child elements -
- Alignment & ordering for child elements -
- Any "flex" elastic width for child elements -
- Conditionally responsive versions for xs,sm,md,lg,xl breakpoints -
-
- Horizontal row container:
-
-
+
+
-
-
- ]]>
-
- child
- child
- child
+
+
- We've ported the CSS3 Flexbox layout system from Angular-Material v1, so those docs shoud be your starting point.
+In a nutshell, the Flexbox layout gives you:
+-
+
- Horizontal row layout for child elements +
- Vertical column layout for child elements +
- Alignment & ordering for child elements +
- Any "flex" elastic width for child elements +
- Conditionally responsive versions for xs,sm,md,lg,xl breakpoints +
child
- child
- child
- Vertical column container:
-
-
+
+
+
+ ]]>
+
child
- child
- child
+
+
+
+
+
+ ]]>
+
+ Horizontal row container:
+
+
+ child
+ child
+ child
+ child
+ child
+ child
+ Vertical column container:
+
+
+ child
+ child
+ child
+ child
+ child
+ child
+ child
- child
- child
-
-
- Layout margin
-
-
+
+
+
+ ]]>
+
child
- child
- child
+
+
+
+
+
+ ]]>
+
+ Layout margin
+
+
+ child
+ child
+ child
+ child
+ child
+ child
+ Layout padding
+
+
+ child
+ child
+ child
+ child
+ child
+ child
+ child
- child
- child
- Layout padding
-
-
+
+
+
+ ]]>
+
+ child
- child
- child
+
+
+
+
+
+ ]]>
+
+ 40/flex/30 (notice how flex fills remaining space):
+
+ child
+ child
+ child
+ child
+ child
+ child
+ Responsive widths (will change as you resize browser):
+
+
+ child
+ child
+ child
+ child
+ child
+ child
+ Typical responsive layout (just collapse on xs which is mobile)
+
+
+ child
+ child
+ child
+ child
+ child
- child
- child
-
-
-
-
- ]]>
-
- 40/flex/30 (notice how flex fills remaining space):
-
- child
- child
- child
- child
- child
- child
- Responsive widths (will change as you resize browser):
-
-
- child
- child
- child
- child
- child
- child
- Typical responsive layout (just collapse on xs which is mobile)
-
-
- child
- child
- child
- child
- Item { {i} }
@@ -311,11 +311,23 @@ Header title
Header subtitle
-
+
+
+
+
+
Item { {i} }
Content title
Here is some more content
+
+
+
+
+
+ Content title
Content title
Here is some more content
+
+
+
+
+
+
+
+
+
+
+ Card with image first
+ 100% width image
+
+ Notice if the image is first it has proper rounded corners.
+
+
+
+
+
+
+ Card with small image
+ 80px x 80px image
+ 
+
+
+
+
+
+
+ Card with medium image
+ 112px x 112px image
+ 
+
+
+
+
+
+
+ Card with large image
+ 152px x 152px image
+ 
+
+
+
+
+
+
+ Card with small image
+ 80px x 80px image
+
+
+
+
+
+
+
+ Card with medium image
+ 112px x 112px image
+
+
+
+
+
+
+
+ Card with large image
+ 152px x 152px image
+ 
+
+
+
+ ]]>
+
+
+
Content title
Card Specs{{item.title}}
- Teradata Style Guide
-
+ Style Guide
+
+
+
-
+
+
+
+ Covalent Templates
+Example starter templates for your application
+
+
+
+
+
+
+
+
+
+
+
+
+ {{item.icon}}
+
+
+ change_history
+
+
+ View Full Changelog
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/components/toolbar/toolbar.component.scss b/src/app/components/toolbar/toolbar.component.scss
new file mode 100644
index 0000000000..7bfcb81600
--- /dev/null
+++ b/src/app/components/toolbar/toolbar.component.scss
@@ -0,0 +1,8 @@
+/*
+ * Copyright (C) 2016-2017 by Teradata Corporation. All rights reserved.
+ * TERADATA CORPORATION CONFIDENTIAL AND TRADE SECRET
+ */
+
+:host {
+ display: block;
+}
diff --git a/src/app/components/toolbar/toolbar.component.ts b/src/app/components/toolbar/toolbar.component.ts
new file mode 100644
index 0000000000..3f2310941e
--- /dev/null
+++ b/src/app/components/toolbar/toolbar.component.ts
@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2016-2017 by Teradata Corporation. All rights reserved.
+ * TERADATA CORPORATION CONFIDENTIAL AND TRADE SECRET
+ */
+
+import { Component, ElementRef, Inject, Renderer2, Output, EventEmitter } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+
+import { Dir } from '@angular/material';
+
+import { getDirection, setDirection } from '../../utilities/direction';
+
+@Component({
+ selector: 'td-toolbar',
+ templateUrl: '././toolbar.component.html',
+ styleUrls: ['././toolbar.component.scss'],
+})
+export class ToolbarComponent {
+ updates: Object[] = [{
+ description: 'Agnostic filtering with (inputChange) and [debounce] (local vs server side)',
+ icon: 'label',
+ route: '/components/chips',
+ title: 'Chips feature',
+ }, {
+ description: 'object list and template support and new [td-chip-avatar] attribute',
+ icon: 'label',
+ route: '/components/chips',
+ title: 'Chips feature',
+ }, {
+ description: 'new [chipRemoval] input',
+ icon: 'label',
+ route: '/components/chips',
+ title: 'Chips feature',
+ }, {
+ description: 'new [color] input',
+ icon: 'label',
+ route: '/components/chips',
+ title: 'Chips feature',
+ }, {
+ description: 'new [stacked] input',
+ icon: 'label',
+ route: '/components/chips',
+ title: 'Chips feature',
+ }, {
+ description: 'new td-expansion-panel-group component',
+ icon: 'open_with',
+ route: '/components/expansion-panel',
+ title: 'Expansion panel feature',
+ }, {
+ description: 'new [disableRipple] input',
+ icon: 'open_with',
+ route: '/components/expansion-panel',
+ title: 'Expansion panel feature',
+ }, {
+ description: 'new [mode], [opened], [sidenavWidth] inputs for td-layout',
+ icon: 'view_quilt',
+ route: '/layouts',
+ title: 'Layouts feature',
+ }, {
+ description: 'new [color] input for td-layout-footer',
+ icon: 'view_quilt',
+ route: '/layouts',
+ title: 'Layouts feature',
+ }, {
+ description: 'animation when opening/closing',
+ icon: 'info_outline',
+ route: '/components/message',
+ title: 'Message feature',
+ }, {
+ description: 'new [disableRipple] input',
+ icon: 'view_list',
+ route: '/components/steps',
+ title: 'Stepper feature',
+ },
+ ];
+
+ dir: 'ltr' | 'rtl' = getDirection();
+
+ constructor(private _renderer: Renderer2,
+ private _dir: Dir,
+ @Inject(DOCUMENT) private _document: any) {
+ this._dir.dir = this.dir;
+ }
+
+ changeDir(dir: 'ltr' | 'rtl'): void {
+ this._renderer.setAttribute(this._document.querySelector('html'), 'dir', dir);
+ this._dir.dir = dir;
+ setDirection(dir);
+ }
+}
diff --git a/src/app/components/toolbar/toolbar.module.ts b/src/app/components/toolbar/toolbar.module.ts
new file mode 100644
index 0000000000..9fbcd2cd7b
--- /dev/null
+++ b/src/app/components/toolbar/toolbar.module.ts
@@ -0,0 +1,31 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { ToolbarComponent } from './toolbar.component';
+
+import { MdButtonModule, MdListModule, MdIconModule, MdMenuModule } from '@angular/material';
+
+import { CovalentMenuModule, CovalentNotificationsModule } from '../../../platform/core';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ MdButtonModule,
+ MdListModule,
+ MdIconModule,
+ MdMenuModule,
+ CovalentMenuModule,
+ CovalentNotificationsModule,
+ RouterModule,
+ ],
+ declarations: [
+ ToolbarComponent,
+ ],
+ exports: [
+ ToolbarComponent,
+ ],
+})
+export class ToolbarModule {
+
+}
diff --git a/src/app/services/index.ts b/src/app/services/index.ts
index 2c23c67f7d..caae7dea53 100644
--- a/src/app/services/index.ts
+++ b/src/app/services/index.ts
@@ -1 +1,3 @@
export { GitHubService } from './github.service';
+export { InternalDocsService, ITemplate } from './internal-docs.service';
+export { SelectivePreloadingStrategyService } from './selective-preloading-strategy.service';
diff --git a/src/app/services/internal-docs.service.ts b/src/app/services/internal-docs.service.ts
new file mode 100644
index 0000000000..3fe4c1c0a5
--- /dev/null
+++ b/src/app/services/internal-docs.service.ts
@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import { Subscriber } from 'rxjs/Subscriber';
+
+import { HttpInterceptorService } from '@covalent/http';
+
+export interface ITemplate {
+ name: string;
+ description: string;
+ plnkr: string;
+ img: string;
+ color: string;
+ icon: string;
+}
+
+const INTERNAL_DOCS_URL: string = 'https://covalent-docs.firebaseio.com/';
+
+@Injectable()
+export class InternalDocsService {
+
+ constructor(private _http: HttpInterceptorService) {
+
+ }
+
+ queryTemplates(): ObservableUpdates
+ {{item.description}}
+{{item.title}}
+ +Angular v4.2 and material@beta.6 support
+Dependencies updated
+ +
+
diff --git a/src/platform/core/chips/README.md b/src/platform/core/chips/README.md
index 4e7410a4aa..12206cde86 100644
--- a/src/platform/core/chips/README.md
+++ b/src/platform/core/chips/README.md
@@ -1,8 +1,10 @@
# td-chips
-`td-chips` element generates a list of strings as chips.
+`td-chips` element generates a list of strings or objects as chips.
-Add the [items] attribute to enable the autocomplete with a search list, and [requireMatch] to validated the input against the provided search list.
+Add the [items] attribute to enable the autocomplete with a list, and [requireMatch] to not allow custom values.
+
+Leverage the templates to create your own chip or contact chip.
## API Summary
@@ -10,12 +12,17 @@ Properties:
| Name | Type | Description |
| --- | --- | --- |
-| `items?` | `string[]` | Enables Autocompletion with the provided list of search strings.
-| `readOnly` | `boolean` | Disables the chip input and removal.
-| `requireMatch?` | `boolean` | Validates input against the provided search list before adding it to the model. If it doesnt exist, it cancels the event.
+| `color?` | `'primary' | 'accent' | 'warn'` | color for the input and focus state of the chips. Defaults to 'primary'
+| `items?` | `any[]` | Renders the `md-autocomplete` with the provided list to display as options.
+| `requireMatch?` | `boolean` | Blocks custom inputs and only allows selections from the autocomplete list.
+| `stacked?` | `boolean` | Set stacked or horizontal chips depending on value. Defaults to false.
| `placeholder?` | `string` | Placeholder for the autocomplete input.
-| `add?` | `function` | Method to be executed when string is added as chip through the autocomplete. Sends chip value as event.
-| `remove?` | `function` | Method to be executed when string is removed as chip with the "remove" button. Sends chip value as event.
+| `chipAddition` | `boolean` | Disables the ability to add chips. When setting readOnly as true, this will be overriden. Defaults to true.
+| `chipRemoval` | `boolean` | Disables the ability to remove chips. When setting readOnly as true, this will be overriden. Defaults to true.
+| `debounce` | `string` | Debounce timeout between keypresses. Defaults to 200.
+| `add?` | `function` | Method to be executed when a chip is added. Sends chip value as event.
+| `remove?` | `function` | Method to be executed when a chip is removed. Sends chip value as event.
+| `inputChange?` | `function` | Method to be executed when the value in the autocomplete input changes. Sends string value as event.
## Setup
@@ -37,7 +44,25 @@ export class MyModule {}
Example for HTML usage:
- ```html
-
+```html
+
+
+
+
+ {{option}}
+
+ // anything below it
- ```
\ No newline at end of file
+```
diff --git a/src/platform/core/chips/_chips-theme.scss b/src/platform/core/chips/_chips-theme.scss
index 2ad63ddd1a..1acb47b627 100644
--- a/src/platform/core/chips/_chips-theme.scss
+++ b/src/platform/core/chips/_chips-theme.scss
@@ -14,20 +14,49 @@
background: mat-color($background, status-bar);
color: mat-color($foreground, text);
&:focus:not(.td-chip-disabled) {
- background: mat-color($primary);
- &, md-icon {
- color: mat-color($primary, default-contrast);
- md-icon:hover {
- color: mat-color($foreground, icon);
+ md-icon:hover {
+ color: mat-color($foreground, icon);
+ }
+ &.mat-primary {
+ background: mat-color($primary);
+ &, md-icon {
+ color: mat-color($primary, default-contrast);
+ }
+ }
+ &.mat-accent {
+ background: mat-color($accent);
+ &, md-icon {
+ color: mat-color($accent, default-contrast);
+ }
+ }
+ &.mat-warn {
+ background: mat-color($warn);
+ &, md-icon {
+ color: mat-color($warn, default-contrast);
}
}
}
- md-icon {
+ md-icon.td-chip-removal {
color: mat-color($foreground, hint-text);
&:hover {
color: mat-color($foreground, icon);
}
}
}
+ &.mat-primary {
+ .mat-input-underline .mat-input-ripple {
+ background-color: mat-color($primary);
+ }
+ }
+ &.mat-accent {
+ .mat-input-underline .mat-input-ripple {
+ background-color: mat-color($accent);
+ }
+ }
+ &.mat-warn {
+ .mat-input-underline .mat-input-ripple {
+ background-color: mat-color($warn);
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/platform/core/chips/chips.component.html b/src/platform/core/chips/chips.component.html
index b8df30f41e..0491a87736 100644
--- a/src/platform/core/chips/chips.component.html
+++ b/src/platform/core/chips/chips.component.html
@@ -1,38 +1,55 @@
-
Covalent Loading...
A
{{chip}}
+
-
-
-
- {{chip}}
-
+;
+ let input: DebugElement;
+ let chips: DebugElement;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TdChipsTestComponent);
+ fixture.detectChanges();
+
+ chips = fixture.debugElement.query(By.directive(TdChipsComponent));
+ input = chips.query(By.css('input'));
+ });
+
+ it('should have primary color', (done: DoneFn) => {
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect((chips.nativeElement).classList.contains('mat-primary')).toBeTruthy();
+ done();
+ });
+ });
+
+ it('should set to accent color', (done: DoneFn) => {
+ fixture.componentInstance.color = 'accent';
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect((chips.nativeElement).classList.contains('mat-accent')).toBeTruthy();
+ done();
+ });
+ });
+
+ it('should set to warn color and then to accent', (done: DoneFn) => {
+ fixture.componentInstance.color = 'warn';
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect((chips.nativeElement).classList.contains('mat-warn')).toBeTruthy();
+ fixture.componentInstance.color = 'accent';
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect((chips.nativeElement).classList.contains('mat-accent')).toBeTruthy();
+ done();
+ });
+ });
+ });
+
+ });
+
+ describe('a11y keyboard in chips and input: ', () => {
+ let fixture: ComponentFixture;
+ let input: DebugElement;
+ let chips: DebugElement;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TdChipsA11yTestComponent);
+ fixture.detectChanges();
+
+ chips = fixture.debugElement.query(By.directive(TdChipsComponent));
+ input = chips.query(By.css('input'));
+ });
+
+ it('should focus input', (done: DoneFn) => {
+ fixture.componentInstance.chipAddition = true;
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.nativeElement.focus();
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect((chips.componentInstance)._inputChild.focused).toBeTruthy();
+ done();
+ });
+ });
+ });
+
+ it('should focus first chip', (done: DoneFn) => {
+ fixture.componentInstance.chipAddition = false;
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.nativeElement.focus();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement)
+ .toBe(document.activeElement);
+ done();
+ });
+ });
+ });
+ });
+
+ it('should focus around the chips going left', (done: DoneFn) => {
+ fixture.componentInstance.chipAddition = false;
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.nativeElement.focus();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[0]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[2].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[2]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[1].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[1]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement)
+ .toBe(document.activeElement);
+ done();
+ });
+ });
+ });
+ });
+ });
+ });
+ });
+
+ it('should focus around the chips going right', (done: DoneFn) => {
+ fixture.componentInstance.chipAddition = false;
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.nativeElement.focus();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[0]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[1].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[1]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[2].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[2]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement)
+ .toBe(document.activeElement);
+ done();
+ });
+ });
+ });
+ });
+ });
+ });
+ });
+
+ });
+
+ describe('panel usage and add/removal: ', () => {
+ let fixture: ComponentFixture;
+ let input: DebugElement;
+ let chips: DebugElement;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TdChipsBasicTestComponent);
+ fixture.detectChanges();
+
+ chips = fixture.debugElement.query(By.directive(TdChipsComponent));
+ input = chips.query(By.css('input'));
+ });
+
+ it('should set a value in the input and enter it as chip', (done: DoneFn) => {
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ (chips.componentInstance)._inputChild.value = 'test';
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ input.triggerEventHandler('keyup.enter', createFakeKeyboardEvent(ENTER));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ // set tiemout
+ setTimeout(() => {
+ expect(chips.componentInstance.value.length).toBe(1);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement.textContent).toContain('test');
+ done();
+ }, 200);
+ });
+ });
+ });
+ });
+
+ it('should open the panel, click on an option and add it as chip', (done: DoneFn) => {
+ fixture.componentInstance.filter('');
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ const option: HTMLElement = overlayContainerElement.querySelector('md-option');
+ option.click();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(chips.componentInstance.value.length).toBe(1);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1);
+ done();
+ });
+ });
+ });
+
+ it('should open the panel, click on an option to add it as chip and remove it with backspace', (done: DoneFn) => {
+ fixture.componentInstance.filter('');
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ const option: HTMLElement = overlayContainerElement.querySelector('md-option');
+ option.click();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(chips.componentInstance.value.length).toBe(1);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1);
+ fixture.debugElement.queryAll(By.directive(MdChip))[0].triggerEventHandler('keydown', createFakeKeyboardEvent(BACKSPACE));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(chips.componentInstance.value.length).toBe(0);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(0);
+ done();
+ });
+ });
+ });
+ });
+
+ it('should open the panel, click on an option to add it as chip and remove it by clicking on the remove button', (done: DoneFn) => {
+ fixture.componentInstance.filter('');
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ const option: HTMLElement = overlayContainerElement.querySelector('md-option');
+ option.click();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(chips.componentInstance.value.length).toBe(1);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1);
+ fixture.debugElement.queryAll(By.css('.td-chip-removal'))[0].triggerEventHandler('click', new Event('click'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(chips.componentInstance.value.length).toBe(0);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(0);
+ done();
+ });
+ });
+ });
+ });
+
+ });
+
describe('panel usage and filtering: ', () => {
let fixture: ComponentFixture;
let input: DebugElement;
@@ -53,7 +338,6 @@ describe('Component: Chips', () => {
fixture = TestBed.createComponent(TdChipsBasicTestComponent);
fixture.detectChanges();
- input = fixture.debugElement.query(By.css('input'));
chips = fixture.debugElement.query(By.directive(TdChipsComponent));
});
@@ -65,20 +349,18 @@ describe('Component: Chips', () => {
expect(overlayContainerElement.textContent).not.toContain('chips');
expect(overlayContainerElement.textContent).not.toContain('pasta');
expect(overlayContainerElement.textContent).not.toContain('sushi');
- input.triggerEventHandler('focus', new Event('focus'));
+ fixture.componentInstance.filter('');
+ chips.triggerEventHandler('focus', new Event('focus'));
fixture.detectChanges();
fixture.whenStable().then(() => {
- fixture.detectChanges();
- fixture.whenStable().then(() => {
- expect(overlayContainerElement.textContent).toContain('steak');
- expect(overlayContainerElement.textContent).toContain('pizza');
- expect(overlayContainerElement.textContent).toContain('tacos');
- expect(overlayContainerElement.textContent).toContain('sandwich');
- expect(overlayContainerElement.textContent).toContain('chips');
- expect(overlayContainerElement.textContent).toContain('pasta');
- expect(overlayContainerElement.textContent).toContain('sushi');
- done();
- });
+ expect(overlayContainerElement.textContent).toContain('steak');
+ expect(overlayContainerElement.textContent).toContain('pizza');
+ expect(overlayContainerElement.textContent).toContain('tacos');
+ expect(overlayContainerElement.textContent).toContain('sandwich');
+ expect(overlayContainerElement.textContent).toContain('chips');
+ expect(overlayContainerElement.textContent).toContain('pasta');
+ expect(overlayContainerElement.textContent).toContain('sushi');
+ done();
});
});
@@ -90,86 +372,301 @@ describe('Component: Chips', () => {
expect(overlayContainerElement.textContent).not.toContain('chips');
expect(overlayContainerElement.textContent).not.toContain('pasta');
expect(overlayContainerElement.textContent).not.toContain('sushi');
- input.triggerEventHandler('focus', new Event('focus'));
+ fixture.componentInstance.filter('');
+ chips.triggerEventHandler('focus', new Event('focus'));
fixture.detectChanges();
fixture.whenStable().then(() => {
+ expect(overlayContainerElement.textContent).toContain('steak');
+ expect(overlayContainerElement.textContent).toContain('pizza');
+ expect(overlayContainerElement.textContent).toContain('tacos');
+ expect(overlayContainerElement.textContent).toContain('sandwich');
+ expect(overlayContainerElement.textContent).toContain('chips');
+ expect(overlayContainerElement.textContent).toContain('pasta');
+ expect(overlayContainerElement.textContent).toContain('sushi');
+ (chips.componentInstance).inputControl.setValue('a');
fixture.detectChanges();
fixture.whenStable().then(() => {
- expect(overlayContainerElement.textContent).toContain('steak');
- expect(overlayContainerElement.textContent).toContain('pizza');
- expect(overlayContainerElement.textContent).toContain('tacos');
- expect(overlayContainerElement.textContent).toContain('sandwich');
- expect(overlayContainerElement.textContent).toContain('chips');
- expect(overlayContainerElement.textContent).toContain('pasta');
- expect(overlayContainerElement.textContent).toContain('sushi');
- (chips.componentInstance).inputControl.setValue('a');
+ // mimic debounce
+ setTimeout(() => {
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(overlayContainerElement.textContent).toContain('steak');
+ expect(overlayContainerElement.textContent).toContain('pizza');
+ expect(overlayContainerElement.textContent).toContain('tacos');
+ expect(overlayContainerElement.textContent).toContain('sandwich');
+ expect(overlayContainerElement.textContent).not.toContain('chips');
+ expect(overlayContainerElement.textContent).toContain('pasta');
+ expect(overlayContainerElement.textContent).not.toContain('sushi');
+ done();
+ });
+ }, 200);
+ });
+ });
+ });
+ });
+
+ describe('panel usage and requireMatch usage: ', () => {
+ let fixture: ComponentFixture;
+ let input: DebugElement;
+ let chips: DebugElement;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TdChipsObjectsRequireMatchTestComponent);
+ fixture.detectChanges();
+
+ chips = fixture.debugElement.query(By.directive(TdChipsComponent));
+ });
+
+ it('should open the panel, click on an option to add it as chip', (done: DoneFn) => {
+ fixture.componentInstance.objects = [{
+ name: 'San Diego',
+ }, {
+ name: 'Los Angeles',
+ }];
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ const option: HTMLElement = overlayContainerElement.querySelector('md-option');
+ option.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
- setTimeout(() => {
+ expect(chips.componentInstance.value.length).toBe(1);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1);
+ done();
+ });
+ });
+ });
+ });
+
+ });
+
+ describe('stacked usage: ', () => {
+ let fixture: ComponentFixture;
+ let input: DebugElement;
+ let chips: DebugElement;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TdChipsStackedTestComponent);
+ fixture.detectChanges();
+
+ chips = fixture.debugElement.query(By.directive(TdChipsComponent));
+ });
+
+ it('should rendered chips stacked', (done: DoneFn) => {
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect((chips.query(By.css('.td-chips-wrapper')).nativeElement).classList.contains('td-chips-stacked'))
+ .toBeFalsy();
+ fixture.componentInstance.stacked = true;
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect((chips.query(By.css('.td-chips-wrapper')).nativeElement).classList.contains('td-chips-stacked'))
+ .toBeTruthy();
+ done();
+ });
+ });
+ });
+
+ });
+
+ describe('chip removal usage, requires readOnly to be false: ', () => {
+ let fixture: ComponentFixture;
+ let input: DebugElement;
+ let chips: DebugElement;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TdChipRemovalTestComponent);
+ fixture.detectChanges();
+
+ chips = fixture.debugElement.query(By.directive(TdChipsComponent));
+ input = chips.query(By.css('input'));
+ });
+
+ it('should not focus input', (done: DoneFn) => {
+ fixture.componentInstance.chipRemoval = true;
+ fixture.componentInstance.chipAddition = false;
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.nativeElement.focus();
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect((chips.componentInstance)._inputChild.focused).toBeFalsy();
+ done();
+ });
+ });
+ });
+
+ it('should not show cancel button', (done: DoneFn) => {
+ fixture.componentInstance.chipRemoval = false;
+ fixture.componentInstance.chipAddition = false;
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.nativeElement.focus();
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.css('.td-chip-removal')).length).toBe(0);
+ done();
+ });
+ });
+ });
+
+ it('should focus input, then focus first chip and remove first chip by clicking on the remove button', (done: DoneFn) => {
+ fixture.componentInstance.chipRemoval = true;
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.nativeElement.focus();
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect((chips.componentInstance)._inputChild.focused).toBeTruthy();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(chips.componentInstance.value.length).toBe(3);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(3);
+ fixture.debugElement.queryAll(By.css('.td-chip-removal'))[0]
+ .triggerEventHandler('click', new Event('click'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(chips.componentInstance.value.length).toBe(2);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(2);
+ done();
+ });
+ });
+ });
+ });
+ });
+
+ it('should focus first chip and remove chip with backspace and delete', (done: DoneFn) => {
+ fixture.componentInstance.chipRemoval = true;
+ fixture.componentInstance.chipAddition = false;
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.nativeElement.focus();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement)
+ .toBe(document.activeElement);
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ fixture.debugElement.queryAll(By.directive(MdChip))[0]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(BACKSPACE));
fixture.detectChanges();
fixture.whenStable().then(() => {
- expect(overlayContainerElement.textContent).toContain('steak');
- expect(overlayContainerElement.textContent).toContain('pizza');
- expect(overlayContainerElement.textContent).toContain('tacos');
- expect(overlayContainerElement.textContent).toContain('sandwich');
- expect(overlayContainerElement.textContent).not.toContain('chips');
- expect(overlayContainerElement.textContent).toContain('pasta');
- expect(overlayContainerElement.textContent).not.toContain('sushi');
- done();
+ expect(chips.componentInstance.value.length).toBe(2);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(2);
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(chips.componentInstance.value.length).toBe(2);
+ fixture.debugElement.queryAll(By.directive(MdChip))[0]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(DELETE));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(chips.componentInstance.value.length).toBe(1);
+ expect(fixture.debugElement.queryAll(By.directive(MdChip)).length).toBe(1);
+ done();
+ });
+ });
});
- }, 100);
+ });
+ });
+ });
+ });
+ });
+
+ it('should focus around the chips going left', (done: DoneFn) => {
+ fixture.componentInstance.chipRemoval = true;
+ fixture.componentInstance.chipAddition = false;
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.nativeElement.focus();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ chips.triggerEventHandler('focus', new Event('focus'));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[0]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[2].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[2]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[1].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[1]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(LEFT_ARROW));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement)
+ .toBe(document.activeElement);
+ done();
+ });
+ });
+ });
});
});
});
});
- it('should open the panel, filter selectedItems and filter the list', (done: DoneFn) => {
- expect(overlayContainerElement.textContent).not.toContain('steak');
- expect(overlayContainerElement.textContent).not.toContain('pizza');
- expect(overlayContainerElement.textContent).not.toContain('tacos');
- expect(overlayContainerElement.textContent).not.toContain('sandwich');
- expect(overlayContainerElement.textContent).not.toContain('chips');
- expect(overlayContainerElement.textContent).not.toContain('pasta');
- expect(overlayContainerElement.textContent).not.toContain('sushi');
- fixture.componentInstance.selectedItems.push('steak');
- fixture.componentInstance.selectedItems.push('sandwich');
- input.triggerEventHandler('focus', new Event('focus'));
+ it('should focus around the chips going right', (done: DoneFn) => {
+ fixture.componentInstance.chipRemoval = true;
+ fixture.componentInstance.chipAddition = false;
fixture.detectChanges();
fixture.whenStable().then(() => {
+ chips.nativeElement.focus();
fixture.detectChanges();
fixture.whenStable().then(() => {
- expect(overlayContainerElement.textContent).not.toContain('steak');
- expect(overlayContainerElement.textContent).toContain('pizza');
- expect(overlayContainerElement.textContent).toContain('tacos');
- expect(overlayContainerElement.textContent).not.toContain('sandwich');
- expect(overlayContainerElement.textContent).toContain('chips');
- expect(overlayContainerElement.textContent).toContain('pasta');
- expect(overlayContainerElement.textContent).toContain('sushi');
- (chips.componentInstance).inputControl.setValue('a');
+ chips.triggerEventHandler('focus', new Event('focus'));
fixture.detectChanges();
fixture.whenStable().then(() => {
- setTimeout(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[0]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[1].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[1]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW));
fixture.detectChanges();
fixture.whenStable().then(() => {
- expect(overlayContainerElement.textContent).not.toContain('steak');
- expect(overlayContainerElement.textContent).toContain('pizza');
- expect(overlayContainerElement.textContent).toContain('tacos');
- expect(overlayContainerElement.textContent).not.toContain('sandwich');
- expect(overlayContainerElement.textContent).not.toContain('chips');
- expect(overlayContainerElement.textContent).toContain('pasta');
- expect(overlayContainerElement.textContent).not.toContain('sushi');
- done();
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[2].nativeElement)
+ .toBe(document.activeElement);
+ fixture.debugElement.queryAll(By.directive(MdChip))[2]
+ .triggerEventHandler('keydown', createFakeKeyboardEvent(RIGHT_ARROW));
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(fixture.debugElement.queryAll(By.directive(MdChip))[0].nativeElement)
+ .toBe(document.activeElement);
+ done();
+ });
});
- }, 100);
+ });
});
});
});
});
+
});
// TODO
- // requireMatch usage
+ // more requireMatch usage
+
+ // more a11y unit tests
// readOnly usage
@@ -185,11 +682,46 @@ describe('Component: Chips', () => {
@Component({
template: `
-
+
+ `,
+})
+class TdChipsTestComponent {
+ color: string;
+ items: string[] = [
+ 'steak',
+ 'pizza',
+ 'tacos',
+ ];
+ selectedItems: string[] = this.items.slice(0, 2);
+}
+
+@Component({
+ template: `
+
+ `,
+})
+class TdChipsA11yTestComponent {
+ chipAddition: boolean = true;
+ items: string[] = [
+ 'steak',
+ 'pizza',
+ 'tacos',
+ 'sandwich',
+ 'chips',
+ 'pasta',
+ 'sushi',
+ ];
+ selectedItems: string[] = this.items.slice(0, 3);
+}
+
+@Component({
+ template: `
+
`,
})
class TdChipsBasicTestComponent {
placeholder: string;
+ filteredItems: string[];
selectedItems: string[] = [];
items: string[] = [
'steak',
@@ -200,4 +732,67 @@ class TdChipsBasicTestComponent {
'pasta',
'sushi',
];
+ filter(value: string): void {
+ this.filteredItems = this.items.filter((item: any) => {
+ return item.toLowerCase().indexOf(value.toLowerCase()) > -1;
+ }).filter((filteredItem: any) => {
+ return this.selectedItems ? this.selectedItems.indexOf(filteredItem) < 0 : true;
+ });
+ }
+}
+
+@Component({
+ template: `
+
+
+ {{chip.name}}
+
+
+ {{option.name}}
+
+ `,
+})
+class TdChipsObjectsRequireMatchTestComponent {
+ selectedObjects: any[] = [];
+ objects: any[];
+}
+
+@Component({
+ template: `
+
+ `,
+})
+class TdChipsStackedTestComponent {
+ stacked: boolean = false;
+ items: string[] = [
+ 'steak',
+ 'pizza',
+ 'tacos',
+ 'sandwich',
+ 'chips',
+ 'pasta',
+ 'sushi',
+ ];
+ selectedItems: string[] = this.items.slice(0, 3);
+}
+
+@Component({
+ template: `
+
+ `,
+})
+class TdChipRemovalTestComponent {
+ chipRemoval: boolean = true;
+ chipAddition: boolean = true;
+ items: string[] = [
+ 'steak',
+ 'pizza',
+ 'tacos',
+ 'sandwich',
+ 'chips',
+ 'pasta',
+ 'sushi',
+ ];
+ selectedItems: string[] = this.items.slice(0, 3);
}
diff --git a/src/platform/core/chips/chips.component.ts b/src/platform/core/chips/chips.component.ts
index 419da5af4a..b705e9a3a1 100644
--- a/src/platform/core/chips/chips.component.ts
+++ b/src/platform/core/chips/chips.component.ts
@@ -1,51 +1,92 @@
-import { Component, Input, Output, forwardRef, DoCheck, ViewChild, ViewChildren, QueryList, OnInit, HostListener } from '@angular/core';
+import { Component, Input, Output, forwardRef, DoCheck, ViewChild, ViewChildren, QueryList, OnInit, HostListener,
+ ElementRef, Optional, Inject, Directive, TemplateRef, ViewContainerRef, ContentChild, ChangeDetectionStrategy,
+ ChangeDetectorRef, AfterViewInit, OnDestroy, HostBinding, Renderer2 } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
import { EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl } from '@angular/forms';
-import { MdChip, MdInputDirective, ESCAPE, LEFT_ARROW, RIGHT_ARROW, DELETE, BACKSPACE } from '@angular/material';
+
+import { MdChip, MdInputDirective, TemplatePortalDirective, MdOption, MdAutocompleteTrigger, UP_ARROW, DOWN_ARROW,
+ ESCAPE, LEFT_ARROW, RIGHT_ARROW, DELETE, BACKSPACE, ENTER, SPACE, TAB, HOME } from '@angular/material';
+
import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
+import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/observable/timer';
+import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/debounceTime';
const noop: any = () => {
// empty method
};
-export const TD_CHIPS_CONTROL_VALUE_ACCESSOR: any = {
- provide: NG_VALUE_ACCESSOR,
- useExisting: forwardRef(() => TdChipsComponent),
- multi: true,
-};
+@Directive({
+ selector: '[td-chip]ng-template',
+})
+export class TdChipDirective extends TemplatePortalDirective {
+ constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef) {
+ super(templateRef, viewContainerRef);
+ }
+}
+
+@Directive({
+ selector: '[td-autocomplete-option]ng-template',
+})
+export class TdAutocompleteOptionDirective extends TemplatePortalDirective {
+ constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef) {
+ super(templateRef, viewContainerRef);
+ }
+}
@Component({
- providers: [ TD_CHIPS_CONTROL_VALUE_ACCESSOR ],
+ providers: [{
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => TdChipsComponent),
+ multi: true,
+ }],
selector: 'td-chips',
styleUrls: ['./chips.component.scss' ],
templateUrl: './chips.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
+export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit, AfterViewInit, OnDestroy {
+
+ private _outsideClickSubs: Subscription;
+
+ private _isMousedown: boolean = false;
/**
* Implemented as part of ControlValueAccessor.
*/
- private _value: any = [];
+ private _value: any[] = [];
+ private _items: any[];
private _length: number = 0;
+ private _stacked: boolean = false;
private _requireMatch: boolean = false;
private _readOnly: boolean = false;
+ private _color: 'primary' | 'accent' | 'warn' = 'primary';
private _chipAddition: boolean = true;
+ private _chipRemoval: boolean = true;
+ private _focused: boolean = false;
+ private _tabIndex: number = 0;
+
+ _internalClick: boolean = false;
+ @ViewChild('input') _nativeInput: ElementRef;
@ViewChild(MdInputDirective) _inputChild: MdInputDirective;
+ @ViewChild(MdAutocompleteTrigger) _autocompleteTrigger: MdAutocompleteTrigger;
@ViewChildren(MdChip) _chipsChildren: QueryList;
- /**
- * Boolean value that specifies if the input is valid against the provieded list.
- */
- matches: boolean = true;
+ @ContentChild(TdChipDirective) _chipTemplate: TdChipDirective;
+ @ContentChild(TdAutocompleteOptionDirective) _autocompleteOptionTemplate: TdAutocompleteOptionDirective;
+
+ @ViewChildren(MdOption) _options: QueryList;
+
/**
* Flag that is true when autocomplete is focused.
*/
- focused: boolean = false;
+ get focused(): boolean {
+ return this._focused;
+ }
/**
* FormControl for the mdInput element.
@@ -53,25 +94,35 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
inputControl: FormControl = new FormControl();
/**
- * Subject to control what items to render in the autocomplete
- */
- subject: Subject = new Subject();
-
- /**
- * Observable of items to render in the autocomplete
+ * items?: any[]
+ * Renders the `md-autocomplete` with the provided list to display as options.
*/
- filteredItems: Observable = this.subject.asObservable();
+ @Input('items')
+ set items(items: any[]) {
+ this._items = items;
+ this._setFirstOptionActive();
+ this._changeDetectorRef.markForCheck();
+ }
+ get items(): any[] {
+ return this._items;
+ }
/**
- * items?: string[]
- * Enables Autocompletion with the provided list of strings.
+ * stacked?: boolean
+ * Set stacked or horizontal chips depending on value.
+ * Defaults to false.
*/
- @Input('items') items: string[] = [];
+ @Input('stacked')
+ set stacked(stacked: any) {
+ this._stacked = stacked !== '' ? (stacked === 'true' || stacked === true) : true;
+ }
+ get stacked(): any {
+ return this._stacked;
+ }
/**
* requireMatch?: boolean
- * Validates input against the provided list before adding it to the model.
- * If it doesnt exist, it cancels the event.
+ * Blocks custom inputs and only allows selections from the autocomplete list.
*/
@Input('requireMatch')
set requireMatch(requireMatch: any) {
@@ -96,8 +147,8 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
/**
* chipAddition?: boolean
- * Disables the ability to add chips. If it doesn't exist chip addition defaults to true.
- * When setting readOnly as true, this will be overriden.
+ * Disables the ability to add chips. When setting readOnly as true, this will be overriden.
+ * Defaults to true.
*/
@Input('chipAddition')
set chipAddition(chipAddition: boolean) {
@@ -116,25 +167,76 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
return this.chipAddition && !this.readOnly;
}
+ /**
+ * chipRemoval?: boolean
+ * Disables the ability to remove chips. If it doesn't exist chip remmoval defaults to true.
+ * When setting readOnly as true, this will be overriden to false.
+ */
+ @Input('chipRemoval')
+ set chipRemoval(chipRemoval: boolean) {
+ this._chipRemoval = chipRemoval;
+ }
+ get chipRemoval(): boolean {
+ return this._chipRemoval;
+ }
+
+ /**
+ * Checks if not in readOnly state and if chipRemoval is set to 'true'
+ * States if a chip can be removed
+ */
+ get canRemoveChip(): boolean {
+ return this.chipRemoval && !this.readOnly;
+ }
+
/**
* placeholder?: string
* Placeholder for the autocomplete input.
*/
@Input('placeholder') placeholder: string;
+ /**
+ * debounce?: number
+ * Debounce timeout between keypresses. Defaults to 200.
+ */
+ @Input('debounce') debounce: number = 200;
+
+ /**
+ * color?: 'primary' | 'accent' | 'warn'
+ * Sets the color for the input and focus/selected state of the chips.
+ * Defaults to 'primary'
+ */
+ @Input('color')
+ set color(color: 'primary' | 'accent' | 'warn') {
+ if (color) {
+ this._renderer.removeClass(this._elementRef.nativeElement, 'mat-' + this._color);
+ this._color = color;
+ this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + this._color);
+ }
+ }
+ get color(): 'primary' | 'accent' | 'warn' {
+ return this._color;
+ }
+
/**
* add?: function
- * Method to be executed when string is added as chip through the autocomplete.
+ * Method to be executed when a chip is added.
* Sends chip value as event.
*/
- @Output('add') add: EventEmitter = new EventEmitter();
+ @Output('add') onAdd: EventEmitter = new EventEmitter();
/**
* remove?: function
- * Method to be executed when string is removed as chip with the "remove" button.
+ * Method to be executed when a chip is removed.
* Sends chip value as event.
*/
- @Output('remove') remove: EventEmitter = new EventEmitter();
+ @Output('remove') onRemove: EventEmitter = new EventEmitter();
+
+ /**
+ * inputChange?: function
+ * Method to be executed when the value in the autocomplete input changes.
+ * Sends string value as event.
+ */
+ @Output('inputChange') onInputChange: EventEmitter = new EventEmitter();
/**
* Implemented as part of ControlValueAccessor.
@@ -143,24 +245,103 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
if (v !== this._value) {
this._value = v;
this._length = this._value ? this._value.length : 0;
- if (this._value) {
- this._filter(this.inputControl.value);
- }
+ this._changeDetectorRef.markForCheck();
}
}
get value(): any { return this._value; }
+ /**
+ * Hostbinding to set the a11y of the TdChipsComponent depending on its state
+ */
+ @HostBinding('attr.tabindex')
+ get tabIndex(): number {
+ return this.readOnly ? -1 : this._tabIndex;
+ }
+
+ constructor(private _elementRef: ElementRef,
+ private _renderer: Renderer2,
+ private _changeDetectorRef: ChangeDetectorRef,
+ @Optional() @Inject(DOCUMENT) private _document: any) {
+ this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + this._color);
+ }
+
+ /**
+ * Listens to host focus event to act on it
+ */
+ @HostListener('focus', ['$event'])
+ focusListener(event: FocusEvent): void {
+ // should only focus if its not via mousedown to prevent clashing with autocomplete
+ if (!this._isMousedown) {
+ this.focus();
+ }
+ event.preventDefault();
+ }
+
+ /**
+ * Listens to host mousedown event to act on it
+ */
+ @HostListener('mousedown', ['$event'])
+ mousedownListener(event: FocusEvent): void {
+ // sets a flag to know if there was a mousedown and then it returns it back to false
+ this._isMousedown = true;
+ Observable.timer().toPromise().then(() => {
+ this._isMousedown = false;
+ });
+ }
+
+ /**
+ * If clicking on :host or `td-chips-wrapper`, then we stop the click propagation so the autocomplete
+ * doesnt close automatically.
+ */
+ @HostListener('click', ['$event'])
+ clickListener(event: Event): void {
+ const clickTarget: HTMLElement = event.target;
+ if (clickTarget === this._elementRef.nativeElement ||
+ clickTarget.className.indexOf('td-chips-wrapper') > -1) {
+ this.focus();
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+
+ /**
+ * Listens to host keydown event to act on it depending on the keypress
+ */
+ @HostListener('keydown', ['$event'])
+ keydownListener(event: KeyboardEvent): void {
+ switch (event.keyCode) {
+ case TAB:
+ // if tabing out, then unfocus the component
+ Observable.timer().toPromise().then(() => {
+ this.removeFocusedState();
+ });
+ break;
+ case ESCAPE:
+ if (this._inputChild.focused) {
+ this._nativeInput.nativeElement.blur();
+ this.removeFocusedState();
+ this._closeAutocomplete();
+ } else {
+ this.focus();
+ }
+ break;
+ default:
+ // default
+ }
+ }
+
ngOnInit(): void {
this.inputControl.valueChanges
- .debounceTime(100)
+ .debounceTime(this.debounce)
.subscribe((value: string) => {
- this.matches = true;
- this._filter(value);
+ this.onInputChange.emit(value ? value : '');
});
- // filter the autocomplete options after everything is rendered
- Observable.timer().subscribe(() => {
- this._filter(this.inputControl.value);
- });
+ this._changeDetectorRef.markForCheck();
+ }
+
+ ngAfterViewInit(): void {
+ this._watchOutsideClick();
+ this._changeDetectorRef.markForCheck();
}
ngDoCheck(): void {
@@ -171,35 +352,74 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
}
}
- /**
- * Returns a list of filtered items.
- */
- filter(val: string): string[] {
- return this.items.filter((item: string) => {
- return val ? item.indexOf(val) > -1 : true;
- });
+ ngOnDestroy(): void {
+ if (this._outsideClickSubs) {
+ this._outsideClickSubs.unsubscribe();
+ this._outsideClickSubs = undefined;
+ }
}
/**
* Method that is executed when trying to create a new chip from the autocomplete.
+ * It check if [requireMatch] is enabled, and tries to add the first active option
+ * else if just adds the value thats on the input
* returns 'true' if successful, 'false' if it fails.
*/
- addChip(value: string): boolean {
- if (value.trim() === '' || this._value.indexOf(value) > -1) {
- this.matches = false;
- return false;
- }
- if (this.items && this.requireMatch) {
- if (this.items.indexOf(value) < 0) {
- this.matches = false;
+ _handleAddChip(): boolean {
+ let value: any;
+ if (this.requireMatch) {
+ let selectedOptions: MdOption[] = this._options.toArray().filter((option: MdOption) => {
+ return option.active;
+ });
+ if (selectedOptions.length > 0) {
+ value = selectedOptions[0].value;
+ selectedOptions[0].setInactiveStyles();
+ }
+ if (!value) {
return false;
}
+ } else {
+ // if there is a selection, then use that
+ // else use the input value as chip
+ if (this._autocompleteTrigger.activeOption) {
+ value = this._autocompleteTrigger.activeOption.value;
+ this._autocompleteTrigger.activeOption.setInactiveStyles();
+ } else {
+ value = this._inputChild.value;
+ if (value.trim() === '') {
+ return false;
+ }
+ }
}
+ return this.addChip(value);
+ }
+
+ /**
+ * Method thats exectuted when trying to add a value as chip
+ * returns 'true' if successful, 'false' if it fails.
+ */
+ addChip(value: any): boolean {
+ /**
+ * add a debounce ms delay when reopening the autocomplete to give it time
+ * to rerender the next list and at the correct spot
+ */
+ this._closeAutocomplete();
+ Observable.timer(this.debounce).toPromise().then(() => {
+ this.setFocusedState();
+ this._setFirstOptionActive();
+ this._openAutocomplete();
+ });
+
+ this.inputControl.setValue('');
+ // check if value is already part of the model
+ if (this._value.indexOf(value) > -1) {
+ return false;
+ }
+
this._value.push(value);
- this.add.emit(value);
+ this.onAdd.emit(value);
this.onChange(this._value);
- this.inputControl.setValue('');
- this.matches = true;
+ this._changeDetectorRef.markForCheck();
return true;
}
@@ -207,36 +427,66 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
* Method that is executed when trying to remove a chip.
* returns 'true' if successful, 'false' if it fails.
*/
- removeChip(value: string): boolean {
- let index: number = this._value.indexOf(value);
- if (index < 0) {
+ removeChip(index: number): boolean {
+ let removedValues: any[] = this._value.splice(index, 1);
+ if (removedValues.length === 0) {
return false;
}
- this._value.splice(index, 1);
- this.remove.emit(value);
+
+ /**
+ * Checks if deleting last single chip, to focus input afterwards
+ * Else check if its not the last chip of the list to focus the next one.
+ */
+ if (index === (this._totalChips - 1) && index === 0) {
+ this._inputChild.focus();
+ } else if (index < (this._totalChips - 1)) {
+ this._focusChip(index + 1);
+ } else if (index > 0) {
+ this._focusChip(index - 1);
+ }
+
+ this.onRemove.emit(removedValues[0]);
this.onChange(this._value);
this.inputControl.setValue('');
+ this._changeDetectorRef.markForCheck();
return true;
}
- handleFocus(): boolean {
- this.focused = true;
+ _handleFocus(): boolean {
+ this.setFocusedState();
+ this._setFirstOptionActive();
return true;
}
- handleBlur(): boolean {
- this.focused = false;
- this.matches = true;
- this.onTouched();
- return true;
+ /**
+ * Sets focus state of the component
+ */
+ setFocusedState(): void {
+ if (!this.readOnly) {
+ this._focused = true;
+ this._tabIndex = -1;
+ this._changeDetectorRef.markForCheck();
+ }
+ }
+
+ /**
+ * Removes focus state of the component
+ */
+ removeFocusedState(): void {
+ this._focused = false;
+ this._tabIndex = 0;
+ this._changeDetectorRef.markForCheck();
}
/**
- * Programmatically focus the input. Since its the component entry point
+ * Programmatically focus the input or first chip. Since its the component entry point
+ * depending if a user can add or remove chips
*/
focus(): void {
if (this.canAddChip) {
this._inputChild.focus();
+ } else if (!this.readOnly) {
+ this._focusFirstChip();
}
}
@@ -245,19 +495,37 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
*/
_inputKeydown(event: KeyboardEvent): void {
switch (event.keyCode) {
+ case UP_ARROW:
+ /**
+ * Since the first item is highlighted on [requireMatch], we need to inactivate it
+ * when pressing the up key
+ */
+ if (this.requireMatch) {
+ let length: number = this._options.length;
+ if (length > 0 && this._options.toArray()[0].active) {
+ this._options.toArray()[0].setInactiveStyles();
+ // prevent default window scrolling
+ event.preventDefault();
+ }
+ }
+ break;
case LEFT_ARROW:
case DELETE:
case BACKSPACE:
+ this._closeAutocomplete();
/** Check to see if input is empty when pressing left arrow to move to the last chip */
if (!this._inputChild.value) {
this._focusLastChip();
+ // prevent default window scrolling
event.preventDefault();
}
break;
case RIGHT_ARROW:
+ this._closeAutocomplete();
/** Check to see if input is empty when pressing right arrow to move to the first chip */
if (!this._inputChild.value) {
this._focusFirstChip();
+ // prevent default window scrolling
event.preventDefault();
}
break;
@@ -273,48 +541,81 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
switch (event.keyCode) {
case DELETE:
case BACKSPACE:
- /** Check to see if not in [readOnly] state to delete a chip */
- if (!this.readOnly) {
- /**
- * Checks if deleting last single chip, to focus input afterwards
- * Else check if its not the last chip of the list to focus the next one.
- */
- if (index === (this._totalChips - 1) && index === 0) {
- this.focus();
- } else if (index < (this._totalChips - 1)) {
- this._focusChip(index + 1);
- }
- this.removeChip(this.value[index]);
+ /** Check to see if we can delete a chip */
+ if (this.canRemoveChip) {
+ this.removeChip(index);
}
break;
+ case UP_ARROW:
case LEFT_ARROW:
/**
- * Check to see if left arrow was pressed while focusing the first chip to focus input next
+ * Check to see if left/down arrow was pressed while focusing the first chip to focus input next
* Also check if input should be focused
*/
- if (index === 0 && this.canAddChip) {
- this.focus();
- event.stopPropagation();
+ if (index === 0) {
+ // only try to target input if pressing left
+ if (this.canAddChip && event.keyCode === LEFT_ARROW) {
+ this._inputChild.focus();
+ } else {
+ this._focusLastChip();
+ }
+ } else if (index > 0) {
+ this._focusChip(index - 1);
}
+ // prevent default window scrolling
+ event.preventDefault();
break;
+ case DOWN_ARROW:
case RIGHT_ARROW:
/**
- * Check to see if right arrow was pressed while focusing the last chip to focus input next
+ * Check to see if right/up arrow was pressed while focusing the last chip to focus input next
* Also check if input should be focused
*/
- if (index === (this._totalChips - 1) && this.canAddChip) {
- this.focus();
- event.stopPropagation();
+ if (index === (this._totalChips - 1)) {
+ // only try to target input if pressing right
+ if (this.canAddChip && event.keyCode === RIGHT_ARROW) {
+ this._inputChild.focus();
+ } else {
+ this._focusFirstChip();
+ }
+ } else if (index < (this._totalChips - 1)) {
+ this._focusChip(index + 1);
}
- break;
- case ESCAPE:
- this.focus();
+ // prevent default window scrolling
+ event.preventDefault();
break;
default:
// default
}
}
+ /**
+ * Method to remove from display the value added from the autocomplete since it goes directly as chip.
+ */
+ _removeInputDisplay(): string {
+ return '';
+ }
+
+ /**
+ * Method to open the autocomplete manually if its not already opened
+ */
+ _openAutocomplete(): void {
+ if (!this._autocompleteTrigger.panelOpen) {
+ this._autocompleteTrigger.openPanel();
+ this._changeDetectorRef.markForCheck();
+ }
+ }
+
+ /**
+ * Method to close the autocomplete manually if its not already closed
+ */
+ _closeAutocomplete(): void {
+ if (this._autocompleteTrigger.panelOpen) {
+ this._autocompleteTrigger.closePanel();
+ this._changeDetectorRef.markForCheck();
+ }
+ }
+
/**
* Implemented as part of ControlValueAccessor.
*/
@@ -333,22 +634,10 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
onChange = (_: any) => noop;
onTouched = () => noop;
- /**
- *
- * Method to filter the options for the autocomplete
- */
- private _filter(value: string): void {
- let items: string[] = this.filter(value);
- items = items.filter((filteredItem: string) => {
- return this._value && filteredItem ? this._value.indexOf(filteredItem) < 0 : true;
- });
- this.subject.next(items);
- }
-
/**
* Get total of chips
*/
- private get _totalChips(): number {
+ get _totalChips(): number {
let chips: MdChip[] = this._chipsChildren.toArray();
return chips.length;
}
@@ -383,5 +672,53 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
} else {
this.inputControl.disable();
}
+ this._changeDetectorRef.markForCheck();
+ }
+
+ /**
+ * Sets first option as active to let the user know which one will be added when pressing enter
+ * Only if [requireMatch] has been set
+ */
+ private _setFirstOptionActive(): void {
+ if (this.requireMatch) {
+ // need to use a timer here to wait until the autocomplete has been opened (end of queue)
+ Observable.timer().toPromise().then(() => {
+ if (this.focused && this._options && this._options.length > 0) {
+ // clean up of previously active options
+ this._options.toArray().forEach((option: MdOption) => {
+ option.setInactiveStyles();
+ });
+ // set the first one as active
+ this._options.toArray()[0].setActiveStyles();
+ this._changeDetectorRef.markForCheck();
+ }
+ });
+ }
+ }
+
+ /**
+ * Watches clicks outside of the component to remove the focus
+ * The autocomplete panel is considered inside the component so we
+ * need to use a flag to find out when its clicked.
+ */
+ private _watchOutsideClick(): void {
+ if (this._document) {
+ this._outsideClickSubs = Observable.fromEvent(this._document, 'click').filter((event: MouseEvent) => {
+ const clickTarget: HTMLElement = event.target;
+ setTimeout(() => {
+ this._internalClick = false;
+ });
+ return this.focused &&
+ (clickTarget !== this._elementRef.nativeElement) &&
+ !this._elementRef.nativeElement.contains(clickTarget) && !this._internalClick;
+ }).subscribe(() => {
+ if (this.focused) {
+ this.removeFocusedState();
+ this.onTouched();
+ this._changeDetectorRef.markForCheck();
+ }
+ });
+ }
+ return undefined;
}
}
diff --git a/src/platform/core/chips/chips.module.ts b/src/platform/core/chips/chips.module.ts
index 90bbb29763..c22cf37545 100644
--- a/src/platform/core/chips/chips.module.ts
+++ b/src/platform/core/chips/chips.module.ts
@@ -5,8 +5,8 @@ import { CommonModule } from '@angular/common';
import { MdInputModule, MdIconModule, MdAutocompleteModule, MdChipsModule } from '@angular/material';
-import { TdChipsComponent } from './chips.component';
-export { TdChipsComponent } from './chips.component';
+import { TdChipsComponent, TdChipDirective, TdAutocompleteOptionDirective } from './chips.component';
+export { TdChipsComponent, TdChipDirective, TdAutocompleteOptionDirective } from './chips.component';
@NgModule({
imports: [
@@ -19,9 +19,13 @@ export { TdChipsComponent } from './chips.component';
],
declarations: [
TdChipsComponent,
+ TdChipDirective,
+ TdAutocompleteOptionDirective,
],
exports: [
TdChipsComponent,
+ TdChipDirective,
+ TdAutocompleteOptionDirective,
],
})
export class CovalentChipsModule {
diff --git a/src/platform/core/common/animations/fade/fade.directive.ts b/src/platform/core/common/animations/fade/fade.directive.ts
index fa235bb7bc..bbdbd881c4 100644
--- a/src/platform/core/common/animations/fade/fade.directive.ts
+++ b/src/platform/core/common/animations/fade/fade.directive.ts
@@ -1,9 +1,5 @@
-import {
- Directive, ElementRef, Input, Output, EventEmitter, HostBinding, Renderer2, OnInit, ChangeDetectorRef, AnimationPlayer,
-} from '@angular/core';
-import { ɵAnimation as Animation, AnimationDriver,
- ɵAnimationStyleNormalizer as AnimationStyleNormalizer, ɵDomAnimationEngine as DomAnimationEngine } from '@angular/animations/browser';
-import { animate } from '@angular/animations';
+import { Directive, ElementRef, Input, Output, EventEmitter, HostBinding, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { animate, AnimationBuilder, AnimationPlayer, AUTO_STYLE, style, animation } from '@angular/animations';
@Directive({
selector: '[tdFade]',
@@ -11,10 +7,9 @@ import { animate } from '@angular/animations';
export class TdFadeDirective {
private _state: boolean;
- private _defaultOpacity: string;
private _defaultDisplay: string;
- private _engine: DomAnimationEngine;
- private _animationPlayer: AnimationPlayer;
+ private _animationFadeInPlayer: AnimationPlayer;
+ private _animationFadeOutPlayer: AnimationPlayer;
/**
* duration?: number
@@ -30,13 +25,17 @@ export class TdFadeDirective {
@Input('tdFade')
set state(state: boolean) {
this._state = state;
- if (this._animationPlayer) {
- this._animationPlayer.destroy();
- this._animationPlayer = undefined;
- }
if (state) {
+ if (this._animationFadeOutPlayer) {
+ this._animationFadeOutPlayer.destroy();
+ this._animationFadeOutPlayer = undefined;
+ }
this.hide();
} else {
+ if (this._animationFadeInPlayer) {
+ this._animationFadeInPlayer.destroy();
+ this._animationFadeInPlayer = undefined;
+ }
this.show();
}
}
@@ -45,13 +44,13 @@ export class TdFadeDirective {
* fadeIn?: function
* Method to be executed when fadeIn animation ends.
*/
- @Output('fadeIn') fadeIn: EventEmitter = new EventEmitter();
+ @Output('fadeIn') onFadeIn: EventEmitter = new EventEmitter();
/**
* fadeOut?: function
* Method to be executed when fadeOut animation ends.
*/
- @Output('fadeOut') fadeOut: EventEmitter = new EventEmitter();
+ @Output('fadeOut') onFadeOut: EventEmitter = new EventEmitter();
/**
* Binds native 'aria-expanded' attribute.
@@ -72,28 +71,25 @@ export class TdFadeDirective {
constructor(private _renderer: Renderer2,
private _element: ElementRef,
private _changeDetectorRef: ChangeDetectorRef,
- animationDriver: AnimationDriver,
- animationStyleNormalizer: AnimationStyleNormalizer) {
- this._engine = new DomAnimationEngine(animationDriver, animationStyleNormalizer);
+ private _animationBuilder: AnimationBuilder) {
+ this._defaultDisplay = this._element.nativeElement.style.display;
}
/**
* Hides element: starts animation and adds "display:'none'" style at the end.
*/
hide(): void {
- this._defaultDisplay = this._element.nativeElement.style.display;
- this._defaultOpacity = !this._element.nativeElement.style.opacity ? 1 : this._element.nativeElement.style.opacity;
- this._animationPlayer = this._engine.animateTimeline(
- this._element.nativeElement,
- new Animation([animate(this.duration + 'ms ease-out')],
- ).buildTimelines([{opacity: this._defaultOpacity}], [{opacity: 0}]));
- this._changeDetectorRef.markForCheck();
- this._animationPlayer.play();
- this._animationPlayer.onDone(() => {
- this._animationPlayer.destroy();
- this._renderer.setStyle(this._element.nativeElement, 'display', 'none');
- this._changeDetectorRef.markForCheck();
+ this._animationFadeInPlayer = this._animationBuilder.build(animation([
+ style({
+ opacity: AUTO_STYLE,
+ display: AUTO_STYLE,
+ }),
+ animate(this.duration + 'ms ease-out', style({opacity: '0'})),
+ ])).create(this._element.nativeElement);
+ this._animationFadeInPlayer.onDone(() => {
+ this._onFadeInDone();
});
+ this._animationFadeInPlayer.play();
}
/**
@@ -102,14 +98,35 @@ export class TdFadeDirective {
show(): void {
this._renderer.setStyle(this._element.nativeElement, 'display', this._defaultDisplay);
this._changeDetectorRef.markForCheck();
- this._animationPlayer = this._engine.animateTimeline(
- this._element.nativeElement,
- new Animation([animate(this.duration + 'ms ease-in')],
- ).buildTimelines([{opacity: 0}], [{opacity: this._defaultOpacity}]));
- this._animationPlayer.play();
- this._animationPlayer.onDone(() => {
- this._animationPlayer.destroy();
- this._changeDetectorRef.markForCheck();
+ this._animationFadeOutPlayer = this._animationBuilder.build(animation([
+ style({
+ opacity: '0',
+ display: 'none',
+ }),
+ animate(this.duration + 'ms ease-in', style({opacity: AUTO_STYLE})),
+ ])).create(this._element.nativeElement);
+ this._animationFadeOutPlayer.onDone(() => {
+ this._onFadeOutDone();
});
+ this._animationFadeOutPlayer.play();
+ }
+
+ private _onFadeInDone(): void {
+ if (this._animationFadeInPlayer) {
+ this._animationFadeInPlayer.destroy();
+ this._animationFadeInPlayer = undefined;
+ this._renderer.setStyle(this._element.nativeElement, 'display', 'none');
+ this._changeDetectorRef.markForCheck();
+ this.onFadeIn.emit();
+ }
+ }
+
+ private _onFadeOutDone(): void {
+ if (this._animationFadeOutPlayer) {
+ this._animationFadeOutPlayer.destroy();
+ this._animationFadeOutPlayer = undefined;
+ this._changeDetectorRef.markForCheck();
+ this.onFadeOut.emit();
+ }
}
}
diff --git a/src/platform/core/common/animations/toggle/toggle.directive.ts b/src/platform/core/common/animations/toggle/toggle.directive.ts
index ce1d3b45c3..5aae207752 100644
--- a/src/platform/core/common/animations/toggle/toggle.directive.ts
+++ b/src/platform/core/common/animations/toggle/toggle.directive.ts
@@ -1,7 +1,5 @@
-import { Directive, ElementRef, Input, HostBinding, Renderer2, AnimationPlayer, OnInit, ChangeDetectorRef } from '@angular/core';
-import { ɵAnimation as Animation, AnimationDriver,
- ɵAnimationStyleNormalizer as AnimationStyleNormalizer, ɵDomAnimationEngine as DomAnimationEngine } from '@angular/animations/browser';
-import { animate } from '@angular/animations';
+import { Directive, ElementRef, Input, HostBinding, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { animate, AnimationBuilder, AnimationPlayer, AUTO_STYLE, style, animation } from '@angular/animations';
@Directive({
selector: '[tdToggle]',
@@ -11,8 +9,8 @@ export class TdToggleDirective {
private _state: boolean;
private _defaultOverflow: string;
private _defaultDisplay: string;
- private _engine: DomAnimationEngine;
- private _animationPlayer: AnimationPlayer;
+ private _animationShowPlayer: AnimationPlayer;
+ private _animationHidePlayer: AnimationPlayer;
/**
* duration?: number
@@ -28,13 +26,17 @@ export class TdToggleDirective {
@Input('tdToggle')
set state(state: boolean) {
this._state = state;
- if (this._animationPlayer) {
- this._animationPlayer.destroy();
- this._animationPlayer = undefined;
- }
if (state) {
+ if (this._animationShowPlayer) {
+ this._animationShowPlayer.destroy();
+ this._animationShowPlayer = undefined;
+ }
this.hide();
} else {
+ if (this._animationHidePlayer) {
+ this._animationHidePlayer.destroy();
+ this._animationHidePlayer = undefined;
+ }
this.show();
}
}
@@ -58,9 +60,9 @@ export class TdToggleDirective {
constructor(private _renderer: Renderer2,
private _element: ElementRef,
private _changeDetectorRef: ChangeDetectorRef,
- animationDriver: AnimationDriver,
- animationStyleNormalizer: AnimationStyleNormalizer) {
- this._engine = new DomAnimationEngine(animationDriver, animationStyleNormalizer);
+ private _animationBuilder: AnimationBuilder) {
+ this._defaultDisplay = this._element.nativeElement.style.display;
+ this._defaultOverflow = this._element.nativeElement.style.overflow;
}
/**
@@ -68,21 +70,19 @@ export class TdToggleDirective {
* starts animation and adds "display:'none'" style at the end.
*/
hide(): void {
- this._defaultDisplay = this._element.nativeElement.style.display;
- this._defaultOverflow = this._element.nativeElement.style.overflow;
- this._animationPlayer = this._engine.animateTimeline(
- this._element.nativeElement,
- new Animation([animate(this.duration + 'ms ease-out')],
- ).buildTimelines([{height: this._element.nativeElement.scrollHeight + 'px'}], [{height: 0}]));
+ this._animationHidePlayer = this._animationBuilder.build(animation([
+ style({
+ height: AUTO_STYLE,
+ display: AUTO_STYLE,
+ }),
+ animate(this.duration + 'ms ease-in', style({height: '0'})),
+ ])).create(this._element.nativeElement);
this._renderer.setStyle(this._element.nativeElement, 'overflow', 'hidden');
this._changeDetectorRef.markForCheck();
- this._animationPlayer.play();
- this._animationPlayer.onDone(() => {
- this._animationPlayer.destroy();
- this._renderer.setStyle(this._element.nativeElement, 'overflow', this._defaultOverflow);
- this._renderer.setStyle(this._element.nativeElement, 'display', 'none');
- this._changeDetectorRef.markForCheck();
+ this._animationHidePlayer.onDone(() => {
+ this._onHideDone();
});
+ this._animationHidePlayer.play();
}
/**
@@ -92,16 +92,36 @@ export class TdToggleDirective {
show(): void {
this._renderer.setStyle(this._element.nativeElement, 'display', this._defaultDisplay);
this._changeDetectorRef.markForCheck();
- this._animationPlayer = this._engine.animateTimeline(
- this._element.nativeElement,
- new Animation([animate(this.duration + 'ms ease-in')],
- ).buildTimelines([{height: 0}], [{height: this._element.nativeElement.scrollHeight + 'px'}]));
+ this._animationShowPlayer = this._animationBuilder.build(animation([
+ style({
+ height: '0',
+ display: 'none',
+ }),
+ animate(this.duration + 'ms ease-out', style({height: AUTO_STYLE})),
+ ])).create(this._element.nativeElement);
this._renderer.setStyle(this._element.nativeElement, 'overflow', 'hidden');
- this._animationPlayer.play();
- this._animationPlayer.onDone(() => {
- this._animationPlayer.destroy();
+ this._animationShowPlayer.onDone(() => {
+ this._onShowDone();
+ });
+ this._animationShowPlayer.play();
+ }
+
+ private _onHideDone(): void {
+ if (this._animationHidePlayer) {
+ this._animationHidePlayer.destroy();
+ this._animationHidePlayer = undefined;
this._renderer.setStyle(this._element.nativeElement, 'overflow', this._defaultOverflow);
+ this._renderer.setStyle(this._element.nativeElement, 'display', 'none');
this._changeDetectorRef.markForCheck();
- });
+ }
+ }
+
+ private _onShowDone(): void {
+ if (this._animationShowPlayer) {
+ this._animationShowPlayer.destroy();
+ this._animationShowPlayer = undefined;
+ this._renderer.setStyle(this._element.nativeElement, 'overflow', this._defaultOverflow);
+ this._changeDetectorRef.markForCheck();
+ }
}
}
diff --git a/src/platform/core/common/common.module.ts b/src/platform/core/common/common.module.ts
index fafe581edf..2936622908 100644
--- a/src/platform/core/common/common.module.ts
+++ b/src/platform/core/common/common.module.ts
@@ -34,15 +34,9 @@ const TD_FORMS: Type[] = [
export { TdAutoTrimDirective };
// Validators
-import { TdMinValidator } from './forms/validators/min/min.validator';
-import { TdMaxValidator } from './forms/validators/max/max.validator';
-
const TD_VALIDATORS: Type[] = [
- TdMinValidator,
- TdMaxValidator,
];
-export { TdMinValidator, TdMaxValidator };
export { CovalentValidators } from './forms/validators/validators';
/**
diff --git a/src/platform/core/common/forms/validators/max/max.validator.ts b/src/platform/core/common/forms/validators/max/max.validator.ts
deleted file mode 100644
index 76bdbbdb1a..0000000000
--- a/src/platform/core/common/forms/validators/max/max.validator.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Directive, Input, forwardRef } from '@angular/core';
-import { NG_VALIDATORS, Validator, Validators, AbstractControl, ValidatorFn } from '@angular/forms';
-
-import { CovalentValidators } from '../validators';
-
-export const MAX_VALIDATOR: any = {
- provide: NG_VALIDATORS,
- useExisting: forwardRef(() => TdMaxValidator),
- multi: true,
-};
-
-@Directive({
- selector: '[max][formControlName],[max][formControl],[max][ngModel]',
- providers: [ MAX_VALIDATOR ],
-})
-export class TdMaxValidator implements Validator {
-
- private _validator: ValidatorFn;
-
- @Input('max')
- set max(max: number) {
- this._validator = CovalentValidators.max(max);
- }
-
- validate(c: AbstractControl): {[key: string]: any} {
- return this._validator(c);
- }
-}
diff --git a/src/platform/core/common/forms/validators/min/min.validator.ts b/src/platform/core/common/forms/validators/min/min.validator.ts
deleted file mode 100644
index 6fdd69fce0..0000000000
--- a/src/platform/core/common/forms/validators/min/min.validator.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Directive, Input, forwardRef } from '@angular/core';
-import { NG_VALIDATORS, Validator, Validators, AbstractControl, ValidatorFn } from '@angular/forms';
-
-import { CovalentValidators } from '../validators';
-
-export const MIN_VALIDATOR: any = {
- provide: NG_VALIDATORS,
- useExisting: forwardRef(() => TdMinValidator),
- multi: true,
-};
-
-@Directive({
- selector: '[min][formControlName],[min][formControl],[min][ngModel]',
- providers: [ MIN_VALIDATOR ],
-})
-export class TdMinValidator implements Validator {
-
- private _validator: ValidatorFn;
-
- @Input('min')
- set min(min: number) {
- this._validator = CovalentValidators.min(min);
- }
-
- validate(c: AbstractControl): {[key: string]: any} {
- return this._validator(c);
- }
-}
diff --git a/src/platform/core/common/styles/_card.scss b/src/platform/core/common/styles/_card.scss
index 9154b25103..7f10bdd802 100644
--- a/src/platform/core/common/styles/_card.scss
+++ b/src/platform/core/common/styles/_card.scss
@@ -1,6 +1,6 @@
@import 'variables';
-body {
+html {
.mat-card {
padding: 0;
margin: 8px;
@@ -15,8 +15,14 @@ body {
margin: 16px 0 0 15px;
border-radius: 50%;
}
- [md-card-image] {
+ .mat-card-image {
width: 100%;
+ }
+ .mat-card-image,
+ .mat-card-lg-image,
+ .mat-card-md-image,
+ .mat-card-sm-image,
+ .mat-card-title-group {
margin: 0;
}
md-card-title {
@@ -32,10 +38,70 @@ body {
padding: $padding;
}
&, & .mat-card {
- & .mat-card-actions:last-child {
+ & .mat-card-actions {
padding: $padding / 2;
margin: 0;
}
}
+ .mat-card-actions:last-child {
+ margin-bottom: 0px;
+ padding-bottom: 8px;
+ }
+ }
+ &:not([dir='rtl']) {
+ .mat-card-title-group {
+ .mat-card-image,
+ .mat-card-lg-image,
+ .mat-card-md-image,
+ .mat-card-sm-image {
+ &:last-child {
+ border-top-right-radius: $md-card-radius;
+ border-bottom-right-radius: $md-card-radius;
+ }
+ }
+ }
+ .mat-card {
+ .mat-card-image {
+ &:first-child {
+ border-top-left-radius: $md-card-radius;
+ border-top-right-radius: $md-card-radius;
+ }
+ }
+ .mat-card-lg-image,
+ .mat-card-md-image,
+ .mat-card-sm-image {
+ &:first-child {
+ border-top-left-radius: $md-card-radius;
+ }
+ }
+ }
+ }
+ &[dir='rtl'] {
+ .mat-card-title-group {
+ .mat-card-image,
+ .mat-card-lg-image,
+ .mat-card-md-image,
+ .mat-card-sm-image {
+ &:last-child {
+ border-top-left-radius: $md-card-radius;
+ border-bottom-left-radius: $md-card-radius;
+ }
+ }
+ }
+ .mat-card {
+ .mat-card-image {
+ &:first-child {
+ border-top-left-radius: $md-card-radius;
+ border-top-right-radius: $md-card-radius;
+ }
+ }
+ .mat-card-lg-image,
+ .mat-card-md-image,
+ .mat-card-sm-image {
+ &:first-child {
+ border-top-right-radius: $md-card-radius;
+ }
+ }
+ }
}
}
diff --git a/src/platform/core/common/styles/_palette.scss b/src/platform/core/common/styles/_palette.scss
index 0dab0b72c0..44fb8767af 100644
--- a/src/platform/core/common/styles/_palette.scss
+++ b/src/platform/core/common/styles/_palette.scss
@@ -635,66 +635,3 @@ $mat-blue-grey: (
A700: $white-87-opacity,
)
);
-
-
-// Background palette for light themes.
-$mat-light-theme-background: (
- status-bar: map_get($mat-grey, 300),
- app-bar: map_get($mat-grey, 100),
- background: map_get($mat-grey, 50),
- hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
- card: white,
- dialog: white,
- disabled-button: $black-12-opacity,
- raised-button: white,
- focused-button: $black-6-opacity,
- selected-button: map_get($mat-grey, 300),
- selected-disabled-button: map_get($mat-grey, 400),
- disabled-button-toggle: map_get($mat-grey, 200),
-);
-
-// Background palette for dark themes.
-$mat-dark-theme-background: (
- status-bar: black,
- app-bar: map_get($mat-grey, 900),
- background: #303030,
- hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX
- card: map_get($mat-grey, 800),
- dialog: map_get($mat-grey, 800),
- disabled-button: $white-12-opacity,
- raised-button: map-get($mat-grey, 800),
- focused-button: $white-6-opacity,
- selected-button: map_get($mat-grey, 900),
- selected-disabled-button: map_get($mat-grey, 800),
- disabled-button-toggle: map_get($mat-grey, 1000),
-);
-
-// Foreground palette for light themes.
-$mat-light-theme-foreground: (
- base: black,
- divider: $black-12-opacity,
- dividers: $black-12-opacity,
- disabled: rgba(black, 0.38),
- disabled-button: rgba(black, 0.38),
- disabled-text: rgba(black, 0.38),
- hint-text: rgba(black, 0.38),
- secondary-text: rgba(black, 0.54),
- icon: rgba(black, 0.54),
- icons: rgba(black, 0.54),
- text: rgba(black, 0.87)
-);
-
-// Foreground palette for dark themes.
-$mat-dark-theme-foreground: (
- base: white,
- divider: $white-12-opacity,
- dividers: $white-12-opacity,
- disabled: rgba(white, 0.3),
- disabled-button: rgba(white, 0.3),
- disabled-text: rgba(white, 0.3),
- hint-text: rgba(white, 0.3),
- secondary-text: rgba(white, 0.7),
- icon: white,
- icons: white,
- text: white
-);
\ No newline at end of file
diff --git a/src/platform/core/common/styles/_theme-functions.scss b/src/platform/core/common/styles/_theme-functions.scss
index 19046d13d0..3bd6a8208a 100644
--- a/src/platform/core/common/styles/_theme-functions.scss
+++ b/src/platform/core/common/styles/_theme-functions.scss
@@ -1,44 +1,8 @@
-@import 'palette';
-
@function rem($multiplier) {
$font-size: 10px;
@return $multiplier * $font-size;
}
-// For a given hue in a palette, return the contrast color from the map of contrast palettes.
-// @param $color-map
-// @param $hue
-@function mat-contrast($palette, $hue) {
- @return map-get(map-get($palette, contrast), $hue);
-}
-
-
-// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
-// of the Material Design hues.
-// @param $color-map
-// @param $primary
-// @param $lighter
-@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {
- $result: map_merge($base-palette, (
- default: map-get($base-palette, $default),
- lighter: map-get($base-palette, $lighter),
- darker: map-get($base-palette, $darker),
- default-contrast: mat-contrast($base-palette, $default),
- lighter-contrast: mat-contrast($base-palette, $lighter),
- darker-contrast: mat-contrast($base-palette, $darker)
- ));
-
- // For each hue in the palette, add a "-contrast" color to the map.
- @each $hue, $color in $base-palette {
- $result: map_merge($result, (
- '#{$hue}-contrast': mat-contrast($base-palette, $hue)
- ));
- }
-
- @return $result;
-}
-
-
// Gets a color from a theme palette (the output of mat-palette).
// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
@@ -47,7 +11,7 @@
// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
// be treated as opacity.
// @param $opacity The alpha channel value for the color.
-@function mat-color($palette, $hue: default, $opacity: 1) {
+@function mat-color($palette, $hue: default, $opacity: null) {
// If hueKey is a number between zero and one, then it actually contains an
// opacity value, so recall this function with the default hue and that given opacity.
@if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
@@ -55,33 +19,7 @@
}
$color: map-get($palette, $hue);
- $opacity: if(opacity($color) < 1, opacity($color), $opacity);
+ $opacity: if($opacity == null, opacity($color), $opacity);
@return rgba($color, $opacity);
}
-
-
-// Creates a container object for a light theme to be given to individual component theme mixins.
-@function mat-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {
- @return (
- primary: $primary,
- accent: $accent,
- warn: $warn,
- is-dark: false,
- foreground: $mat-light-theme-foreground,
- background: $mat-light-theme-background,
- );
-}
-
-
-// Creates a container object for a dark theme to be given to individual component theme mixins.
-@function mat-dark-theme($primary, $accent, $warn: mat-palette($mat-red)) {
- @return (
- primary: $primary,
- accent: $accent,
- warn: $warn,
- is-dark: true,
- foreground: $mat-dark-theme-foreground,
- background: $mat-dark-theme-background,
- );
-}
\ No newline at end of file
diff --git a/src/platform/core/common/styles/_variables.scss b/src/platform/core/common/styles/_variables.scss
index 6bc0580026..fef76e571c 100644
--- a/src/platform/core/common/styles/_variables.scss
+++ b/src/platform/core/common/styles/_variables.scss
@@ -39,6 +39,7 @@ $app-bar-height: 64px;
// card header variables
$md-card-header-size: 40px;
+$md-card-radius: 2px;
// Icons
$icon-size: rem(2.4);
diff --git a/src/platform/core/data-table/data-table.component.html b/src/platform/core/data-table/data-table.component.html
index fca74c66fd..d59c0a8337 100644
--- a/src/platform/core/data-table/data-table.component.html
+++ b/src/platform/core/data-table/data-table.component.html
@@ -30,7 +30,7 @@
[tabIndex]="isSelectable ? 0 : -1"
[class.mat-selected]="(isClickable || isSelectable) && isRowSelected(row)"
*ngFor="let row of data; let rowIndex = index"
- (click)="handleRowClick(row, $event, rowIndex)"
+ (click)="handleRowClick(row, $event)"
(keyup)="isSelectable && _rowKeyup($event, row, rowIndex)"
(keydown.space)="blockEvent($event)"
(keydown.shift.space)="blockEvent($event)"
@@ -41,6 +41,7 @@
[state]="isRowSelected(row) ? 'checked' : 'unchecked'"
(mousedown)="disableTextSelection()"
(mouseup)="enableTextSelection()"
+ stopRowClick
(click)="select(row, $event, rowIndex)">
diff --git a/src/platform/core/data-table/data-table.component.spec.ts b/src/platform/core/data-table/data-table.component.spec.ts
index 2adbf1782e..e6cf4fb235 100644
--- a/src/platform/core/data-table/data-table.component.spec.ts
+++ b/src/platform/core/data-table/data-table.component.spec.ts
@@ -15,20 +15,21 @@ import { TdDataTableService } from './services/data-table.service';
import { CovalentDataTableModule } from './data-table.module';
import { NgModule, DebugElement } from '@angular/core';
import { MdCheckbox } from '@angular/material';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
describe('Component: DataTable', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
- BrowserAnimationsModule,
+ NoopAnimationsModule,
CovalentDataTableModule,
],
declarations: [
TdDataTableBasicTestComponent,
TdDataTableSelectableTestComponent,
TdDataTableRowClickTestComponent,
+ TdDataTableSelectableRowClickTestComponent,
],
providers: [
TdDataTableService,
@@ -330,6 +331,38 @@ describe('Component: DataTable', () => {
});
});
})));
+
+ it('should click on a row and see the rowClick event only when clicking on row',
+ async(inject([], () => {
+ let fixture: ComponentFixture = TestBed.createComponent(TdDataTableSelectableRowClickTestComponent);
+ let component: TdDataTableSelectableRowClickTestComponent = fixture.debugElement.componentInstance;
+
+ component.clickable = true;
+ component.selectable = true;
+
+ let clickEventSpy: jasmine.Spy = spyOn(component, 'clickEvent');
+ let selectEventSpy: jasmine.Spy = spyOn(component, 'selectEvent');
+
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[1].nativeElement.click();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(clickEventSpy.calls.count()).toBe(1);
+ expect(selectEventSpy.calls.count()).toBe(0);
+
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[0].nativeElement.click();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(clickEventSpy.calls.count()).toBe(1);
+ expect(selectEventSpy.calls.count()).toBe(1);
+ });
+ });
+ });
+ });
+ })));
});
});
@@ -392,3 +425,34 @@ class TdDataTableRowClickTestComponent {
/* noop */
}
}
+
+@Component({
+ template: `
+
+ `,
+})
+class TdDataTableSelectableRowClickTestComponent {
+ data: any[] = [
+ { sku: '1452-2', item: 'Pork Chops', price: 32.11 },
+ { sku: '1421-0', item: 'Prime Rib', price: 41.15 },
+ ];
+ columns: ITdDataTableColumn[] = [
+ { name: 'sku', label: 'SKU #' },
+ { name: 'item', label: 'Item name' },
+ { name: 'price', label: 'Price (US$)', numeric: true },
+ ];
+ selectable: boolean = false;
+ clickable: boolean = false;
+ clickEvent(): void {
+ /* noop */
+ }
+ selectEvent(): void {
+ /* noop */
+ }
+}
diff --git a/src/platform/core/data-table/data-table.component.ts b/src/platform/core/data-table/data-table.component.ts
index 4598af0d2b..7744985538 100644
--- a/src/platform/core/data-table/data-table.component.ts
+++ b/src/platform/core/data-table/data-table.component.ts
@@ -435,9 +435,14 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
* emits the onRowClickEvent when a row is clicked
* if clickable is true and selectable is false then select the row
*/
- handleRowClick(row: any, event: Event, currentSelected: number): void {
+ handleRowClick(row: any, event: Event): void {
if (this.isClickable) {
- this.onRowClick.emit({row: row});
+ // ignoring linting rules here because attribute it actually null or not there
+ // can't check for undefined
+ /* tslint:disable-next-line */
+ if (event.srcElement.getAttribute('stopRowClick') === null) {
+ this.onRowClick.emit({row: row});
+ }
}
}
diff --git a/src/platform/core/data-table/data-table.module.ts b/src/platform/core/data-table/data-table.module.ts
index 6897c24a14..2e5f678029 100644
--- a/src/platform/core/data-table/data-table.module.ts
+++ b/src/platform/core/data-table/data-table.module.ts
@@ -8,9 +8,10 @@ import { TdDataTableColumnComponent } from './data-table-column/data-table-colum
import { TdDataTableCellComponent } from './data-table-cell/data-table-cell.component';
import { TdDataTableRowComponent } from './data-table-row/data-table-row.component';
import { TdDataTableTableComponent } from './data-table-table/data-table-table.component';
-import { TdDataTableService } from './services/data-table.service';
import { TdDataTableTemplateDirective } from './directives/data-table-template.directive';
+import { TdDataTableService, DATA_TABLE_PROVIDER } from './services/data-table.service';
+
const TD_DATA_TABLE: Type[] = [
TdDataTableComponent,
TdDataTableTemplateDirective,
@@ -45,7 +46,7 @@ export { TdDataTableTableComponent } from './data-table-table/data-table-table.c
TD_DATA_TABLE,
],
providers: [
- TdDataTableService,
+ DATA_TABLE_PROVIDER,
],
})
export class CovalentDataTableModule {
diff --git a/src/platform/core/data-table/services/data-table.service.ts b/src/platform/core/data-table/services/data-table.service.ts
index 906b2155c3..d965d96bd4 100644
--- a/src/platform/core/data-table/services/data-table.service.ts
+++ b/src/platform/core/data-table/services/data-table.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Provider, SkipSelf, Optional } from '@angular/core';
import { TdDataTableSortingOrder, ITdDataTableColumn } from '../data-table.component';
@@ -75,3 +75,15 @@ export class TdDataTableService {
return data;
}
}
+
+export function DATA_TABLE_PROVIDER_FACTORY(
+ parent: TdDataTableService): TdDataTableService {
+ return parent || new TdDataTableService();
+}
+
+export const DATA_TABLE_PROVIDER: Provider = {
+ // If there is already a service available, use that. Otherwise, provide a new one.
+ provide: TdDataTableService,
+ deps: [[new Optional(), new SkipSelf(), TdDataTableService]],
+ useFactory: DATA_TABLE_PROVIDER_FACTORY,
+};
diff --git a/src/platform/core/dialogs/dialogs.module.ts b/src/platform/core/dialogs/dialogs.module.ts
index c42b48d416..ab5a43f29b 100644
--- a/src/platform/core/dialogs/dialogs.module.ts
+++ b/src/platform/core/dialogs/dialogs.module.ts
@@ -10,7 +10,7 @@ import { TdDialogComponent, TdDialogTitleDirective,
import { TdAlertDialogComponent } from './alert-dialog/alert-dialog.component';
import { TdConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
import { TdPromptDialogComponent } from './prompt-dialog/prompt-dialog.component';
-import { TdDialogService } from './services/dialog.service';
+import { TdDialogService, DIALOG_PROVIDER } from './services/dialog.service';
const TD_DIALOGS: Type[] = [
TdAlertDialogComponent,
@@ -47,7 +47,7 @@ export { TdDialogService, TdDialogComponent, TdDialogTitleDirective,
TD_DIALOGS,
],
providers: [
- TdDialogService,
+ DIALOG_PROVIDER,
],
entryComponents: [
TD_DIALOGS_ENTRY_COMPONENTS,
diff --git a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html
index 49e9c882c0..e82899552d 100644
--- a/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html
+++ b/src/platform/core/dialogs/prompt-dialog/prompt-dialog.component.html
@@ -7,6 +7,8 @@
+
+
+
+
+
+
+
+
+
+
+ {{item}}
+
+
+
-
-
-
-
-
- {{item}}
-
-
-
-
+
+
cancel
-
+
+
+ {{chip}}
+
+
+
+
-
-
+
+
+
+