From cff7941183b8fb770a316f04193c23cbe68bef59 Mon Sep 17 00:00:00 2001 From: Nicholas Shahan Date: Wed, 30 Aug 2017 15:55:28 -0700 Subject: [PATCH] Update all components (#153) * Update dependency to angular: ^4.0.0. * App Layout: Fix margins for header icons/links. * Material Button: Refactor raised styling so it can be used in a mixin. * Material Input: Add support for material dark theme. * Material Popup: * Constrain popups to the viewport if both `enforceSpaceConstraints` and `overlayRepositionLoop` are enabled. * Create the material-popup view synchronously. * Remove `animationComplete` event. * Add missing `MaterialIconComponent`, `MaterialPersistentDrawerDirective`, `MaterialTemporaryDrawerDirective`, and `MaterialSelectSearchboxComponent` to `materialDirectives`. * Change DisplayNameDirective to a functional directive. * Additional styling cleanup to support `ng-deep`. * Reduce visibility of common directives/components for smaller code size and better performance. * Refactor Angular annotations to inline versions. * Update documentation. --- CHANGELOG.md | 162 ++++++++---------- lib/angular_components.dart | 6 +- lib/src/components/app_layout/README.md | 10 +- lib/src/components/app_layout/layout.scss | 26 ++- lib/src/components/app_layout/layout.scss.css | 2 +- .../material_persistent_drawer.dart | 5 +- .../components/auto_dismiss/auto_dismiss.dart | 4 +- .../components/content/deferred_content.dart | 4 +- lib/src/components/focus/focus.dart | 2 +- lib/src/components/glyph/glyph.dart | 3 +- .../components/material_button/_mixins.scss | 43 +++-- .../material_button/material_button.scss.css | 2 +- .../material_button/material_fab.scss.css | 2 +- .../material_checkbox/material_checkbox.dart | 3 +- .../material_chips/material_chip.scss | 30 ++-- .../material_chips/material_chip.scss.css | 2 +- .../components/material_input/_mixins.scss | 14 ++ lib/src/components/material_list/_mixins.scss | 2 +- .../material_list/material_list.scss | 3 +- .../material_list/material_list.scss.css | 2 +- .../material_list/material_list_item.scss.css | 2 +- .../material_popup/material_popup.dart | 109 +++++++----- .../material_popup/material_popup.html | 2 +- .../src/popup_portal_directive.dart | 25 --- .../material_radio/material_radio_group.dart | 6 + .../material_ripple/material_ripple.dart | 3 +- .../material_select/display_name.dart | 11 +- .../material_dropdown_select.dart | 1 - .../material_select_dropdown_item.dart | 14 -- .../material_select_dropdown_item.scss.css | 2 +- .../material_select_searchbox.scss | 2 +- .../material_spinner/material_spinner.dart | 3 +- .../material_tab/tab_button.scss.css | 2 +- .../material_tooltip/src/tooltip.dart | 5 +- lib/src/css/material/const/_color.scss | 3 +- lib/src/css/material/const/_functions.scss | 3 +- lib/src/css/material/const/_global.scss | 3 +- lib/src/css/material/const/_mixins.scss | 34 ++-- lib/src/css/material/const/_palette.scss | 3 +- lib/src/css/material/const/_settings.scss | 3 +- lib/src/css/material/const/_typography.scss | 35 ++-- .../popup/src/popup_position_mixin.dart | 3 + pubspec.yaml | 6 +- 43 files changed, 309 insertions(+), 298 deletions(-) delete mode 100644 lib/src/components/material_popup/src/popup_portal_directive.dart diff --git a/CHANGELOG.md b/CHANGELOG.md index d0bac2a13..858230759 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,117 +1,80 @@ -## 0.6.0-beta +## 0.6.0 -> NOTE: This code is considered production quality, but depends on angular: -> 4.0.0-beta. The alpha tag represents the evolving nature of the AngularDart -> api, not code quality (4.0.0-beta is used in production Google apps). - - * Material Dialog: Support a minimum height. - * Material Input: Fix disabled color. - * Material Popup: Additional merges to prepare for final refactoring. - * Material Tree: Update positioning options and borders. - * Deprecate LazyEventEmitter and migrate uses to the StreamController model. - * Remove use of Compass in SASS files. - * Remove unused alignment parameters. - * Refactor Angular annotations to inline versions. - -## 0.6.0-alpha+3 - -> NOTE: This code is considered production quality, but depends on angular: -> 4.0.0-alpha+3. The alpha tag represents the evolving nature of the AngularDart -> api, not code quality (4.0.0-alpha is used in production Google apps). - - * Add Application Layout styles and directives. + * Update dependency to angular: ^4.0.0. + * Update SDK dependencies. * Add Material Select Searchbox component. - * Material Expansionpanel: Add high density mixin. + * Add Application Layout styles and directives. + * Add Material Icon. + * Deprecate `GlyphComponent` in favor of `MaterialIconComponent`. + * App Layout: Fix margins for header icons/links. + * Dynamic Component: Add ability to use `ComponentFactory` instead of a `Type`. + * Material Button: Refactor raised styling so it can be used in a mixin. + * Material Checkbox: + * Add ability to make readonly. + * Add mixin for checkbox with no left margin. + * Material Chips: Add ability to specify background color for left icon. + * Material Dialog: + * Support a minimum height. + * Fix header mixin. + * Material Expansionpanel: + * Add high density mixin. + * Add mixin to allow changes to panels without affecting nested panels. * Material Icon: Add back and forward arrows to the list of flipped icons. - * Material Input: Add leading text color mixin. + * Material Input: + * Add support for material dark theme. + * Fix disabled color. + * Add leading text color mixin. + * Make local required errors to make controls invalid even when the control + has not been interacted with. + * Add upper and lower bounds validators. + * Re-calculate text length when custom character counter is set. + * Prevent mirror-text overflow in multiline material input. + * Remove unnecessary selector argument from mixins. * Material Popup: + * Constrain popups to the viewport if both `enforceSpaceConstraints` and + `overlayRepositionLoop` are enabled. + * Create the material-popup view synchronously. + * Remove `animationComplete` event. * Integrate with Angular CSS shimming and remove `shadowCssClass`. * Material design scrollbars by default (instead of the native scrollbars). * Add ARIA attributes. - * Material Select: Fix selectable menu item property functionality. - * Material Tree: - * Add optional row separator borders. - * Fix dropdown closing on toggle issue. - * Material Tooltips: Add ARIA attributes. - * Improve performance of `TreeSelectionOptions` constructor from O(n^2) to O(n) - in the size of `listOfOptions`. - * Remove uses of 'getBool' in boolean typed inputs. - * Remove use of Compass in SASS files. - * Refactor Angular annotations to inline versions. - -## 0.6.0-alpha+2 - -> NOTE: This code is considered production quality, but depends on angular: -> 4.0.0-alpha+2. The alpha tag represents the evolving nature of the AngularDart -> api, not code quality (4.0.0-alpha is used in production Google apps). - - * Dynamic Component: Add ability to use `ComponentFactory` instead of a `Type`. - * Material Dialog: Fix header mixin. - * Material Checkbox: Add ability to make readonly. - * Material Input: Make local required errors to make controls invalid even when - the control has not been interacted with. - * Material Popup: * Add an option to reposition visible popups every frame with `trackLayoutChanges`. * Merge laminate/components/popup into Material Popup. - * Material Select: Allow dropdown to display an error while it's closed. - * Material Tree: - * Added shift selection/deselection. - * Fix glyphs always shown expanded when `expandAll = true`. - * Material Yes/No Buttons: Add dense style. - * Scorecard: Update tab index to prevent scroll errors when going through - buttons with tabs. - * Add new color utils. - * Migrate uses of `GlyphComponent` to `MaterialIconComponent`. - * Migrate uses of `ElementRef` to `Element`. - * Remove duplicate PopupSourceDirective. - * Remove deprecated popup `matchSourceWidth` options. - * Updates to use metadata inheritance. - * Remove unused library statements. - * Update documentation. - -## 0.6.0-alpha+1 - -> NOTE: This code is considered production quality, but depends on angular: -> 4.0.0-alpha+1. The alpha tag represents the evolving nature of the AngularDart -> api, not code quality (4.0.0-alpha is used in production Google apps). - - * Add Material Icon. - * Deprecate `GlyphComponent` in favor of `MaterialIconComponent`. - * Update dependency to angular: 4.0.0-alpha+1. - * Material Checkbox: Add mixin for checkbox with no left margin. - * Material Chips: Add ability to specify background color for left icon. - * Material Expansionpanel: Add mixin to allow changes to panels without - affecting nested panels. - * Material Input: - * Add upper and lower bounds validators. - * Re-calculate text length when custom character counter is set. - * Prevent mirror-text overflow in multiline material input. - * Remove unnecessary selector argument from mixins. - * Material Popup: Only set content removed if the popup is still not visible - when the timer is finished. + * Only set content removed if the popup is still not visible when the timer + is finished. * Material Radio: * Add mixin for radio button with no left margin. * Fix mixin to respect disabled status when a theme is applied. * Material Select: + * Fix selectable menu item property functionality. + * Allow dropdown to display an error while it's closed. * Fix `MaterialSelectItemComponent` to not cache the label. * Add input to material-dropdown-select to define custom a renderer for group labels. * Fix checkbox display handling and label padding in dropdown. * Material Toggle: Set the attribute instead of the property to fix a bug with incorrect type, and not setting the right property. + * Material Tooltips: Add ARIA attributes. * Material Tree: + * Update positioning options and borders. + * Add optional row separator borders. + * Fix dropdown closing on toggle issue. + * Added shift selection/deselection. + * Fix glyphs always shown expanded when `expandAll = true`. * Add ability to preserve expansion state. * Fix indentation of first child group. * Add input `showDisabledCheckboxes`. * Add a max-height mixin. + * Material Yes/No Buttons: Add dense style. * Reorder List: * Update to recommended syntax for ngFor. * Migrate from ManagedZone to NgZone. * Scorecard: + * Update tab index to prevent scroll errors when going through + buttons with tabs. * Replace deprecated Glyph with Material Icon. * Invoke inherited click handler from derived click handler. - * Avoid adding placeholder for deferred content if the element is detached. * Selection Models: * Add deselect all option. * Add a limited filtering model. @@ -119,22 +82,33 @@ that were added. * Add comparator as optional param to tree selection options for custom sorting. + * Avoid adding placeholder for deferred content if the element is detached. + * Add new color utils. + * Update animations to new Material specs. + * Migrate uses of `GlyphComponent` to `MaterialIconComponent`. + * Migrate uses of `ElementRef` to `Element`. + * Remove duplicate PopupSourceDirective. + * Remove deprecated popup `matchSourceWidth` options. + * Add missing `MaterialIconComponent`, `MaterialPersistentDrawerDirective`, + `MaterialTemporaryDrawerDirective`, and `MaterialSelectSearchboxComponent` to + `materialDirectives`. + * Improve performance of `TreeSelectionOptions` constructor from O(n^2) to O(n) + in the size of `listOfOptions`. + * Change DisplayNameRenderDirective to a functional directive. + * Deprecate LazyEventEmitter and migrate uses to the StreamController model. + * Additional styling cleanup to support `ng-deep`. + * Reduce visibility of common directives/components for smaller code size and + better performance. + * Remove use of Compass in SASS files. + * Remove uses of `getBool` in boolean typed inputs. + * Remove unused alignment parameters. * Updates to use metadata inheritance. * Migrate away from comment-style generic syntax. * Migrate stylesheet combinators `/deep/` and `>>>` to `::ng-deep`. * Migrate away from use of angular's `@View`. - * Update animations to new Material specs. - * Update documentation. * Remove unused library statements. - -## 0.6.0-alpha - -> NOTE: This code is considered production quality, but depends on angular: -> 4.0.0-alpha. The alpha tag represents the evolving nature of the AngularDart -> api, not code quality (4.0.0-alpha is used in production Google apps). - - * Update dependency to `angular: 4.0.0-alpha`. - * Update SDK dependencies. + * Refactor Angular annotations to inline versions. + * Update documentation. ### Known Issues * Warnings are present when building with dart2js. Specifically: diff --git a/lib/angular_components.dart b/lib/angular_components.dart index 9798bf359..1ee586dd2 100644 --- a/lib/angular_components.dart +++ b/lib/angular_components.dart @@ -11,7 +11,7 @@ import 'src/all_components.dart'; export 'src/all_components.dart'; /// A convenience list of all Directives exposed by this package. -const List materialDirectives = const [ +const List materialDirectives = const [ AutoDismissDirective, AutoFocusDirective, CachingDeferredContentDirective, @@ -35,6 +35,7 @@ const List materialDirectives = const [ MaterialExpansionPanel, MaterialExpansionPanelSet, MaterialFabComponent, + MaterialIconComponent, MaterialIconTooltipComponent, MaterialInkTooltipComponent, MaterialInputComponent, @@ -43,6 +44,8 @@ const List materialDirectives = const [ MaterialListItemComponent, MaterialMultilineInputComponent, MaterialPaperTooltipComponent, + MaterialPersistentDrawerDirective, + MaterialTemporaryDrawerComponent, MaterialPopupComponent, MaterialProgressComponent, MaterialRadioComponent, @@ -50,6 +53,7 @@ const List materialDirectives = const [ MaterialRippleComponent, MaterialSelectComponent, MaterialSelectItemComponent, + MaterialSelectSearchboxComponent, MaterialSpinnerComponent, MaterialTabComponent, MaterialTabPanelComponent, diff --git a/lib/src/components/app_layout/README.md b/lib/src/components/app_layout/README.md index a415b809b..920a42578 100644 --- a/lib/src/components/app_layout/README.md +++ b/lib/src/components/app_layout/README.md @@ -10,9 +10,9 @@ the material spec. ## Setup The styles are provided by -`package:third_party.dart_src.acx.app_layout/layout.scss.css`. To use these -styles in an angular component simply add it as a `styleUrls` value in your -`Component` annotation. It is suggested that the style is added before any +`package:angular_components/src/components/app_layout/layout.scss.css`. To use +these styles in an angular component simply add it as a `styleUrls` value in +your `Component` annotation. It is suggested that the style is added before any component specific styling so you can easily override style values as needed. ```dart @@ -20,7 +20,7 @@ component specific styling so you can easily override style values as needed. selector: 'my-component', templateUrl: 'my_component.html', styleUrls: const [ - 'package:third_party.dart_src.acx.app_layout/layout.scss.css', + 'package:angular_components/src/components/app_layout/layout.scss.css', 'my_component.scss.css']) class MyComponent {} ``` @@ -41,7 +41,7 @@ dense-header | Makes the App Bar denser for interfaces that primarily material-drawer-button | A button within the row that is placed on the left and
is used for navigation. material-header-title | A title for the header. material-spacer | Consumes space between the title and any navigation
links. Needs to be placed after the title and before
any navigation elements. -material-navigation | Navigation elements which will be displayed on the
left side of the header. +material-navigation | Navigation elements which will be displayed on the
left side of the header. Only use with anchor tags,
material-button have there own styling built in. diff --git a/lib/src/components/app_layout/layout.scss b/lib/src/components/app_layout/layout.scss index 00bf51ed6..c26209382 100644 --- a/lib/src/components/app_layout/layout.scss +++ b/lib/src/components/app_layout/layout.scss @@ -19,7 +19,12 @@ @import 'lib/src/css/material/material'; @import 'lib/src/components/material_list/mixins'; +$mat-toolbar-mobile-breakpoint: 599px; $mat-drawer-border: 1px solid $mat-border-light; +// Desktop spec calls for 24px margins have each element contribute half. +$mat-desktop-drawer-margin: 3 * $mat-grid / 2; +// Mobile spec calls for 16px margins have each element contribute half. +$mat-mobile-drawer-margin: $mat-grid; material-drawer[persistent], material-drawer[permanent] { @@ -168,16 +173,18 @@ $mat-header-dense-height: 48px; flex-shrink: 0; flex-wrap: nowrap; height: $mat-header-height; - margin: 0; - padding: 0 $mat-grid; + margin: 0 $mat-desktop-drawer-margin; // Allow title, and drawer button to be positioned absolutely. position: relative; + @media (max-width: $mat-toolbar-mobile-breakpoint) { + margin: 0 $mat-mobile-drawer-margin; + } + // Special drawer button used to open/close the drawer. // Positioned at the start of the header. > .material-drawer-button { cursor: pointer; - margin-left: $mat-grid; } /// Class uses for the title inside of a header. @@ -204,11 +211,20 @@ $mat-header-dense-height: 48px; } material-button { - margin: 0 $mat-grid; + // drawer margin - margin from button for ripple. + margin: 0 $mat-desktop-drawer-margin - $mat-grid; + + @media (max-width: $mat-toolbar-mobile-breakpoint) { + margin: 0 $mat-mobile-drawer-margin - $mat-grid; + } } .material-navigation { - margin: 0 $mat-grid * 3; + margin: 0 $mat-desktop-drawer-margin; + + @media (max-width: $mat-toolbar-mobile-breakpoint) { + margin: 0 $mat-mobile-drawer-margin; + } } > * { diff --git a/lib/src/components/app_layout/layout.scss.css b/lib/src/components/app_layout/layout.scss.css index a1e1fa1ce..83640fbc5 100644 --- a/lib/src/components/app_layout/layout.scss.css +++ b/lib/src/components/app_layout/layout.scss.css @@ -3,5 +3,5 @@ * for details. All rights reserved. Use of this source code is governed by a * BSD-style license that can be found in the LICENSE file. */ -material-drawer[persistent],material-drawer[permanent]{background-color:#fff;bottom:0;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;left:0;overflow:hidden;position:absolute;top:0;width:256px;border-right:1px solid rgba(0,0,0,0.12)}material-drawer[persistent][end],material-drawer[permanent][end]{border-left:1px solid rgba(0,0,0,0.12);border-right:initial;left:initial;right:0}material-drawer[persistent]{transition:left 150ms cubic-bezier(0.4, 0, 0.2, 1)}material-drawer[persistent].mat-drawer-collapsed{left:-256px}material-drawer[persistent][end]{transition-property:right}material-drawer[persistent][end].mat-drawer-collapsed{right:-256px}material-content,.material-content{display:block;min-height:100%;position:relative;z-index:0}material-drawer[persistent]+material-content,material-drawer[permanent]+material-content,material-drawer[persistent]+.material-content,material-drawer[permanent]+.material-content{margin-left:256px}material-drawer[persistent][end]+material-content,material-drawer[permanent][end]+material-content,material-drawer[persistent][end]+.material-content,material-drawer[permanent][end]+.material-content{margin-left:initial;margin-right:256px}material-drawer[persistent]+material-content,material-drawer[persistent]+.material-content{transition:margin-left 150ms cubic-bezier(0.4, 0, 0.2, 1)}material-drawer[persistent].mat-drawer-collapsed+material-content,material-drawer[persistent].mat-drawer-collapsed+.material-content{margin-left:0}material-drawer[persistent][end]+material-content,material-drawer[persistent][end]+.material-content{transition-property:margin-right}material-drawer[persistent][end].mat-drawer-collapsed+material-content,material-drawer[persistent][end].mat-drawer-collapsed+.material-content{margin-right:0}.material-header{background-color:#3f51b5;border:0;box-sizing:border-box;color:#fff;display:flex;flex-direction:column;flex-shrink:0;flex-wrap:nowrap;height:64px;justify-content:flex-start;overflow:hidden;padding:0;position:relative;width:100%;z-index:0}.material-header.dense-header{height:48px}.material-header.dense-header .material-header-row{height:48px}.material-header.shadow{/*! @noflip */box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2)}.material-header+material-drawer[permanent],.material-header+material-drawer[persistent]{top:64px}.material-header+material-drawer+material-content,.material-header+material-drawer+.material-content{min-height:calc(100% - 64px)}.material-header.dense-header+material-drawer[permanent],.material-header.dense-header+material-drawer[persistent]{top:48px}.material-header.dense-header+material-drawer+material-content,.material-header.dense-header+material-drawer+.material-content{min-height:calc(100% - 48px)}.material-header-row{align-items:center;align-self:stretch;box-sizing:border-box;display:flex;flex-direction:row;flex-shrink:0;flex-wrap:nowrap;height:64px;margin:0;padding:0 8px;position:relative}.material-header-row>.material-drawer-button{cursor:pointer;margin-left:8px}.material-header-row .material-header-title{bottom:0;box-sizing:border-box;display:block;height:20px;left:80px;line-height:1;margin-bottom:auto;margin-top:auto;position:absolute;top:0;font-size:20px;font-weight:500}.material-header-row .material-spacer{flex-grow:1}.material-header-row material-button{margin:0 8px}.material-header-row .material-navigation{margin:0 24px}.material-header-row>*{flex-shrink:0}.mat-drawer-spacer{height:56px}material-drawer material-list{padding:0}material-drawer [label]{display:block;font-family:inherit;font-size:15px;line-height:32px;padding:0 24px;position:relative;white-space:nowrap;align-items:center;color:rgba(0,0,0,0.54);display:flex}material-drawer [label].disabled{pointer-events:none}material-drawer [label] ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.54);width:40px}material-drawer [label].disabled ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.38)}material-drawer [label] ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.54);margin-left:auto}material-drawer [label].disabled ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.38)}material-drawer [label] ::ng-deep .submenu-icon{transform:rotate(-90deg)}material-drawer material-list-item,material-drawer [label]{font-weight:500;height:48px;padding:0 16px}material-drawer material-list-item material-icon,material-drawer [label] material-icon{color:rgba(0,0,0,0.54);margin-right:32px} +material-drawer[persistent],material-drawer[permanent]{background-color:#fff;bottom:0;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;left:0;overflow:hidden;position:absolute;top:0;width:256px;border-right:1px solid rgba(0,0,0,0.12)}material-drawer[persistent][end],material-drawer[permanent][end]{border-left:1px solid rgba(0,0,0,0.12);border-right:initial;left:initial;right:0}material-drawer[persistent]{transition:left 150ms cubic-bezier(0.4, 0, 0.2, 1)}material-drawer[persistent].mat-drawer-collapsed{left:-256px}material-drawer[persistent][end]{transition-property:right}material-drawer[persistent][end].mat-drawer-collapsed{right:-256px}material-content,.material-content{display:block;min-height:100%;position:relative;z-index:0}material-drawer[persistent]+material-content,material-drawer[permanent]+material-content,material-drawer[persistent]+.material-content,material-drawer[permanent]+.material-content{margin-left:256px}material-drawer[persistent][end]+material-content,material-drawer[permanent][end]+material-content,material-drawer[persistent][end]+.material-content,material-drawer[permanent][end]+.material-content{margin-left:initial;margin-right:256px}material-drawer[persistent]+material-content,material-drawer[persistent]+.material-content{transition:margin-left 150ms cubic-bezier(0.4, 0, 0.2, 1)}material-drawer[persistent].mat-drawer-collapsed+material-content,material-drawer[persistent].mat-drawer-collapsed+.material-content{margin-left:0}material-drawer[persistent][end]+material-content,material-drawer[persistent][end]+.material-content{transition-property:margin-right}material-drawer[persistent][end].mat-drawer-collapsed+material-content,material-drawer[persistent][end].mat-drawer-collapsed+.material-content{margin-right:0}.material-header{background-color:#3f51b5;border:0;box-sizing:border-box;color:#fff;display:flex;flex-direction:column;flex-shrink:0;flex-wrap:nowrap;height:64px;justify-content:flex-start;overflow:hidden;padding:0;position:relative;width:100%;z-index:0}.material-header.dense-header{height:48px}.material-header.dense-header .material-header-row{height:48px}.material-header.shadow{/*! @noflip */box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2)}.material-header+material-drawer[permanent],.material-header+material-drawer[persistent]{top:64px}.material-header+material-drawer+material-content,.material-header+material-drawer+.material-content{min-height:calc(100% - 64px)}.material-header.dense-header+material-drawer[permanent],.material-header.dense-header+material-drawer[persistent]{top:48px}.material-header.dense-header+material-drawer+material-content,.material-header.dense-header+material-drawer+.material-content{min-height:calc(100% - 48px)}.material-header-row{align-items:center;align-self:stretch;box-sizing:border-box;display:flex;flex-direction:row;flex-shrink:0;flex-wrap:nowrap;height:64px;margin:0 12px;position:relative}@media (max-width: 599px){.material-header-row{margin:0 8px}}.material-header-row>.material-drawer-button{cursor:pointer}.material-header-row .material-header-title{bottom:0;box-sizing:border-box;display:block;height:20px;left:80px;line-height:1;margin-bottom:auto;margin-top:auto;position:absolute;top:0;font-size:20px;font-weight:500}.material-header-row .material-spacer{flex-grow:1}.material-header-row material-button{margin:0 4px}@media (max-width: 599px){.material-header-row material-button{margin:0 0px}}.material-header-row .material-navigation{margin:0 12px}@media (max-width: 599px){.material-header-row .material-navigation{margin:0 8px}}.material-header-row>*{flex-shrink:0}.mat-drawer-spacer{height:56px}material-drawer material-list{padding:0}material-drawer [label]{display:block;font-family:inherit;font-size:15px;line-height:32px;padding:0 24px;position:relative;white-space:nowrap;align-items:center;color:rgba(0,0,0,0.54);display:flex}material-drawer [label].disabled{pointer-events:none}material-drawer [label] ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.54);width:40px}material-drawer [label].disabled ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.38)}material-drawer [label] ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.54);margin-left:auto}material-drawer [label].disabled ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.38)}material-drawer [label] ::ng-deep .submenu-icon{transform:rotate(-90deg)}material-drawer material-list-item,material-drawer [label]{font-weight:500;height:48px;padding:0 16px}material-drawer material-list-item material-icon,material-drawer [label] material-icon{color:rgba(0,0,0,0.54);margin-right:32px} diff --git a/lib/src/components/app_layout/material_persistent_drawer.dart b/lib/src/components/app_layout/material_persistent_drawer.dart index 028e24b01..59156d6aa 100644 --- a/lib/src/components/app_layout/material_persistent_drawer.dart +++ b/lib/src/components/app_layout/material_persistent_drawer.dart @@ -11,8 +11,9 @@ import 'material_drawer_base.dart'; /// A persistent drawer that can be pinned open or closed. /// -/// Need to include package:third_party.dart_src.acx.app_layout/layout.scss.css -/// in the list of styleUrls of the containing component. +/// Need to include +/// package:angular_components/src/components/app_layout/layout.scss.css in the +/// list of styleUrls of the containing component. /// /// Works with deferred content. /// __Example usage:__ diff --git a/lib/src/components/auto_dismiss/auto_dismiss.dart b/lib/src/components/auto_dismiss/auto_dismiss.dart index 1c3a016be..8d1b5d648 100644 --- a/lib/src/components/auto_dismiss/auto_dismiss.dart +++ b/lib/src/components/auto_dismiss/auto_dismiss.dart @@ -26,7 +26,9 @@ import '../../utils/browser/events/events.dart'; /// /// /// -@Directive(selector: '[autoDismissable]:not(material-expansionpanel)') +@Directive( + selector: '[autoDismissable]:not(material-expansionpanel)', + visibility: Visibility.none) class AutoDismissDirective { final Stream _click; final NgZone _zone; diff --git a/lib/src/components/content/deferred_content.dart b/lib/src/components/content/deferred_content.dart index a55814176..7eb78789e 100644 --- a/lib/src/components/content/deferred_content.dart +++ b/lib/src/components/content/deferred_content.dart @@ -21,7 +21,7 @@ import 'deferred_content_aware.dart'; /// /// /// -@Directive(selector: '[deferredContent]') +@Directive(selector: '[deferredContent]', visibility: Visibility.none) class DeferredContentDirective implements OnDestroy { final _disposer = new Disposer.oneShot(); final _placeholder = new DivElement(); @@ -95,7 +95,7 @@ class DeferredContentDirective implements OnDestroy { /// This directive is not recommended as it will cause Angular to change-detect /// the contents even when hidden. If your hidden content has push-detection /// enabled, go for it. -@Directive(selector: '[cachedDeferredContent]') +@Directive(selector: '[cachedDeferredContent]', visibility: Visibility.none) class CachingDeferredContentDirective implements OnDestroy { ViewContainerRef _viewContainer; TemplateRef _template; diff --git a/lib/src/components/focus/focus.dart b/lib/src/components/focus/focus.dart index e361d0243..f56de6360 100644 --- a/lib/src/components/focus/focus.dart +++ b/lib/src/components/focus/focus.dart @@ -125,7 +125,7 @@ class FocusMoveEvent { /// /// Please put only on content that appears after user action and /// requires focus to be changed to it. -@Directive(selector: '[autoFocus]') +@Directive(selector: '[autoFocus]', visibility: Visibility.none) class AutoFocusDirective extends RootFocusable implements OnInit, OnDestroy { final _disposer = new Disposer.oneShot(); diff --git a/lib/src/components/glyph/glyph.dart b/lib/src/components/glyph/glyph.dart index 2a57727ce..77bae47f8 100644 --- a/lib/src/components/glyph/glyph.dart +++ b/lib/src/components/glyph/glyph.dart @@ -55,7 +55,8 @@ const List _flippedIcons = const [ templateUrl: 'glyph.html', styleUrls: const ['glyph.scss.css'], changeDetection: ChangeDetectionStrategy.OnPush, - preserveWhitespace: false) + preserveWhitespace: false, + visibility: Visibility.none) class GlyphComponent { static const String _materialIconsExtended = 'material-icons-extended'; diff --git a/lib/src/components/material_button/_mixins.scss b/lib/src/components/material_button/_mixins.scss index f8719d856..99a32f611 100644 --- a/lib/src/components/material_button/_mixins.scss +++ b/lib/src/components/material_button/_mixins.scss @@ -33,10 +33,23 @@ $button-hovered-background: rgba(158, 158, 158, .20); $button-disabled-color-dark: rgba(255, 255, 255, $mat-dark-opacity-lightest); -// These styles are based on the 1.0 paper-button styles in -// https://github.com/PolymerElements/paper-button/blob/master/paper-button.html +// Private used for external mixin, and button-base only. +@mixin _button-raised { + @include material-shadow; + + @include acx-theme-dark { + background-color: $mat-blue; + } -// TODO(google): Conform to lint, use shared styles/material colors. + &[disabled] { + background: $button-disabled-background; + @include shadow-none; + + @include acx-theme-dark { + background: $mat-blue; + } + } +} @mixin button-dense { height: $mat-grid * 4; @@ -46,14 +59,9 @@ $button-disabled-color-dark: rgba(255, 255, 255, $mat-dark-opacity-lightest); @mixin button-base { @include acx-theme-dark { color: $mat-white; - - &[raised] { - background-color: $mat-blue; - } } @include mat-type-button; - @include material-shadow; user-select: none; background: transparent; @@ -86,16 +94,10 @@ $button-disabled-color-dark: rgba(255, 255, 255, $mat-dark-opacity-lightest); >* { pointer-events: none; } - - &[raised] { - background: $button-disabled-background; - - @include acx-theme-dark { - background: $mat-blue; - } - } } + // We specify raised here specifically instead of the mixin to satisfy the + // case where a mixin is not used to specify the background color. &:not([raised]):not([disabled]):not([icon]):hover { background-color: $button-hovered-background; } @@ -114,9 +116,8 @@ $button-disabled-color-dark: rgba(255, 255, 255, $mat-dark-opacity-lightest); pointer-events: none; } - &:not([raised]), - &[disabled][raised] { - @include shadow-none; + &[raised] { + @include _button-raised; } &[no-ink] material-ripple { @@ -219,6 +220,10 @@ $button-disabled-color-dark: rgba(255, 255, 255, $mat-dark-opacity-lightest); ::ng-deep #{$selector}:not([disabled]) { background-color: $background-color; } + + ::ng-deep #{$selector}:not([disabled]):hover { + background-color: $background-color; + } } /// Applies letter-spacing to the text of . diff --git a/lib/src/components/material_button/material_button.scss.css b/lib/src/components/material_button/material_button.scss.css index 45803a30c..11394df0b 100644 --- a/lib/src/components/material_button/material_button.scss.css +++ b/lib/src/components/material_button/material_button.scss.css @@ -3,5 +3,5 @@ * for details. All rights reserved. Use of this source code is governed by a * BSD-style license that can be found in the LICENSE file. */ -:host{font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;background:transparent;border-radius:inherit;box-sizing:border-box;cursor:pointer;display:inline-block;letter-spacing:.01em;line-height:normal;outline:none;position:relative;text-align:center}:host.acx-theme-dark{color:#fff}:host.acx-theme-dark[raised]{background-color:#4285f4}:host[animated]{transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)}:host[elevation="1"]{/*! @noflip */box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}:host[elevation="2"]{/*! @noflip */box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2)}:host[elevation="3"]{/*! @noflip */box-shadow:0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.2)}:host[elevation="4"]{/*! @noflip */box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}:host[elevation="5"]{/*! @noflip */box-shadow:0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.2)}:host[elevation="6"]{/*! @noflip */box-shadow:0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.2)}:host:not([icon]){margin:0 .29em}:host[dense]{height:32px;font-size:13px}:host[disabled]{color:rgba(0,0,0,0.26);cursor:not-allowed}:host[disabled].acx-theme-dark{color:rgba(255,255,255,0.3)}:host[disabled]>*{pointer-events:none}:host[disabled][raised]{background:rgba(0,0,0,0.12)}:host[disabled][raised].acx-theme-dark{background:#4285f4}:host:not([raised]):not([disabled]):not([icon]):hover{background-color:rgba(158,158,158,0.2)}:host.is-focused::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:.12;border-radius:inherit;pointer-events:none}:host:not([raised]),:host[disabled][raised]{box-shadow:none}:host[no-ink] material-ripple{display:none}:host[clear-size]{margin:0}:host .content{display:inline-flex;align-items:center}:host:not([icon]){border-radius:2px;min-width:5.14em}:host:not([icon]) .content{padding:.7em .57em}:host[icon]{border-radius:50%}:host[icon] .content{padding:8px}:host[clear-size]{min-width:0} +:host{font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;background:transparent;border-radius:inherit;box-sizing:border-box;cursor:pointer;display:inline-block;letter-spacing:.01em;line-height:normal;outline:none;position:relative;text-align:center}:host.acx-theme-dark{color:#fff}:host:not([icon]){margin:0 .29em}:host[dense]{height:32px;font-size:13px}:host[disabled]{color:rgba(0,0,0,0.26);cursor:not-allowed}:host[disabled].acx-theme-dark{color:rgba(255,255,255,0.3)}:host[disabled]>*{pointer-events:none}:host:not([raised]):not([disabled]):not([icon]):hover{background-color:rgba(158,158,158,0.2)}:host.is-focused::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:.12;border-radius:inherit;pointer-events:none}:host[raised][animated]{transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)}:host[raised][elevation="1"]{/*! @noflip */box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}:host[raised][elevation="2"]{/*! @noflip */box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2)}:host[raised][elevation="3"]{/*! @noflip */box-shadow:0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.2)}:host[raised][elevation="4"]{/*! @noflip */box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}:host[raised][elevation="5"]{/*! @noflip */box-shadow:0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.2)}:host[raised][elevation="6"]{/*! @noflip */box-shadow:0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.2)}:host[raised].acx-theme-dark{background-color:#4285f4}:host[raised][disabled]{background:rgba(0,0,0,0.12);box-shadow:none}:host[raised][disabled].acx-theme-dark{background:#4285f4}:host[no-ink] material-ripple{display:none}:host[clear-size]{margin:0}:host .content{display:inline-flex;align-items:center}:host:not([icon]){border-radius:2px;min-width:5.14em}:host:not([icon]) .content{padding:.7em .57em}:host[icon]{border-radius:50%}:host[icon] .content{padding:8px}:host[clear-size]{min-width:0} diff --git a/lib/src/components/material_button/material_fab.scss.css b/lib/src/components/material_button/material_fab.scss.css index 2854c9722..d216936ed 100644 --- a/lib/src/components/material_button/material_fab.scss.css +++ b/lib/src/components/material_button/material_fab.scss.css @@ -3,5 +3,5 @@ * for details. All rights reserved. Use of this source code is governed by a * BSD-style license that can be found in the LICENSE file. */ -:host{font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;background:transparent;border-radius:inherit;box-sizing:border-box;cursor:pointer;display:inline-block;letter-spacing:.01em;line-height:normal;outline:none;position:relative;text-align:center;border-radius:28px}:host.acx-theme-dark{color:#fff}:host.acx-theme-dark[raised]{background-color:#4285f4}:host[animated]{transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)}:host[elevation="1"]{/*! @noflip */box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}:host[elevation="2"]{/*! @noflip */box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2)}:host[elevation="3"]{/*! @noflip */box-shadow:0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.2)}:host[elevation="4"]{/*! @noflip */box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}:host[elevation="5"]{/*! @noflip */box-shadow:0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.2)}:host[elevation="6"]{/*! @noflip */box-shadow:0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.2)}:host:not([icon]){margin:0 .29em}:host[dense]{height:32px;font-size:13px}:host[disabled]{color:rgba(0,0,0,0.26);cursor:not-allowed}:host[disabled].acx-theme-dark{color:rgba(255,255,255,0.3)}:host[disabled]>*{pointer-events:none}:host[disabled][raised]{background:rgba(0,0,0,0.12)}:host[disabled][raised].acx-theme-dark{background:#4285f4}:host:not([raised]):not([disabled]):not([icon]):hover{background-color:rgba(158,158,158,0.2)}:host.is-focused::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:.12;border-radius:inherit;pointer-events:none}:host:not([raised]),:host[disabled][raised]{box-shadow:none}:host[no-ink] material-ripple{display:none}:host[clear-size]{margin:0}:host .content{display:inline-flex;align-items:center}:host .content{justify-content:center;height:56px;width:56px}:host material-icon ::ng-deep .material-icon-i{font-size:24px}:host glyph ::ng-deep i{font-size:24px;height:1em;line-height:1em;width:1em}:host[mini]{font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;background:transparent;border-radius:inherit;box-sizing:border-box;cursor:pointer;display:inline-block;letter-spacing:.01em;line-height:normal;outline:none;position:relative;text-align:center;border-radius:20px}:host[mini].acx-theme-dark{color:#fff}:host[mini].acx-theme-dark[raised]{background-color:#4285f4}:host[mini][animated]{transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)}:host[mini][elevation="1"]{/*! @noflip */box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}:host[mini][elevation="2"]{/*! @noflip */box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2)}:host[mini][elevation="3"]{/*! @noflip */box-shadow:0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.2)}:host[mini][elevation="4"]{/*! @noflip */box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}:host[mini][elevation="5"]{/*! @noflip */box-shadow:0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.2)}:host[mini][elevation="6"]{/*! @noflip */box-shadow:0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.2)}:host[mini]:not([icon]){margin:0 .29em}:host[mini][dense]{height:32px;font-size:13px}:host[mini][disabled]{color:rgba(0,0,0,0.26);cursor:not-allowed}:host[mini][disabled].acx-theme-dark{color:rgba(255,255,255,0.3)}:host[mini][disabled]>*{pointer-events:none}:host[mini][disabled][raised]{background:rgba(0,0,0,0.12)}:host[mini][disabled][raised].acx-theme-dark{background:#4285f4}:host[mini]:not([raised]):not([disabled]):not([icon]):hover{background-color:rgba(158,158,158,0.2)}:host[mini].is-focused::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:.12;border-radius:inherit;pointer-events:none}:host[mini]:not([raised]),:host[mini][disabled][raised]{box-shadow:none}:host[mini][no-ink] material-ripple{display:none}:host[mini][clear-size]{margin:0}:host[mini] .content{display:inline-flex;align-items:center}:host[mini] .content{justify-content:center;height:40px;width:40px} +:host{font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;background:transparent;border-radius:inherit;box-sizing:border-box;cursor:pointer;display:inline-block;letter-spacing:.01em;line-height:normal;outline:none;position:relative;text-align:center;border-radius:28px}:host.acx-theme-dark{color:#fff}:host:not([icon]){margin:0 .29em}:host[dense]{height:32px;font-size:13px}:host[disabled]{color:rgba(0,0,0,0.26);cursor:not-allowed}:host[disabled].acx-theme-dark{color:rgba(255,255,255,0.3)}:host[disabled]>*{pointer-events:none}:host:not([raised]):not([disabled]):not([icon]):hover{background-color:rgba(158,158,158,0.2)}:host.is-focused::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:.12;border-radius:inherit;pointer-events:none}:host[raised][animated]{transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)}:host[raised][elevation="1"]{/*! @noflip */box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}:host[raised][elevation="2"]{/*! @noflip */box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2)}:host[raised][elevation="3"]{/*! @noflip */box-shadow:0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.2)}:host[raised][elevation="4"]{/*! @noflip */box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}:host[raised][elevation="5"]{/*! @noflip */box-shadow:0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.2)}:host[raised][elevation="6"]{/*! @noflip */box-shadow:0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.2)}:host[raised].acx-theme-dark{background-color:#4285f4}:host[raised][disabled]{background:rgba(0,0,0,0.12);box-shadow:none}:host[raised][disabled].acx-theme-dark{background:#4285f4}:host[no-ink] material-ripple{display:none}:host[clear-size]{margin:0}:host .content{display:inline-flex;align-items:center}:host .content{justify-content:center;height:56px;width:56px}:host material-icon ::ng-deep .material-icon-i{font-size:24px}:host glyph ::ng-deep i{font-size:24px;height:1em;line-height:1em;width:1em}:host[mini]{font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;background:transparent;border-radius:inherit;box-sizing:border-box;cursor:pointer;display:inline-block;letter-spacing:.01em;line-height:normal;outline:none;position:relative;text-align:center;border-radius:20px}:host[mini].acx-theme-dark{color:#fff}:host[mini]:not([icon]){margin:0 .29em}:host[mini][dense]{height:32px;font-size:13px}:host[mini][disabled]{color:rgba(0,0,0,0.26);cursor:not-allowed}:host[mini][disabled].acx-theme-dark{color:rgba(255,255,255,0.3)}:host[mini][disabled]>*{pointer-events:none}:host[mini]:not([raised]):not([disabled]):not([icon]):hover{background-color:rgba(158,158,158,0.2)}:host[mini].is-focused::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:.12;border-radius:inherit;pointer-events:none}:host[mini][raised][animated]{transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)}:host[mini][raised][elevation="1"]{/*! @noflip */box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}:host[mini][raised][elevation="2"]{/*! @noflip */box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2)}:host[mini][raised][elevation="3"]{/*! @noflip */box-shadow:0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.2)}:host[mini][raised][elevation="4"]{/*! @noflip */box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}:host[mini][raised][elevation="5"]{/*! @noflip */box-shadow:0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.2)}:host[mini][raised][elevation="6"]{/*! @noflip */box-shadow:0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.2)}:host[mini][raised].acx-theme-dark{background-color:#4285f4}:host[mini][raised][disabled]{background:rgba(0,0,0,0.12);box-shadow:none}:host[mini][raised][disabled].acx-theme-dark{background:#4285f4}:host[mini][no-ink] material-ripple{display:none}:host[mini][clear-size]{margin:0}:host[mini] .content{display:inline-flex;align-items:center}:host[mini] .content{justify-content:center;height:40px;width:40px} diff --git a/lib/src/components/material_checkbox/material_checkbox.dart b/lib/src/components/material_checkbox/material_checkbox.dart index 99b2779a7..e8c54955b 100644 --- a/lib/src/components/material_checkbox/material_checkbox.dart +++ b/lib/src/components/material_checkbox/material_checkbox.dart @@ -81,7 +81,8 @@ const indeterminateAriaState = 'mixed'; preserveWhitespace: false, templateUrl: 'material_checkbox.html', styleUrls: const ['material_checkbox.scss.css'], - changeDetection: ChangeDetectionStrategy.OnPush) + changeDetection: ChangeDetectionStrategy.OnPush, + visibility: Visibility.none) class MaterialCheckboxComponent implements ControlValueAccessor { final ChangeDetectorRef _changeDetector; final HtmlElement _root; diff --git a/lib/src/components/material_chips/material_chip.scss b/lib/src/components/material_chips/material_chip.scss index d98d85832..017c16037 100644 --- a/lib/src/components/material_chips/material_chip.scss +++ b/lib/src/components/material_chips/material_chip.scss @@ -23,6 +23,9 @@ $main-bg-color: $mat-gray-300; $emphasis-bg-color: $mat-blue-500; :host { + background-color: $main-bg-color; + color: $mat-black; + display: flex; align-items: center; border-radius: $chip-border-radius; @@ -45,6 +48,10 @@ $clickable-size: 25px; $delete-icon-padding: ($clickable-size - $delete-icon-size) / 2; .left-icon { + // make it easy to use either or + color: $mat-gray-500; + fill: $mat-gray-500; + display: flex; align-items: center; justify-content: center; @@ -67,31 +74,14 @@ $delete-icon-padding: ($clickable-size - $delete-icon-size) / 2; padding: $delete-icon-padding; width: $delete-icon-size; + fill: $mat-gray-500; + &:focus { + fill: $mat-white; outline: none; } } -// rules splitted on purpose, as those below only deal with colors -:host { - background-color: $main-bg-color; - color: $mat-black; - - .left-icon { - // make it easy to use either or - color: $mat-gray-500; - fill: $mat-gray-500; - } - - .delete-icon { - fill: $mat-gray-500; - - &:focus { - fill: $mat-white; - } - } -} - // emphasis colors :host[emphasis] { background-color: $emphasis-bg-color; diff --git a/lib/src/components/material_chips/material_chip.scss.css b/lib/src/components/material_chips/material_chip.scss.css index 090345e02..7a62758fd 100644 --- a/lib/src/components/material_chips/material_chip.scss.css +++ b/lib/src/components/material_chips/material_chip.scss.css @@ -3,5 +3,5 @@ * for details. All rights reserved. Use of this source code is governed by a * BSD-style license that can be found in the LICENSE file. */ -:host{display:flex;align-items:center;border-radius:16px;height:32px;margin:4px;overflow:hidden}.content{margin:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.left-icon{display:flex;align-items:center;justify-content:center;margin-right:-8px;margin-left:4px;padding:3px}.delete-icon{display:flex;background-size:19px 19px;border:0;cursor:pointer;height:19px;margin-left:-8px;margin-right:4px;min-width:19px;padding:3px;width:19px}.delete-icon:focus{outline:none}:host{background-color:#e0e0e0;color:#000}:host .left-icon{color:#9e9e9e;fill:#9e9e9e}:host .delete-icon{fill:#9e9e9e}:host .delete-icon:focus{fill:#fff}:host[emphasis]{background-color:#4285f4;color:#fff}:host[emphasis] .left-icon{color:#fff;fill:#fff}:host[emphasis] .delete-icon{fill:#fff} +:host{background-color:#e0e0e0;color:#000;display:flex;align-items:center;border-radius:16px;height:32px;margin:4px;overflow:hidden}.content{margin:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.left-icon{color:#9e9e9e;fill:#9e9e9e;display:flex;align-items:center;justify-content:center;margin-right:-8px;margin-left:4px;padding:3px}.delete-icon{display:flex;background-size:19px 19px;border:0;cursor:pointer;height:19px;margin-left:-8px;margin-right:4px;min-width:19px;padding:3px;width:19px;fill:#9e9e9e}.delete-icon:focus{fill:#fff;outline:none}:host[emphasis]{background-color:#4285f4;color:#fff}:host[emphasis] .left-icon{color:#fff;fill:#fff}:host[emphasis] .delete-icon{fill:#fff} diff --git a/lib/src/components/material_input/_mixins.scss b/lib/src/components/material_input/_mixins.scss index 9e495c27b..ff05905c6 100644 --- a/lib/src/components/material_input/_mixins.scss +++ b/lib/src/components/material_input/_mixins.scss @@ -137,6 +137,20 @@ } } +/// Changes the underline color when not in focus. +@mixin material-input-unfocused-underline-color($color) { + ::ng-deep .unfocused-underline { + background-color: $color; + } +} + +/// Changes the disabled dotted underline color. +@mixin material-input-disabled-underline-color($color) { + ::ng-deep .disabled-underline { + border-color: $color; + } +} + @mixin material-input-disabled-input-color($color) { ::ng-deep .disabledInput { color: $color; diff --git a/lib/src/components/material_list/_mixins.scss b/lib/src/components/material_list/_mixins.scss index 7ce803495..64a302b41 100644 --- a/lib/src/components/material_list/_mixins.scss +++ b/lib/src/components/material_list/_mixins.scss @@ -53,7 +53,7 @@ // Include this inside :host-context(body[dir="rtl"]) @mixin list-item-base-rtl { - /deep/ .submenu-icon { + ::ng-deep .submenu-icon { transform: rotate(90deg); } } diff --git a/lib/src/components/material_list/material_list.scss b/lib/src/components/material_list/material_list.scss index 6c16995b3..76f2651c8 100644 --- a/lib/src/components/material_list/material_list.scss +++ b/lib/src/components/material_list/material_list.scss @@ -111,8 +111,9 @@ $x-large: 7; } } +// TODO(google): Move these styles into mixins. :host-context(body[dir="rtl"]) { - /deep/ [label] { + ::ng-deep [label] { @include list-item-base-rtl; } } diff --git a/lib/src/components/material_list/material_list.scss.css b/lib/src/components/material_list/material_list.scss.css index 62b11ce2b..8bd74a849 100644 --- a/lib/src/components/material_list/material_list.scss.css +++ b/lib/src/components/material_list/material_list.scss.css @@ -3,5 +3,5 @@ * for details. All rights reserved. Use of this source code is governed by a * BSD-style license that can be found in the LICENSE file. */ -:host{display:block;background:#fff;margin:0;padding:16px 0;white-space:nowrap}:host[size="x-small"]{width:96px}:host[size="small"]{width:192px}:host[size="medium"]{width:320px}:host[size="large"]{width:384px}:host[size="x-large"]{width:448px}:host[min-size="x-small"]{min-width:96px}:host[min-size="small"]{min-width:192px}:host[min-size="medium"]{min-width:320px}:host[min-size="large"]{min-width:384px}:host[min-size="x-large"]{min-width:448px}:host ::ng-deep [group]:not(.empty)+*:not(script):not(template):not(.empty),:host ::ng-deep :not([group]):not(script):not(template):not(.empty)+[group]:not(.empty){border-top:1px solid #e0e0e0;margin-top:7px;padding-top:8px}:host ::ng-deep [group]:not(.empty)+*:not(script):not(template):not(.empty){box-shadow:inset 0 8px 0 0 #fff}:host ::ng-deep [separator='present']{background:#e0e0e0;cursor:default;height:1px;margin:8px 0}:host ::ng-deep [label]{display:block;font-family:inherit;font-size:15px;line-height:32px;padding:0 24px;position:relative;white-space:nowrap;color:#9e9e9e;font-size:12px;font-weight:400}:host ::ng-deep [label].disabled{pointer-events:none}:host ::ng-deep [label] ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.54);width:40px}:host ::ng-deep [label].disabled ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.38)}:host ::ng-deep [label] ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.54);margin-left:auto}:host ::ng-deep [label].disabled ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.38)}:host ::ng-deep [label] ::ng-deep .submenu-icon{transform:rotate(-90deg)}:host-context(body[dir="rtl"]) /deep/ [label] /deep/ .submenu-icon{transform:rotate(90deg)} +:host{display:block;background:#fff;margin:0;padding:16px 0;white-space:nowrap}:host[size="x-small"]{width:96px}:host[size="small"]{width:192px}:host[size="medium"]{width:320px}:host[size="large"]{width:384px}:host[size="x-large"]{width:448px}:host[min-size="x-small"]{min-width:96px}:host[min-size="small"]{min-width:192px}:host[min-size="medium"]{min-width:320px}:host[min-size="large"]{min-width:384px}:host[min-size="x-large"]{min-width:448px}:host ::ng-deep [group]:not(.empty)+*:not(script):not(template):not(.empty),:host ::ng-deep :not([group]):not(script):not(template):not(.empty)+[group]:not(.empty){border-top:1px solid #e0e0e0;margin-top:7px;padding-top:8px}:host ::ng-deep [group]:not(.empty)+*:not(script):not(template):not(.empty){box-shadow:inset 0 8px 0 0 #fff}:host ::ng-deep [separator='present']{background:#e0e0e0;cursor:default;height:1px;margin:8px 0}:host ::ng-deep [label]{display:block;font-family:inherit;font-size:15px;line-height:32px;padding:0 24px;position:relative;white-space:nowrap;color:#9e9e9e;font-size:12px;font-weight:400}:host ::ng-deep [label].disabled{pointer-events:none}:host ::ng-deep [label] ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.54);width:40px}:host ::ng-deep [label].disabled ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.38)}:host ::ng-deep [label] ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.54);margin-left:auto}:host ::ng-deep [label].disabled ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.38)}:host ::ng-deep [label] ::ng-deep .submenu-icon{transform:rotate(-90deg)}:host-context(body[dir="rtl"]) ::ng-deep [label] ::ng-deep .submenu-icon{transform:rotate(90deg)} diff --git a/lib/src/components/material_list/material_list_item.scss.css b/lib/src/components/material_list/material_list_item.scss.css index 2a786d084..9a9c97089 100644 --- a/lib/src/components/material_list/material_list_item.scss.css +++ b/lib/src/components/material_list/material_list_item.scss.css @@ -3,5 +3,5 @@ * for details. All rights reserved. Use of this source code is governed by a * BSD-style license that can be found in the LICENSE file. */ -:host{display:block;font-family:inherit;font-size:15px;line-height:32px;padding:0 24px;position:relative;white-space:nowrap;display:flex;align-items:center;color:rgba(0,0,0,0.87);cursor:pointer;outline:none}:host.disabled{pointer-events:none}:host ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.54);width:40px}:host.disabled ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.38)}:host ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.54);margin-left:auto}:host.disabled ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.38)}:host ::ng-deep .submenu-icon{transform:rotate(-90deg)}:host:not([separator="present"]):hover,:host:not([separator="present"]):focus,:host:not([separator="present"]).active{background:#eee}:host:not([separator="present"]).disabled{background:none;color:rgba(0,0,0,0.38);cursor:default;pointer-events:all}:host-context(body[dir="rtl"]) /deep/ .submenu-icon{transform:rotate(90deg)} +:host{display:block;font-family:inherit;font-size:15px;line-height:32px;padding:0 24px;position:relative;white-space:nowrap;display:flex;align-items:center;color:rgba(0,0,0,0.87);cursor:pointer;outline:none}:host.disabled{pointer-events:none}:host ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.54);width:40px}:host.disabled ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.38)}:host ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.54);margin-left:auto}:host.disabled ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.38)}:host ::ng-deep .submenu-icon{transform:rotate(-90deg)}:host:not([separator="present"]):hover,:host:not([separator="present"]):focus,:host:not([separator="present"]).active{background:#eee}:host:not([separator="present"]).disabled{background:none;color:rgba(0,0,0,0.38);cursor:default;pointer-events:all}:host-context(body[dir="rtl"]) ::ng-deep .submenu-icon{transform:rotate(90deg)} diff --git a/lib/src/components/material_popup/material_popup.dart b/lib/src/components/material_popup/material_popup.dart index 3d35a68c3..f2cbbb2fd 100644 --- a/lib/src/components/material_popup/material_popup.dart +++ b/lib/src/components/material_popup/material_popup.dart @@ -23,7 +23,6 @@ import '../../utils/disposer/disposer.dart'; import '../../utils/id_generator/id_generator.dart'; import '../content/deferred_content_aware.dart'; import '../mixins/material_dropdown_base.dart'; -import 'src/popup_portal_directive.dart'; export '../../laminate/popup/popup.dart' show PopupSourceDirective; @@ -33,7 +32,6 @@ typedef Future _DebouncedVisibilitySetter(); /// /// Caveats: /// - Popups closing and opening are automatically delayed to add animations -/// - An additional event, `animationComplete`, is available. /// - Take advantage of enforceSpaceConstraints defined in /// [PopupInterface]. /// @@ -48,10 +46,6 @@ typedef Future _DebouncedVisibilitySetter(); /// - If the contents change and need to readjust position use /// [trackLayoutChanges] which is also defined in [PopupInterface]. /// -/// __Events__: -/// -/// - `animationComplete`: Triggers after an open or close animation finishes. -/// /// __Example use__: /// ///
/// default choice @@ -45,15 +47,19 @@ import './material_radio.dart'; /// [value]="option1">alternative choice /// /// +/// ``` /// /// Selection of the value is done at group level, can also be done /// via [ngModel]. +/// +/// ```html /// /// default choice /// /// alternative choice /// /// +/// ``` @Component( selector: 'material-radio-group', host: const { diff --git a/lib/src/components/material_ripple/material_ripple.dart b/lib/src/components/material_ripple/material_ripple.dart index 8b2bc2918..f6f6afc3b 100644 --- a/lib/src/components/material_ripple/material_ripple.dart +++ b/lib/src/components/material_ripple/material_ripple.dart @@ -155,7 +155,8 @@ void _applyFallbackAnimation( template: '', encapsulation: ViewEncapsulation.None, styleUrls: const ['material_ripple.scss.css'], - changeDetection: ChangeDetectionStrategy.Detached) + changeDetection: ChangeDetectionStrategy.Detached, + visibility: Visibility.none) class MaterialRippleComponent implements OnDestroy { final HtmlElement _element; EventListener _onMouseDown; diff --git a/lib/src/components/material_select/display_name.dart b/lib/src/components/material_select/display_name.dart index cc84cb39e..fba833061 100644 --- a/lib/src/components/material_select/display_name.dart +++ b/lib/src/components/material_select/display_name.dart @@ -10,11 +10,8 @@ import '../../model/ui/has_renderer.dart'; /// Add this directive to any [SelectionContainer] or [SelectionItem] /// component to render [HasUIDisplayName] objects. @Directive(selector: '[displayNameRenderer]') -class DisplayNameRendererDirective { - static final _displayNameRenderer = - (HasUIDisplayName item) => item.uiDisplayName; - - DisplayNameRendererDirective(HasRenderer hasRenderer) { - if (hasRenderer != null) hasRenderer.itemRenderer = _displayNameRenderer; - } +void DisplayNameRendererDirective(HasRenderer hasRenderer) { + if (hasRenderer != null) hasRenderer.itemRenderer = _displayNameRenderer; } + +final _displayNameRenderer = (HasUIDisplayName item) => item.uiDisplayName; diff --git a/lib/src/components/material_select/material_dropdown_select.dart b/lib/src/components/material_select/material_dropdown_select.dart index 14312812f..66e6d94cb 100644 --- a/lib/src/components/material_select/material_dropdown_select.dart +++ b/lib/src/components/material_select/material_dropdown_select.dart @@ -58,7 +58,6 @@ import './shift_click_selection.dart'; /// The material-select has a fixed max height and auto overflow. We can add a /// property for custom max height once there's a use case. /// -/// See third_party/dart_src/acx/material_select/examples for example usage. /// /// __Example Usage:__ /// diff --git a/lib/src/components/material_select/material_select_dropdown_item.dart b/lib/src/components/material_select/material_select_dropdown_item.dart index 2a5331afb..3a263b30d 100644 --- a/lib/src/components/material_select/material_select_dropdown_item.dart +++ b/lib/src/components/material_select/material_select_dropdown_item.dart @@ -21,20 +21,6 @@ import './material_select_item.dart'; /// This should only be used in select dropdowns. @Component( selector: 'material-select-dropdown-item', - // TODO(google). - inputs: const [ - 'active', - 'closeOnActivate', - 'componentRenderer', - 'disabled', // Is item disabled. Inherited from [ButtonDirective] - 'hideCheckbox', - 'itemRenderer', - 'selected', - 'selection', - 'value' - ], - // TODO(google). - outputs: const ['trigger'], host: const { 'class': 'item', '[class.disabled]': 'disabled', diff --git a/lib/src/components/material_select/material_select_dropdown_item.scss.css b/lib/src/components/material_select/material_select_dropdown_item.scss.css index e94a5949a..555dd4bca 100644 --- a/lib/src/components/material_select/material_select_dropdown_item.scss.css +++ b/lib/src/components/material_select/material_select_dropdown_item.scss.css @@ -3,5 +3,5 @@ * for details. All rights reserved. Use of this source code is governed by a * BSD-style license that can be found in the LICENSE file. */ -:host{display:block;font-family:inherit;font-size:15px;line-height:32px;padding:0 24px;position:relative;white-space:nowrap;padding:0 16px;display:flex;align-items:center;transition:background;color:rgba(0,0,0,0.87);cursor:pointer}:host.disabled{pointer-events:none}:host ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.54);width:40px}:host.disabled ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.38)}:host ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.54);margin-left:auto}:host.disabled ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.38)}:host ::ng-deep .submenu-icon{transform:rotate(-90deg)}:host:hover,:host.active{background:#f5f5f5}:host:not(.multiselect).selected{background:#eee}:host .selected-accent{position:absolute;top:0;left:0;bottom:0;width:3px;background:#9e9e9e}:host material-checkbox{margin:0}:host.disabled{background:none;color:rgba(0,0,0,0.38);cursor:default}.check-container{display:inline-block;width:40px}.dynamic-item{flex-grow:1}:host-context(body[dir="rtl"]) /deep/ .submenu-icon{transform:rotate(90deg)} +:host{display:block;font-family:inherit;font-size:15px;line-height:32px;padding:0 24px;position:relative;white-space:nowrap;padding:0 16px;display:flex;align-items:center;transition:background;color:rgba(0,0,0,0.87);cursor:pointer}:host.disabled{pointer-events:none}:host ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.54);width:40px}:host.disabled ::ng-deep .material-list-item-primary{color:rgba(0,0,0,0.38)}:host ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.54);margin-left:auto}:host.disabled ::ng-deep .material-list-item-secondary{color:rgba(0,0,0,0.38)}:host ::ng-deep .submenu-icon{transform:rotate(-90deg)}:host:hover,:host.active{background:#f5f5f5}:host:not(.multiselect).selected{background:#eee}:host .selected-accent{position:absolute;top:0;left:0;bottom:0;width:3px;background:#9e9e9e}:host material-checkbox{margin:0}:host.disabled{background:none;color:rgba(0,0,0,0.38);cursor:default}.check-container{display:inline-block;width:40px}.dynamic-item{flex-grow:1}:host-context(body[dir="rtl"]) ::ng-deep .submenu-icon{transform:rotate(90deg)} diff --git a/lib/src/components/material_select/material_select_searchbox.scss b/lib/src/components/material_select/material_select_searchbox.scss index c807c6e1d..f88cc45f0 100644 --- a/lib/src/components/material_select/material_select_searchbox.scss +++ b/lib/src/components/material_select/material_select_searchbox.scss @@ -12,7 +12,7 @@ */ @import 'lib/src/css/material/material'; -@import 'third_party/dart_src/acx/material_input/lib/mixins'; +@import 'lib/src/components/material_input/lib/mixins'; .searchbox-input { @include input-leading-glyph-color($mat-grey-400); diff --git a/lib/src/components/material_spinner/material_spinner.dart b/lib/src/components/material_spinner/material_spinner.dart index 971048c21..1994e26ab 100644 --- a/lib/src/components/material_spinner/material_spinner.dart +++ b/lib/src/components/material_spinner/material_spinner.dart @@ -23,5 +23,6 @@ import 'package:angular/angular.dart'; preserveWhitespace: false, templateUrl: 'material_spinner.html', styleUrls: const ['material_spinner.scss.css'], - changeDetection: ChangeDetectionStrategy.Detached) + changeDetection: ChangeDetectionStrategy.Detached, + visibility: Visibility.none) class MaterialSpinnerComponent {} diff --git a/lib/src/components/material_tab/tab_button.scss.css b/lib/src/components/material_tab/tab_button.scss.css index be1763a82..8f159e97c 100644 --- a/lib/src/components/material_tab/tab_button.scss.css +++ b/lib/src/components/material_tab/tab_button.scss.css @@ -3,5 +3,5 @@ * for details. All rights reserved. Use of this source code is governed by a * BSD-style license that can be found in the LICENSE file. */ -:host{font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;background:transparent;border-radius:inherit;box-sizing:border-box;cursor:pointer;display:inline-block;letter-spacing:.01em;line-height:normal;outline:none;position:relative;text-align:center;display:inline-flex;justify-content:center;align-items:center;height:48px;font-weight:500;color:#616161}:host.acx-theme-dark{color:#fff}:host.acx-theme-dark[raised]{background-color:#4285f4}:host[animated]{transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)}:host[elevation="1"]{/*! @noflip */box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}:host[elevation="2"]{/*! @noflip */box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2)}:host[elevation="3"]{/*! @noflip */box-shadow:0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.2)}:host[elevation="4"]{/*! @noflip */box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}:host[elevation="5"]{/*! @noflip */box-shadow:0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.2)}:host[elevation="6"]{/*! @noflip */box-shadow:0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.2)}:host:not([icon]){margin:0 .29em}:host[dense]{height:32px;font-size:13px}:host[disabled]{color:rgba(0,0,0,0.26);cursor:not-allowed}:host[disabled].acx-theme-dark{color:rgba(255,255,255,0.3)}:host[disabled]>*{pointer-events:none}:host[disabled][raised]{background:rgba(0,0,0,0.12)}:host[disabled][raised].acx-theme-dark{background:#4285f4}:host:not([raised]):not([disabled]):not([icon]):hover{background-color:rgba(158,158,158,0.2)}:host.is-focused::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:.12;border-radius:inherit;pointer-events:none}:host:not([raised]),:host[disabled][raised]{box-shadow:none}:host[no-ink] material-ripple{display:none}:host[clear-size]{margin:0}:host .content{display:inline-flex;align-items:center}:host.active,:host.focus{color:#4285f4}:host.focus::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:.14;pointer-events:none}.content{display:inline-block;overflow:hidden;padding:8px;text-overflow:ellipsis;white-space:nowrap} +:host{font-size:14px;font-weight:500;text-transform:uppercase;user-select:none;background:transparent;border-radius:inherit;box-sizing:border-box;cursor:pointer;display:inline-block;letter-spacing:.01em;line-height:normal;outline:none;position:relative;text-align:center;display:inline-flex;justify-content:center;align-items:center;height:48px;font-weight:500;color:#616161}:host.acx-theme-dark{color:#fff}:host:not([icon]){margin:0 .29em}:host[dense]{height:32px;font-size:13px}:host[disabled]{color:rgba(0,0,0,0.26);cursor:not-allowed}:host[disabled].acx-theme-dark{color:rgba(255,255,255,0.3)}:host[disabled]>*{pointer-events:none}:host:not([raised]):not([disabled]):not([icon]):hover{background-color:rgba(158,158,158,0.2)}:host.is-focused::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:.12;border-radius:inherit;pointer-events:none}:host[raised][animated]{transition:box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1)}:host[raised][elevation="1"]{/*! @noflip */box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}:host[raised][elevation="2"]{/*! @noflip */box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2)}:host[raised][elevation="3"]{/*! @noflip */box-shadow:0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.2)}:host[raised][elevation="4"]{/*! @noflip */box-shadow:0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2)}:host[raised][elevation="5"]{/*! @noflip */box-shadow:0 16px 24px 2px rgba(0,0,0,0.14),0 6px 30px 5px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.2)}:host[raised][elevation="6"]{/*! @noflip */box-shadow:0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12),0 11px 15px -7px rgba(0,0,0,0.2)}:host[raised].acx-theme-dark{background-color:#4285f4}:host[raised][disabled]{background:rgba(0,0,0,0.12);box-shadow:none}:host[raised][disabled].acx-theme-dark{background:#4285f4}:host[no-ink] material-ripple{display:none}:host[clear-size]{margin:0}:host .content{display:inline-flex;align-items:center}:host.active,:host.focus{color:#4285f4}:host.focus::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background-color:currentColor;opacity:.14;pointer-events:none}.content{display:inline-block;overflow:hidden;padding:8px;text-overflow:ellipsis;white-space:nowrap} diff --git a/lib/src/components/material_tooltip/src/tooltip.dart b/lib/src/components/material_tooltip/src/tooltip.dart index ea7d663ad..3db61484a 100644 --- a/lib/src/components/material_tooltip/src/tooltip.dart +++ b/lib/src/components/material_tooltip/src/tooltip.dart @@ -19,7 +19,9 @@ import 'tooltip_target.dart'; /// An ink-based tooltip which can be attached to any element. @Directive( - selector: '[materialTooltip]', providers: const [tooltipControllerBinding]) + selector: '[materialTooltip]', + providers: const [tooltipControllerBinding], + visibility: Visibility.none) class MaterialTooltipDirective extends TooltipTarget implements OnDestroy, OnInit, AfterViewInit { final _disposer = new Disposer.multi(); @@ -56,7 +58,6 @@ class MaterialTooltipDirective extends TooltipTarget void _attachHostListeners() { if (_hostListenersAttached) return; _hostListenersAttached = true; - html.HtmlElement element = elementRef.nativeElement; _disposer.addStreamSubscription(element.onClick.listen((_) { hide(true); diff --git a/lib/src/css/material/const/_color.scss b/lib/src/css/material/const/_color.scss index f0a954b5e..91c7cc93c 100644 --- a/lib/src/css/material/const/_color.scss +++ b/lib/src/css/material/const/_color.scss @@ -13,7 +13,8 @@ // ############################################################################# // -// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL +// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF +// LIB/SRC/CSS/MATERIAL // // ############################################################################# diff --git a/lib/src/css/material/const/_functions.scss b/lib/src/css/material/const/_functions.scss index f25f0cf94..867327abd 100644 --- a/lib/src/css/material/const/_functions.scss +++ b/lib/src/css/material/const/_functions.scss @@ -13,7 +13,8 @@ // ############################################################################# // -// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL +// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF +// LIB/SRC/CSS/MATERIAL // // ############################################################################# diff --git a/lib/src/css/material/const/_global.scss b/lib/src/css/material/const/_global.scss index ed28bb0a4..ac1bb0c92 100644 --- a/lib/src/css/material/const/_global.scss +++ b/lib/src/css/material/const/_global.scss @@ -13,7 +13,8 @@ // ############################################################################# // -// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL +// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF +// LIB/SRC/CSS/MATERIAL // // ############################################################################# diff --git a/lib/src/css/material/const/_mixins.scss b/lib/src/css/material/const/_mixins.scss index 9ba8cfb4d..75d55d94a 100644 --- a/lib/src/css/material/const/_mixins.scss +++ b/lib/src/css/material/const/_mixins.scss @@ -13,7 +13,8 @@ // ############################################################################# // -// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL +// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF +// LIB/SRC/CSS/MATERIAL // // ############################################################################# @@ -32,8 +33,15 @@ // clearfix forces the containing element to contain and be the same height as // the floated child elements. @mixin clearfix() { - &:before, &:after { content: ' '; display: table; } - &:after { clear: both; } + &::before, + &::after { + content: ' '; + display: table; + } + + &::after { + clear: both; + } } @mixin box-sizing($type:border-box) { @@ -63,7 +71,7 @@ width: $button-size; // Icon is in after pseudo element to isolate opacity fiddling. - &:after { + &::after { @include icon-background($icon-url, $button-size, $icon-size); content: ''; display: block; @@ -75,29 +83,29 @@ } // Light theme - default - &:focus:after, - &:hover:after, - &:active:after { + &:focus::after, + &:hover::after, + &:active::after { opacity: $mat-icon-opacity-hover; } - &:disabled:after { + &:disabled::after { opacity: $mat-icon-opacity-disabled; } // Dark theme - &.dark:after { + &.dark::after { opacity: $mat-icon-dark-opacity; } - &.dark:focus:after, - &.dark:hover:after, - &.dark:active:after { + &.dark:focus::after, + &.dark:hover::after, + &.dark:active::after { opacity: $mat-icon-dark-opacity-hover; outline: none; } - &.dark:disabled:after { + &.dark:disabled::after { opacity: $mat-icon-dark-opacity-disabled; } } diff --git a/lib/src/css/material/const/_palette.scss b/lib/src/css/material/const/_palette.scss index 0926c7206..dea0d938a 100644 --- a/lib/src/css/material/const/_palette.scss +++ b/lib/src/css/material/const/_palette.scss @@ -13,7 +13,8 @@ // ############################################################################# // -// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL +// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF +// LIB/SRC/CSS/MATERIAL // // ############################################################################# diff --git a/lib/src/css/material/const/_settings.scss b/lib/src/css/material/const/_settings.scss index f15083263..5fbeeb12a 100644 --- a/lib/src/css/material/const/_settings.scss +++ b/lib/src/css/material/const/_settings.scss @@ -13,7 +13,8 @@ // ############################################################################# // -// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL +// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF +// LIB/SRC/CSS/MATERIAL // // ############################################################################# diff --git a/lib/src/css/material/const/_typography.scss b/lib/src/css/material/const/_typography.scss index f24a84f15..082025de6 100644 --- a/lib/src/css/material/const/_typography.scss +++ b/lib/src/css/material/const/_typography.scss @@ -13,31 +13,32 @@ // ############################################################################# // -// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF LIB/SRC/CSS/MATERIAL +// WARNING: DO NOT IMPORT DIRECTLY OUTSIDE OF +// LIB/SRC/CSS/MATERIAL // // ############################################################################# // Font sizes // https://material.io/guidelines/style/typography.html -$mat-display-4-font-size: 112px; -$mat-display-3-font-size: 56px; -$mat-display-2-font-size: 45px; -$mat-display-1-font-size: 34px; -$mat-headline-font-size: 24px; -$mat-title-font-size: 20px; -$mat-subhead-font-size: 15px; -$mat-button-font-size: 14px; -$mat-body-font-size: 13px; -$mat-caption-font-size: 12px; +$mat-display-4-font-size: 112px; +$mat-display-3-font-size: 56px; +$mat-display-2-font-size: 45px; +$mat-display-1-font-size: 34px; +$mat-headline-font-size: 24px; +$mat-title-font-size: 20px; +$mat-subhead-font-size: 15px; +$mat-button-font-size: 14px; +$mat-body-font-size: 13px; +$mat-caption-font-size: 12px; // Font weights -$mat-font-weight-thin: 100; -$mat-font-weight-light: 300; -$mat-font-weight-regular: 400; -$mat-font-weight-medium: 500; -$mat-font-weight-bold: 700; -$mat-font-weight-black: 900; +$mat-font-weight-thin: 100; +$mat-font-weight-light: 300; +$mat-font-weight-regular: 400; +$mat-font-weight-medium: 500; +$mat-font-weight-bold: 700; +$mat-font-weight-black: 900; @mixin mat-type-display-4() { diff --git a/lib/src/laminate/popup/src/popup_position_mixin.dart b/lib/src/laminate/popup/src/popup_position_mixin.dart index 9cc489445..8d003dc59 100644 --- a/lib/src/laminate/popup/src/popup_position_mixin.dart +++ b/lib/src/laminate/popup/src/popup_position_mixin.dart @@ -4,6 +4,8 @@ import 'dart:math'; +import 'package:angular/angular.dart'; + import '../../enums/alignment.dart'; import './popup_size_provider.dart'; @@ -48,6 +50,7 @@ class PopupPositionMixin implements PopupSizeProvider { List get popupPositions => _popupPositions; + @Input() set popupPosition(String position) { _popupPosition = position; switch (_popupPosition) { diff --git a/pubspec.yaml b/pubspec.yaml index d080b799a..9954fdd6e 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,5 +1,5 @@ name: angular_components -version: 0.6.0-beta +version: 0.6.0 description: > The official Material Design components for AngularDart. Used at Google in production apps. @@ -8,8 +8,8 @@ author: Dart Team environment: sdk: '>=1.24.0 <2.0.0-dev.infinity' dependencies: - angular: 4.0.0-beta - angular_forms: 0.1.0 + angular: ^4.0.0 + angular_forms: ^1.0.0 collection: ^1.14.0 fixnum: ^0.10.5 intl: '>=0.14.0 <0.16.0'