Project import generated by Copybara.

PiperOrigin-RevId: 173174950

Author: nshahan

CHANGELOG.md

@@ -1,3 +1,48 @@
+## 0.9.0-alpha
+
+ * Application Layout: Provide list-item changes as a mixin to be used in
+   components that wrap drawer contents.
+ * Material Auto Suggest Input: Protect against method being called after it is
+    destroyed.
+ * Material Button:
+   * Update hover, focus, and disabled styles to be inline with Material Spec.
+   * Update mixin names and fix to prevent styles leaking outside of the
+     component.
+ * Material Checkbox:
+   * Implement onTouched logic.
+   * Fix disabled state to match Material Spec which is a light grey not a
+     certain opacity of the checkbox.
+ * Material Dialog:
+   * Remove `preserveWhitespace: false`.
+ * Material Expansionpanel:
+   * Smooth appearance/disappearance of expansion panel contents.
+   * Add mixin to allow change the panel name min width.
+   * Remove `preserveWhitespace: false`.
+ * Material Input: Fix unexpected `)` in selector for
+   `MaterialInputDefaultValueAccessor`.
+ * Material Popup:
+   * Listen to DomService.trackLayoutChange streams for overlayRepositionLoop
+     popups.
+ * Material Progress: Fall back to the non-optimized animation if the width is 0
+   after view init.
+ * Material Select:
+   * Add `showButtonBorder` input to Material Dropdown Select component.
+   * Cleanup unused styles.
+ * Material Tabs: Increase space between labels.
+ * Material Tooltip: Fix material-paper-tooltip content that are change detected
+   and using deferred content by having the visible property be set in an async
+   manner so that the value isn't added in the middle of a change detection
+   loop.
+ * Material Tree: Clear filter inside the popup when MaterialTreeDropdown
+   closes.
+ * Scorecard: Add a tooltip field.
+ * Add color contrast ratio utility.
+ * Remove deprecated box-sizing styles.
+ * Deprecate `ManagedZone` and replace with `NgZone`.
+ * Remove unnecessary uses of `::ng-deep`.
+ * Add `visibility: Visibility.none` to most components for reduced code size.
+ * Update documentation.
+
 ## 0.8.0
 
  * Move entry points to all components out of the lib/src/ directory.

README.md

@@ -79,7 +79,7 @@ the transformer.
 
   ```yaml
   dependencies:
-    sass_builder ^1.0.0 # update for the latest version
+    sass_builder ^1.0.1 # update for the latest version
   transformers:
   - sass_builder
   - angular

lib/app_layout/README.md

@@ -10,10 +10,10 @@ the material spec.
 ## Setup
 
 The styles are provided by
-`package:angular_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.
+`package:angular_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
 @Component(
@@ -264,3 +264,17 @@ Here is an example:
   </material-list>
 </material-drawer>
 ```
+
+If the list content isn't going to be directly in the drawer but instead will be
+wrapped in another component you will have to provide the above styles using a
+mixin, due to style encapsulation.
+
+Example scss drawer content component:
+
+```scss
+@import 'third_party/dart_src/acx/app_layout/lib/mixins';
+
+:host {
+  @include mat-drawer-list-items;
+}
+```

lib/app_layout/_mixins.scss

@@ -2,6 +2,8 @@
 // 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.
 
+@import 'package:angular_components/material_list/mixins';
+
 /// Sets width of MaterialTemporaryDrawerComponent.
 ///
 /// Must be applied to the component itself, e.g.:
@@ -24,3 +26,36 @@
     right: -$width;
   }
 }
+
+/// Adds the mixins that apply the correct styles for material-list items inside
+/// of material-drawer.
+@mixin mat-drawer-list-items() {
+  material-list {
+    // Remove the padding on the default list component when it is used in the
+    // drawer.
+    padding: 0;
+  }
+
+  // Use the label attribute from material-list but ensure the style is right
+  // for the drawer.
+  [label] {
+    @include list-item-base;
+    align-items: center;
+    // TODO(google) Remove once material-list uses the right color value.
+    color: $mat-light-transparent-black;
+    display: flex;
+  }
+
+  material-list-item,
+  [label] {
+    font-weight: $mat-font-weight-medium;
+    // The default size/padding for list item is incorrect for the drawer spec.
+    height: $mat-grid * 6;
+    padding: 0 $mat-grid * 2;
+
+    material-icon {
+      color: $mat-light-transparent-black;
+      margin-right: $mat-grid * 4;
+    }
+  }
+}

lib/app_layout/layout.scss

@@ -6,6 +6,7 @@
 /// This includes:
 ///   material-drawer (persistent and permanent)
 @import 'material_drawer';
+@import 'mixins';
 @import 'package:angular_components/css/material/material';
 @import 'package:angular_components/css/material/shadow';
 @import 'package:angular_components/material_list/mixins';
@@ -233,32 +234,5 @@ $mat-header-dense-height: 48px;
 
 // Changes to material-list when used inside of the drawer.
 material-drawer {
-  material-list {
-    // Remove the padding on the default list component when it is used in the
-    // drawer.
-    padding: 0;
-  }
-
-  // Use the label attribute from material-list but ensure the style is right
-  // for the drawer.
-  [label] {
-    @include list-item-base;
-    align-items: center;
-    // TODO(google) Remove once material-list uses the right color value.
-    color: $mat-light-transparent-black;
-    display: flex;
-  }
-
-  material-list-item,
-  [label] {
-    font-weight: $mat-font-weight-medium;
-    // The default size/padding for list item is incorrect for the drawer spec.
-    height: $mat-grid * 6;
-    padding: 0 $mat-grid * 2;
-
-    material-icon {
-      color: $mat-light-transparent-black;
-      margin-right: $mat-grid * 4;
-    }
-  }
+  @include mat-drawer-list-items;
 }

lib/auto_dismiss/auto_dismiss.dart

@@ -25,7 +25,9 @@ import 'package:angular_components/utils/browser/events/events.dart';
 ///       <button (click)="disclaimerVisible = true">Confirm</button>
 ///     </div>
 ///
-@Directive(selector: '[autoDismissable]:not(material-expansionpanel)')
+@Directive(
+    selector: '[autoDismissable]:not(material-expansionpanel)',
+    visibility: Visibility.none)
 class AutoDismissDirective {
   final Stream _click;
   final NgZone _zone;

lib/content/deferred_content.dart

@@ -21,7 +21,7 @@ import 'deferred_content_aware.dart';
 /// <modal [(visible)]="visible">
 ///   <expensive-content *deferredContent></expensive-content>
 /// </modal>
-@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;

lib/css/material/const/_color.scss

@@ -525,3 +525,4 @@ $mat-amber: $mat-amber-500;
 $mat-link-default: $mat-blue-700;
 $mat-link-visited: $mat-deep-purple-500;
 $mat-link-active: $mat-red-700;
+

lib/css/material/const/_mixins.scss

@@ -214,3 +214,4 @@
   -moz-box-sizing: $type; // Firefox < 29
   box-sizing: $type;      // Chrome, IE 8+, Opera, Safari 5.1
 }
+

lib/focus/focus.dart

@@ -124,7 +124,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();