Add common interface for progress indicators

FUTURE_COPYBARA_INTEGRATE_REVIEW=#5493 from jony666666:master 6a56491
PiperOrigin-RevId: 293228410

Author: allan-chen

packages/mdc-linear-progress/component.ts

@@ -22,10 +22,12 @@
  */
 
 import {MDCComponent} from '@material/base/component';
+import {MDCProgressIndicator} from '@material/progress-indicator/component';
 import {MDCLinearProgressAdapter} from './adapter';
 import {MDCLinearProgressFoundation} from './foundation';
 
-export class MDCLinearProgress extends MDCComponent<MDCLinearProgressFoundation> {
+export class MDCLinearProgress extends
+    MDCComponent<MDCLinearProgressFoundation> implements MDCProgressIndicator {
   static attachTo(root: Element) {
     return new MDCLinearProgress(root);
   }

packages/mdc-linear-progress/foundation.ts

@@ -23,10 +23,13 @@
 
 import {getCorrectPropertyName} from '@material/animation/util';
 import {MDCFoundation} from '@material/base/foundation';
+import {MDCProgressIndicatorFoundation} from '@material/progress-indicator/foundation';
 import {MDCLinearProgressAdapter} from './adapter';
 import {cssClasses, strings} from './constants';
 
-export class MDCLinearProgressFoundation extends MDCFoundation<MDCLinearProgressAdapter> {
+export class MDCLinearProgressFoundation extends
+    MDCFoundation<MDCLinearProgressAdapter> implements
+        MDCProgressIndicatorFoundation {
   static get cssClasses() {
     return cssClasses;
   }

packages/mdc-linear-progress/package.json

@@ -21,6 +21,7 @@
     "@material/animation": "^4.0.0",
     "@material/base": "^4.0.0",
     "@material/feature-targeting": "^4.0.0",
+    "@material/progress-indicator": "^4.0.0",
     "@material/theme": "^4.0.0",
     "tslib": "^1.9.3"
   },

packages/mdc-progress-indicator/README.md

@@ -0,0 +1,42 @@
+<!--docs:
+title: "Progress Indicator"
+layout: detail
+section: components
+excerpt: "Material Design-styled progress indicators."
+iconId: progress_linear
+path: /catalog/progress-indicator/
+-->
+
+# Progress Indicators
+The MDC Progress Indicator component exposes common foundation and component interfaces for a progress indicator. Components that implement these interfaces include [linear progress](https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress) and circular progress (WIP).
+[Material Design progress & activity requirements](https://material.io/go/design-progress-indicators).
+
+## Installation
+
+```
+npm install @material/progress-indicator
+```
+
+## Basic Usage
+
+### MDCProgressIndicatorFoundation API
+
+MDC Progress Indicator Foundation exposes the following methods:
+
+| Method Signature | Description |
+| --- | --- |
+| `setDeterminate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state. |
+| `setProgress(value: number) => void` | Sets the progress to this value. Value should be between [0, 1]. |
+| `open() => void` | Puts the component in the open state. |
+| `close() => void` | Puts the component in the closed state. |
+
+### MDCProgressIndicator Component API
+
+MDC Progress Indicator exposes the following API:
+
+| Method Signature | Description |
+| --- | --- |
+| `determinate: boolean` | Whether the indicator is in the determinate or indeterminate state. |
+| `progress: number` | The current progress. Value should be between [0, 1]. |
+| `open() => void` | Puts the component in the open state. |
+| `close() => void` | Puts the component in the closed state. |

packages/mdc-progress-indicator/component.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2020 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * The interface for MDC's progress indicators.
+ *
+ * @public
+ */
+export interface MDCProgressIndicator {
+  /**
+   * Toggles the component between the determinate and indeterminate state.
+   */
+  determinate: boolean;
+
+  /**
+   * The current progress value. Value should be between [0, 1].
+   */
+  progress: number;
+
+  /**
+   * Puts the component in the open state.
+   */
+  open(): void;
+
+  /**
+   * Puts the component in the closed state.
+   */
+  close(): void;
+}

packages/mdc-progress-indicator/foundation.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2020 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * The interface for the foundation of MDC's progress indicators.
+ *
+ * @public
+ */
+export interface MDCProgressIndicatorFoundation {
+  /**
+   * Toggles the component between the determinate and indeterminate state.
+   *
+   * @param isDeterminate - Whether the component is in determinate state
+   */
+  setDeterminate(isDeterminate: boolean): void;
+
+  /**
+   * Sets the current progress value.
+   *
+   * @param value - the current progress value, should be between [0,1]
+   */
+  setProgress(value: number): void;
+
+  /**
+   * Puts the component in the open state.
+   */
+  open(): void;
+
+  /**
+   * Puts the component in the closed state.
+   */
+  close(): void;
+}

packages/mdc-progress-indicator/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@material/progress-indicator",
+  "description": "The Material Components for the web interface for Progress Indicators",
+  "version": "4.0.0",
+  "license": "MIT",
+  "main": "dist/mdc.progressIndicator.js",
+  "module": "index.js",
+  "sideEffects": false,
+  "types": "dist/mdc.progressIndicator.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web.git",
+    "directory": "packages/mdc-progress-indicator"
+  },
+  "dependencies": {
+    "tslib": "^1.9.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}