@material/notched-outline - npm Package Compare versions

Comparing version 0.33.0 to 0.34.0

adapter.js

@@ -44,2 +44,14 @@ /**
   /**
+   * Adds a class to the root element.
+   * @param {string} className
+   */
+  addClass(className) {}
+
+  /**
+   * Removes a class from the root element.
+   * @param {string} className
+   */
+  removeClass(className) {}
+
+  /**
    * Sets the "d" attribute of the outline element's SVG path.
@@ -46,0 +58,0 @@ * @param {string} value

constants.js

@@ -24,2 +24,7 @@ /**
 
-export {strings};
+/** @enum {string} */
+const cssClasses = {
+  OUTLINE_NOTCHED: 'mdc-notched-outline--notched',
+};
+
+export {cssClasses, strings};

dist/mdc.notchedOutline.js

@@ -78,3 +78,3 @@ /*!
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 29);
+/******/ 	return __webpack_require__(__webpack_require__.s = 24);
 /******/ })
@@ -361,3 +361,3 @@ /************************************************************************/
 
-/***/ 13:
+/***/ 12:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -423,2 +423,20 @@
     /**
+     * Adds a class to the root element.
+     * @param {string} className
+     */
+
+  }, {
+    key: "addClass",
+    value: function addClass(className) {}
+
+    /**
+     * Removes a class from the root element.
+     * @param {string} className
+     */
+
+  }, {
+    key: "removeClass",
+    value: function removeClass(className) {}
+
+    /**
      * Sets the "d" attribute of the outline element's SVG path.
@@ -451,7 +469,8 @@ * @param {string} value
 
-/***/ 14:
+/***/ 13:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return strings; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return cssClasses; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return strings; });
 /**
@@ -480,7 +499,12 @@ * @license
 
+/** @enum {string} */
+var cssClasses = {
+  OUTLINE_NOTCHED: 'mdc-notched-outline--notched'
+};
 
 
+
 /***/ }),
 
-/***/ 19:
+/***/ 17:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -490,4 +514,4 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_foundation__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__constants__ = __webpack_require__(14);
+/* 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; };
@@ -537,5 +561,13 @@
     get: function get() {
-      return __WEBPACK_IMPORTED_MODULE_2__constants__["a" /* strings */];
+      return __WEBPACK_IMPORTED_MODULE_2__constants__["b" /* strings */];
     }
 
+    /** @return enum {string} */
+
+  }, {
+    key: 'cssClasses',
+    get: function get() {
+      return __WEBPACK_IMPORTED_MODULE_2__constants__["a" /* cssClasses */];
+    }
+
     /**
@@ -553,2 +585,4 @@ * {@see MDCNotchedOutlineAdapter} for typing information on parameters and return
           getHeight: function getHeight() {},
+          addClass: function addClass() {},
+          removeClass: function removeClass() {},
           setOutlinePathAttr: function setOutlinePathAttr() {},
@@ -573,4 +607,4 @@ getIdleOutlineStyleValue: function getIdleOutlineStyleValue() {}
   /**
-   * Updates the SVG path of the focus outline element based on the notchWidth
-   * and the RTL context.
+   * Adds the outline notched selector and updates the notch width
+   * calculated based off of notchWidth and isRtl.
    * @param {number} notchWidth
@@ -582,6 +616,34 @@ * @param {boolean=} isRtl
   _createClass(MDCNotchedOutlineFoundation, [{
-    key: 'updateSvgPath',
-    value: function updateSvgPath(notchWidth) {
+    key: 'notch',
+    value: function notch(notchWidth) {
       var isRtl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var OUTLINE_NOTCHED = MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED;
 
+      this.adapter_.addClass(OUTLINE_NOTCHED);
+      this.updateSvgPath_(notchWidth, isRtl);
+    }
+
+    /**
+     * Removes notched outline selector to close the notch in the outline.
+     */
+
+  }, {
+    key: 'closeNotch',
+    value: function closeNotch() {
+      var OUTLINE_NOTCHED = MDCNotchedOutlineFoundation.cssClasses.OUTLINE_NOTCHED;
+
+      this.adapter_.removeClass(OUTLINE_NOTCHED);
+    }
+
+    /**
+     * 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.
@@ -617,3 +679,3 @@ var radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') || this.adapter_.getIdleOutlineStyleValue('border-top-left-radius');
 
-/***/ 29:
+/***/ 24:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -625,5 +687,5 @@
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__material_base_component__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation__ = __webpack_require__(19);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__constants__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__adapter__ = __webpack_require__(12);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__foundation__ = __webpack_require__(17);
+/* 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"]; });
@@ -676,8 +738,7 @@ 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; }; }();
   _createClass(MDCNotchedOutline, [{
-    key: 'updateSvgPath',
+    key: 'notch',
 
 
     /**
-      * Updates the SVG path of the outline element based on the
-      * notch element width and the RTL context.
+      * Updates outline selectors and SVG path to open notch.
       * @param {number} notchWidth The notch width in the outline.
@@ -687,7 +748,17 @@ * @param {boolean=} isRtl Determines if outline is rtl. If rtl is true, notch
       */
-    value: function updateSvgPath(notchWidth, isRtl) {
-      this.foundation_.updateSvgPath(notchWidth, isRtl);
+    value: function notch(notchWidth, isRtl) {
+      this.foundation_.notch(notchWidth, isRtl);
     }
 
     /**
+     * Updates the outline selectors to close notch and return it to idle state.
+     */
+
+  }, {
+    key: 'closeNotch',
+    value: function closeNotch() {
+      this.foundation_.closeNotch();
+    }
+
+    /**
      * @return {!MDCNotchedOutlineFoundation}
@@ -708,8 +779,14 @@ */
         },
+        addClass: function addClass(className) {
+          return _this2.root_.classList.add(className);
+        },
+        removeClass: function removeClass(className) {
+          return _this2.root_.classList.remove(className);
+        },
         setOutlinePathAttr: function setOutlinePathAttr(value) {
-          var path = _this2.root_.querySelector(__WEBPACK_IMPORTED_MODULE_3__constants__["a" /* strings */].PATH_SELECTOR);
+          var path = _this2.root_.querySelector(__WEBPACK_IMPORTED_MODULE_3__constants__["b" /* strings */].PATH_SELECTOR);
           path.setAttribute('d', value);
         },
         getIdleOutlineStyleValue: function getIdleOutlineStyleValue(propertyName) {
-          var idleOutlineElement = _this2.root_.parentNode.querySelector(__WEBPACK_IMPORTED_MODULE_3__constants__["a" /* strings */].IDLE_OUTLINE_SELECTOR);
+          var idleOutlineElement = _this2.root_.parentNode.querySelector(__WEBPACK_IMPORTED_MODULE_3__constants__["b" /* strings */].IDLE_OUTLINE_SELECTOR);
           return window.getComputedStyle(idleOutlineElement).getPropertyValue(propertyName);
@@ -716,0 +793,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=29)}({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},13: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:"setOutlinePathAttr",value:function(t){}},{key:"getIdleOutlineStyleValue",value:function(t){}}])}()},14:function(t,e,n){"use strict";n.d(e,"a",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=24)}({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"}},19: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(13),n(14)),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},f=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}}(),l=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),f(e,null,[{key:"strings",get:function(){return a.a}},{key:"defaultAdapter",get:function(){return{getWidth:function(){},getHeight:function(){},setOutlinePathAttr:function(){},getIdleOutlineStyleValue:function(){}}}}]),f(e,[{key:"updateSvgPath",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],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,f="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,l=void 0;l=e?"M"+(r-u-a)+",1h"+a+f+"h"+(r-2*u-c-a):"M"+(u+a+c)+",1h"+(r-2*u-c-a)+f+"h"+a,this.adapter_.setOutlinePathAttr(l)}}]),e}(u.a);e.a=l},29: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 l});var u=n(1),a=(n(13),n(19)),c=n(14);n.d(e,"MDCNotchedOutlineFoundation",function(){return a.a});var f=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}}(),l=function(t){function e(){return o(this,e),r(this,(e.__proto__||Object.getPrototypeOf(e)).apply(this,arguments))}return i(e,t),f(e,[{key:"updateSvgPath",value:function(t,e){this.foundation_.updateSvgPath(t,e)}},{key:"getDefaultFoundation",value:function(){var t=this;return new a.a({getWidth:function(){return t.root_.offsetWidth},getHeight:function(){return t.root_.offsetHeight},setOutlinePathAttr:function(e){t.root_.querySelector(c.a.PATH_SELECTOR).setAttribute("d",e)},getIdleOutlineStyleValue:function(e){var n=t.root_.parentNode.querySelector(c.a.IDLE_OUTLINE_SELECTOR);return window.getComputedStyle(n).getPropertyValue(e)}})}}],[{key:"attachTo",value:function(t){return new e(t)}}]),e}(u.a)}})});
+var o={PATH_SELECTOR:".mdc-notched-outline__path",IDLE_OUTLINE_SELECTOR:".mdc-notched-outline__idle"},r={OUTLINE_NOTCHED:"mdc-notched-outline--notched"}},17: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},24: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(17)),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)}})});
 //# sourceMappingURL=mdc.notchedOutline.min.js.map

foundation.js

@@ -20,3 +20,3 @@ /**
 import MDCNotchedOutlineAdapter from './adapter';
-import {strings} from './constants';
+import {cssClasses, strings} from './constants';
 
@@ -33,2 +33,7 @@ /**
 
+  /** @return enum {string} */
+  static get cssClasses() {
+    return cssClasses;
+  }
+
   /**
@@ -43,2 +48,4 @@ * {@see MDCNotchedOutlineAdapter} for typing information on parameters and return
       getHeight: () => {},
+      addClass: () => {},
+      removeClass: () => {},
       setOutlinePathAttr: () => {},
@@ -57,2 +64,22 @@ getIdleOutlineStyleValue: () => {},
   /**
+   * Adds the outline notched selector and updates the notch width
+   * calculated based off of notchWidth and isRtl.
+   * @param {number} notchWidth
+   * @param {boolean=} isRtl
+   */
+  notch(notchWidth, isRtl = false) {
+    const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
+    this.adapter_.addClass(OUTLINE_NOTCHED);
+    this.updateSvgPath_(notchWidth, isRtl);
+  }
+
+  /**
+   * Removes notched outline selector to close the notch in the outline.
+   */
+  closeNotch() {
+    const {OUTLINE_NOTCHED} = MDCNotchedOutlineFoundation.cssClasses;
+    this.adapter_.removeClass(OUTLINE_NOTCHED);
+  }
+
+  /**
    * Updates the SVG path of the focus outline element based on the notchWidth
@@ -62,4 +89,5 @@ * and the RTL context.
    * @param {boolean=} isRtl
+   * @private
    */
-  updateSvgPath(notchWidth, isRtl = false) {
+  updateSvgPath_(notchWidth, isRtl) {
     // Fall back to reading a specific corner's style because Firefox doesn't report the style on border-radius.
@@ -66,0 +94,0 @@ const radiusStyleValue = this.adapter_.getIdleOutlineStyleValue('border-radius') ||

index.js

@@ -38,4 +38,3 @@ /**
   /**
-    * Updates the SVG path of the outline element based on the
-    * notch element width and the RTL context.
+    * Updates outline selectors and SVG path to open notch.
     * @param {number} notchWidth The notch width in the outline.
@@ -45,7 +44,14 @@ * @param {boolean=} isRtl Determines if outline is rtl. If rtl is true, notch
     */
-  updateSvgPath(notchWidth, isRtl) {
-    this.foundation_.updateSvgPath(notchWidth, isRtl);
+  notch(notchWidth, isRtl) {
+    this.foundation_.notch(notchWidth, isRtl);
   }
 
   /**
+   * Updates the outline selectors to close notch and return it to idle state.
+   */
+  closeNotch() {
+    this.foundation_.closeNotch();
+  }
+
+  /**
    * @return {!MDCNotchedOutlineFoundation}
@@ -57,2 +63,4 @@ */
       getHeight: () => this.root_.offsetHeight,
+      addClass: (className) => this.root_.classList.add(className),
+      removeClass: (className) => this.root_.classList.remove(className),
       setOutlinePathAttr: (value) => {
@@ -59,0 +67,0 @@ const path = this.root_.querySelector(strings.PATH_SELECTOR);

package.json

 {
   "name": "@material/notched-outline",
   "description": "The Material Components for the web notched-outline component",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "license": "Apache-2.0",
@@ -21,6 +21,6 @@ "keywords": [
   "dependencies": {
-    "@material/animation": "^0.25.0",
-    "@material/base": "^0.29.0",
-    "@material/theme": "^0.33.0"
+    "@material/animation": "^0.34.0",
+    "@material/base": "^0.34.0",
+    "@material/theme": "^0.34.0"
   }
 }

README.md

@@ -42,2 +42,3 @@ <!--docs:
 `mdc-notched-outline` | Mandatory. Container for the SVG of the notched outline path.
+`mdc-notched-outline--notched` | Class to open notch outline.
 `mdc-notched-outline__path` | Mandatory. The path of the SVG of the notched outline.
@@ -86,3 +87,4 @@ `mdc-notched-outline__idle` | Mandatory. The full outline when the notch is hidden.
 --- | ---
-`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG of the outline element with a notch calculated based off of the notchWidth. The notch will appear left justified, unless isRtl is true.
+`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.
 
@@ -95,2 +97,4 @@ ### `MDCNotchedOutlineAdapter`
 `getHeight() => number` | Returns the height of the 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.
@@ -103,5 +107,4 @@ `getIdleOutlineStyleValue(propertyName: string) => string` | Returns the idle outline element's computed style value of a given css `propertyName`.
 --- | ---
-`updateSvgPath(notchWidth: number, isRtl: boolean) => void` | Updates the SVG path of the focus outline element based on the given notchWidth and the RTL context.
-
-
-[//]: <> (TODO(mattgoo): add how to hide/show notch in outline)
+`notch(notchWidth: number, isRtl: boolean) => void` | Adds the 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

Improved metrics

Lines of code

1024

increased by4.7%

Number of lines in readme file

107

increased by2.88%

Worsened metrics

Total package byte prevSize

58542

decreased by-0.76%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@material/animation@0.34.0(transitive)

• + Added@material/base@0.34.0(transitive)

• + Added@material/theme@0.34.0(transitive)

• - Removed@material/animation@0.25.0(transitive)

• - Removed@material/base@0.29.0(transitive)

• - Removed@material/theme@0.33.0(transitive)

• Updated@material/animation@^0.34.0

• Updated@material/base@^0.34.0

• Updated@material/theme@^0.34.0