@material/notched-outline - npm Package Compare versions

Comparing version 0.41.0 to 0.42.0

adapter.js

@@ -38,14 +38,2 @@ /**
   /**
-   * Returns the width of the root element.
-   * @return {number}
-   */
-  getWidth() {}
-
-  /**
-   * Returns the height of the root element.
-   * @return {number}
-   */
-  getHeight() {}
-
-  /**
    * Adds a class to the root element.
@@ -63,16 +51,8 @@ * @param {string} className
   /**
-   * Sets the "d" attribute of the outline element's SVG path.
-   * @param {string} value
+   * Sets the width style property of the notch element.
+   * @param {number} width
    */
-  setOutlinePathAttr(value) {}
-
-  /**
-   * Returns the idle outline element's computed style value of the given css property `propertyName`.
-   * We achieve this via `getComputedStyle(...).getPropertyValue(propertyName)`.
-   * @param {string} propertyName
-   * @return {string}
-   */
-  getIdleOutlineStyleValue(propertyName) {}
+  setNotchWidthProperty(width) {}
 }
 
 export default MDCNotchedOutlineAdapter;

constants.js

@@ -26,17 +26,18 @@ /**
 const strings = {
-  PATH_SELECTOR: '.mdc-notched-outline__path',
-  IDLE_OUTLINE_SELECTOR: '.mdc-notched-outline__idle',
+  NOTCH_ELEMENT_SELECTOR: '.mdc-notched-outline__notch',
 };
 
+/** @enum {number} */
+const numbers = {
+  // This should stay in sync with $mdc-notched-outline-padding * 2.
+  NOTCH_ELEMENT_PADDING: 8,
+};
+
 /** @enum {string} */
 const cssClasses = {
   OUTLINE_NOTCHED: 'mdc-notched-outline--notched',
+  OUTLINE_UPGRADED: 'mdc-notched-outline--upgraded',
+  NO_LABEL: 'mdc-notched-outline--no-label',
 };
 
-/** @enum {number} */
-const numbers = {
-  NOTCH_GUTTER_SIZE: 4,
-  MIN_LEADING_STROKE_EDGE_POSITION: 12,
-};
-
-export {cssClasses, strings, numbers};
+export {cssClasses, numbers, strings};

dist/mdc.notchedOutline.js

@@ -372,3 +372,3 @@ /*!
 
-/***/ 22:
+/***/ 14:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -407,6 +407,6 @@
 /**
- * Adapter for MDC Notched Outline.
+ * Adapter for MDC Floating Label.
  *
  * Defines the shape of the adapter expected by the foundation. Implement this
- * adapter to integrate the Notched Outline into your framework. See
+ * adapter to integrate the floating label into your framework. See
  * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
@@ -417,18 +417,147 @@ * for more information.
  */
-var MDCNotchedOutlineAdapter = function () {
-  function MDCNotchedOutlineAdapter() {
-    _classCallCheck(this, MDCNotchedOutlineAdapter);
+var MDCFloatingLabelAdapter = function () {
+  function MDCFloatingLabelAdapter() {
+    _classCallCheck(this, MDCFloatingLabelAdapter);
   }
 
-  _createClass(MDCNotchedOutlineAdapter, [{
-    key: "getWidth",
+  _createClass(MDCFloatingLabelAdapter, [{
+    key: "addClass",
 
     /**
-     * Returns the width of the root element.
+     * Adds a class to the label element.
+     * @param {string} className
+     */
+    value: function addClass(className) {}
+
+    /**
+     * Removes a class from the label element.
+     * @param {string} className
+     */
+
+  }, {
+    key: "removeClass",
+    value: function removeClass(className) {}
+
+    /**
+     * Returns the width of the label element.
      * @return {number}
      */
+
+  }, {
+    key: "getWidth",
     value: function getWidth() {}
 
     /**
-     * Returns the height of the root element.
+     * Registers an event listener on the root element for a given event.
+     * @param {string} evtType
+     * @param {function(!Event): undefined} handler
+     */
+
+  }, {
+    key: "registerInteractionHandler",
+    value: function registerInteractionHandler(evtType, handler) {}
+
+    /**
+     * Deregisters an event listener on the root element for a given event.
+     * @param {string} evtType
+     * @param {function(!Event): undefined} handler
+     */
+
+  }, {
+    key: "deregisterInteractionHandler",
+    value: function deregisterInteractionHandler(evtType, handler) {}
+  }]);
+
+  return MDCFloatingLabelAdapter;
+}();
+
+/* unused harmony default export */ var _unused_webpack_default_export = (MDCFloatingLabelAdapter);
+
+/***/ }),
+
+/***/ 17:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MDCFloatingLabel", function() { return MDCFloatingLabel; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_component__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation__ = __webpack_require__(27);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCFloatingLabelFoundation", function() { return __WEBPACK_IMPORTED_MODULE_2__foundation__["a"]; });
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * @license
+ * Copyright 2016 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.
+ */
+
+
+
+
+
+/**
+ * @extends {MDCComponent<!MDCFloatingLabelFoundation>}
+ * @final
+ */
+
+var MDCFloatingLabel = function (_MDCComponent) {
+  _inherits(MDCFloatingLabel, _MDCComponent);
+
+  function MDCFloatingLabel() {
+    _classCallCheck(this, MDCFloatingLabel);
+
+    return _possibleConstructorReturn(this, (MDCFloatingLabel.__proto__ || Object.getPrototypeOf(MDCFloatingLabel)).apply(this, arguments));
+  }
+
+  _createClass(MDCFloatingLabel, [{
+    key: 'shake',
+
+
+    /**
+     * Styles the label to produce the label shake for errors.
+     * @param {boolean} shouldShake styles the label to shake by adding shake class
+     * if true, otherwise will stop shaking by removing shake class.
+     */
+    value: function shake(shouldShake) {
+      this.foundation_.shake(shouldShake);
+    }
+
+    /**
+     * Styles label to float/dock.
+     * @param {boolean} shouldFloat styles the label to float by adding float class
+     * if true, otherwise docks the label by removing the float class.
+     */
+
+  }, {
+    key: 'float',
+    value: function float(shouldFloat) {
+      this.foundation_.float(shouldFloat);
+    }
+
+    /**
      * @return {number}
@@ -438,12 +567,108 @@ */
   }, {
-    key: "getHeight",
-    value: function getHeight() {}
+    key: 'getWidth',
+    value: function getWidth() {
+      return this.foundation_.getWidth();
+    }
 
     /**
-     * Adds a class to the root element.
-     * @param {string} className
+     * @return {!MDCFloatingLabelFoundation}
      */
 
   }, {
+    key: 'getDefaultFoundation',
+    value: function getDefaultFoundation() {
+      var _this2 = this;
+
+      return new __WEBPACK_IMPORTED_MODULE_2__foundation__["a" /* default */]({
+        addClass: function addClass(className) {
+          return _this2.root_.classList.add(className);
+        },
+        removeClass: function removeClass(className) {
+          return _this2.root_.classList.remove(className);
+        },
+        getWidth: function getWidth() {
+          return _this2.root_.offsetWidth;
+        },
+        registerInteractionHandler: function registerInteractionHandler(evtType, handler) {
+          return _this2.root_.addEventListener(evtType, handler);
+        },
+        deregisterInteractionHandler: function deregisterInteractionHandler(evtType, handler) {
+          return _this2.root_.removeEventListener(evtType, handler);
+        }
+      });
+    }
+  }], [{
+    key: 'attachTo',
+
+    /**
+     * @param {!Element} root
+     * @return {!MDCFloatingLabel}
+     */
+    value: function attachTo(root) {
+      return new MDCFloatingLabel(root);
+    }
+  }]);
+
+  return MDCFloatingLabel;
+}(__WEBPACK_IMPORTED_MODULE_0__material_base_component__["a" /* default */]);
+
+
+
+/***/ }),
+
+/***/ 23:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+/**
+ * @license
+ * Copyright 2017 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.
+ */
+
+/* eslint no-unused-vars: [2, {"args": "none"}] */
+
+/**
+ * Adapter for MDC Notched Outline.
+ *
+ * Defines the shape of the adapter expected by the foundation. Implement this
+ * adapter to integrate the Notched Outline into your framework. See
+ * https://github.com/material-components/material-components-web/blob/master/docs/authoring-components.md
+ * for more information.
+ *
+ * @record
+ */
+var MDCNotchedOutlineAdapter = function () {
+  function MDCNotchedOutlineAdapter() {
+    _classCallCheck(this, MDCNotchedOutlineAdapter);
+  }
+
+  _createClass(MDCNotchedOutlineAdapter, [{
     key: "addClass",
+
+    /**
+     * Adds a class to the root element.
+     * @param {string} className
+     */
     value: function addClass(className) {}
@@ -461,20 +686,9 @@
     /**
-     * Sets the "d" attribute of the outline element's SVG path.
-     * @param {string} value
+     * Sets the width style property of the notch element.
+     * @param {number} width
      */
 
   }, {
-    key: "setOutlinePathAttr",
-    value: function setOutlinePathAttr(value) {}
-
-    /**
-     * Returns the idle outline element's computed style value of the given css property `propertyName`.
-     * We achieve this via `getComputedStyle(...).getPropertyValue(propertyName)`.
-     * @param {string} propertyName
-     * @return {string}
-     */
-
-  }, {
-    key: "getIdleOutlineStyleValue",
-    value: function getIdleOutlineStyleValue(propertyName) {}
+    key: "setNotchWidthProperty",
+    value: function setNotchWidthProperty(width) {}
   }]);
@@ -489,3 +703,3 @@
 
-/***/ 23:
+/***/ 24:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -495,4 +709,4 @@
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return cssClasses; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return numbers; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return strings; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return numbers; });
 /**
@@ -523,15 +737,233 @@ * @license
 var strings = {
-  PATH_SELECTOR: '.mdc-notched-outline__path',
-  IDLE_OUTLINE_SELECTOR: '.mdc-notched-outline__idle'
+  NOTCH_ELEMENT_SELECTOR: '.mdc-notched-outline__notch'
 };
 
+/** @enum {number} */
+var numbers = {
+  // This should stay in sync with $mdc-notched-outline-padding * 2.
+  NOTCH_ELEMENT_PADDING: 8
+};
+
 /** @enum {string} */
 var cssClasses = {
-  OUTLINE_NOTCHED: 'mdc-notched-outline--notched'
+  OUTLINE_NOTCHED: 'mdc-notched-outline--notched',
+  OUTLINE_UPGRADED: 'mdc-notched-outline--upgraded',
+  NO_LABEL: 'mdc-notched-outline--no-label'
 };
 
-/** @enum {number} */
-var numbers = {
-  NOTCH_GUTTER_SIZE: 4,
-  MIN_LEADING_STROKE_EDGE_POSITION: 12
+
+
+/***/ }),
+
+/***/ 27:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_foundation__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__constants__ = __webpack_require__(28);
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
+ * @license
+ * Copyright 2016 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.
+ */
+
+
+
+
+
+/**
+ * @extends {MDCFoundation<!MDCFloatingLabelAdapter>}
+ * @final
+ */
+
+var MDCFloatingLabelFoundation = function (_MDCFoundation) {
+  _inherits(MDCFloatingLabelFoundation, _MDCFoundation);
+
+  _createClass(MDCFloatingLabelFoundation, null, [{
+    key: 'cssClasses',
+
+    /** @return enum {string} */
+    get: function get() {
+      return __WEBPACK_IMPORTED_MODULE_2__constants__["a" /* cssClasses */];
+    }
+
+    /**
+     * {@see MDCFloatingLabelAdapter} for typing information on parameters and return
+     * types.
+     * @return {!MDCFloatingLabelAdapter}
+     */
+
+  }, {
+    key: 'defaultAdapter',
+    get: function get() {
+      return (/** @type {!MDCFloatingLabelAdapter} */{
+          addClass: function addClass() {},
+          removeClass: function removeClass() {},
+          getWidth: function getWidth() {},
+          registerInteractionHandler: function registerInteractionHandler() {},
+          deregisterInteractionHandler: function deregisterInteractionHandler() {}
+        }
+      );
+    }
+
+    /**
+     * @param {!MDCFloatingLabelAdapter} adapter
+     */
+
+  }]);
+
+  function MDCFloatingLabelFoundation(adapter) {
+    _classCallCheck(this, MDCFloatingLabelFoundation);
+
+    /** @private {function(!Event): undefined} */
+    var _this = _possibleConstructorReturn(this, (MDCFloatingLabelFoundation.__proto__ || Object.getPrototypeOf(MDCFloatingLabelFoundation)).call(this, _extends(MDCFloatingLabelFoundation.defaultAdapter, adapter)));
+
+    _this.shakeAnimationEndHandler_ = function () {
+      return _this.handleShakeAnimationEnd_();
+    };
+    return _this;
+  }
+
+  _createClass(MDCFloatingLabelFoundation, [{
+    key: 'init',
+    value: function init() {
+      this.adapter_.registerInteractionHandler('animationend', this.shakeAnimationEndHandler_);
+    }
+  }, {
+    key: 'destroy',
+    value: function destroy() {
+      this.adapter_.deregisterInteractionHandler('animationend', this.shakeAnimationEndHandler_);
+    }
+
+    /**
+     * Returns the width of the label element.
+     * @return {number}
+     */
+
+  }, {
+    key: 'getWidth',
+    value: function getWidth() {
+      return this.adapter_.getWidth();
+    }
+
+    /**
+     * Styles the label to produce the label shake for errors.
+     * @param {boolean} shouldShake adds shake class if true,
+     * otherwise removes shake class.
+     */
+
+  }, {
+    key: 'shake',
+    value: function shake(shouldShake) {
+      var LABEL_SHAKE = MDCFloatingLabelFoundation.cssClasses.LABEL_SHAKE;
+
+      if (shouldShake) {
+        this.adapter_.addClass(LABEL_SHAKE);
+      } else {
+        this.adapter_.removeClass(LABEL_SHAKE);
+      }
+    }
+
+    /**
+     * Styles the label to float or dock.
+     * @param {boolean} shouldFloat adds float class if true, otherwise remove
+     * float and shake class to dock label.
+     */
+
+  }, {
+    key: 'float',
+    value: function float(shouldFloat) {
+      var _MDCFloatingLabelFoun = MDCFloatingLabelFoundation.cssClasses,
+          LABEL_FLOAT_ABOVE = _MDCFloatingLabelFoun.LABEL_FLOAT_ABOVE,
+          LABEL_SHAKE = _MDCFloatingLabelFoun.LABEL_SHAKE;
+
+      if (shouldFloat) {
+        this.adapter_.addClass(LABEL_FLOAT_ABOVE);
+      } else {
+        this.adapter_.removeClass(LABEL_FLOAT_ABOVE);
+        this.adapter_.removeClass(LABEL_SHAKE);
+      }
+    }
+
+    /**
+     * Handles an interaction event on the root element.
+     */
+
+  }, {
+    key: 'handleShakeAnimationEnd_',
+    value: function handleShakeAnimationEnd_() {
+      var LABEL_SHAKE = MDCFloatingLabelFoundation.cssClasses.LABEL_SHAKE;
+
+      this.adapter_.removeClass(LABEL_SHAKE);
+    }
+  }]);
+
+  return MDCFloatingLabelFoundation;
+}(__WEBPACK_IMPORTED_MODULE_0__material_base_foundation__["a" /* default */]);
+
+/* harmony default export */ __webpack_exports__["a"] = (MDCFloatingLabelFoundation);
+
+/***/ }),
+
+/***/ 28:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return cssClasses; });
+/**
+ * @license
+ * Copyright 2016 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.
+ */
+
+/** @enum {string} */
+var cssClasses = {
+  LABEL_FLOAT_ABOVE: 'mdc-floating-label--float-above',
+  LABEL_SHAKE: 'mdc-floating-label--shake',
+  ROOT: 'mdc-floating-label'
 };
@@ -550,6 +982,9 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_component__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(22);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(23);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation__ = __webpack_require__(37);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__constants__ = __webpack_require__(23);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__material_floating_label_index__ = __webpack_require__(17);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__constants__ = __webpack_require__(24);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCNotchedOutlineFoundation", function() { return __WEBPACK_IMPORTED_MODULE_2__foundation__["a"]; });
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -592,2 +1027,3 @@
 
+
 /**
@@ -601,11 +1037,48 @@ * @extends {MDCComponent<!MDCNotchedOutlineFoundation>}
 
+  _createClass(MDCNotchedOutline, null, [{
+    key: 'attachTo',
+
+    /**
+     * @param {!Element} root
+     * @return {!MDCNotchedOutline}
+     */
+    value: function attachTo(root) {
+      return new MDCNotchedOutline(root);
+    }
+    /** @param {...?} args */
+
+  }]);
+
   function MDCNotchedOutline() {
+    var _ref;
+
     _classCallCheck(this, MDCNotchedOutline);
 
-    return _possibleConstructorReturn(this, (MDCNotchedOutline.__proto__ || Object.getPrototypeOf(MDCNotchedOutline)).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    /** @private {Element} */
+    var _this = _possibleConstructorReturn(this, (_ref = MDCNotchedOutline.__proto__ || Object.getPrototypeOf(MDCNotchedOutline)).call.apply(_ref, [this].concat(args)));
+
+    _this.notchElement_;
+    return _this;
   }
 
   _createClass(MDCNotchedOutline, [{
-    key: 'notch',
+    key: 'initialSyncWithDOM',
+    value: function initialSyncWithDOM() {
+      var label = this.root_.querySelector('.' + __WEBPACK_IMPORTED_MODULE_3__material_floating_label_index__["MDCFloatingLabelFoundation"].cssClasses.ROOT);
+      this.notchElement_ = this.root_.querySelector(__WEBPACK_IMPORTED_MODULE_4__constants__["c" /* strings */].NOTCH_ELEMENT_SELECTOR);
 
+      if (label) {
+        label.style.transitionDuration = '0s';
+        this.root_.classList.add(__WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].OUTLINE_UPGRADED);
+        requestAnimationFrame(function () {
+          label.style.transitionDuration = '';
+        });
+      } else {
+        this.root_.classList.add(__WEBPACK_IMPORTED_MODULE_4__constants__["a" /* cssClasses */].NO_LABEL);
+      }
+    }
 
@@ -615,7 +1088,8 @@ /**
       * @param {number} notchWidth The notch width in the outline.
-      * @param {boolean=} isRtl Determines if outline is rtl. If rtl is true, notch
-      * will be right justified in outline path, otherwise left justified.
       */
-    value: function notch(notchWidth, isRtl) {
-      this.foundation_.notch(notchWidth, isRtl);
+
+  }, {
+    key: 'notch',
+    value: function notch(notchWidth) {
+      this.foundation_.notch(notchWidth);
     }
@@ -642,9 +1116,4 @@
 
-      return new __WEBPACK_IMPORTED_MODULE_2__foundation__["a" /* default */]({
-        getWidth: function getWidth() {
-          return _this2.root_.offsetWidth;
-        },
-        getHeight: function getHeight() {
-          return _this2.root_.offsetHeight;
-        },
+      return new __WEBPACK_IMPORTED_MODULE_2__foundation__["a" /* default */](
+      /** @type {!MDCNotchedOutlineAdapter} */_extends({
         addClass: function addClass(className) {
@@ -656,22 +1125,7 @@ return _this2.root_.classList.add(className);
         },
-        setOutlinePathAttr: function setOutlinePathAttr(value) {
-          var path = _this2.root_.querySelector(__WEBPACK_IMPORTED_MODULE_3__constants__["c" /* strings */].PATH_SELECTOR);
-          path.setAttribute('d', value);
-        },
-        getIdleOutlineStyleValue: function getIdleOutlineStyleValue(propertyName) {
-          var idleOutlineElement = _this2.root_.parentNode.querySelector(__WEBPACK_IMPORTED_MODULE_3__constants__["c" /* strings */].IDLE_OUTLINE_SELECTOR);
-          return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
+        setNotchWidthProperty: function setNotchWidthProperty(width) {
+          return _this2.notchElement_.style.setProperty('width', width > 0 ? width + 'px' : '0');
         }
-      });
+      }));
     }
-  }], [{
-    key: 'attachTo',
-
-    /**
-     * @param {!Element} root
-     * @return {!MDCNotchedOutline}
-     */
-    value: function attachTo(root) {
-      return new MDCNotchedOutline(root);
-    }
   }]);
@@ -691,4 +1145,4 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_foundation__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(22);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__constants__ = __webpack_require__(23);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(23);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__constants__ = __webpack_require__(24);
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -773,8 +1227,5 @@
       return (/** @type {!MDCNotchedOutlineAdapter} */{
-          getWidth: function getWidth() {},
-          getHeight: function getHeight() {},
           addClass: function addClass() {},
           removeClass: function removeClass() {},
-          setOutlinePathAttr: function setOutlinePathAttr() {},
-          getIdleOutlineStyleValue: function getIdleOutlineStyleValue() {}
+          setNotchWidthProperty: function setNotchWidthProperty() {}
         }
@@ -798,5 +1249,4 @@ );
    * Adds the outline notched selector and updates the notch width
-   * calculated based off of notchWidth and isRtl.
+   * calculated based off of notchWidth.
    * @param {number} notchWidth
-   * @param {boolean=} isRtl
    */
@@ -808,7 +1258,11 @@
     value: function notch(notchWidth) {
-      var isRtl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var OUTLINE_NOTCHED = MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED;
 
+
+      if (notchWidth > 0) {
+        notchWidth += __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* numbers */].NOTCH_ELEMENT_PADDING; // Add padding from left/right.
+      }
+
+      this.adapter_.setNotchWidthProperty(notchWidth);
       this.adapter_.addClass(OUTLINE_NOTCHED);
-      this.updateSvgPath_(notchWidth, isRtl);
     }
@@ -826,41 +1280,4 @@
       this.adapter_.removeClass(OUTLINE_NOTCHED);
+      this.adapter_.setNotchWidthProperty(0);
     }
-
-    /**
-     * Updates the SVG path of the focus outline element based on the notchWidth
-     * and the RTL context.
-     * @param {number} notchWidth
-     * @param {boolean=} isRtl
-     * @private
-     */
-
-  }, {
-    key: 'updateSvgPath_',
-    value: function updateSvgPath_(notchWidth, isRtl) {
-      // Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
-      var radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') || this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
-      var radius = parseFloat(radiusStyleValue);
-      var width = this.adapter_.getWidth();
-      var height = this.adapter_.getHeight();
-      var cornerWidth = radius + 1.2;
-      var leadingStrokeLength = Math.max(0, __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* numbers */].MIN_LEADING_STROKE_EDGE_POSITION - radius - 1.2);
-
-      // If the notchWidth is 0, the the notched outline doesn't need to add padding.
-      var paddedNotchWidth = 0;
-      if (notchWidth > 0) {
-        paddedNotchWidth = notchWidth + 2 * __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* numbers */].NOTCH_GUTTER_SIZE;
-      }
-
-      // The right, bottom, and left sides of the outline follow the same SVG path.
-      var pathMiddle = 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius + 'v' + (height - 2 * cornerWidth) + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius + 'h' + (-width + 2 * cornerWidth) + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius + 'v' + (-height + 2 * cornerWidth) + 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius;
-
-      var path = void 0;
-      if (!isRtl) {
-        path = 'M' + (cornerWidth + leadingStrokeLength + paddedNotchWidth) + ',' + 1 + 'h' + (width - 2 * cornerWidth - paddedNotchWidth - leadingStrokeLength) + pathMiddle + 'h' + leadingStrokeLength;
-      } else {
-        path = 'M' + (width - cornerWidth - leadingStrokeLength) + ',' + 1 + 'h' + leadingStrokeLength + pathMiddle + 'h' + (width - 2 * cornerWidth - paddedNotchWidth - leadingStrokeLength);
-      }
-
-      this.adapter_.setOutlinePathAttr(path);
-    }
   }]);
@@ -867,0 +1284,0 @@

dist/mdc.notchedOutline.min.js

@@ -6,3 +6,3 @@ /*!
 */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.notchedOutline=e():(t.mdc=t.mdc||{},t.mdc.notchedOutline=e())}(this,function(){return function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=36)}({0:function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),u=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(this,t),this.adapter_=e}return r(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),r(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.a=u},1:function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r=n(0),u=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),i=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;o(this,t),this.root_=e;for(var r=arguments.length,u=Array(r>2?r-2:0),i=2;i<r;i++)u[i-2]=arguments[i];this.initialize.apply(this,u),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return u(t,null,[{key:"attachTo",value:function(e){return new t(e,new r.a)}}]),u(t,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(t,e){this.root_.addEventListener(t,e)}},{key:"unlisten",value:function(t,e){this.root_.removeEventListener(t,e)}},{key:"emit",value:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=void 0;"function"==typeof CustomEvent?o=new CustomEvent(t,{detail:e,bubbles:n}):(o=document.createEvent("CustomEvent"),o.initCustomEvent(t,n,!1,e)),this.root_.dispatchEvent(o)}}]),t}();e.a=i},22:function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}();!function(){function t(){o(this,t)}r(t,[{key:"getWidth",value:function(){}},{key:"getHeight",value:function(){}},{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"setOutlinePathAttr",value:function(t){}},{key:"getIdleOutlineStyleValue",value:function(t){}}])}()},23:function(t,e,n){"use strict";n.d(e,"a",function(){return r}),n.d(e,"c",function(){return o}),n.d(e,"b",function(){return u});/**
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.notchedOutline=e():(t.mdc=t.mdc||{},t.mdc.notchedOutline=e())}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=36)}({0:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r(this,t),this.adapter_=e}return o(t,null,[{key:"cssClasses",get:function(){return{}}},{key:"strings",get:function(){return{}}},{key:"numbers",get:function(){return{}}},{key:"defaultAdapter",get:function(){return{}}}]),o(t,[{key:"init",value:function(){}},{key:"destroy",value:function(){}}]),t}();e.a=i},1:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var o=n(0),i=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),a=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0;r(this,t),this.root_=e;for(var o=arguments.length,i=Array(o>2?o-2:0),a=2;a<o;a++)i[a-2]=arguments[a];this.initialize.apply(this,i),this.foundation_=void 0===n?this.getDefaultFoundation():n,this.foundation_.init(),this.initialSyncWithDOM()}return i(t,null,[{key:"attachTo",value:function(e){return new t(e,new o.a)}}]),i(t,[{key:"initialize",value:function(){}},{key:"getDefaultFoundation",value:function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")}},{key:"initialSyncWithDOM",value:function(){}},{key:"destroy",value:function(){this.foundation_.destroy()}},{key:"listen",value:function(t,e){this.root_.addEventListener(t,e)}},{key:"unlisten",value:function(t,e){this.root_.removeEventListener(t,e)}},{key:"emit",value:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=void 0;"function"==typeof CustomEvent?r=new CustomEvent(t,{detail:e,bubbles:n}):(r=document.createEvent("CustomEvent"),r.initCustomEvent(t,n,!1,e)),this.root_.dispatchEvent(r)}}]),t}();e.a=a},14:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}();!function(){function t(){r(this,t)}o(t,[{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"getWidth",value:function(){}},{key:"registerInteractionHandler",value:function(t,e){}},{key:"deregisterInteractionHandler",value:function(t,e){}}])}()},17:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"MDCFloatingLabel",function(){return s});var a=n(1),u=(n(14),n(27));n.d(e,"MDCFloatingLabelFoundation",function(){return u.a});var c=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),s=function(t){function e(){return r(this,e),o(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return i(e,t),c(e,[{key:"shake",value:function(t){this.foundation_.shake(t)}},{key:"float",value:function(t){this.foundation_.float(t)}},{key:"getWidth",value:function(){return this.foundation_.getWidth()}},{key:"getDefaultFoundation",value:function(){var t=this;return new u.a({addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},getWidth:function(){return t.root_.offsetWidth},registerInteractionHandler:function(e,n){return t.root_.addEventListener(e,n)},deregisterInteractionHandler:function(e,n){return t.root_.removeEventListener(e,n)}})}}],[{key:"attachTo",value:function(t){return new e(t)}}]),e}(a.a)},23:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}();!function(){function t(){r(this,t)}o(t,[{key:"addClass",value:function(t){}},{key:"removeClass",value:function(t){}},{key:"setNotchWidthProperty",value:function(t){}}])}()},24:function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return o}),n.d(e,"c",function(){return r});/**
  * @license
@@ -29,3 +29,25 @@ * Copyright 2018 Google Inc.
  */
-var o={PATH_SELECTOR:".mdc-notched-outline__path",IDLE_OUTLINE_SELECTOR:".mdc-notched-outline__idle"},r={OUTLINE_NOTCHED:"mdc-notched-outline--notched"},u={NOTCH_GUTTER_SIZE:4,MIN_LEADING_STROKE_EDGE_POSITION:12}},36:function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"MDCNotchedOutline",function(){return f});var i=n(1),a=(n(22),n(37)),c=n(23);n.d(e,"MDCNotchedOutlineFoundation",function(){return a.a});var l=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),f=function(t){function e(){return o(this,e),r(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return u(e,t),l(e,[{key:"notch",value:function(t,e){this.foundation_.notch(t,e)}},{key:"closeNotch",value:function(){this.foundation_.closeNotch()}},{key:"getDefaultFoundation",value:function(){var t=this;return new a.a({getWidth:function(){return t.root_.offsetWidth},getHeight:function(){return t.root_.offsetHeight},addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},setOutlinePathAttr:function(e){t.root_.querySelector(c.c.PATH_SELECTOR).setAttribute("d",e)},getIdleOutlineStyleValue:function(e){var n=t.root_.parentNode.querySelector(c.c.IDLE_OUTLINE_SELECTOR);return window.getComputedStyle(n).getPropertyValue(e)}})}}],[{key:"attachTo",value:function(t){return new e(t)}}]),e}(i.a)},37:function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var i=n(0),a=(n(22),n(23)),c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},l=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),f=function(t){function e(t){return o(this,e),r(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,c(e.defaultAdapter,t)))}return u(e,t),l(e,null,[{key:"strings",get:function(){return a.c}},{key:"cssClasses",get:function(){return a.a}},{key:"numbers",get:function(){return a.b}},{key:"defaultAdapter",get:function(){return{getWidth:function(){},getHeight:function(){},addClass:function(){},removeClass:function(){},setOutlinePathAttr:function(){},getIdleOutlineStyleValue:function(){}}}}]),l(e,[{key:"notch",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=e.cssClasses.OUTLINE_NOTCHED;this.adapter_.addClass(o),this.updateSvgPath_(t,n)}},{key:"closeNotch",value:function(){var t=e.cssClasses.OUTLINE_NOTCHED;this.adapter_.removeClass(t)}},{key:"updateSvgPath_",value:function(t,e){var n=this.adapter_.getIdleOutlineStyleValue("border-radius")||this.adapter_.getIdleOutlineStyleValue("border-top-left-radius"),o=parseFloat(n),r=this.adapter_.getWidth(),u=this.adapter_.getHeight(),i=o+1.2,c=Math.max(0,a.b.MIN_LEADING_STROKE_EDGE_POSITION-o-1.2),l=0;t>0&&(l=t+2*a.b.NOTCH_GUTTER_SIZE);var f="a"+o+","+o+" 0 0 1 "+o+","+o+"v"+(u-2*i)+"a"+o+","+o+" 0 0 1 "+-o+","+o+"h"+(2*i-r)+"a"+o+","+o+" 0 0 1 "+-o+","+-o+"v"+(2*i-u)+"a"+o+","+o+" 0 0 1 "+o+","+-o,s=void 0;s=e?"M"+(r-i-c)+",1h"+c+f+"h"+(r-2*i-l-c):"M"+(i+c+l)+",1h"+(r-2*i-l-c)+f+"h"+c,this.adapter_.setOutlinePathAttr(s)}}]),e}(i.a);e.a=f}})});
+var r={NOTCH_ELEMENT_SELECTOR:".mdc-notched-outline__notch"},o={NOTCH_ELEMENT_PADDING:8},i={OUTLINE_NOTCHED:"mdc-notched-outline--notched",OUTLINE_UPGRADED:"mdc-notched-outline--upgraded",NO_LABEL:"mdc-notched-outline--no-label"}},27:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var a=n(0),u=(n(14),n(28)),c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},s=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),l=function(t){function e(t){r(this,e);var n=o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,c(e.defaultAdapter,t)));return n.shakeAnimationEndHandler_=function(){return n.handleShakeAnimationEnd_()},n}return i(e,t),s(e,null,[{key:"cssClasses",get:function(){return u.a}},{key:"defaultAdapter",get:function(){return{addClass:function(){},removeClass:function(){},getWidth:function(){},registerInteractionHandler:function(){},deregisterInteractionHandler:function(){}}}}]),s(e,[{key:"init",value:function(){this.adapter_.registerInteractionHandler("animationend",this.shakeAnimationEndHandler_)}},{key:"destroy",value:function(){this.adapter_.deregisterInteractionHandler("animationend",this.shakeAnimationEndHandler_)}},{key:"getWidth",value:function(){return this.adapter_.getWidth()}},{key:"shake",value:function(t){var n=e.cssClasses.LABEL_SHAKE;t?this.adapter_.addClass(n):this.adapter_.removeClass(n)}},{key:"float",value:function(t){var n=e.cssClasses,r=n.LABEL_FLOAT_ABOVE,o=n.LABEL_SHAKE;t?this.adapter_.addClass(r):(this.adapter_.removeClass(r),this.adapter_.removeClass(o))}},{key:"handleShakeAnimationEnd_",value:function(){var t=e.cssClasses.LABEL_SHAKE;this.adapter_.removeClass(t)}}]),e}(a.a);e.a=l},28:function(t,e,n){"use strict";n.d(e,"a",function(){return r});/**
+ * @license
+ * Copyright 2016 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.
+ */
+var r={LABEL_FLOAT_ABOVE:"mdc-floating-label--float-above",LABEL_SHAKE:"mdc-floating-label--shake",ROOT:"mdc-floating-label"}},36:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"MDCNotchedOutline",function(){return d});var a=n(1),u=(n(23),n(37)),c=n(17),s=n(24);n.d(e,"MDCNotchedOutlineFoundation",function(){return u.a});var l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},f=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),d=function(t){function e(){var t;r(this,e);for(var n=arguments.length,i=Array(n),a=0;a<n;a++)i[a]=arguments[a];var u=o(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(i)));return u.notchElement_,u}return i(e,t),f(e,null,[{key:"attachTo",value:function(t){return new e(t)}}]),f(e,[{key:"initialSyncWithDOM",value:function(){var t=this.root_.querySelector("."+c.MDCFloatingLabelFoundation.cssClasses.ROOT);this.notchElement_=this.root_.querySelector(s.c.NOTCH_ELEMENT_SELECTOR),t?(t.style.transitionDuration="0s",this.root_.classList.add(s.a.OUTLINE_UPGRADED),requestAnimationFrame(function(){t.style.transitionDuration=""})):this.root_.classList.add(s.a.NO_LABEL)}},{key:"notch",value:function(t){this.foundation_.notch(t)}},{key:"closeNotch",value:function(){this.foundation_.closeNotch()}},{key:"getDefaultFoundation",value:function(){var t=this;return new u.a(l({addClass:function(e){return t.root_.classList.add(e)},removeClass:function(e){return t.root_.classList.remove(e)},setNotchWidthProperty:function(e){return t.notchElement_.style.setProperty("width",e>0?e+"px":"0")}}))}}]),e}(a.a)},37:function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var a=n(0),u=(n(23),n(24)),c=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},s=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),l=function(t){function e(t){return r(this,e),o(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,c(e.defaultAdapter,t)))}return i(e,t),s(e,null,[{key:"strings",get:function(){return u.c}},{key:"cssClasses",get:function(){return u.a}},{key:"numbers",get:function(){return u.b}},{key:"defaultAdapter",get:function(){return{addClass:function(){},removeClass:function(){},setNotchWidthProperty:function(){}}}}]),s(e,[{key:"notch",value:function(t){var n=e.cssClasses.OUTLINE_NOTCHED;t>0&&(t+=u.b.NOTCH_ELEMENT_PADDING),this.adapter_.setNotchWidthProperty(t),this.adapter_.addClass(n)}},{key:"closeNotch",value:function(){var t=e.cssClasses.OUTLINE_NOTCHED;this.adapter_.removeClass(t),this.adapter_.setNotchWidthProperty(0)}}]),e}(a.a);e.a=l}})});
 //# sourceMappingURL=mdc.notchedOutline.min.js.map

foundation.js

@@ -55,8 +55,5 @@ /**
     return /** @type {!MDCNotchedOutlineAdapter} */ ({
-      getWidth: () => {},
-      getHeight: () => {},
       addClass: () => {},
       removeClass: () => {},
-      setOutlinePathAttr: () => {},
-      getIdleOutlineStyleValue: () => {},
+      setNotchWidthProperty: () => {},
     });
@@ -74,10 +71,14 @@ }
    * Adds the outline notched selector and updates the notch width
-   * calculated based off of notchWidth and isRtl.
+   * calculated based off of notchWidth.
    * @param {number} notchWidth
-   * @param {boolean=} isRtl
    */
-  notch(notchWidth, isRtl = false) {
+  notch(notchWidth) {
     const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
+
+    if (notchWidth > 0) {
+      notchWidth += numbers.NOTCH_ELEMENT_PADDING; // Add padding from left/right.
+    }
+
+    this.adapter_.setNotchWidthProperty(notchWidth);
     this.adapter_.addClass(OUTLINE_NOTCHED);
-    this.updateSvgPath_(notchWidth, isRtl);
   }
@@ -91,53 +92,6 @@
     this.adapter_.removeClass(OUTLINE_NOTCHED);
+    this.adapter_.setNotchWidthProperty(0);
   }
-
-  /**
-   * Updates the SVG path of the focus outline element based on the notchWidth
-   * and the RTL context.
-   * @param {number} notchWidth
-   * @param {boolean=} isRtl
-   * @private
-   */
-  updateSvgPath_(notchWidth, isRtl) {
-    // Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
-    const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||
-        this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
-    const radius = parseFloat(radiusStyleValue);
-    const width = this.adapter_.getWidth();
-    const height = this.adapter_.getHeight();
-    const cornerWidth = radius + 1.2;
-    const leadingStrokeLength = Math.max(0, numbers.MIN_LEADING_STROKE_EDGE_POSITION - radius - 1.2);
-
-    // If the notchWidth is 0, the the notched outline doesn't need to add padding.
-    let paddedNotchWidth = 0;
-    if (notchWidth > 0) {
-      paddedNotchWidth = notchWidth + 2 * numbers.NOTCH_GUTTER_SIZE;
-    }
-
-    // The right, bottom, and left sides of the outline follow the same SVG path.
-    const pathMiddle = 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius
-      + 'v' + (height - (2 * cornerWidth))
-      + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius
-      + 'h' + (-width + (2 * cornerWidth))
-      + 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius
-      + 'v' + (-height + (2 * cornerWidth))
-      + 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius;
-
-    let path;
-    if (!isRtl) {
-      path = 'M' + (cornerWidth + leadingStrokeLength + paddedNotchWidth) + ',' + 1
-        + 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength)
-        + pathMiddle
-        + 'h' + leadingStrokeLength;
-    } else {
-      path = 'M' + (width - cornerWidth - leadingStrokeLength) + ',' + 1
-        + 'h' + leadingStrokeLength
-        + pathMiddle
-        + 'h' + (width - (2 * cornerWidth) - paddedNotchWidth - leadingStrokeLength);
-    }
-
-    this.adapter_.setOutlinePathAttr(path);
-  }
 }
 
 export default MDCNotchedOutlineFoundation;

index.js

@@ -28,3 +28,4 @@ /**
 import MDCNotchedOutlineFoundation from './foundation';
-import {strings} from './constants';
+import {MDCFloatingLabelFoundation} from '@material/floating-label/index';
+import {cssClasses, strings} from './constants';
 
@@ -43,11 +44,30 @@ /**
   }
+  /** @param {...?} args */
+  constructor(...args) {
+    super(...args);
+    /** @private {Element} */
+    this.notchElement_;
+  }
 
+  initialSyncWithDOM() {
+    const label = this.root_.querySelector('.' + MDCFloatingLabelFoundation.cssClasses.ROOT);
+    this.notchElement_ = this.root_.querySelector(strings.NOTCH_ELEMENT_SELECTOR);
+
+    if (label) {
+      label.style.transitionDuration = '0s';
+      this.root_.classList.add(cssClasses.OUTLINE_UPGRADED);
+      requestAnimationFrame(() => {
+        label.style.transitionDuration = '';
+      });
+    } else {
+      this.root_.classList.add(cssClasses.NO_LABEL);
+    }
+  }
+
   /**
     * Updates outline selectors and SVG path to open notch.
     * @param {number} notchWidth The notch width in the outline.
-    * @param {boolean=} isRtl Determines if outline is rtl. If rtl is true, notch
-    * will be right justified in outline path, otherwise left justified.
     */
-  notch(notchWidth, isRtl) {
-    this.foundation_.notch(notchWidth, isRtl);
+  notch(notchWidth) {
+    this.foundation_.notch(notchWidth);
   }
@@ -66,16 +86,8 @@
   getDefaultFoundation() {
-    return new MDCNotchedOutlineFoundation({
-      getWidth: () => this.root_.offsetWidth,
-      getHeight: () => this.root_.offsetHeight,
-      addClass: (className) => this.root_.classList.add(className),
-      removeClass: (className) => this.root_.classList.remove(className),
-      setOutlinePathAttr: (value) => {
-        const path = this.root_.querySelector(strings.PATH_SELECTOR);
-        path.setAttribute('d', value);
-      },
-      getIdleOutlineStyleValue: (propertyName) => {
-        const idleOutlineElement = this.root_.parentNode.querySelector(strings.IDLE_OUTLINE_SELECTOR);
-        return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
-      },
-    });
+    return new MDCNotchedOutlineFoundation(
+      /** @type {!MDCNotchedOutlineAdapter} */ (Object.assign({
+        addClass: (className) => this.root_.classList.add(className),
+        removeClass: (className) => this.root_.classList.remove(className),
+        setNotchWidthProperty: (width) => this.notchElement_.style.setProperty('width', width > 0 ? width + 'px' : '0'),
+      })));
   }
@@ -82,0 +94,0 @@ }

package.json

 {
   "name": "@material/notched-outline",
   "description": "The Material Components for the web notched-outline component",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "license": "MIT",
@@ -23,6 +23,7 @@ "keywords": [
     "@material/base": "^0.41.0",
-    "@material/rtl": "^0.40.1",
-    "@material/shape": "^0.41.0",
+    "@material/floating-label": "^0.42.0",
+    "@material/rtl": "^0.42.0",
+    "@material/shape": "^0.42.0",
     "@material/theme": "^0.41.0"
   }
 }

README.md

@@ -37,11 +37,17 @@ <!--docs:
 <div class="mdc-notched-outline">
-  <svg>
-    <path class="mdc-notched-outline__path"/>
-  </svg>
+  <div class="mdc-notched-outline__leading"></div>
+  <div class="mdc-notched-outline__notch">
+    <label class="mdc-floating-label">Label</label>
+  </div>
+  <div class="mdc-notched-outline__trailing"></div>
 </div>
-<div class="mdc-notched-outline__idle"></div>
 ```
 
-> For usage within a text field see [here](../mdc-textfield/README.md#outlined).
+> Note that the [MDC Floating Label](../mdc-floating-label/README.md) component is placed inside the notch element when
+> used together with MDC Notched Outline.
 
+> See the [MDC Text Field](../mdc-textfield/README.md#outlined) and
+> [MDC Select](../mdc-select/README.md#outlined-select) documentation for
+> information on using Notched Outline in the context of those components.
+
 ### Styles
@@ -71,4 +77,5 @@
 `mdc-notched-outline--notched` | Class to open notch outline.
-`mdc-notched-outline__path` | Mandatory. The path of the SVG of the notched outline.
-`mdc-notched-outline__idle` | Mandatory. The full outline when the notch is hidden.
+`mdc-notched-outline__leading` | Mandatory. Element representing the leading side of the notched outline (before the notch).
+`mdc-notched-outline__notch` | Mandatory. Element representing the notch.
+`mdc-notched-outline__trailing` | Mandatory. Element representing the trailing side of the notched outline (after the notch).
 
@@ -80,42 +87,6 @@ ### Sass Mixins
 `mdc-notched-outline-color($color)` | Customizes the border color of the notched outlined.
-`mdc-notched-outline-idle-color($color)` | Customizes the border color of the idle outline.
 `mdc-notched-outline-stroke-width($width)` | Changes notched outline width to a specified pixel value.
 `mdc-notched-outline-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
-`mdc-notched-outline-idle-shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to notched outline element in idle state with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
+`mdc-notched-outline-floating-label-float-position($positionY, $positionX, $scale)` | Sets the position and scale of the floating label inside the notched outline.
 
-
-### Sass Functions
-
-Function | Description
---- | ---
-`mdc-notched-outline-get-notch-padded-position($cornerSize)` | Returns the notch padded position based on given radius. This is 'x' position where the floating label starts.
-
-#### Calling Mixins with Parent Selectors
-
-Because notched-outline has sibling elements, you need to call the "idle" Sass mixins with parent selectors.
-Consider the following example HTML:
-
-```html
-<div class="foo__parent">
-  <div class="mdc-notched-outline foo__child">
-    <svg>
-      <path class="mdc-notched-outline__path"/>
-    </svg>
-  </div>
-  <div class="mdc-notched-outline__idle"></div>
-</div>
-```
-In order to customize any "non-idle" part of notched-outline, use the .foo__child CSS selector:
-```scss
-.foo__child {
-  @include mdc-notched-outline-color($fooColor);
-}
-```
-But in order to customize any "idle" part of the notched-outline, you must use the .foo__parent CSS selector:
-```scss
-.foo__parent {
-  @include mdc-notched-outline-idle-color($fooColor);
-}
-```
-
 ## `MDCNotchedOutline` Properties and Methods
@@ -125,3 +96,3 @@
 --- | ---
-`notch(notchWidth: number, isRtl: boolean) => void` | Updates notched outline to open notch in outline path.
+`notch(notchWidth: number) => void` | Updates notched outline to open notch in outline path.
 `closeNotch() => void` | Updates the notched outline to close notch in outline path.
@@ -137,8 +108,5 @@
 --- | ---
-`getWidth() => number` | Returns the width of the notched outline element.
-`getHeight() => number` | Returns the height of the notched outline element.
 `addClass(className: string) => void` | Adds a class to the notched outline element.
 `removeClass(className: string) => void` | Removes a class from the notched outline element.
-`setOutlinePathAttr(value: string) => void` | Sets the "d" attribute of the notched outline element's SVG path.
-`getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of a given css `propertyName`.
+`setNotchWidthProperty(width: number) => void` | Sets the width of the notch in pixels.
 
@@ -149,4 +117,3 @@ ### `MDCNotchedOutlineFoundation`
 --- | ---
-`notch(notchWidth: number, isRtl: boolean) => void` | Adds the `mdc-notched-outline--notched` selector and updates the notched outline path based off notchWidth and isRtl.
+`notch(notchWidth: number) => void` | Adds the `mdc-notched-outline--notched` selector and updates the notched outline path based off notchWidth and isRtl.
 `closeNotch() => void` | Removes the outline notched selector.
-`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90972

increased by26.43%

Lines of code

1489

increased by32.59%

Worsened metrics

Dependency count

6

increased by20%

Number of package files

13

decreased by-7.14%

Number of lines in readme file

114

decreased by-22.45%

Dependency changes

• + Added@material/floating-label@^0.42.0

• + Added@material/floating-label@0.42.0(transitive)

• + Added@material/rtl@0.42.0(transitive)

• + Added@material/shape@0.42.0(transitive)

• + Added@material/typography@0.42.0(transitive)

• - Removed@material/rtl@0.40.1(transitive)

• - Removed@material/shape@0.41.0(transitive)

• Updated@material/rtl@^0.42.0

• Updated@material/shape@^0.42.0