@material/notched-outline - npm Package Compare versions

Comparing version 0.35.0 to 0.37.1

dist/mdc.notchedOutline.js

@@ -78,3 +78,3 @@ /*!
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 25);
+/******/ 	return __webpack_require__(__webpack_require__.s = 20);
 /******/ })
@@ -361,3 +361,3 @@ /************************************************************************/
 
-/***/ 18:
+/***/ 12:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -468,3 +468,3 @@
 
-/***/ 19:
+/***/ 13:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -507,3 +507,3 @@
 
-/***/ 25:
+/***/ 20:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -515,5 +515,5 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_component__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(18);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation__ = __webpack_require__(26);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__constants__ = __webpack_require__(19);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(12);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation__ = __webpack_require__(21);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__constants__ = __webpack_require__(13);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "MDCNotchedOutlineFoundation", function() { return __WEBPACK_IMPORTED_MODULE_2__foundation__["a"]; });
@@ -640,3 +640,3 @@ 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; }; }();
 
-/***/ 26:
+/***/ 21:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -646,4 +646,4 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_foundation__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(18);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__constants__ = __webpack_require__(19);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(12);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__constants__ = __webpack_require__(13);
 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; };
@@ -650,0 +650,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=25)}({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}}(),i=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=i},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),i=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(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,i=Array(r>2?r-2:0),u=2;u<r;u++)i[u-2]=arguments[u];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 r.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],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=u},18: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){}}])}()},19:function(t,e,n){"use strict";n.d(e,"a",function(){return r}),n.d(e,"b",function(){return o});/**
+!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=20)}({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}}(),i=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=i},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),i=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(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,i=Array(r>2?r-2:0),u=2;u<r;u++)i[u-2]=arguments[u];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 r.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],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=u},12: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){}}])}()},13:function(t,e,n){"use strict";n.d(e,"a",function(){return r}),n.d(e,"b",function(){return o});/**
  * @license
@@ -23,3 +23,3 @@ * Copyright 2018 Google Inc. All Rights Reserved.
  */
-var o={PATH_SELECTOR:".mdc-notched-outline__path",IDLE_OUTLINE_SELECTOR:".mdc-notched-outline__idle"},r={OUTLINE_NOTCHED:"mdc-notched-outline--notched"}},25: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 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 f});var u=n(1),a=(n(18),n(26)),c=n(19);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 i(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.b.PATH_SELECTOR).setAttribute("d",e)},getIdleOutlineStyleValue:function(e){var n=t.root_.parentNode.querySelector(c.b.IDLE_OUTLINE_SELECTOR);return window.getComputedStyle(n).getPropertyValue(e)}})}}],[{key:"attachTo",value:function(t){return new e(t)}}]),e}(u.a)},26: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 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 u=n(0),a=(n(18),n(19)),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 i(e,t),l(e,null,[{key:"strings",get:function(){return a.b}},{key:"cssClasses",get:function(){return a.a}},{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(),i=this.adapter_.getHeight(),u=o+1.2,a=Math.abs(11-u),c=t+8,l="a"+o+","+o+" 0 0 1 "+o+","+o+"v"+(i-2*u)+"a"+o+","+o+" 0 0 1 "+-o+","+o+"h"+(2*u-r)+"a"+o+","+o+" 0 0 1 "+-o+","+-o+"v"+(2*u-i)+"a"+o+","+o+" 0 0 1 "+o+","+-o,f=void 0;f=e?"M"+(r-u-a)+",1h"+a+l+"h"+(r-2*u-c-a):"M"+(u+a+c)+",1h"+(r-2*u-c-a)+l+"h"+a,this.adapter_.setOutlinePathAttr(f)}}]),e}(u.a);e.a=f}})});
+var o={PATH_SELECTOR:".mdc-notched-outline__path",IDLE_OUTLINE_SELECTOR:".mdc-notched-outline__idle"},r={OUTLINE_NOTCHED:"mdc-notched-outline--notched"}},20: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 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 f});var u=n(1),a=(n(12),n(21)),c=n(13);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 i(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.b.PATH_SELECTOR).setAttribute("d",e)},getIdleOutlineStyleValue:function(e){var n=t.root_.parentNode.querySelector(c.b.IDLE_OUTLINE_SELECTOR);return window.getComputedStyle(n).getPropertyValue(e)}})}}],[{key:"attachTo",value:function(t){return new e(t)}}]),e}(u.a)},21: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 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 u=n(0),a=(n(12),n(13)),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 i(e,t),l(e,null,[{key:"strings",get:function(){return a.b}},{key:"cssClasses",get:function(){return a.a}},{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(),i=this.adapter_.getHeight(),u=o+1.2,a=Math.abs(11-u),c=t+8,l="a"+o+","+o+" 0 0 1 "+o+","+o+"v"+(i-2*u)+"a"+o+","+o+" 0 0 1 "+-o+","+o+"h"+(2*u-r)+"a"+o+","+o+" 0 0 1 "+-o+","+-o+"v"+(2*u-i)+"a"+o+","+o+" 0 0 1 "+o+","+-o,f=void 0;f=e?"M"+(r-u-a)+",1h"+a+l+"h"+(r-2*u-c-a):"M"+(u+a+c)+",1h"+(r-2*u-c-a)+l+"h"+a,this.adapter_.setOutlinePathAttr(f)}}]),e}(u.a);e.a=f}})});
 //# sourceMappingURL=mdc.notchedOutline.min.js.map

package.json

 {
   "name": "@material/notched-outline",
   "description": "The Material Components for the web notched-outline component",
-  "version": "0.35.0",
+  "version": "0.37.1",
   "license": "Apache-2.0",
@@ -6,0 +6,0 @@ "keywords": [

README.md

@@ -5,3 +5,3 @@ <!--docs:
 section: components
-excerpt: "The notched outline is a border around either a text field or select element"
+excerpt: "The notched outline is a border around either a Text Field or Select element"
 iconId: text_field
@@ -13,3 +13,3 @@ path: /catalog/input-controls/notched-outline/
 
-The outline is a border around all sides of either a text field or select component. This is used for the Outlined variant of either a Text Field or Select.
+The notched outline is a border around all sides of either a Text Field or Select component. This is used for the Outlined variant of either a Text Field or Select.
 
@@ -20,7 +20,10 @@ ## Design & API Documentation
   <li class="icon-list-item icon-list-item--spec">
-    <a href="https://material.io/guidelines/components/text-fields.html#text-fields-field-variations">Material Design guidelines: Text Field Variations</a>
+    <a href="https://material.io/go/design-text-fields#text-fields-field-variations">Material Design guidelines: Text Field Variations</a>
   </li>
+  <li class="icon-list-item icon-list-item--spec">
+    <a href="https://material-components.github.io/material-components-web-catalog/#/component/text-field">Demo with Notched Outline on Text Field</a>
+  </li>
 </ul>
 
-## Usage
+## Basic Usage
 
@@ -38,4 +41,22 @@ ### HTML Structure
 
-> For usage within a text field see [here](../mdc-textfield/README.md#outlined/).
+> For usage within a text field see [here](../mdc-textfield/README.md#outlined).
 
+### Styles
+
+```scss
+@import "@material/notched-outline/mdc-notched-outline";
+```
+
+### JavaScript Instantiation
+
+```js
+import {MDCNotchedOutline} from '@material/notched-outline';
+
+const notchedOutline = new MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));
+```
+
+> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.
+
+## Style Customization
+
 ### CSS Classes
@@ -60,36 +81,41 @@
 
-> NOTE:
-> 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-line-ripple-parent">
->   <div class="mdc-notched-outline foo-line-ripple">
->     <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-line-ripple CSS selector:
-> ```scss
-> .foo-line-ripple {
->   @include mdc-notched-outline-color($fooColor);
-> }
-> ```
-> But in order to customize any "idle" part of the notched-outline, you must use the .foo-line-ripple-parent CSS selector:
-> ```scss
-> .foo-line-ripple-parent {
->   @include mdc-notched-outline-idle-color($fooColor);
-> }
-> ```
+#### Calling Mixins with Parent Selectors
 
-### `MDCNotchedOutline`
+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
+
 Method Signature | Description
 --- | ---
-`notch(notchWidth: number, isRtl: boolean) => void` | Updates outline to open notch in outline path.
-`closeNotch() => void` | Updates the outline to close notch in outline path.
+`notch(notchWidth: number, isRtl: boolean) => void` | Updates notched outline to open notch in outline path.
+`closeNotch() => void` | Updates the notched outline to close notch in outline path.
 
+## Usage Within Frameworks
+
+If you are using a JavaScript framework, such as React or Angular, you can create a Notched Outline for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).
+
 ### `MDCNotchedOutlineAdapter`
@@ -99,7 +125,7 @@
 --- | ---
-`getWidth() => number` | Returns the width of the outline element.
-`getHeight() => number` | Returns the height of the outline element.
+`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 outline element's SVG path.
+`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`.
@@ -111,4 +137,4 @@
 --- | ---
-`notch(notchWidth: number, isRtl: boolean) => void` | Adds the outline notched selector and updates the notched outline path based off notchWidth and isRtl.
+`notch(notchWidth: number, isRtl: boolean) => 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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60753

increased by1.47%

Number of lines in readme file

134

increased by24.07%

No dependency changes