diff --git a/src/app/main/angular-material-elements/example-components.ts b/src/app/main/angular-material-elements/example-components.ts index a8fdb614..89b8e29b 100644 --- a/src/app/main/angular-material-elements/example-components.ts +++ b/src/app/main/angular-material-elements/example-components.ts @@ -9,7 +9,6 @@ import { ButtonToggleOverviewExample } from 'assets/angular-material-examples/bu import { ButtonTypesExample } from 'assets/angular-material-examples/button-types/button-types-example'; import { CardFancyExample } from 'assets/angular-material-examples/card-fancy/card-fancy-example'; import { CardOverviewExample } from 'assets/angular-material-examples/card-overview/card-overview-example'; -import { CdkTableBasicExample } from 'assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example'; import { CheckboxConfigurableExample } from 'assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example'; import { CheckboxOverviewExample } from 'assets/angular-material-examples/checkbox-overview/checkbox-overview-example'; import { ChipsInputExample } from 'assets/angular-material-examples/chips-input/chips-input-example'; @@ -111,8 +110,6 @@ import { FormFieldLabelExample } from 'assets/angular-material-examples/form-fie import { AutocompleteOptgroupExample } from 'assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example'; import { BadgeOverviewExample } from 'assets/angular-material-examples/badge-overview/badge-overview-example'; import { BottomSheetOverviewExample, BottomSheetOverviewExampleSheet } from 'assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example'; -import { CdkTreeFlatExample } from 'assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example'; -import { CdkTreeNestedExample } from 'assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example'; import { ChipsAutocompleteExample } from 'assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example'; import { DatepickerColorExample } from 'assets/angular-material-examples/datepicker-color/datepicker-color-example'; import { DatepickerCustomHeaderExample, ExampleHeader } from 'assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example'; @@ -143,7 +140,6 @@ import { TreeDynamicExample } from 'assets/angular-material-examples/tree-dynami import { TreeFlatOverviewExample } from 'assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example'; import { TreeLoadmoreExample } from 'assets/angular-material-examples/tree-loadmore/tree-loadmore-example'; import { TreeNestedOverviewExample } from 'assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example'; -import { CdkTableBasicFlexExample } from 'assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example'; import { StepperVerticalExample } from 'assets/angular-material-examples/stepper-vertical/stepper-vertical-example'; import { TabGroupBasicExample } from 'assets/angular-material-examples/tab-group-basic/tab-group-basic-example'; import { TabGroupAsyncExample } from 'assets/angular-material-examples/tab-group-async/tab-group-async-example'; @@ -169,6 +165,14 @@ import { TableStickyComplexExample } from 'assets/angular-material-examples/tabl import { TableStickyComplexFlexExample } from 'assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example'; import { TableStickyFooterExample } from 'assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example'; import { TableStickyHeaderExample } from 'assets/angular-material-examples/table-sticky-header/table-sticky-header-example'; +import { ButtonToggleAppearanceExample } from 'assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example'; +import { RippleOverviewExample } from 'assets/angular-material-examples/ripple-overview/ripple-overview-example'; +import { StepperLabelPositionBottomExample } from 'assets/angular-material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example'; +import { StepperStatesExample } from 'assets/angular-material-examples/stepper-states/stepper-states-example'; +import { StepperErrorsExample } from 'assets/angular-material-examples/stepper-errors/stepper-errors-example'; +import { TabGroupAlignExample } from 'assets/angular-material-examples/tab-group-align/tab-group-align-example'; +import { SimpleColumn, TableSimpleColumnExample } from 'assets/angular-material-examples/table-simple-column/table-simple-column-example'; +import { TableWrappedExample, WrapperTable } from 'assets/angular-material-examples/table-wrapped/table-wrapped-example'; export const COMPONENT_MAP = { 'autocomplete' : [ @@ -191,20 +195,13 @@ export const COMPONENT_MAP = { ], 'button-toggle' : [ 'button-toggle-overview', + 'button-toggle-appearance', 'button-toggle-exclusive' ], 'card' : [ 'card-overview', 'card-fancy' ], - // 'cdk-table' : [ - // 'cdk-table-basic', - // 'cdk-table-basic-flex', - // 'cdk-table-flat' - // ], - // 'cdk-tree' : [ - // 'cdk-tree-nested' - // ], 'checkbox' : [ 'checkbox-overview', 'checkbox-configurable' @@ -307,6 +304,9 @@ export const COMPONENT_MAP = { 'progress-spinner-overview', 'progress-spinner-configurable' ], + 'ripples' : [ + 'ripple-overview' + ], 'radio-button' : [ 'radio-overview', 'radio-ng-model' @@ -357,7 +357,10 @@ export const COMPONENT_MAP = { 'stepper' : [ 'stepper-overview', 'stepper-editable', + 'stepper-errors', + 'stepper-label-position-bottom', 'stepper-optional', + 'stepper-states', 'stepper-vertical' ], 'table' : [ @@ -373,16 +376,19 @@ export const COMPONENT_MAP = { 'table-pagination', 'table-row-context', 'table-selection', + 'table-simple-column', 'table-sorting', 'table-sticky-columns', 'table-sticky-complex', 'table-sticky-complex-flex', 'table-sticky-header', 'table-sticky-footer', + 'table-wrapped' ], 'tabs' : [ 'tab-group-basic', 'tab-group-async', + 'tab-group-align', 'tab-group-custom-label', 'tab-group-dynamic', 'tab-group-dynamic-height', @@ -460,6 +466,10 @@ export const EXAMPLE_COMPONENTS = { title : 'Basic buttons', component: ButtonOverviewExample }, + 'button-toggle-appearance' : { + title : 'Button toggle appearance', + component: ButtonToggleAppearanceExample + }, 'button-toggle-exclusive' : { title : 'Exclusive selection', component: ButtonToggleExclusiveExample @@ -480,22 +490,6 @@ export const EXAMPLE_COMPONENTS = { title : 'Basic cards', component: CardOverviewExample }, - 'cdk-table-basic' : { - title : 'Basic CDK data-table', - component: CdkTableBasicExample - }, - 'cdk-table-basic-flex' : { - title : 'Basic use of `` (uses display flex)', - component: CdkTableBasicFlexExample - }, - 'cdk-tree-flat' : { - title : 'Tree with flat nodes', - component: CdkTreeFlatExample - }, - 'cdk-tree-nested' : { - title : 'Tree with nested nodes', - component: CdkTreeNestedExample - }, 'checkbox-configurable' : { title : 'Configurable checkbox', component: CheckboxConfigurableExample @@ -787,6 +781,10 @@ export const EXAMPLE_COMPONENTS = { title : 'Basic radios', component: RadioOverviewExample }, + 'ripple-overview' : { + title : 'MatRipple basic usage', + component: RippleOverviewExample + }, 'select-custom-trigger' : { title : 'Select with custom trigger text', component: SelectCustomTriggerExample @@ -921,6 +919,14 @@ export const EXAMPLE_COMPONENTS = { title : 'Stepper with editable steps', component: StepperEditableExample }, + 'stepper-errors' : { + title : 'Stepper that displays errors in the steps\n', + component: StepperErrorsExample + }, + 'stepper-label-position-bottom' : { + title : 'Stepper label position bottom', + component: StepperLabelPositionBottomExample + }, 'stepper-optional' : { title : 'Stepper with optional steps', component: StepperOptionalExample @@ -929,6 +935,10 @@ export const EXAMPLE_COMPONENTS = { title : 'Stepper overview', component: StepperOverviewExample }, + 'stepper-states' : { + title : 'Stepper with customized states', + component: StepperStatesExample + }, 'stepper-vertical' : { title : 'Stepper vertical', component: StepperVerticalExample @@ -937,15 +947,15 @@ export const EXAMPLE_COMPONENTS = { title : 'Basic table', component: TableBasicExample }, - 'table-basic-flex' : { + 'table-basic-flex' : { title : 'Basic use of `` (uses display flex)', component: TableBasicFlexExample }, - 'table-dynamic-columns' : { + 'table-dynamic-columns' : { title : 'Table dynamically changing the columns displayed', component: TableDynamicColumnsExample }, - 'table-expandable-rows' : { + 'table-expandable-rows' : { title : 'Table with expandable rows', component: TableExpandableRowsExample }, @@ -961,7 +971,7 @@ export const EXAMPLE_COMPONENTS = { title : 'Table retrieving data through HTTP', component: TableHttpExample }, - 'table-multiple-header-footer' : { + 'table-multiple-header-footer' : { title : 'Table with multiple header and footer rows', component: TableMultipleHeaderFooterExample }, @@ -973,7 +983,7 @@ export const EXAMPLE_COMPONENTS = { title : 'Table with pagination', component: TablePaginationExample }, - 'table-row-context' : { + 'table-row-context' : { title : 'Table showing each row context properties', component: TableRowContextExample }, @@ -981,30 +991,42 @@ export const EXAMPLE_COMPONENTS = { title : 'Table with selection', component: TableSelectionExample }, + 'table-simple-column' : { + title : 'Table with a custom column component for easy column definition reuse', + component: TableSimpleColumnExample + }, 'table-sorting' : { title : 'Table with sorting', component: TableSortingExample }, - 'table-sticky-columns' : { + 'table-sticky-columns' : { title : 'Table with a sticky columns', component: TableStickyColumnsExample }, - 'table-sticky-complex' : { + 'table-sticky-complex' : { title : 'Tables with toggle-able sticky headers, footers, and columns', component: TableStickyComplexExample }, - 'table-sticky-complex-flex' : { + 'table-sticky-complex-flex' : { title : 'Flex-layout tables with toggle-able sticky headers, footers, and columns', component: TableStickyComplexFlexExample }, - 'table-sticky-footer' : { + 'table-sticky-footer' : { title : 'Table with a sticky footer', component: TableStickyFooterExample }, - 'table-sticky-header' : { + 'table-sticky-header' : { title : 'Table with sticky header', component: TableStickyHeaderExample }, + 'table-wrapped' : { + title : 'Table example that shows how to wrap a table component for definition and behavior reuse', + component: TableWrappedExample + }, + 'tab-group-align' : { + title : 'Tab group with aligned labels', + component: TabGroupAlignExample + }, 'tab-group-basic' : { title : 'Basic use of the tab group', component: TabGroupBasicExample @@ -1065,11 +1087,11 @@ export const EXAMPLE_COMPONENTS = { title : 'Basic toolbar', component: ToolbarOverviewExample }, - 'tooltip-auto-hide' : { + 'tooltip-auto-hide' : { title : 'Tooltip that demonstrates auto-hiding when it clips out of its scrolling container', component: TooltipAutoHideExample }, - 'tooltip-custom-class' : { + 'tooltip-custom-class' : { title : 'Tooltip that can have a custom class applied', component: TooltipCustomClassExample }, @@ -1077,7 +1099,7 @@ export const EXAMPLE_COMPONENTS = { title : 'Tooltip with a show and hide delay', component: TooltipDelayExample }, - 'tooltip-disabled' : { + 'tooltip-disabled' : { title : 'Tooltip that can be disabled', component: TooltipDisabledExample }, @@ -1085,7 +1107,7 @@ export const EXAMPLE_COMPONENTS = { title : 'Tooltip that can be manually shown/hidden', component: TooltipManualExample }, - 'tooltip-message' : { + 'tooltip-message' : { title : 'Tooltip with a changing message', component: TooltipMessageExample }, @@ -1135,13 +1157,10 @@ export const EXAMPLE_LIST = [ ButtonOverviewExample, ButtonToggleExclusiveExample, ButtonToggleOverviewExample, + ButtonToggleAppearanceExample, ButtonTypesExample, CardFancyExample, CardOverviewExample, - CdkTableBasicExample, - CdkTableBasicFlexExample, - CdkTreeFlatExample, - CdkTreeNestedExample, CheckboxConfigurableExample, CheckboxOverviewExample, ChipsAutocompleteExample, @@ -1212,6 +1231,7 @@ export const EXAMPLE_LIST = [ ProgressSpinnerOverviewExample, RadioNgModelExample, RadioOverviewExample, + RippleOverviewExample, SelectCustomTriggerExample, SelectDisabledExample, SelectErrorStateMatcherExample, @@ -1245,8 +1265,11 @@ export const EXAMPLE_LIST = [ SnackBarPositionExample, SortOverviewExample, StepperEditableExample, + StepperErrorsExample, + StepperLabelPositionBottomExample, StepperOptionalExample, StepperOverviewExample, + StepperStatesExample, StepperVerticalExample, TableBasicExample, TableBasicFlexExample, @@ -1260,12 +1283,15 @@ export const EXAMPLE_LIST = [ TablePaginationExample, TableRowContextExample, TableSelectionExample, + TableSimpleColumnExample, SimpleColumn, TableSortingExample, TableStickyColumnsExample, TableStickyComplexExample, TableStickyComplexFlexExample, TableStickyFooterExample, TableStickyHeaderExample, + TableWrappedExample, WrapperTable, + TabGroupAlignExample, TabGroupBasicExample, TabGroupAsyncExample, TabGroupCustomLabelExample, diff --git a/src/app/main/angular-material-elements/material.module.ts b/src/app/main/angular-material-elements/material.module.ts index cadbb7a6..1661ce74 100644 --- a/src/app/main/angular-material-elements/material.module.ts +++ b/src/app/main/angular-material-elements/material.module.ts @@ -1,7 +1,5 @@ import { NgModule } from '@angular/core'; -import { CdkTableModule } from '@angular/cdk/table'; -import { CdkTreeModule } from '@angular/cdk/tree'; import { MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, @@ -15,8 +13,6 @@ import { MatMomentDateModule } from '@angular/material-moment-adapter'; @NgModule({ imports: [ - CdkTableModule, - CdkTreeModule, MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, @@ -55,8 +51,6 @@ import { MatMomentDateModule } from '@angular/material-moment-adapter'; MatTreeModule ], exports: [ - CdkTableModule, - CdkTreeModule, MatAutocompleteModule, MatBadgeModule, MatBottomSheetModule, diff --git a/src/app/main/documentation/changelog/changelog.component.html b/src/app/main/documentation/changelog/changelog.component.html index bbf89b87..cac01917 100644 --- a/src/app/main/documentation/changelog/changelog.component.html +++ b/src/app/main/documentation/changelog/changelog.component.html @@ -63,9 +63,9 @@
New
    -
  • Updated Angular to 7.0.0-rc.0
    • -
  • Updated Angular Material to 7.0.0-rc.1
    • -
  • Updated Typescript to 3.1.1
    • +
  • Updated Angular to 7.0.0
    • +
  • Updated Angular Material to 7.0.0
    • +
  • Updated Typescript to 3.1.3
  • Updated various other libraries
  • Modernization:
      diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index d0a9bcde..b434702e 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -329,11 +329,11 @@ export const navigation: FuseNavigation[] = [ url : '/pages/profile' }, { - id : 'search', - title: 'Search', - type : 'collapsable', - icon : 'search', - children : [ + id : 'search', + title : 'Search', + type : 'collapsable', + icon : 'search', + children: [ { id : 'search-classic', title: 'Classic', @@ -345,7 +345,7 @@ export const navigation: FuseNavigation[] = [ title: 'Modern', type : 'item', url : '/pages/search/modern' - }, + } ] }, { @@ -793,6 +793,12 @@ export const navigation: FuseNavigation[] = [ title: 'Progress bar', type : 'item', url : '/angular-material-elements/progress-bar' + }, + { + id : 'ripples', + title: 'Ripples', + type : 'item', + url : '/angular-material-elements/ripples' } ] }, diff --git a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts index 75e0e13c..862f4009 100755 --- a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts +++ b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts @@ -18,6 +18,7 @@ export const _filter = (opt: string[], value: string): string[] => { * @title Option groups autocomplete */ @Component({ + selector: 'autocomplete-optgroup-example', templateUrl: './autocomplete-optgroup-example.html', styleUrls: ['./autocomplete-optgroup-example.css'], }) diff --git a/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.html b/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.html index f4e1ad63..d9805216 100755 --- a/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.html +++ b/src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.html @@ -1,3 +1,3 @@ -

      You have receive a file called "cat-picture.jpeg".

      +

      You have received a file called "cat-picture.jpeg".

      diff --git a/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.css b/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.css new file mode 100755 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.html b/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.html new file mode 100755 index 00000000..02328e5d --- /dev/null +++ b/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.html @@ -0,0 +1,17 @@ +

      + Default appearance: + + Bold + Italic + Underline + +

      + +

      + Legacy appearance: + + Bold + Italic + Underline + +

      diff --git a/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.ts b/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.ts new file mode 100755 index 00000000..b3784538 --- /dev/null +++ b/src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Button toggle appearance + */ +@Component({ + selector: 'button-toggle-appearance-example', + templateUrl: 'button-toggle-appearance-example.html', + styleUrls: ['button-toggle-appearance-example.css'], +}) +export class ButtonToggleAppearanceExample {} 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 d9ce5779..34087886 100755 --- 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,4 +1,4 @@ -.button-row button, -.button-row a { +.example-button-row button, +.example-button-row a { margin-right: 8px; } 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 710c1415..829fd13f 100755 --- 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,5 +1,5 @@

      Basic Buttons

      -
      +
      @@ -9,7 +9,7 @@

      Raised Buttons

      -
      +
      @@ -19,7 +19,7 @@

      Stroked Buttons

      -
      +
      @@ -29,7 +29,7 @@

      Flat Buttons

      -
      +
      @@ -39,7 +39,7 @@

      Icon Buttons

      -
      +
      @@ -58,7 +58,7 @@

      Fab Buttons

      -
      +
      @@ -71,7 +71,7 @@

      Mini Fab Buttons

      -
      +
      @@ -81,4 +81,4 @@ favorite Link -
      \ No newline at end of file +
      diff --git a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css deleted file mode 100755 index f0d18e4f..00000000 --- a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Add basic flex styling so that the cells evenly space themselves in the row. - */ -cdk-row, cdk-header-row, cdk-footer-row { - display: flex; -} - -cdk-cell, cdk-header-cell, cdk-footer-cell { - flex: 1; -} diff --git a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html deleted file mode 100755 index 4f8f17a9..00000000 --- a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - No. - {{element.position}} - - - - - Name - {{element.name}} - - - - - Weight - {{element.weight}} - - - - - Symbol - {{element.symbol}} - - - - - diff --git a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts deleted file mode 100755 index 6e255f9a..00000000 --- a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts +++ /dev/null @@ -1,55 +0,0 @@ -import {DataSource} from '@angular/cdk/collections'; -import {Component} from '@angular/core'; -import {BehaviorSubject, Observable} from 'rxjs'; - -export interface PeriodicElement { - name: string; - position: number; - symbol: string; - weight: number; -} - -const ELEMENT_DATA: PeriodicElement[] = [ - {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'}, -]; - -/** - * @title Basic use of `` (uses display flex) - */ -@Component({ - selector: 'cdk-table-basic-flex-example', - styleUrls: ['cdk-table-basic-flex-example.css'], - templateUrl: 'cdk-table-basic-flex-example.html', -}) -export class CdkTableBasicFlexExample { - displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new ExampleDataSource(); -} - -/** - * Data source to provide what data should be rendered in the table. Note that the data source - * can retrieve its data in any way. In this case, the data source is provided a reference - * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage - * 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 { - /** Stream of data that is provided to the table. */ - data = new BehaviorSubject(ELEMENT_DATA); - - /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable { - return this.data; - } - - disconnect() {} -} 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 deleted file mode 100755 index edaff91e..00000000 --- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css +++ /dev/null @@ -1,7 +0,0 @@ -table { - width: 100%; -} - -th { - text-align: left; -} 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 deleted file mode 100755 index 2664fe00..00000000 --- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
      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 deleted file mode 100755 index c1f06e45..00000000 --- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts +++ /dev/null @@ -1,55 +0,0 @@ -import {DataSource} from '@angular/cdk/collections'; -import {Component} from '@angular/core'; -import {BehaviorSubject, Observable} from 'rxjs'; - -export interface PeriodicElement { - name: string; - position: number; - weight: number; - symbol: string; -} - -const ELEMENT_DATA: PeriodicElement[] = [ - {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'}, -]; - -/** - * @title Basic CDK data-table - */ -@Component({ - selector: 'cdk-table-basic-example', - styleUrls: ['cdk-table-basic-example.css'], - templateUrl: 'cdk-table-basic-example.html', -}) -export class CdkTableBasicExample { - displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; - dataSource = new ExampleDataSource(); -} - -/** - * Data source to provide what data should be rendered in the table. Note that the data source - * can retrieve its data in any way. In this case, the data source is provided a reference - * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage - * 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 { - /** Stream of data that is provided to the table. */ - data = new BehaviorSubject(ELEMENT_DATA); - - /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable { - return this.data; - } - - disconnect() {} -} diff --git a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css deleted file mode 100755 index a88255f0..00000000 --- a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css +++ /dev/null @@ -1,4 +0,0 @@ -.example-tree-node { - display: flex; - align-items: center; -} diff --git a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html deleted file mode 100755 index 1ad37095..00000000 --- a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - {{node.filename}}: {{node.type}} - - - - {{node.filename}}: {{node.type}} - - diff --git a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts deleted file mode 100755 index 9f948712..00000000 --- a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts +++ /dev/null @@ -1,149 +0,0 @@ -import {FlatTreeControl} from '@angular/cdk/tree'; -import {Component, Injectable} from '@angular/core'; -import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; -import {BehaviorSubject, Observable, of as observableOf} from 'rxjs'; - -/** - * File node data with nested structure. - * Each node has a filename, and a type or a list of children. - */ -export class FileNode { - children: FileNode[]; - filename: string; - type: any; -} - -/** Flat node with expandable and level information */ -export class FileFlatNode { - constructor( - public expandable: boolean, public filename: string, public level: number, public type: any) {} -} - -/** - * The file structure tree data in string. The data could be parsed into a Json object - */ -const TREE_DATA = JSON.stringify({ - Applications: { - Calendar: 'app', - Chrome: 'app', - Webstorm: 'app' - }, - Documents: { - angular: { - src: { - compiler: 'ts', - core: 'ts' - } - }, - material2: { - src: { - button: 'ts', - checkbox: 'ts', - input: 'ts' - } - } - }, - Downloads: { - October: 'pdf', - November: 'pdf', - Tutorial: 'html' - }, - Pictures: { - 'Photo Booth Library': { - Contents: 'dir', - Pictures: 'dir' - }, - Sun: 'png', - Woods: 'jpg' - } -}); - -/** - * File database, it can build a tree structured Json object from string. - * Each node in Json object represents a file or a directory. For a file, it has filename and type. - * For a directory, it has filename and children (a list of files or directories). - * The input will be a json object string, and the output is a list of `FileNode` with nested - * structure. - */ -@Injectable() -export class FileDatabase { - dataChange = new BehaviorSubject([]); - - get data(): FileNode[] { return this.dataChange.value; } - - constructor() { - this.initialize(); - } - - initialize() { - // Parse the string to json object. - const dataObject = JSON.parse(TREE_DATA); - - // Build the tree nodes from Json object. The result is a list of `FileNode` with nested - // file node as children. - const data = this.buildFileTree(dataObject, 0); - - // Notify the change. - this.dataChange.next(data); - } - - /** - * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. - * The return value is the list of `FileNode`. - */ - buildFileTree(obj: object, level: number): FileNode[] { - return Object.keys(obj).reduce((accumulator, key) => { - const value = obj[key]; - const node = new FileNode(); - node.filename = key; - - if (value != null) { - if (typeof value === 'object') { - node.children = this.buildFileTree(value, level + 1); - } else { - node.type = value; - } - } - - return accumulator.concat(node); - }, []); - } -} - -/** - * @title Tree with flat nodes - */ -@Component({ - selector: 'cdk-tree-flat-example', - templateUrl: 'cdk-tree-flat-example.html', - styleUrls: ['cdk-tree-flat-example.css'], - providers: [FileDatabase] -}) -export class CdkTreeFlatExample { - treeControl: FlatTreeControl; - treeFlattener: MatTreeFlattener; - dataSource: MatTreeFlatDataSource; - - constructor(database: FileDatabase) { - this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel, - this._isExpandable, this._getChildren); - this.treeControl = new FlatTreeControl(this._getLevel, this._isExpandable); - this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); - - database.dataChange.subscribe(data => { - this.dataSource.data = data; - }); - } - - hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable; - - transformer = (node: FileNode, level: number) => { - return new FileFlatNode(!!node.children, node.filename, level, node.type); - } - - private _getLevel = (node: FileFlatNode) => node.level; - - private _isExpandable = (node: FileFlatNode) => node.expandable; - - private _getChildren = (node: FileNode): Observable => observableOf(node.children); -} diff --git a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.css b/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.css deleted file mode 100755 index ca663607..00000000 --- a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.css +++ /dev/null @@ -1,15 +0,0 @@ -.example-tree-invisible { - display: none; -} - -.example-tree ul, -.example-tree li { - margin-top: 0; - margin-bottom: 0; - list-style-type: none; -} - -.example-tree-node { - display: block; - padding-left: 40px; -} diff --git a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.html b/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.html deleted file mode 100755 index 1c59e426..00000000 --- a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - {{node.filename}}: {{node.type}} - - - - {{node.filename}}: {{node.type}} -
      - -
      -       -       diff --git a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts b/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts deleted file mode 100755 index 3809879c..00000000 --- a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts +++ /dev/null @@ -1,129 +0,0 @@ -import {NestedTreeControl} from '@angular/cdk/tree'; -import {Component, Injectable} from '@angular/core'; -import {MatTreeNestedDataSource} from '@angular/material/tree'; -import {BehaviorSubject, of as observableOf} from 'rxjs'; - -/** - * Json node data with nested structure. Each node has a filename and a value or a list of children - */ -export class FileNode { - children: FileNode[]; - filename: string; - type: any; -} - -/** - * The Json tree data in string. The data could be parsed into Json object - */ -const TREE_DATA = JSON.stringify({ - Applications: { - Calendar: 'app', - Chrome: 'app', - Webstorm: 'app' - }, - Documents: { - angular: { - src: { - compiler: 'ts', - core: 'ts' - } - }, - material2: { - src: { - button: 'ts', - checkbox: 'ts', - input: 'ts' - } - } - }, - Downloads: { - October: 'pdf', - November: 'pdf', - Tutorial: 'html' - }, - Pictures: { - 'Photo Booth Library': { - Contents: 'dir', - Pictures: 'dir' - }, - Sun: 'png', - Woods: 'jpg' - } -}); - -/** - * File database, it can build a tree structured Json object from string. - * Each node in Json object represents a file or a directory. For a file, it has filename and type. - * For a directory, it has filename and children (a list of files or directories). - * The input will be a json object string, and the output is a list of `FileNode` with nested - * structure. - */ -@Injectable() -export class FileDatabase { - dataChange = new BehaviorSubject([]); - - get data(): FileNode[] { return this.dataChange.value; } - - constructor() { - this.initialize(); - } - - initialize() { - // Parse the string to json object. - const dataObject = JSON.parse(TREE_DATA); - - // Build the tree nodes from Json object. The result is a list of `FileNode` with nested - // file node as children. - const data = this.buildFileTree(dataObject, 0); - - // Notify the change. - this.dataChange.next(data); - } - - /** - * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. - * The return value is the list of `FileNode`. - */ - buildFileTree(obj: object, level: number): FileNode[] { - return Object.keys(obj).reduce((accumulator, key) => { - const value = obj[key]; - const node = new FileNode(); - node.filename = key; - - if (value != null) { - if (typeof value === 'object') { - node.children = this.buildFileTree(value, level + 1); - } else { - node.type = value; - } - } - - return accumulator.concat(node); - }, []); - } -} - -/** - * @title Tree with nested nodes - */ -@Component({ - selector: 'cdk-tree-nested-example', - templateUrl: 'cdk-tree-nested-example.html', - styleUrls: ['cdk-tree-nested-example.css'], - providers: [FileDatabase] -}) -export class CdkTreeNestedExample { - nestedTreeControl: NestedTreeControl; - nestedDataSource: MatTreeNestedDataSource; - - constructor(database: FileDatabase) { - this.nestedTreeControl = new NestedTreeControl(this._getChildren); - this.nestedDataSource = new MatTreeNestedDataSource(); - - database.dataChange.subscribe(data => this.nestedDataSource.data = data); - } - - hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type; - - private _getChildren = (node: FileNode) => observableOf(node.children); -} diff --git a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts index 2c3a3c0e..56169ef8 100755 --- a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts +++ b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts @@ -1,7 +1,7 @@ import {COMMA, ENTER} from '@angular/cdk/keycodes'; import {Component, ElementRef, ViewChild} from '@angular/core'; import {FormControl} from '@angular/forms'; -import {MatAutocompleteSelectedEvent, MatChipInputEvent} from '@angular/material'; +import {MatAutocompleteSelectedEvent, MatChipInputEvent, MatAutocomplete} from '@angular/material'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; @@ -17,14 +17,15 @@ export class ChipsAutocompleteExample { visible = true; selectable = true; removable = true; - addOnBlur = false; + addOnBlur = true; separatorKeysCodes: number[] = [ENTER, COMMA]; fruitCtrl = new FormControl(); filteredFruits: Observable; fruits: string[] = ['Lemon']; allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry']; - @ViewChild('fruitInput') fruitInput: ElementRef; + @ViewChild('fruitInput') fruitInput: ElementRef; + @ViewChild('auto') matAutocomplete: MatAutocomplete; constructor() { this.filteredFruits = this.fruitCtrl.valueChanges.pipe( @@ -33,20 +34,24 @@ export class ChipsAutocompleteExample { } add(event: MatChipInputEvent): void { - const input = event.input; - const value = event.value; + // Add fruit only when MatAutocomplete is not open + // To make sure this does not conflict with OptionSelected Event + if (!this.matAutocomplete.isOpen) { + const input = event.input; + const value = event.value; - // Add our fruit - if ((value || '').trim()) { - this.fruits.push(value.trim()); + // Add our fruit + if ((value || '').trim()) { + this.fruits.push(value.trim()); + } + + // Reset the input value + if (input) { + input.value = ''; + } + + this.fruitCtrl.setValue(null); } - - // Reset the input value - if (input) { - input.value = ''; - } - - this.fruitCtrl.setValue(null); } remove(fruit: string): void { diff --git a/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.css b/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.css index 6d47c597..74323087 100755 --- a/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.css +++ b/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.css @@ -1,16 +1 @@ -.example-header { - display: flex; - align-items: center; - padding: 0.5em; -} - -.example-header-label { - flex: 1; - height: 1em; - font-weight: bold; - text-align: center; -} - -.example-double-arrow .mat-icon { - margin: -22%; -} +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts b/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts index ec549763..3bdb396b 100755 --- a/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts +++ b/src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts @@ -15,7 +15,6 @@ import {takeUntil} from 'rxjs/operators'; @Component({ selector: 'datepicker-custom-header-example', templateUrl: 'datepicker-custom-header-example.html', - styleUrls: ['datepicker-custom-header-example.css'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerCustomHeaderExample { @@ -25,6 +24,24 @@ export class DatepickerCustomHeaderExample { /** Custom header component for datepicker. */ @Component({ selector: 'example-header', + styles: [` + .example-header { + display: flex; + align-items: center; + padding: 0.5em; + } + + .example-header-label { + flex: 1; + height: 1em; + font-weight: 500; + text-align: center; + } + + .example-double-arrow .mat-icon { + margin: -22%; + } + `], template: `
      +
      + + + +
      + Fill out your address + + + +
      + + +
      +
      +       + + Done + You are now done. +
      + + +
      +       + diff --git a/src/assets/angular-material-examples/stepper-errors/stepper-errors-example.ts b/src/assets/angular-material-examples/stepper-errors/stepper-errors-example.ts new file mode 100755 index 00000000..22e89d43 --- /dev/null +++ b/src/assets/angular-material-examples/stepper-errors/stepper-errors-example.ts @@ -0,0 +1,30 @@ +import {Component, OnInit} from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper'; + +/** + * @title Stepper that displays errors in the steps + */ +@Component({ + selector: 'stepper-errors-example', + templateUrl: 'stepper-errors-example.html', + styleUrls: ['stepper-errors-example.css'], + providers: [{ + provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {showError: true} + }] +}) +export class StepperErrorsExample implements OnInit { + firstFormGroup: FormGroup; + secondFormGroup: FormGroup; + + constructor(private _formBuilder: FormBuilder) {} + + 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/stepper-label-position-bottom/stepper-label-position-bottom-example.css b/src/assets/angular-material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.css new file mode 100755 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.html b/src/assets/angular-material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.html new file mode 100755 index 00000000..931635a1 --- /dev/null +++ b/src/assets/angular-material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.html @@ -0,0 +1,33 @@ + + +
      + Fill out your name + + + +
      + +
      +
      +       + +
      + Fill out your address + + + +
      + + +
      +
      +       + + Done + You are now done. +
      + + +
      +       +       diff --git a/src/assets/angular-material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.ts b/src/assets/angular-material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.ts new file mode 100755 index 00000000..406dccb6 --- /dev/null +++ b/src/assets/angular-material-examples/stepper-label-position-bottom/stepper-label-position-bottom-example.ts @@ -0,0 +1,26 @@ +import {Component, OnInit} from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; + +/** + * @title Stepper label bottom position + */ +@Component({ + selector: 'stepper-label-position-bottom-example', + templateUrl: 'stepper-label-position-bottom-example.html', + styleUrls: ['stepper-label-position-bottom-example.css'], +}) +export class StepperLabelPositionBottomExample implements OnInit { + firstFormGroup: FormGroup; + secondFormGroup: FormGroup; + + constructor(private _formBuilder: FormBuilder) {} + + 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/stepper-states/stepper-states-example.css b/src/assets/angular-material-examples/stepper-states/stepper-states-example.css new file mode 100755 index 00000000..e69de29b diff --git a/src/assets/angular-material-examples/stepper-states/stepper-states-example.html b/src/assets/angular-material-examples/stepper-states/stepper-states-example.html new file mode 100755 index 00000000..657fd974 --- /dev/null +++ b/src/assets/angular-material-examples/stepper-states/stepper-states-example.html @@ -0,0 +1,60 @@ + + +
      + Fill out your name + + + +
      + +
      +
      +       + +
      + Fill out your address + + + +
      + + +
      +
      +       + + Done + You are now done. +
      + + +
      +       +       + + + +

      Put down your phones.

      +
      + +
      +       + +

      Socialize with each other.

      +
      + + +
      +       + +

      You're welcome.

      +       + + + + call_end + + + forum + +       diff --git a/src/assets/angular-material-examples/stepper-states/stepper-states-example.ts b/src/assets/angular-material-examples/stepper-states/stepper-states-example.ts new file mode 100755 index 00000000..bce0d1f2 --- /dev/null +++ b/src/assets/angular-material-examples/stepper-states/stepper-states-example.ts @@ -0,0 +1,30 @@ +import {Component, OnInit} from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper'; + +/** + * @title Stepper with customized states + */ +@Component({ + selector: 'stepper-states-example', + templateUrl: 'stepper-states-example.html', + styleUrls: ['stepper-states-example.css'], + providers: [{ + provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false} + }] +}) +export class StepperStatesExample implements OnInit { + firstFormGroup: FormGroup; + secondFormGroup: FormGroup; + + constructor(private _formBuilder: FormBuilder) {} + + 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/stepper-vertical/stepper-vertical-example.ts b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts index 26bc7486..a0453cd5 100755 --- a/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts +++ b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts @@ -5,7 +5,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; * @title Stepper vertical */ @Component({ - selector: 'stepper-vertical', + selector: 'stepper-vertical-example', templateUrl: 'stepper-vertical-example.html', styleUrls: ['stepper-vertical-example.css'] }) diff --git a/src/assets/angular-material-examples/tab-group-align/tab-group-align-example.css b/src/assets/angular-material-examples/tab-group-align/tab-group-align-example.css new file mode 100755 index 00000000..d0f47895 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-align/tab-group-align-example.css @@ -0,0 +1,3 @@ +.mat-tab-group { + margin-bottom: 48px; +} diff --git a/src/assets/angular-material-examples/tab-group-align/tab-group-align-example.html b/src/assets/angular-material-examples/tab-group-align/tab-group-align-example.html new file mode 100755 index 00000000..f01f0273 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-align/tab-group-align-example.html @@ -0,0 +1,17 @@ + + Content 1 + Content 2 + Content 3 + + + + Content 1 + Content 2 + Content 3 + + + + Content 1 + Content 2 + Content 3 + diff --git a/src/assets/angular-material-examples/tab-group-align/tab-group-align-example.ts b/src/assets/angular-material-examples/tab-group-align/tab-group-align-example.ts new file mode 100755 index 00000000..4a321ba3 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-align/tab-group-align-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Tab group with aligned labels + */ +@Component({ + selector: 'tab-group-align-example', + templateUrl: 'tab-group-align-example.html', + styleUrls: ['tab-group-align-example.css'], +}) +export class TabGroupAlignExample {} diff --git a/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.css b/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.css new file mode 100755 index 00000000..1922e7ff --- /dev/null +++ b/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.html b/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.html new file mode 100755 index 00000000..61979707 --- /dev/null +++ b/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + +
      diff --git a/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts b/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts new file mode 100755 index 00000000..05c53f89 --- /dev/null +++ b/src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts @@ -0,0 +1,130 @@ +import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core'; +import {coerceBooleanProperty} from '@angular/cdk/coercion'; +import { + MatColumnDef, + MatSort, + MatSortHeader, + MatTable, + MatTableDataSource +} from '@angular/material'; + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {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'}, +]; + +/** + * @title Table with a custom column component for easy column definition reuse. + */ +@Component({ + selector: 'table-simple-column-example', + styleUrls: ['table-simple-column-example.css'], + templateUrl: 'table-simple-column-example.html', +}) +export class TableSimpleColumnExample implements OnInit { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + getWeight = (data: PeriodicElement) => '~' + data.weight; + + @ViewChild('sort') sort: MatSort; + + ngOnInit() { + this.dataSource.sort = this.sort; + } +} + +/** + * Column that shows simply shows text content for the header and row + * cells. By default, the name of this column will be assumed to be both the header + * text and data property used to access the data value to show in cells. To override + * the header text, provide a label text. To override the data cell values, + * provide a dataAccessor function that provides the string to display for each row's cell. + * + * Note that this component sets itself as visually hidden since it will show up in the `mat-table` + * DOM because it is an empty element with an ng-container (nothing rendered). It should not + * interfere with screen readers. + */ +@Component({ + selector: 'simple-column', + template: ` + + {{label || name}} + {{getData(data)}} + + `, + host: { + 'class': 'simple-column cdk-visually-hidden', + '[attr.ariaHidden]': 'true', + } +}) +export class SimpleColumn implements OnDestroy, OnInit { + /** Column name that should be used to reference this column. */ + @Input() + get name(): string { return this._name; } + set name(name: string) { + this._name = name; + this.columnDef.name = name; + } + _name: string; + + /** + * Text label that should be used for the column header. If this property is not + * set, the header text will default to the column name. + */ + @Input() label: string; + + /** + * Accessor function to retrieve the data should be provided to the cell. If this + * property is not set, the data cells will assume that the column name is the same + * as the data property the cells should display. + */ + @Input() dataAccessor: ((data: T, name: string) => string); + + /** Alignment of the cell values. */ + @Input() align: 'before' | 'after' = 'before'; + + /** Whether the column is sortable */ + @Input() + get sortable(): boolean { return this._sortable; } + set sortable(sortable: boolean) { + this._sortable = coerceBooleanProperty(sortable); + } + _sortable: boolean; + + @ViewChild(MatColumnDef) columnDef: MatColumnDef; + + @ViewChild(MatSortHeader) sortHeader: MatSortHeader; + + constructor(@Optional() public table: MatTable) { } + + ngOnInit() { + if (this.table) { + this.table.addColumnDef(this.columnDef); + } + } + + ngOnDestroy() { + if (this.table) { + this.table.removeColumnDef(this.columnDef); + } + } + + getData(data: T): any { + return this.dataAccessor ? this.dataAccessor(data, this.name) : (data as any)[this.name]; + } +} diff --git a/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.css b/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.css new file mode 100755 index 00000000..1922e7ff --- /dev/null +++ b/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.html b/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.html new file mode 100755 index 00000000..b4f5da82 --- /dev/null +++ b/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.html @@ -0,0 +1,12 @@ + + + + Name + {{element.name}} + + + + + + diff --git a/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.ts b/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.ts new file mode 100755 index 00000000..38e95d63 --- /dev/null +++ b/src/assets/angular-material-examples/table-wrapped/table-wrapped-example.ts @@ -0,0 +1,88 @@ +import { + AfterContentInit, + Component, + ContentChildren, + Input, + OnInit, + QueryList, + ViewChild +} from '@angular/core'; +import { + MatColumnDef, + MatHeaderRowDef, + MatRowDef, + MatSort, + MatTable, + MatTableDataSource +} from '@angular/material'; +import {DataSource} from '@angular/cdk/collections'; + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {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'}, +]; + +/** + * @title Table example that shows how to wrap a table component for definition and behavior reuse. + */ +@Component({ + selector: 'table-wrapped-example', + styleUrls: ['table-wrapped-example.css'], + templateUrl: 'table-wrapped-example.html', +}) +export class TableWrappedExample implements OnInit { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + + @ViewChild('sort') sort: MatSort; + + ngOnInit() { + this.dataSource.sort = this.sort; + } +} + +/** + * Table component that accepts column and row definitions in its content to be registered to the + * table. + */ +@Component({ + selector: 'wrapper-table', + templateUrl: 'wrapper-table.html', + styles: [` + table { + width: 100%; + } + `] +}) +export class WrapperTable implements AfterContentInit { + @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList; + @ContentChildren(MatRowDef) rowDefs: QueryList>; + @ContentChildren(MatColumnDef) columnDefs: QueryList; + + @ViewChild(MatTable) table: MatTable; + + @Input() columns: string[]; + + @Input() dataSource: DataSource; + + ngAfterContentInit() { + this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef)); + this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef)); + this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef)); + } +} diff --git a/src/assets/angular-material-examples/table-wrapped/wrapper-table.html b/src/assets/angular-material-examples/table-wrapped/wrapper-table.html new file mode 100755 index 00000000..ad3946e8 --- /dev/null +++ b/src/assets/angular-material-examples/table-wrapped/wrapper-table.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + +
      No. {{element.position}} Weight {{element.weight}} Symbol {{element.symbol}}
      diff --git a/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts b/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts index 1dd32fd5..12831678 100755 --- a/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts +++ b/src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts @@ -8,22 +8,22 @@ import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core styleUrls: ['./text-field-autofill-monitor-example.css'], }) export class TextFieldAutofillMonitorExample implements OnDestroy, OnInit { - @ViewChild('first', {read: ElementRef}) firstName: ElementRef; - @ViewChild('last', {read: ElementRef}) lastName: ElementRef; + @ViewChild('first', {read: ElementRef}) firstName: ElementRef; + @ViewChild('last', {read: ElementRef}) lastName: ElementRef; firstNameAutofilled: boolean; lastNameAutofilled: boolean; constructor(private autofill: AutofillMonitor) {} ngOnInit() { - this.autofill.monitor(this.firstName.nativeElement) + this.autofill.monitor(this.firstName) .subscribe(e => this.firstNameAutofilled = e.isAutofilled); - this.autofill.monitor(this.lastName.nativeElement) + this.autofill.monitor(this.lastName) .subscribe(e => this.lastNameAutofilled = e.isAutofilled); } ngOnDestroy() { - this.autofill.stopMonitoring(this.firstName.nativeElement); - this.autofill.stopMonitoring(this.lastName.nativeElement); + this.autofill.stopMonitoring(this.firstName); + this.autofill.stopMonitoring(this.lastName); } } diff --git a/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css index 9e7c7057..887e658c 100755 --- a/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css +++ b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css @@ -1,6 +1,5 @@ .example-button { display: block; - width: 48px; margin: 80px auto 400px; } diff --git a/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.html b/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.html index a92475a6..5fc96882 100755 --- a/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.html +++ b/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.html @@ -3,7 +3,7 @@ {{node.item}} + (change)="todoLeafItemSelectionToggle(node)">{{node.item}} diff --git a/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts b/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts index 2f031869..b3c1461c 100755 --- a/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts +++ b/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts @@ -68,7 +68,7 @@ export class ChecklistDatabase { * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. * The return value is the list of `TodoItemNode`. */ - buildFileTree(obj: object, level: number): TodoItemNode[] { + buildFileTree(obj: {[key: string]: any}, level: number): TodoItemNode[] { return Object.keys(obj).reduce((accumulator, key) => { const value = obj[key]; const node = new TodoItemNode(); @@ -168,10 +168,13 @@ export class TreeChecklistExample { return flatNode; } - /** Whether all the descendants of the node are selected */ + /** Whether all the descendants of the node are selected. */ descendantsAllSelected(node: TodoItemFlatNode): boolean { const descendants = this.treeControl.getDescendants(node); - return descendants.every(child => this.checklistSelection.isSelected(child)); + const descAllSelected = descendants.every(child => + this.checklistSelection.isSelected(child) + ); + return descAllSelected; } /** Whether part of the descendants are selected */ @@ -188,6 +191,61 @@ export class TreeChecklistExample { this.checklistSelection.isSelected(node) ? this.checklistSelection.select(...descendants) : this.checklistSelection.deselect(...descendants); + + // Force update for the parent + descendants.every(child => + this.checklistSelection.isSelected(child) + ); + this.checkAllParentsSelection(node); + } + + /** Toggle a leaf to-do item selection. Check all the parents to see if they changed */ + todoLeafItemSelectionToggle(node: TodoItemFlatNode): void { + this.checklistSelection.toggle(node); + this.checkAllParentsSelection(node); + } + + /* Checks all the parents when a leaf node is selected/unselected */ + checkAllParentsSelection(node: TodoItemFlatNode): void { + let parent: TodoItemFlatNode | null = this.getParentNode(node); + while (parent) { + this.checkRootNodeSelection(parent); + parent = this.getParentNode(parent); + } + } + + /** Check root node checked state and change it accordingly */ + checkRootNodeSelection(node: TodoItemFlatNode): void { + const nodeSelected = this.checklistSelection.isSelected(node); + const descendants = this.treeControl.getDescendants(node); + const descAllSelected = descendants.every(child => + this.checklistSelection.isSelected(child) + ); + if (nodeSelected && !descAllSelected) { + this.checklistSelection.deselect(node); + } else if (!nodeSelected && descAllSelected) { + this.checklistSelection.select(node); + } + } + + /* Get the parent node of a node */ + getParentNode(node: TodoItemFlatNode): TodoItemFlatNode | null { + const currentLevel = this.getLevel(node); + + if (currentLevel < 1) { + return null; + } + + const startIndex = this.treeControl.dataNodes.indexOf(node) - 1; + + for (let i = startIndex; i >= 0; i--) { + const currentNode = this.treeControl.dataNodes[i]; + + if (this.getLevel(currentNode) < currentLevel) { + return currentNode; + } + } + return null; } /** Select the category so we can insert the new item. */ diff --git a/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts b/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts index 8f560382..7933e19e 100755 --- a/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts +++ b/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts @@ -59,7 +59,7 @@ export class DynamicDataSource { private database: DynamicDatabase) {} connect(collectionViewer: CollectionViewer): Observable { - this.treeControl.expansionModel.onChange!.subscribe(change => { + this.treeControl.expansionModel.onChange.subscribe(change => { if ((change as SelectionChange).added || (change as SelectionChange).removed) { this.handleTreeControl(change as SelectionChange); diff --git a/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts b/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts index ba7a4dad..0e5155d1 100755 --- a/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts +++ b/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts @@ -91,7 +91,7 @@ export class FileDatabase { * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. * The return value is the list of `FileNode`. */ - buildFileTree(obj: object, level: number): FileNode[] { + buildFileTree(obj: {[key: string]: any}, level: number): FileNode[] { return Object.keys(obj).reduce((accumulator, key) => { const value = obj[key]; const node = new FileNode(); diff --git a/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts b/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts index 9fe9960e..2e93cde5 100755 --- a/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts +++ b/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts @@ -84,7 +84,7 @@ export class FileDatabase { * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. * The return value is the list of `FileNode`. */ - buildFileTree(obj: object, level: number): FileNode[] { + buildFileTree(obj: {[key: string]: any}, level: number): FileNode[] { return Object.keys(obj).reduce((accumulator, key) => { const value = obj[key]; const node = new FileNode();