feat(circular-progress): Add TS for foundation, adapter, component with tests

packages/mdc-circular-progress/adapter.ts

@@ -0,0 +1,40 @@
+/**
+ * @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.
+ */
+
+/**
+ * Defines the shape of the adapter expected by the foundation.
+ * Implement this adapter for your framework of choice to delegate updates to
+ * the component in your framework of choice. See architecture documentation
+ * for more details.
+ * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
+ */
+export interface MDCCircularProgressAdapter {
+  addClass(className: string): void;
+  forceLayout(): void;
+  getDetermCircleAttribute(attributeName: string): string|null;
+  hasClass(className: string): boolean;
+  removeClass(className: string): void;
+  removeAttribute(attributeName: string): void;
+  setAttribute(attributeName: string, value: string): void;
+  setDetermCircleAttribute(attributeName: string, value: string): void;
+}

packages/mdc-circular-progress/component.ts

@@ -0,0 +1,84 @@
+/**
+ * @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.
+ */
+
+import {MDCComponent} from '@material/base/component';
+import {MDCProgressIndicator} from '@material/progress-indicator/component';
+import {MDCCircularProgressAdapter} from './adapter';
+import {MDCCircularProgressFoundation} from './foundation';
+
+export class MDCCircularProgress extends
+    MDCComponent<MDCCircularProgressFoundation> implements
+        MDCProgressIndicator {
+  private determCircle_!: HTMLElement;
+
+  initialize() {
+    this.determCircle_ = this.root_.querySelector<HTMLElement>(
+        MDCCircularProgressFoundation.strings.DETERM_CIRCLE_SELECTOR)!;
+  }
+
+  static attachTo(root: Element) {
+    return new MDCCircularProgress(root);
+  }
+
+  set determinate(value: boolean) {
+    this.foundation_.setDeterminate(value);
+  }
+
+  set progress(value: number) {
+    this.foundation_.setProgress(value);
+  }
+
+  get isClosed() {
+    return this.foundation_.isClosed();
+  }
+
+  open() {
+    this.foundation_.open();
+  }
+
+  close() {
+    this.foundation_.close();
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take
+    // a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
+    // methods, we need a separate, strongly typed adapter variable.
+    const adapter: MDCCircularProgressAdapter = {
+      addClass: (className: string) => this.root_.classList.add(className),
+      forceLayout: () => (this.root_ as HTMLElement).offsetWidth,
+      getDetermCircleAttribute: (attributeName: string) =>
+          this.determCircle_.getAttribute(attributeName),
+      hasClass: (className: string) => this.root_.classList.contains(className),
+      removeClass: (className: string) =>
+          this.root_.classList.remove(className),
+      removeAttribute: (attributeName: string) =>
+          this.root_.removeAttribute(attributeName),
+      setAttribute: (attributeName: string, value: string) =>
+          this.root_.setAttribute(attributeName, value),
+      setDetermCircleAttribute: (attributeName: string, value: string) =>
+          this.determCircle_.setAttribute(attributeName, value),
+    };
+    return new MDCCircularProgressFoundation(adapter);
+  }
+}

packages/mdc-circular-progress/constants.ts

@@ -0,0 +1,34 @@
+/**
+ * @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.
+ */
+
+export const cssClasses = {
+  INDETERMINATE_CLASS: 'mdc-circular-progress--indeterminate',
+  CLOSED_CLASS: 'mdc-circular-progress--closed',
+};
+
+export const strings = {
+  DETERM_CIRCLE_SELECTOR: '.mdc-circular-progress__determ-circle',
+  ARIA_VALUENOW: 'aria-valuenow',
+  RADIUS: 'r',
+  STROKE_DASHOFFSET: 'stroke-dashoffset',
+};

packages/mdc-circular-progress/foundation.ts

@@ -0,0 +1,117 @@
+/**
+ * @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.
+ */
+
+import {MDCFoundation} from '@material/base/foundation';
+import {MDCProgressIndicatorFoundation} from '@material/progress-indicator/foundation';
+import {MDCCircularProgressAdapter} from './adapter';
+import {cssClasses, strings} from './constants';
+
+export class MDCCircularProgressFoundation extends
+    MDCFoundation<MDCCircularProgressAdapter> implements
+        MDCProgressIndicatorFoundation {
+  static get cssClasses() {
+    return cssClasses;
+  }
+
+  static get strings() {
+    return strings;
+  }
+
+  static get defaultAdapter(): MDCCircularProgressAdapter {
+    return {
+      addClass: () => undefined,
+      forceLayout: () => undefined,
+      getDetermCircleAttribute: () => null,
+      hasClass: () => false,
+      removeClass: () => undefined,
+      removeAttribute: () => undefined,
+      setAttribute: () => undefined,
+      setDetermCircleAttribute: () => undefined,
+    };
+  }
+
+  private isClosed_!: boolean;
+  private isDeterminate_!: boolean;
+  private progress_!: number;
+  private radius_!: number;
+
+  constructor(adapter?: Partial<MDCCircularProgressAdapter>) {
+    super({...MDCCircularProgressFoundation.defaultAdapter, ...adapter});
+  }
+
+  init() {
+    this.isClosed_ = this.adapter_.hasClass(cssClasses.CLOSED_CLASS);
+    this.isDeterminate_ =
+        !this.adapter_.hasClass(cssClasses.INDETERMINATE_CLASS);
+    this.progress_ = 0;
+
+    if (this.isDeterminate_) {
+      this.adapter_.setAttribute(
+          strings.ARIA_VALUENOW, this.progress_.toString());
+    }
+
+    this.radius_ = Number(this.adapter_.getDetermCircleAttribute(strings.RADIUS));
+  }
+
+  isClosed() {
+    return this.isClosed_;
+  }
+
+  setDeterminate(isDeterminate: boolean) {
+    this.isDeterminate_ = isDeterminate;
+
+    if (this.isDeterminate_) {
+      this.adapter_.removeClass(cssClasses.INDETERMINATE_CLASS);
+      this.setProgress(this.progress_);
+    } else {
+      this.adapter_.addClass(cssClasses.INDETERMINATE_CLASS);
+      this.adapter_.removeAttribute(strings.ARIA_VALUENOW);
+    }
+  }
+
+  setProgress(value: number) {
+    this.progress_ = value;
+    if (this.isDeterminate_) {
+      const unfilledArcLength =
+          (1 - this.progress_) * (2 * Math.PI * this.radius_);
+
+      this.adapter_.setDetermCircleAttribute(
+          strings.STROKE_DASHOFFSET, `${unfilledArcLength}`);
+      this.adapter_.setAttribute(
+          strings.ARIA_VALUENOW, this.progress_.toString());
+    }
+  }
+
+  open() {
+    this.isClosed_ = false;
+    this.adapter_.removeClass(cssClasses.CLOSED_CLASS);
+  }
+
+  close() {
+    this.isClosed_ = true;
+    this.adapter_.addClass(cssClasses.CLOSED_CLASS);
+  }
+}
+
+// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
+export default MDCCircularProgressFoundation;

packages/mdc-circular-progress/index.ts

@@ -0,0 +1,27 @@
+/**
+ * @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.
+ */
+
+export * from './adapter';
+export * from './component';
+export * from './constants';
+export * from './foundation';

packages/mdc-circular-progress/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@material/circular-progress",
+  "description": "The Material Components for the web circular progress component",
+  "version": "5.0.0",
+  "license": "MIT",
+  "keywords": [
+    "material components",
+    "material design",
+    "circular-progress"
+  ],
+  "main": "dist/mdc.circular-progress.js",
+  "module": "./index.js",
+  "sideEffects": false,
+  "types": "dist/mdc.circular-progress.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web.git",
+    "directory": "packages/mdc-circular-progress"
+  },
+  "dependencies": {
+    "@material/base": "^5.0.0",
+    "@material/progress-indicator": "^5.0.0",
+    "tslib": "^1.9.3"
+  }
+}