From c06e99dc9746eca1e8e70d56497bbe1ad74e9ee9 Mon Sep 17 00:00:00 2001 From: mustafahlvc Date: Tue, 10 Oct 2017 16:37:14 +0300 Subject: [PATCH] @angular/material v2.0.0-beta.12 compability update, Lots of breaking changes, all "md" prefixes changed with "mat" due to angular material deprecation of "md", md2 package removed, its not compatible with latest material version, will be replaced with another date picker later. --- package-lock.json | 116 +++--- package.json | 27 +- .../confirm-dialog.component.html | 10 +- .../confirm-dialog.component.ts | 4 +- .../core/components/copier/copier.service.ts | 93 ++--- .../demo-sidenav/demo-sidenav.component.html | 100 ++--- .../material-color-picker.component.html | 32 +- .../material-color-picker.component.scss | 4 +- .../material-color-picker.component.ts | 2 +- .../nav-horizontal-collapse.component.html | 6 +- .../nav-horizontal-item.component.html | 4 +- .../nav-vertical-collapse.component.html | 6 +- .../nav-item/nav-vertical-item.component.html | 4 +- .../search-bar/search-bar.component.html | 10 +- .../shortcuts/shortcuts.component.html | 64 ++-- .../theme-options.component.html | 90 ++--- .../theme-options.component.scss | 5 +- .../fuse-if-on-dom.directive.ts | 2 +- .../mat-sidenav-helper.directive.ts | 99 +++++ .../mat-sidenav-helper.service.ts} | 6 +- .../md-sidenav-helper.directive.ts | 99 ----- src/app/core/modules/material.module.ts | 188 +++++----- src/app/core/modules/shared.module.ts | 17 +- .../scss/partials/_angular-material-fix.scss | 6 +- src/app/core/scss/partials/_colors.scss | 2 +- src/app/core/scss/partials/_global.scss | 2 +- src/app/core/scss/partials/_icons.scss | 2 +- src/app/core/scss/partials/_material.scss | 10 +- src/app/core/scss/partials/_page-layouts.scss | 28 +- src/app/core/scss/partials/_reset.scss | 4 +- src/app/core/services/config.service.ts | 6 +- src/app/fuse-fake-db/projects-dashboard.ts | 10 +- src/app/fuse-fake-db/scrumboard.ts | 14 +- .../apps/calendar/calendar.component.html | 42 +-- .../apps/calendar/calendar.component.scss | 2 +- .../apps/calendar/calendar.component.ts | 6 +- .../event-form/event-form.component.html | 90 ++--- .../event-form/event-form.component.ts | 6 +- .../chat/chat-start/chat-start.component.html | 4 +- .../chat/chat-start/chat-start.component.scss | 2 +- .../chat/chat-view/chat-view.component.html | 38 +- .../chat/chat-view/chat-view.component.scss | 6 +- .../content/apps/chat/chat.component.html | 18 +- .../content/apps/chat/chat.component.scss | 2 +- .../sidenavs/left/chats/chats.component.html | 62 ++-- .../sidenavs/left/chats/chats.component.scss | 2 +- .../sidenavs/left/chats/chats.component.ts | 6 +- .../sidenavs/left/user/user.component.html | 50 +-- .../sidenavs/left/user/user.component.scss | 2 +- .../right/contact/contact.component.html | 22 +- .../right/contact/contact.component.scss | 2 +- .../contact-form/contact-form.component.html | 108 +++--- .../contact-form/contact-form.component.ts | 6 +- .../contact-list/contact-list.component.html | 94 ++--- .../contact-list/contact-list.component.ts | 6 +- .../apps/contacts/contacts.component.html | 36 +- .../apps/contacts/contacts.component.scss | 1 + .../apps/contacts/contacts.component.ts | 4 +- .../selected-bar/selected-bar.component.html | 20 +- .../selected-bar/selected-bar.component.ts | 6 +- .../sidenavs/main/main.component.html | 8 +- .../dashboards/project/project.component.html | 240 ++++++------ .../dashboards/project/project.component.scss | 6 +- .../file-list/file-list.component.html | 58 +-- .../file-manager/file-manager.component.html | 36 +- .../file-manager/file-manager.component.scss | 2 +- .../sidenavs/details/details.component.html | 20 +- .../sidenavs/main/main.component.html | 22 +- .../dialogs/compose/compose.component.html | 68 ++-- .../dialogs/compose/compose.component.scss | 2 +- .../mail/dialogs/compose/compose.component.ts | 6 +- .../mail-details/mail-details.component.html | 34 +- .../mail-list-item.component.html | 18 +- .../mail/mail-list/mail-list.component.html | 4 +- .../content/apps/mail/mail.component.html | 80 ++-- .../sidenavs/main/main-sidenav.component.html | 30 +- .../sidenavs/main/main-sidenav.component.ts | 4 +- .../content/apps/scrumboard/board.model.ts | 6 +- .../board/add-list/add-list.component.html | 12 +- .../board/add-list/add-list.component.scss | 2 +- .../board/add-list/add-list.component.ts | 2 +- .../scrumboard/board/board.component.html | 30 +- .../scrumboard/board/board.component.scss | 10 +- .../apps/scrumboard/board/board.component.ts | 2 +- .../board/dialogs/card/card.component.html | 228 ++++++------ .../board/dialogs/card/card.component.scss | 20 +- .../board/dialogs/card/card.component.ts | 12 +- .../label-selector.component.html | 36 +- .../label-selector.component.ts | 2 +- .../edit-board-name.component.html | 12 +- .../edit-board-name.component.ts | 2 +- .../list/add-card/add-card.component.html | 14 +- .../list/add-card/add-card.component.scss | 4 +- .../board/list/card/card.component.html | 18 +- .../board/list/card/card.component.scss | 2 +- .../edit-list-name.component.html | 8 +- .../edit-list-name.component.ts | 2 +- .../scrumboard/board/list/list.component.html | 10 +- .../scrumboard/board/list/list.component.ts | 6 +- .../board-color-selector.component.html | 22 +- .../sidenavs/settings/settings.component.html | 34 +- .../apps/scrumboard/scrumboard.component.html | 8 +- .../apps/scrumboard/scrumboard.component.scss | 2 +- .../sidenavs/main/main-sidenav.component.html | 30 +- .../todo-details/todo-details.component.html | 88 ++--- .../todo-list-item.component.html | 48 +-- .../todo/todo-list/todo-list.component.html | 6 +- .../todo/todo-list/todo-list.component.scss | 5 + .../content/apps/todo/todo.component.html | 66 ++-- .../datatable/ngx-datatable.component.html | 14 +- .../angular-material.component.html | 12 +- .../example-viewer/example-viewer.html | 32 +- .../example-viewer/example-viewer.scss | 2 +- .../example-viewer/example-viewer.ts | 4 +- .../countdown/countdown.component.html | 8 +- .../components/hljs/hljs.component.html | 8 +- .../material-color-picker.component.html | 10 +- .../navigation/navigation.component.html | 14 +- .../price-tables/price-tables.component.html | 58 +-- .../search-bar/search-bar.component.html | 11 +- .../shortcuts/shortcuts.component.html | 8 +- .../components/widget/widget.component.html | 32 +- .../forgot-password-2.component.html | 16 +- .../forgot-password-2.component.scss | 2 +- .../forgot-password.component.html | 16 +- .../forgot-password.component.scss | 2 +- .../authentication/lock/lock.component.html | 20 +- .../authentication/lock/lock.component.scss | 4 +- .../authentication/lock/lock.component.ts | 4 +- .../login-2/login-2.component.html | 34 +- .../login-2/login-2.component.scss | 6 +- .../authentication/login/login.component.html | 34 +- .../authentication/login/login.component.scss | 4 +- .../register-2/register-2.component.html | 50 +-- .../register-2/register-2.component.scss | 6 +- .../register/register.component.html | 50 +-- .../register/register.component.scss | 4 +- .../reset-password-2.component.html | 36 +- .../reset-password-2.component.scss | 2 +- .../reset-password.component.html | 36 +- .../reset-password.component.scss | 2 +- .../coming-soon/coming-soon.component.html | 16 +- .../coming-soon/coming-soon.component.scss | 2 +- .../pages/errors/404/error-404.component.html | 2 +- .../pages/errors/500/error-500.component.ts | 2 +- .../invoices/compact/compact.component.html | 2 +- .../pages/profile/profile.component.html | 20 +- .../pages/profile/profile.component.scss | 2 +- .../profile/tabs/about/about.component.html | 16 +- .../profile/tabs/about/about.component.scss | 2 +- .../tabs/timeline/timeline.component.html | 36 +- .../tabs/timeline/timeline.component.scss | 6 +- .../pages/search/search.component.html | 20 +- .../pages/search/search.component.scss | 2 +- .../tabs/classic/classic.component.html | 36 +- .../search/tabs/table/table.component.html | 24 +- .../services/config/config.component.html | 14 +- .../splash-screen.component.html | 8 +- .../content/ui/colors/colors.component.html | 42 +-- .../content/ui/forms/forms.component.html | 88 ++--- .../helper-classes.component.html | 18 +- .../padding-margin.component.html | 8 +- .../width-height/width-height.component.html | 4 +- .../content/ui/icons/icons.component.html | 20 +- .../fullwidth-2/fullwidth-2.component.html | 4 +- .../carded/fullwidth/fullwidth.component.html | 4 +- .../left-sidenav-2.component.html | 20 +- .../left-sidenav/left-sidenav.component.html | 20 +- .../right-sidenav-2.component.html | 20 +- .../right-sidenav.component.html | 20 +- .../simple/fullwidth/fullwidth.component.html | 4 +- .../left-sidenav-2.component.html | 20 +- .../left-sidenav-3.component.html | 20 +- .../left-sidenav/left-sidenav.component.html | 20 +- .../right-sidenav-2.component.html | 20 +- .../right-sidenav-3.component.html | 20 +- .../right-sidenav.component.html | 20 +- .../simple/tabbed/tabbed.component.html | 20 +- .../blockquotes-lists.component.html | 6 +- .../tabs/headings/headings.component.html | 4 +- .../tabs/helpers/helpers.component.html | 16 +- .../inline-text-elements.component.html | 2 +- .../ui/typography/typography.component.html | 26 +- src/app/main/footer/footer.component.html | 12 +- src/app/main/main.component.html | 12 +- .../horizontal/navbar-horizontal.component.ts | 3 +- .../vertical/navbar-vertical.component.html | 8 +- .../vertical/navbar-vertical.component.scss | 9 +- .../quick-panel/quick-panel.component.html | 76 ++-- src/app/main/toolbar/toolbar.component.html | 50 +-- src/app/main/toolbar/toolbar.component.scss | 14 +- src/app/main/toolbar/toolbar.component.ts | 6 +- .../autocomplete-display-example.css | 8 +- .../autocomplete-display-example.html | 16 +- .../autocomplete-display-example.ts | 72 ++-- .../autocomplete-filter-example.css | 8 +- .../autocomplete-filter-example.html | 16 +- .../autocomplete-filter-example.ts | 49 +-- .../autocomplete-overview-example.css | 8 +- .../autocomplete-overview-example.html | 33 +- .../autocomplete-overview-example.ts | 91 ++--- .../autocomplete-simple-example.css | 8 +- .../autocomplete-simple-example.html | 16 +- .../autocomplete-simple-example.ts | 25 +- .../button-overview-example.html | 2 +- .../button-overview-example.ts | 10 +- .../button-toggle-exclusive-example.css | 2 +- .../button-toggle-exclusive-example.html | 28 +- .../button-toggle-exclusive-example.ts | 12 +- .../button-toggle-overview-example.html | 2 +- .../button-toggle-overview-example.ts | 10 +- .../button-types/button-types-example.css | 6 +- .../button-types/button-types-example.html | 90 ++--- .../button-types/button-types-example.ts | 12 +- .../card-fancy/card-fancy-example.css | 6 +- .../card-fancy/card-fancy-example.html | 38 +- .../card-fancy/card-fancy-example.ts | 12 +- .../card-overview/card-overview-example.html | 2 +- .../card-overview/card-overview-example.ts | 10 +- .../cdk-table-basic-example.css | 34 +- .../cdk-table-basic-example.html | 58 +-- .../cdk-table-basic-example.ts | 141 ++++--- .../checkbox-configurable-example.css | 12 +- .../checkbox-configurable-example.html | 68 ++-- .../checkbox-configurable-example.ts | 19 +- .../checkbox-overview-example.html | 2 +- .../checkbox-overview-example.ts | 10 +- .../chips-input/chips-input-example.css | 2 +- .../chips-input/chips-input-example.html | 28 +- .../chips-input/chips-input-example.ts | 74 ++-- .../chips-overview-example.html | 12 +- .../chips-overview/chips-overview-example.ts | 12 +- .../chips-stacked/chips-stacked-example.css | 4 +- .../chips-stacked/chips-stacked-example.html | 14 +- .../chips-stacked/chips-stacked-example.ts | 33 +- .../datepicker-api-example.html | 10 +- .../datepicker-api/datepicker-api-example.ts | 11 +- .../datepicker-filter-example.html | 10 +- .../datepicker-filter-example.ts | 21 +- .../datepicker-min-max-example.html | 10 +- .../datepicker-min-max-example.ts | 15 +- .../datepicker-overview-example.html | 10 +- .../datepicker-overview-example.ts | 12 +- .../datepicker-start-view-example.html | 10 +- .../datepicker-start-view-example.ts | 13 +- .../datepicker-touch-example.html | 10 +- .../datepicker-touch-example.ts | 11 +- .../dialog-content-example-dialog.html | 50 +-- .../dialog-content-example.html | 2 +- .../dialog-content/dialog-content-example.ts | 40 +- .../dialog-data-example-dialog.html | 31 +- .../dialog-data/dialog-data-example.html | 2 +- .../dialog-data/dialog-data-example.ts | 41 ++- .../dialog-elements-example-dialog.html | 8 +- .../dialog-elements-example.html | 2 +- .../dialog-elements-example.ts | 31 +- .../dialog-overview-example-dialog.html | 18 +- .../dialog-overview-example.html | 22 +- .../dialog-overview-example.ts | 66 ++-- .../expansion-overview-example.html | 36 +- .../expansion-overview-example.ts | 10 +- .../expansion-steps-example.css | 8 +- .../expansion-steps-example.html | 118 +++--- .../expansion-steps-example.ts | 34 +- .../grid-list-dynamic-example.html | 18 +- .../grid-list-dynamic-example.ts | 37 +- .../grid-list-overview-example.css | 4 +- .../grid-list-overview-example.html | 12 +- .../grid-list-overview-example.ts | 12 +- .../icon-overview/icon-overview-example.html | 2 +- .../icon-overview/icon-overview-example.ts | 10 +- .../icon-svg/icon-svg-example.html | 2 +- .../icon-svg/icon-svg-example.ts | 24 +- .../input-clearable-example.css | 2 +- .../input-clearable-example.html | 12 +- .../input-clearable-example.ts | 13 +- .../input-errors/input-errors-example.css | 8 +- .../input-errors/input-errors-example.html | 18 +- .../input-errors/input-errors-example.ts | 20 +- .../input-form/input-form-example.css | 8 +- .../input-form/input-form-example.html | 76 ++-- .../input-form/input-form-example.ts | 12 +- .../input-hint/input-hint-example.css | 8 +- .../input-hint/input-hint-example.html | 12 +- .../input-hint/input-hint-example.ts | 12 +- .../input-overview/input-overview-example.css | 8 +- .../input-overview-example.html | 6 +- .../input-overview/input-overview-example.ts | 12 +- .../input-prefix-suffix-example.css | 8 +- .../input-prefix-suffix-example.html | 12 +- .../input-prefix-suffix-example.ts | 12 +- .../list-overview/list-overview-example.html | 10 +- .../list-overview/list-overview-example.ts | 10 +- .../list-sections/list-sections-example.css | 2 +- .../list-sections/list-sections-example.html | 30 +- .../list-sections/list-sections-example.ts | 59 +-- .../list-selection-example.html | 12 +- .../list-selection/list-selection-example.ts | 13 +- .../menu-icons/menu-icons-example.html | 32 +- .../menu-icons/menu-icons-example.ts | 12 +- .../menu-overview/menu-overview-example.html | 10 +- .../menu-overview/menu-overview-example.ts | 12 +- .../nested-menu/nested-menu-example.html | 82 ++--- .../nested-menu/nested-menu-example.ts | 12 +- .../paginator-configurable-example.html | 46 +-- .../paginator-configurable-example.ts | 30 +- .../paginator-overview-example.html | 8 +- .../paginator-overview-example.ts | 10 +- .../progress-bar-configurable-example.css | 12 +- .../progress-bar-configurable-example.html | 116 +++--- .../progress-bar-configurable-example.ts | 19 +- .../progress-bar-overview-example.html | 2 +- .../progress-bar-overview-example.ts | 10 +- .../progress-spinner-configurable-example.css | 12 +- ...progress-spinner-configurable-example.html | 90 ++--- .../progress-spinner-configurable-example.ts | 17 +- .../progress-spinner-overview-example.html | 2 +- .../progress-spinner-overview-example.ts | 10 +- .../radio-ng-model/radio-ng-model-example.css | 8 +- .../radio-ng-model-example.html | 10 +- .../radio-ng-model/radio-ng-model-example.ts | 25 +- .../radio-overview-example.html | 8 +- .../radio-overview/radio-overview-example.ts | 10 +- .../select-form/select-form-example.html | 12 +- .../select-form/select-form-example.ts | 27 +- .../select-overview-example.html | 10 +- .../select-overview-example.ts | 25 +- .../sidenav-fab/sidenav-fab-example.css | 26 +- .../sidenav-fab/sidenav-fab-example.html | 58 +-- .../sidenav-fab/sidenav-fab-example.ts | 16 +- .../sidenav-overview-example.css | 16 +- .../sidenav-overview-example.html | 20 +- .../sidenav-overview-example.ts | 12 +- .../slide-toggle-configurable-example.css | 12 +- .../slide-toggle-configurable-example.html | 78 ++-- .../slide-toggle-configurable-example.ts | 17 +- .../slide-toggle-forms-example.css | 6 +- .../slide-toggle-forms-example.html | 16 +- .../slide-toggle-forms-example.ts | 37 +- .../slide-toggle-overview-example.html | 2 +- .../slide-toggle-overview-example.ts | 10 +- .../slider-configurable-example.css | 16 +- .../slider-configurable-example.html | 110 +++--- .../slider-configurable-example.ts | 53 +-- .../slider-overview-example.css | 4 +- .../slider-overview-example.html | 2 +- .../slider-overview-example.ts | 12 +- .../snack-bar-component-example-snack.css | 2 +- .../snack-bar-component-example-snack.html | 2 +- .../snack-bar-component-example.html | 4 +- .../snack-bar-component-example.ts | 37 +- .../snack-bar-overview-example.html | 14 +- .../snack-bar-overview-example.ts | 26 +- .../sort-overview/sort-overview-example.css | 2 +- .../sort-overview/sort-overview-example.html | 30 +- .../sort-overview/sort-overview-example.ts | 111 ++++-- .../stepper-overview-example.html | 67 ++-- .../stepper-overview-example.ts | 40 +- .../table-basic/table-basic-example.css | 12 +- .../table-basic/table-basic-example.html | 52 +-- .../table-basic/table-basic-example.ts | 166 +++++++-- .../table-filtering-example.css | 28 +- .../table-filtering-example.html | 62 ++-- .../table-filtering-example.ts | 192 ++++++---- .../table-http/table-http-example.css | 62 ++-- .../table-http/table-http-example.html | 80 ++-- .../table-http/table-http-example.ts | 179 ++++----- .../table-overview/table-overview-example.css | 50 +-- .../table-overview-example.html | 120 +++--- .../table-overview/table-overview-example.ts | 344 +++++++++++------- .../table-pagination-example.css | 20 +- .../table-pagination-example.html | 64 ++-- .../table-pagination-example.ts | 163 +++++---- .../table-sorting/table-sorting-example.css | 22 +- .../table-sorting/table-sorting-example.html | 52 +-- .../table-sorting/table-sorting-example.ts | 206 ++++++----- .../tabs-overview/tabs-overview-example.html | 8 +- .../tabs-overview/tabs-overview-example.ts | 10 +- .../tabs-template-label-example.css | 4 +- .../tabs-template-label-example.html | 96 ++--- .../tabs-template-label-example.ts | 12 +- .../toolbar-multirow-example.css | 4 +- .../toolbar-multirow-example.html | 28 +- .../toolbar-multirow-example.ts | 12 +- .../toolbar-overview-example.html | 2 +- .../toolbar-overview-example.ts | 10 +- .../tooltip-overview-example.html | 2 +- .../tooltip-overview-example.ts | 10 +- .../tooltip-position-example.css | 8 +- .../tooltip-position-example.html | 20 +- .../tooltip-position-example.ts | 13 +- src/environments/environment.hmr.ts | 2 +- src/environments/environment.prod.ts | 2 +- src/environments/environment.ts | 2 +- 394 files changed, 5513 insertions(+), 4945 deletions(-) create mode 100644 src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts rename src/app/core/directives/{md-sidenav-helper/md-sidenav-helper.service.ts => mat-sidenav-helper/mat-sidenav-helper.service.ts} (70%) delete mode 100644 src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts diff --git a/package-lock.json b/package-lock.json index 4fb35baf..2828f048 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,17 +43,17 @@ } }, "@angular/animations": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.3.tgz", - "integrity": "sha1-OWxKW/sihH+eRYJFuplfnBMMDPM=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.4.tgz", + "integrity": "sha1-ovk1NgQ0er4V35gpIFiEL1Lwi8I=", "requires": { "tslib": "1.7.1" } }, "@angular/cdk": { - "version": "2.0.0-beta.11", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.11.tgz", - "integrity": "sha512-sbOqPoC439SDmpLiMq2XjidMMCJ6ofToDew4IXd9ne0jLSd0gGU20tTrRHf79HMTmlAySP7PBOq4Wv1eOFu/8A==", + "version": "2.0.0-beta.12", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.12.tgz", + "integrity": "sha1-OiQ8tiuT9OA5EgunD5ANyeI1Yi4=", "requires": { "tslib": "1.7.1" } @@ -124,32 +124,41 @@ } }, "@angular/common": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.3.tgz", - "integrity": "sha1-+SrGiwK+xfDm02A6hDKU3JbJYHQ=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.4.tgz", + "integrity": "sha1-rgqBiqoMaj8JAee4C9lOHCLrk2U=", "requires": { "tslib": "1.7.1" } }, "@angular/compiler": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.3.tgz", - "integrity": "sha1-jwEWPa19s0CEl9mdOHVUtrGFrWY=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.4.tgz", + "integrity": "sha1-Mm6wAp2aNUGqyhJN75rcUcNvK0E=", "requires": { "tslib": "1.7.1" } }, "@angular/compiler-cli": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.3.tgz", - "integrity": "sha1-GDr4HxQRhrjWYLBkKVktQLdUCko=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.4.tgz", + "integrity": "sha1-BjCApJfZF1OWglBQIixxfaGE9s8=", "dev": true, "requires": { - "@angular/tsc-wrapped": "4.4.3", + "@angular/tsc-wrapped": "4.4.4", "minimist": "1.2.0", "reflect-metadata": "0.1.10" }, "dependencies": { + "@angular/tsc-wrapped": { + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.4.tgz", + "integrity": "sha1-mEGCHlVha4JsoWAlD+heFfx0/8M=", + "dev": true, + "requires": { + "tsickle": "0.21.6" + } + }, "minimist": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", @@ -159,9 +168,9 @@ } }, "@angular/core": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.3.tgz", - "integrity": "sha1-5x0rB76qy6tIq39R1OIobqXXDhU=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.4.tgz", + "integrity": "sha1-vTfs9UFY+XSJmWyThr0iL4CjL1w=", "requires": { "tslib": "1.7.1" } @@ -175,68 +184,59 @@ } }, "@angular/forms": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.3.tgz", - "integrity": "sha1-JbQburWL8dqHJBHIUXwQ18U3PY4=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.4.tgz", + "integrity": "sha1-TbN5BQm2sQ8duKfBt/Uhh89kz9Q=", "requires": { "tslib": "1.7.1" } }, "@angular/http": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.3.tgz", - "integrity": "sha1-tVftJBRKrMRLE2zUd+hNL1eAiQM=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.4.tgz", + "integrity": "sha1-Zn+vYWu2JBaOr65u6S5euiOp0fI=", "requires": { "tslib": "1.7.1" } }, "@angular/language-service": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.3.tgz", - "integrity": "sha1-RScBGllJZ6OW7/PAXtFb1MhtUbc=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.4.tgz", + "integrity": "sha1-D2hgUuOVDBkSjxO3Qp/BS6/mm9Q=", "dev": true }, "@angular/material": { - "version": "2.0.0-beta.11", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.11.tgz", - "integrity": "sha512-k4eyil3n8aHqqS3Fq4N77XvF3bcXA2Ttgf9ujDZwXmMd2NlR4XL+LJrguPLwNSQ6i3EYT+ovE2p4XUu2nkHVeQ==", + "version": "2.0.0-beta.12", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.12.tgz", + "integrity": "sha1-cbbQt7AhiR5dDjaIwdS9eMdFf1g=", "requires": { "tslib": "1.7.1" } }, "@angular/platform-browser": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.3.tgz", - "integrity": "sha1-I/mkW9Pcf0TZeHf7+OYDLez8ncs=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.4.tgz", + "integrity": "sha1-o4mOLnup2E/6DUcUTGlxF5x1ruY=", "requires": { "tslib": "1.7.1" } }, "@angular/platform-browser-dynamic": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.3.tgz", - "integrity": "sha1-5B3dglJDJ3UxDqtZQM3Y3wYY8IQ=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.4.tgz", + "integrity": "sha1-w8nrhUpShVagcFQSeTLlJ/qTLhQ=", "requires": { "tslib": "1.7.1" } }, "@angular/router": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.3.tgz", - "integrity": "sha1-JsyUd1o4YJRq6vHC6PYPTUTpCZE=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.4.tgz", + "integrity": "sha1-e+ORCW6EPLPgT58F0dZaiN+bx88=", "requires": { "tslib": "1.7.1" } }, - "@angular/tsc-wrapped": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.3.tgz", - "integrity": "sha1-LT84IQodTbA/yG3PHglYErhc0Rk=", - "dev": true, - "requires": { - "tsickle": "0.21.6" - } - }, "@angularclass/hmr": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/@angularclass/hmr/-/hmr-2.1.3.tgz", @@ -7882,6 +7882,15 @@ "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "dev": true }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + }, "string-width": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", @@ -7909,15 +7918,6 @@ } } }, - "string_decoder": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", - "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", - "dev": true, - "requires": { - "safe-buffer": "5.1.1" - } - }, "stringstream": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", diff --git a/package.json b/package.json index 5bf77528..624f43d3 100644 --- a/package.json +++ b/package.json @@ -15,18 +15,18 @@ }, "private": true, "dependencies": { - "@angular/animations": "4.4.3", - "@angular/cdk": "2.0.0-beta.11", - "@angular/common": "4.4.3", - "@angular/compiler": "4.4.3", - "@angular/core": "4.4.3", + "@angular/animations": "4.4.4", + "@angular/cdk": "2.0.0-beta.12", + "@angular/common": "4.4.4", + "@angular/compiler": "4.4.4", + "@angular/core": "4.4.4", "@angular/flex-layout": "2.0.0-beta.9", - "@angular/forms": "4.4.3", - "@angular/http": "4.4.3", - "@angular/material": "2.0.0-beta.11", - "@angular/platform-browser": "4.4.3", - "@angular/platform-browser-dynamic": "4.4.3", - "@angular/router": "4.4.3", + "@angular/forms": "4.4.4", + "@angular/http": "4.4.4", + "@angular/material": "2.0.0-beta.12", + "@angular/platform-browser": "4.4.4", + "@angular/platform-browser-dynamic": "4.4.4", + "@angular/router": "4.4.4", "@swimlane/ngx-charts": "6.0.2", "@swimlane/ngx-datatable": "9.3.1", "@swimlane/ngx-dnd": "3.0.0", @@ -39,7 +39,6 @@ "hammerjs": "2.0.8", "highlight.js": "9.12.0", "intl": "1.2.5", - "md2": "0.0.28", "moment": "2.18.1", "ngx-color-picker": "4.3.1", "ngx-cookie-service": "1.0.7", @@ -51,8 +50,8 @@ }, "devDependencies": { "@angular/cli": "1.4.2", - "@angular/compiler-cli": "4.4.3", - "@angular/language-service": "4.4.3", + "@angular/compiler-cli": "4.4.4", + "@angular/language-service": "4.4.4", "@angularclass/hmr": "2.1.3", "@ngtools/webpack": "1.7.1", "@types/jasmine": "2.6.0", diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.html b/src/app/core/components/confirm-dialog/confirm-dialog.component.html index d7d60191..0f971757 100644 --- a/src/app/core/components/confirm-dialog/confirm-dialog.component.html +++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.html @@ -1,6 +1,6 @@ -

Confirm

-
{{confirmMessage}}
-
- - +

Confirm

+
{{confirmMessage}}
+
+ +
diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.ts b/src/app/core/components/confirm-dialog/confirm-dialog.component.ts index 08bb4600..24e22d35 100644 --- a/src/app/core/components/confirm-dialog/confirm-dialog.component.ts +++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { MdDialogRef } from '@angular/material'; +import { MatDialogRef } from '@angular/material'; @Component({ selector : 'fuse-confirm-dialog', @@ -10,7 +10,7 @@ export class FuseConfirmDialogComponent implements OnInit { public confirmMessage: string; - constructor(public dialogRef: MdDialogRef) + constructor(public dialogRef: MatDialogRef) { } diff --git a/src/app/core/components/copier/copier.service.ts b/src/app/core/components/copier/copier.service.ts index 42ce0483..03227fc4 100644 --- a/src/app/core/components/copier/copier.service.ts +++ b/src/app/core/components/copier/copier.service.ts @@ -6,55 +6,60 @@ * * Both released under MIT license - © Zeno Rocha */ -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; @Injectable() -export class CopierService { +export class CopierService +{ - private textarea: HTMLTextAreaElement; + private textarea: HTMLTextAreaElement; - /** Copy the text value to the clipboard. */ - copyText(text: string): boolean { - this.createTextareaAndSelect(text); + /** Copy the text value to the clipboard. */ + copyText(text: string): boolean + { + this.createTextareaAndSelect(text); - const copySuccessful = document.execCommand('copy'); - this.removeFake(); + const copySuccessful = document.execCommand('copy'); + this.removeFake(); - return copySuccessful; - } - - /** - * Creates a hidden textarea element, sets its value from `text` property, - * and makes a selection on it. - */ - private createTextareaAndSelect(text: string) { - // Create a fake element to hold the contents to copy - this.textarea = document.createElement('textarea'); - - // Prevent zooming on iOS - this.textarea.style.fontSize = '12pt'; - - // Hide the element - this.textarea.classList.add('cdk-visually-hidden'); - - // Move element to the same position vertically - const yPosition = window.pageYOffset || document.documentElement.scrollTop; - this.textarea.style.top = yPosition + 'px'; - - this.textarea.setAttribute('readonly', ''); - this.textarea.value = text; - - document.body.appendChild(this.textarea); - - this.textarea.select(); - this.textarea.setSelectionRange(0, this.textarea.value.length); - } - - /** Remove the text area from the DOM. */ - private removeFake() { - if (this.textarea) { - document.body.removeChild(this.textarea); - this.textarea = null; + return copySuccessful; + } + + /** + * Creates a hidden textarea element, sets its value from `text` property, + * and makes a selection on it. + */ + private createTextareaAndSelect(text: string) + { + // Create a fake element to hold the contents to copy + this.textarea = document.createElement('textarea'); + + // Prevent zooming on iOS + this.textarea.style.fontSize = '12pt'; + + // Hide the element + this.textarea.classList.add('cdk-visually-hidden'); + + // Move element to the same position vertically + const yPosition = window.pageYOffset || document.documentElement.scrollTop; + this.textarea.style.top = yPosition + 'px'; + + this.textarea.setAttribute('readonly', ''); + this.textarea.value = text; + + document.body.appendChild(this.textarea); + + this.textarea.select(); + this.textarea.setSelectionRange(0, this.textarea.value.length); + } + + /** Remove the text area from the DOM. */ + private removeFake() + { + if ( this.textarea ) + { + document.body.removeChild(this.textarea); + this.textarea = null; + } } - } } diff --git a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html index 069cf67a..9c1b47a4 100644 --- a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html +++ b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html @@ -1,100 +1,100 @@
- -

Sidenav Demo

+ +

Sidenav Demo

- + Sidenav Item 1 - + - + - + Sidenav Item 2 - + - + - + Sidenav Item 3 - + - + - + Sidenav Item 4 - + - + - + Sidenav Item 5 - + - + - + Sidenav Item 6 - + - + - + Sidenav Item 7 - + - + - + Sidenav Item 8 - + - + - + Sidenav Item 9 - + - + - + Sidenav Item 10 - + - + - + Sidenav Item 11 - + - + - + Sidenav Item 12 - + - + - + Sidenav Item 13 - + - + - + Sidenav Item 14 - + - + - + Sidenav Item 15 - + - + - + Sidenav Item 16 - + - +
diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.html b/src/app/core/components/material-color-picker/material-color-picker.component.html index e305b812..a1209174 100644 --- a/src/app/core/components/material-color-picker/material-color-picker.component.html +++ b/src/app/core/components/material-color-picker/material-color-picker.component.html @@ -1,23 +1,23 @@ - - + -
- @@ -28,11 +28,11 @@ Select Color -
@@ -47,10 +47,10 @@ fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
+ fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple> {{color.key}} @@ -67,16 +67,16 @@
+ fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple> {{hue}} - check + check
- + diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.scss b/src/app/core/components/material-color-picker/material-color-picker.component.scss index fc5b4fab..9a4647bb 100644 --- a/src/app/core/components/material-color-picker/material-color-picker.component.scss +++ b/src/app/core/components/material-color-picker/material-color-picker.component.scss @@ -11,7 +11,7 @@ overflow: hidden; min-height: 258px; height: 308px; - background-color: #f7f7f7; + background-color: #F7F7F7; .view { position: absolute; @@ -39,7 +39,7 @@ font-size: 10px; } - md-icon { + mat-icon { position: absolute; top: 2px; right: 2px; diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.ts b/src/app/core/components/material-color-picker/material-color-picker.component.ts index 786ce470..317c829d 100644 --- a/src/app/core/components/material-color-picker/material-color-picker.component.ts +++ b/src/app/core/components/material-color-picker/material-color-picker.component.ts @@ -129,7 +129,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges { this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue]; this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]; - this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg'; + this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg'; } else { diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html index 9fcef7d6..4712628d 100644 --- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html +++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html @@ -1,7 +1,7 @@ - - {{item.icon}} + + {{item.icon}} {{item.title}} - keyboard_arrow_right + keyboard_arrow_right
diff --git a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html index 54045a83..c3c95b34 100644 --- a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html +++ b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html @@ -1,6 +1,6 @@ - - {{item.icon}} + {{item.icon}} {{item.title}} {{item.badge.title}} \ No newline at end of file diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html index a55711f1..5a255b6f 100644 --- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html +++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html @@ -1,7 +1,7 @@ - - {{item.icon}} + + {{item.icon}} {{item.title}} - keyboard_arrow_right + keyboard_arrow_right
diff --git a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html index 2767e8dd..443dd326 100644 --- a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html +++ b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html @@ -1,6 +1,6 @@ - - {{item.icon}} + {{item.icon}} {{item.title}} {{item.badge.title}} diff --git a/src/app/core/components/search-bar/search-bar.component.html b/src/app/core/components/search-bar/search-bar.component.html index a2ce08c3..c78502a7 100644 --- a/src/app/core/components/search-bar/search-bar.component.html +++ b/src/app/core/components/search-bar/search-bar.component.html @@ -1,20 +1,20 @@
-
diff --git a/src/app/core/components/shortcuts/shortcuts.component.html b/src/app/core/components/shortcuts/shortcuts.component.html index ad98a338..109418ca 100644 --- a/src/app/core/components/shortcuts/shortcuts.component.html +++ b/src/app/core/components/shortcuts/shortcuts.component.html @@ -2,8 +2,8 @@
-
@@ -16,8 +16,8 @@
- - {{shortcutItem.icon}} + + {{shortcutItem.icon}} {{shortcutItem.title.substr(0, 1).toUpperCase()}} @@ -25,64 +25,64 @@
-
-
- + - - - + + + - - + + - +
- {{shortcutItem.icon}} + {{shortcutItem.icon}} {{shortcutItem.title.substr(0, 1).toUpperCase()}} -

{{shortcutItem.title}}

- star +

{{shortcutItem.title}}

+ star
- - + +

No shortcuts yet!

- - + + - - + +
- {{navigationItem.icon}} + {{navigationItem.icon}} {{navigationItem.title.substr(0, 1).toUpperCase()}} -

{{navigationItem.title}}

- star +

{{navigationItem.title}}

+ star
- - - + + +
diff --git a/src/app/core/components/theme-options/theme-options.component.html b/src/app/core/components/theme-options/theme-options.component.html index e49e995b..9cc7b003 100644 --- a/src/app/core/components/theme-options/theme-options.component.html +++ b/src/app/core/components/theme-options/theme-options.component.html @@ -1,50 +1,50 @@ -
-
+
-

Navigation:

- - Top - Left - Right - None - + + Top + Left + Right + None +

Toolbar:

- - Below - Above - None - + + Below + Above + None +

Footer:

- - Below - Above - None - + + Below + Above + None +

Layout Mode:

- - Boxed - Fullwidth - + + Boxed + Fullwidth + - +

Colors:

@@ -69,29 +69,29 @@
- +

Router Animation:

- - + + None - - + + Slide up - - + + Slide down - - + + Slide right - - + + Slide left - - + + Fade in - - + +
diff --git a/src/app/core/components/theme-options/theme-options.component.scss b/src/app/core/components/theme-options/theme-options.component.scss index f01c54f4..bc116a3c 100644 --- a/src/app/core/components/theme-options/theme-options.component.scss +++ b/src/app/core/components/theme-options/theme-options.component.scss @@ -14,6 +14,7 @@ display: block; right: 0; top: 160px; + z-index: 998; &.bar-closed .theme-options-panel { display: none; @@ -48,7 +49,7 @@ color: rgba(0, 0, 0, 0.54); } - .mat-divider{ + .mat-divider { display: block !important; width: 100%; margin: 24px 0 16px 0; @@ -102,7 +103,7 @@ opacity: .75; z-index: 998; - md-icon { + mat-icon { animation: rotating 3s linear infinite; } diff --git a/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts b/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts index b7042968..403bce13 100644 --- a/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts +++ b/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts @@ -21,7 +21,7 @@ export class FuseIfOnDomDirective implements AfterContentChecked { setTimeout(() => { this.viewContainer.createEmbeddedView(this.templateRef); - }, 350); + }, 300); this.isCreated = true; } else if ( this.isCreated && !document.body.contains(this.element.nativeElement) ) diff --git a/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts new file mode 100644 index 00000000..55161597 --- /dev/null +++ b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts @@ -0,0 +1,99 @@ +import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core'; +import { MatSidenav } from '@angular/material'; +import { FuseMatSidenavHelperService } from 'app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service'; +import { FuseMatchMedia } from '../../services/match-media.service'; +import { ObservableMedia } from '@angular/flex-layout'; +import { Subscription } from 'rxjs/Subscription'; + +@Directive({ + selector: '[fuseMatSidenavHelper]' +}) +export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy +{ + matchMediaSubscription: Subscription; + + @HostBinding('class.mat-is-locked-open') isLockedOpen = true; + @HostBinding('class.mat-stop-transition') stopTransition = true; + + @Input('fuseMatSidenavHelper') id: string; + @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string; + + constructor( + private fuseMatSidenavService: FuseMatSidenavHelperService, + private fuseMatchMedia: FuseMatchMedia, + private observableMedia: ObservableMedia, + private matSidenav: MatSidenav + ) + { + } + + ngOnInit() + { + this.fuseMatSidenavService.setSidenav(this.id, this.matSidenav); + + if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) ) + { + setTimeout(() => { + this.isLockedOpen = true; + this.matSidenav.mode = 'side'; + this.matSidenav.open(); + }); + this.stopTransition = false; + } + else + { + setTimeout(() => { + this.isLockedOpen = false; + this.matSidenav.mode = 'over'; + this.matSidenav.close(); + }); + + setTimeout(() => { + this.stopTransition = false; + }, 3000); + } + + this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => { + if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) ) + { + setTimeout(() => { + this.isLockedOpen = true; + this.matSidenav.mode = 'side'; + this.matSidenav.open(); + }); + } + else + { + setTimeout(() => { + this.isLockedOpen = false; + this.matSidenav.mode = 'over'; + this.matSidenav.close(); + }); + } + }); + + } + + ngOnDestroy() + { + this.matchMediaSubscription.unsubscribe(); + } +} + +@Directive({ + selector: '[fuseMatSidenavToggler]' +}) +export class FuseMatSidenavTogglerDirective +{ + @Input('fuseMatSidenavToggler') id; + + constructor(private fuseMatSidenavService: FuseMatSidenavHelperService) + { + } + + @HostListener('click') + onClick() + { + this.fuseMatSidenavService.getSidenav(this.id).toggle(); + } +} diff --git a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts similarity index 70% rename from src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts rename to src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts index d928f46e..748d9480 100644 --- a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts +++ b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts @@ -1,10 +1,10 @@ import { Injectable } from '@angular/core'; -import { MdSidenav } from '@angular/material'; +import { MatSidenav } from '@angular/material'; @Injectable() -export class FuseMdSidenavHelperService +export class FuseMatSidenavHelperService { - sidenavInstances: MdSidenav[]; + sidenavInstances: MatSidenav[]; constructor() { diff --git a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts b/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts deleted file mode 100644 index f0ad7ab4..00000000 --- a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core'; -import { MdSidenav } from '@angular/material'; -import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service'; -import { FuseMatchMedia } from '../../services/match-media.service'; -import { ObservableMedia } from '@angular/flex-layout'; -import { Subscription } from 'rxjs/Subscription'; - -@Directive({ - selector: '[fuseMdSidenavHelper]' -}) -export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy -{ - matchMediaSubscription: Subscription; - - @HostBinding('class.md-is-locked-open') isLockedOpen = true; - @HostBinding('class.md-stop-transition') stopTransition = true; - - @Input('fuseMdSidenavHelper') id: string; - @Input('md-is-locked-open') mdIsLockedOpenBreakpoint: string; - - constructor( - private fuseMdSidenavService: FuseMdSidenavHelperService, - private fuseMatchMedia: FuseMatchMedia, - private observableMedia: ObservableMedia, - private mdSidenav: MdSidenav - ) - { - } - - ngOnInit() - { - this.fuseMdSidenavService.setSidenav(this.id, this.mdSidenav); - - if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) ) - { - setTimeout(() => { - this.isLockedOpen = true; - this.mdSidenav.mode = 'side'; - this.mdSidenav.open(); - }); - this.stopTransition = false; - } - else - { - setTimeout(() => { - this.isLockedOpen = false; - this.mdSidenav.mode = 'over'; - this.mdSidenav.close(); - }); - - setTimeout(() => { - this.stopTransition = false; - }, 3000); - } - - this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => { - if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) ) - { - setTimeout(() => { - this.isLockedOpen = true; - this.mdSidenav.mode = 'side'; - this.mdSidenav.open(); - }); - } - else - { - setTimeout(() => { - this.isLockedOpen = false; - this.mdSidenav.mode = 'over'; - this.mdSidenav.close(); - }); - } - }); - - } - - ngOnDestroy() - { - this.matchMediaSubscription.unsubscribe(); - } -} - -@Directive({ - selector: '[fuseMdSidenavToggler]' -}) -export class FuseMdSidenavTogglerDirective -{ - @Input('fuseMdSidenavToggler') id; - - constructor(private fuseMdSidenavService: FuseMdSidenavHelperService) - { - } - - @HostListener('click') - onClick() - { - this.fuseMdSidenavService.getSidenav(this.id).toggle(); - } -} diff --git a/src/app/core/modules/material.module.ts b/src/app/core/modules/material.module.ts index f4a3d895..36d357c6 100644 --- a/src/app/core/modules/material.module.ts +++ b/src/app/core/modules/material.module.ts @@ -1,106 +1,108 @@ import { NgModule } from '@angular/core'; import { - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCheckboxModule, - MdToolbarModule, - MdTooltipModule, - MdCardModule, - MdChipsModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdNativeDateModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdRippleModule, - MdSelectModule, - MdSidenavModule, - MdSliderModule, - MdSlideToggleModule, - MdSnackBarModule, - MdStepperModule, - MdSortModule, - MdTableModule, - MdTabsModule + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCheckboxModule, + MatToolbarModule, + MatTooltipModule, + MatCardModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatExpansionModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatStepperModule } from '@angular/material'; import { CdkTableModule } from '@angular/cdk/table'; @NgModule({ imports: [ - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCardModule, - MdCheckboxModule, - MdChipsModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdNativeDateModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdRippleModule, - MdSelectModule, - MdSidenavModule, - MdSliderModule, - MdSlideToggleModule, - MdSnackBarModule, - MdStepperModule, - MdSortModule, - MdTableModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatExpansionModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatStepperModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, CdkTableModule ], exports: [ - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCardModule, - MdCheckboxModule, - MdChipsModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdNativeDateModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdRippleModule, - MdSelectModule, - MdSidenavModule, - MdSliderModule, - MdSlideToggleModule, - MdSnackBarModule, - MdStepperModule, - MdSortModule, - MdTableModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatExpansionModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatStepperModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, CdkTableModule ] }) diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index 472dbfbe..fe2787f2 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -8,25 +8,24 @@ import { ColorPickerModule } from 'ngx-color-picker'; import { NgxDnDModule } from '@swimlane/ngx-dnd'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; -import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive'; +import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive'; import { FusePipesModule } from '../pipes/pipes.module'; import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component'; import { FuseCountdownComponent } from '../components/countdown/countdown.component'; import { FuseMatchMedia } from '../services/match-media.service'; import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service'; -import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service'; +import { FuseMatSidenavHelperService } from '../directives/mat-sidenav-helper/mat-sidenav-helper.service'; import { FuseHljsComponent } from '../components/hljs/hljs.component'; import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive'; import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component'; -import { Md2Module } from 'md2'; import { CookieService } from 'ngx-cookie-service'; import { MarkdownModule } from 'angular2-markdown'; @NgModule({ declarations : [ - FuseMdSidenavHelperDirective, - FuseMdSidenavTogglerDirective, + FuseMatSidenavHelperDirective, + FuseMatSidenavTogglerDirective, FuseConfirmDialogComponent, FuseCountdownComponent, FuseHljsComponent, @@ -44,7 +43,6 @@ import { MarkdownModule } from 'angular2-markdown'; ColorPickerModule, NgxDnDModule, NgxDatatableModule, - Md2Module, MarkdownModule ], exports : [ @@ -52,8 +50,8 @@ import { MarkdownModule } from 'angular2-markdown'; MaterialModule, CommonModule, FormsModule, - FuseMdSidenavHelperDirective, - FuseMdSidenavTogglerDirective, + FuseMatSidenavHelperDirective, + FuseMatSidenavTogglerDirective, FusePipesModule, FuseCountdownComponent, FuseHljsComponent, @@ -64,7 +62,6 @@ import { MarkdownModule } from 'angular2-markdown'; NgxDatatableModule, FuseIfOnDomDirective, FuseMaterialColorPickerComponent, - Md2Module, MarkdownModule ], entryComponents: [ @@ -74,7 +71,7 @@ import { MarkdownModule } from 'angular2-markdown'; CookieService, FuseMatchMedia, FuseNavbarVerticalService, - FuseMdSidenavHelperService + FuseMatSidenavHelperService ] }) diff --git a/src/app/core/scss/partials/_angular-material-fix.scss b/src/app/core/scss/partials/_angular-material-fix.scss index 168656a3..45cc656e 100644 --- a/src/app/core/scss/partials/_angular-material-fix.scss +++ b/src/app/core/scss/partials/_angular-material-fix.scss @@ -7,11 +7,11 @@ } // Fix: "Sidenav opening with animations for the first time" -md-sidenav-container { +mat-sidenav-container { - md-sidenav { + mat-sidenav { - &[md-is-locked-open].md-stop-transition { + &[mat-is-locked-open].mat-stop-transition { transition: none !important; transform: translate3d(0, 0, 0) !important; opacity: 0; diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss index 7d61345f..327e0c4f 100644 --- a/src/app/core/scss/partials/_colors.scss +++ b/src/app/core/scss/partials/_colors.scss @@ -164,7 +164,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400 background-color: $color !important; } - .md-#{$colorName}#{$hue}-bg { + .mat-#{$colorName}#{$hue}-bg { background-color: $color !important; color: $contrastColor !important; diff --git a/src/app/core/scss/partials/_global.scss b/src/app/core/scss/partials/_global.scss index dfdf4f60..f7b93621 100644 --- a/src/app/core/scss/partials/_global.scss +++ b/src/app/core/scss/partials/_global.scss @@ -1,6 +1,6 @@ body { - > md-sidenav-container { + > mat-sidenav-container { height: 100%; } } diff --git a/src/app/core/scss/partials/_icons.scss b/src/app/core/scss/partials/_icons.scss index 44f18524..43281c59 100644 --- a/src/app/core/scss/partials/_icons.scss +++ b/src/app/core/scss/partials/_icons.scss @@ -1,5 +1,5 @@ i, -md-icon { +mat-icon { color: rgba(0, 0, 0, 0.54); font-size: 24px; width: 24px; diff --git a/src/app/core/scss/partials/_material.scss b/src/app/core/scss/partials/_material.scss index bb91fdc9..3232602b 100644 --- a/src/app/core/scss/partials/_material.scss +++ b/src/app/core/scss/partials/_material.scss @@ -46,14 +46,14 @@ margin-top: 0; margin-bottom: 0; } - md-icon.status { + mat-icon.status { position: absolute; top: 28px; left: 28px; } } -md-icon.status { +mat-icon.status { border-radius: 50%; &.online { @@ -116,7 +116,7 @@ md-icon.status { max-height: 48px; height: 48px; - md-icon { + mat-icon { margin: 0 16px 0 0; } @@ -142,7 +142,7 @@ md-icon.status { } } - md-divider { + mat-divider { margin: 8px 0; } } @@ -234,7 +234,7 @@ md-icon.status { } } - md-divider { + mat-divider { margin: 16px 32px; } diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss index 51595b0a..48eab98a 100644 --- a/src/app/core/scss/partials/_page-layouts.scss +++ b/src/app/core/scss/partials/_page-layouts.scss @@ -112,12 +112,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); // Single scroll &.single-scroll { - > md-sidenav-container { + > mat-sidenav-container { flex: 1 0 auto; } } - > md-sidenav-container { + > mat-sidenav-container { display: flex; flex: 1; background: none; @@ -136,7 +136,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); overflow-y: hidden; @include mat-elevation(7); - &.md-is-locked-open { + &.mat-is-locked-open { background: none; box-shadow: none; } @@ -216,11 +216,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); &.left-sidenav { // Sidenav - > md-sidenav-container { + > mat-sidenav-container { .sidenav { - &.md-is-locked-open { + &.mat-is-locked-open { ~ .mat-sidenav-content, ~ .mat-drawer-content { @@ -238,12 +238,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); &.right-sidenav { // Sidenav - > md-sidenav-container { + > mat-sidenav-container { .sidenav { order: 999; - &.md-is-locked-open { + &.mat-is-locked-open { ~ .mat-sidenav-content, ~ .mat-drawer-content { @@ -295,7 +295,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); // Single scroll &.single-scroll { - > md-sidenav-container { + > mat-sidenav-container { flex: 1 0 auto; > .mat-sidenav-content, @@ -309,7 +309,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); // Inner Sidenav &.inner-sidenav { - > md-sidenav-container { + > mat-sidenav-container { flex: 1; .sidenav { @@ -338,7 +338,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); } } - > md-sidenav-container { + > mat-sidenav-container { display: flex; flex-direction: column; //flex-direction: row; @@ -354,7 +354,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); z-index: 51; @include mat-elevation(7); - &.md-is-locked-open { + &.mat-is-locked-open { width: 220px; min-width: 220px; max-width: 220px; @@ -440,7 +440,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); &.left-sidenav, &.right-sidenav { - > md-sidenav-container { + > mat-sidenav-container { flex: 1 0 auto; } } @@ -458,7 +458,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); &.left-sidenav, &.right-sidenav { - > md-sidenav-container { + > mat-sidenav-container { flex: 1 0 auto !important; > .mat-sidenav-content, @@ -483,7 +483,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); &.left-sidenav, &.right-sidenav { - > md-sidenav-container { + > mat-sidenav-container { > .mat-sidenav-content, > .mat-drawer-content { diff --git a/src/app/core/scss/partials/_reset.scss b/src/app/core/scss/partials/_reset.scss index 1c42a8ac..3b5ea1fa 100644 --- a/src/app/core/scss/partials/_reset.scss +++ b/src/app/core/scss/partials/_reset.scss @@ -28,7 +28,7 @@ html, body { } // Reset non angular-material input's default browser/os styles -*:not(md-input-container) { +*:not(mat-input-container) { > input { border: none; @@ -55,7 +55,7 @@ html, body { } } -*:not(md-input-container) { +*:not(mat-input-container) { > input[type="button"], > button, diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts index 49c9fe4d..2d2998f0 100644 --- a/src/app/core/services/config.service.ts +++ b/src/app/core/services/config.service.ts @@ -28,9 +28,9 @@ export class FuseConfigService mode : 'fullwidth' // 'boxed', 'fullwidth' }, colorClasses : { - toolbar: 'md-white-500-bg', - navbar : 'md-fuse-dark-500-bg', - footer : 'md-fuse-dark-700-bg' + toolbar: 'mat-white-500-bg', + navbar : 'mat-fuse-dark-500-bg', + footer : 'mat-fuse-dark-700-bg' }, customScrollbars: true, routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft diff --git a/src/app/fuse-fake-db/projects-dashboard.ts b/src/app/fuse-fake-db/projects-dashboard.ts index 80aa31c9..1e520440 100644 --- a/src/app/fuse-fake-db/projects-dashboard.ts +++ b/src/app/fuse-fake-db/projects-dashboard.ts @@ -1622,7 +1622,7 @@ export class ProjectsDashboardDb [ { 'value' : 'Wireframing', - 'classes': 'md-primary-bg', + 'classes': 'mat-primary-bg', 'icon' : '' }, { @@ -1654,7 +1654,7 @@ export class ProjectsDashboardDb [ { 'value' : 'Design', - 'classes': 'md-green-bg', + 'classes': 'mat-green-bg', 'icon' : '' }, { @@ -1686,7 +1686,7 @@ export class ProjectsDashboardDb [ { 'value' : 'Coding', - 'classes': 'md-red-bg', + 'classes': 'mat-red-bg', 'icon' : '' }, { @@ -1718,7 +1718,7 @@ export class ProjectsDashboardDb [ { 'value' : 'Marketing', - 'classes': 'md-accent-bg', + 'classes': 'mat-accent-bg', 'icon' : '' }, { @@ -1750,7 +1750,7 @@ export class ProjectsDashboardDb [ { 'value' : 'Extra', - 'classes': 'md-orange-bg', + 'classes': 'mat-orange-bg', 'icon' : '' }, { diff --git a/src/app/fuse-fake-db/scrumboard.ts b/src/app/fuse-fake-db/scrumboard.ts index aac7d95b..012e2fb9 100644 --- a/src/app/fuse-fake-db/scrumboard.ts +++ b/src/app/fuse-fake-db/scrumboard.ts @@ -565,22 +565,22 @@ export class ScrumboardFakeDb { 'id' : '26022e4129ad3a5sc28b36cd', 'name' : 'High Priority', - 'color': 'md-red-500-bg' + 'color': 'mat-red-500-bg' }, { 'id' : '56027e4119ad3a5dc28b36cd', 'name' : 'Design', - 'color': 'md-orange-400-bg' + 'color': 'mat-orange-400-bg' }, { 'id' : '5640635e19ad3a5dc21416b2', 'name' : 'App', - 'color': 'md-blue-600-bg' + 'color': 'mat-blue-600-bg' }, { 'id' : '6540635g19ad3s5dc31412b2', 'name' : 'Feature', - 'color': 'md-green-400-bg' + 'color': 'mat-green-400-bg' } ] }, @@ -769,17 +769,17 @@ export class ScrumboardFakeDb { 'id' : '56027e4119ad3a5dc28b36cd', 'name' : 'Design', - 'color': 'md-red-500-bg' + 'color': 'mat-red-500-bg' }, { 'id' : '5640635e19ad3a5dc21416b2', 'name' : 'App', - 'color': 'md-blue-500-bg' + 'color': 'mat-blue-500-bg' }, { 'id' : '6540635g19ad3s5dc31412b2', 'name' : 'Feature', - 'color': 'md-green-400-bg' + 'color': 'mat-green-400-bg' } ] } diff --git a/src/app/main/content/apps/calendar/calendar.component.html b/src/app/main/content/apps/calendar/calendar.component.html index 0e04352d..ae61d8de 100644 --- a/src/app/main/content/apps/calendar/calendar.component.html +++ b/src/app/main/content/apps/calendar/calendar.component.html @@ -9,7 +9,7 @@ @@ -53,35 +53,35 @@
-
{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
-
-
diff --git a/src/app/main/content/apps/calendar/calendar.component.scss b/src/app/main/content/apps/calendar/calendar.component.scss index 19500ca3..e59de032 100644 --- a/src/app/main/content/apps/calendar/calendar.component.scss +++ b/src/app/main/content/apps/calendar/calendar.component.scss @@ -303,7 +303,7 @@ z-index: 10; } - md-icon { + mat-icon { color: #FFFFFF; } } diff --git a/src/app/main/content/apps/calendar/calendar.component.ts b/src/app/main/content/apps/calendar/calendar.component.ts index 8c424350..7d136ab8 100644 --- a/src/app/main/content/apps/calendar/calendar.component.ts +++ b/src/app/main/content/apps/calendar/calendar.component.ts @@ -1,7 +1,7 @@ import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns'; import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs/Subject'; -import { MdDialog, MdDialogRef } from '@angular/material'; +import { MatDialog, MatDialogRef } from '@angular/material'; import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component'; import { FormGroup } from '@angular/forms'; import { CalendarEventModel } from './event.model'; @@ -38,12 +38,12 @@ export class FuseCalendarComponent implements OnInit dialogRef: any; - confirmDialogRef: MdDialogRef; + confirmDialogRef: MatDialogRef; selectedDay: any; constructor( - public dialog: MdDialog, + public dialog: MatDialog, public calendarService: CalendarService ) { diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.html b/src/app/main/content/apps/calendar/event-form/event-form.component.html index 2bdc588a..4fd38076 100644 --- a/src/app/main/content/apps/calendar/event-form/event-form.component.html +++ b/src/app/main/content/apps/calendar/event-form/event-form.component.html @@ -1,40 +1,40 @@
- +
{{dialogTitle}} -
- + -
+
- - + - +
- All Day - +
- - + - - - + + - +
- - - - - + + + + + - - - + + +
- - - - - + + + + + - - - + + +
- - + - + - + - - +
-
+
diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.ts b/src/app/main/content/apps/calendar/event-form/event-form.component.ts index af0add84..9dfc5240 100644 --- a/src/app/main/content/apps/calendar/event-form/event-form.component.ts +++ b/src/app/main/content/apps/calendar/event-form/event-form.component.ts @@ -1,5 +1,5 @@ import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; -import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; import { CalendarEvent } from 'angular-calendar'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { CalendarEventModel } from '../event.model'; @@ -22,8 +22,8 @@ export class FuseCalendarEventFormDialogComponent implements OnInit presetColors = MatColors.presets; constructor( - public dialogRef: MdDialogRef, - @Inject(MD_DIALOG_DATA) private data: any, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) private data: any, private formBuilder: FormBuilder ) { diff --git a/src/app/main/content/apps/chat/chat-start/chat-start.component.html b/src/app/main/content/apps/chat/chat-start/chat-start.component.html index 7d7a5e46..77c6eb9e 100644 --- a/src/app/main/content/apps/chat/chat-start/chat-start.component.html +++ b/src/app/main/content/apps/chat/chat-start/chat-start.component.html @@ -3,7 +3,7 @@ @@ -11,7 +11,7 @@ Select contact to start the chat!.. - diff --git a/src/app/main/content/apps/chat/chat-start/chat-start.component.scss b/src/app/main/content/apps/chat/chat-start/chat-start.component.scss index 7934fd4b..5c1f5133 100644 --- a/src/app/main/content/apps/chat/chat-start/chat-start.component.scss +++ b/src/app/main/content/apps/chat/chat-start/chat-start.component.scss @@ -19,7 +19,7 @@ line-height: 160px; } - md-icon { + mat-icon { color: mat-color($accent); } } diff --git a/src/app/main/content/apps/chat/chat-view/chat-view.component.html b/src/app/main/content/apps/chat/chat-view/chat-view.component.html index 3e818c87..7b49732a 100644 --- a/src/app/main/content/apps/chat/chat-view/chat-view.component.html +++ b/src/app/main/content/apps/chat/chat-view/chat-view.component.html @@ -2,23 +2,23 @@
- +
-
- chat + chat
+ fuseMatSidenavToggler="chat-right-sidenav" (click)="selectContact()">
@@ -26,9 +26,9 @@ class="avatar" alt="{{contact.name}}"/> - - + +
@@ -40,20 +40,20 @@
- - - - +
- + @@ -98,13 +98,13 @@ fxLayout="row" fxLayoutAlign="start center"> - - - + - diff --git a/src/app/main/content/apps/chat/chat-view/chat-view.component.scss b/src/app/main/content/apps/chat/chat-view/chat-view.component.scss index bb255c29..15151e61 100644 --- a/src/app/main/content/apps/chat/chat-view/chat-view.component.scss +++ b/src/app/main/content/apps/chat/chat-view/chat-view.component.scss @@ -107,7 +107,7 @@ .reply-form { - md-input-container { + mat-form-field { margin: 0; padding-right: 16px; @@ -120,12 +120,12 @@ } } - .md-errors-spacer { + .mat-errors-spacer { display: none; } } - .md-button { + .mat-button { margin: 0; } } diff --git a/src/app/main/content/apps/chat/chat.component.html b/src/app/main/content/apps/chat/chat.component.html index b97a448d..c3922d6b 100644 --- a/src/app/main/content/apps/chat/chat.component.html +++ b/src/app/main/content/apps/chat/chat.component.html @@ -1,7 +1,7 @@
-
+
@@ -10,13 +10,13 @@
- + - + - + @@ -26,13 +26,13 @@ - + - + - +
diff --git a/src/app/main/content/apps/chat/chat.component.scss b/src/app/main/content/apps/chat/chat.component.scss index 2d483473..f4234a3f 100644 --- a/src/app/main/content/apps/chat/chat.component.scss +++ b/src/app/main/content/apps/chat/chat.component.scss @@ -37,7 +37,7 @@ max-width: 100%; } - md-sidenav { + mat-sidenav { display: flex; flex-direction: column; width: 400px; diff --git a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html index c788af9e..af3a7af4 100644 --- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html +++ b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html @@ -1,7 +1,7 @@
- +
@@ -12,75 +12,75 @@ {{user.name}} - + - + - - - - - +
- - - - - +
- +
- search + search @@ -88,10 +88,10 @@
- + - +
@@ -106,11 +106,11 @@
-
+
Chats
-
@@ -146,19 +146,19 @@
-
+
Contacts
-
- + {{user.name}}
{{user.name}}
- + - +
@@ -32,47 +32,47 @@
- +
- - - + - + - +
- + Online
- + - +
- + Away
- + - +
- + Do not disturb
- + - +
- + Offline
- - + +
- +
diff --git a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss index d591906b..514d3c39 100644 --- a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss +++ b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss @@ -5,7 +5,7 @@ flex: 1; flex-direction: column; - md-toolbar { + mat-toolbar { background-color: mat-color($accent); color: map-get($accent, default-contrast); diff --git a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html index bd3c06ec..2aadbfca 100644 --- a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html +++ b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html @@ -2,31 +2,31 @@
- +
Contact Info
-
- + {{contact.name}}
{{contact.name}}
- + - +
@@ -34,14 +34,14 @@
- + - - - + - +
diff --git a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss index d591906b..514d3c39 100644 --- a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss +++ b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss @@ -5,7 +5,7 @@ flex: 1; flex-direction: column; - md-toolbar { + mat-toolbar { background-color: mat-color($accent); color: map-get($accent, default-contrast); diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.html b/src/app/main/content/apps/contacts/contact-form/contact-form.component.html index 66ba7464..d0bb4b12 100644 --- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.html +++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.html @@ -1,104 +1,104 @@
- +
{{dialogTitle}} -
- +
{{contact.name}}
- - + + -
+
- account_circle - - - + account_circle + + +
- - - - + + + +
- star - - - + star + + +
- phone - - - + phone + + +
- email - - - + email + + +
- domain - - - + domain + + +
- work - - - + work + + +
- - - - - + + + + +
- home - - - + home + + +
- note - - - + note + + +
-
+
diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts b/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts index 7124e272..517b3cf4 100644 --- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts +++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts @@ -1,5 +1,5 @@ import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; -import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; import { CalendarEvent } from 'angular-calendar'; import { FormBuilder, FormGroup } from '@angular/forms'; import 'rxjs/Rx'; @@ -21,8 +21,8 @@ export class FuseContactsContactFormDialogComponent implements OnInit contact: Contact; constructor( - public dialogRef: MdDialogRef, - @Inject(MD_DIALOG_DATA) private data: any, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) private data: any, private formBuilder: FormBuilder ) { diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.html b/src/app/main/content/apps/contacts/contact-list/contact-list.component.html index efc084d0..232b5629 100644 --- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.html +++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.html @@ -1,106 +1,106 @@ - + - - - - - + + + + + - - + + - + - Name - + Name +

{{contact.name}} {{contact.lastName}}

- + - Email - + Email + - + - Phone - + Phone +

{{contact.phone}}

- + - Job title - + Job title +

{{contact.jobTitle}}

- + - Company - + Company +

{{contact.company}}

- + - - + +
- - - - - +
- + - - - - + + + + diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts index 671554a7..4a5f524d 100644 --- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts +++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { ContactsService } from '../contacts.service'; import { Observable } from 'rxjs/Observable'; import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component'; -import { MdDialog, MdDialogRef } from '@angular/material'; +import { MatDialog, MatDialogRef } from '@angular/material'; import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component'; import { FormGroup } from '@angular/forms'; import { DataSource } from '@angular/cdk/collections'; @@ -27,11 +27,11 @@ export class FuseContactsContactListComponent implements OnInit dialogRef: any; - confirmDialogRef: MdDialogRef; + confirmDialogRef: MatDialogRef; constructor( private contactsService: ContactsService, - public dialog: MdDialog + public dialog: MatDialog ) { this.contactsService.onContactsChanged.subscribe(contacts => { diff --git a/src/app/main/content/apps/contacts/contacts.component.html b/src/app/main/content/apps/contacts/contacts.component.html index 7dbf22c5..3df02bd6 100644 --- a/src/app/main/content/apps/contacts/contacts.component.html +++ b/src/app/main/content/apps/contacts/contacts.component.html @@ -1,20 +1,20 @@
-
- @@ -24,11 +24,11 @@
- - - + + +
@@ -36,25 +36,25 @@ - + - + - + - +
-
+
@@ -64,13 +64,13 @@
- +
- diff --git a/src/app/main/content/apps/contacts/contacts.component.scss b/src/app/main/content/apps/contacts/contacts.component.scss index 4662a5d2..1f364d96 100644 --- a/src/app/main/content/apps/contacts/contacts.component.scss +++ b/src/app/main/content/apps/contacts/contacts.component.scss @@ -4,6 +4,7 @@ overflow: hidden; } } + #add-contact-button { position: absolute; bottom: 12px; diff --git a/src/app/main/content/apps/contacts/contacts.component.ts b/src/app/main/content/apps/contacts/contacts.component.ts index 381bc742..e38eb903 100644 --- a/src/app/main/content/apps/contacts/contacts.component.ts +++ b/src/app/main/content/apps/contacts/contacts.component.ts @@ -3,7 +3,7 @@ import { ContactsService } from './contacts.service'; import { fuseAnimations } from '../../../../core/animations'; import { FormControl, FormGroup } from '@angular/forms'; import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component'; -import { MdDialog } from '@angular/material'; +import { MatDialog } from '@angular/material'; @Component({ selector : 'fuse-contacts', @@ -20,7 +20,7 @@ export class FuseContactsComponent implements OnInit constructor( private contactsService: ContactsService, - public dialog: MdDialog + public dialog: MatDialog ) { this.searchInput = new FormControl(''); diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html index 4087740d..f0e542d9 100644 --- a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html +++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html @@ -1,8 +1,8 @@
-
@@ -15,19 +15,19 @@ selected - - - - - + + + +
-
diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts index f3053c66..a3ec2f28 100644 --- a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts +++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { ContactsService } from '../contacts.service'; -import { MdDialog, MdDialogRef } from '@angular/material'; +import { MatDialog, MatDialogRef } from '@angular/material'; import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component'; @Component({ @@ -13,11 +13,11 @@ export class FuseContactsSelectedBarComponent implements OnInit selectedContacts: string[]; hasSelectedContacts: boolean; isIndeterminate: boolean; - confirmDialogRef: MdDialogRef; + confirmDialogRef: MatDialogRef; constructor( private contactsService: ContactsService, - public dialog: MdDialog + public dialog: MatDialog ) { this.contactsService.onSelectedContactsChanged diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.html b/src/app/main/content/apps/contacts/sidenavs/main/main.component.html index 0b2af02d..7d25084c 100644 --- a/src/app/main/content/apps/contacts/sidenavs/main/main.component.html +++ b/src/app/main/content/apps/contacts/sidenavs/main/main.component.html @@ -1,6 +1,6 @@
-
+
@@ -18,19 +18,19 @@
- + All Contacts
- +
Freequently contacted
- +
Starred Contacts
diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html index 6dc003d4..75ceccab 100644 --- a/src/app/main/content/apps/dashboards/project/project.component.html +++ b/src/app/main/content/apps/dashboards/project/project.component.html @@ -1,19 +1,19 @@
- +
-
+
Welcome back, John! -
@@ -21,15 +21,15 @@
{{selectedProject.name}}
- - - - +
@@ -37,9 +37,9 @@
- + - +
@@ -47,18 +47,18 @@ -
+
- - + + {{range.value}} - - + + -
@@ -78,10 +78,10 @@ -
-
@@ -97,12 +97,12 @@ -
+
{{widgets.widget2.title}}
-
@@ -121,10 +121,10 @@ -
-
@@ -140,12 +140,12 @@ -
+
{{widgets.widget3.title}}
-
@@ -164,10 +164,10 @@ -
-
@@ -183,12 +183,12 @@ -
+
{{widgets.widget4.title}}
-
@@ -206,10 +206,10 @@ -
-
@@ -226,14 +226,14 @@ -
+
{{widgets.widget5.title}}
-
@@ -393,9 +393,9 @@ - + - +
@@ -404,12 +404,12 @@ -
+
{{widgets.widget8.title}}
- +
-
+
{{widgets.widget9.title}}
- - + + {{range.value}} - - + +
@@ -549,7 +549,7 @@ -
+
@@ -572,7 +572,7 @@ {{cell.value}} - {{cell.icon}} + {{cell.icon}} @@ -588,9 +588,9 @@
- + - +
@@ -599,7 +599,7 @@ -
+
{{widgets.widget11.title}}
@@ -608,70 +608,70 @@
- + - - + + - + - Name - + Name +

{{contact.name}} {{contact.lastName}}

- + - Position - + Position +

{{contact.position}}

- + - Office - + Office +

{{contact.office}}

- + - Email - + Email + - + - Phone - + Phone +

{{contact.phone}}

- + - - - - + + + +
@@ -681,8 +681,8 @@
- - + +
@@ -691,7 +691,7 @@ - +
@@ -709,15 +709,15 @@
{{dateNow | date: 'EEEE, h:m:ss'}}
- - - - +
@@ -735,7 +735,7 @@
- +
@@ -751,28 +751,28 @@
- place + place {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
- - - - +
- + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}} @@ -783,7 +783,7 @@
- + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}} @@ -791,12 +791,12 @@
- + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}
- + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}
@@ -806,7 +806,7 @@ *ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days"> {{day.name}}
- + {{day.temp[widgets.weatherWidget.tempUnit]}} ° {{widgets.weatherWidget.tempUnit}} @@ -814,7 +814,7 @@
- +
@@ -826,9 +826,9 @@
- + - +
diff --git a/src/app/main/content/apps/dashboards/project/project.component.scss b/src/app/main/content/apps/dashboards/project/project.component.scss index 4cd2735d..ad0d5dda 100644 --- a/src/app/main/content/apps/dashboards/project/project.component.scss +++ b/src/app/main/content/apps/dashboards/project/project.component.scss @@ -1,6 +1,6 @@ #dashboard-project { - md-sidenav-container { + mat-sidenav-container { .center { @@ -23,7 +23,7 @@ border-radius: 0; background: rgba(0, 0, 0, 0.12); - md-icon { + mat-icon { color: #FFFFFF; } } @@ -32,7 +32,7 @@ > .content { flex: 1; - md-tab-group { + mat-tab-group { height: 100%; .mat-tab-body-wrapper { diff --git a/src/app/main/content/apps/file-manager/file-list/file-list.component.html b/src/app/main/content/apps/file-manager/file-list/file-list.component.html index b98db1fa..5e793c0f 100644 --- a/src/app/main/content/apps/file-manager/file-list/file-list.component.html +++ b/src/app/main/content/apps/file-manager/file-list/file-list.component.html @@ -1,60 +1,60 @@ - + - - - - + + + + - Name - {{row.name}} + Name + {{row.name}} - Type - {{row.type}} + Type + {{row.type}} - Owner - {{row.owner}} + Owner + {{row.owner}} - Size - {{row.size === '' ? '-': row.size}} + Size + {{row.size === '' ? '-': row.size}} - Modified - {{row.modified}} + Modified + {{row.modified}} - - - - + - - + - - + + diff --git a/src/app/main/content/apps/file-manager/file-manager.component.html b/src/app/main/content/apps/file-manager/file-manager.component.html index f49416be..364f978d 100644 --- a/src/app/main/content/apps/file-manager/file-manager.component.html +++ b/src/app/main/content/apps/file-manager/file-manager.component.html @@ -1,33 +1,33 @@
- + - + - +
-
+
-
-
@@ -38,7 +38,7 @@ *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">
{{path}} - chevron_right + chevron_right
@@ -46,12 +46,12 @@
-
@@ -60,7 +60,7 @@ -
+
@@ -69,11 +69,11 @@ - + - + - +
diff --git a/src/app/main/content/apps/file-manager/file-manager.component.scss b/src/app/main/content/apps/file-manager/file-manager.component.scss index 73462f07..7148980a 100644 --- a/src/app/main/content/apps/file-manager/file-manager.component.scss +++ b/src/app/main/content/apps/file-manager/file-manager.component.scss @@ -2,7 +2,7 @@ #file-manager { - md-sidenav-container { + mat-sidenav-container { .sidenav { width: 320px !important; diff --git a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html b/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html index 9c4b4cf7..58a0f95c 100644 --- a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html +++ b/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html @@ -1,18 +1,18 @@ -
+
- - -
@@ -27,17 +27,17 @@ -
+
- +
- Available Offline + Available Offline
Info
diff --git a/src/app/main/content/apps/file-manager/sidenavs/main/main.component.html b/src/app/main/content/apps/file-manager/sidenavs/main/main.component.html index 26021601..0e17eb64 100644 --- a/src/app/main/content/apps/file-manager/sidenavs/main/main.component.html +++ b/src/app/main/content/apps/file-manager/sidenavs/main/main.component.html @@ -2,7 +2,7 @@
@@ -15,36 +15,36 @@
- - folder + + folder My Files
- - star + + star
Starred
- - folder_shared + + folder_shared
Sharred with me
- - access_time + + access_time
Recent
- - not_interested + + not_interested
Offline
diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.html b/src/app/main/content/apps/mail/dialogs/compose/compose.component.html index ac423a74..26e46f24 100644 --- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.html +++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.html @@ -1,62 +1,62 @@
- +
New Message -
- + -
+
- - + - + - - + - + - - + - + - - + - + - - + - + - - - +
@@ -66,8 +66,8 @@ (12 Kb)
-
@@ -77,17 +77,17 @@ (350 Kb)
-
-
+
-
-
diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss b/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss index c9487a7e..87d41f50 100644 --- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss +++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss @@ -5,7 +5,7 @@ .compose-form { - .mat-input-container { + .mat-form-field { width: 100%; } diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts b/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts index 647cabdd..25b0ed21 100644 --- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts +++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts @@ -1,5 +1,5 @@ import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; -import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; import { FormControl, FormGroup } from '@angular/forms'; @Component({ @@ -13,8 +13,8 @@ export class FuseMailComposeDialogComponent implements OnInit composeForm: FormGroup; constructor( - public dialogRef: MdDialogRef, - @Inject(MD_DIALOG_DATA) private data: any + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) private data: any ) { this.composeForm = this.createComposeForm(); diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.html b/src/app/main/content/apps/mail/mail-details/mail-details.component.html index ee29da61..c85a005f 100644 --- a/src/app/main/content/apps/mail/mail-details/mail-details.component.html +++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.html @@ -1,5 +1,5 @@
- email + email Select a message to read
@@ -21,14 +21,14 @@
- -
@@ -84,27 +84,27 @@
- - - - - - +
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html index 1f5b486e..2ed29aab 100644 --- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html +++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html @@ -1,7 +1,7 @@
- +
@@ -11,7 +11,7 @@ {{mail.from?.name}}
{{mail.from?.name[0]}}
{{mail.from?.name}} - attachment + attachment
@@ -20,15 +20,15 @@ diff --git a/src/app/main/content/apps/mail/mail-list/mail-list.component.html b/src/app/main/content/apps/mail/mail-list/mail-list.component.html index 467fac48..4fbf9b80 100644 --- a/src/app/main/content/apps/mail/mail-list/mail-list.component.html +++ b/src/app/main/content/apps/mail/mail-list/mail-list.component.html @@ -1,9 +1,9 @@ -
+
There are no messages!
- diff --git a/src/app/main/content/apps/mail/mail.component.html b/src/app/main/content/apps/mail/mail.component.html index fd95af52..2ade9fd3 100644 --- a/src/app/main/content/apps/mail/mail.component.html +++ b/src/app/main/content/apps/mail/mail.component.html @@ -1,16 +1,16 @@
-
+
- + - + - + @@ -21,14 +21,14 @@
- -
- search +
+ search
@@ -37,57 +37,57 @@ -
+
- + - - - - - - - - - - - + + + + + + + + + +
- - - - - + - - - - +
-
@@ -109,6 +109,6 @@
- +
diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html index a00fbb05..01dd3013 100644 --- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html +++ b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html @@ -1,20 +1,20 @@
+ class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
@@ -24,7 +24,7 @@
- @@ -12,11 +12,11 @@ - -
diff --git a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.scss b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.scss index 9f53dafc..72c4d609 100644 --- a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.scss +++ b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.scss @@ -11,7 +11,7 @@ margin: 0; width: 100%; - md-icon { + mat-icon { border-radius: 50%; height: 40px; width: 40px; diff --git a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts index 0d7f6713..0af6c819 100644 --- a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts +++ b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core'; +import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ diff --git a/src/app/main/content/apps/scrumboard/board/board.component.html b/src/app/main/content/apps/scrumboard/board/board.component.html index 1bb4f21c..3b954971 100644 --- a/src/app/main/content/apps/scrumboard/board/board.component.html +++ b/src/app/main/content/apps/scrumboard/board/board.component.html @@ -1,31 +1,31 @@ - +
-
+
-
-
- remove_red_eye + remove_red_eye @@ -37,9 +37,9 @@
-
@@ -50,10 +50,10 @@
-
+
-
@@ -80,8 +80,8 @@
- + - + - + diff --git a/src/app/main/content/apps/scrumboard/board/board.component.scss b/src/app/main/content/apps/scrumboard/board/board.component.scss index edb67fc6..f0030971 100644 --- a/src/app/main/content/apps/scrumboard/board/board.component.scss +++ b/src/app/main/content/apps/scrumboard/board/board.component.scss @@ -2,19 +2,19 @@ :host { - md-sidenav-container { + mat-sidenav-container { width: 100%; height: 100%; - md-sidenav { + mat-sidenav { width: 320px !important; min-width: 320px !important; max-width: 320px !important; } #board { - flex-direction: column; display: flex; + flex-direction: column !important; height: 100%; > .header { @@ -38,7 +38,7 @@ .editable-buttons { - md-icon { + mat-icon { color: #FFFFFF !important; } } @@ -46,7 +46,7 @@ .right-side { - > .md-button:last-child { + > .mat-button:last-child { margin-right: 0; } } diff --git a/src/app/main/content/apps/scrumboard/board/board.component.ts b/src/app/main/content/apps/scrumboard/board/board.component.ts index b9e4e5bc..91c9ec7a 100644 --- a/src/app/main/content/apps/scrumboard/board/board.component.ts +++ b/src/app/main/content/apps/scrumboard/board/board.component.ts @@ -10,7 +10,7 @@ import { fuseAnimations } from '../../../../../core/animations'; selector : 'fuse-scrumboard-board', templateUrl: './board.component.html', styleUrls : ['./board.component.scss'], - animations : fuseAnimations + animations : fuseAnimations }) export class FuseScrumboardBoardComponent implements OnInit, OnDestroy { diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html index 2b7ca5d4..f62a7053 100644 --- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html +++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html @@ -1,5 +1,5 @@
- +
@@ -8,123 +8,123 @@
- - - - + + + - +
- - + - +
- - +
- +

{{ member.name }}

- +
- +
-
- - +
- - - + + + - +
- +
- - - - +
-
- + -
+
@@ -132,7 +132,7 @@
{{board.name}} - chevron_right + chevron_right {{list.name}}
@@ -140,10 +140,10 @@
- + -
@@ -152,20 +152,20 @@
- remove_red_eye + remove_red_eye
- - - + + +
- - - + + +
@@ -178,36 +178,36 @@
- label + label Labels
- - + + {{board.labels|getById:labelId:'name'}} - close - - + close + +
- supervisor_account + supervisor_account Members
- - + + - close - - + [matTooltip]="board.members | getById:memberId:'name'"> + close + +
@@ -219,7 +219,7 @@
- attachment + attachment Attachments
@@ -239,29 +239,29 @@
{{item.name}} - star - + star +
{{item.time}}
- - - - - +
@@ -279,9 +279,9 @@
- @@ -297,21 +297,21 @@
- check_box + check_box {{checklist.name}}
- - - - +
@@ -324,9 +324,9 @@ {{checklist.checkItemsChecked}} / {{checklist.checkItems.length}} - - + +
@@ -334,17 +334,17 @@
- - - - - + + + + +
-
@@ -354,14 +354,14 @@ fxLayout="row" fxLayoutAlign="start center">
- add + add - - - + + +
-
@@ -15,13 +15,13 @@
- + {{label.name}} - + -
@@ -31,15 +31,15 @@
Edit Label
-
- - - + + +
@@ -50,22 +50,22 @@
Add Label
-
- - - + + +
- +
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts index dc031d81..8f0f6f8a 100644 --- a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts +++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts @@ -23,7 +23,7 @@ export class FuseScrumboardLabelSelectorComponent implements OnInit, OnDestroy newLabel = { 'id' : '', 'name' : '', - 'color': 'md-blue-400-bg' + 'color': 'mat-blue-400-bg' }; toggleInArray = FuseUtils.toggleInArray; diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html index 28ca94a5..0b69eb04 100644 --- a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html +++ b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html @@ -1,7 +1,7 @@
{{board.name}} -
@@ -12,10 +12,10 @@ - - diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts index d35face2..8bea5dca 100644 --- a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts +++ b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ diff --git a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html index 82c4bdbd..b8f62035 100644 --- a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html +++ b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html @@ -2,7 +2,7 @@ (click)="openForm()" fxLayout="row" fxLayoutAlign="start center">
- add + add
Add a card
@@ -11,19 +11,19 @@
- - - + + +
- -
diff --git a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.scss b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.scss index 80fd08b3..65219f1c 100644 --- a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.scss +++ b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.scss @@ -12,7 +12,7 @@ cursor: pointer; border-radius: 2px; - md-icon { + mat-icon { margin-right: 8px; color: rgba(0, 0, 0, 0.6); } @@ -29,7 +29,7 @@ padding: 8px; border-top: 1px solid rgba(0, 0, 0, 0.12); - md-input-container { + mat-form-field { width: 100%; margin: 0; padding: 12px 8px; diff --git a/src/app/main/content/apps/scrumboard/board/list/card/card.component.html b/src/app/main/content/apps/scrumboard/board/list/card/card.component.html index fd772ed0..a852891d 100644 --- a/src/app/main/content/apps/scrumboard/board/list/card/card.component.html +++ b/src/app/main/content/apps/scrumboard/board/list/card/card.component.html @@ -10,7 +10,7 @@
- +
@@ -22,7 +22,7 @@ + [matTooltip]="board.labels | getById:labelId:'name'">
@@ -39,7 +39,7 @@ - access_time + access_time {{card.due | date:'mediumDate'}} @@ -50,7 +50,7 @@ class="badge check-items" [ngClass]="{'completed': card.checkItemsChecked === card.checkItems}" fxLayout="row" fxLayoutAlign="start center"> - check_circle + check_circle {{card.checkItemsChecked}} / {{card.checkItems}} @@ -69,7 +69,7 @@ + [matTooltip]="board.members | getById:memberId:'name'">
@@ -86,14 +86,14 @@ - remove_red_eye + remove_red_eye - description + description @@ -105,7 +105,7 @@ - attachment + attachment {{card.attachments.length}} @@ -114,7 +114,7 @@ - comment + comment {{card.comments.length}} diff --git a/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss b/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss index 7673454c..e57dce32 100644 --- a/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss +++ b/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss @@ -53,7 +53,7 @@ background-color: rgba(0, 0, 0, 0.4); color: #FFFFFF; - md-icon { + mat-icon { margin-right: 4px; } diff --git a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html index 9f742826..786f1ed8 100644 --- a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html +++ b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html @@ -8,10 +8,10 @@ - - diff --git a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts index f480c7cd..b2b38b9b 100644 --- a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts +++ b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.html b/src/app/main/content/apps/scrumboard/board/list/list.component.html index 63487391..2899c33c 100644 --- a/src/app/main/content/apps/scrumboard/board/list/list.component.html +++ b/src/app/main/content/apps/scrumboard/board/list/list.component.html @@ -10,12 +10,12 @@
- - - - + + +
diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.ts b/src/app/main/content/apps/scrumboard/board/list/list.component.ts index e5c7d2e1..aa9735fc 100644 --- a/src/app/main/content/apps/scrumboard/board/list/list.component.ts +++ b/src/app/main/content/apps/scrumboard/board/list/list.component.ts @@ -3,7 +3,7 @@ import { FuseUtils } from '../../../../../../core/fuseUtils'; import { ScrumboardService } from 'app/main/content/apps/scrumboard/scrumboard.service'; import { ActivatedRoute } from '@angular/router'; import { Subscription } from 'rxjs/Subscription'; -import { MdDialog, MdDialogRef } from '@angular/material'; +import { MatDialog, MatDialogRef } from '@angular/material'; import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component'; import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component'; import { Card } from '../../card.model'; @@ -25,12 +25,12 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy onBoardChanged: Subscription; - confirmDialogRef: MdDialogRef; + confirmDialogRef: MatDialogRef; constructor( private route: ActivatedRoute, private scrumboardService: ScrumboardService, - public dialog: MdDialog + public dialog: MatDialog ) { } diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html index 678dbf0d..b27131a5 100644 --- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html +++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html @@ -1,15 +1,15 @@ - + - +

{{color.key}}

- check - - + - + diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html index 756a57a9..2e3c126b 100644 --- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html +++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html @@ -3,7 +3,7 @@
-
+
Settings
@@ -13,43 +13,43 @@
-
- format_color_fill +
+ format_color_fill

Board Color

-
- photo +
+ photo

Card Cover Images

- check + check
-
- remove_red_eye +
+ remove_red_eye

Subscribe

- check + check
-
- content_copy +
+ content_copy

Copy Board

-
- delete +
+ delete

Delete Board

- +
@@ -58,10 +58,10 @@
-
+
Background Color
-
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.html b/src/app/main/content/apps/scrumboard/scrumboard.component.html index 9aea1c88..0a856db9 100644 --- a/src/app/main/content/apps/scrumboard/scrumboard.component.html +++ b/src/app/main/content/apps/scrumboard/scrumboard.component.html @@ -1,7 +1,7 @@ -
+
-
+

Scrumboard App

@@ -14,7 +14,7 @@ [routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri" fxLayout="column" fxLayoutAlign="center center" [@animate]="{value:'*',params:{y:'100%'}}"> - assessment + assessment
{{board.name}}
@@ -23,7 +23,7 @@
- add_circle + add_circle
Add new board
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.scss b/src/app/main/content/apps/scrumboard/scrumboard.component.scss index 067b0ea0..55953a9a 100644 --- a/src/app/main/content/apps/scrumboard/scrumboard.component.scss +++ b/src/app/main/content/apps/scrumboard/scrumboard.component.scss @@ -9,7 +9,7 @@ .board-list { padding: 32px 0; - max-height: none!important; + max-height: none !important; .board-list-item { min-width: 210px; diff --git a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html index 4eda7b40..95fd1459 100644 --- a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html +++ b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html @@ -1,20 +1,20 @@
+ class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
@@ -24,7 +24,7 @@
-
- - - - - - - +
@@ -53,18 +53,18 @@
- - - +
@@ -77,35 +77,35 @@
- - - - - + + + + + - - - - - + + + + +
- - - {{notes.value.length}} / 500 - + {{notes.value.length}} / 500 + diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html index aaecb99b..c0020501 100644 --- a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html +++ b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html @@ -1,12 +1,12 @@
- + drag_handle - + - - + +
@@ -33,57 +33,57 @@
- - - - - - - - +
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.html b/src/app/main/content/apps/todo/todo-list/todo-list.component.html index d6e9382b..ed4890d3 100644 --- a/src/app/main/content/apps/todo/todo-list/todo-list.component.html +++ b/src/app/main/content/apps/todo/todo-list/todo-list.component.html @@ -1,5 +1,5 @@ -
- There are no todos! +
+ There are no todos!
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.scss b/src/app/main/content/apps/todo/todo-list/todo-list.component.scss index 6c063deb..f96d4072 100644 --- a/src/app/main/content/apps/todo/todo-list/todo-list.component.scss +++ b/src/app/main/content/apps/todo/todo-list/todo-list.component.scss @@ -6,4 +6,9 @@ position: relative; padding: 0; border-right: 1px solid rgba(0, 0, 0, .12); + + .no-todos-text { + font-size: 24px; + font-weight: 300; + } } diff --git a/src/app/main/content/apps/todo/todo.component.html b/src/app/main/content/apps/todo/todo.component.html index d0526557..74af6f92 100644 --- a/src/app/main/content/apps/todo/todo.component.html +++ b/src/app/main/content/apps/todo/todo.component.html @@ -1,16 +1,16 @@
-
+
- + - + - + @@ -19,16 +19,16 @@
-
+
-
- search + search
@@ -37,44 +37,44 @@ -
+
- + - - - - - - - - - - - + + + + + + + + + +
- - - - +
-
@@ -97,6 +97,6 @@
- +
diff --git a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html index d5ba8217..b02758bd 100644 --- a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html +++ b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html @@ -1,20 +1,20 @@
-
+
- home - chevron_right + home + chevron_right Tables
ngx-datatable
- - link + link Reference
@@ -48,12 +48,12 @@ [sortable]="false"> - + - + diff --git a/src/app/main/content/components/angular-material/angular-material.component.html b/src/app/main/content/components/angular-material/angular-material.component.html index 1d7240a4..65ffc995 100644 --- a/src/app/main/content/components/angular-material/angular-material.component.html +++ b/src/app/main/content/components/angular-material/angular-material.component.html @@ -1,21 +1,21 @@
-
+
- home - chevron_right + home + chevron_right Components - chevron_right + chevron_right Angular Material Elements
{{title}}
- - link + + link Reference
diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.html b/src/app/main/content/components/angular-material/example-viewer/example-viewer.html index 916086d0..dfbc59dc 100644 --- a/src/app/main/content/components/angular-material/example-viewer/example-viewer.html +++ b/src/app/main/content/components/angular-material/example-viewer/example-viewer.html @@ -1,49 +1,49 @@ -
+
{{exampleData?.title}}
-
- - - - - + + + + +
-
-
-
diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss b/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss index 8186c4e8..a82d36b4 100644 --- a/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss +++ b/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss @@ -42,7 +42,7 @@ fuse-example-viewer { display: none; right: 8px; - md-icon { + mat-icon { color: rgba(255, 255, 255, 0.87); } } diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts b/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts index 8c5f178b..255c07dc 100644 --- a/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts +++ b/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts @@ -1,5 +1,5 @@ import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; -import { MdSnackBar } from '@angular/material'; +import { MatSnackBar } from '@angular/material'; import 'rxjs/add/operator/first'; import { CopierService } from '../../../../../core/components/copier/copier.service'; import { EXAMPLE_COMPONENTS } from '../example-components'; @@ -49,7 +49,7 @@ export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy showSource = false; constructor( - private snackbar: MdSnackBar, + private snackbar: MatSnackBar, private copier: CopierService, private _resolver: ComponentFactoryResolver ) diff --git a/src/app/main/content/components/countdown/countdown.component.html b/src/app/main/content/components/countdown/countdown.component.html index 46b59307..982ac683 100644 --- a/src/app/main/content/components/countdown/countdown.component.html +++ b/src/app/main/content/components/countdown/countdown.component.html @@ -1,11 +1,11 @@
-
+
- home - chevron_right + home + chevron_right Components
Countdown
@@ -29,7 +29,7 @@

Usage

-

+

- @@ -139,7 +139,7 @@

-
+
Latest Activity
See All
diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss index 107f66c5..ab2da8f9 100644 --- a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss +++ b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss @@ -38,7 +38,7 @@ } } - md-divider { + mat-divider { border-top-width: 1px; border-top-style: solid; margin: 32px 0; @@ -104,7 +104,7 @@ background-color: transparent; } - md-icon { + mat-icon { margin: 0 8px 0 0; } } @@ -150,7 +150,7 @@ margin-bottom: 16px; cursor: pointer; - md-icon { + mat-icon { margin-left: 8px; } } diff --git a/src/app/main/content/pages/search/search.component.html b/src/app/main/content/pages/search/search.component.html index e2f7eb9b..217b9b15 100644 --- a/src/app/main/content/pages/search/search.component.html +++ b/src/app/main/content/pages/search/search.component.html @@ -1,12 +1,12 @@
-
- - - + + +
@@ -14,17 +14,17 @@
- + - + - + - + - + - +
diff --git a/src/app/main/content/pages/search/search.component.scss b/src/app/main/content/pages/search/search.component.scss index 4ee064d3..1f2557a0 100644 --- a/src/app/main/content/pages/search/search.component.scss +++ b/src/app/main/content/pages/search/search.component.scss @@ -45,7 +45,7 @@ padding-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); - .md-title { + .mat-title { padding-right: 8px; } diff --git a/src/app/main/content/pages/search/tabs/classic/classic.component.html b/src/app/main/content/pages/search/tabs/classic/classic.component.html index 0968bb47..3c944e60 100644 --- a/src/app/main/content/pages/search/tabs/classic/classic.component.html +++ b/src/app/main/content/pages/search/tabs/classic/classic.component.html @@ -21,12 +21,12 @@ 54 - -
@@ -40,53 +40,53 @@
- - - - - - - - - - - -
diff --git a/src/app/main/content/pages/search/tabs/table/table.component.html b/src/app/main/content/pages/search/tabs/table/table.component.html index 8257d83a..99b3b5be 100644 --- a/src/app/main/content/pages/search/tabs/table/table.component.html +++ b/src/app/main/content/pages/search/tabs/table/table.component.html @@ -1,36 +1,36 @@
- + - Name - {{row.name}} + Name + {{row.name}} - Position - {{row.position}} + Position + {{row.position}} - Office - {{row.office}} + Office + {{row.office}} - Salary - {{row.salary | currency:'USD':true}} + Salary + {{row.salary | currency:'USD':true}} - - - + + +
diff --git a/src/app/main/content/services/config/config.component.html b/src/app/main/content/services/config/config.component.html index 775cce06..85456da0 100644 --- a/src/app/main/content/services/config/config.component.html +++ b/src/app/main/content/services/config/config.component.html @@ -1,11 +1,11 @@
-
+
- home - chevron_right + home + chevron_right Services
Config
@@ -23,7 +23,7 @@

Usage

-

+

- + Required - - + + - - - + + + Required - - + +

- - - + + + Required - - + + - - - + + + Required - - + + - - + - {{postalCode.value.length}} / 5 - + {{postalCode.value.length}} / 5 + Postal Code needs to be max. {{formErrors.postalCode.maxlength.requiredLength}} characters - - + +
-
+
Reactive Form Errors Model
diff --git a/src/app/main/content/ui/helper-classes/helper-classes.component.html b/src/app/main/content/ui/helper-classes/helper-classes.component.html index c5b0c198..5bd37fc4 100644 --- a/src/app/main/content/ui/helper-classes/helper-classes.component.html +++ b/src/app/main/content/ui/helper-classes/helper-classes.component.html @@ -1,11 +1,11 @@
-
+
- home - chevron_right + home + chevron_right User Interface
Helper Classes
@@ -16,21 +16,21 @@
- + - + - + - + - + - +
diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html index 3fef43a1..ff07fd51 100644 --- a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html +++ b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html @@ -2,7 +2,7 @@
Padding Helpers
-
+
@@ -55,7 +55,7 @@
Direction Specific Padding Helpers
-
+
@@ -113,7 +113,7 @@
Margin Helpers
-
+
@@ -166,7 +166,7 @@
Direction Specific Margin Helpers
-
+
diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html index 0e95ed91..199c935b 100644 --- a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html +++ b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html @@ -2,7 +2,7 @@
Width Helpers
-
+
@@ -71,7 +71,7 @@
Height Helpers
-
+
diff --git a/src/app/main/content/ui/icons/icons.component.html b/src/app/main/content/ui/icons/icons.component.html index a34b3312..b0a6fa6c 100644 --- a/src/app/main/content/ui/icons/icons.component.html +++ b/src/app/main/content/ui/icons/icons.component.html @@ -1,19 +1,19 @@
-
+
- home - chevron_right + home + chevron_right User Interface
Icons
- - link + + link Reference @@ -24,7 +24,7 @@
- +
@@ -32,16 +32,16 @@
- - - + + +
- {{icon}} + {{icon}}
{{icon}}
diff --git a/src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html b/src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html index 8fdc64a9..52281b63 100644 --- a/src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html +++ b/src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html @@ -1,7 +1,7 @@
-
+
@@ -14,7 +14,7 @@ -
+
diff --git a/src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.html b/src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.html index 74768558..f228732b 100644 --- a/src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.html +++ b/src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.html @@ -1,7 +1,7 @@
-
+
@@ -14,7 +14,7 @@ -
+
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html index 885763c3..4c3029cc 100644 --- a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html @@ -1,14 +1,14 @@
-
+
- + - +
@@ -22,7 +22,7 @@
- + @@ -35,14 +35,14 @@ -
+
- Content toolbar @@ -63,6 +63,6 @@
- +
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html b/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html index b2b52e3c..703115a6 100644 --- a/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html +++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html @@ -1,14 +1,14 @@
-
+
- + - +
@@ -24,7 +24,7 @@
- + @@ -37,14 +37,14 @@ -
+
- Content toolbar @@ -65,6 +65,6 @@
- +
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html index 9bc7ca3b..bcaf7676 100644 --- a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html +++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html @@ -1,10 +1,10 @@
-
+
- +
@@ -16,14 +16,14 @@ -
+
- Content toolbar @@ -45,8 +45,8 @@ - +
@@ -60,9 +60,9 @@
- + - +
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html b/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html index 48f48aae..167b0927 100644 --- a/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html +++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html @@ -1,10 +1,10 @@
-
+
- +
@@ -16,14 +16,14 @@ -
+
- Content toolbar @@ -45,8 +45,8 @@ - +
@@ -60,9 +60,9 @@
- + - +
diff --git a/src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html b/src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html index fb61114e..857770c3 100644 --- a/src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html +++ b/src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html @@ -1,13 +1,13 @@
-
+

Fullwidth

-
+
diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html index 4c72ef67..e1bb81ab 100644 --- a/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html @@ -1,26 +1,26 @@
- + - + - +
-
+
-
@@ -31,7 +31,7 @@ -
+
@@ -41,6 +41,6 @@
- +
diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html b/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html index 19154bec..61f81548 100644 --- a/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html +++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html @@ -1,12 +1,12 @@
-
+
-
@@ -16,11 +16,11 @@
- + - +
@@ -28,14 +28,14 @@
- +
-
+
@@ -45,6 +45,6 @@
- +
diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html b/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html index f1a5aa54..4fee2f7d 100644 --- a/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html +++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html @@ -1,10 +1,10 @@
- + - +
@@ -12,19 +12,19 @@
- +
-
+
-
@@ -35,7 +35,7 @@ -
+
@@ -45,6 +45,6 @@
- +
diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html index 8aa1b40d..8b802fc8 100644 --- a/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html +++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html @@ -1,17 +1,17 @@
- +
-
+
-
@@ -22,7 +22,7 @@ -
+
@@ -33,14 +33,14 @@ - + - + - +
diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html b/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html index f5865f7e..b8cb9aea 100644 --- a/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html +++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html @@ -1,12 +1,12 @@
-
+
-
@@ -16,13 +16,13 @@
- +
-
+
@@ -33,8 +33,8 @@ - +
@@ -42,9 +42,9 @@
- + - +
diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html b/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html index 52644c7b..48ca7987 100644 --- a/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html +++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html @@ -1,17 +1,17 @@
- +
-
+
-
@@ -22,7 +22,7 @@ -
+
@@ -33,8 +33,8 @@ - +
@@ -42,9 +42,9 @@
- + - +
diff --git a/src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html b/src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html index f4c1dee2..fd163806 100644 --- a/src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html +++ b/src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html @@ -1,35 +1,35 @@
-
+

Tabbed

-
+
- + - +
- + - +
- + - +
- + - +
diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html index 71a9f742..fc28433b 100644 --- a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html +++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html @@ -2,7 +2,7 @@
Blockquotes
-
+
@@ -89,7 +89,7 @@
Lists
-
+
@@ -169,7 +169,7 @@
Definition Lists
-
+
diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.html b/src/app/main/content/ui/typography/tabs/headings/headings.component.html index 1c9a2501..1d320c6c 100644 --- a/src/app/main/content/ui/typography/tabs/headings/headings.component.html +++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.html @@ -2,7 +2,7 @@
Material design typography classes
-
+
@@ -183,7 +183,7 @@
Standard Headings
-
+
diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html index af3844f2..56cf09ac 100644 --- a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html +++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html @@ -2,12 +2,12 @@
Font Weight
-
+
-
From 100 to 900
+
From 100 to 900
font-weight: 100 ... font-weight: 900 @@ -28,12 +28,12 @@
Font Size
-
+
-
Multiplies of 2, max: 120
+
Multiplies of 2, max: 120
font-size: 20
@@ -50,12 +50,12 @@
Line Height
-
+
-
Multiplies of 2, max: 120
+
Multiplies of 2, max: 120
line-height: 2 ... line-height: 120 @@ -76,7 +76,7 @@
Other helpers
-
+
@@ -144,7 +144,7 @@
-
+

Boxed text light

diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html index 2d3cca52..454d9343 100644 --- a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html +++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html @@ -1,6 +1,6 @@
-
+
diff --git a/src/app/main/content/ui/typography/typography.component.html b/src/app/main/content/ui/typography/typography.component.html index c4b4fee3..d20c1f29 100644 --- a/src/app/main/content/ui/typography/typography.component.html +++ b/src/app/main/content/ui/typography/typography.component.html @@ -1,11 +1,11 @@
-
+
- home - chevron_right + home + chevron_right User Interface
Typography
@@ -16,33 +16,33 @@
- + - + - + - + - + - + - + - + - + - +
diff --git a/src/app/main/footer/footer.component.html b/src/app/main/footer/footer.component.html index 2b1cecfb..72bff219 100644 --- a/src/app/main/footer/footer.component.html +++ b/src/app/main/footer/footer.component.html @@ -1,20 +1,20 @@ - + - + diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html index 7c5a2fd7..7cce49da 100644 --- a/src/app/main/main.component.html +++ b/src/app/main/main.component.html @@ -1,4 +1,4 @@ - +
@@ -19,8 +19,8 @@ @@ -62,11 +62,11 @@
- + - + - + diff --git a/src/app/main/navbar/horizontal/navbar-horizontal.component.ts b/src/app/main/navbar/horizontal/navbar-horizontal.component.ts index db5d2d6e..18a66d68 100644 --- a/src/app/main/navbar/horizontal/navbar-horizontal.component.ts +++ b/src/app/main/navbar/horizontal/navbar-horizontal.component.ts @@ -8,7 +8,8 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; }) export class FuseNavbarHorizontalComponent implements OnInit { - constructor() { + constructor() + { } ngOnInit() diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.html b/src/app/main/navbar/vertical/navbar-vertical.component.html index a88e997b..fe98e297 100644 --- a/src/app/main/navbar/vertical/navbar-vertical.component.html +++ b/src/app/main/navbar/vertical/navbar-vertical.component.html @@ -5,12 +5,12 @@ FUSE
- -
diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.scss b/src/app/main/navbar/vertical/navbar-vertical.component.scss index 400efd78..abf58d03 100644 --- a/src/app/main/navbar/vertical/navbar-vertical.component.scss +++ b/src/app/main/navbar/vertical/navbar-vertical.component.scss @@ -134,11 +134,18 @@ fuse-navbar-vertical { } } - .nav-bar-content { + .navbar-content { flex: 1; } } +fuse-navbar-horizontal + #wrapper > fuse-navbar-vertical { + display: none; + @include media-breakpoint-down(md) { + display: flex; + } +} + .fuse-navbar-backdrop { position: absolute; top: 0; diff --git a/src/app/main/quick-panel/quick-panel.component.html b/src/app/main/quick-panel/quick-panel.component.html index f0133fd0..bf13a381 100644 --- a/src/app/main/quick-panel/quick-panel.component.html +++ b/src/app/main/quick-panel/quick-panel.component.html @@ -1,6 +1,6 @@ - + -

+

Today

@@ -14,59 +14,59 @@ {{date | date:'MMMM'}}
- + - + - -

+ +

Events

- -

{{event.title}}

-

{{event.detail}}

- - + +

{{event.title}}

+

{{event.detail}}

+ + - + - -

+ +

Notes

- -

{{note.title}}

-

{{note.detail}}

- - + +

{{note.title}}

+

{{note.detail}}

+ + - + - -

+ +

Quick Settings

- - + +

Notifications

- - + + - - + +

Cloud Sync

- - + + - - + +

Retro Thrusters

- - - + + + diff --git a/src/app/main/toolbar/toolbar.component.html b/src/app/main/toolbar/toolbar.component.html index ad5da2d1..42d13d58 100644 --- a/src/app/main/toolbar/toolbar.component.html +++ b/src/app/main/toolbar/toolbar.component.html @@ -1,12 +1,14 @@ - + + +
-
@@ -17,7 +19,7 @@
-
+
@@ -25,35 +27,33 @@
- - - - + - - - - +
@@ -61,33 +61,33 @@
- - - - +
-
- + diff --git a/src/app/main/toolbar/toolbar.component.scss b/src/app/main/toolbar/toolbar.component.scss index 9a1e2745..6176d063 100644 --- a/src/app/main/toolbar/toolbar.component.scss +++ b/src/app/main/toolbar/toolbar.component.scss @@ -13,6 +13,15 @@ .mat-toolbar { background: inherit; color: inherit; + position: relative; + + .loading-bar { + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + } } .logo { @@ -24,11 +33,6 @@ } } - .loading-spinner { - width: 32px; - height: 32px; - } - .user-button, fuse-search-bar, .language-button, diff --git a/src/app/main/toolbar/toolbar.component.ts b/src/app/main/toolbar/toolbar.component.ts index 82899d0f..5c7368e4 100644 --- a/src/app/main/toolbar/toolbar.component.ts +++ b/src/app/main/toolbar/toolbar.component.ts @@ -13,7 +13,7 @@ export class FuseToolbarComponent userStatusOptions: any[]; languages: any; selectedLanguage: any; - showSpinner: boolean; + showLoadingBar: boolean; horizontalNav: boolean; constructor( @@ -73,11 +73,11 @@ export class FuseToolbarComponent (event) => { if ( event instanceof NavigationStart ) { - this.showSpinner = true; + this.showLoadingBar = true; } if ( event instanceof NavigationEnd ) { - this.showSpinner = false; + this.showLoadingBar = false; } }); diff --git a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css +++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + width: 100%; } diff --git a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html index 176d13dc..1f38255c 100644 --- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html +++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html @@ -1,10 +1,10 @@
- - - - - {{ option.name }} - - - + + + + + {{ option.name }} + + +
diff --git a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts index aaeeb5ce..a6fefb23 100644 --- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts +++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts @@ -1,49 +1,57 @@ -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; -import {Observable} from 'rxjs/Observable'; +import { Component } from '@angular/core'; +import { FormControl } from '@angular/forms'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/operator/map'; -export class User { - constructor(public name: string) { } +export class User +{ + constructor(public name: string) + { + } } /** * @title Display value autocomplete */ @Component({ - selector: 'autocomplete-display-example', - templateUrl: 'autocomplete-display-example.html', - styleUrls: ['autocomplete-display-example.css'] + selector : 'autocomplete-display-example', + templateUrl: 'autocomplete-display-example.html', + styleUrls : ['autocomplete-display-example.css'] }) -export class AutocompleteDisplayExample { +export class AutocompleteDisplayExample +{ - myControl = new FormControl(); + myControl = new FormControl(); - options = [ - new User('Mary'), - new User('Shelley'), - new User('Igor') - ]; + options = [ + new User('Mary'), + new User('Shelley'), + new User('Igor') + ]; - filteredOptions: Observable; + filteredOptions: Observable; - ngOnInit() { - this.filteredOptions = this.myControl.valueChanges - .startWith(null) - .map(user => user && typeof user === 'object' ? user.name : user) - .map(name => name ? this.filter(name) : this.options.slice()); - } - - filter(name: string): User[] { - return this.options.filter(option => - option.name.toLowerCase().indexOf(name.toLowerCase()) === 0); - } - - displayFn(user: User): string { - if (user){ - return user.name; + ngOnInit() + { + this.filteredOptions = this.myControl.valueChanges + .startWith(null) + .map(user => user && typeof user === 'object' ? user.name : user) + .map(name => name ? this.filter(name) : this.options.slice()); + } + + filter(name: string): User[] + { + return this.options.filter(option => + option.name.toLowerCase().indexOf(name.toLowerCase()) === 0); + } + + displayFn(user: User): string + { + if ( user ) + { + return user.name; + } } - } } diff --git a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css +++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + width: 100%; } diff --git a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html index 13c64139..69e3657c 100644 --- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html +++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html @@ -1,10 +1,10 @@
- - - - - {{ option }} - - - + + + + + {{ option }} + + +
diff --git a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts index dde59515..44e9a1ce 100644 --- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts +++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts @@ -1,6 +1,6 @@ -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; -import {Observable} from 'rxjs/Observable'; +import { Component } from '@angular/core'; +import { FormControl } from '@angular/forms'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/operator/map'; @@ -8,31 +8,34 @@ import 'rxjs/add/operator/map'; * @title Filter autocomplete */ @Component({ - selector: 'autocomplete-filter-example', - templateUrl: 'autocomplete-filter-example.html', - styleUrls: ['autocomplete-filter-example.css'] + selector : 'autocomplete-filter-example', + templateUrl: 'autocomplete-filter-example.html', + styleUrls : ['autocomplete-filter-example.css'] }) -export class AutocompleteFilterExample { +export class AutocompleteFilterExample +{ - myControl: FormControl = new FormControl(); + myControl: FormControl = new FormControl(); - options = [ - 'One', - 'Two', - 'Three' - ]; + options = [ + 'One', + 'Two', + 'Three' + ]; - filteredOptions: Observable; + filteredOptions: Observable; - ngOnInit() { - this.filteredOptions = this.myControl.valueChanges - .startWith(null) - .map(val => val ? this.filter(val) : this.options.slice()); - } + ngOnInit() + { + this.filteredOptions = this.myControl.valueChanges + .startWith(null) + .map(val => val ? this.filter(val) : this.options.slice()); + } - filter(val: string): string[] { - return this.options.filter(option => - option.toLowerCase().indexOf(val.toLowerCase()) === 0); - } + filter(val: string): string[] + { + return this.options.filter(option => + option.toLowerCase().indexOf(val.toLowerCase()) === 0); + } } diff --git a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css +++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + width: 100%; } diff --git a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html index 3af4634f..8dc0e749 100644 --- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html +++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html @@ -1,20 +1,21 @@
- - - - - - {{ state.name }} | - Population: {{state.population}} - - - + + + + + + {{ state.name }} + | + Population: {{state.population}} + + + -
+
- - Disable Input? - + + Disable Input? +
diff --git a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts index ee2a166b..9339557c 100644 --- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts +++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts @@ -1,7 +1,7 @@ -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import { Component } from '@angular/core'; +import { FormControl } from '@angular/forms'; -import {Observable} from 'rxjs/Observable'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/operator/map'; @@ -9,51 +9,54 @@ import 'rxjs/add/operator/map'; * @title Autocomplete overview */ @Component({ - selector: 'autocomplete-overview-example', - templateUrl: 'autocomplete-overview-example.html', - styleUrls: ['autocomplete-overview-example.css'] + selector : 'autocomplete-overview-example', + templateUrl: 'autocomplete-overview-example.html', + styleUrls : ['autocomplete-overview-example.css'] }) -export class AutocompleteOverviewExample { - stateCtrl: FormControl; - filteredStates: Observable; +export class AutocompleteOverviewExample +{ + stateCtrl: FormControl; + filteredStates: Observable; - states: any[] = [ + states: any[] = [ + { + name : 'Arkansas', + population: '2.978M', + // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg + flag : 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg' + }, + { + name : 'California', + population: '39.14M', + // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg + flag : 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg' + }, + { + name : 'Florida', + population: '20.27M', + // https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg + flag : 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg' + }, + { + name : 'Texas', + population: '27.47M', + // https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg + flag : 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg' + } + ]; + + constructor() { - name: 'Arkansas', - population: '2.978M', - // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg - flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg' - }, - { - name: 'California', - population: '39.14M', - // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg - flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg' - }, - { - name: 'Florida', - population: '20.27M', - // https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg - flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg' - }, - { - name: 'Texas', - population: '27.47M', - // https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg - flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg' + this.stateCtrl = new FormControl(); + this.filteredStates = this.stateCtrl.valueChanges + .startWith(null) + .map(state => state ? this.filterStates(state) : this.states.slice()); } - ]; - constructor() { - this.stateCtrl = new FormControl(); - this.filteredStates = this.stateCtrl.valueChanges - .startWith(null) - .map(state => state ? this.filterStates(state) : this.states.slice()); - } - - filterStates(name: string) { - return this.states.filter(state => - state.name.toLowerCase().indexOf(name.toLowerCase()) === 0); - } + filterStates(name: string) + { + return this.states.filter(state => + state.name.toLowerCase().indexOf(name.toLowerCase()) === 0); + } } diff --git a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css +++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + width: 100%; } diff --git a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html index 3c440f4b..3eef2cab 100644 --- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html +++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html @@ -1,10 +1,10 @@
- - - - - {{ option }} - - - + + + + + {{ option }} + + +
diff --git a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts index c3f1bcb6..16df19b1 100644 --- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts +++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts @@ -1,22 +1,23 @@ -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import { Component } from '@angular/core'; +import { FormControl } from '@angular/forms'; /** * @title Simple autocomplete */ @Component({ - selector: 'autocomplete-simple-example', - templateUrl: 'autocomplete-simple-example.html', - styleUrls: ['autocomplete-simple-example.css'] + selector : 'autocomplete-simple-example', + templateUrl: 'autocomplete-simple-example.html', + styleUrls : ['autocomplete-simple-example.css'] }) -export class AutocompleteSimpleExample { +export class AutocompleteSimpleExample +{ - myControl: FormControl = new FormControl(); + myControl: FormControl = new FormControl(); - options = [ - 'One', - 'Two', - 'Three' - ]; + options = [ + 'One', + 'Two', + 'Three' + ]; } diff --git a/src/assets/angular-material-examples/button-overview/button-overview-example.html b/src/assets/angular-material-examples/button-overview/button-overview-example.html index 56f6fa44..0dcb901d 100644 --- a/src/assets/angular-material-examples/button-overview/button-overview-example.html +++ b/src/assets/angular-material-examples/button-overview/button-overview-example.html @@ -1 +1 @@ - + diff --git a/src/assets/angular-material-examples/button-overview/button-overview-example.ts b/src/assets/angular-material-examples/button-overview/button-overview-example.ts index 9dbde687..ac9b74d2 100644 --- a/src/assets/angular-material-examples/button-overview/button-overview-example.ts +++ b/src/assets/angular-material-examples/button-overview/button-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic buttons */ @Component({ - selector: 'button-overview-example', - templateUrl: 'button-overview-example.html', + selector : 'button-overview-example', + templateUrl: 'button-overview-example.html' }) -export class ButtonOverviewExample {} +export class ButtonOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css index d21ca3ce..4dea4b36 100644 --- a/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css +++ b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css @@ -1,3 +1,3 @@ .example-selected-value { - margin: 15px 0; + margin: 15px 0; } diff --git a/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html index dd5cd277..2b1be41e 100644 --- a/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html +++ b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html @@ -1,15 +1,15 @@ - - - format_align_left - - - format_align_center - - - format_align_right - - - format_align_justify - - + + + format_align_left + + + format_align_center + + + format_align_right + + + format_align_justify + +
Selected value: {{group.value}}
diff --git a/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts index efe1c7cc..da50101e 100644 --- a/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts +++ b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Exclusive selection */ @Component({ - selector: 'button-toggle-exclusive-example', - templateUrl: 'button-toggle-exclusive-example.html', - styleUrls: ['button-toggle-exclusive-example.css'], + selector : 'button-toggle-exclusive-example', + templateUrl: 'button-toggle-exclusive-example.html', + styleUrls : ['button-toggle-exclusive-example.css'] }) -export class ButtonToggleExclusiveExample {} +export class ButtonToggleExclusiveExample +{ +} diff --git a/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html b/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html index bb215d5b..858458d6 100644 --- a/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html +++ b/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html @@ -1 +1 @@ -Toggle me! +Toggle me! diff --git a/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts b/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts index c8afb437..6118901b 100644 --- a/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts +++ b/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic button-toggles */ @Component({ - selector: 'button-toggle-overview-example', - templateUrl: 'button-toggle-overview-example.html', + selector : 'button-toggle-overview-example', + templateUrl: 'button-toggle-overview-example.html' }) -export class ButtonToggleOverviewExample {} +export class ButtonToggleOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/button-types/button-types-example.css b/src/assets/angular-material-examples/button-types/button-types-example.css index 9771bda6..d9455cb7 100644 --- a/src/assets/angular-material-examples/button-types/button-types-example.css +++ b/src/assets/angular-material-examples/button-types/button-types-example.css @@ -1,5 +1,5 @@ .example-button-row { - display: flex; - align-items: center; - justify-content: space-around; + display: flex; + align-items: center; + justify-content: space-around; } diff --git a/src/assets/angular-material-examples/button-types/button-types-example.html b/src/assets/angular-material-examples/button-types/button-types-example.html index 1a9b5b20..2a902df1 100644 --- a/src/assets/angular-material-examples/button-types/button-types-example.html +++ b/src/assets/angular-material-examples/button-types/button-types-example.html @@ -1,64 +1,64 @@

Basic Buttons

- - - - - - Link + + + + + + Link

Raised Buttons

- - - - - - Link + + + + + + Link

Icon Buttons

- - - - - + + + + +

Fab Buttons

- - - - - - - Link + + + + + + + Link

Mini Fab Buttons

- - - - - - - Link + + + + + + + Link
diff --git a/src/assets/angular-material-examples/button-types/button-types-example.ts b/src/assets/angular-material-examples/button-types/button-types-example.ts index 525729b2..56159b5e 100644 --- a/src/assets/angular-material-examples/button-types/button-types-example.ts +++ b/src/assets/angular-material-examples/button-types/button-types-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Button varieties */ @Component({ - selector: 'button-types-example', - templateUrl: 'button-types-example.html', - styleUrls: ['button-types-example.css'], + selector : 'button-types-example', + templateUrl: 'button-types-example.html', + styleUrls : ['button-types-example.css'] }) -export class ButtonTypesExample {} +export class ButtonTypesExample +{ +} diff --git a/src/assets/angular-material-examples/card-fancy/card-fancy-example.css b/src/assets/angular-material-examples/card-fancy/card-fancy-example.css index e0d1c50e..af83df3c 100644 --- a/src/assets/angular-material-examples/card-fancy/card-fancy-example.css +++ b/src/assets/angular-material-examples/card-fancy/card-fancy-example.css @@ -1,8 +1,8 @@ .example-card { - width: 400px; + width: 400px; } .example-header-image { - background-image: url('/assets/images/examples/shiba1.jpg'); - background-size: cover; + background-image: url('/assets/images/examples/shiba1.jpg'); + background-size: cover; } diff --git a/src/assets/angular-material-examples/card-fancy/card-fancy-example.html b/src/assets/angular-material-examples/card-fancy/card-fancy-example.html index d7001d5d..2e608721 100644 --- a/src/assets/angular-material-examples/card-fancy/card-fancy-example.html +++ b/src/assets/angular-material-examples/card-fancy/card-fancy-example.html @@ -1,19 +1,19 @@ - - -
- Shiba Inu - Dog Breed - - Photo of a Shiba Inu - -

- The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. - A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally - bred for hunting. -

- - - - - - + + +
+ Shiba Inu + Dog Breed + + Photo of a Shiba Inu + +

+ The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. + A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally + bred for hunting. +

+ + + + + + diff --git a/src/assets/angular-material-examples/card-fancy/card-fancy-example.ts b/src/assets/angular-material-examples/card-fancy/card-fancy-example.ts index 92826ad0..210175e0 100644 --- a/src/assets/angular-material-examples/card-fancy/card-fancy-example.ts +++ b/src/assets/angular-material-examples/card-fancy/card-fancy-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Card with multiple sections */ @Component({ - selector: 'card-fancy-example', - templateUrl: 'card-fancy-example.html', - styleUrls: ['card-fancy-example.css'], + selector : 'card-fancy-example', + templateUrl: 'card-fancy-example.html', + styleUrls : ['card-fancy-example.css'] }) -export class CardFancyExample {} +export class CardFancyExample +{ +} diff --git a/src/assets/angular-material-examples/card-overview/card-overview-example.html b/src/assets/angular-material-examples/card-overview/card-overview-example.html index 5e0c2b6d..77453153 100644 --- a/src/assets/angular-material-examples/card-overview/card-overview-example.html +++ b/src/assets/angular-material-examples/card-overview/card-overview-example.html @@ -1 +1 @@ -Simple card +Simple card diff --git a/src/assets/angular-material-examples/card-overview/card-overview-example.ts b/src/assets/angular-material-examples/card-overview/card-overview-example.ts index f87f9401..058dc963 100644 --- a/src/assets/angular-material-examples/card-overview/card-overview-example.ts +++ b/src/assets/angular-material-examples/card-overview/card-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic cards */ @Component({ - selector: 'card-overview-example', - templateUrl: 'card-overview-example.html', + selector : 'card-overview-example', + templateUrl: 'card-overview-example.html' }) -export class CardOverviewExample {} +export class CardOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css index 527bb2a3..5c29f35d 100644 --- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css +++ b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css @@ -1,8 +1,8 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - min-width: 300px; + display: flex; + flex-direction: column; + min-width: 300px; } /* @@ -10,30 +10,30 @@ * https://material.io/guidelines/components/data-tables.html */ .example-table { - flex: 1 1 auto; - overflow: auto; - max-height: 500px; + flex: 1 1 auto; + overflow: auto; + max-height: 500px; } .example-header-row, .example-row { - display: flex; - border-bottom: 1px solid #ccc; - align-items: center; - height: 32px; - padding: 0 8px; + display: flex; + border-bottom: 1px solid #CCC; + align-items: center; + height: 32px; + padding: 0 8px; } .example-cell, .example-header-cell { - flex: 1; + flex: 1; } .example-header-cell { - font-size: 12px; - font-weight: bold; - color: rgba(0, 0, 0, 0.54); + font-size: 12px; + font-weight: bold; + color: rgba(0, 0, 0, 0.54); } .example-cell { - font-size: 13px; - color: rgba(0, 0, 0, 0.87); + font-size: 13px; + color: rgba(0, 0, 0, 0.87); } diff --git a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html index df20a4d1..11eee44c 100644 --- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html +++ b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html @@ -1,36 +1,36 @@
- - + + - - - ID - {{row.id}} - + + + ID + {{row.id}} + - - - Progress - {{row.progress}}% - + + + Progress + {{row.progress}}% + - - - Name - {{row.name}} - + + + Name + {{row.name}} + - - - Color - - {{row.color}} - - + + + Color + + {{row.color}} + + - - - + + +
diff --git a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts index 80975595..adf16ffd 100644 --- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts +++ b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts @@ -1,7 +1,7 @@ -import {Component} from '@angular/core'; -import {DataSource} from '@angular/cdk/collections'; -import {BehaviorSubject} from 'rxjs/BehaviorSubject'; -import {Observable} from 'rxjs/Observable'; +import { Component } from '@angular/core'; +import { DataSource } from '@angular/cdk/collections'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; @@ -10,65 +10,83 @@ import 'rxjs/add/operator/map'; * @title Basic CDK data-table */ @Component({ - selector: 'cdk-table-basic-example', - styleUrls: ['cdk-table-basic-example.css'], - templateUrl: 'cdk-table-basic-example.html', + selector : 'cdk-table-basic-example', + styleUrls : ['cdk-table-basic-example.css'], + templateUrl: 'cdk-table-basic-example.html' }) -export class CdkTableBasicExample { - displayedColumns = ['userId', 'userName', 'progress', 'color']; - exampleDatabase = new ExampleDatabase(); - dataSource: ExampleDataSource | null; +export class CdkTableBasicExample +{ + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; - ngOnInit() { - this.dataSource = new ExampleDataSource(this.exampleDatabase); - } + ngOnInit() + { + this.dataSource = new ExampleDataSource(this.exampleDatabase); + } } /** Constants used to fill up our data base. */ -const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', - 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; -const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', - 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', - 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; +const COLORS = [ + 'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray' +]; +const NAMES = [ + 'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth' +]; -export interface UserData { - id: string; - name: string; - progress: string; - color: string; +export interface UserData +{ + id: string; + name: string; + progress: string; + color: string; } /** An example database that the data source uses to retrieve data for the table. */ -export class ExampleDatabase { - /** Stream that emits whenever the data has been modified. */ - dataChange: BehaviorSubject = new BehaviorSubject([]); - get data(): UserData[] { return this.dataChange.value; } +export class ExampleDatabase +{ + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); - constructor() { - // Fill up the database with 100 users. - for (let i = 0; i < 100; i++) { this.addUser(); } - } + get data(): UserData[] + { + return this.dataChange.value; + } - /** Adds a new user to the database. */ - addUser() { - const copiedData = this.data.slice(); - copiedData.push(this.createNewUser()); - this.dataChange.next(copiedData); - } + constructor() + { + // Fill up the database with 100 users. + for ( let i = 0; i < 100; i++ ) + { + this.addUser(); + } + } - /** Builds and returns a new User. */ - private createNewUser() { - const name = - NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + - NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + /** Adds a new user to the database. */ + addUser() + { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } - return { - id: (this.data.length + 1).toString(), - name: name, - progress: Math.round(Math.random() * 100).toString(), - color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] - }; - } + /** Builds and returns a new User. */ + private createNewUser() + { + const name = + NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + + return { + id : (this.data.length + 1).toString(), + name : name, + progress: Math.round(Math.random() * 100).toString(), + color : COLORS[Math.round(Math.random() * (COLORS.length - 1))] + }; + } } /** @@ -78,15 +96,20 @@ export class ExampleDatabase { * the underlying data. Instead, it only needs to take the data and send the table exactly what * should be rendered. */ -export class ExampleDataSource extends DataSource { - constructor(private _exampleDatabase: ExampleDatabase) { - super(); - } +export class ExampleDataSource extends DataSource +{ + constructor(private _exampleDatabase: ExampleDatabase) + { + super(); + } - /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable { - return this._exampleDatabase.dataChange; - } + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable + { + return this._exampleDatabase.dataChange; + } - disconnect() {} + disconnect() + { + } } diff --git a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css index 558293fb..6551ff13 100644 --- a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css +++ b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css @@ -1,14 +1,14 @@ .example-h2 { - margin: 10px; + margin: 10px; } .example-section { - display: flex; - align-content: center; - align-items: center; - height: 60px; + display: flex; + align-content: center; + align-items: center; + height: 60px; } .example-margin { - margin: 0 10px; + margin: 0 10px; } diff --git a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html index 7b8fb4c2..d91b25bc 100644 --- a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html +++ b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html @@ -1,40 +1,40 @@ - - -

Checkbox configuration

+ + +

Checkbox configuration

-
- Checked - Indeterminate -
+
+ Checked + Indeterminate +
-
- - - Start - End - -
+
+ + + Start + End + +
-
- Disabled -
- - +
+ Disabled +
+ + - - -

Result

+ + +

Result

-
- - I'm a checkbox - -
- - +
+ + I'm a checkbox + +
+ + diff --git a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts index f4bdf570..3aee17ba 100644 --- a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts +++ b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts @@ -1,16 +1,17 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Configurable checkbox */ @Component({ - selector: 'checkbox-configurable-example', - templateUrl: 'checkbox-configurable-example.html', - styleUrls: ['checkbox-configurable-example.css'], + selector : 'checkbox-configurable-example', + templateUrl: 'checkbox-configurable-example.html', + styleUrls : ['checkbox-configurable-example.css'] }) -export class CheckboxConfigurableExample { - checked = false; - indeterminate = false; - align = 'start'; - disabled = false; +export class CheckboxConfigurableExample +{ + checked = false; + indeterminate = false; + align = 'start'; + disabled = false; } diff --git a/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html index c301bbe5..b5b049fa 100644 --- a/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html +++ b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html @@ -1 +1 @@ -Check me! +Check me! diff --git a/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts index 2c822582..7d525a35 100644 --- a/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts +++ b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic checkboxes */ @Component({ - selector: 'checkbox-overview-example', - templateUrl: 'checkbox-overview-example.html', + selector : 'checkbox-overview-example', + templateUrl: 'checkbox-overview-example.html' }) -export class CheckboxOverviewExample {} +export class CheckboxOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/chips-input/chips-input-example.css b/src/assets/angular-material-examples/chips-input/chips-input-example.css index 505a4c66..41d07043 100644 --- a/src/assets/angular-material-examples/chips-input/chips-input-example.css +++ b/src/assets/angular-material-examples/chips-input/chips-input-example.css @@ -1,3 +1,3 @@ .demo-chip-list { - width: 100%; + width: 100%; } diff --git a/src/assets/angular-material-examples/chips-input/chips-input-example.html b/src/assets/angular-material-examples/chips-input/chips-input-example.html index f80ef315..dd8eef89 100644 --- a/src/assets/angular-material-examples/chips-input/chips-input-example.html +++ b/src/assets/angular-material-examples/chips-input/chips-input-example.html @@ -1,14 +1,14 @@ - - - - {{fruit.name}} - cancel - - - - + + + + {{fruit.name}} + cancel + + + + diff --git a/src/assets/angular-material-examples/chips-input/chips-input-example.ts b/src/assets/angular-material-examples/chips-input/chips-input-example.ts index 0e96d086..6a383c63 100644 --- a/src/assets/angular-material-examples/chips-input/chips-input-example.ts +++ b/src/assets/angular-material-examples/chips-input/chips-input-example.ts @@ -1,5 +1,6 @@ -import {Component} from '@angular/core'; -import {MdChipInputEvent, ENTER} from '@angular/material'; +import { Component } from '@angular/core'; +import { MatChipInputEvent } from '@angular/material'; +import { ENTER } from '@angular/cdk/keycodes'; const COMMA = 188; @@ -7,46 +8,51 @@ const COMMA = 188; * @title Chips with input */ @Component({ - selector: 'chips-input-example', - templateUrl: 'chips-input-example.html', - styleUrls: ['chips-input-example.css'] + selector : 'chips-input-example', + templateUrl: 'chips-input-example.html', + styleUrls : ['chips-input-example.css'] }) -export class ChipsInputExample { - visible: boolean = true; - selectable: boolean = true; - removable: boolean = true; - addOnBlur: boolean = true; +export class ChipsInputExample +{ + visible: boolean = true; + selectable: boolean = true; + removable: boolean = true; + addOnBlur: boolean = true; - // Enter, comma - separatorKeysCodes = [ENTER, COMMA]; + // Enter, comma + separatorKeysCodes = [ENTER, COMMA]; - fruits = [ - { name: 'Lemon' }, - { name: 'Lime' }, - { name: 'Apple' }, - ]; + fruits = [ + {name: 'Lemon'}, + {name: 'Lime'}, + {name: 'Apple'} + ]; + add(event: MatChipInputEvent): void + { + let input = event.input; + let value = event.value; - add(event: MdChipInputEvent): void { - let input = event.input; - let value = event.value; + // Add our person + if ( (value || '').trim() ) + { + this.fruits.push({name: value.trim()}); + } - // Add our person - if ((value || '').trim()) { - this.fruits.push({ name: value.trim() }); + // Reset the input value + if ( input ) + { + input.value = ''; + } } - // Reset the input value - if (input) { - input.value = ''; - } - } + remove(fruit: any): void + { + let index = this.fruits.indexOf(fruit); - remove(fruit: any): void { - let index = this.fruits.indexOf(fruit); - - if (index >= 0) { - this.fruits.splice(index, 1); + if ( index >= 0 ) + { + this.fruits.splice(index, 1); + } } - } } diff --git a/src/assets/angular-material-examples/chips-overview/chips-overview-example.html b/src/assets/angular-material-examples/chips-overview/chips-overview-example.html index bb041056..ffe8a934 100644 --- a/src/assets/angular-material-examples/chips-overview/chips-overview-example.html +++ b/src/assets/angular-material-examples/chips-overview/chips-overview-example.html @@ -1,6 +1,6 @@ - - One fish - Two fish - Primary fish - Accent fish - + + One fish + Two fish + Primary fish + Accent fish + diff --git a/src/assets/angular-material-examples/chips-overview/chips-overview-example.ts b/src/assets/angular-material-examples/chips-overview/chips-overview-example.ts index 68c8c63d..ca367ada 100644 --- a/src/assets/angular-material-examples/chips-overview/chips-overview-example.ts +++ b/src/assets/angular-material-examples/chips-overview/chips-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic chips */ @Component({ - selector: 'chips-overview-example', - templateUrl: 'chips-overview-example.html', - styleUrls: ['chips-overview-example.css'], + selector : 'chips-overview-example', + templateUrl: 'chips-overview-example.html', + styleUrls : ['chips-overview-example.css'] }) -export class ChipsOverviewExample {} +export class ChipsOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css index dfb2f8c0..2b3cef09 100644 --- a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css +++ b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css @@ -1,3 +1,3 @@ -md-chip { - max-width: 200px; +mat-chip { + max-width: 200px; } diff --git a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html index 27677b1c..e662f6cd 100644 --- a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html +++ b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html @@ -1,7 +1,7 @@ - - - {{chipColor.name}} - - + + + {{chipColor.name}} + + diff --git a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts index 816c2264..51d0c411 100644 --- a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts +++ b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts @@ -1,20 +1,29 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Stacked chips */ @Component({ - selector: 'chips-stacked-example', - templateUrl: 'chips-stacked-example.html', - styleUrls: ['chips-stacked-example.css'], + selector : 'chips-stacked-example', + templateUrl: 'chips-stacked-example.html', + styleUrls : ['chips-stacked-example.css'] }) -export class ChipsStackedExample { - color: string; +export class ChipsStackedExample +{ + color: string; - availableColors = [ - { name: 'none', color: '' }, - { name: 'Primary', color: 'primary' }, - { name: 'Accent', color: 'accent' }, - { name: 'Warn', color: 'warn' } - ]; + availableColors = [ + {name : 'none', + color: '' + }, + {name : 'Primary', + color: 'primary' + }, + {name : 'Accent', + color: 'accent' + }, + {name : 'Warn', + color: 'warn' + } + ]; } diff --git a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html index a41723d8..967844ca 100644 --- a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html +++ b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts index cf4ce8ad..c2cac215 100644 --- a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts +++ b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts @@ -1,12 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Datepicker API */ @Component({ - selector: 'datepicker-api-example', - templateUrl: 'datepicker-api-example.html', - styleUrls: ['datepicker-api-example.css'], + selector : 'datepicker-api-example', + templateUrl: 'datepicker-api-example.html', + styleUrls : ['datepicker-api-example.css'] }) -export class DatepickerApiExample { +export class DatepickerApiExample +{ } diff --git a/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.html b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.html index 4fc367db..33e9ac76 100644 --- a/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.html +++ b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts index a2fe6d13..ebe82cc5 100644 --- a/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts +++ b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts @@ -1,17 +1,18 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Datepicker Filter */ @Component({ - selector: 'datepicker-filter-example', - templateUrl: 'datepicker-filter-example.html', - styleUrls: ['datepicker-filter-example.css'], + selector : 'datepicker-filter-example', + templateUrl: 'datepicker-filter-example.html', + styleUrls : ['datepicker-filter-example.css'] }) -export class DatepickerFilterExample { - myFilter = (d: Date): boolean => { - const day = d.getDay(); - // Prevent Saturday and Sunday from being selected. - return day !== 0 && day !== 6; - } +export class DatepickerFilterExample +{ + myFilter = (d: Date): boolean => { + const day = d.getDay(); + // Prevent Saturday and Sunday from being selected. + return day !== 0 && day !== 6; + } } diff --git a/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.html b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.html index 216fcd26..723d82f4 100644 --- a/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.html +++ b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts index fea707bb..8bcc6fae 100644 --- a/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts +++ b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts @@ -1,14 +1,15 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Datepicker Min Max */ @Component({ - selector: 'datepicker-min-max-example', - templateUrl: 'datepicker-min-max-example.html', - styleUrls: ['datepicker-min-max-example.css'], + selector : 'datepicker-min-max-example', + templateUrl: 'datepicker-min-max-example.html', + styleUrls : ['datepicker-min-max-example.css'] }) -export class DatepickerMinMaxExample { - minDate = new Date(2000, 0, 1); - maxDate = new Date(2020, 0, 1); +export class DatepickerMinMaxExample +{ + minDate = new Date(2000, 0, 1); + maxDate = new Date(2020, 0, 1); } diff --git a/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html index 41a2ba3c..f548cc4c 100644 --- a/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html +++ b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts index b9dde7ca..f77ade6b 100644 --- a/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts +++ b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic datepicker */ @Component({ - selector: 'datepicker-overview-example', - templateUrl: 'datepicker-overview-example.html', - styleUrls: ['datepicker-overview-example.css'], + selector : 'datepicker-overview-example', + templateUrl: 'datepicker-overview-example.html', + styleUrls : ['datepicker-overview-example.css'] }) -export class DatepickerOverviewExample {} +export class DatepickerOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.html b/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.html index 0391c9be..e8b7edb5 100644 --- a/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.html +++ b/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts b/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts index cb76dba2..57264dad 100644 --- a/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts +++ b/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts @@ -1,13 +1,14 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Datepicker start date */ @Component({ - selector: 'datepicker-start-view-example', - templateUrl: 'datepicker-start-view-example.html', - styleUrls: ['datepicker-start-view-example.css'], + selector : 'datepicker-start-view-example', + templateUrl: 'datepicker-start-view-example.html', + styleUrls : ['datepicker-start-view-example.css'] }) -export class DatepickerStartViewExample { - startDate = new Date(1990, 0, 1); +export class DatepickerStartViewExample +{ + startDate = new Date(1990, 0, 1); } diff --git a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html index a9579710..b1d83a2e 100644 --- a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html +++ b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts index df5daa92..4a4732a5 100644 --- a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts +++ b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts @@ -1,12 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Datepicker Touch */ @Component({ - selector: 'datepicker-touch-example', - templateUrl: 'datepicker-touch-example.html', - styleUrls: ['datepicker-touch-example.css'], + selector : 'datepicker-touch-example', + templateUrl: 'datepicker-touch-example.html', + styleUrls : ['datepicker-touch-example.css'] }) -export class DatepickerTouchExample { +export class DatepickerTouchExample +{ } diff --git a/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html b/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html index 46c978da..927fdfde 100644 --- a/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html +++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html @@ -1,25 +1,25 @@ -

Install Angular

- -

DEVELOP ACROSS ALL PLATFORMS

-

Learn one way to build applications with Angular and reuse your code and abilities to build - apps for any deployment target. For web, mobile web, native mobile and native desktop.

- -

SPEED & PERFORMANCE

-

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web - Workers and server-side rendering. Angular puts you in control over scalability. Meet huge data requirements - by building data models on RxJS, Immutable.js or another push-model.

- -

INCREDIBLE TOOLING

-

Build features quickly with simple, declarative templates. Extend the template language with your own - components and use a wide array of existing components. Get immediate Angular-specific help and feedback - with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather - than trying to make the code work.

- -

LOVED BY MILLIONS

-

From prototype through global deployment, Angular delivers the productivity and scalable infrastructure - that supports Google's largest applications.

- - - - - +

Install Angular

+ +

DEVELOP ACROSS ALL PLATFORMS

+

Learn one way to build applications with Angular and reuse your code and abilities to build + apps for any deployment target. For web, mobile web, native mobile and native desktop.

+ +

SPEED & PERFORMANCE

+

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web + Workers and server-side rendering. Angular puts you in control over scalability. Meet huge data requirements + by building data models on RxJS, Immutable.js or another push-model.

+ +

INCREDIBLE TOOLING

+

Build features quickly with simple, declarative templates. Extend the template language with your own + components and use a wide array of existing components. Get immediate Angular-specific help and feedback + with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather + than trying to make the code work.

+ +

LOVED BY MILLIONS

+

From prototype through global deployment, Angular delivers the productivity and scalable infrastructure + that supports Google's largest applications.

+ + + + + diff --git a/src/assets/angular-material-examples/dialog-content/dialog-content-example.html b/src/assets/angular-material-examples/dialog-content/dialog-content-example.html index 176a3c41..cdfc2fb3 100644 --- a/src/assets/angular-material-examples/dialog-content/dialog-content-example.html +++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example.html @@ -1 +1 @@ - + diff --git a/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts b/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts index 39b0d453..2ad837cb 100644 --- a/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts +++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts @@ -1,29 +1,35 @@ -import {Component} from '@angular/core'; -import {MdDialog} from '@angular/material'; +import { Component } from '@angular/core'; +import { MatDialog } from '@angular/material'; /** * @title Dialog with header, scrollable content and actions */ @Component({ - selector: 'dialog-content-example', - templateUrl: 'dialog-content-example.html', + selector : 'dialog-content-example', + templateUrl: 'dialog-content-example.html' }) -export class DialogContentExample { - constructor(public dialog: MdDialog) {} +export class DialogContentExample +{ + constructor(public dialog: MatDialog) + { + } - openDialog() { - const dialogRef = this.dialog.open(DialogContentExampleDialog, { - height: '350px' - }); + openDialog() + { + const dialogRef = this.dialog.open(DialogContentExampleDialog, { + height: '350px' + }); - dialogRef.afterClosed().subscribe(result => { - console.log(`Dialog result: ${result}`); - }); - } + dialogRef.afterClosed().subscribe(result => { + console.log(`Dialog result: ${result}`); + }); + } } @Component({ - selector: 'dialog-content-example-dialog', - templateUrl: 'dialog-content-example-dialog.html', + selector : 'dialog-content-example-dialog', + templateUrl: 'dialog-content-example-dialog.html' }) -export class DialogContentExampleDialog {} +export class DialogContentExampleDialog +{ +} diff --git a/src/assets/angular-material-examples/dialog-data/dialog-data-example-dialog.html b/src/assets/angular-material-examples/dialog-data/dialog-data-example-dialog.html index aa9b428e..cc651524 100644 --- a/src/assets/angular-material-examples/dialog-data/dialog-data-example-dialog.html +++ b/src/assets/angular-material-examples/dialog-data/dialog-data-example-dialog.html @@ -1,15 +1,18 @@ -

Favorite Animal

-
- My favorite animal is: -
    -
  • - ✓ Panda -
    • -
  • - ✓ Unicorn -
    • -
  • - ✓ Lion -
    • -
+

Favorite Animal

+
+ My favorite animal is: +
    +
  • + ✓ + Panda +
    • +
  • + ✓ + Unicorn +
    • +
  • + ✓ + Lion +
    • +
diff --git a/src/assets/angular-material-examples/dialog-data/dialog-data-example.html b/src/assets/angular-material-examples/dialog-data/dialog-data-example.html index 176a3c41..cdfc2fb3 100644 --- a/src/assets/angular-material-examples/dialog-data/dialog-data-example.html +++ b/src/assets/angular-material-examples/dialog-data/dialog-data-example.html @@ -1 +1 @@ - + diff --git a/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts b/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts index bdd0f4bc..51f7c41a 100644 --- a/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts +++ b/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts @@ -1,29 +1,36 @@ -import {Component, Inject} from '@angular/core'; -import {MdDialog, MD_DIALOG_DATA} from '@angular/material'; +import { Component, Inject } from '@angular/core'; +import { MatDialog, MAT_DIALOG_DATA } from '@angular/material'; /** * @title Injecting data when opening a dialog */ @Component({ - selector: 'dialog-data-example', - templateUrl: 'dialog-data-example.html', + selector : 'dialog-data-example', + templateUrl: 'dialog-data-example.html' }) -export class DialogDataExample { - constructor(public dialog: MdDialog) {} +export class DialogDataExample +{ + constructor(public dialog: MatDialog) + { + } - openDialog() { - this.dialog.open(DialogDataExampleDialog, { - data: { - animal: 'panda' - } - }); - } + openDialog() + { + this.dialog.open(DialogDataExampleDialog, { + data: { + animal: 'panda' + } + }); + } } @Component({ - selector: 'dialog-data-example-dialog', - templateUrl: 'dialog-data-example-dialog.html', + selector : 'dialog-data-example-dialog', + templateUrl: 'dialog-data-example-dialog.html' }) -export class DialogDataExampleDialog { - constructor(@Inject(MD_DIALOG_DATA) public data: any) {} +export class DialogDataExampleDialog +{ + constructor(@Inject(MAT_DIALOG_DATA) public data: any) + { + } } diff --git a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example-dialog.html b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example-dialog.html index 5238b0eb..eba6236a 100644 --- a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example-dialog.html +++ b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example-dialog.html @@ -1,5 +1,5 @@ -

Dialog with elements

-
This dialog showcases the title, close, content and actions elements.
-
- +

Dialog with elements

+
This dialog showcases the title, close, content and actions elements.
+
+
diff --git a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.html b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.html index 40637c4b..cf210381 100644 --- a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.html +++ b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.html @@ -1 +1 @@ - + diff --git a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts index 37f3703e..8b63c6bf 100644 --- a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts +++ b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts @@ -1,24 +1,29 @@ -import {Component} from '@angular/core'; -import {MdDialog} from '@angular/material'; +import { Component } from '@angular/core'; +import { MatDialog } from '@angular/material'; /** * @title Dialog elements */ @Component({ - selector: 'dialog-elements-example', - templateUrl: 'dialog-elements-example.html', + selector : 'dialog-elements-example', + templateUrl: 'dialog-elements-example.html' }) -export class DialogElementsExample { - constructor(public dialog: MdDialog) { } +export class DialogElementsExample +{ + constructor(public dialog: MatDialog) + { + } - openDialog() { - this.dialog.open(DialogElementsExampleDialog); - } + openDialog() + { + this.dialog.open(DialogElementsExampleDialog); + } } - @Component({ - selector: 'dialog-elements-example-dialog', - templateUrl: 'dialog-elements-example-dialog.html', + selector : 'dialog-elements-example-dialog', + templateUrl: 'dialog-elements-example-dialog.html' }) -export class DialogElementsExampleDialog { } +export class DialogElementsExampleDialog +{ +} diff --git a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example-dialog.html b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example-dialog.html index b4214fbf..b96d1b11 100644 --- a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example-dialog.html +++ b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example-dialog.html @@ -1,11 +1,11 @@ -

Hi {{data.name}}

-
-

What's your favorite animal?

- - - +

Hi {{data.name}}

+
+

What's your favorite animal?

+ + +
-
- - +
+ +
diff --git a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.html b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.html index b6911190..19060581 100644 --- a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.html +++ b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.html @@ -1,13 +1,13 @@
    -
  1. - - - -
    2. -
  2. - -
    3. -
  3. - You chose: {{animal}} -
    4. +
  4. + + + +
    5. +
  5. + +
    6. +
  6. + You chose: {{animal}} +
diff --git a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts index 5dec934d..a5401d02 100644 --- a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts +++ b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts @@ -1,46 +1,58 @@ -import {Component, Inject} from '@angular/core'; -import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; +import { Component, Inject } from '@angular/core'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; /** * @title Dialog Overview */ @Component({ - selector: 'dialog-overview-example', - templateUrl: 'dialog-overview-example.html' + selector : 'dialog-overview-example', + templateUrl: 'dialog-overview-example.html' }) -export class DialogOverviewExample { +export class DialogOverviewExample +{ - animal: string; - name: string; + animal: string; + name: string; - constructor(public dialog: MdDialog) {} + constructor(public dialog: MatDialog) + { + } - openDialog(): void { - let dialogRef = this.dialog.open(DialogOverviewExampleDialog, { - width: '250px', - data: { name: this.name, animal: this.animal } - }); + openDialog(): void + { + let dialogRef = this.dialog.open(DialogOverviewExampleDialog, { + width: '250px', + data : { + name : this.name, + animal: this.animal + } + }); - dialogRef.afterClosed().subscribe(result => { - console.log('The dialog was closed'); - this.animal = result; - }); - } + dialogRef.afterClosed().subscribe(result => { + console.log('The dialog was closed'); + this.animal = result; + }); + } } @Component({ - selector: 'dialog-overview-example-dialog', - templateUrl: 'dialog-overview-example-dialog.html', + selector : 'dialog-overview-example-dialog', + templateUrl: 'dialog-overview-example-dialog.html' }) -export class DialogOverviewExampleDialog { +export class DialogOverviewExampleDialog +{ - constructor( - public dialogRef: MdDialogRef, - @Inject(MD_DIALOG_DATA) public data: any) { } + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any + ) + { + } - onNoClick(): void { - this.dialogRef.close(); - } + onNoClick(): void + { + this.dialogRef.close(); + } } diff --git a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.html b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.html index 48c0cc50..b3176c4e 100644 --- a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.html +++ b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.html @@ -1,18 +1,18 @@ - - - - Personal data - - - Type your name and age - - - - - - - - - - - + + + + Personal data + + + Type your name and age + + + + + + + + + + + diff --git a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts index 75cff7cc..7a34e091 100644 --- a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts +++ b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic expansion panel */ @Component({ - selector: 'expansion-overview-example', - templateUrl: 'expansion-overview-example.html', + selector : 'expansion-overview-example', + templateUrl: 'expansion-overview-example.html' }) -export class ExpansionOverviewExample {} +export class ExpansionOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css index 7a97afef..520c601c 100644 --- a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css +++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css @@ -1,9 +1,9 @@ -.example-headers-align .mat-expansion-panel-header-title, +.example-headers-align .mat-expansion-panel-header-title, .example-headers-align .mat-expansion-panel-header-description { - flex-basis: 0; + flex-basis: 0; } .example-headers-align .mat-expansion-panel-header-description { - justify-content: space-between; - align-items: center; + justify-content: space-between; + align-items: center; } diff --git a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html index e81ede44..f13fb9a1 100644 --- a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html +++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html @@ -1,69 +1,69 @@ - - - - - Personal data - - - Type your name and age - account_circle - - + + + + + Personal data + + + Type your name and age + account_circle + + - - - + + + - - - + + + - - - - + + + + - - - - Destination - - - Type the country name - map - - + + + + Destination + + + Type the country name + map + + - - - + + + - - - - - + + + + + - - - - Day of the trip - - - Inform the date you wish to travel - date_range - - + + + + Day of the trip + + + Inform the date you wish to travel + date_range + + - - - - + + + + - - - - - + + + + + - + diff --git a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts index e302175f..50bb2aed 100644 --- a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts +++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts @@ -1,25 +1,29 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Expansion panel as accordion */ @Component({ - selector: 'expansion-steps-example', - templateUrl: 'expansion-steps-example.html', - styleUrls: ['expansion-steps-example.css'] + selector : 'expansion-steps-example', + templateUrl: 'expansion-steps-example.html', + styleUrls : ['expansion-steps-example.css'] }) -export class ExpansionStepsExample { - step = 0; +export class ExpansionStepsExample +{ + step = 0; - setStep(index: number) { - this.step = index; - } + setStep(index: number) + { + this.step = index; + } - nextStep() { - this.step++; - } + nextStep() + { + this.step++; + } - prevStep() { - this.step--; - } + prevStep() + { + this.step--; + } } diff --git a/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.html b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.html index 19c84dd5..00006f9d 100644 --- a/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.html +++ b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.html @@ -1,9 +1,9 @@ - - - {{tile.text}} - - + + + {{tile.text}} + + diff --git a/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts index 21dc729a..0cf1626c 100644 --- a/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts +++ b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts @@ -1,17 +1,34 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Dynamic grid-list */ @Component({ - selector: 'grid-list-dynamic-example', - templateUrl: 'grid-list-dynamic-example.html', + selector : 'grid-list-dynamic-example', + templateUrl: 'grid-list-dynamic-example.html' }) -export class GridListDynamicExample { - tiles = [ - {text: 'One', cols: 3, rows: 1, color: 'lightblue'}, - {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'}, - {text: 'Three', cols: 1, rows: 1, color: 'lightpink'}, - {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'}, - ]; +export class GridListDynamicExample +{ + tiles = [ + {text : 'One', + cols : 3, + rows : 1, + color: 'lightblue' + }, + {text : 'Two', + cols : 1, + rows : 2, + color: 'lightgreen' + }, + {text : 'Three', + cols : 1, + rows : 1, + color: 'lightpink' + }, + {text : 'Four', + cols : 2, + rows : 1, + color: '#DDBDF1' + } + ]; } diff --git a/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.css b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.css index 2598f58f..dedb3e95 100644 --- a/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.css +++ b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.css @@ -1,3 +1,3 @@ -md-grid-tile { - background: lightblue; +mat-grid-tile { + background: lightblue; } diff --git a/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.html b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.html index 6651887f..c2d031ed 100644 --- a/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.html +++ b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.html @@ -1,6 +1,6 @@ - - 1 - 2 - 3 - 4 - + + 1 + 2 + 3 + 4 + diff --git a/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.ts b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.ts index dd03daef..956b738c 100644 --- a/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.ts +++ b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic grid-list */ @Component({ - selector: 'grid-list-overview-example', - styleUrls: ['grid-list-overview-example.css'], - templateUrl: 'grid-list-overview-example.html', + selector : 'grid-list-overview-example', + styleUrls : ['grid-list-overview-example.css'], + templateUrl: 'grid-list-overview-example.html' }) -export class GridListOverviewExample {} +export class GridListOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/icon-overview/icon-overview-example.html b/src/assets/angular-material-examples/icon-overview/icon-overview-example.html index dd46af80..7afdf57b 100644 --- a/src/assets/angular-material-examples/icon-overview/icon-overview-example.html +++ b/src/assets/angular-material-examples/icon-overview/icon-overview-example.html @@ -1 +1 @@ -home +home diff --git a/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts b/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts index f81416f3..a60c22c0 100644 --- a/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts +++ b/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic icons */ @Component({ - selector: 'icon-overview-example', - templateUrl: 'icon-overview-example.html', + selector : 'icon-overview-example', + templateUrl: 'icon-overview-example.html' }) -export class IconOverviewExample {} +export class IconOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/icon-svg/icon-svg-example.html b/src/assets/angular-material-examples/icon-svg/icon-svg-example.html index ac74cf79..ed7e8eb9 100644 --- a/src/assets/angular-material-examples/icon-svg/icon-svg-example.html +++ b/src/assets/angular-material-examples/icon-svg/icon-svg-example.html @@ -1 +1 @@ - + diff --git a/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts b/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts index 7bf6a01a..4cea0740 100644 --- a/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts +++ b/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts @@ -1,18 +1,20 @@ -import {Component} from '@angular/core'; -import {DomSanitizer} from '@angular/platform-browser'; -import {MdIconRegistry} from '@angular/material'; +import { Component } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +import { MatIconRegistry } from '@angular/material'; /** * @title SVG icons */ @Component({ - selector: 'icon-svg-example', - templateUrl: 'icon-svg-example.html', + selector : 'icon-svg-example', + templateUrl: 'icon-svg-example.html' }) -export class IconSvgExample { - constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) { - iconRegistry.addSvgIcon( - 'thumbs-up', - sanitizer.bypassSecurityTrustResourceUrl('assets/images/examples/thumbup-icon.svg')); - } +export class IconSvgExample +{ + constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) + { + iconRegistry.addSvgIcon( + 'thumbs-up', + sanitizer.bypassSecurityTrustResourceUrl('assets/images/examples/thumbup-icon.svg')); + } } diff --git a/src/assets/angular-material-examples/input-clearable/input-clearable-example.css b/src/assets/angular-material-examples/input-clearable/input-clearable-example.css index 55dcc576..976786fe 100644 --- a/src/assets/angular-material-examples/input-clearable/input-clearable-example.css +++ b/src/assets/angular-material-examples/input-clearable/input-clearable-example.css @@ -1,3 +1,3 @@ .example-form-field { - width: 200px; + width: 200px; } diff --git a/src/assets/angular-material-examples/input-clearable/input-clearable-example.html b/src/assets/angular-material-examples/input-clearable/input-clearable-example.html index c8be13f9..984a7eda 100644 --- a/src/assets/angular-material-examples/input-clearable/input-clearable-example.html +++ b/src/assets/angular-material-examples/input-clearable/input-clearable-example.html @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/src/assets/angular-material-examples/input-clearable/input-clearable-example.ts b/src/assets/angular-material-examples/input-clearable/input-clearable-example.ts index 3b469528..f240bf0d 100644 --- a/src/assets/angular-material-examples/input-clearable/input-clearable-example.ts +++ b/src/assets/angular-material-examples/input-clearable/input-clearable-example.ts @@ -1,13 +1,14 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Input Clearable */ @Component({ - selector: 'input-clearable-example', - templateUrl: './input-clearable-example.html', - styleUrls: ['./input-clearable-example.css'], + selector : 'input-clearable-example', + templateUrl: './input-clearable-example.html', + styleUrls : ['./input-clearable-example.css'] }) -export class InputClearableExample { - value = 'Clear me'; +export class InputClearableExample +{ + value = 'Clear me'; } diff --git a/src/assets/angular-material-examples/input-errors/input-errors-example.css b/src/assets/angular-material-examples/input-errors/input-errors-example.css index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/input-errors/input-errors-example.css +++ b/src/assets/angular-material-examples/input-errors/input-errors-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + width: 100%; } diff --git a/src/assets/angular-material-examples/input-errors/input-errors-example.html b/src/assets/angular-material-examples/input-errors/input-errors-example.html index 4434b6ea..24c0c93a 100644 --- a/src/assets/angular-material-examples/input-errors/input-errors-example.html +++ b/src/assets/angular-material-examples/input-errors/input-errors-example.html @@ -1,11 +1,11 @@
- - - - Please enter a valid email address - - - Email is required - - + + + + Please enter a valid email address + + + Email is required + +
diff --git a/src/assets/angular-material-examples/input-errors/input-errors-example.ts b/src/assets/angular-material-examples/input-errors/input-errors-example.ts index 8a2dbb86..59200fbb 100644 --- a/src/assets/angular-material-examples/input-errors/input-errors-example.ts +++ b/src/assets/angular-material-examples/input-errors/input-errors-example.ts @@ -1,5 +1,5 @@ -import {Component} from '@angular/core'; -import {FormControl, Validators} from '@angular/forms'; +import { Component } from '@angular/core'; +import { FormControl, Validators } from '@angular/forms'; const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; @@ -7,14 +7,16 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA * @title Input Errors */ @Component({ - selector: 'input-errors-example', - templateUrl: 'input-errors-example.html', - styleUrls: ['input-errors-example.css'], + selector : 'input-errors-example', + templateUrl: 'input-errors-example.html', + styleUrls : ['input-errors-example.css'] }) -export class InputErrorsExample { +export class InputErrorsExample +{ - emailFormControl = new FormControl('', [ - Validators.required, - Validators.pattern(EMAIL_REGEX)]); + emailFormControl = new FormControl('', [ + Validators.required, + Validators.pattern(EMAIL_REGEX) + ]); } diff --git a/src/assets/angular-material-examples/input-form/input-form-example.css b/src/assets/angular-material-examples/input-form/input-form-example.css index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/input-form/input-form-example.css +++ b/src/assets/angular-material-examples/input-form/input-form-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + width: 100%; } diff --git a/src/assets/angular-material-examples/input-form/input-form-example.html b/src/assets/angular-material-examples/input-form/input-form-example.html index f7abf808..234f80d2 100644 --- a/src/assets/angular-material-examples/input-form/input-form-example.html +++ b/src/assets/angular-material-examples/input-form/input-form-example.html @@ -1,36 +1,50 @@
- - - + + + - - - -
- - - -
+ + + + + +
+ + + + + + + +
-

- - - - - - -

+

+ + + + + + +

- - - - -
- - - - - - {{postalCode.value.length}} / 5 -
+ + + + + + +
+ + + + + + + + + + + {{postalCode.value.length}} / 5 + +
diff --git a/src/assets/angular-material-examples/input-form/input-form-example.ts b/src/assets/angular-material-examples/input-form/input-form-example.ts index 192f9cae..579294d4 100644 --- a/src/assets/angular-material-examples/input-form/input-form-example.ts +++ b/src/assets/angular-material-examples/input-form/input-form-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Inputs in a form */ @Component({ - selector: 'input-form-example', - templateUrl: 'input-form-example.html', - styleUrls: ['input-form-example.css'], + selector : 'input-form-example', + templateUrl: 'input-form-example.html', + styleUrls : ['input-form-example.css'] }) -export class InputFormExample {} +export class InputFormExample +{ +} diff --git a/src/assets/angular-material-examples/input-hint/input-hint-example.css b/src/assets/angular-material-examples/input-hint/input-hint-example.css index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/input-hint/input-hint-example.css +++ b/src/assets/angular-material-examples/input-hint/input-hint-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + width: 100%; } diff --git a/src/assets/angular-material-examples/input-hint/input-hint-example.html b/src/assets/angular-material-examples/input-hint/input-hint-example.html index f7e36d1d..9d652d1a 100644 --- a/src/assets/angular-material-examples/input-hint/input-hint-example.html +++ b/src/assets/angular-material-examples/input-hint/input-hint-example.html @@ -1,9 +1,9 @@
- - - Don't disclose personal info - {{message.value.length}} / 256 - - + + + Don't disclose personal info + {{message.value.length}} / 256 + +
diff --git a/src/assets/angular-material-examples/input-hint/input-hint-example.ts b/src/assets/angular-material-examples/input-hint/input-hint-example.ts index 3b3a5ebc..d8f0737b 100644 --- a/src/assets/angular-material-examples/input-hint/input-hint-example.ts +++ b/src/assets/angular-material-examples/input-hint/input-hint-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Input hints */ @Component({ - selector: 'input-hint-example', - templateUrl: 'input-hint-example.html', - styleUrls: ['input-hint-example.css'], + selector : 'input-hint-example', + templateUrl: 'input-hint-example.html', + styleUrls : ['input-hint-example.css'] }) -export class InputHintExample { } +export class InputHintExample +{ +} diff --git a/src/assets/angular-material-examples/input-overview/input-overview-example.css b/src/assets/angular-material-examples/input-overview/input-overview-example.css index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/input-overview/input-overview-example.css +++ b/src/assets/angular-material-examples/input-overview/input-overview-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + width: 100%; } diff --git a/src/assets/angular-material-examples/input-overview/input-overview-example.html b/src/assets/angular-material-examples/input-overview/input-overview-example.html index cae5b1f0..e577897f 100644 --- a/src/assets/angular-material-examples/input-overview/input-overview-example.html +++ b/src/assets/angular-material-examples/input-overview/input-overview-example.html @@ -1,5 +1,5 @@
- - - + + +
diff --git a/src/assets/angular-material-examples/input-overview/input-overview-example.ts b/src/assets/angular-material-examples/input-overview/input-overview-example.ts index b7d1f30b..50501548 100644 --- a/src/assets/angular-material-examples/input-overview/input-overview-example.ts +++ b/src/assets/angular-material-examples/input-overview/input-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic Inputs */ @Component({ - selector: 'input-overview-example', - styleUrls: ['input-overview-example.css'], - templateUrl: 'input-overview-example.html', + selector : 'input-overview-example', + styleUrls : ['input-overview-example.css'], + templateUrl: 'input-overview-example.html' }) -export class InputOverviewExample {} +export class InputOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.css b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.css index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.css +++ b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + width: 100%; } diff --git a/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.html b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.html index 25485d1f..7c62dd89 100644 --- a/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.html +++ b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.html @@ -1,9 +1,9 @@
- - +1   - - mode_edit - - + + +1   + + mode_edit + +
diff --git a/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.ts b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.ts index 00ed164c..279792f8 100644 --- a/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.ts +++ b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Input Prefixes and Suffixes */ @Component({ - selector: 'input-prefix-suffix-example', - templateUrl: 'input-prefix-suffix-example.html', - styleUrls: ['input-prefix-suffix-example.css'], + selector : 'input-prefix-suffix-example', + templateUrl: 'input-prefix-suffix-example.html', + styleUrls : ['input-prefix-suffix-example.css'] }) -export class InputPrefixSuffixExample { } +export class InputPrefixSuffixExample +{ +} diff --git a/src/assets/angular-material-examples/list-overview/list-overview-example.html b/src/assets/angular-material-examples/list-overview/list-overview-example.html index ada715ee..29d8ad7c 100644 --- a/src/assets/angular-material-examples/list-overview/list-overview-example.html +++ b/src/assets/angular-material-examples/list-overview/list-overview-example.html @@ -1,5 +1,5 @@ - - Item 1 - Item 2 - Item 3 - + + Item 1 + Item 2 + Item 3 + diff --git a/src/assets/angular-material-examples/list-overview/list-overview-example.ts b/src/assets/angular-material-examples/list-overview/list-overview-example.ts index 7912329c..fc50a3fb 100644 --- a/src/assets/angular-material-examples/list-overview/list-overview-example.ts +++ b/src/assets/angular-material-examples/list-overview/list-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic list */ @Component({ - selector: 'list-overview-example', - templateUrl: 'list-overview-example.html', + selector : 'list-overview-example', + templateUrl: 'list-overview-example.html' }) -export class ListOverviewExample {} +export class ListOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/list-sections/list-sections-example.css b/src/assets/angular-material-examples/list-sections/list-sections-example.css index 487bd8d4..745a8626 100644 --- a/src/assets/angular-material-examples/list-sections/list-sections-example.css +++ b/src/assets/angular-material-examples/list-sections/list-sections-example.css @@ -1,3 +1,3 @@ .mat-list-icon { - color: rgba(0, 0, 0, 0.54); + color: rgba(0, 0, 0, 0.54); } diff --git a/src/assets/angular-material-examples/list-sections/list-sections-example.html b/src/assets/angular-material-examples/list-sections/list-sections-example.html index 38d20f97..10d6b892 100644 --- a/src/assets/angular-material-examples/list-sections/list-sections-example.html +++ b/src/assets/angular-material-examples/list-sections/list-sections-example.html @@ -1,15 +1,15 @@ - -

Folders

- - folder -

{{folder.name}}

-

{{folder.updated | date}}

- - -

Notes

- - note -

{{note.name}}

-

{{note.updated | date}}

- - + +

Folders

+ + folder +

{{folder.name}}

+

{{folder.updated | date}}

+ + +

Notes

+ + note +

{{note.name}}

+

{{note.updated | date}}

+ + diff --git a/src/assets/angular-material-examples/list-sections/list-sections-example.ts b/src/assets/angular-material-examples/list-sections/list-sections-example.ts index 63e7e4c6..e5d232ec 100644 --- a/src/assets/angular-material-examples/list-sections/list-sections-example.ts +++ b/src/assets/angular-material-examples/list-sections/list-sections-example.ts @@ -1,36 +1,37 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title List with sections */ @Component({ - selector: 'list-sections-example', - styleUrls: ['list-sections-example.css'], - templateUrl: 'list-sections-example.html', + selector : 'list-sections-example', + styleUrls : ['list-sections-example.css'], + templateUrl: 'list-sections-example.html' }) -export class ListSectionsExample { - folders = [ - { - name: 'Photos', - updated: new Date('1/1/16'), - }, - { - name: 'Recipes', - updated: new Date('1/17/16'), - }, - { - name: 'Work', - updated: new Date('1/28/16'), - } - ]; - notes = [ - { - name: 'Vacation Itinerary', - updated: new Date('2/20/16'), - }, - { - name: 'Kitchen Remodel', - updated: new Date('1/18/16'), - } - ]; +export class ListSectionsExample +{ + folders = [ + { + name : 'Photos', + updated: new Date('1/1/16') + }, + { + name : 'Recipes', + updated: new Date('1/17/16') + }, + { + name : 'Work', + updated: new Date('1/28/16') + } + ]; + notes = [ + { + name : 'Vacation Itinerary', + updated: new Date('2/20/16') + }, + { + name : 'Kitchen Remodel', + updated: new Date('1/18/16') + } + ]; } diff --git a/src/assets/angular-material-examples/list-selection/list-selection-example.html b/src/assets/angular-material-examples/list-selection/list-selection-example.html index cd1d9f07..e3b6e89a 100644 --- a/src/assets/angular-material-examples/list-selection/list-selection-example.html +++ b/src/assets/angular-material-examples/list-selection/list-selection-example.html @@ -1,9 +1,9 @@ - - - {{shoe}} - - + + + {{shoe}} + +

- Options selected: {{shoes.selectedOptions.selected.length}} + Options selected: {{shoes.selectedOptions.selected.length}}

diff --git a/src/assets/angular-material-examples/list-selection/list-selection-example.ts b/src/assets/angular-material-examples/list-selection/list-selection-example.ts index 644d3d8a..c3d226b2 100644 --- a/src/assets/angular-material-examples/list-selection/list-selection-example.ts +++ b/src/assets/angular-material-examples/list-selection/list-selection-example.ts @@ -1,13 +1,14 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title List with selection */ @Component({ - selector: 'list-selection-example', - styleUrls: ['list-selection-example.css'], - templateUrl: 'list-selection-example.html', + selector : 'list-selection-example', + styleUrls : ['list-selection-example.css'], + templateUrl: 'list-selection-example.html' }) -export class ListSelectionExample { - typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; +export class ListSelectionExample +{ + typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; } diff --git a/src/assets/angular-material-examples/menu-icons/menu-icons-example.html b/src/assets/angular-material-examples/menu-icons/menu-icons-example.html index e1494245..d7d0768d 100644 --- a/src/assets/angular-material-examples/menu-icons/menu-icons-example.html +++ b/src/assets/angular-material-examples/menu-icons/menu-icons-example.html @@ -1,17 +1,17 @@ - - - - - - + + + + + diff --git a/src/assets/angular-material-examples/menu-icons/menu-icons-example.ts b/src/assets/angular-material-examples/menu-icons/menu-icons-example.ts index 6c474a57..79801a6c 100644 --- a/src/assets/angular-material-examples/menu-icons/menu-icons-example.ts +++ b/src/assets/angular-material-examples/menu-icons/menu-icons-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Menu with icons */ @Component({ - selector: 'menu-icons-example', - templateUrl: 'menu-icons-example.html', - styleUrls: ['menu-icons-example.css'], + selector : 'menu-icons-example', + templateUrl: 'menu-icons-example.html', + styleUrls : ['menu-icons-example.css'] }) -export class MenuIconsExample {} +export class MenuIconsExample +{ +} diff --git a/src/assets/angular-material-examples/menu-overview/menu-overview-example.html b/src/assets/angular-material-examples/menu-overview/menu-overview-example.html index 2b5d246c..39b83528 100644 --- a/src/assets/angular-material-examples/menu-overview/menu-overview-example.html +++ b/src/assets/angular-material-examples/menu-overview/menu-overview-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/assets/angular-material-examples/menu-overview/menu-overview-example.ts b/src/assets/angular-material-examples/menu-overview/menu-overview-example.ts index 2858d3e7..78c25cf7 100644 --- a/src/assets/angular-material-examples/menu-overview/menu-overview-example.ts +++ b/src/assets/angular-material-examples/menu-overview/menu-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic menu */ @Component({ - selector: 'menu-overview-example', - templateUrl: 'menu-overview-example.html', - styleUrls: ['menu-overview-example.css'], + selector : 'menu-overview-example', + templateUrl: 'menu-overview-example.html', + styleUrls : ['menu-overview-example.css'] }) -export class MenuOverviewExample {} +export class MenuOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/nested-menu/nested-menu-example.html b/src/assets/angular-material-examples/nested-menu/nested-menu-example.html index bbfde3b9..99b9f7e6 100644 --- a/src/assets/angular-material-examples/nested-menu/nested-menu-example.html +++ b/src/assets/angular-material-examples/nested-menu/nested-menu-example.html @@ -1,47 +1,47 @@ - + - - - - + + + + - - - - - - - + + + + + + + - - - - - - - - - + + + + + + + + + - - - - - - - + + + + + + + - - - - - - + + + + + + - - - - - - - + + + + + + + diff --git a/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts b/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts index d9d7b81e..86054918 100644 --- a/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts +++ b/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Nested menu */ @Component({ - selector: 'nested-menu-example', - templateUrl: 'nested-menu-example.html', - styleUrls: ['nested-menu-example.css'] + selector : 'nested-menu-example', + templateUrl: 'nested-menu-example.html', + styleUrls : ['nested-menu-example.css'] }) -export class NestedMenuExample {} +export class NestedMenuExample +{ +} diff --git a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.html b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.html index e1ce734f..66f1bf90 100644 --- a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.html +++ b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.html @@ -1,28 +1,28 @@ - - List length: - - + + List length: + + - - Page size: - - - - Page size options: - - + + Page size: + + + + Page size options: + + - - + +
-
Page Change Event Properties
-
List length: {{pageEvent.length}}
-
Page size: {{pageEvent.pageSize}}
-
Page index: {{pageEvent.pageIndex}}
+
Page Change Event Properties
+
List length: {{pageEvent.length}}
+
Page size: {{pageEvent.pageSize}}
+
Page index: {{pageEvent.pageIndex}}
diff --git a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts index ba3df8db..8a63b15e 100644 --- a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts +++ b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts @@ -1,23 +1,25 @@ -import {Component} from '@angular/core'; -import {PageEvent} from '@angular/material'; +import { Component } from '@angular/core'; +import { PageEvent } from '@angular/material'; /** * @title Configurable paginator */ @Component({ - selector: 'paginator-configurable-example', - templateUrl: 'paginator-configurable-example.html', + selector : 'paginator-configurable-example', + templateUrl: 'paginator-configurable-example.html' }) -export class PaginatorConfigurableExample { - // MdPaginator Inputs - length = 100; - pageSize = 10; - pageSizeOptions = [5, 10, 25, 100]; +export class PaginatorConfigurableExample +{ + // MdPaginator Inputs + length = 100; + pageSize = 10; + pageSizeOptions = [5, 10, 25, 100]; - // MdPaginator Output - pageEvent: PageEvent; + // MdPaginator Output + pageEvent: PageEvent; - setPageSizeOptions(setPageSizeOptionsInput: string) { - this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str); - } + setPageSizeOptions(setPageSizeOptionsInput: string) + { + this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str); + } } diff --git a/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.html b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.html index 010a9e5d..61ba03e5 100644 --- a/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.html +++ b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.html @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.ts b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.ts index b2d305e1..82b583a9 100644 --- a/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.ts +++ b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Paginator */ @Component({ - selector: 'paginator-overview-example', - templateUrl: 'paginator-overview-example.html', + selector : 'paginator-overview-example', + templateUrl: 'paginator-overview-example.html' }) -export class PaginatorOverviewExample {} +export class PaginatorOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.css b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.css index 558293fb..6551ff13 100644 --- a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.css +++ b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.css @@ -1,14 +1,14 @@ .example-h2 { - margin: 10px; + margin: 10px; } .example-section { - display: flex; - align-content: center; - align-items: center; - height: 60px; + display: flex; + align-content: center; + align-items: center; + height: 60px; } .example-margin { - margin: 0 10px; + margin: 0 10px; } diff --git a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html index 93937b77..8974b9bc 100644 --- a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html +++ b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html @@ -1,63 +1,63 @@ - - -

Progress bar configuration

+ + +

Progress bar configuration

-
- - - - Primary - - - Accent - - - Warn - - -
+
+ + + + Primary + + + Accent + + + Warn + + +
-
- - - - Determinate - - - Indeterminate - - - Buffer - - - Query - - -
+
+ + + + Determinate + + + Indeterminate + + + Buffer + + + Query + + +
-
- - -
-
- - -
- - +
+ + +
+
+ + +
+ + - - -

Result

+ + +

Result

-
- - -
- - +
+ + +
+ + diff --git a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.ts b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.ts index 101408dc..d5dd10af 100644 --- a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.ts +++ b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.ts @@ -1,16 +1,17 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Configurable progress-bar */ @Component({ - selector: 'progress-bar-configurable-example', - templateUrl: 'progress-bar-configurable-example.html', - styleUrls: ['progress-bar-configurable-example.css'], + selector : 'progress-bar-configurable-example', + templateUrl: 'progress-bar-configurable-example.html', + styleUrls : ['progress-bar-configurable-example.css'] }) -export class ProgressBarConfigurableExample { - color = 'primary'; - mode = 'determinate'; - value = 50; - bufferValue = 75; +export class ProgressBarConfigurableExample +{ + color = 'primary'; + mode = 'determinate'; + value = 50; + bufferValue = 75; } diff --git a/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.html b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.html index 8ab16e9c..f6ba0575 100644 --- a/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.html +++ b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.html @@ -1 +1 @@ - + diff --git a/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.ts b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.ts index 67a6c94d..e2e35861 100644 --- a/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.ts +++ b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic progress-bar */ @Component({ - selector: 'progress-bar-overview-example', - templateUrl: 'progress-bar-overview-example.html', + selector : 'progress-bar-overview-example', + templateUrl: 'progress-bar-overview-example.html' }) -export class ProgressBarOverviewExample {} +export class ProgressBarOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.css b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.css index 558293fb..6551ff13 100644 --- a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.css +++ b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.css @@ -1,14 +1,14 @@ .example-h2 { - margin: 10px; + margin: 10px; } .example-section { - display: flex; - align-content: center; - align-items: center; - height: 60px; + display: flex; + align-content: center; + align-items: center; + height: 60px; } .example-margin { - margin: 0 10px; + margin: 0 10px; } diff --git a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html index 1ba3183a..d2106276 100644 --- a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html +++ b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html @@ -1,49 +1,49 @@ - - -

Progress spinner configuration

+ + +

Progress spinner configuration

-
- - - - Primary - - - Accent - - - Warn - - -
+
+ + + + Primary + + + Accent + + + Warn + + +
-
- - - - Determinate - - - Indeterminate - - -
+
+ + + + Determinate + + + Indeterminate + + +
-
- - -
- - - - -

Result

+
+ + +
+ + + + +

Result

- - - - + + + + diff --git a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts index ed1ca870..b70c2f2b 100644 --- a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts +++ b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts @@ -1,15 +1,16 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Configurable progress spinner */ @Component({ - selector: 'progress-spinner-configurable-example', - templateUrl: 'progress-spinner-configurable-example.html', - styleUrls: ['progress-spinner-configurable-example.css'], + selector : 'progress-spinner-configurable-example', + templateUrl: 'progress-spinner-configurable-example.html', + styleUrls : ['progress-spinner-configurable-example.css'] }) -export class ProgressSpinnerConfigurableExample { - color = 'primary'; - mode = 'determinate'; - value = 50; +export class ProgressSpinnerConfigurableExample +{ + color = 'primary'; + mode = 'determinate'; + value = 50; } diff --git a/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.html b/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.html index cd768c67..34e51f70 100644 --- a/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.html +++ b/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.html @@ -1 +1 @@ - + diff --git a/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.ts b/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.ts index 67ada8ad..45fd5825 100644 --- a/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.ts +++ b/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic progress-spinner */ @Component({ - selector: 'progress-spinner-overview-example', - templateUrl: 'progress-spinner-overview-example.html', + selector : 'progress-spinner-overview-example', + templateUrl: 'progress-spinner-overview-example.html' }) -export class ProgressSpinnerOverviewExample {} +export class ProgressSpinnerOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css index f70c1b3b..6a70beb0 100644 --- a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css +++ b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css @@ -1,12 +1,12 @@ .example-radio-group { - display: inline-flex; - flex-direction: column; + display: inline-flex; + flex-direction: column; } .example-radio-button { - margin: 5px; + margin: 5px; } .example-selected-value { - margin: 15px 0; + margin: 15px 0; } diff --git a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html index 108971b5..e9adb887 100644 --- a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html +++ b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html @@ -1,6 +1,6 @@ - - - {{season}} - - + + + {{season}} + +
Your favorite season is: {{favoriteSeason}}
diff --git a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts index 52fc5157..a2522055 100644 --- a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts +++ b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts @@ -1,20 +1,21 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Radios with ngModel */ @Component({ - selector: 'radio-ng-model-example', - templateUrl: 'radio-ng-model-example.html', - styleUrls: ['radio-ng-model-example.css'], + selector : 'radio-ng-model-example', + templateUrl: 'radio-ng-model-example.html', + styleUrls : ['radio-ng-model-example.css'] }) -export class RadioNgModelExample { - favoriteSeason: string; +export class RadioNgModelExample +{ + favoriteSeason: string; - seasons = [ - 'Winter', - 'Spring', - 'Summer', - 'Autumn', - ]; + seasons = [ + 'Winter', + 'Spring', + 'Summer', + 'Autumn' + ]; } diff --git a/src/assets/angular-material-examples/radio-overview/radio-overview-example.html b/src/assets/angular-material-examples/radio-overview/radio-overview-example.html index 4038381c..d1167ae7 100644 --- a/src/assets/angular-material-examples/radio-overview/radio-overview-example.html +++ b/src/assets/angular-material-examples/radio-overview/radio-overview-example.html @@ -1,4 +1,4 @@ - - Option 1 - Option 2 - + + Option 1 + Option 2 + diff --git a/src/assets/angular-material-examples/radio-overview/radio-overview-example.ts b/src/assets/angular-material-examples/radio-overview/radio-overview-example.ts index 916ce663..aab6e208 100644 --- a/src/assets/angular-material-examples/radio-overview/radio-overview-example.ts +++ b/src/assets/angular-material-examples/radio-overview/radio-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic radios */ @Component({ - selector: 'radio-overview-example', - templateUrl: 'radio-overview-example.html', + selector : 'radio-overview-example', + templateUrl: 'radio-overview-example.html' }) -export class RadioOverviewExample {} +export class RadioOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/select-form/select-form-example.html b/src/assets/angular-material-examples/select-form/select-form-example.html index 6dea33cc..94157c4d 100644 --- a/src/assets/angular-material-examples/select-form/select-form-example.html +++ b/src/assets/angular-material-examples/select-form/select-form-example.html @@ -1,9 +1,9 @@
- - - {{food.viewValue}} - - + + + {{food.viewValue}} + + -

Selected value: {{selectedValue}}

+

Selected value: {{selectedValue}}

diff --git a/src/assets/angular-material-examples/select-form/select-form-example.ts b/src/assets/angular-material-examples/select-form/select-form-example.ts index 0bb2c305..afd365ae 100644 --- a/src/assets/angular-material-examples/select-form/select-form-example.ts +++ b/src/assets/angular-material-examples/select-form/select-form-example.ts @@ -1,18 +1,25 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Select in a form */ @Component({ - selector: 'select-form-example', - templateUrl: 'select-form-example.html', + selector : 'select-form-example', + templateUrl: 'select-form-example.html' }) -export class SelectFormExample { - selectedValue: string; +export class SelectFormExample +{ + selectedValue: string; - foods = [ - {value: 'steak-0', viewValue: 'Steak'}, - {value: 'pizza-1', viewValue: 'Pizza'}, - {value: 'tacos-2', viewValue: 'Tacos'} - ]; + foods = [ + {value : 'steak-0', + viewValue: 'Steak' + }, + {value : 'pizza-1', + viewValue: 'Pizza' + }, + {value : 'tacos-2', + viewValue: 'Tacos' + } + ]; } diff --git a/src/assets/angular-material-examples/select-overview/select-overview-example.html b/src/assets/angular-material-examples/select-overview/select-overview-example.html index a4017ca5..47e5467f 100644 --- a/src/assets/angular-material-examples/select-overview/select-overview-example.html +++ b/src/assets/angular-material-examples/select-overview/select-overview-example.html @@ -1,5 +1,5 @@ - - - {{ food.viewValue }} - - + + + {{ food.viewValue }} + + diff --git a/src/assets/angular-material-examples/select-overview/select-overview-example.ts b/src/assets/angular-material-examples/select-overview/select-overview-example.ts index a6a2ff82..7e88e407 100644 --- a/src/assets/angular-material-examples/select-overview/select-overview-example.ts +++ b/src/assets/angular-material-examples/select-overview/select-overview-example.ts @@ -1,16 +1,23 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic select */ @Component({ - selector: 'select-overview-example', - templateUrl: 'select-overview-example.html', + selector : 'select-overview-example', + templateUrl: 'select-overview-example.html' }) -export class SelectOverviewExample { - foods = [ - {value: 'steak-0', viewValue: 'Steak'}, - {value: 'pizza-1', viewValue: 'Pizza'}, - {value: 'tacos-2', viewValue: 'Tacos'} - ]; +export class SelectOverviewExample +{ + foods = [ + {value : 'steak-0', + viewValue: 'Steak' + }, + {value : 'pizza-1', + viewValue: 'Pizza' + }, + {value : 'tacos-2', + viewValue: 'Tacos' + } + ]; } diff --git a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.css b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.css index 6d58f0f2..d98e36e9 100644 --- a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.css +++ b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.css @@ -1,26 +1,26 @@ .example-sidenav-fab-container { - width: 500px; - height: 300px; - border: 1px solid rgba(0, 0, 0, 0.5); + width: 500px; + height: 300px; + border: 1px solid rgba(0, 0, 0, 0.5); } -.example-sidenav-fab-container md-sidenav { - max-width: 200px; +.example-sidenav-fab-container mat-sidenav { + max-width: 200px; } .example-sidenav-fab-container .mat-sidenav-content, -.example-sidenav-fab-container md-sidenav { - display: flex; - overflow: visible; +.example-sidenav-fab-container mat-sidenav { + display: flex; + overflow: visible; } .example-scrolling-content { - overflow: auto; - height: 100%; + overflow: auto; + height: 100%; } .example-fab.mat-mini-fab { - position: absolute; - right: 20px; - bottom: 10px; + position: absolute; + right: 20px; + bottom: 10px; } diff --git a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.html b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.html index f194c098..319ba69f 100644 --- a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.html +++ b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.html @@ -1,32 +1,32 @@ - - - +
+ Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, + fusce vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam + nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna + aliquam magna. Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor + vel urna occaecat cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, + ligula ipsum dui sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu + enim fringilla. Arcu erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, + tristique vehicula nibh ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. + Taciti dui, sapien consectetuer. +
+ +
- Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, - fusce vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam - nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna - aliquam magna. Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor - vel urna occaecat cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, - ligula ipsum dui sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu - enim fringilla. Arcu erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, - tristique vehicula nibh ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. - Taciti dui, sapien consectetuer. + Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce + vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam nunc id, + neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna aliquam magna. + Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor vel urna occaecat + cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, ligula ipsum dui + sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu enim fringilla. Arcu + erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, tristique vehicula nibh + ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien + consectetuer.
- - -
- Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce - vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam nunc id, - neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna aliquam magna. - Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor vel urna occaecat - cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, ligula ipsum dui - sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu enim fringilla. Arcu - erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, tristique vehicula nibh - ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien - consectetuer. -
- + diff --git a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.ts b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.ts index 4af25f47..17945be6 100644 --- a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.ts +++ b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.ts @@ -1,13 +1,15 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; /** * @title Sidenav with a FAB */ @Component({ - selector: 'sidenav-fab-example', - templateUrl: 'sidenav-fab-example.html', - styleUrls: ['sidenav-fab-example.css'], - encapsulation: ViewEncapsulation.None, - preserveWhitespaces: false, + selector : 'sidenav-fab-example', + templateUrl : 'sidenav-fab-example.html', + styleUrls : ['sidenav-fab-example.css'], + encapsulation : ViewEncapsulation.None, + preserveWhitespaces: false }) -export class SidenavFabExample {} +export class SidenavFabExample +{ +} diff --git a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.css b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.css index 8ab00588..a49bb6f8 100644 --- a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.css +++ b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.css @@ -1,16 +1,16 @@ .example-container { - width: 500px; - height: 300px; - border: 1px solid rgba(0, 0, 0, 0.5); + width: 500px; + height: 300px; + border: 1px solid rgba(0, 0, 0, 0.5); } .example-sidenav-content { - display: flex; - height: 100%; - align-items: center; - justify-content: center; + display: flex; + height: 100%; + align-items: center; + justify-content: center; } .example-sidenav { - padding: 20px; + padding: 20px; } diff --git a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.html b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.html index 757e4b2d..b1b6ea66 100644 --- a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.html +++ b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.html @@ -1,12 +1,12 @@ - - - Jolly good! - + + + Jolly good! + -
- -
+
+ +
- + diff --git a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.ts b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.ts index 5496f3f4..4c665e2f 100644 --- a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.ts +++ b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic sidenav */ @Component({ - selector: 'sidenav-overview-example', - templateUrl: 'sidenav-overview-example.html', - styleUrls: ['sidenav-overview-example.css'], + selector : 'sidenav-overview-example', + templateUrl: 'sidenav-overview-example.html', + styleUrls : ['sidenav-overview-example.css'] }) -export class SidenavOverviewExample {} +export class SidenavOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.css b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.css index 060532ee..d448a57e 100644 --- a/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.css +++ b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.css @@ -1,14 +1,14 @@ .example-h2 { - margin: 10px; + margin: 10px; } .example-section { - display: flex; - align-content: center; - align-items: center; - height: 60px; + display: flex; + align-content: center; + align-items: center; + height: 60px; } .example-margin { - margin: 10px; + margin: 10px; } diff --git a/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html index 88099f4b..f20a297c 100644 --- a/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html +++ b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html @@ -1,44 +1,44 @@ - - -

Slider configuration

+ + +

Slider configuration

-
- - - - Primary - - - Accent - - - Warn - - -
+
+ + + + Primary + + + Accent + + + Warn + + +
-
- Checked -
+
+ Checked +
-
- Disabled -
- - +
+ Disabled +
+ + - - -

Result

+ + +

Result

-
- - Slide me! - -
- - +
+ + Slide me! + +
+ + diff --git a/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts index 17835efb..53cebae7 100644 --- a/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts +++ b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts @@ -1,15 +1,16 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Configurable slide-toggle */ @Component({ - selector: 'slide-toggle-configurable-example', - templateUrl: 'slide-toggle-configurable-example.html', - styleUrls: ['slide-toggle-configurable-example.css'], + selector : 'slide-toggle-configurable-example', + templateUrl: 'slide-toggle-configurable-example.html', + styleUrls : ['slide-toggle-configurable-example.css'] }) -export class SlideToggleConfigurableExample { - color = 'accent'; - checked = false; - disabled = false; +export class SlideToggleConfigurableExample +{ + color = 'accent'; + checked = false; + disabled = false; } diff --git a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.css b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.css index 8567e7f8..6f923bcb 100644 --- a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.css +++ b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.css @@ -1,4 +1,4 @@ -.example-form md-slide-toggle { - margin: 8px 0; - display: block; +.example-form mat-slide-toggle { + margin: 8px 0; + display: block; } diff --git a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html index 0a2b897d..d51595e3 100644 --- a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html +++ b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html @@ -1,25 +1,25 @@

Slide Toggle using a simple NgModel.

-Slide Toggle Checked: {{ isChecked }} +Slide Toggle Checked: {{ isChecked }}

Slide Toggle inside of a Template-driven form

- Enable Wifi - Accept Terms of Service + Enable Wifi + Accept Terms of Service - +

Slide Toggle inside of a Reactive form

- Enable Wifi - Accept Terms of Service + Enable Wifi + Accept Terms of Service -

Form Group Status: {{ formGroup.status}}

+

Form Group Status: {{ formGroup.status}}

- +
diff --git a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts index 2636c474..2fa487ff 100644 --- a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts +++ b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts @@ -1,26 +1,29 @@ -import {Component} from '@angular/core'; -import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; /** * @title Slide-toggle with forms */ @Component({ - selector: 'slide-toggle-forms-example', - templateUrl: './slide-toggle-forms-example.html', - styleUrls: ['./slide-toggle-forms-example.css'], + selector : 'slide-toggle-forms-example', + templateUrl: './slide-toggle-forms-example.html', + styleUrls : ['./slide-toggle-forms-example.css'] }) -export class SlideToggleFormsExample { - isChecked = true; - formGroup: FormGroup; +export class SlideToggleFormsExample +{ + isChecked = true; + formGroup: FormGroup; - constructor(formBuilder: FormBuilder) { - this.formGroup = formBuilder.group({ - enableWifi: '', - acceptTerms: ['', Validators.requiredTrue] - }); - } + constructor(formBuilder: FormBuilder) + { + this.formGroup = formBuilder.group({ + enableWifi : '', + acceptTerms: ['', Validators.requiredTrue] + }); + } - onFormSubmit(formValue: any) { - alert(JSON.stringify(formValue, null, 2)); - } + onFormSubmit(formValue: any) + { + alert(JSON.stringify(formValue, null, 2)); + } } diff --git a/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.html b/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.html index 6b9586e1..d9d6ab19 100644 --- a/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.html +++ b/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.html @@ -1 +1 @@ -Slide me! +Slide me! diff --git a/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.ts b/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.ts index 6ed08696..1b378976 100644 --- a/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.ts +++ b/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic slide-toggles */ @Component({ - selector: 'slide-toggle-overview-example', - templateUrl: 'slide-toggle-overview-example.html', + selector : 'slide-toggle-overview-example', + templateUrl: 'slide-toggle-overview-example.html' }) -export class SlideToggleOverviewExample {} +export class SlideToggleOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.css b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.css index 1f954ba8..27d202ff 100644 --- a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.css +++ b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.css @@ -1,22 +1,22 @@ .example-h2 { - margin: 10px; + margin: 10px; } .example-section { - display: flex; - align-content: center; - align-items: center; - height: 60px; + display: flex; + align-content: center; + align-items: center; + height: 60px; } .example-margin { - margin: 10px; + margin: 10px; } .mat-slider-horizontal { - width: 300px; + width: 300px; } .mat-slider-vertical { - height: 300px; + height: 300px; } diff --git a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.html b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.html index 5eb3214f..13c1bbea 100644 --- a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.html +++ b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.html @@ -1,63 +1,63 @@ - - -

Slider configuration

+ + +

Slider configuration

-
- - - - - - - - - - - - -
+
+ + + + + + + + + + + + +
-
- Show ticks - - Auto ticks - - - - -
+
+ Show ticks + + Auto ticks + + + + +
-
- Show thumb label -
+
+ Show thumb label +
-
- Vertical - Inverted -
+
+ Vertical + Inverted +
-
- Disabled -
+
+ Disabled +
- - + + - - -

Result

+ + +

Result

- - - - + + + + diff --git a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts index caee9ab5..a95d96e0 100644 --- a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts +++ b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts @@ -1,32 +1,37 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; /** * @title Configurable slider */ @Component({ - selector: 'slider-configurable-example', - templateUrl: 'slider-configurable-example.html', - styleUrls: ['slider-configurable-example.css'], - encapsulation: ViewEncapsulation.None, - preserveWhitespaces: false, + selector : 'slider-configurable-example', + templateUrl : 'slider-configurable-example.html', + styleUrls : ['slider-configurable-example.css'], + encapsulation : ViewEncapsulation.None, + preserveWhitespaces: false }) -export class SliderConfigurableExample { - autoTicks = false; - disabled = false; - invert = false; - max = 100; - min = 0; - showTicks = false; - step = 1; - thumbLabel = false; - value = 0; - vertical = false; +export class SliderConfigurableExample +{ + autoTicks = false; + disabled = false; + invert = false; + max = 100; + min = 0; + showTicks = false; + step = 1; + thumbLabel = false; + value = 0; + vertical = false; - get tickInterval(): number | 'auto' { - return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : 0; - } - set tickInterval(v) { - this._tickInterval = Number(v); - } - private _tickInterval = 1; + get tickInterval(): number | 'auto' + { + return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : 0; + } + + set tickInterval(v) + { + this._tickInterval = Number(v); + } + + private _tickInterval = 1; } diff --git a/src/assets/angular-material-examples/slider-overview/slider-overview-example.css b/src/assets/angular-material-examples/slider-overview/slider-overview-example.css index 8dfe08cc..3ed65dee 100644 --- a/src/assets/angular-material-examples/slider-overview/slider-overview-example.css +++ b/src/assets/angular-material-examples/slider-overview/slider-overview-example.css @@ -1,4 +1,4 @@ /** No CSS for this example */ -md-slider { - width: 300px; +mat-slider { + width: 300px; } diff --git a/src/assets/angular-material-examples/slider-overview/slider-overview-example.html b/src/assets/angular-material-examples/slider-overview/slider-overview-example.html index 9a92c8f8..49162f5f 100644 --- a/src/assets/angular-material-examples/slider-overview/slider-overview-example.html +++ b/src/assets/angular-material-examples/slider-overview/slider-overview-example.html @@ -1 +1 @@ - + diff --git a/src/assets/angular-material-examples/slider-overview/slider-overview-example.ts b/src/assets/angular-material-examples/slider-overview/slider-overview-example.ts index 3284b3ae..650285c8 100644 --- a/src/assets/angular-material-examples/slider-overview/slider-overview-example.ts +++ b/src/assets/angular-material-examples/slider-overview/slider-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic slider */ @Component({ - selector: 'slider-overview-example', - templateUrl: 'slider-overview-example.html', - styleUrls: ['slider-overview-example.css'], + selector : 'slider-overview-example', + templateUrl: 'slider-overview-example.html', + styleUrls : ['slider-overview-example.css'] }) -export class SliderOverviewExample {} +export class SliderOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.css b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.css index fa7dc674..b8499867 100644 --- a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.css +++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.css @@ -1,3 +1,3 @@ .example-pizza-party { - color: hotpink; + color: hotpink; } diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.html b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.html index cfba7c45..eef71b71 100644 --- a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.html +++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.html @@ -1,3 +1,3 @@ - Pizza party!!! 🍕 + Pizza party!!! 🍕 diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html index 69fe01bc..655e4a14 100644 --- a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html +++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html @@ -1,3 +1,3 @@ - diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts index 8aac00a1..5edd96bb 100644 --- a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts +++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts @@ -1,27 +1,32 @@ -import {Component} from '@angular/core'; -import {MdSnackBar} from '@angular/material'; +import { Component } from '@angular/core'; +import { MatSnackBar } from '@angular/material'; /** * @title Snack-bar with a custom component */ @Component({ - selector: 'snack-bar-component-example', - templateUrl: 'snack-bar-component-example.html', + selector : 'snack-bar-component-example', + templateUrl: 'snack-bar-component-example.html' }) -export class SnackBarComponentExample { - constructor(public snackBar: MdSnackBar) {} +export class SnackBarComponentExample +{ + constructor(public snackBar: MatSnackBar) + { + } - openSnackBar() { - this.snackBar.openFromComponent(PizzaPartyComponent, { - duration: 500, - }); - } + openSnackBar() + { + this.snackBar.openFromComponent(PizzaPartyComponent, { + duration: 500 + }); + } } - @Component({ - selector: 'snack-bar-component-example-snack', - templateUrl: 'snack-bar-component-example-snack.html', - styleUrls: ['snack-bar-component-example-snack.css'], + selector : 'snack-bar-component-example-snack', + templateUrl: 'snack-bar-component-example-snack.html', + styleUrls : ['snack-bar-component-example-snack.css'] }) -export class PizzaPartyComponent {} +export class PizzaPartyComponent +{ +} diff --git a/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.html b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.html index 757612c1..2b60229e 100644 --- a/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.html +++ b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.html @@ -1,9 +1,9 @@ - - - + + + - - - + + + - + diff --git a/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts index 4d1980dc..a973e4ce 100644 --- a/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts +++ b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts @@ -1,19 +1,23 @@ -import {Component} from '@angular/core'; -import {MdSnackBar} from '@angular/material'; +import { Component } from '@angular/core'; +import { MatSnackBar } from '@angular/material'; /** * @title Basic snack-bar */ @Component({ - selector: 'snack-bar-overview-example', - templateUrl: 'snack-bar-overview-example.html', + selector : 'snack-bar-overview-example', + templateUrl: 'snack-bar-overview-example.html' }) -export class SnackBarOverviewExample { - constructor(public snackBar: MdSnackBar) {} +export class SnackBarOverviewExample +{ + constructor(public snackBar: MatSnackBar) + { + } - openSnackBar(message: string, action: string) { - this.snackBar.open(message, action, { - duration: 2000, - }); - } + openSnackBar(message: string, action: string) + { + this.snackBar.open(message, action, { + duration: 2000 + }); + } } diff --git a/src/assets/angular-material-examples/sort-overview/sort-overview-example.css b/src/assets/angular-material-examples/sort-overview/sort-overview-example.css index 5d2cd6d6..a7768c59 100644 --- a/src/assets/angular-material-examples/sort-overview/sort-overview-example.css +++ b/src/assets/angular-material-examples/sort-overview/sort-overview-example.css @@ -1,3 +1,3 @@ .mat-sort-header-container { - align-items: center; + align-items: center; } diff --git a/src/assets/angular-material-examples/sort-overview/sort-overview-example.html b/src/assets/angular-material-examples/sort-overview/sort-overview-example.html index 342f3855..93850c7e 100644 --- a/src/assets/angular-material-examples/sort-overview/sort-overview-example.html +++ b/src/assets/angular-material-examples/sort-overview/sort-overview-example.html @@ -1,17 +1,17 @@ - - - - - - - - +
Dessert (100g)CaloriesFat (g)Carbs (g)Protein (g)
+ + + + + + + - - - - - - - + + + + + + +
Dessert (100g)CaloriesFat (g)Carbs (g)Protein (g)
{{dessert.name}}{{dessert.calories}}{{dessert.fat}}{{dessert.carbs}}{{dessert.protein}}
{{dessert.name}}{{dessert.calories}}{{dessert.fat}}{{dessert.carbs}}{{dessert.protein}}
diff --git a/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts b/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts index 58b19b39..939ead29 100644 --- a/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts +++ b/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts @@ -1,50 +1,87 @@ -import {Component} from '@angular/core'; -import {Sort} from '@angular/material'; +import { Component } from '@angular/core'; +import { Sort } from '@angular/material'; /** * @title Sorting overview */ @Component({ - selector: 'sort-overview-example', - templateUrl: 'sort-overview-example.html', - styleUrls: ['sort-overview-example.css'], + selector : 'sort-overview-example', + templateUrl: 'sort-overview-example.html', + styleUrls : ['sort-overview-example.css'] }) -export class SortOverviewExample { - desserts = [ - {name: 'Frozen yogurt', calories: '159', fat: '6', carbs: '24', protein: '4'}, - {name: 'Ice cream sandwich', calories: '237', fat: '9', carbs: '37', protein: '4'}, - {name: 'Eclair', calories: '262', fat: '16', carbs: '24', protein: '6'}, - {name: 'Cupcake', calories: '305', fat: '4', carbs: '67', protein: '4'}, - {name: 'Gingerbread', calories: '356', fat: '16', carbs: '49', protein: '4'}, - ]; +export class SortOverviewExample +{ + desserts = [ + {name : 'Frozen yogurt', + calories: '159', + fat : '6', + carbs : '24', + protein : '4' + }, + {name : 'Ice cream sandwich', + calories: '237', + fat : '9', + carbs : '37', + protein : '4' + }, + {name : 'Eclair', + calories: '262', + fat : '16', + carbs : '24', + protein : '6' + }, + {name : 'Cupcake', + calories: '305', + fat : '4', + carbs : '67', + protein : '4' + }, + {name : 'Gingerbread', + calories: '356', + fat : '16', + carbs : '49', + protein : '4' + } + ]; - sortedData; + sortedData; - constructor() { - this.sortedData = this.desserts.slice(); - } - - sortData(sort: Sort) { - const data = this.desserts.slice(); - if (!sort.active || sort.direction == '') { - this.sortedData = data; - return; + constructor() + { + this.sortedData = this.desserts.slice(); } - this.sortedData = data.sort((a, b) => { - let isAsc = sort.direction == 'asc'; - switch (sort.active) { - case 'name': return compare(a.name, b.name, isAsc); - case 'calories': return compare(+a.calories, +b.calories, isAsc); - case 'fat': return compare(+a.fat, +b.fat, isAsc); - case 'carbs': return compare(+a.carbs, +b.carbs, isAsc); - case 'protein': return compare(+a.protein, +b.protein, isAsc); - default: return 0; - } - }); - } + sortData(sort: Sort) + { + const data = this.desserts.slice(); + if ( !sort.active || sort.direction == '' ) + { + this.sortedData = data; + return; + } + + this.sortedData = data.sort((a, b) => { + let isAsc = sort.direction == 'asc'; + switch ( sort.active ) + { + case 'name': + return compare(a.name, b.name, isAsc); + case 'calories': + return compare(+a.calories, +b.calories, isAsc); + case 'fat': + return compare(+a.fat, +b.fat, isAsc); + case 'carbs': + return compare(+a.carbs, +b.carbs, isAsc); + case 'protein': + return compare(+a.protein, +b.protein, isAsc); + default: + return 0; + } + }); + } } -function compare(a, b, isAsc) { - return (a < b ? -1 : 1) * (isAsc ? 1 : -1); +function compare(a, b, isAsc) +{ + return (a < b ? -1 : 1) * (isAsc ? 1 : -1); } diff --git a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.html b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.html index 4e4408a1..9bf2766e 100644 --- a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.html +++ b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.html @@ -1,33 +1,34 @@ - - - -
- Fill out your name - - - -
- -
-
- - -
- Fill out your address - - - -
- - -
-
- - - Done - You are now done. -
- -
- - + + + + +
+ Fill out your name + + + +
+ +
+
+ + +
+ Fill out your address + + + +
+ + +
+
+ + + Done + You are now done. +
+ +
+ + diff --git a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts index 717dcb5d..fced5570 100644 --- a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts +++ b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts @@ -1,27 +1,31 @@ -import {Component} from '@angular/core'; -import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; /** * @title Stepper overview */ @Component({ - selector: 'stepper-overview-example', - templateUrl: 'stepper-overview-example.html', - styleUrls: ['stepper-overview-example.css'] + selector : 'stepper-overview-example', + templateUrl: 'stepper-overview-example.html', + styleUrls : ['stepper-overview-example.css'] }) -export class StepperOverviewExample { - isLinear = false; - firstFormGroup: FormGroup; - secondFormGroup: FormGroup; +export class StepperOverviewExample +{ + isLinear = false; + firstFormGroup: FormGroup; + secondFormGroup: FormGroup; - constructor(private _formBuilder: FormBuilder) { } + constructor(private _formBuilder: FormBuilder) + { + } - ngOnInit() { - this.firstFormGroup = this._formBuilder.group({ - firstCtrl: ['', Validators.required] - }); - this.secondFormGroup = this._formBuilder.group({ - secondCtrl: ['', Validators.required] - }); - } + ngOnInit() + { + this.firstFormGroup = this._formBuilder.group({ + firstCtrl: ['', Validators.required] + }); + this.secondFormGroup = this._formBuilder.group({ + secondCtrl: ['', Validators.required] + }); + } } diff --git a/src/assets/angular-material-examples/table-basic/table-basic-example.css b/src/assets/angular-material-examples/table-basic/table-basic-example.css index 8b311e6d..59415cd5 100644 --- a/src/assets/angular-material-examples/table-basic/table-basic-example.css +++ b/src/assets/angular-material-examples/table-basic/table-basic-example.css @@ -1,11 +1,11 @@ .example-container { - display: flex; - flex-direction: column; - max-height: 500px; - min-width: 300px; + display: flex; + flex-direction: column; + max-height: 500px; + min-width: 300px; } .mat-table { - overflow: auto; - max-height: 500px; + overflow: auto; + max-height: 500px; } diff --git a/src/assets/angular-material-examples/table-basic/table-basic-example.html b/src/assets/angular-material-examples/table-basic/table-basic-example.html index 66dd020c..7ea3221b 100644 --- a/src/assets/angular-material-examples/table-basic/table-basic-example.html +++ b/src/assets/angular-material-examples/table-basic/table-basic-example.html @@ -1,34 +1,34 @@
- + - + - - - No. - {{element.position}} - + + + No. + {{element.position}} + - - - Name - {{element.name}} - + + + Name + {{element.name}} + - - - Weight - {{element.weight}} - + + + Weight + {{element.weight}} + - - - Symbol - {{element.symbol}} - + + + Symbol + {{element.symbol}} + - - - + + +
diff --git a/src/assets/angular-material-examples/table-basic/table-basic-example.ts b/src/assets/angular-material-examples/table-basic/table-basic-example.ts index 41f41c7e..acdca967 100644 --- a/src/assets/angular-material-examples/table-basic/table-basic-example.ts +++ b/src/assets/angular-material-examples/table-basic/table-basic-example.ts @@ -1,49 +1,131 @@ -import {Component} from '@angular/core'; -import {DataSource} from '@angular/cdk/collections'; -import {Observable} from 'rxjs/Observable'; +import { Component } from '@angular/core'; +import { DataSource } from '@angular/cdk/collections'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; /** * @title Basic table */ @Component({ - selector: 'table-basic-example', - styleUrls: ['table-basic-example.css'], - templateUrl: 'table-basic-example.html', + selector : 'table-basic-example', + styleUrls : ['table-basic-example.css'], + templateUrl: 'table-basic-example.html' }) -export class TableBasicExample { - displayedColumns = ['position', 'name', 'weight', 'symbol']; - dataSource = new ExampleDataSource(); +export class TableBasicExample +{ + displayedColumns = ['position', 'name', 'weight', 'symbol']; + dataSource = new ExampleDataSource(); } -export interface Element { - name: string; - position: number; - weight: number; - symbol: string; +export interface Element +{ + name: string; + position: number; + weight: number; + symbol: string; } const data: Element[] = [ - {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, - {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, - {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'}, - {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}, - {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}, - {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'}, - {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'}, - {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'}, - {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, - {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, - {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'}, - {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'}, - {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'}, - {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'}, - {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'}, - {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'}, - {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'}, - {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'}, - {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'}, - {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'}, + {position : 1, + name : 'Hydrogen', + weight: 1.0079, + symbol: 'H' + }, + {position : 2, + name : 'Helium', + weight: 4.0026, + symbol: 'He' + }, + {position : 3, + name : 'Lithium', + weight: 6.941, + symbol: 'Li' + }, + {position : 4, + name : 'Beryllium', + weight: 9.0122, + symbol: 'Be' + }, + {position : 5, + name : 'Boron', + weight: 10.811, + symbol: 'B' + }, + {position : 6, + name : 'Carbon', + weight: 12.0107, + symbol: 'C' + }, + {position : 7, + name : 'Nitrogen', + weight: 14.0067, + symbol: 'N' + }, + {position : 8, + name : 'Oxygen', + weight: 15.9994, + symbol: 'O' + }, + {position : 9, + name : 'Fluorine', + weight: 18.9984, + symbol: 'F' + }, + {position : 10, + name : 'Neon', + weight: 20.1797, + symbol: 'Ne' + }, + {position : 11, + name : 'Sodium', + weight: 22.9897, + symbol: 'Na' + }, + {position : 12, + name : 'Magnesium', + weight: 24.305, + symbol: 'Mg' + }, + {position : 13, + name : 'Aluminum', + weight: 26.9815, + symbol: 'Al' + }, + {position : 14, + name : 'Silicon', + weight: 28.0855, + symbol: 'Si' + }, + {position : 15, + name : 'Phosphorus', + weight: 30.9738, + symbol: 'P' + }, + {position : 16, + name : 'Sulfur', + weight: 32.065, + symbol: 'S' + }, + {position : 17, + name : 'Chlorine', + weight: 35.453, + symbol: 'Cl' + }, + {position : 18, + name : 'Argon', + weight: 39.948, + symbol: 'Ar' + }, + {position : 19, + name : 'Potassium', + weight: 39.0983, + symbol: 'K' + }, + {position : 20, + name : 'Calcium', + weight: 40.078, + symbol: 'Ca' + } ]; /** @@ -52,11 +134,15 @@ const data: Element[] = [ * altered, the observable should emit that new set of data on the stream. In our case here, * we return a stream that contains only one set of data that doesn't change. */ -export class ExampleDataSource extends DataSource { - /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable { - return Observable.of(data); - } +export class ExampleDataSource extends DataSource +{ + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable + { + return Observable.of(data); + } - disconnect() {} + disconnect() + { + } } diff --git a/src/assets/angular-material-examples/table-filtering/table-filtering-example.css b/src/assets/angular-material-examples/table-filtering/table-filtering-example.css index 51287a08..155058d1 100644 --- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.css +++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.css @@ -1,26 +1,26 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - min-width: 300px; + display: flex; + flex-direction: column; + min-width: 300px; } .example-header { - min-height: 64px; - display: flex; - align-items: baseline; - padding: 8px 24px 0; - font-size: 20px; - justify-content: space-between; + min-height: 64px; + display: flex; + align-items: baseline; + padding: 8px 24px 0; + font-size: 20px; + justify-content: space-between; } .mat-form-field { - font-size: 14px; - flex-grow: 1; - margin-left: 32px; + font-size: 14px; + flex-grow: 1; + margin-left: 32px; } .mat-table { - overflow: auto; - max-height: 500px; + overflow: auto; + max-height: 500px; } diff --git a/src/assets/angular-material-examples/table-filtering/table-filtering-example.html b/src/assets/angular-material-examples/table-filtering/table-filtering-example.html index c3d8ca1d..cd1964d3 100644 --- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.html +++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.html @@ -1,40 +1,40 @@
-
- - - -
+
+ + + +
- + - + - - - ID - {{row.id}} - + + + ID + {{row.id}} + - - - Progress - {{row.progress}}% - + + + Progress + {{row.progress}}% + - - - Name - {{row.name}} - + + + Name + {{row.name}} + - - - Color - {{row.color}} - + + + Color + {{row.color}} + - - - + + +
diff --git a/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts b/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts index 8404f0c1..d00c5e3f 100644 --- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts +++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts @@ -1,7 +1,7 @@ -import {Component, ElementRef, ViewChild} from '@angular/core'; -import {DataSource} from '@angular/cdk/collections'; -import {BehaviorSubject} from 'rxjs/BehaviorSubject'; -import {Observable} from 'rxjs/Observable'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { DataSource } from '@angular/cdk/collections'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; @@ -13,74 +13,95 @@ import 'rxjs/add/observable/fromEvent'; * @title Table with filtering */ @Component({ - selector: 'table-filtering-example', - styleUrls: ['table-filtering-example.css'], - templateUrl: 'table-filtering-example.html', + selector : 'table-filtering-example', + styleUrls : ['table-filtering-example.css'], + templateUrl: 'table-filtering-example.html' }) -export class TableFilteringExample { - displayedColumns = ['userId', 'userName', 'progress', 'color']; - exampleDatabase = new ExampleDatabase(); - dataSource: ExampleDataSource | null; +export class TableFilteringExample +{ + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; - @ViewChild('filter') filter: ElementRef; + @ViewChild('filter') filter: ElementRef; - ngOnInit() { - this.dataSource = new ExampleDataSource(this.exampleDatabase); - Observable.fromEvent(this.filter.nativeElement, 'keyup') - .debounceTime(150) - .distinctUntilChanged() - .subscribe(() => { - if (!this.dataSource) { return; } - this.dataSource.filter = this.filter.nativeElement.value; - }); - } + ngOnInit() + { + this.dataSource = new ExampleDataSource(this.exampleDatabase); + Observable.fromEvent(this.filter.nativeElement, 'keyup') + .debounceTime(150) + .distinctUntilChanged() + .subscribe(() => { + if ( !this.dataSource ) + { + return; + } + this.dataSource.filter = this.filter.nativeElement.value; + }); + } } /** Constants used to fill up our data base. */ -const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', - 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; -const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', - 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', - 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; +const COLORS = [ + 'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray' +]; +const NAMES = [ + 'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth' +]; -export interface UserData { - id: string; - name: string; - progress: string; - color: string; +export interface UserData +{ + id: string; + name: string; + progress: string; + color: string; } /** An example database that the data source uses to retrieve data for the table. */ -export class ExampleDatabase { - /** Stream that emits whenever the data has been modified. */ - dataChange: BehaviorSubject = new BehaviorSubject([]); - get data(): UserData[] { return this.dataChange.value; } +export class ExampleDatabase +{ + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); - constructor() { - // Fill up the database with 100 users. - for (let i = 0; i < 100; i++) { this.addUser(); } - } + get data(): UserData[] + { + return this.dataChange.value; + } - /** Adds a new user to the database. */ - addUser() { - const copiedData = this.data.slice(); - copiedData.push(this.createNewUser()); - this.dataChange.next(copiedData); - } + constructor() + { + // Fill up the database with 100 users. + for ( let i = 0; i < 100; i++ ) + { + this.addUser(); + } + } - /** Builds and returns a new User. */ - private createNewUser() { - const name = - NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + - NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + /** Adds a new user to the database. */ + addUser() + { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } - return { - id: (this.data.length + 1).toString(), - name: name, - progress: Math.round(Math.random() * 100).toString(), - color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] - }; - } + /** Builds and returns a new User. */ + private createNewUser() + { + const name = + NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + + return { + id : (this.data.length + 1).toString(), + name : name, + progress: Math.round(Math.random() * 100).toString(), + color : COLORS[Math.round(Math.random() * (COLORS.length - 1))] + }; + } } /** @@ -90,29 +111,42 @@ export class ExampleDatabase { * the underlying data. Instead, it only needs to take the data and send the table exactly what * should be rendered. */ -export class ExampleDataSource extends DataSource { - _filterChange = new BehaviorSubject(''); - get filter(): string { return this._filterChange.value; } - set filter(filter: string) { this._filterChange.next(filter); } +export class ExampleDataSource extends DataSource +{ + _filterChange = new BehaviorSubject(''); - constructor(private _exampleDatabase: ExampleDatabase) { - super(); - } + get filter(): string + { + return this._filterChange.value; + } - /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable { - const displayDataChanges = [ - this._exampleDatabase.dataChange, - this._filterChange, - ]; + set filter(filter: string) + { + this._filterChange.next(filter); + } - return Observable.merge(...displayDataChanges).map(() => { - return this._exampleDatabase.data.slice().filter((item: UserData) => { - let searchStr = (item.name + item.color).toLowerCase(); - return searchStr.indexOf(this.filter.toLowerCase()) != -1; - }); - }); - } + constructor(private _exampleDatabase: ExampleDatabase) + { + super(); + } - disconnect() {} + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable + { + const displayDataChanges = [ + this._exampleDatabase.dataChange, + this._filterChange + ]; + + return Observable.merge(...displayDataChanges).map(() => { + return this._exampleDatabase.data.slice().filter((item: UserData) => { + let searchStr = (item.name + item.color).toLowerCase(); + return searchStr.indexOf(this.filter.toLowerCase()) != -1; + }); + }); + } + + disconnect() + { + } } diff --git a/src/assets/angular-material-examples/table-http/table-http-example.css b/src/assets/angular-material-examples/table-http/table-http-example.css index 185ff44b..4f7ac2f8 100644 --- a/src/assets/angular-material-examples/table-http/table-http-example.css +++ b/src/assets/angular-material-examples/table-http/table-http-example.css @@ -1,57 +1,57 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - max-height: 500px; - min-width: 300px; - position: relative; + display: flex; + flex-direction: column; + max-height: 500px; + min-width: 300px; + position: relative; } .example-header { - min-height: 64px; - display: flex; - align-items: center; - padding-left: 24px; - font-size: 20px; + min-height: 64px; + display: flex; + align-items: center; + padding-left: 24px; + font-size: 20px; } .example-table { - overflow: auto; - min-height: 300px; + overflow: auto; + min-height: 300px; } .mat-column-title { - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; - overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; + overflow: hidden; } /* Column Widths */ .mat-column-number, .mat-column-state { - max-width: 64px; + max-width: 64px; } .mat-column-created { - max-width: 124px; + max-width: 124px; } .example-loading-shade { - position: absolute; - top: 0; - left: 0; - bottom: 56px; - right: 0; - background: rgba(0, 0, 0, 0.15); - z-index: 1; - display: flex; - align-items: center; - justify-content: center; + position: absolute; + top: 0; + left: 0; + bottom: 56px; + right: 0; + background: rgba(0, 0, 0, 0.15); + z-index: 1; + display: flex; + align-items: center; + justify-content: center; } .example-rate-limit-reached { - color: #980000; - max-width: 360px; - text-align: center; + color: #980000; + max-width: 360px; + text-align: center; } diff --git a/src/assets/angular-material-examples/table-http/table-http-example.html b/src/assets/angular-material-examples/table-http/table-http-example.html index b74b898a..c18f5ac5 100644 --- a/src/assets/angular-material-examples/table-http/table-http-example.html +++ b/src/assets/angular-material-examples/table-http/table-http-example.html @@ -1,51 +1,51 @@
-
- -
- GitHub's API rate limit has been reached. It will be reset in one minute. +
+ +
+ GitHub's API rate limit has been reached. It will be reset in one minute. +
-
- + - + - - - # - {{ row.number }} - + + + # + {{ row.number }} + - - - Title - {{ row.title }} - + + + Title + {{ row.title }} + - - - State - {{ row.state }} - + + + State + {{ row.state }} + - - - - Created - - {{ row.created_at | date }} - + + + + Created + + {{ row.created_at | date }} + - - - + + + - - + +
diff --git a/src/assets/angular-material-examples/table-http/table-http-example.ts b/src/assets/angular-material-examples/table-http/table-http-example.ts index 7331462b..2ec83819 100644 --- a/src/assets/angular-material-examples/table-http/table-http-example.ts +++ b/src/assets/angular-material-examples/table-http/table-http-example.ts @@ -1,8 +1,8 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; -import {Http} from '@angular/http'; -import {DataSource} from '@angular/cdk/collections'; -import {MdPaginator, MdSort} from '@angular/material'; -import {Observable} from 'rxjs/Observable'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { Http } from '@angular/http'; +import { DataSource } from '@angular/cdk/collections'; +import { MatPaginator, MatSort } from '@angular/material'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/merge'; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/catch'; @@ -14,51 +14,61 @@ import 'rxjs/add/operator/switchMap'; * @title Table retrieving data through HTTP */ @Component({ - selector: 'table-http-example', - styleUrls: ['table-http-example.css'], - templateUrl: 'table-http-example.html', + selector : 'table-http-example', + styleUrls : ['table-http-example.css'], + templateUrl: 'table-http-example.html' }) -export class TableHttpExample implements OnInit { - displayedColumns = ['created_at', 'state', 'number', 'title']; - exampleDatabase: ExampleHttpDao | null; - dataSource: ExampleDataSource | null; +export class TableHttpExample implements OnInit +{ + displayedColumns = ['created_at', 'state', 'number', 'title']; + exampleDatabase: ExampleHttpDao | null; + dataSource: ExampleDataSource | null; - @ViewChild(MdPaginator) paginator: MdPaginator; - @ViewChild(MdSort) sort: MdSort; + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort) sort: MatSort; - constructor(private http: Http) {} + constructor(private http: Http) + { + } - ngOnInit() { - this.exampleDatabase = new ExampleHttpDao(this.http); - this.dataSource = new ExampleDataSource( - this.exampleDatabase!, this.paginator, this.sort); - } + ngOnInit() + { + this.exampleDatabase = new ExampleHttpDao(this.http); + this.dataSource = new ExampleDataSource( + this.exampleDatabase!, this.paginator, this.sort); + } } -export interface GithubApi { - items: GithubIssue[]; - total_count: number; +export interface GithubApi +{ + items: GithubIssue[]; + total_count: number; } -export interface GithubIssue { - created_at: string; - number: string; - state: string; - title: string; +export interface GithubIssue +{ + created_at: string; + number: string; + state: string; + title: string; } /** An example database that the data source uses to retrieve data for the table. */ -export class ExampleHttpDao { - constructor(private http: Http) {} +export class ExampleHttpDao +{ + constructor(private http: Http) + { + } - getRepoIssues(sort: string, order: string, page: number): Observable { - const href = 'https://api.github.com/search/issues'; - const requestUrl = - `${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`; + getRepoIssues(sort: string, order: string, page: number): Observable + { + const href = 'https://api.github.com/search/issues'; + const requestUrl = + `${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`; - return this.http.get(requestUrl) - .map(response => response.json() as GithubApi); - } + return this.http.get(requestUrl) + .map(response => response.json() as GithubApi); + } } /** @@ -68,54 +78,61 @@ export class ExampleHttpDao { * the underlying data. Instead, it only needs to take the data and send the table exactly what * should be rendered. */ -export class ExampleDataSource extends DataSource { - // The number of issues returned by github matching the query. - resultsLength = 0; - isLoadingResults = false; - isRateLimitReached = false; +export class ExampleDataSource extends DataSource +{ + // The number of issues returned by github matching the query. + resultsLength = 0; + isLoadingResults = false; + isRateLimitReached = false; - constructor(private exampleDatabase: ExampleHttpDao, - private paginator: MdPaginator, - private sort: MdSort) { - super(); - } + constructor( + private exampleDatabase: ExampleHttpDao, + private paginator: MatPaginator, + private sort: MatSort + ) + { + super(); + } - /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable { - const displayDataChanges = [ - this.sort.sortChange, - this.paginator.page - ]; + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable + { + const displayDataChanges = [ + this.sort.sortChange, + this.paginator.page + ]; - // If the user changes the sort order, reset back to the first page. - this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0); + // If the user changes the sort order, reset back to the first page. + this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0); - return Observable.merge(...displayDataChanges) - .startWith(null) - .switchMap(() => { - setTimeout(() => { - this.isLoadingResults = true; - }); - return this.exampleDatabase.getRepoIssues( - this.sort.active, this.sort.direction, this.paginator.pageIndex); - }) - .map(data => { - // Flip flag to show that loading has finished. - this.isLoadingResults = false; - this.isRateLimitReached = false; - this.resultsLength = data.total_count; + return Observable.merge(...displayDataChanges) + .startWith(null) + .switchMap(() => { + setTimeout(() => { + this.isLoadingResults = true; + }); + return this.exampleDatabase.getRepoIssues( + this.sort.active, this.sort.direction, this.paginator.pageIndex); + }) + .map(data => { + // Flip flag to show that loading has finished. + this.isLoadingResults = false; + this.isRateLimitReached = false; + this.resultsLength = data.total_count; - return data.items; - }) - .catch(() => { - // Catch if the GitHub API has reached its rate limit. Return empty data. - setTimeout(() => { - this.isLoadingResults = false; - this.isRateLimitReached = true; - }); - return Observable.of([]); - }); - } + return data.items; + }) + .catch(() => { + // Catch if the GitHub API has reached its rate limit. Return empty data. + setTimeout(() => { + this.isLoadingResults = false; + this.isRateLimitReached = true; + }); + return Observable.of([]); + }); + } - disconnect() {} + disconnect() + { + } } diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.css b/src/assets/angular-material-examples/table-overview/table-overview-example.css index c5c27f6f..5ddeba4b 100644 --- a/src/assets/angular-material-examples/table-overview/table-overview-example.css +++ b/src/assets/angular-material-examples/table-overview/table-overview-example.css @@ -1,53 +1,53 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - min-width: 300px; + display: flex; + flex-direction: column; + min-width: 300px; } .example-header { - min-height: 56px; - max-height: 56px; - display: flex; - align-items: center; - padding: 8px 24px 0; - font-size: 20px; - justify-content: space-between; - border-bottom: 1px solid transparent; + min-height: 56px; + max-height: 56px; + display: flex; + align-items: center; + padding: 8px 24px 0; + font-size: 20px; + justify-content: space-between; + border-bottom: 1px solid transparent; } .mat-form-field { - font-size: 14px; - flex-grow: 1; - margin-top: 8px; + font-size: 14px; + flex-grow: 1; + margin-top: 8px; } .example-no-results { - display: flex; - justify-content: center; - padding: 24px; - font-size: 12px; - font-style: italic; + display: flex; + justify-content: center; + padding: 24px; + font-size: 12px; + font-style: italic; } /** Selection styles */ .example-selection-header { - font-size: 18px; + font-size: 18px; } .mat-column-select { - max-width: 54px; + max-width: 54px; } .mat-row:hover, .example-selected-row { - background: #f5f5f5; + background: #F5F5F5; } .mat-row:active, .mat-row.example-selected-row { - background: #eaeaea; + background: #EAEAEA; } .mat-table { - overflow: auto; - max-height: 500px; + overflow: auto; + max-height: 500px; } diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.html b/src/assets/angular-material-examples/table-overview/table-overview-example.html index 35a12176..161ae82b 100644 --- a/src/assets/angular-material-examples/table-overview/table-overview-example.html +++ b/src/assets/angular-material-examples/table-overview/table-overview-example.html @@ -1,78 +1,78 @@
- - - + + +
- {{selection.selected.length}} - {{selection.selected.length == 1 ? 'user' : 'users'}} - selected + {{selection.selected.length}} + {{selection.selected.length == 1 ? 'user' : 'users'}} + selected
- + - + - - - - - - - - - - - + + + + + + + + + + + - - - ID - {{row.id}} - + + + ID + {{row.id}} + - - - Progress - {{row.progress}}% - + + + Progress + {{row.progress}}% + - - - Name - {{row.name}} - + + + Name + {{row.name}} + - - - Color - {{row.color}} - + + + Color + {{row.color}} + - - - - + + + + -
- No users found matching filter. -
+
+ No users found matching filter. +
- - + +
diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.ts b/src/assets/angular-material-examples/table-overview/table-overview-example.ts index f0f9fcd4..07e35531 100644 --- a/src/assets/angular-material-examples/table-overview/table-overview-example.ts +++ b/src/assets/angular-material-examples/table-overview/table-overview-example.ts @@ -1,9 +1,9 @@ -import {Component, ElementRef, ViewChild} from '@angular/core'; -import {DataSource} from '@angular/cdk/collections'; -import {MdPaginator, MdSort} from '@angular/material'; -import {SelectionModel} from '@angular/cdk/collections'; -import {BehaviorSubject} from 'rxjs/BehaviorSubject'; -import {Observable} from 'rxjs/Observable'; +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { DataSource } from '@angular/cdk/collections'; +import { MatPaginator, MatSort } from '@angular/material'; +import { SelectionModel } from '@angular/cdk/collections'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/observable/fromEvent'; @@ -15,102 +15,142 @@ import 'rxjs/add/operator/debounceTime'; * @title Feature-rich data table */ @Component({ - selector: 'table-overview-example', - styleUrls: ['table-overview-example.css'], - templateUrl: 'table-overview-example.html', + selector : 'table-overview-example', + styleUrls : ['table-overview-example.css'], + templateUrl: 'table-overview-example.html' }) -export class TableOverviewExample { - displayedColumns = ['select', 'userId', 'userName', 'progress', 'color']; - exampleDatabase = new ExampleDatabase(); - selection = new SelectionModel(true, []); - dataSource: ExampleDataSource | null; +export class TableOverviewExample +{ + displayedColumns = ['select', 'userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + selection = new SelectionModel(true, []); + dataSource: ExampleDataSource | null; - @ViewChild(MdPaginator) paginator: MdPaginator; - @ViewChild(MdSort) sort: MdSort; - @ViewChild('filter') filter: ElementRef; + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort) sort: MatSort; + @ViewChild('filter') filter: ElementRef; - ngOnInit() { - this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator, this.sort); - Observable.fromEvent(this.filter.nativeElement, 'keyup') - .debounceTime(150) - .distinctUntilChanged() - .subscribe(() => { - if (!this.dataSource) { return; } - this.dataSource.filter = this.filter.nativeElement.value; - }); - } - - isAllSelected(): boolean { - if (!this.dataSource) { return false; } - if (this.selection.isEmpty()) { return false; } - - if (this.filter.nativeElement.value) { - return this.selection.selected.length == this.dataSource.renderedData.length; - } else { - return this.selection.selected.length == this.exampleDatabase.data.length; + ngOnInit() + { + this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator, this.sort); + Observable.fromEvent(this.filter.nativeElement, 'keyup') + .debounceTime(150) + .distinctUntilChanged() + .subscribe(() => { + if ( !this.dataSource ) + { + return; + } + this.dataSource.filter = this.filter.nativeElement.value; + }); } - } - masterToggle() { - if (!this.dataSource) { return; } + isAllSelected(): boolean + { + if ( !this.dataSource ) + { + return false; + } + if ( this.selection.isEmpty() ) + { + return false; + } - if (this.isAllSelected()) { - this.selection.clear(); - } else if (this.filter.nativeElement.value) { - this.dataSource.renderedData.forEach(data => this.selection.select(data.id)); - } else { - this.exampleDatabase.data.forEach(data => this.selection.select(data.id)); + if ( this.filter.nativeElement.value ) + { + return this.selection.selected.length == this.dataSource.renderedData.length; + } + else + { + return this.selection.selected.length == this.exampleDatabase.data.length; + } + } + + masterToggle() + { + if ( !this.dataSource ) + { + return; + } + + if ( this.isAllSelected() ) + { + this.selection.clear(); + } + else if ( this.filter.nativeElement.value ) + { + this.dataSource.renderedData.forEach(data => this.selection.select(data.id)); + } + else + { + this.exampleDatabase.data.forEach(data => this.selection.select(data.id)); + } } - } } /** Constants used to fill up our data base. */ -const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', - 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; -const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', - 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', - 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; +const COLORS = [ + 'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray' +]; +const NAMES = [ + 'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth' +]; -export interface UserData { - id: string; - name: string; - progress: string; - color: string; +export interface UserData +{ + id: string; + name: string; + progress: string; + color: string; } /** An example database that the data source uses to retrieve data for the table. */ -export class ExampleDatabase { - /** Stream that emits whenever the data has been modified. */ - dataChange: BehaviorSubject = new BehaviorSubject([]); - get data(): UserData[] { return this.dataChange.value; } +export class ExampleDatabase +{ + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); - constructor() { - // Fill up the database with 100 users. - setTimeout(() => { - for (let i = 0; i < 100; i++) { this.addUser(); } - }); - } + get data(): UserData[] + { + return this.dataChange.value; + } - /** Adds a new user to the database. */ - addUser() { - const copiedData = this.data.slice(); - copiedData.push(this.createNewUser()); - this.dataChange.next(copiedData); - } + constructor() + { + // Fill up the database with 100 users. + setTimeout(() => { + for ( let i = 0; i < 100; i++ ) + { + this.addUser(); + } + }); + } - /** Builds and returns a new User. */ - private createNewUser() { - const name = - NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + - NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + /** Adds a new user to the database. */ + addUser() + { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } - return { - id: (this.data.length + 1).toString(), - name: name, - progress: Math.round(Math.random() * 100).toString(), - color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] - }; - } + /** Builds and returns a new User. */ + private createNewUser() + { + const name = + NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + + return { + id : (this.data.length + 1).toString(), + name : name, + progress: Math.round(Math.random() * 100).toString(), + color : COLORS[Math.round(Math.random() * (COLORS.length - 1))] + }; + } } /** @@ -120,71 +160,99 @@ export class ExampleDatabase { * the underlying data. Instead, it only needs to take the data and send the table exactly what * should be rendered. */ -export class ExampleDataSource extends DataSource { - _filterChange = new BehaviorSubject(''); - get filter(): string { return this._filterChange.value; } - set filter(filter: string) { this._filterChange.next(filter); } +export class ExampleDataSource extends DataSource +{ + _filterChange = new BehaviorSubject(''); - filteredData: UserData[] = []; - renderedData: UserData[] = []; + get filter(): string + { + return this._filterChange.value; + } - constructor(private _exampleDatabase: ExampleDatabase, - private _paginator: MdPaginator, - private _sort: MdSort) { - super(); + set filter(filter: string) + { + this._filterChange.next(filter); + } - // Reset to the first page when the user changes the filter. - this._filterChange.subscribe(() => this._paginator.pageIndex = 0); - } + filteredData: UserData[] = []; + renderedData: UserData[] = []; - /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable { - // Listen for any changes in the base data, sorting, filtering, or pagination - const displayDataChanges = [ - this._exampleDatabase.dataChange, - this._sort.sortChange, - this._filterChange, - this._paginator.page, - ]; + constructor( + private _exampleDatabase: ExampleDatabase, + private _paginator: MatPaginator, + private _sort: MatSort + ) + { + super(); - return Observable.merge(...displayDataChanges).map(() => { - // Filter data - this.filteredData = this._exampleDatabase.data.slice().filter((item: UserData) => { - let searchStr = (item.name + item.color).toLowerCase(); - return searchStr.indexOf(this.filter.toLowerCase()) != -1; - }); + // Reset to the first page when the user changes the filter. + this._filterChange.subscribe(() => this._paginator.pageIndex = 0); + } - // Sort filtered data - const sortedData = this.sortData(this.filteredData.slice()); + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable + { + // Listen for any changes in the base data, sorting, filtering, or pagination + const displayDataChanges = [ + this._exampleDatabase.dataChange, + this._sort.sortChange, + this._filterChange, + this._paginator.page + ]; - // Grab the page's slice of the filtered sorted data. - const startIndex = this._paginator.pageIndex * this._paginator.pageSize; - this.renderedData = sortedData.splice(startIndex, this._paginator.pageSize); - return this.renderedData; - }); - } + return Observable.merge(...displayDataChanges).map(() => { + // Filter data + this.filteredData = this._exampleDatabase.data.slice().filter((item: UserData) => { + let searchStr = (item.name + item.color).toLowerCase(); + return searchStr.indexOf(this.filter.toLowerCase()) != -1; + }); - disconnect() {} + // Sort filtered data + const sortedData = this.sortData(this.filteredData.slice()); - /** Returns a sorted copy of the database data. */ - sortData(data: UserData[]): UserData[] { - if (!this._sort.active || this._sort.direction == '') { return data; } + // Grab the page's slice of the filtered sorted data. + const startIndex = this._paginator.pageIndex * this._paginator.pageSize; + this.renderedData = sortedData.splice(startIndex, this._paginator.pageSize); + return this.renderedData; + }); + } - return data.sort((a, b) => { - let propertyA: number|string = ''; - let propertyB: number|string = ''; + disconnect() + { + } - switch (this._sort.active) { - case 'userId': [propertyA, propertyB] = [a.id, b.id]; break; - case 'userName': [propertyA, propertyB] = [a.name, b.name]; break; - case 'progress': [propertyA, propertyB] = [a.progress, b.progress]; break; - case 'color': [propertyA, propertyB] = [a.color, b.color]; break; - } + /** Returns a sorted copy of the database data. */ + sortData(data: UserData[]): UserData[] + { + if ( !this._sort.active || this._sort.direction == '' ) + { + return data; + } - let valueA = isNaN(+propertyA) ? propertyA : +propertyA; - let valueB = isNaN(+propertyB) ? propertyB : +propertyB; + return data.sort((a, b) => { + let propertyA: number | string = ''; + let propertyB: number | string = ''; - return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1); - }); - } + switch ( this._sort.active ) + { + case 'userId': + [propertyA, propertyB] = [a.id, b.id]; + break; + case 'userName': + [propertyA, propertyB] = [a.name, b.name]; + break; + case 'progress': + [propertyA, propertyB] = [a.progress, b.progress]; + break; + case 'color': + [propertyA, propertyB] = [a.color, b.color]; + break; + } + + let valueA = isNaN(+propertyA) ? propertyA : +propertyA; + let valueB = isNaN(+propertyB) ? propertyB : +propertyB; + + return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1); + }); + } } diff --git a/src/assets/angular-material-examples/table-pagination/table-pagination-example.css b/src/assets/angular-material-examples/table-pagination/table-pagination-example.css index 5b9032d1..c6d0ba17 100644 --- a/src/assets/angular-material-examples/table-pagination/table-pagination-example.css +++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.css @@ -1,19 +1,19 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - min-width: 300px; + display: flex; + flex-direction: column; + min-width: 300px; } .example-header { - min-height: 64px; - display: flex; - align-items: center; - padding-left: 24px; - font-size: 20px; + min-height: 64px; + display: flex; + align-items: center; + padding-left: 24px; + font-size: 20px; } .mat-table { - overflow: auto; - max-height: 500px; + overflow: auto; + max-height: 500px; } diff --git a/src/assets/angular-material-examples/table-pagination/table-pagination-example.html b/src/assets/angular-material-examples/table-pagination/table-pagination-example.html index 6fa6eaad..399a2197 100644 --- a/src/assets/angular-material-examples/table-pagination/table-pagination-example.html +++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.html @@ -1,42 +1,42 @@
- + - + - - - ID - {{row.id}} - + + + ID + {{row.id}} + - - - Progress - {{row.progress}}% - + + + Progress + {{row.progress}}% + - - - Name - {{row.name}} - + + + Name + {{row.name}} + - - - Color - {{row.color}} - + + + Color + {{row.color}} + - - - + + + - - + +
diff --git a/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts b/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts index 1434c8f6..ea56ac61 100644 --- a/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts +++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts @@ -1,8 +1,8 @@ -import {Component, ViewChild} from '@angular/core'; -import {DataSource} from '@angular/cdk/collections'; -import {MdPaginator} from '@angular/material'; -import {BehaviorSubject} from 'rxjs/BehaviorSubject'; -import {Observable} from 'rxjs/Observable'; +import { Component, ViewChild } from '@angular/core'; +import { DataSource } from '@angular/cdk/collections'; +import { MatPaginator } from '@angular/material'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; @@ -11,67 +11,85 @@ import 'rxjs/add/operator/map'; * @title Table with pagination */ @Component({ - selector: 'table-pagination-example', - styleUrls: ['table-pagination-example.css'], - templateUrl: 'table-pagination-example.html', + selector : 'table-pagination-example', + styleUrls : ['table-pagination-example.css'], + templateUrl: 'table-pagination-example.html' }) -export class TablePaginationExample { - displayedColumns = ['userId', 'userName', 'progress', 'color']; - exampleDatabase = new ExampleDatabase(); - dataSource: ExampleDataSource | null; +export class TablePaginationExample +{ + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; - @ViewChild(MdPaginator) paginator: MdPaginator; + @ViewChild(MatPaginator) paginator: MatPaginator; - ngOnInit() { - this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator); - } + ngOnInit() + { + this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator); + } } /** Constants used to fill up our data base. */ -const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', - 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; -const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', - 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', - 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; +const COLORS = [ + 'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray' +]; +const NAMES = [ + 'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth' +]; -export interface UserData { - id: string; - name: string; - progress: string; - color: string; +export interface UserData +{ + id: string; + name: string; + progress: string; + color: string; } /** An example database that the data source uses to retrieve data for the table. */ -export class ExampleDatabase { - /** Stream that emits whenever the data has been modified. */ - dataChange: BehaviorSubject = new BehaviorSubject([]); - get data(): UserData[] { return this.dataChange.value; } +export class ExampleDatabase +{ + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); - constructor() { - // Fill up the database with 100 users. - for (let i = 0; i < 100; i++) { this.addUser(); } - } + get data(): UserData[] + { + return this.dataChange.value; + } - /** Adds a new user to the database. */ - addUser() { - const copiedData = this.data.slice(); - copiedData.push(this.createNewUser()); - this.dataChange.next(copiedData); - } + constructor() + { + // Fill up the database with 100 users. + for ( let i = 0; i < 100; i++ ) + { + this.addUser(); + } + } - /** Builds and returns a new User. */ - private createNewUser() { - const name = - NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + - NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + /** Adds a new user to the database. */ + addUser() + { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } - return { - id: (this.data.length + 1).toString(), - name: name, - progress: Math.round(Math.random() * 100).toString(), - color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] - }; - } + /** Builds and returns a new User. */ + private createNewUser() + { + const name = + NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + + return { + id : (this.data.length + 1).toString(), + name : name, + progress: Math.round(Math.random() * 100).toString(), + color : COLORS[Math.round(Math.random() * (COLORS.length - 1))] + }; + } } /** @@ -81,26 +99,31 @@ export class ExampleDatabase { * the underlying data. Instead, it only needs to take the data and send the table exactly what * should be rendered. */ -export class ExampleDataSource extends DataSource { - constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MdPaginator) { - super(); - } +export class ExampleDataSource extends DataSource +{ + constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MatPaginator) + { + super(); + } - /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable { - const displayDataChanges = [ - this._exampleDatabase.dataChange, - this._paginator.page, - ]; + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable + { + const displayDataChanges = [ + this._exampleDatabase.dataChange, + this._paginator.page + ]; - return Observable.merge(...displayDataChanges).map(() => { - const data = this._exampleDatabase.data.slice(); + return Observable.merge(...displayDataChanges).map(() => { + const data = this._exampleDatabase.data.slice(); - // Grab the page's slice of data. - const startIndex = this._paginator.pageIndex * this._paginator.pageSize; - return data.splice(startIndex, this._paginator.pageSize); - }); - } + // Grab the page's slice of data. + const startIndex = this._paginator.pageIndex * this._paginator.pageSize; + return data.splice(startIndex, this._paginator.pageSize); + }); + } - disconnect() {} + disconnect() + { + } } diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.css b/src/assets/angular-material-examples/table-sorting/table-sorting-example.css index 0ff9559b..7bde15b2 100644 --- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.css +++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.css @@ -1,23 +1,23 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - min-width: 300px; + display: flex; + flex-direction: column; + min-width: 300px; } .example-header { - min-height: 64px; - display: flex; - align-items: center; - padding-left: 24px; - font-size: 20px; + min-height: 64px; + display: flex; + align-items: center; + padding-left: 24px; + font-size: 20px; } .mat-table { - overflow: auto; - max-height: 500px; + overflow: auto; + max-height: 500px; } .mat-header-cell .mat-sort-header-sorted { - color: black; + color: black; } diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.html b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html index cde414b6..ff15e446 100644 --- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.html +++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html @@ -1,34 +1,34 @@
- + - + - - - ID - {{row.id}} - + + + ID + {{row.id}} + - - - Progress - {{row.progress}}% - + + + Progress + {{row.progress}}% + - - - Name - {{row.name}} - + + + Name + {{row.name}} + - - - Color - {{row.color}} - + + + Color + {{row.color}} + - - - + + +
diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts b/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts index 36df1764..f9240cd0 100644 --- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts +++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts @@ -1,8 +1,8 @@ -import {Component, ViewChild} from '@angular/core'; -import {DataSource} from '@angular/cdk/collections'; -import {MdSort} from '@angular/material'; -import {BehaviorSubject} from 'rxjs/BehaviorSubject'; -import {Observable} from 'rxjs/Observable'; +import { Component, ViewChild } from '@angular/core'; +import { DataSource } from '@angular/cdk/collections'; +import { MatSort } from '@angular/material'; +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; @@ -11,67 +11,85 @@ import 'rxjs/add/operator/map'; * @title Table with sorting */ @Component({ - selector: 'table-sorting-example', - styleUrls: ['table-sorting-example.css'], - templateUrl: 'table-sorting-example.html', + selector : 'table-sorting-example', + styleUrls : ['table-sorting-example.css'], + templateUrl: 'table-sorting-example.html' }) -export class TableSortingExample { - displayedColumns = ['userId', 'userName', 'progress', 'color']; - exampleDatabase = new ExampleDatabase(); - dataSource: ExampleDataSource | null; +export class TableSortingExample +{ + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; - @ViewChild(MdSort) sort: MdSort; + @ViewChild(MatSort) sort: MatSort; - ngOnInit() { - this.dataSource = new ExampleDataSource(this.exampleDatabase, this.sort); - } + ngOnInit() + { + this.dataSource = new ExampleDataSource(this.exampleDatabase, this.sort); + } } /** Constants used to fill up our data base. */ -const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', - 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; -const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', - 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', - 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; +const COLORS = [ + 'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray' +]; +const NAMES = [ + 'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth' +]; -export interface UserData { - id: string; - name: string; - progress: string; - color: string; +export interface UserData +{ + id: string; + name: string; + progress: string; + color: string; } /** An example database that the data source uses to retrieve data for the table. */ -export class ExampleDatabase { - /** Stream that emits whenever the data has been modified. */ - dataChange: BehaviorSubject = new BehaviorSubject([]); - get data(): UserData[] { return this.dataChange.value; } +export class ExampleDatabase +{ + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); - constructor() { - // Fill up the database with 100 users. - for (let i = 0; i < 100; i++) { this.addUser(); } - } + get data(): UserData[] + { + return this.dataChange.value; + } - /** Adds a new user to the database. */ - addUser() { - const copiedData = this.data.slice(); - copiedData.push(this.createNewUser()); - this.dataChange.next(copiedData); - } + constructor() + { + // Fill up the database with 100 users. + for ( let i = 0; i < 100; i++ ) + { + this.addUser(); + } + } - /** Builds and returns a new User. */ - private createNewUser() { - const name = - NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + - NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + /** Adds a new user to the database. */ + addUser() + { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } - return { - id: (this.data.length + 1).toString(), - name: name, - progress: Math.round(Math.random() * 100).toString(), - color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] - }; - } + /** Builds and returns a new User. */ + private createNewUser() + { + const name = + NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + + return { + id : (this.data.length + 1).toString(), + name : name, + progress: Math.round(Math.random() * 100).toString(), + color : COLORS[Math.round(Math.random() * (COLORS.length - 1))] + }; + } } /** @@ -81,45 +99,63 @@ export class ExampleDatabase { * the underlying data. Instead, it only needs to take the data and send the table exactly what * should be rendered. */ -export class ExampleDataSource extends DataSource { - constructor(private _exampleDatabase: ExampleDatabase, private _sort: MdSort) { - super(); - } +export class ExampleDataSource extends DataSource +{ + constructor(private _exampleDatabase: ExampleDatabase, private _sort: MatSort) + { + super(); + } - /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable { - const displayDataChanges = [ - this._exampleDatabase.dataChange, - this._sort.sortChange, - ]; + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable + { + const displayDataChanges = [ + this._exampleDatabase.dataChange, + this._sort.sortChange + ]; - return Observable.merge(...displayDataChanges).map(() => { - return this.getSortedData(); - }); - } + return Observable.merge(...displayDataChanges).map(() => { + return this.getSortedData(); + }); + } - disconnect() {} + disconnect() + { + } - /** Returns a sorted copy of the database data. */ - getSortedData(): UserData[] { - const data = this._exampleDatabase.data.slice(); - if (!this._sort.active || this._sort.direction == '') { return data; } + /** Returns a sorted copy of the database data. */ + getSortedData(): UserData[] + { + const data = this._exampleDatabase.data.slice(); + if ( !this._sort.active || this._sort.direction == '' ) + { + return data; + } - return data.sort((a, b) => { - let propertyA: number|string = ''; - let propertyB: number|string = ''; + return data.sort((a, b) => { + let propertyA: number | string = ''; + let propertyB: number | string = ''; - switch (this._sort.active) { - case 'userId': [propertyA, propertyB] = [a.id, b.id]; break; - case 'userName': [propertyA, propertyB] = [a.name, b.name]; break; - case 'progress': [propertyA, propertyB] = [a.progress, b.progress]; break; - case 'color': [propertyA, propertyB] = [a.color, b.color]; break; - } + switch ( this._sort.active ) + { + case 'userId': + [propertyA, propertyB] = [a.id, b.id]; + break; + case 'userName': + [propertyA, propertyB] = [a.name, b.name]; + break; + case 'progress': + [propertyA, propertyB] = [a.progress, b.progress]; + break; + case 'color': + [propertyA, propertyB] = [a.color, b.color]; + break; + } - let valueA = isNaN(+propertyA) ? propertyA : +propertyA; - let valueB = isNaN(+propertyB) ? propertyB : +propertyB; + let valueA = isNaN(+propertyA) ? propertyA : +propertyA; + let valueB = isNaN(+propertyB) ? propertyB : +propertyB; - return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1); - }); - } + return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1); + }); + } } diff --git a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html index 173ece5d..5032edc5 100644 --- a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html +++ b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html @@ -1,4 +1,4 @@ - - Content 1 - Content 2 - + + Content 1 + Content 2 + diff --git a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts index 96f70260..a358e582 100644 --- a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts +++ b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic tabs */ @Component({ - selector: 'tabs-overview-example', - templateUrl: 'tabs-overview-example.html', + selector : 'tabs-overview-example', + templateUrl: 'tabs-overview-example.html' }) -export class TabsOverviewExample {} +export class TabsOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css index 71d3d8b2..a065ac15 100644 --- a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css +++ b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css @@ -1,7 +1,7 @@ .demo-tab-group { - border: 1px solid #e8e8e8; + border: 1px solid #E8E8E8; } .demo-tab-content { - padding: 16px; + padding: 16px; } diff --git a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html index 75b5b19d..21336a0a 100644 --- a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html +++ b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html @@ -1,48 +1,48 @@ - - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. - Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. - In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, - feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, - orci enim rutrum enim, vel tempor sapien arcu a tellus. -
- - - - ⭐ - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. - Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. - In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, - feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, - orci enim rutrum enim, vel tempor sapien arcu a tellus. -
- - - No content - - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. - Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. - In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, - feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, - orci enim rutrum enim, vel tempor sapien arcu a tellus. -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. - Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. - In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, - feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, - orci enim rutrum enim, vel tempor sapien arcu a tellus. -
- - - No content - - - No content - - \ No newline at end of file + + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. + Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. + In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, + feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, + orci enim rutrum enim, vel tempor sapien arcu a tellus. +
+ + + + ⭐ + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. + Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. + In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, + feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, + orci enim rutrum enim, vel tempor sapien arcu a tellus. +
+ + + No content + + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. + Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. + In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, + feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, + orci enim rutrum enim, vel tempor sapien arcu a tellus. +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. + Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. + In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, + feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, + orci enim rutrum enim, vel tempor sapien arcu a tellus. +
+ + + No content + + + No content + + \ No newline at end of file diff --git a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts index 0f103327..ffde7ba1 100644 --- a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts +++ b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Complex Example */ @Component({ - selector: 'tabs-template-label-example', - templateUrl: 'tabs-template-label-example.html', - styleUrls: ['./tabs-template-label-example.css'] + selector : 'tabs-template-label-example', + templateUrl: 'tabs-template-label-example.html', + styleUrls : ['./tabs-template-label-example.css'] }) -export class TabsTemplateLabelExample {} +export class TabsTemplateLabelExample +{ +} diff --git a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.css b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.css index d7c40156..aa90a4d3 100644 --- a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.css +++ b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.css @@ -1,7 +1,7 @@ .example-icon { - padding: 0 14px; + padding: 0 14px; } .example-spacer { - flex: 1 1 auto; + flex: 1 1 auto; } diff --git a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html index 9b178a21..5ee4b8b7 100644 --- a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html +++ b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html @@ -1,16 +1,16 @@ - - Custom Toolbar + + Custom Toolbar - - Second Line - - verified_user - + + Second Line + + verified_user + - - Third Line - - favorite - delete - - + + Third Line + + favorite + delete + + diff --git a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.ts b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.ts index 3ad53173..02b4fce9 100644 --- a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.ts +++ b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Multi-row toolbar */ @Component({ - selector: 'toolbar-multirow-example', - templateUrl: 'toolbar-multirow-example.html', - styleUrls: ['toolbar-multirow-example.css'], + selector : 'toolbar-multirow-example', + templateUrl: 'toolbar-multirow-example.html', + styleUrls : ['toolbar-multirow-example.css'] }) -export class ToolbarMultirowExample {} +export class ToolbarMultirowExample +{ +} diff --git a/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.html b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.html index bf8cc399..05520fda 100644 --- a/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.html +++ b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.html @@ -1 +1 @@ -My App +My App diff --git a/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.ts b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.ts index 5d543043..63306cbf 100644 --- a/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.ts +++ b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic toolbar */ @Component({ - selector: 'toolbar-overview-example', - templateUrl: 'toolbar-overview-example.html', + selector : 'toolbar-overview-example', + templateUrl: 'toolbar-overview-example.html' }) -export class ToolbarOverviewExample {} +export class ToolbarOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html index 8319a854..3a2a2749 100644 --- a/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html +++ b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html @@ -1 +1 @@ -I have a tooltip +I have a tooltip diff --git a/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.ts b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.ts index ffb53c02..124e1e36 100644 --- a/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.ts +++ b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic tooltip */ @Component({ - selector: 'tooltip-overview-example', - templateUrl: 'tooltip-overview-example.html', + selector : 'tooltip-overview-example', + templateUrl: 'tooltip-overview-example.html' }) -export class TooltipOverviewExample {} +export class TooltipOverviewExample +{ +} diff --git a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css index 04ec59dd..92e82b31 100644 --- a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css +++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css @@ -1,9 +1,9 @@ .example-tooltip-host { - display: inline-flex; - align-items: center; - margin: 50px; + display: inline-flex; + align-items: center; + margin: 50px; } .example-select { - margin: 0 10px; + margin: 0 10px; } diff --git a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html index 156a5bf6..803223af 100644 --- a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html +++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html @@ -1,11 +1,11 @@ -
- Show tooltip - - Before - After - Above - Below - Left - Right - +
+ Show tooltip + + Before + After + Above + Below + Left + Right +
diff --git a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts index 12741b77..a859e2a0 100644 --- a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts +++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts @@ -1,13 +1,14 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Tooltip with custom position */ @Component({ - selector: 'tooltip-position-example', - templateUrl: 'tooltip-position-example.html', - styleUrls: ['tooltip-position-example.css'], + selector : 'tooltip-position-example', + templateUrl: 'tooltip-position-example.html', + styleUrls : ['tooltip-position-example.css'] }) -export class TooltipPositionExample { - position = 'before'; +export class TooltipPositionExample +{ + position = 'before'; } diff --git a/src/environments/environment.hmr.ts b/src/environments/environment.hmr.ts index e1c43c7f..b129af6b 100644 --- a/src/environments/environment.hmr.ts +++ b/src/environments/environment.hmr.ts @@ -1,4 +1,4 @@ export const environment = { production: false, - hmr: true + hmr : true }; diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3420b328..bcbc8810 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,4 +1,4 @@ export const environment = { production: true, - hmr: false + hmr : false }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 8bd4860c..cd8ca06f 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -5,5 +5,5 @@ export const environment = { production: false, - hmr: false + hmr : false };