New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@myuw-web-components/myuw-notifications

Package Overview
Dependencies
Maintainers
8
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.4.4 to 1.4.5

4

dist/myuw-notifications.js

@@ -176,3 +176,3 @@ var MyUWNotifications = (function (exports) {

var tpl = "<style> :host([hidden]) {\n display: none;\n}\n\n#wrapper {\n position: var( --myuw-menu-wrapper-position, relative );\n display: var( --myuw-menu-wrapper-display, inline-block );\n margin: 0px;\n}\n\n#wrapper.hidden {\n display: none;\n}\n\n#bell-button {\n display: flex;\n justify-content: var( --myuw-icon-button-justify, center );\n align-content: var( --myuw-icon-button-align-content, center );\n align-items: var( --myuw-icon-button-align-items, center );\n position: relative;\n cursor: pointer;\n min-height: var( --myuw-icon-button-height, 42px );\n min-width: var( --myuw-icon-button-width, 42px );\n height: var( --myuw-icon-button-height, 42px );\n width: var( --myuw-icon-button-width, 42px );\n user-select: none;\n outline: none;\n padding: var( --myuw-icon-button-padding, 0 );\n margin: var( --myuw-icon-button-padding, 0 6px );\n border: var( --myuw-icon-button-border, 0 );\n border-radius: var( --myuw-icon-border-radius, 50% );\n background-color: var( --myuw-icon-button-bg, transparent );\n -webkit-transition: var( --myuw-icon-button-transition, background-color .3s cubic-bezier(.35,0,.25,1) );\n transition: var( --myuw-icon-button-transition, background-color .3s cubic-bezier(.35,0,.25,1) );\n}\n\n#bell-button:hover {\n background-color: var( --myuw-icon-button-hover-bg, rgba(0,0,0,0.2) );\n}\n\n#bell-button:focus,\n#bell-button:active {\n outline: 2px solid #5e9ed6;\n outline: -webkit-focus-ring-color auto 5px;\n}\n\n#bell-icon {\n color: var(--myuw-primary-color, #fff);\n fill: var(--myuw-primary-color, #fff);\n height: var( --myuw-icon-button-icon-height, 30px );\n width: var( --myuw-icon-button-icon-width, 30px );\n}\n\n#list {\n position: var( --myuw-menu-position, absolute );\n top: var( --myuw-menu-position-top, 45px );\n right: var( --myuw-menu-position-right, 0 );\n min-width: var( --myuw-menu-width, 320px );\n list-style: var( --myuw-menu-list-style, none );\n margin: var( --myuw-menu-margin, 0 );\n padding: var( --myuw-menu-padding, 0 );\n font-size: var( --myuw-font-size, 16px );\n z-index: var( --myuw-menu-depth, 101 );\n max-height: var( --myuw-menu-height, 400px );\n overflow-y: scroll;\n\n transform-origin: var( --myuw-transform-origin, top right );\n transform: var( --myuw-menu-transform, scale(0) );\n opacity: var( --myuw-menu-opacity, 0 );\n visibility: var( --myuw-menu-visibility, hidden );\n transition: var( --myuw-menu-transition, visibility 0s, opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .25s cubic-bezier(0.0, 0.0, 0.2, 1) );\n\n -webkit-box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n -moz-box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n}\n\n#list.visible {\n transform: scale(1);\n opacity: 1;\n visibility: visible;\n}\n\n#list #see-all {\n display: flex;\n font-size: 16px;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n justify-content: space-between;\n -webkit-align-items: center;\n align-items: center;\n background-color: rgb(255,255,255);\n border-bottom: none;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n flex-direction: row;\n min-height: var( --myuw-menu-item-min-height, 48px );\n height: var( --myuw-menu-item-height, auto );\n color: #222;\n padding: 0 16px;\n}\n\n#list #see-all h1 {\n font-size: 16px;\n margin: 0;\n font-weight: 400;\n}\n\n#list #see-all.hidden {\n display: none;\n}\n\n#list #see-all:hover {\n background-color: rgb(255,255,255);\n}\n\n#list #empty-state {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n min-height: 140px;\n color: #494949;\n background-color: #ececec;\n}\n\n #count {\n position: absolute;\n top: 13px;\n color: #c5050c;\n left: 17px;\n }\n\n #list #empty-state.hidden,\n #count.hidden {\n display: none;\n }\n\n@media all and (min-width: 841px) {\n #list {\n width: 525px;\n }\n}\n\n@media all and (max-width: 460px) {\n #wrapper {\n position: initial;\n }\n #list {\n top: 4.6em;\n width: 100%;\n }\n}\n\n[hidden] {\n display: none !important;\n}\n\n#myuw-notifications-backdrop {\n display: block;\n height: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 99;\n} </style> <div id=\"myuw-notifications-backdrop\" hidden></div> <div id=\"wrapper\"> <button id=\"bell-button\" aria-label=\"Notifications list. All caught up!\" aria-haspopup=\"true\" aria-controls=\"list\" aria-expanded=\"false\"> <!-- bell svg --> <span id=\"bell-button-icon\"> <svg id=\"bell-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z\"/></svg> </span> <span id=\"count\" class=\"hidden\"></span> </button> <div id=\"list\" role=\"list\" aria-labelledby=\"bell-button\"> <div id=\"see-all\"> <h1>Notifications</h1> </div> <!-- empty state --> <div id=\"empty-state\"> <slot name=\"myuw-notifications-empty\"></slot> </div> </div> </div> ";
var tpl = "<style> :host([hidden]) {\n display: none;\n}\n\n#wrapper {\n position: var( --myuw-menu-wrapper-position, relative );\n display: var( --myuw-menu-wrapper-display, inline-block );\n margin: 0px;\n}\n\n#wrapper.hidden {\n display: none;\n}\n\n#bell-button {\n display: flex;\n justify-content: var( --myuw-icon-button-justify, center );\n align-content: var( --myuw-icon-button-align-content, center );\n align-items: var( --myuw-icon-button-align-items, center );\n position: relative;\n cursor: pointer;\n min-height: var( --myuw-icon-button-height, 42px );\n min-width: var( --myuw-icon-button-width, 42px );\n height: var( --myuw-icon-button-height, 42px );\n width: var( --myuw-icon-button-width, 42px );\n user-select: none;\n outline: none;\n padding: var( --myuw-icon-button-padding, 0 );\n margin: var( --myuw-icon-button-padding, 0 6px );\n border: var( --myuw-icon-button-border, 0 );\n border-radius: var( --myuw-icon-border-radius, 50% );\n background-color: var( --myuw-icon-button-bg, transparent );\n -webkit-transition: var( --myuw-icon-button-transition, background-color .3s cubic-bezier(.35,0,.25,1) );\n transition: var( --myuw-icon-button-transition, background-color .3s cubic-bezier(.35,0,.25,1) );\n}\n\n#bell-button:hover {\n background-color: var( --myuw-icon-button-hover-bg, rgba(0,0,0,0.2) );\n}\n\n#bell-button:focus,\n#bell-button:active {\n outline: 2px solid #5e9ed6;\n outline: -webkit-focus-ring-color auto 5px;\n}\n\n#bell-icon {\n color: var(--myuw-primary-color, #fff);\n fill: var(--myuw-primary-color, #fff);\n height: var( --myuw-icon-button-icon-height, 30px );\n width: var( --myuw-icon-button-icon-width, 30px );\n}\n\n#list {\n position: var( --myuw-menu-position, absolute );\n top: var( --myuw-menu-position-top, 45px );\n right: var( --myuw-menu-position-right, 0 );\n min-width: var( --myuw-menu-width, 320px );\n list-style: var( --myuw-menu-list-style, none );\n margin: var( --myuw-menu-margin, 0 );\n padding: var( --myuw-menu-padding, 0 );\n font-size: var( --myuw-font-size, 16px );\n z-index: var( --myuw-menu-depth, 101 );\n max-height: var( --myuw-menu-height, 400px );\n overflow-y: scroll;\n\n transform-origin: var( --myuw-transform-origin, top right );\n transform: var( --myuw-menu-transform, scale(0) );\n opacity: var( --myuw-menu-opacity, 0 );\n visibility: var( --myuw-menu-visibility, hidden );\n transition: var( --myuw-menu-transition, visibility 0s, opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .25s cubic-bezier(0.0, 0.0, 0.2, 1) );\n\n -webkit-box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n -moz-box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n}\n\n#list.visible {\n transform: scale(1);\n opacity: 1;\n visibility: visible;\n}\n\n#list #see-all {\n display: flex;\n font-size: 16px;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n justify-content: space-between;\n -webkit-align-items: center;\n align-items: center;\n background-color: rgb(255,255,255);\n border-bottom: none;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n flex-direction: row;\n min-height: var( --myuw-menu-item-min-height, 48px );\n height: var( --myuw-menu-item-height, auto );\n color: #222;\n padding: 0 16px;\n}\n\n#list #see-all h1 {\n font-size: 16px;\n margin: 0;\n font-weight: 630;\n font-family: Red Hat Display, sans-serif;\n}\n\n#list #see-all.hidden {\n display: none;\n}\n\n#list #see-all:hover {\n background-color: rgb(255,255,255);\n}\n\n#list #empty-state {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n min-height: 140px;\n color: #494949;\n background-color: #ececec;\n}\n\n #count {\n position: absolute;\n top: 13px;\n color: #c5050c;\n left: 17px;\n }\n\n #list #empty-state.hidden,\n #count.hidden {\n display: none;\n }\n\n@media all and (min-width: 841px) {\n #list {\n width: 525px;\n }\n}\n\n@media all and (max-width: 460px) {\n #wrapper {\n position: initial;\n }\n #list {\n top: 4.6em;\n width: 100%;\n }\n}\n\n[hidden] {\n display: none !important;\n}\n\n#myuw-notifications-backdrop {\n display: block;\n height: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 99;\n} </style> <div id=\"myuw-notifications-backdrop\" hidden></div> <div id=\"wrapper\"> <button id=\"bell-button\" aria-label=\"Notifications list. All caught up!\" aria-haspopup=\"true\" aria-controls=\"list\" aria-expanded=\"false\"> <!-- bell svg --> <span id=\"bell-button-icon\"> <svg id=\"bell-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z\"/></svg> </span> <span id=\"count\" class=\"hidden\"></span> </button> <div id=\"list\" role=\"list\" aria-labelledby=\"bell-button\"> <div id=\"see-all\"> <h1>Notifications</h1> </div> <!-- empty state --> <div id=\"empty-state\"> <slot name=\"myuw-notifications-empty\"></slot> </div> </div> </div> ";

@@ -606,3 +606,3 @@ var MyUWNotifications = /*#__PURE__*/function (_HTMLElement) {

var tpl$1 = "<style> :host([hidden]) {\n display: none;\n }\n\n #notification {\n transition: var( --myuw-menu-item-transition, all .3s ease );\n position: relative;\n font-size: var( --myuw-menu-item-font-size, 16px );\n font-family: var( --myuw-profile-font, var(--myuw-font, 'Red Hat Display', sans-serif) );\n padding: var( --myuw-menu-item-padding, 3px 16px );\n color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n text-decoration: none;\n background-color: var(--myuw-menu-item-bg-color, #f5f5f5 );\n border-bottom: var(--myuw-menu-item-divider, 1px solid #e5e5e5 );\n user-select: none;\n outline: none;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n flex-direction: row;\n min-height: var( --myuw-menu-item-height, 48px );\n height: var( --myuw-menu-item-height, auto );\n -webkit-align-content: center;\n align-content: center;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: space-between;\n justify-content: space-between;\n }\n\n #notification:hover,\n #notification:focus {\n background-color: var( --myuw-menu-item-hover-bg, #ececec );\n }\n\n #content {\n width: var( --myuw-notification-content-width, 80% );\n max-width: var( --myuw-notification-content-width, 80% );\n -webkit-flex-direction: var( --myuw-notification-content-flex-direction, column );\n flex-direction: var( --myuw-notification-content-flex-direction, column );\n }\n\n #body {\n font-size: var( --myuw-notification-body-font-size, 16px );\n margin-bottom: 6px;\n }\n\n #actions a {\n /* general material button css */\n display: inline-block;\n position: relative;\n cursor: pointer;\n text-align: center;\n border-radius: 3px;\n border: 0;\n padding: 0 6px;\n margin: 6px 8px;\n background: transparent;\n white-space: nowrap;\n overflow: hidden;\n text-decoration: none;\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 /* notifications-specific css */\n line-height: 28px;\n min-width: 60px;\n min-height: 28px;\n font-size: 16px;\n font-weight: 500;\n margin-left: 0;\n }\n\n #actions a[hidden] {\n display: none;\n }\n\n #actions #action {\n color: var( --myuw-accent-button-color, #fafafa );\n background-color: var( --myuw-accent-button-bg, #0479a8 );\n box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n }\n\n #actions #action:hover {\n background-color: var( --myuw-accent-button-hover-bg, rgb(3,78,108) );\n }\n\n #actions #moreInfo,\n #actions #confirm {\n color: #222;\n }\n\n #actions #moreInfo:hover,\n #actions #confirm:hover {\n background-color: #0000001c;\n }\n\n #dismiss {\n display: flex;\n justify-content: var( --myuw-icon-button-justify, center );\n align-content: var( --myuw-icon-button-align-content, center );\n align-items: var( --myuw-icon-button-align-items, center );\n position: relative;\n cursor: pointer;\n min-height: var( --myuw-icon-button-height, 42px );\n min-width: var( --myuw-icon-button-width, 42px );\n height: var( --myuw-icon-button-height, 42px );\n width: var( --myuw-icon-button-width, 42px );\n max-width: var( --myuw-notification-dismiss-width, 20% );\n user-select: none;\n outline: none;\n padding: var( --myuw-icon-button-padding, 0 );\n margin: var( --myuw-icon-button-padding, 0 6px );\n border: var( --myuw-icon-button-border, 0 );\n background-color: var( --myuw-icon-button-bg, transparent );\n }\n\n #dismiss svg {\n fill: var( --myuw-notification-dismiss-color, rgba(0,0,0,0.54) );\n -webkit-transition: color .3s cubic-bezier(.35,0,.25,1);\n transition: color .3s cubic-bezier(.35,0,.25,1);\n }\n\n #dismiss svg:hover {\n fill: var( --myuw-notification-dismiss-hover-color, #333 );\n }\n\n #dismiss:focus {\n background-color: var( --myuw-icon-button-hover-bg, rgba(0,0,0,0.2) );\n outline: 2px solid #5e9ed6;\n outline: -webkit-focus-ring-color auto 5px;\n }\n\n .hidden {\n display: none;\n }\n\n .inner-content {\n display:flex;\n align-items: start;\n }\n\n #notification__priority-message {\n margin: 16px 8px 0px 0px;\n } </style> <div role=\"listitem\" id=\"notification\"> <div id=\"content\"> <div class=\"inner-content\"> <span id=\"notification__priority-message\" class=\"hidden\" aria-label=\"Notification with priority status\"> <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"black\" width=\"24px\" height=\"24px\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg> </span> <p id=\"body\"></p> </div> <div id=\"actions\"> <a id=\"action\" target=\"_blank\" rel=\"noopener noreferrer\"></a> <a id=\"moreInfo\" target=\"_blank\" rel=\"noopener noreferrer\"></a> <a id=\"confirm\" target=\"_blank\" rel=\"noopener noreferrer\"></a> </div> </div> <button id=\"dismiss\" aria-label=\"dismiss notification\"> <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> ";
var tpl$1 = "<style> :host([hidden]) {\n display: none;\n }\n\n #notification {\n transition: var( --myuw-menu-item-transition, all .3s ease );\n position: relative;\n font-size: var( --myuw-menu-item-font-size, 16px );\n font-family: var( --myuw-profile-font, var(--myuw-font, 'Red Hat Text', sans-serif) );\n padding: var( --myuw-menu-item-padding, 3px 16px );\n color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n text-decoration: none;\n background-color: var(--myuw-menu-item-bg-color, #f5f5f5 );\n border-bottom: var(--myuw-menu-item-divider, 1px solid #e5e5e5 );\n user-select: none;\n outline: none;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n flex-direction: row;\n min-height: var( --myuw-menu-item-height, 48px );\n height: var( --myuw-menu-item-height, auto );\n -webkit-align-content: center;\n align-content: center;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: space-between;\n justify-content: space-between;\n }\n\n #notification:hover,\n #notification:focus {\n background-color: var( --myuw-menu-item-hover-bg, #ececec );\n }\n\n #content {\n width: var( --myuw-notification-content-width, 80% );\n max-width: var( --myuw-notification-content-width, 80% );\n -webkit-flex-direction: var( --myuw-notification-content-flex-direction, column );\n flex-direction: var( --myuw-notification-content-flex-direction, column );\n }\n\n #body {\n font-size: var( --myuw-notification-body-font-size, 16px );\n margin-bottom: 6px;\n }\n\n #actions a {\n /* general material button css */\n display: inline-block;\n position: relative;\n cursor: pointer;\n text-align: center;\n border-radius: 3px;\n border: 0;\n padding: 0 6px;\n margin: 6px 8px;\n background: transparent;\n white-space: nowrap;\n overflow: hidden;\n text-decoration: none;\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 /* notifications-specific css */\n line-height: 28px;\n min-width: 60px;\n min-height: 28px;\n font-size: 16px;\n font-weight: 620;\n margin-left: 0;\n }\n\n #actions a[hidden] {\n display: none;\n }\n\n #actions #action {\n color: var( --myuw-accent-button-color, #fafafa );\n background-color: var( --myuw-accent-button-bg, #0479a8 );\n box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n }\n\n #actions #action:hover {\n background-color: var( --myuw-accent-button-hover-bg, rgb(3,78,108) );\n }\n\n #actions #moreInfo,\n #actions #confirm {\n color: #222;\n }\n\n #actions #moreInfo:hover,\n #actions #confirm:hover {\n background-color: #0000001c;\n }\n\n #dismiss {\n display: flex;\n justify-content: var( --myuw-icon-button-justify, center );\n align-content: var( --myuw-icon-button-align-content, center );\n align-items: var( --myuw-icon-button-align-items, center );\n position: relative;\n cursor: pointer;\n min-height: var( --myuw-icon-button-height, 42px );\n min-width: var( --myuw-icon-button-width, 42px );\n height: var( --myuw-icon-button-height, 42px );\n width: var( --myuw-icon-button-width, 42px );\n max-width: var( --myuw-notification-dismiss-width, 20% );\n user-select: none;\n outline: none;\n padding: var( --myuw-icon-button-padding, 0 );\n margin: var( --myuw-icon-button-padding, 0 6px );\n border: var( --myuw-icon-button-border, 0 );\n background-color: var( --myuw-icon-button-bg, transparent );\n }\n\n #dismiss svg {\n fill: var( --myuw-notification-dismiss-color, rgba(0,0,0,0.54) );\n -webkit-transition: color .3s cubic-bezier(.35,0,.25,1);\n transition: color .3s cubic-bezier(.35,0,.25,1);\n }\n\n #dismiss svg:hover {\n fill: var( --myuw-notification-dismiss-hover-color, #333 );\n }\n\n #dismiss:focus {\n background-color: var( --myuw-icon-button-hover-bg, rgba(0,0,0,0.2) );\n outline: 2px solid #5e9ed6;\n outline: -webkit-focus-ring-color auto 5px;\n }\n\n .hidden {\n display: none;\n }\n\n .inner-content {\n display:flex;\n align-items: start;\n }\n\n #notification__priority-message {\n margin: 16px 8px 0px 0px;\n } </style> <div role=\"listitem\" id=\"notification\"> <div id=\"content\"> <div class=\"inner-content\"> <span id=\"notification__priority-message\" class=\"hidden\" aria-label=\"Notification with priority status\"> <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"black\" width=\"24px\" height=\"24px\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg> </span> <p id=\"body\"></p> </div> <div id=\"actions\"> <a id=\"action\" target=\"_blank\" rel=\"noopener noreferrer\"></a> <a id=\"moreInfo\" target=\"_blank\" rel=\"noopener noreferrer\"></a> <a id=\"confirm\" target=\"_blank\" rel=\"noopener noreferrer\"></a> </div> </div> <button id=\"dismiss\" aria-label=\"dismiss notification\"> <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> ";

@@ -609,0 +609,0 @@ var MyUWNotification = /*#__PURE__*/function (_HTMLElement) {

2

dist/myuw-notifications.min.js

@@ -1,1 +0,1 @@

var MyUWNotifications=(function(t){"use strict";function n(t){"@babel/helpers - typeof";return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}function e(t,n){for(var i=0;i<n.length;i++){var e=n[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(t,e.key,e)}}function o(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}function a(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&&r(t,n)}function s(t){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function r(t,n){return(r=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function l(){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}}function c(t,n,i){return(c=l()?Reflect.construct:function(t,n,i){var e=[null];e.push.apply(e,n);var o=new(Function.bind.apply(t,e));return i&&r(o,i.prototype),o}).apply(null,arguments)}function u(t){var n="function"==typeof Map?new Map:void 0;return(u=function(t){if(null===t||(i=t,-1===Function.toString.call(i).indexOf("[native code]")))return t;var i;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,e)}function e(){return c(t,arguments,s(this).constructor)}return e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r(e,t)})(t)}function d(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}function h(t){var n=l();return function(){var i,e=s(t);if(n){var o=s(this).constructor;i=Reflect.construct(e,arguments,o)}else i=e.apply(this,arguments);return d(this,i)}}var m,b,f=(function(t){a(s,u(HTMLElement));var e=h(s);function s(){var t;return i(this,s),(t=e.call(this)).attachShadow({mode:"open"}),t.shadowRoot.appendChild(s.template.content.cloneNode(!0)),t}return o(s,[{key:"attributeChangedCallback",value:function(t,n,i){this[t]=i}},{key:"connectedCallback",value:function(){var t=this;this["see-all-url"]=this.getAttribute("see-all-url"),this.limit=this.getAttribute("limit")||999,this.$list=this.shadowRoot.getElementById("list"),this.$bell=this.shadowRoot.getElementById("bell-button"),this.$bellIcon=this.shadowRoot.getElementById("bell-button-icon"),this.$backdrop=this.shadowRoot.getElementById("myuw-notifications-backdrop"),this.$itemSlot=this.shadowRoot.querySelector('slot[name="myuw-notification-items"]'),this.$count=this.shadowRoot.getElementById("count"),this.$wrapper=this.shadowRoot.getElementById("wrapper"),this.$seeAllWrapper=this.shadowRoot.getElementById("see-all"),this.$seeAllLink=document.createElement("a"),this.$emptyState=this.shadowRoot.getElementById("empty-state"),this.$notificationIds=[],this.$notificationsCount=this.$notificationIds.length,this["see-all-url"]&&(this.$seeAllLink.setAttribute("href",this["see-all-url"]),this.$seeAllLink.innerText="See all",this.$seeAllWrapper.appendChild(this.$seeAllLink)),document.addEventListener("myuw-has-notifications",function(n){n.detail.notifications?t.componentReady(n.detail.notifications):t.componentReady()},!1),document.addEventListener("myuw-notification-dismissed",function(n){if(n.detail.notificationId){var i=t.$notificationIds.indexOf(n.detail.notificationId);t.$notificationIds.splice(i,1),t.$count.innerHTML=t.$notificationIds.length,t.$bell.setAttribute("aria-label","Notifications list. You have "+t.$notificationIds.length+" notifications."),n.detail.dismissedFromOutside&&t.$list.removeChild(t.$list.getElementsByTagName("myuw-notification")[i]),t.$notificationIds.length<=0&&(t.$emptyState.classList.remove("hidden"),t.$count.classList.add("hidden"),t.$bell.setAttribute("aria-label","Notifications list. All caught up!"),t.$bellIcon.innerHTML='\n <svg id="bell-icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/></svg>')}},!1),window.addEventListener("click",function(n){t.$list.classList.contains("visible")&&(t.$list.classList.remove("visible"),t.$bell.setAttribute("aria-expanded","false"),t.$list.setAttribute("tabindex","-1"),t.$backdrop.hidden=!0)}),this.$list.addEventListener("click",function(t){t.stopPropagation()}),this.$bell.addEventListener("click",function(n){window.matchMedia("(max-width: 460px)").matches&&t["see-all-url"]?window.history.pushState("notifications","Notifications",t["see-all-url"]):t.closeMenu(n)}),window.addEventListener("keyup",function(n){t.handleKeydownOutsideComponent(n)}),this.addEventListener("keydown",function(n){t.handleKeydown(n)})}},{key:"closeMenu",value:function(t){t.stopPropagation(),this.$list.classList.toggle("visible"),this.$list.classList.contains("visible")?(this.$backdrop.hidden=!1,this.$list.focus(),this.$list.removeAttribute("tabindex"),this.$bell.setAttribute("aria-expanded","true")):(this.$list.blur(),this.$list.setAttribute("tabindex","-1"),this.$bell.setAttribute("aria-expanded","false"),this.$backdrop.hidden=!0)}},{key:"getFocusableElements",value:function(){this.contentSlotElement=Array.from(this.shadowRoot.querySelectorAll("myuw-notification[slot=myuw-notification-items]"));var t=this.contentSlotElement.reduce(function(t,n){return n.shadowRoot.querySelectorAll("li").forEach(function(n){return t.push(n)}),t},[]);return t.unshift(this.$seeAllLink),t.push(this.$bell),t}},{key:"focusNext",value:function(){this.focusableElements=this.getFocusableElements();var t=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement,n=this.focusableElements.indexOf(t.shadowRoot?t.shadowRoot.querySelector("li"):t);n===this.focusableElements.length-1||-1===n?this.focusableElements[0].focus():this.focusableElements[n+1].focus()}},{key:"focusPrevious",value:function(){this.focusableElements=this.getFocusableElements();var t=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement,n=this.focusableElements.indexOf(t.shadowRoot?t.shadowRoot.querySelector("li"):t);0===n||-1===n?this.focusableElements[this.focusableElements.length-1].focus():this.focusableElements[n-1].focus()}},{key:"autoCloseMenu",value:function(t){this.focusableElements=this.getFocusableElements();var n=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement;-1==this.focusableElements.indexOf(n.shadowRoot?n.shadowRoot.querySelector("li"):n)&&!["BODY","MYUW-NOTIFICATIONS"].includes(document.activeElement.nodeName)&&this.$list.classList.contains("visible")&&this.closeMenu(t)}},{key:"handleKeydown",value:function(t){switch(t.key){default:return;case"Escape":this.closeMenu(t);break;case"ArrowDown":this.focusNext();break;case"ArrowUp":this.focusPrevious()}t.stopPropagation()}},{key:"handleKeydownOutsideComponent",value:function(t){switch(t.key){default:return;case"Tab":this.autoCloseMenu(t)}t.stopPropagation()}},{key:"componentReady",value:function(t){if("object"===n(t)&&t.length>0){var i;this.$count.innerHTML=t.length,this.$count.classList.remove("hidden"),this.$bell.setAttribute("aria-label","Notifications list. You have "+t.length+" notifications.");var e=0,o=this.limit,a=Function.prototype.bind.call(console.debug,console);for(var s in t){if(!t[s].id)return;if(-1!==this.$notificationIds.indexOf(t[s].id))return void a.apply(console,["Received duplicate notification id"]);this.$notificationIds.push(t[s].id),(i=document.createElement("myuw-notification")).setAttribute("myuw-notification-id",t[s].id),i.setAttribute("slot","myuw-notification-items"),t[s].title&&i.setAttribute("body",t[s].title),t[s].priority&&i.setAttribute("priority",t[s].priority),t[s].actionButton&&(i.setAttribute("action-button-url",t[s].actionButton.url),i.setAttribute("action-button-label",t[s].actionButton.label)),t[s].moreInfoButton&&(i.setAttribute("info-button-url",t[s].moreInfoButton.url),i.setAttribute("info-button-label",t[s].moreInfoButton.label)),t[s].confirmButton&&(i.setAttribute("confirm-button-url",t[s].confirmButton.url),i.setAttribute("confirm-button-label",t[s].confirmButton.label)),e<o&&(this.$list.appendChild(i),e+=1)}this.$bellIcon.innerHTML='\n <svg id="bell-icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>\n </svg>',this.$emptyState.classList.add("hidden")}}}],[{key:"observedAttributes",get:function(){return[]}}]),s})();f.template=(m='<style> :host([hidden]) {\n display: none;\n}\n\n#wrapper {\n position: var( --myuw-menu-wrapper-position, relative );\n display: var( --myuw-menu-wrapper-display, inline-block );\n margin: 0px;\n}\n\n#wrapper.hidden {\n display: none;\n}\n\n#bell-button {\n display: flex;\n justify-content: var( --myuw-icon-button-justify, center );\n align-content: var( --myuw-icon-button-align-content, center );\n align-items: var( --myuw-icon-button-align-items, center );\n position: relative;\n cursor: pointer;\n min-height: var( --myuw-icon-button-height, 42px );\n min-width: var( --myuw-icon-button-width, 42px );\n height: var( --myuw-icon-button-height, 42px );\n width: var( --myuw-icon-button-width, 42px );\n user-select: none;\n outline: none;\n padding: var( --myuw-icon-button-padding, 0 );\n margin: var( --myuw-icon-button-padding, 0 6px );\n border: var( --myuw-icon-button-border, 0 );\n border-radius: var( --myuw-icon-border-radius, 50% );\n background-color: var( --myuw-icon-button-bg, transparent );\n -webkit-transition: var( --myuw-icon-button-transition, background-color .3s cubic-bezier(.35,0,.25,1) );\n transition: var( --myuw-icon-button-transition, background-color .3s cubic-bezier(.35,0,.25,1) );\n}\n\n#bell-button:hover {\n background-color: var( --myuw-icon-button-hover-bg, rgba(0,0,0,0.2) );\n}\n\n#bell-button:focus,\n#bell-button:active {\n outline: 2px solid #5e9ed6;\n outline: -webkit-focus-ring-color auto 5px;\n}\n\n#bell-icon {\n color: var(--myuw-primary-color, #fff);\n fill: var(--myuw-primary-color, #fff);\n height: var( --myuw-icon-button-icon-height, 30px );\n width: var( --myuw-icon-button-icon-width, 30px );\n}\n\n#list {\n position: var( --myuw-menu-position, absolute );\n top: var( --myuw-menu-position-top, 45px );\n right: var( --myuw-menu-position-right, 0 );\n min-width: var( --myuw-menu-width, 320px );\n list-style: var( --myuw-menu-list-style, none );\n margin: var( --myuw-menu-margin, 0 );\n padding: var( --myuw-menu-padding, 0 );\n font-size: var( --myuw-font-size, 16px );\n z-index: var( --myuw-menu-depth, 101 );\n max-height: var( --myuw-menu-height, 400px );\n overflow-y: scroll;\n\n transform-origin: var( --myuw-transform-origin, top right );\n transform: var( --myuw-menu-transform, scale(0) );\n opacity: var( --myuw-menu-opacity, 0 );\n visibility: var( --myuw-menu-visibility, hidden );\n transition: var( --myuw-menu-transition, visibility 0s, opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .25s cubic-bezier(0.0, 0.0, 0.2, 1) );\n\n -webkit-box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n -moz-box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n}\n\n#list.visible {\n transform: scale(1);\n opacity: 1;\n visibility: visible;\n}\n\n#list #see-all {\n display: flex;\n font-size: 16px;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n justify-content: space-between;\n -webkit-align-items: center;\n align-items: center;\n background-color: rgb(255,255,255);\n border-bottom: none;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n flex-direction: row;\n min-height: var( --myuw-menu-item-min-height, 48px );\n height: var( --myuw-menu-item-height, auto );\n color: #222;\n padding: 0 16px;\n}\n\n#list #see-all h1 {\n font-size: 16px;\n margin: 0;\n font-weight: 400;\n}\n\n#list #see-all.hidden {\n display: none;\n}\n\n#list #see-all:hover {\n background-color: rgb(255,255,255);\n}\n\n#list #empty-state {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n min-height: 140px;\n color: #494949;\n background-color: #ececec;\n}\n\n #count {\n position: absolute;\n top: 13px;\n color: #c5050c;\n left: 17px;\n }\n\n #list #empty-state.hidden,\n #count.hidden {\n display: none;\n }\n\n@media all and (min-width: 841px) {\n #list {\n width: 525px;\n }\n}\n\n@media all and (max-width: 460px) {\n #wrapper {\n position: initial;\n }\n #list {\n top: 4.6em;\n width: 100%;\n }\n}\n\n[hidden] {\n display: none !important;\n}\n\n#myuw-notifications-backdrop {\n display: block;\n height: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 99;\n} </style> <div id="myuw-notifications-backdrop" hidden></div> <div id="wrapper"> <button id="bell-button" aria-label="Notifications list. All caught up!" aria-haspopup="true" aria-controls="list" aria-expanded="false"> \x3c!-- bell svg --\x3e <span id="bell-button-icon"> <svg id="bell-icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/></svg> </span> <span id="count" class="hidden"></span> </button> <div id="list" role="list" aria-labelledby="bell-button"> <div id="see-all"> <h1>Notifications</h1> </div> \x3c!-- empty state --\x3e <div id="empty-state"> <slot name="myuw-notifications-empty"></slot> </div> </div> </div> ',b=document.createElement("template"),b.innerHTML=m,b),(function(){if("function"==typeof window.CustomEvent)return!1;function t(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),i}t.prototype=window.Event.prototype,window.CustomEvent=t})(),window.customElements.define("myuw-notifications",f);var p=(function(t){a(e,u(HTMLElement));var n=h(e);function e(){var t;return i(this,e),(t=n.call(this)).connected=!1,t.attachShadow({mode:"open"}),t.shadowRoot.appendChild(e.template.content.cloneNode(!0)),t}return o(e,[{key:"attributeChangedCallback",value:function(t,n,i){n!==i&&(this[t]=i,this.updateComponent(t,i))}},{key:"connectedCallback",value:function(){this.notificationId=this.getAttribute("myuw-notification-id")||null,this.body=this.getAttribute("body")||null,this.priorityMessage=this.getAttribute("priority")||null,this.actionUrl=this.getAttribute("action-button-url")||null,this.actionLabel=this.getAttribute("action-button-label")||null,this.infoUrl=this.getAttribute("info-button-url")||null,this.infoLabel=this.getAttribute("info-button-label")||null,this.confirmUrl=this.getAttribute("confirm-button-url")||null,this.confirmLabel=this.getAttribute("confirm-button-label")||null,this.$dismissButton=this.shadowRoot.getElementById("dismiss"),this.$body=this.shadowRoot.querySelector("p#body"),this.$actionButton=this.shadowRoot.querySelector("a#action"),this.$infoButton=this.shadowRoot.querySelector("a#moreInfo"),this.$confirmButton=this.shadowRoot.querySelector("a#confirm"),this.$priorityNotification=this.shadowRoot.getElementById("notification__priority-message"),this.$body.innerText=this.body,this.priorityMessage&&this.$priorityNotification.classList.remove("hidden"),this.actionUrl&&this.actionLabel?(this.$actionButton.innerText=this.actionLabel,this.$actionButton.setAttribute("href",this.actionUrl),this.$actionButton.hidden=!1):this.$actionButton.hidden=!0,this.infoUrl&&this.infoLabel?(this.$infoButton.innerText=this.infoLabel,this.$infoButton.setAttribute("href",this.infoUrl),this.$infoButton.hidden=!1):this.$infoButton.hidden=!0,this.confirmUrl&&this.confirmLabel?(this.$confirmButton.innerText=this.confirmLabel,this.$confirmButton.setAttribute("href",this.confirmUrl),this.$confirmButton.hidden=!1):this.$confirmButton.hidden=!0,this.$dismissButton.addEventListener("click",this.dismissNotification.bind(this,this.notificationId)),this.connected=!0}},{key:"disconnectedCallback",value:function(){}},{key:"updateComponent",value:function(t,n){this.connected}},{key:"dismissNotification",value:function(t){this.parentNode.removeChild(this);var n=new CustomEvent("myuw-notification-dismissed",{bubbles:!0,detail:{notificationId:t}});document.dispatchEvent(n)}}],[{key:"observedAttributes",get:function(){return[]}}]),e})();return p.template=(function(t){var n=document.createElement("template");return n.innerHTML=t,n})('<style> :host([hidden]) {\n display: none;\n }\n\n #notification {\n transition: var( --myuw-menu-item-transition, all .3s ease );\n position: relative;\n font-size: var( --myuw-menu-item-font-size, 16px );\n font-family: var( --myuw-profile-font, var(--myuw-font, \'Red Hat Display\', sans-serif) );\n padding: var( --myuw-menu-item-padding, 3px 16px );\n color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n text-decoration: none;\n background-color: var(--myuw-menu-item-bg-color, #f5f5f5 );\n border-bottom: var(--myuw-menu-item-divider, 1px solid #e5e5e5 );\n user-select: none;\n outline: none;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n flex-direction: row;\n min-height: var( --myuw-menu-item-height, 48px );\n height: var( --myuw-menu-item-height, auto );\n -webkit-align-content: center;\n align-content: center;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: space-between;\n justify-content: space-between;\n }\n\n #notification:hover,\n #notification:focus {\n background-color: var( --myuw-menu-item-hover-bg, #ececec );\n }\n\n #content {\n width: var( --myuw-notification-content-width, 80% );\n max-width: var( --myuw-notification-content-width, 80% );\n -webkit-flex-direction: var( --myuw-notification-content-flex-direction, column );\n flex-direction: var( --myuw-notification-content-flex-direction, column );\n }\n\n #body {\n font-size: var( --myuw-notification-body-font-size, 16px );\n margin-bottom: 6px;\n }\n\n #actions a {\n /* general material button css */\n display: inline-block;\n position: relative;\n cursor: pointer;\n text-align: center;\n border-radius: 3px;\n border: 0;\n padding: 0 6px;\n margin: 6px 8px;\n background: transparent;\n white-space: nowrap;\n overflow: hidden;\n text-decoration: none;\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 /* notifications-specific css */\n line-height: 28px;\n min-width: 60px;\n min-height: 28px;\n font-size: 16px;\n font-weight: 500;\n margin-left: 0;\n }\n\n #actions a[hidden] {\n display: none;\n }\n\n #actions #action {\n color: var( --myuw-accent-button-color, #fafafa );\n background-color: var( --myuw-accent-button-bg, #0479a8 );\n box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n }\n\n #actions #action:hover {\n background-color: var( --myuw-accent-button-hover-bg, rgb(3,78,108) );\n }\n\n #actions #moreInfo,\n #actions #confirm {\n color: #222;\n }\n\n #actions #moreInfo:hover,\n #actions #confirm:hover {\n background-color: #0000001c;\n }\n\n #dismiss {\n display: flex;\n justify-content: var( --myuw-icon-button-justify, center );\n align-content: var( --myuw-icon-button-align-content, center );\n align-items: var( --myuw-icon-button-align-items, center );\n position: relative;\n cursor: pointer;\n min-height: var( --myuw-icon-button-height, 42px );\n min-width: var( --myuw-icon-button-width, 42px );\n height: var( --myuw-icon-button-height, 42px );\n width: var( --myuw-icon-button-width, 42px );\n max-width: var( --myuw-notification-dismiss-width, 20% );\n user-select: none;\n outline: none;\n padding: var( --myuw-icon-button-padding, 0 );\n margin: var( --myuw-icon-button-padding, 0 6px );\n border: var( --myuw-icon-button-border, 0 );\n background-color: var( --myuw-icon-button-bg, transparent );\n }\n\n #dismiss svg {\n fill: var( --myuw-notification-dismiss-color, rgba(0,0,0,0.54) );\n -webkit-transition: color .3s cubic-bezier(.35,0,.25,1);\n transition: color .3s cubic-bezier(.35,0,.25,1);\n }\n\n #dismiss svg:hover {\n fill: var( --myuw-notification-dismiss-hover-color, #333 );\n }\n\n #dismiss:focus {\n background-color: var( --myuw-icon-button-hover-bg, rgba(0,0,0,0.2) );\n outline: 2px solid #5e9ed6;\n outline: -webkit-focus-ring-color auto 5px;\n }\n\n .hidden {\n display: none;\n }\n\n .inner-content {\n display:flex;\n align-items: start;\n }\n\n #notification__priority-message {\n margin: 16px 8px 0px 0px;\n } </style> <div role="listitem" id="notification"> <div id="content"> <div class="inner-content"> <span id="notification__priority-message" class="hidden" aria-label="Notification with priority status"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg> </span> <p id="body"></p> </div> <div id="actions"> <a id="action" target="_blank" rel="noopener noreferrer"></a> <a id="moreInfo" target="_blank" rel="noopener noreferrer"></a> <a id="confirm" target="_blank" rel="noopener noreferrer"></a> </div> </div> <button id="dismiss" aria-label="dismiss notification"> <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> '),window.customElements.define("myuw-notification",p),t.MyUWNotification=p,t.MyUWNotifications=f,t})({});
var MyUWNotifications=(function(t){"use strict";function n(t){"@babel/helpers - typeof";return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}function e(t,n){for(var i=0;i<n.length;i++){var e=n[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(t,e.key,e)}}function o(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}function a(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&&r(t,n)}function s(t){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function r(t,n){return(r=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function l(){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}}function c(t,n,i){return(c=l()?Reflect.construct:function(t,n,i){var e=[null];e.push.apply(e,n);var o=new(Function.bind.apply(t,e));return i&&r(o,i.prototype),o}).apply(null,arguments)}function u(t){var n="function"==typeof Map?new Map:void 0;return(u=function(t){if(null===t||(i=t,-1===Function.toString.call(i).indexOf("[native code]")))return t;var i;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,e)}function e(){return c(t,arguments,s(this).constructor)}return e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r(e,t)})(t)}function d(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}function h(t){var n=l();return function(){var i,e=s(t);if(n){var o=s(this).constructor;i=Reflect.construct(e,arguments,o)}else i=e.apply(this,arguments);return d(this,i)}}var m,b,f=(function(t){a(s,u(HTMLElement));var e=h(s);function s(){var t;return i(this,s),(t=e.call(this)).attachShadow({mode:"open"}),t.shadowRoot.appendChild(s.template.content.cloneNode(!0)),t}return o(s,[{key:"attributeChangedCallback",value:function(t,n,i){this[t]=i}},{key:"connectedCallback",value:function(){var t=this;this["see-all-url"]=this.getAttribute("see-all-url"),this.limit=this.getAttribute("limit")||999,this.$list=this.shadowRoot.getElementById("list"),this.$bell=this.shadowRoot.getElementById("bell-button"),this.$bellIcon=this.shadowRoot.getElementById("bell-button-icon"),this.$backdrop=this.shadowRoot.getElementById("myuw-notifications-backdrop"),this.$itemSlot=this.shadowRoot.querySelector('slot[name="myuw-notification-items"]'),this.$count=this.shadowRoot.getElementById("count"),this.$wrapper=this.shadowRoot.getElementById("wrapper"),this.$seeAllWrapper=this.shadowRoot.getElementById("see-all"),this.$seeAllLink=document.createElement("a"),this.$emptyState=this.shadowRoot.getElementById("empty-state"),this.$notificationIds=[],this.$notificationsCount=this.$notificationIds.length,this["see-all-url"]&&(this.$seeAllLink.setAttribute("href",this["see-all-url"]),this.$seeAllLink.innerText="See all",this.$seeAllWrapper.appendChild(this.$seeAllLink)),document.addEventListener("myuw-has-notifications",function(n){n.detail.notifications?t.componentReady(n.detail.notifications):t.componentReady()},!1),document.addEventListener("myuw-notification-dismissed",function(n){if(n.detail.notificationId){var i=t.$notificationIds.indexOf(n.detail.notificationId);t.$notificationIds.splice(i,1),t.$count.innerHTML=t.$notificationIds.length,t.$bell.setAttribute("aria-label","Notifications list. You have "+t.$notificationIds.length+" notifications."),n.detail.dismissedFromOutside&&t.$list.removeChild(t.$list.getElementsByTagName("myuw-notification")[i]),t.$notificationIds.length<=0&&(t.$emptyState.classList.remove("hidden"),t.$count.classList.add("hidden"),t.$bell.setAttribute("aria-label","Notifications list. All caught up!"),t.$bellIcon.innerHTML='\n <svg id="bell-icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/></svg>')}},!1),window.addEventListener("click",function(n){t.$list.classList.contains("visible")&&(t.$list.classList.remove("visible"),t.$bell.setAttribute("aria-expanded","false"),t.$list.setAttribute("tabindex","-1"),t.$backdrop.hidden=!0)}),this.$list.addEventListener("click",function(t){t.stopPropagation()}),this.$bell.addEventListener("click",function(n){window.matchMedia("(max-width: 460px)").matches&&t["see-all-url"]?window.history.pushState("notifications","Notifications",t["see-all-url"]):t.closeMenu(n)}),window.addEventListener("keyup",function(n){t.handleKeydownOutsideComponent(n)}),this.addEventListener("keydown",function(n){t.handleKeydown(n)})}},{key:"closeMenu",value:function(t){t.stopPropagation(),this.$list.classList.toggle("visible"),this.$list.classList.contains("visible")?(this.$backdrop.hidden=!1,this.$list.focus(),this.$list.removeAttribute("tabindex"),this.$bell.setAttribute("aria-expanded","true")):(this.$list.blur(),this.$list.setAttribute("tabindex","-1"),this.$bell.setAttribute("aria-expanded","false"),this.$backdrop.hidden=!0)}},{key:"getFocusableElements",value:function(){this.contentSlotElement=Array.from(this.shadowRoot.querySelectorAll("myuw-notification[slot=myuw-notification-items]"));var t=this.contentSlotElement.reduce(function(t,n){return n.shadowRoot.querySelectorAll("li").forEach(function(n){return t.push(n)}),t},[]);return t.unshift(this.$seeAllLink),t.push(this.$bell),t}},{key:"focusNext",value:function(){this.focusableElements=this.getFocusableElements();var t=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement,n=this.focusableElements.indexOf(t.shadowRoot?t.shadowRoot.querySelector("li"):t);n===this.focusableElements.length-1||-1===n?this.focusableElements[0].focus():this.focusableElements[n+1].focus()}},{key:"focusPrevious",value:function(){this.focusableElements=this.getFocusableElements();var t=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement,n=this.focusableElements.indexOf(t.shadowRoot?t.shadowRoot.querySelector("li"):t);0===n||-1===n?this.focusableElements[this.focusableElements.length-1].focus():this.focusableElements[n-1].focus()}},{key:"autoCloseMenu",value:function(t){this.focusableElements=this.getFocusableElements();var n=this.isSameNode(document.activeElement)?this.shadowRoot.activeElement:document.activeElement;-1==this.focusableElements.indexOf(n.shadowRoot?n.shadowRoot.querySelector("li"):n)&&!["BODY","MYUW-NOTIFICATIONS"].includes(document.activeElement.nodeName)&&this.$list.classList.contains("visible")&&this.closeMenu(t)}},{key:"handleKeydown",value:function(t){switch(t.key){default:return;case"Escape":this.closeMenu(t);break;case"ArrowDown":this.focusNext();break;case"ArrowUp":this.focusPrevious()}t.stopPropagation()}},{key:"handleKeydownOutsideComponent",value:function(t){switch(t.key){default:return;case"Tab":this.autoCloseMenu(t)}t.stopPropagation()}},{key:"componentReady",value:function(t){if("object"===n(t)&&t.length>0){var i;this.$count.innerHTML=t.length,this.$count.classList.remove("hidden"),this.$bell.setAttribute("aria-label","Notifications list. You have "+t.length+" notifications.");var e=0,o=this.limit,a=Function.prototype.bind.call(console.debug,console);for(var s in t){if(!t[s].id)return;if(-1!==this.$notificationIds.indexOf(t[s].id))return void a.apply(console,["Received duplicate notification id"]);this.$notificationIds.push(t[s].id),(i=document.createElement("myuw-notification")).setAttribute("myuw-notification-id",t[s].id),i.setAttribute("slot","myuw-notification-items"),t[s].title&&i.setAttribute("body",t[s].title),t[s].priority&&i.setAttribute("priority",t[s].priority),t[s].actionButton&&(i.setAttribute("action-button-url",t[s].actionButton.url),i.setAttribute("action-button-label",t[s].actionButton.label)),t[s].moreInfoButton&&(i.setAttribute("info-button-url",t[s].moreInfoButton.url),i.setAttribute("info-button-label",t[s].moreInfoButton.label)),t[s].confirmButton&&(i.setAttribute("confirm-button-url",t[s].confirmButton.url),i.setAttribute("confirm-button-label",t[s].confirmButton.label)),e<o&&(this.$list.appendChild(i),e+=1)}this.$bellIcon.innerHTML='\n <svg id="bell-icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>\n </svg>',this.$emptyState.classList.add("hidden")}}}],[{key:"observedAttributes",get:function(){return[]}}]),s})();f.template=(m='<style> :host([hidden]) {\n display: none;\n}\n\n#wrapper {\n position: var( --myuw-menu-wrapper-position, relative );\n display: var( --myuw-menu-wrapper-display, inline-block );\n margin: 0px;\n}\n\n#wrapper.hidden {\n display: none;\n}\n\n#bell-button {\n display: flex;\n justify-content: var( --myuw-icon-button-justify, center );\n align-content: var( --myuw-icon-button-align-content, center );\n align-items: var( --myuw-icon-button-align-items, center );\n position: relative;\n cursor: pointer;\n min-height: var( --myuw-icon-button-height, 42px );\n min-width: var( --myuw-icon-button-width, 42px );\n height: var( --myuw-icon-button-height, 42px );\n width: var( --myuw-icon-button-width, 42px );\n user-select: none;\n outline: none;\n padding: var( --myuw-icon-button-padding, 0 );\n margin: var( --myuw-icon-button-padding, 0 6px );\n border: var( --myuw-icon-button-border, 0 );\n border-radius: var( --myuw-icon-border-radius, 50% );\n background-color: var( --myuw-icon-button-bg, transparent );\n -webkit-transition: var( --myuw-icon-button-transition, background-color .3s cubic-bezier(.35,0,.25,1) );\n transition: var( --myuw-icon-button-transition, background-color .3s cubic-bezier(.35,0,.25,1) );\n}\n\n#bell-button:hover {\n background-color: var( --myuw-icon-button-hover-bg, rgba(0,0,0,0.2) );\n}\n\n#bell-button:focus,\n#bell-button:active {\n outline: 2px solid #5e9ed6;\n outline: -webkit-focus-ring-color auto 5px;\n}\n\n#bell-icon {\n color: var(--myuw-primary-color, #fff);\n fill: var(--myuw-primary-color, #fff);\n height: var( --myuw-icon-button-icon-height, 30px );\n width: var( --myuw-icon-button-icon-width, 30px );\n}\n\n#list {\n position: var( --myuw-menu-position, absolute );\n top: var( --myuw-menu-position-top, 45px );\n right: var( --myuw-menu-position-right, 0 );\n min-width: var( --myuw-menu-width, 320px );\n list-style: var( --myuw-menu-list-style, none );\n margin: var( --myuw-menu-margin, 0 );\n padding: var( --myuw-menu-padding, 0 );\n font-size: var( --myuw-font-size, 16px );\n z-index: var( --myuw-menu-depth, 101 );\n max-height: var( --myuw-menu-height, 400px );\n overflow-y: scroll;\n\n transform-origin: var( --myuw-transform-origin, top right );\n transform: var( --myuw-menu-transform, scale(0) );\n opacity: var( --myuw-menu-opacity, 0 );\n visibility: var( --myuw-menu-visibility, hidden );\n transition: var( --myuw-menu-transition, visibility 0s, opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1), transform .25s cubic-bezier(0.0, 0.0, 0.2, 1) );\n\n -webkit-box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n -moz-box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n box-shadow: var( --myuw-menu-shadow, 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12) );\n}\n\n#list.visible {\n transform: scale(1);\n opacity: 1;\n visibility: visible;\n}\n\n#list #see-all {\n display: flex;\n font-size: 16px;\n -webkit-box-pack: end;\n -webkit-justify-content: flex-end;\n justify-content: space-between;\n -webkit-align-items: center;\n align-items: center;\n background-color: rgb(255,255,255);\n border-bottom: none;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n flex-direction: row;\n min-height: var( --myuw-menu-item-min-height, 48px );\n height: var( --myuw-menu-item-height, auto );\n color: #222;\n padding: 0 16px;\n}\n\n#list #see-all h1 {\n font-size: 16px;\n margin: 0;\n font-weight: 630;\n font-family: Red Hat Display, sans-serif;\n}\n\n#list #see-all.hidden {\n display: none;\n}\n\n#list #see-all:hover {\n background-color: rgb(255,255,255);\n}\n\n#list #empty-state {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n min-height: 140px;\n color: #494949;\n background-color: #ececec;\n}\n\n #count {\n position: absolute;\n top: 13px;\n color: #c5050c;\n left: 17px;\n }\n\n #list #empty-state.hidden,\n #count.hidden {\n display: none;\n }\n\n@media all and (min-width: 841px) {\n #list {\n width: 525px;\n }\n}\n\n@media all and (max-width: 460px) {\n #wrapper {\n position: initial;\n }\n #list {\n top: 4.6em;\n width: 100%;\n }\n}\n\n[hidden] {\n display: none !important;\n}\n\n#myuw-notifications-backdrop {\n display: block;\n height: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 99;\n} </style> <div id="myuw-notifications-backdrop" hidden></div> <div id="wrapper"> <button id="bell-button" aria-label="Notifications list. All caught up!" aria-haspopup="true" aria-controls="list" aria-expanded="false"> \x3c!-- bell svg --\x3e <span id="bell-button-icon"> <svg id="bell-icon" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/></svg> </span> <span id="count" class="hidden"></span> </button> <div id="list" role="list" aria-labelledby="bell-button"> <div id="see-all"> <h1>Notifications</h1> </div> \x3c!-- empty state --\x3e <div id="empty-state"> <slot name="myuw-notifications-empty"></slot> </div> </div> </div> ',b=document.createElement("template"),b.innerHTML=m,b),(function(){if("function"==typeof window.CustomEvent)return!1;function t(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),i}t.prototype=window.Event.prototype,window.CustomEvent=t})(),window.customElements.define("myuw-notifications",f);var p=(function(t){a(e,u(HTMLElement));var n=h(e);function e(){var t;return i(this,e),(t=n.call(this)).connected=!1,t.attachShadow({mode:"open"}),t.shadowRoot.appendChild(e.template.content.cloneNode(!0)),t}return o(e,[{key:"attributeChangedCallback",value:function(t,n,i){n!==i&&(this[t]=i,this.updateComponent(t,i))}},{key:"connectedCallback",value:function(){this.notificationId=this.getAttribute("myuw-notification-id")||null,this.body=this.getAttribute("body")||null,this.priorityMessage=this.getAttribute("priority")||null,this.actionUrl=this.getAttribute("action-button-url")||null,this.actionLabel=this.getAttribute("action-button-label")||null,this.infoUrl=this.getAttribute("info-button-url")||null,this.infoLabel=this.getAttribute("info-button-label")||null,this.confirmUrl=this.getAttribute("confirm-button-url")||null,this.confirmLabel=this.getAttribute("confirm-button-label")||null,this.$dismissButton=this.shadowRoot.getElementById("dismiss"),this.$body=this.shadowRoot.querySelector("p#body"),this.$actionButton=this.shadowRoot.querySelector("a#action"),this.$infoButton=this.shadowRoot.querySelector("a#moreInfo"),this.$confirmButton=this.shadowRoot.querySelector("a#confirm"),this.$priorityNotification=this.shadowRoot.getElementById("notification__priority-message"),this.$body.innerText=this.body,this.priorityMessage&&this.$priorityNotification.classList.remove("hidden"),this.actionUrl&&this.actionLabel?(this.$actionButton.innerText=this.actionLabel,this.$actionButton.setAttribute("href",this.actionUrl),this.$actionButton.hidden=!1):this.$actionButton.hidden=!0,this.infoUrl&&this.infoLabel?(this.$infoButton.innerText=this.infoLabel,this.$infoButton.setAttribute("href",this.infoUrl),this.$infoButton.hidden=!1):this.$infoButton.hidden=!0,this.confirmUrl&&this.confirmLabel?(this.$confirmButton.innerText=this.confirmLabel,this.$confirmButton.setAttribute("href",this.confirmUrl),this.$confirmButton.hidden=!1):this.$confirmButton.hidden=!0,this.$dismissButton.addEventListener("click",this.dismissNotification.bind(this,this.notificationId)),this.connected=!0}},{key:"disconnectedCallback",value:function(){}},{key:"updateComponent",value:function(t,n){this.connected}},{key:"dismissNotification",value:function(t){this.parentNode.removeChild(this);var n=new CustomEvent("myuw-notification-dismissed",{bubbles:!0,detail:{notificationId:t}});document.dispatchEvent(n)}}],[{key:"observedAttributes",get:function(){return[]}}]),e})();return p.template=(function(t){var n=document.createElement("template");return n.innerHTML=t,n})('<style> :host([hidden]) {\n display: none;\n }\n\n #notification {\n transition: var( --myuw-menu-item-transition, all .3s ease );\n position: relative;\n font-size: var( --myuw-menu-item-font-size, 16px );\n font-family: var( --myuw-profile-font, var(--myuw-font, \'Red Hat Text\', sans-serif) );\n padding: var( --myuw-menu-item-padding, 3px 16px );\n color: var(--myuw-menu-color, rgba(0,0,0,0.87));\n text-decoration: none;\n background-color: var(--myuw-menu-item-bg-color, #f5f5f5 );\n border-bottom: var(--myuw-menu-item-divider, 1px solid #e5e5e5 );\n user-select: none;\n outline: none;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n flex-direction: row;\n min-height: var( --myuw-menu-item-height, 48px );\n height: var( --myuw-menu-item-height, auto );\n -webkit-align-content: center;\n align-content: center;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: space-between;\n justify-content: space-between;\n }\n\n #notification:hover,\n #notification:focus {\n background-color: var( --myuw-menu-item-hover-bg, #ececec );\n }\n\n #content {\n width: var( --myuw-notification-content-width, 80% );\n max-width: var( --myuw-notification-content-width, 80% );\n -webkit-flex-direction: var( --myuw-notification-content-flex-direction, column );\n flex-direction: var( --myuw-notification-content-flex-direction, column );\n }\n\n #body {\n font-size: var( --myuw-notification-body-font-size, 16px );\n margin-bottom: 6px;\n }\n\n #actions a {\n /* general material button css */\n display: inline-block;\n position: relative;\n cursor: pointer;\n text-align: center;\n border-radius: 3px;\n border: 0;\n padding: 0 6px;\n margin: 6px 8px;\n background: transparent;\n white-space: nowrap;\n overflow: hidden;\n text-decoration: none;\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 /* notifications-specific css */\n line-height: 28px;\n min-width: 60px;\n min-height: 28px;\n font-size: 16px;\n font-weight: 620;\n margin-left: 0;\n }\n\n #actions a[hidden] {\n display: none;\n }\n\n #actions #action {\n color: var( --myuw-accent-button-color, #fafafa );\n background-color: var( --myuw-accent-button-bg, #0479a8 );\n box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n }\n\n #actions #action:hover {\n background-color: var( --myuw-accent-button-hover-bg, rgb(3,78,108) );\n }\n\n #actions #moreInfo,\n #actions #confirm {\n color: #222;\n }\n\n #actions #moreInfo:hover,\n #actions #confirm:hover {\n background-color: #0000001c;\n }\n\n #dismiss {\n display: flex;\n justify-content: var( --myuw-icon-button-justify, center );\n align-content: var( --myuw-icon-button-align-content, center );\n align-items: var( --myuw-icon-button-align-items, center );\n position: relative;\n cursor: pointer;\n min-height: var( --myuw-icon-button-height, 42px );\n min-width: var( --myuw-icon-button-width, 42px );\n height: var( --myuw-icon-button-height, 42px );\n width: var( --myuw-icon-button-width, 42px );\n max-width: var( --myuw-notification-dismiss-width, 20% );\n user-select: none;\n outline: none;\n padding: var( --myuw-icon-button-padding, 0 );\n margin: var( --myuw-icon-button-padding, 0 6px );\n border: var( --myuw-icon-button-border, 0 );\n background-color: var( --myuw-icon-button-bg, transparent );\n }\n\n #dismiss svg {\n fill: var( --myuw-notification-dismiss-color, rgba(0,0,0,0.54) );\n -webkit-transition: color .3s cubic-bezier(.35,0,.25,1);\n transition: color .3s cubic-bezier(.35,0,.25,1);\n }\n\n #dismiss svg:hover {\n fill: var( --myuw-notification-dismiss-hover-color, #333 );\n }\n\n #dismiss:focus {\n background-color: var( --myuw-icon-button-hover-bg, rgba(0,0,0,0.2) );\n outline: 2px solid #5e9ed6;\n outline: -webkit-focus-ring-color auto 5px;\n }\n\n .hidden {\n display: none;\n }\n\n .inner-content {\n display:flex;\n align-items: start;\n }\n\n #notification__priority-message {\n margin: 16px 8px 0px 0px;\n } </style> <div role="listitem" id="notification"> <div id="content"> <div class="inner-content"> <span id="notification__priority-message" class="hidden" aria-label="Notification with priority status"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg> </span> <p id="body"></p> </div> <div id="actions"> <a id="action" target="_blank" rel="noopener noreferrer"></a> <a id="moreInfo" target="_blank" rel="noopener noreferrer"></a> <a id="confirm" target="_blank" rel="noopener noreferrer"></a> </div> </div> <button id="dismiss" aria-label="dismiss notification"> <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> '),window.customElements.define("myuw-notification",p),t.MyUWNotification=p,t.MyUWNotifications=f,t})({});

2

package.json
{
"name": "@myuw-web-components/myuw-notifications",
"version": "1.4.4",
"version": "1.4.5",
"description": "Web component that provides an icon button and menu/list of notifications",

@@ -5,0 +5,0 @@ "module": "dist/myuw-notifications.min.mjs",

dist/myuw-notifications.min.mjs

Sorry, the diff of this file is not supported yet

dist/myuw-notifications.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc