@myuw-web-components/myuw-help - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

dist/myuw-help.js

@@ -141,3 +141,3 @@ (function () {
 
-  var tpl = " <style> :host {\n      display: flex;\n      font-style: inherit;\n      font-variant: inherit;\n      font-family: inherit;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    :host([show-default-content]) #myuw-help__default-content {\n        display: block;\n    }\n\n    :host([show-button]) #help-button {\n      display: flex;\n    }\n\n    :host([open]) #myuw-help__dialog {\n        opacity: 1;\n    }\n\n    :host([open]) #myuw-help__shadow {\n        opacity: 1;\n        height: 100%;\n    }\n\n    /* Duplicate styles to appease firefox */\n    myuw-help {\n      display: flex;\n      font-style: inherit;\n      font-variant: inherit;\n      font-family: inherit;\n    }\n\n    myuw-help[hidden] {\n        display: none;\n    }\n\n    myuw-help[show-default-content] #myuw-help__default-content {\n        display: block;\n    }\n\n    myuw-help[show-button] #help-button {\n      display: flex;\n    }\n\n    myuw-help[open] #myuw-help__dialog {\n        opacity: 1;\n    }\n\n    myuw-help[open] #myuw-help__shadow {\n        opacity: 1;\n        height: 100%;\n    }\n\n    #myuw-help__dialog {\n        max-width: 80%;\n        min-width: 300px;\n        height: auto;\n        -webkit-box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);\n        box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);\n        background-color: #FFFFFF;\n        padding: 22px 24px 12px;\n        margin-top: 0;\n        margin-bottom: 0;\n        margin-left: auto;\n        margin-right: auto;\n        border-radius: 5px;\n        font-family: 'Roboto', Arial, sans-serif; /* TODO: use styles variables */\n        opacity: 0;\n        position: absolute;\n        float: left;\n        top: 0;\n        right: -1000px; \n        -webkit-transition: all .4s cubic-bezier(.25,.8,.25,1);\n        transition: all .4s cubic-bezier(.25,.8,.25,1);\n        z-index: 101;\n    }\n\n    #myuw-help__heading {\n        display: flex;\n        align-content: center;\n        justify-content: space-between;\n    }\n\n    #myuw-help__title {\n        color: rgba(0,0,0,0.8);\n        font-size: 20px;\n        font-weight: 500;\n        line-height: 24px;\n        letter-spacing: 0.03px;\n    }\n\n    #myuw-help__content {\n        font-weight: 400;\n        font-size: 16px;\n        color: rgba(0,0,0,.8);\n        line-height: 24px;\n        text-align: left;\n        letter-spacing: 0.03px;\n        padding: 8px 0 16px;\n    }\n\n    #myuw-help__default-content {\n        display: none;\n    }\n\n    #myuw-help__default-content ul {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    #myuw-help__default-content ul li {\n        transition: background 0.4s cubic-bezier(.25,.8,.25,1);\n        display: flex;\n        justify-content: flex-start;\n        align-items: center;\n        min-height: 38px;\n        height: auto;\n        padding: 0 16px 0 6px;\n    }\n    #myuw-help__default-content ul li:hover {\n        background: rgba(158,158,158,0.2);\n    }\n    #myuw-help__default-content a {\n        text-decoration: none;\n        color: #0479a8; /* TODO: use styles variables */\n        min-height: 38px;\n        line-height: 38px;\n        flex: auto;\n        display: flex;\n        align-items: center;\n    }\n\n    #myuw-help__default-content .material-icons {\n        width: 24px;\n        min-height: 24px;\n        min-width: 24px;\n        margin-right: 12px;\n        color: #434343;\n    }\n\n    #myuw-help__shadow {\n        position: fixed;\n        top: 64px;\n        left: 0;\n        width: 100%;\n        height: 0;\n        opacity: 0;\n        background: rgba(0,0,0,0.3);\n        transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);\n        z-index: 100;\n    }\n\n    #myuw-help__close-button {\n        min-width: 48px;\n        margin: 0;\n        display: inline-block;\n        position: relative;\n        cursor: pointer;\n        min-height: 36px;\n        line-height: 36px;\n        text-align: center;\n        border-radius: 3px;\n        box-sizing: border-box;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        border: 0;\n        padding: 0 6px;\n        background: transparent;\n        white-space: nowrap;\n        text-transform: uppercase;\n        font-weight: 500;\n        font-size: 14px;\n        text-decoration: none;\n        overflow: hidden;\n        -webkit-transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n        transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n        border-radius: 50%;\n    }\n    #myuw-help__close-button:hover {\n        background-color: rgba(158,158,158,0.2);\n    }\n    #myuw-help__close-button:focus {\n        outline: none;\n    }\n\n    #help-button {\n      display: none;\n      justify-content: center;\n      align-content: center;\n      align-items: center;\n      position: relative;\n      cursor: pointer;\n      min-height: 42px;\n      min-width: 42px;\n      height: 42px;\n      width: 42px;\n      user-select: none;\n      outline: none;\n      padding: 0;\n      border: 0;\n      border-radius: 50%;\n      margin: 0 6px;\n      background-color: transparent;\n      -webkit-transition: background-color .3s cubic-bezier(.35,0,.25,1);\n      transition: background-color .3s cubic-bezier(.35,0,.25,1);\n    }\n\n    #help-icon {\n      color: var(--myuw-primary-color, #fff);\n      fill: var(--myuw-primary-color, #fff);\n      height: 30px;\n      width: 30px;\n    }\n\n    #help-button:hover {\n      background-color: rgba(0,0,0,0.2);\n    }\n\n    @media all and (min-width: 481px) and (max-width: 840px) {\n        #myuw-help__dialog {\n            width: 400px;\n        }\n    }\n\n    @media all and (min-width: 841px) {\n        #myuw-help__dialog {\n            width: 600px;\n        }\n    } </style> <button id=\"help-button\" aria-label=\"open help dialog\"> <svg id=\"help-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\"/> <path d=\"M0 0h24v24H0z\" fill=\"none\"/> </svg> </button> <div id=\"myuw-help__dialog\"> <div id=\"myuw-help__heading\"> <h1 id=\"myuw-help__title\"></h1> <button id=\"myuw-help__close-button\" aria-label=\"close dialog\"> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/> <path d=\"M0 0h24v24H0z\" fill=\"none\"/> </svg> </button> </div> <div id=\"myuw-help__content\"> <slot name=\"myuw-help-content\"></slot> <div id=\"myuw-help__default-content\"> <ul> <li> <a href=\"tel:[phone]\">Call the help desk</a> </li> <li> <a href=\"mailto:[e-mail]\">Email the help desk</a> </li> <li> <a href=\"https://it.wisc.edu\">Get help another way</a> </li> <li> <a href=\"https://outages.doit.wisc.edu/\">Check the Outages page</a> </li> <li> <a href=\"https://kb.wisc.edu/\">Search the KnowledgeBase</a> </li> </ul> </div> </div> </div> <div id=\"myuw-help__shadow\"></div> ";
+  var tpl = " <style> :host {\n      display: flex;\n      font-style: inherit;\n      font-variant: inherit;\n      font-family: inherit;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    :host([show-default-content]) #myuw-help__default-content {\n        display: block;\n    }\n\n    :host([show-button]) #help-button {\n      display: flex;\n    }\n\n    :host([open]) #myuw-help__dialog {\n        opacity: 1;\n        display: block;\n    }\n\n    :host([open]) #myuw-help__shadow {\n        opacity: 1;\n        height: 100%;\n    }\n\n    /* Duplicate styles to appease firefox */\n    myuw-help {\n      display: flex;\n      font-style: inherit;\n      font-variant: inherit;\n      font-family: inherit;\n    }\n\n    myuw-help[hidden] {\n        display: none;\n    }\n\n    myuw-help[show-default-content] #myuw-help__default-content {\n        display: block;\n    }\n\n    myuw-help[show-button] #help-button {\n      display: flex;\n    }\n\n    myuw-help[open] #myuw-help__dialog {\n        opacity: 1;\n        display: block;\n    }\n\n    myuw-help[open] #myuw-help__shadow {\n        opacity: 1;\n        /* height: 100%; */\n    }\n\n    #myuw-help__dialog {\n      display: none;\n        max-width: 80%;\n        min-width: 300px;\n        height: auto;\n        -webkit-box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);\n        box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);\n        background-color: #FFFFFF;\n        padding: 22px 24px 12px;\n        margin-top: 0;\n        margin-bottom: 0;\n        margin-left: auto;\n        margin-right: auto;\n        border-radius: 5px;\n        font-family: 'Roboto', Arial, sans-serif; /* TODO: use styles variables */\n        opacity: 0;\n        position: absolute;\n        float: left;\n        top: 0;\n        right: -1000px; \n        -webkit-transition: all .4s cubic-bezier(.25,.8,.25,1);\n        transition: all .4s cubic-bezier(.25,.8,.25,1);\n        z-index: 101;\n    }\n\n    #myuw-help__heading {\n        display: flex;\n        align-content: center;\n        justify-content: space-between;\n    }\n\n    #myuw-help__title {\n        color: rgba(0,0,0,0.8);\n        font-size: 20px;\n        font-weight: 500;\n        line-height: 24px;\n        letter-spacing: 0.03px;\n    }\n\n    #myuw-help__content {\n        font-weight: 400;\n        font-size: 16px;\n        color: rgba(0,0,0,.8);\n        line-height: 24px;\n        text-align: left;\n        letter-spacing: 0.03px;\n        padding: 8px 0 16px;\n    }\n\n    #myuw-help__default-content {\n        display: none;\n    }\n\n    #myuw-help__default-content ul {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    #myuw-help__default-content ul li {\n        transition: background 0.4s cubic-bezier(.25,.8,.25,1);\n        display: flex;\n        justify-content: flex-start;\n        align-items: center;\n        min-height: 38px;\n        height: auto;\n        padding: 0 16px 0 6px;\n    }\n    #myuw-help__default-content ul li:hover {\n        background: rgba(158,158,158,0.2);\n    }\n    #myuw-help__default-content a {\n        text-decoration: none;\n        color: #0479a8; /* TODO: use styles variables */\n        min-height: 38px;\n        line-height: 38px;\n        flex: auto;\n        display: flex;\n        align-items: center;\n    }\n\n    #myuw-help__default-content .material-icons {\n        width: 24px;\n        min-height: 24px;\n        min-width: 24px;\n        margin-right: 12px;\n        color: #434343;\n    }\n\n    #myuw-help__shadow {\n        position: fixed;\n        top: 64px;\n        left: 0;\n        width: 100%;\n        height: 0;\n        opacity: 0;\n        background: rgba(0,0,0,0.3);\n        transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);\n        z-index: 100;\n    }\n\n    #myuw-help__close-button {\n        min-width: 48px;\n        margin: 0;\n        display: inline-block;\n        position: relative;\n        cursor: pointer;\n        min-height: 36px;\n        line-height: 36px;\n        text-align: center;\n        border-radius: 3px;\n        box-sizing: border-box;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        border: 0;\n        padding: 0 6px;\n        background: transparent;\n        white-space: nowrap;\n        text-transform: uppercase;\n        font-weight: 500;\n        font-size: 14px;\n        text-decoration: none;\n        overflow: hidden;\n        -webkit-transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n        transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n        border-radius: 50%;\n    }\n    #myuw-help__close-button:hover {\n        background-color: rgba(158,158,158,0.2);\n    }\n    #myuw-help__close-button:focus {\n        outline: none;\n    }\n\n    #help-button {\n      display: none;\n      justify-content: center;\n      align-content: center;\n      align-items: center;\n      position: relative;\n      cursor: pointer;\n      min-height: 42px;\n      min-width: 42px;\n      height: 42px;\n      width: 42px;\n      user-select: none;\n      outline: none;\n      padding: 0;\n      border: 0;\n      border-radius: 50%;\n      margin: 0 6px;\n      background-color: transparent;\n      -webkit-transition: background-color .3s cubic-bezier(.35,0,.25,1);\n      transition: background-color .3s cubic-bezier(.35,0,.25,1);\n    }\n\n    #help-icon {\n      color: var(--myuw-primary-color, #fff);\n      fill: var(--myuw-primary-color, #fff);\n      height: 30px;\n      width: 30px;\n    }\n\n    #help-button:hover {\n      background-color: rgba(0,0,0,0.2);\n    }\n\n    @media all and (min-width: 481px) and (max-width: 840px) {\n        #myuw-help__dialog {\n            width: 400px;\n        }\n    }\n\n    @media all and (min-width: 841px) {\n        #myuw-help__dialog {\n            width: 600px;\n        }\n    } </style> <button id=\"help-button\" aria-label=\"open help dialog\"> <svg id=\"help-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\"/> <path d=\"M0 0h24v24H0z\" fill=\"none\"/> </svg> </button> <div id=\"myuw-help__dialog\"> <div id=\"myuw-help__heading\"> <h1 id=\"myuw-help__title\"></h1> <button id=\"myuw-help__close-button\" aria-label=\"close dialog\"> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"> <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/> <path d=\"M0 0h24v24H0z\" fill=\"none\"/> </svg> </button> </div> <div id=\"myuw-help__content\"> <slot name=\"myuw-help-content\"></slot> <div id=\"myuw-help__default-content\"> <ul> <li> <a href=\"tel:[phone]\">Call the help desk</a> </li> <li> <a href=\"mailto:[e-mail]\">Email the help desk</a> </li> <li> <a href=\"https://it.wisc.edu\">Get help another way</a> </li> <li> <a href=\"https://outages.doit.wisc.edu/\">Check the Outages page</a> </li> <li> <a href=\"https://kb.wisc.edu/\">Search the KnowledgeBase</a> </li> </ul> </div> </div> </div> <div id=\"myuw-help__shadow\"></div> ";
 
@@ -144,0 +144,0 @@ var MyUWHelp =

dist/myuw-help.min.js

@@ -1,1 +0,1 @@
-!(function(){"use strict";function t(t,n){for(var e=0;e<n.length;e++){var i=n[e];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function n(t){return(n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function e(t,n){return(e=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function i(t,n,o){return(i=(function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}})()?Reflect.construct:function(t,n,i){var o=[null];o.push.apply(o,n);var l=new(Function.bind.apply(t,o));return i&&e(l,i.prototype),l}).apply(null,arguments)}function o(t){var l="function"==typeof Map?new Map:void 0;return(o=function(t){if(null===t||(o=t,-1===Function.toString.call(o).indexOf("[native code]")))return t;var o;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==l){if(l.has(t))return l.get(t);l.set(t,a)}function a(){return i(t,arguments,n(this).constructor)}return a.prototype=Object.create(t.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),e(a,t)})(t)}function l(t,n){return!n||"object"!=typeof n&&"function"!=typeof n?(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t})(t):n}var a,r,s=(function(i){function a(){var t;return(function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")})(this,a),(t=l(this,n(a).call(this))).attachShadow({mode:"open"}),t.shadowRoot.appendChild(a.template.content.cloneNode(!0)),t}var r,s,h;return(function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),n&&e(t,n)})(a,o(HTMLElement)),r=a,h=[{key:"observedAttributes",get:function(){return["myuw-help-title","open","show-default-content","show-button"]}}],(s=[{key:"attributeChangedCallback",value:function(t,n,e){this[t]=e,this.updateComponent()}},{key:"connectedCallback",value:function(){var t=this;this["myuw-help-title"]=this.getAttribute("myuw-help-title"),this.open=this.getAttribute("open"),this["show-default-content"]=this.getAttribute("show-default-content"),this["show-button"]=this.getAttribute("show-button"),this.$button=this.shadowRoot.getElementById("help-button"),this.$dialog=this.shadowRoot.getElementById("myuw-help__dialog"),this.$dialogTitle=this.shadowRoot.getElementById("myuw-help__title"),this.$backdrop=this.shadowRoot.getElementById("myuw-help__shadow"),this.$dialogCloseButton=this.shadowRoot.getElementById("myuw-help__close-button"),this.$button.addEventListener("click",function(){t.setDialogState()}),document.addEventListener("show-myuw-help",function(){t.setDialogState()}),this.$backdrop.addEventListener("click",function(){t.setDialogState(!1)}),this.$dialogCloseButton.addEventListener("click",function(){t.setDialogState(!1)})}},{key:"updateComponent",value:function(){this.shadowRoot.getElementById("myuw-help__title").innerHTML=this["myuw-help-title"]}},{key:"setDialogState",value:function(t){switch(t){case!1:this.removeAttribute("open"),this.resetDialogPosition();break;case!0:this.setAttribute("open",""),this.setDialogPosition(),this.$dialog.focus();break;default:this.hasAttribute("open")?(this.removeAttribute("open"),this.resetDialogPosition()):(this.setAttribute("open",""),this.setDialogPosition(),this.$dialog.focus())}}},{key:"resetDialogPosition",value:function(){this.$dialog.style.top=0,this.$dialog.style.left="auto",this.$dialog.style.right="-1000px"}},{key:"setDialogPosition",value:function(){var t=this.$dialog.offsetWidth,n=this.$dialog.offsetHeight,e=Math.max(document.documentElement.clientWidth,window.innerWidth||0),i=(Math.max(document.documentElement.clientHeight,window.innerHeight||0)-n)/3,o=(e-t)/2;this.$dialog.style.left=o,this.$dialog.style.right="auto",this.$dialog.style.top=i}}])&&t(r.prototype,s),h&&t(r,h),a})();s.template=(a=' <style> :host {\n      display: flex;\n      font-style: inherit;\n      font-variant: inherit;\n      font-family: inherit;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    :host([show-default-content]) #myuw-help__default-content {\n        display: block;\n    }\n\n    :host([show-button]) #help-button {\n      display: flex;\n    }\n\n    :host([open]) #myuw-help__dialog {\n        opacity: 1;\n    }\n\n    :host([open]) #myuw-help__shadow {\n        opacity: 1;\n        height: 100%;\n    }\n\n    /* Duplicate styles to appease firefox */\n    myuw-help {\n      display: flex;\n      font-style: inherit;\n      font-variant: inherit;\n      font-family: inherit;\n    }\n\n    myuw-help[hidden] {\n        display: none;\n    }\n\n    myuw-help[show-default-content] #myuw-help__default-content {\n        display: block;\n    }\n\n    myuw-help[show-button] #help-button {\n      display: flex;\n    }\n\n    myuw-help[open] #myuw-help__dialog {\n        opacity: 1;\n    }\n\n    myuw-help[open] #myuw-help__shadow {\n        opacity: 1;\n        height: 100%;\n    }\n\n    #myuw-help__dialog {\n        max-width: 80%;\n        min-width: 300px;\n        height: auto;\n        -webkit-box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);\n        box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);\n        background-color: #FFFFFF;\n        padding: 22px 24px 12px;\n        margin-top: 0;\n        margin-bottom: 0;\n        margin-left: auto;\n        margin-right: auto;\n        border-radius: 5px;\n        font-family: \'Roboto\', Arial, sans-serif; /* TODO: use styles variables */\n        opacity: 0;\n        position: absolute;\n        float: left;\n        top: 0;\n        right: -1000px; \n        -webkit-transition: all .4s cubic-bezier(.25,.8,.25,1);\n        transition: all .4s cubic-bezier(.25,.8,.25,1);\n        z-index: 101;\n    }\n\n    #myuw-help__heading {\n        display: flex;\n        align-content: center;\n        justify-content: space-between;\n    }\n\n    #myuw-help__title {\n        color: rgba(0,0,0,0.8);\n        font-size: 20px;\n        font-weight: 500;\n        line-height: 24px;\n        letter-spacing: 0.03px;\n    }\n\n    #myuw-help__content {\n        font-weight: 400;\n        font-size: 16px;\n        color: rgba(0,0,0,.8);\n        line-height: 24px;\n        text-align: left;\n        letter-spacing: 0.03px;\n        padding: 8px 0 16px;\n    }\n\n    #myuw-help__default-content {\n        display: none;\n    }\n\n    #myuw-help__default-content ul {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    #myuw-help__default-content ul li {\n        transition: background 0.4s cubic-bezier(.25,.8,.25,1);\n        display: flex;\n        justify-content: flex-start;\n        align-items: center;\n        min-height: 38px;\n        height: auto;\n        padding: 0 16px 0 6px;\n    }\n    #myuw-help__default-content ul li:hover {\n        background: rgba(158,158,158,0.2);\n    }\n    #myuw-help__default-content a {\n        text-decoration: none;\n        color: #0479a8; /* TODO: use styles variables */\n        min-height: 38px;\n        line-height: 38px;\n        flex: auto;\n        display: flex;\n        align-items: center;\n    }\n\n    #myuw-help__default-content .material-icons {\n        width: 24px;\n        min-height: 24px;\n        min-width: 24px;\n        margin-right: 12px;\n        color: #434343;\n    }\n\n    #myuw-help__shadow {\n        position: fixed;\n        top: 64px;\n        left: 0;\n        width: 100%;\n        height: 0;\n        opacity: 0;\n        background: rgba(0,0,0,0.3);\n        transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);\n        z-index: 100;\n    }\n\n    #myuw-help__close-button {\n        min-width: 48px;\n        margin: 0;\n        display: inline-block;\n        position: relative;\n        cursor: pointer;\n        min-height: 36px;\n        line-height: 36px;\n        text-align: center;\n        border-radius: 3px;\n        box-sizing: border-box;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        border: 0;\n        padding: 0 6px;\n        background: transparent;\n        white-space: nowrap;\n        text-transform: uppercase;\n        font-weight: 500;\n        font-size: 14px;\n        text-decoration: none;\n        overflow: hidden;\n        -webkit-transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n        transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n        border-radius: 50%;\n    }\n    #myuw-help__close-button:hover {\n        background-color: rgba(158,158,158,0.2);\n    }\n    #myuw-help__close-button:focus {\n        outline: none;\n    }\n\n    #help-button {\n      display: none;\n      justify-content: center;\n      align-content: center;\n      align-items: center;\n      position: relative;\n      cursor: pointer;\n      min-height: 42px;\n      min-width: 42px;\n      height: 42px;\n      width: 42px;\n      user-select: none;\n      outline: none;\n      padding: 0;\n      border: 0;\n      border-radius: 50%;\n      margin: 0 6px;\n      background-color: transparent;\n      -webkit-transition: background-color .3s cubic-bezier(.35,0,.25,1);\n      transition: background-color .3s cubic-bezier(.35,0,.25,1);\n    }\n\n    #help-icon {\n      color: var(--myuw-primary-color, #fff);\n      fill: var(--myuw-primary-color, #fff);\n      height: 30px;\n      width: 30px;\n    }\n\n    #help-button:hover {\n      background-color: rgba(0,0,0,0.2);\n    }\n\n    @media all and (min-width: 481px) and (max-width: 840px) {\n        #myuw-help__dialog {\n            width: 400px;\n        }\n    }\n\n    @media all and (min-width: 841px) {\n        #myuw-help__dialog {\n            width: 600px;\n        }\n    } </style> <button id="help-button" aria-label="open help dialog"> <svg id="help-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg> </button> <div id="myuw-help__dialog"> <div id="myuw-help__heading"> <h1 id="myuw-help__title"></h1> <button id="myuw-help__close-button" aria-label="close dialog"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg> </button> </div> <div id="myuw-help__content"> <slot name="myuw-help-content"></slot> <div id="myuw-help__default-content"> <ul> <li> <a href="tel:[phone]">Call the help desk</a> </li> <li> <a href="mailto:[e-mail]">Email the help desk</a> </li> <li> <a href="https://it.wisc.edu">Get help another way</a> </li> <li> <a href="https://outages.doit.wisc.edu/">Check the Outages page</a> </li> <li> <a href="https://kb.wisc.edu/">Search the KnowledgeBase</a> </li> </ul> </div> </div> </div> <div id="myuw-help__shadow"></div> ',r=document.createElement("template"),r.innerHTML=a,r),window.customElements.define("myuw-help",s)})();
+!(function(){"use strict";function n(n,t){for(var e=0;e<t.length;e++){var i=t[e];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(n,i.key,i)}}function t(n){return(t=Object.setPrototypeOf?Object.getPrototypeOf:function(n){return n.__proto__||Object.getPrototypeOf(n)})(n)}function e(n,t){return(e=Object.setPrototypeOf||function(n,t){return n.__proto__=t,n})(n,t)}function i(n,t,o){return(i=(function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(n){return!1}})()?Reflect.construct:function(n,t,i){var o=[null];o.push.apply(o,t);var l=new(Function.bind.apply(n,o));return i&&e(l,i.prototype),l}).apply(null,arguments)}function o(n){var l="function"==typeof Map?new Map:void 0;return(o=function(n){if(null===n||(o=n,-1===Function.toString.call(o).indexOf("[native code]")))return n;var o;if("function"!=typeof n)throw new TypeError("Super expression must either be null or a function");if(void 0!==l){if(l.has(n))return l.get(n);l.set(n,a)}function a(){return i(n,arguments,t(this).constructor)}return a.prototype=Object.create(n.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),e(a,n)})(n)}function l(n,t){return!t||"object"!=typeof t&&"function"!=typeof t?(function(n){if(void 0===n)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return n})(n):t}var a,r,s=(function(i){function a(){var n;return(function(n,t){if(!(n instanceof t))throw new TypeError("Cannot call a class as a function")})(this,a),(n=l(this,t(a).call(this))).attachShadow({mode:"open"}),n.shadowRoot.appendChild(a.template.content.cloneNode(!0)),n}var r,s,h;return(function(n,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");n.prototype=Object.create(t&&t.prototype,{constructor:{value:n,writable:!0,configurable:!0}}),t&&e(n,t)})(a,o(HTMLElement)),r=a,h=[{key:"observedAttributes",get:function(){return["myuw-help-title","open","show-default-content","show-button"]}}],(s=[{key:"attributeChangedCallback",value:function(n,t,e){this[n]=e,this.updateComponent()}},{key:"connectedCallback",value:function(){var n=this;this["myuw-help-title"]=this.getAttribute("myuw-help-title"),this.open=this.getAttribute("open"),this["show-default-content"]=this.getAttribute("show-default-content"),this["show-button"]=this.getAttribute("show-button"),this.$button=this.shadowRoot.getElementById("help-button"),this.$dialog=this.shadowRoot.getElementById("myuw-help__dialog"),this.$dialogTitle=this.shadowRoot.getElementById("myuw-help__title"),this.$backdrop=this.shadowRoot.getElementById("myuw-help__shadow"),this.$dialogCloseButton=this.shadowRoot.getElementById("myuw-help__close-button"),this.$button.addEventListener("click",function(){n.setDialogState()}),document.addEventListener("show-myuw-help",function(){n.setDialogState()}),this.$backdrop.addEventListener("click",function(){n.setDialogState(!1)}),this.$dialogCloseButton.addEventListener("click",function(){n.setDialogState(!1)})}},{key:"updateComponent",value:function(){this.shadowRoot.getElementById("myuw-help__title").innerHTML=this["myuw-help-title"]}},{key:"setDialogState",value:function(n){switch(n){case!1:this.removeAttribute("open"),this.resetDialogPosition();break;case!0:this.setAttribute("open",""),this.setDialogPosition(),this.$dialog.focus();break;default:this.hasAttribute("open")?(this.removeAttribute("open"),this.resetDialogPosition()):(this.setAttribute("open",""),this.setDialogPosition(),this.$dialog.focus())}}},{key:"resetDialogPosition",value:function(){this.$dialog.style.top=0,this.$dialog.style.left="auto",this.$dialog.style.right="-1000px"}},{key:"setDialogPosition",value:function(){var n=this.$dialog.offsetWidth,t=this.$dialog.offsetHeight,e=Math.max(document.documentElement.clientWidth,window.innerWidth||0),i=(Math.max(document.documentElement.clientHeight,window.innerHeight||0)-t)/3,o=(e-n)/2;this.$dialog.style.left=o,this.$dialog.style.right="auto",this.$dialog.style.top=i}}])&&n(r.prototype,s),h&&n(r,h),a})();s.template=(a=' <style> :host {\n      display: flex;\n      font-style: inherit;\n      font-variant: inherit;\n      font-family: inherit;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    :host([show-default-content]) #myuw-help__default-content {\n        display: block;\n    }\n\n    :host([show-button]) #help-button {\n      display: flex;\n    }\n\n    :host([open]) #myuw-help__dialog {\n        opacity: 1;\n        display: block;\n    }\n\n    :host([open]) #myuw-help__shadow {\n        opacity: 1;\n        height: 100%;\n    }\n\n    /* Duplicate styles to appease firefox */\n    myuw-help {\n      display: flex;\n      font-style: inherit;\n      font-variant: inherit;\n      font-family: inherit;\n    }\n\n    myuw-help[hidden] {\n        display: none;\n    }\n\n    myuw-help[show-default-content] #myuw-help__default-content {\n        display: block;\n    }\n\n    myuw-help[show-button] #help-button {\n      display: flex;\n    }\n\n    myuw-help[open] #myuw-help__dialog {\n        opacity: 1;\n        display: block;\n    }\n\n    myuw-help[open] #myuw-help__shadow {\n        opacity: 1;\n        /* height: 100%; */\n    }\n\n    #myuw-help__dialog {\n      display: none;\n        max-width: 80%;\n        min-width: 300px;\n        height: auto;\n        -webkit-box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);\n        box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);\n        background-color: #FFFFFF;\n        padding: 22px 24px 12px;\n        margin-top: 0;\n        margin-bottom: 0;\n        margin-left: auto;\n        margin-right: auto;\n        border-radius: 5px;\n        font-family: \'Roboto\', Arial, sans-serif; /* TODO: use styles variables */\n        opacity: 0;\n        position: absolute;\n        float: left;\n        top: 0;\n        right: -1000px; \n        -webkit-transition: all .4s cubic-bezier(.25,.8,.25,1);\n        transition: all .4s cubic-bezier(.25,.8,.25,1);\n        z-index: 101;\n    }\n\n    #myuw-help__heading {\n        display: flex;\n        align-content: center;\n        justify-content: space-between;\n    }\n\n    #myuw-help__title {\n        color: rgba(0,0,0,0.8);\n        font-size: 20px;\n        font-weight: 500;\n        line-height: 24px;\n        letter-spacing: 0.03px;\n    }\n\n    #myuw-help__content {\n        font-weight: 400;\n        font-size: 16px;\n        color: rgba(0,0,0,.8);\n        line-height: 24px;\n        text-align: left;\n        letter-spacing: 0.03px;\n        padding: 8px 0 16px;\n    }\n\n    #myuw-help__default-content {\n        display: none;\n    }\n\n    #myuw-help__default-content ul {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    #myuw-help__default-content ul li {\n        transition: background 0.4s cubic-bezier(.25,.8,.25,1);\n        display: flex;\n        justify-content: flex-start;\n        align-items: center;\n        min-height: 38px;\n        height: auto;\n        padding: 0 16px 0 6px;\n    }\n    #myuw-help__default-content ul li:hover {\n        background: rgba(158,158,158,0.2);\n    }\n    #myuw-help__default-content a {\n        text-decoration: none;\n        color: #0479a8; /* TODO: use styles variables */\n        min-height: 38px;\n        line-height: 38px;\n        flex: auto;\n        display: flex;\n        align-items: center;\n    }\n\n    #myuw-help__default-content .material-icons {\n        width: 24px;\n        min-height: 24px;\n        min-width: 24px;\n        margin-right: 12px;\n        color: #434343;\n    }\n\n    #myuw-help__shadow {\n        position: fixed;\n        top: 64px;\n        left: 0;\n        width: 100%;\n        height: 0;\n        opacity: 0;\n        background: rgba(0,0,0,0.3);\n        transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);\n        z-index: 100;\n    }\n\n    #myuw-help__close-button {\n        min-width: 48px;\n        margin: 0;\n        display: inline-block;\n        position: relative;\n        cursor: pointer;\n        min-height: 36px;\n        line-height: 36px;\n        text-align: center;\n        border-radius: 3px;\n        box-sizing: border-box;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n        border: 0;\n        padding: 0 6px;\n        background: transparent;\n        white-space: nowrap;\n        text-transform: uppercase;\n        font-weight: 500;\n        font-size: 14px;\n        text-decoration: none;\n        overflow: hidden;\n        -webkit-transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n        transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n        border-radius: 50%;\n    }\n    #myuw-help__close-button:hover {\n        background-color: rgba(158,158,158,0.2);\n    }\n    #myuw-help__close-button:focus {\n        outline: none;\n    }\n\n    #help-button {\n      display: none;\n      justify-content: center;\n      align-content: center;\n      align-items: center;\n      position: relative;\n      cursor: pointer;\n      min-height: 42px;\n      min-width: 42px;\n      height: 42px;\n      width: 42px;\n      user-select: none;\n      outline: none;\n      padding: 0;\n      border: 0;\n      border-radius: 50%;\n      margin: 0 6px;\n      background-color: transparent;\n      -webkit-transition: background-color .3s cubic-bezier(.35,0,.25,1);\n      transition: background-color .3s cubic-bezier(.35,0,.25,1);\n    }\n\n    #help-icon {\n      color: var(--myuw-primary-color, #fff);\n      fill: var(--myuw-primary-color, #fff);\n      height: 30px;\n      width: 30px;\n    }\n\n    #help-button:hover {\n      background-color: rgba(0,0,0,0.2);\n    }\n\n    @media all and (min-width: 481px) and (max-width: 840px) {\n        #myuw-help__dialog {\n            width: 400px;\n        }\n    }\n\n    @media all and (min-width: 841px) {\n        #myuw-help__dialog {\n            width: 600px;\n        }\n    } </style> <button id="help-button" aria-label="open help dialog"> <svg id="help-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg> </button> <div id="myuw-help__dialog"> <div id="myuw-help__heading"> <h1 id="myuw-help__title"></h1> <button id="myuw-help__close-button" aria-label="close dialog"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg> </button> </div> <div id="myuw-help__content"> <slot name="myuw-help-content"></slot> <div id="myuw-help__default-content"> <ul> <li> <a href="tel:[phone]">Call the help desk</a> </li> <li> <a href="mailto:[e-mail]">Email the help desk</a> </li> <li> <a href="https://it.wisc.edu">Get help another way</a> </li> <li> <a href="https://outages.doit.wisc.edu/">Check the Outages page</a> </li> <li> <a href="https://kb.wisc.edu/">Search the KnowledgeBase</a> </li> </ul> </div> </div> </div> <div id="myuw-help__shadow"></div> ',r=document.createElement("template"),r.innerHTML=a,r),window.customElements.define("myuw-help",s)})();

package.json

 {
   "name": "@myuw-web-components/myuw-help",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "",
@@ -5,0 +5,0 @@ "module": "dist/myuw-help.min.mjs",

No alert changes

Improved metrics

Total package byte prevSize

65091

increased by0.48%

Lines of code

495

increased by0.41%

No dependency changes