@momentum-ui/web-components 2.20.0 → 2.21.0-dev
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/1200.js +1 -1
- package/dist/1323.js +2 -2
- package/dist/4367.js +1 -1
- package/dist/6248.js +1 -1
- package/dist/6283.js +1 -0
- package/dist/6652.js +1 -1
- package/dist/76.js +1 -1
- package/dist/9058.js +1 -1
- package/dist/{6875.js → 9217.js} +1 -1
- package/dist/comp/md-accordion-item-entry.js +2 -2
- package/dist/comp/md-accordion-item.js +1 -1
- package/dist/comp/md-activity-button-entry.js +2 -2
- package/dist/comp/md-activity-button.js +1 -1
- package/dist/comp/md-alert-banner-entry.js +5 -5
- package/dist/comp/md-alert-banner.js +1 -1
- package/dist/comp/md-alert-entry.js +29 -29
- package/dist/comp/md-alert.js +1 -1
- package/dist/comp/md-audio-player-entry.js +4 -4
- package/dist/comp/md-audio-player.js +1 -1
- package/dist/comp/md-avatar-entry.js +2 -2
- package/dist/comp/md-avatar.js +1 -1
- package/dist/comp/md-button-entry.js +1 -1
- package/dist/comp/md-button.js +1 -1
- package/dist/comp/md-card-ai-entry.js +4 -4
- package/dist/comp/md-card-ai.js +1 -1
- package/dist/comp/md-card-entry.js +5 -5
- package/dist/comp/md-card-v2-entry.js +6 -6
- package/dist/comp/md-card-v2.js +1 -1
- package/dist/comp/md-card.js +1 -1
- package/dist/comp/md-chat-message-entry.js +2 -2
- package/dist/comp/md-chat-message.js +1 -1
- package/dist/comp/md-coachmark-entry.js +1 -1
- package/dist/comp/md-coachmark-popover-entry.js +3 -3
- package/dist/comp/md-coachmark-popover.js +1 -1
- package/dist/comp/md-coachmark.js +1 -1
- package/dist/comp/md-combobox-entry.js +2 -2
- package/dist/comp/md-combobox.js +1 -1
- package/dist/comp/md-date-range-picker-entry.js +1 -1
- package/dist/comp/md-date-range-picker.js +1 -1
- package/dist/comp/md-date-time-picker-entry.js +2 -2
- package/dist/comp/md-date-time-picker.js +1 -1
- package/dist/comp/md-datepicker-calendar-entry.js +9 -9
- package/dist/comp/md-datepicker-calendar.js +1 -1
- package/dist/comp/md-datepicker-day-entry.js +1 -1
- package/dist/comp/md-datepicker-day.js +1 -1
- package/dist/comp/md-datepicker-entry.js +2 -2
- package/dist/comp/md-datepicker-month-entry.js +1 -1
- package/dist/comp/md-datepicker-month.js +1 -1
- package/dist/comp/md-datepicker-week-entry.js +1 -1
- package/dist/comp/md-datepicker-week.js +1 -1
- package/dist/comp/md-datepicker.js +1 -1
- package/dist/comp/md-dropdown-entry.js +2 -2
- package/dist/comp/md-dropdown.js +1 -1
- package/dist/comp/md-editable-field-entry.js +3 -3
- package/dist/comp/md-editable-field.js +1 -1
- package/dist/comp/md-favorite-entry.js +2 -2
- package/dist/comp/md-favorite.js +1 -1
- package/dist/comp/md-floating-minimize-entry.js +5 -5
- package/dist/comp/md-floating-minimize.js +1 -1
- package/dist/comp/md-floating-modal-entry.js +3 -3
- package/dist/comp/md-floating-modal.js +1 -1
- package/dist/comp/md-grabber-entry.js +2 -2
- package/dist/comp/md-grabber.js +1 -1
- package/dist/comp/md-icon-entry.js +2 -2
- package/dist/comp/md-icon.js +1 -1
- package/dist/comp/md-inpu.js +1 -1
- package/dist/comp/md-input-entry.js +2 -2
- package/dist/comp/md-input-file.js +1 -1
- package/dist/comp/md-input.js +1 -1
- package/dist/comp/md-meeting-alert-entry.js +11 -11
- package/dist/comp/md-meeting-alert.js +1 -1
- package/dist/comp/md-menu-overlay-entry.js +5 -5
- package/dist/comp/md-menu-overlay.js +1 -1
- package/dist/comp/md-modal-entry.js +2 -2
- package/dist/comp/md-modal.js +1 -1
- package/dist/comp/md-pagination-entry.js +9 -9
- package/dist/comp/md-pagination.js +1 -1
- package/dist/comp/md-phone-input-entry.js +4 -4
- package/dist/comp/md-phone-input.js +1 -1
- package/dist/comp/md-popover-entry.js +6 -6
- package/dist/comp/md-popover.js +1 -1
- package/dist/comp/md-tab-entry.js +12 -18
- package/dist/comp/md-tab-panel-entry.js +1 -1
- package/dist/comp/md-tab.js +1 -1
- package/dist/comp/md-table-advanced-entry.js +5 -5
- package/dist/comp/md-table-advanced.js +1 -1
- package/dist/comp/md-table-entry.js +2 -2
- package/dist/comp/md-table.js +1 -1
- package/dist/comp/md-tabs-entry.js +94 -95
- package/dist/comp/md-tabs.js +1 -1
- package/dist/comp/md-task-item-entry.js +8 -8
- package/dist/comp/md-task-item.js +1 -1
- package/dist/comp/md-timepicker-entry.js +2 -2
- package/dist/comp/md-timepicker.js +1 -1
- package/dist/index-entry.js +127 -128
- package/dist/index.js +1 -1
- package/dist/types/components/combobox/ComboBox.d.ts +1 -1
- package/dist/types/components/icon/Icon.d.ts +1 -0
- package/dist/types/components/menu-overlay/MenuOverlay.d.ts +1 -0
- package/dist/types/components/tabs/Tab.d.ts +6 -2
- package/dist/types/components/tabs/TabPanel.d.ts +1 -0
- package/dist/types/components/tabs/Tabs.d.ts +7 -2
- package/dist/types/utils/helpers.d.ts +1 -0
- package/package.json +4 -5
package/dist/1200.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";(self["momentum-web-components-[id]"]=self["momentum-web-components-[id]"]||[]).push([[1200],{61200:(t,e,i)=>{i(96798);var o,n=i(31890),s=i(26272),r=i(32022),c=i.n(r),a=i(60554),l=i.n(a),h=i(41488),d=i(40333),p=i(23968),u=i(97822),m=i(8229),g=i(42706),v=i(57955),y=i(66873),S=function(t,e,i,o){var n,s=arguments.length,r=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var c=t.length-1;c>=0;c--)(n=t[c])&&(r=(s<3?n(r):s>3?n(e,i,r):n(e,i))||r);return s>3&&r&&Object.defineProperty(e,i,r),r},b=function(t,e,i,o){return new(i||(i=Promise))((function(n,s){function r(t){try{a(o.next(t))}catch(t){s(t)}}function c(t){try{a(o.throw(t))}catch(t){s(t)}}function a(t){var e;t.done?n(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(r,c)}a((o=o.apply(t,e||[])).next())}))};!function(t){var e;let o=e=class extends h.LitElement{constructor(){super(...arguments),this.color="",this.description="",this.name="",this.id="",this.size="",this.title="",this.ariaHidden=null,this.type="",this.isActive=!1,this.isComboBoxIcon=!1,this.sizeOverrided=!1,this.iconSet="momentumUI",this.svgIcon=null,this._ariaLabel="",this.consoleHandler=(t,e)=>{switch(t){case"color-warn":console.warn(`[@momentum-ui/web-component] Icon: ${e} may not exist in the design system, please use a color name from https://momentum.design/styles/color/style`);break;case"name-error":console.warn(`[@momentum-ui/web-component] Icon: Icon ${e} does not exist in the design system. Visit https://momentum.design/icons for a list of available icons or to request a new icon.`)}}}isPath(t){return"object"!=typeof t&&t.endsWith(".svg")}decodeIfBase64EncodedSvg(t){const e=/data:image\/svg\+xml;base64,([A-Za-z0-9+/=]+)/.exec(t);if(null==e?void 0:e[1]){const t=e[1];return atob(t)}return t}getSvgContentFromFile(t){return b(this,void 0,void 0,(function*(){const e=yield fetch(t),i=yield e.text();return this.getSvgContentFromInline(i)}))}getSvgContentFromInline(t){let e="";return e="object"==typeof t&&"data"in t?t.data:this.decodeIfBase64EncodedSvg(t),this.parseSvgContent(e)}parseSvgContent(t){try{return(new DOMParser).parseFromString(t,"image/svg+xml").documentElement}catch(e){try{return(new DOMParser).parseFromString(t,"text/html").body.children[0]}catch(t){return console.error("Error parsing svg content: ",t),null}}}isSvgAlreadyLoaded(t){var e,i;return!!this.svgIcon&&(null===(i=null===(e=this.svgIcon)||void 0===e?void 0:e.getAttribute("class"))||void 0===i?void 0:i.includes(t))}loadSvgIcon(t){return b(this,void 0,void 0,(function*(){var e,o;if(this.isSvgAlreadyLoaded(t))return;const n="momentumBrandVisuals"===this.iconSet?
|
|
1
|
+
"use strict";(self["momentum-web-components-[id]"]=self["momentum-web-components-[id]"]||[]).push([[1200],{61200:(t,e,i)=>{i(96798);var o,n=i(31890),s=i(26272),r=i(32022),c=i.n(r),a=i(60554),l=i.n(a),h=i(41488),d=i(40333),p=i(23968),u=i(97822),m=i(8229),g=i(42706),v=i(57955),y=i(66873),S=function(t,e,i,o){var n,s=arguments.length,r=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,o);else for(var c=t.length-1;c>=0;c--)(n=t[c])&&(r=(s<3?n(r):s>3?n(e,i,r):n(e,i))||r);return s>3&&r&&Object.defineProperty(e,i,r),r},b=function(t,e,i,o){return new(i||(i=Promise))((function(n,s){function r(t){try{a(o.next(t))}catch(t){s(t)}}function c(t){try{a(o.throw(t))}catch(t){s(t)}}function a(t){var e;t.done?n(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(r,c)}a((o=o.apply(t,e||[])).next())}))};!function(t){var e;let o=e=class extends h.LitElement{constructor(){super(...arguments),this.color="",this.description="",this.name="",this.id="",this.size="",this.title="",this.ariaHidden=null,this.type="",this.isActive=!1,this.isComboBoxIcon=!1,this.sizeOverrided=!1,this.iconSet="momentumUI",this.svgIcon=null,this._ariaLabel="",this.consoleHandler=(t,e)=>{switch(t){case"color-warn":console.warn(`[@momentum-ui/web-component] Icon: ${e} may not exist in the design system, please use a color name from https://momentum.design/styles/color/style`);break;case"name-error":console.warn(`[@momentum-ui/web-component] Icon: Icon ${e} does not exist in the design system. Visit https://momentum.design/icons for a list of available icons or to request a new icon.`)}}}isPath(t){return"object"!=typeof t&&t.endsWith(".svg")}decodeIfBase64EncodedSvg(t){const e=/data:image\/svg\+xml;base64,([A-Za-z0-9+/=]+)/.exec(t);if(null==e?void 0:e[1]){const t=e[1];return atob(t)}return t}getSvgContentFromFile(t){return b(this,void 0,void 0,(function*(){const e=yield fetch(t),i=yield e.text();return this.getSvgContentFromInline(i)}))}getSvgContentFromInline(t){let e="";return e="object"==typeof t&&"data"in t?t.data:this.decodeIfBase64EncodedSvg(t),this.parseSvgContent(e)}parseSvgContent(t){try{return(new DOMParser).parseFromString(t,"image/svg+xml").documentElement}catch(e){try{return(new DOMParser).parseFromString(t,"text/html").body.children[0]}catch(t){return console.error("Error parsing svg content: ",t),null}}}isSvgAlreadyLoaded(t){var e,i;return!!this.svgIcon&&(null===(i=null===(e=this.svgIcon)||void 0===e?void 0:e.getAttribute("class"))||void 0===i?void 0:i.includes(t))}loadSvgIcon(t){return b(this,void 0,void 0,(function*(){var e,o;if(this.isSvgAlreadyLoaded(t))return;const n="momentumBrandVisuals"===this.iconSet?yield this.getBrandVisualIcon(t):i(49785)(`./${t}.svg`);n?(this.isPath(n)?this.svgIcon=yield this.getSvgContentFromFile(n):this.svgIcon=this.getSvgContentFromInline(n),null===(e=this.svgIcon)||void 0===e||e.setAttribute("class",`icon ${t}`),null===(o=this.svgIcon)||void 0===o||o.setAttribute("part","icon"),this.setSvgIconAttributes(),this.requestUpdate()):console.error(`Icon: ${t} does not exist in the design system.`)}))}setSvgIconAttributes(){this.svgIcon&&(this.iconFontSize&&this.svgIcon.setAttribute("width",`${this.iconFontSize}px`),this.iconFontSize&&this.svgIcon.setAttribute("height",`${this.iconFontSize}px`),this.color?this.svgIcon.setAttribute("fill",this.iconColor):this.svgIcon.setAttribute("fill","currentColor"))}getBrandVisualIcon(t){return b(this,void 0,void 0,(function*(){const e=g.c[t];return e?(yield e).default:null}))}get svgIconName(){if("momentumDesign"===this.iconSet||"momentumBrandVisuals"===this.iconSet)return this.name;const t=this.momentumUIIconLookupName,i=e.designLookup.get(t);return null!=i?i:t}updated(t){if(super.updated(t),this.doesIconSetSupportSVG)if(t.has("name")||t.has("iconSet")){const t=this.svgIconName;t&&"Unknown"!==t&&this.loadSvgIcon(t)}else(t.has("iconFontSize")||t.has("color"))&&this.setSvgIconAttributes()}get ariaLabel(){return this._ariaLabel?this._ariaLabel:this.title&&this.description?`${this.title} ${this.description}`:this.title?this.title:this.description?this.description:"icon"}set ariaLabel(t){const e=this._ariaLabel;this._ariaLabel=t,this.requestUpdate("ariaLabel",e)}get buttonClassMap(){return{[`md-button--icon-${this.type}`]:!!this.type}}get iconFontSize(){const t=this.name.split("_")[1];return this.size||t||16}get iconColor(){return this.color.startsWith("#")?(this.consoleHandler("color-warn",this.color),this.color):this.color.startsWith("var(")?this.color:l()(this.color)}get iconClassMap(){return{"md-combobox-input__icon":this.isComboBoxIcon,"md-combobox-input__icon--active":this.isComboBoxIcon&&this.isActive,[`${this.iconName}`]:!!this.iconName}}get momentumUIIconLookupName(){let t=this.name;return t=t.startsWith("icon-")?t.substring(5):t,t=t.split("_")[0],t}getIconName(){let t=this.name;return t=t.startsWith("icon-")?t.substring(5):t,t}handleSizeOverride(t){return`${t.split("_")[0]}_${this.iconFontSize}`}get iconName(){const t=this.getIconName();return this.sizeOverrided?this.handleSizeOverride(t):c().includes(t)||""===t?`icon-${t}`:this.consoleHandler("name-error",t)}get iconStyleMap(){return Object.assign(Object.assign({},this.iconFontSize&&{"font-size":`${this.iconFontSize}px`}),this.color&&{color:this.iconColor})}static get styles(){return[s.A,y.A]}handleIconClick(t){this.dispatchEvent(new CustomEvent("icon-click",{bubbles:!0,composed:!0,detail:{srcEvent:t}}))}get doesIconSetSupportSVG(){return"momentumDesign"===this.iconSet||"preferMomentumDesign"===this.iconSet||"momentumBrandVisuals"===this.iconSet}get isSVGRender(){return this.svgIcon&&"preferMomentumDesign"===this.iconSet||"momentumDesign"===this.iconSet||"momentumBrandVisuals"===this.iconSet}render(){return this.isSVGRender?this.renderSVGIcon():this.renderFontIcon()}renderFontIcon(){var t;return h.html`
|
|
2
2
|
<i
|
|
3
3
|
part="icon"
|
|
4
4
|
id=${this.id}
|
package/dist/1323.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";(self["momentum-web-components-[id]"]=self["momentum-web-components-[id]"]||[]).push([[1323],{11323:(e,t,i)=>{var r,s,n=i(90195),o=i(31890),a=i(28373),l=i(66677),h=i(22962),d=i.n(h),p=i(84157),u=i.n(p),v=i(68250),c=i.n(v),g=i(69371),
|
|
1
|
+
"use strict";(self["momentum-web-components-[id]"]=self["momentum-web-components-[id]"]||[]).push([[1323],{11323:(e,t,i)=>{var r,s,n=i(90195),o=i(31890),a=i(28373),l=i(66677),h=i(22962),d=i.n(h),p=i(84157),u=i.n(p),v=i(68250),c=i.n(v),g=i(69371),m=i.n(g),y=i(4863),E=i(41488),O=i(97822),f=i(16366),w=function(e,t,i,r){var s,n=arguments.length,o=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,r);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(o=(n<3?s(o):n>3?s(t,i,o):s(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o},b=function(e,t,i,r){return new(i||(i=Promise))((function(s,n){function o(e){try{l(r.next(e))}catch(e){n(e)}}function a(e){try{l(r.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?s(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(o,a)}l((r=r.apply(e,t||[])).next())}))};!function(e){e.small="260px",e.large="370px"}(r||(r={})),function(e){let t=class extends((0,a.d)(E.LitElement)){constructor(){super(...arguments),this._isOpen=!1,this.size="large",this.maxHeight="",this.customWidth="",this.showArrow=!1,this.disabled=!1,this.placement="bottom",this.allowHoverToggle=!1,this.ariaRole="menu",this.ariaLabel="",this.isDatePicker=!1,this.overlayOffset=15,this.keepOpenOnWindowBlur=!1,this.popperInstance=null,this.triggerElement=null,this.shouldWrapFocus=()=>"dialog"===this.ariaRole,this.updateActiveMenuOverlayOpened=t=>{var i;this===t.target&&(null===(i=e.ELEMENT.activeOverlay)||void 0===i||i.push(t.target))},this.updateActiveMenuOverlayClosed=t=>{var i,r;const s=e.ELEMENT.activeOverlay.indexOf(t.target);this===t.target&&-1!==s&&(e.ELEMENT.activeOverlay.splice(s,1),e.ELEMENT.activeOverlay.length>0?(null===(i=e.ELEMENT.activeOverlay[e.ELEMENT.activeOverlay.length-1])||void 0===i||i.setFocusableElements(),null===(r=e.ELEMENT.activeOverlay[e.ELEMENT.activeOverlay.length-1])||void 0===r||r.focusOnNestedTrigger(this.triggerElement)):this.setFocusableElements())},this.handleTriggerClick=()=>{this.toggleOverlay()},this.setOverlay=(0,l.sg)((e=>{this.disabled||(this.isOpen=e)}),100),this.expandPopup=()=>{this.setOverlay(!0)},this.collapsePopup=()=>{this.setOverlay(!1)},this.handleOutsideOverlayKeydown=t=>b(this,void 0,void 0,(function*(){let i=!1;const r=t.composedPath();r.length&&(i=!!r.find((e=>e===this)),!i)||!this.overlayContainer||t.code!==n.Uz.Escape||(t.preventDefault(),(e.ELEMENT.activeOverlay.length>0?e.ELEMENT.activeOverlay[e.ELEMENT.activeOverlay.length-1]:void 0)===this&&(this.isOpen=!1,yield this.updateComplete,this.focusOnTrigger()))})),this.handleTriggerKeyDown=e=>b(this,void 0,void 0,(function*(){switch(e.code){case n.Uz.Space:case n.Uz.Enter:e.preventDefault(),this.toggleOverlay(),this.isOpen||(yield this.updateComplete,this.focusOnTrigger())}})),this.handleOutsideOverlayClick=e=>{let t=!1;const i=e.composedPath();i.length&&(t=!!i.find((e=>e===this)),t||this.preventClickOutside||(this.isOpen=!1))}}get isOpen(){return this._isOpen}set isOpen(e){const t=this._isOpen;this._isOpen=e,this.handleInstance(e),this.overlayContainer&&this.overlayContainer.toggleAttribute("data-show",e),this.requestUpdate("isOpen",t)}renderMaxHeight(){return this.maxHeight?`max-height: ${this.maxHeight};`:"max-height: calc(100vh - 48px);"}renderOverflowY(){return this.isDatePicker?"overflow-y: visible;":"overflow-y: auto;"}renderWidth(){return this.customWidth?`width: ${this.customWidth};`:"small"===this.size?`width: ${r.small};`:`width: ${r.large};`}getStyles(){return E.html`
|
|
2
2
|
<style>
|
|
3
3
|
:host .md-menu-overlay .overlay-content {
|
|
4
4
|
${this.renderMaxHeight()};
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
${this.renderOverflowY()};
|
|
7
7
|
}
|
|
8
8
|
</style>
|
|
9
|
-
`}connectedCallback(){super.connectedCallback(),this.handleWindowBlurEvent=this.handleWindowBlurEvent.bind(this),window.addEventListener("blur",this.handleWindowBlurEvent),document.addEventListener("click",this.handleOutsideOverlayClick),document.addEventListener("keydown",this.handleOutsideOverlayKeydown),this.addEventListener("menu-overlay-open",this.updateActiveMenuOverlayOpened),this.addEventListener("menu-overlay-close",this.updateActiveMenuOverlayClosed)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleOutsideOverlayClick),document.removeEventListener("keydown",this.handleOutsideOverlayKeydown),window.removeEventListener("blur",this.handleWindowBlurEvent),this.removeEventListener("menu-overlay-open",this.updateActiveMenuOverlayOpened),this.removeEventListener("menu-overlay-close",this.updateActiveMenuOverlayClosed),this.triggerElement&&(this.triggerElement.removeEventListener("click",this.handleTriggerClick),this.triggerElement.removeEventListener("keydown",this.handleTriggerKeyDown),this.allowHoverToggle&&(this.triggerElement.removeEventListener("mouseenter",this.expandPopup),this.triggerElement.removeEventListener("mouseleave",this.collapsePopup),this.overlayContainer.removeEventListener("mouseenter",this.expandPopup),this.overlayContainer.removeEventListener("mouseleave",this.collapsePopup)),this.triggerElement=null)}checkIsInputField(e){var t;return"md-input"===(null===(t=null==e?void 0:e.tagName)||void 0===t?void 0:t.toLowerCase())}firstUpdated(e){const t=Object.create(null,{firstUpdated:{get:()=>super.firstUpdated}});return b(this,void 0,void 0,(function*(){t.firstUpdated.call(this,e),yield new Promise((e=>setTimeout(e,0))),this.trigger&&(this.triggerElement=this.trigger[0],this.triggerElement.addEventListener("click",this.handleTriggerClick),this.allowHoverToggle&&(this.triggerElement.addEventListener("mouseenter",this.expandPopup),this.triggerElement.addEventListener("mouseleave",this.collapsePopup),this.overlayContainer.addEventListener("mouseenter",this.expandPopup),this.overlayContainer.addEventListener("mouseleave",this.collapsePopup)),this.checkIsInputField(this.triggerElement)||this.triggerElement.addEventListener("keydown",this.handleTriggerKeyDown),this.triggerElement.setAttribute("aria-haspopup","true")),this.overlayContainer&&this.isOpen&&(this.handleInstance(!0),this.overlayContainer.toggleAttribute("data-show",!0)),this.arrow&&this.showArrow&&this.arrow.toggleAttribute("data-show",!0),e.has("isOpen")&&
|
|
9
|
+
`}connectedCallback(){super.connectedCallback(),this.handleWindowBlurEvent=this.handleWindowBlurEvent.bind(this),window.addEventListener("blur",this.handleWindowBlurEvent),document.addEventListener("click",this.handleOutsideOverlayClick),document.addEventListener("keydown",this.handleOutsideOverlayKeydown),this.addEventListener("menu-overlay-open",this.updateActiveMenuOverlayOpened),this.addEventListener("menu-overlay-close",this.updateActiveMenuOverlayClosed)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleOutsideOverlayClick),document.removeEventListener("keydown",this.handleOutsideOverlayKeydown),window.removeEventListener("blur",this.handleWindowBlurEvent),this.removeEventListener("menu-overlay-open",this.updateActiveMenuOverlayOpened),this.removeEventListener("menu-overlay-close",this.updateActiveMenuOverlayClosed),this.triggerElement&&(this.triggerElement.removeEventListener("click",this.handleTriggerClick),this.triggerElement.removeEventListener("keydown",this.handleTriggerKeyDown),this.allowHoverToggle&&(this.triggerElement.removeEventListener("mouseenter",this.expandPopup),this.triggerElement.removeEventListener("mouseleave",this.collapsePopup),this.overlayContainer.removeEventListener("mouseenter",this.expandPopup),this.overlayContainer.removeEventListener("mouseleave",this.collapsePopup)),this.triggerElement=null)}checkIsInputField(e){var t;return"md-input"===(null===(t=null==e?void 0:e.tagName)||void 0===t?void 0:t.toLowerCase())}updateTriggerElementAriaExpanded(){this.triggerElement&&(this.isOpen?this.triggerElement.setAttribute("aria-expanded","true"):this.triggerElement.removeAttribute("aria-expanded"))}firstUpdated(e){const t=Object.create(null,{firstUpdated:{get:()=>super.firstUpdated}});return b(this,void 0,void 0,(function*(){t.firstUpdated.call(this,e),yield new Promise((e=>setTimeout(e,0))),this.trigger&&(this.triggerElement=this.trigger[0],this.triggerElement.addEventListener("click",this.handleTriggerClick),this.allowHoverToggle&&(this.triggerElement.addEventListener("mouseenter",this.expandPopup),this.triggerElement.addEventListener("mouseleave",this.collapsePopup),this.overlayContainer.addEventListener("mouseenter",this.expandPopup),this.overlayContainer.addEventListener("mouseleave",this.collapsePopup)),this.checkIsInputField(this.triggerElement)||this.triggerElement.addEventListener("keydown",this.handleTriggerKeyDown),this.triggerElement.setAttribute("aria-haspopup","true")),this.overlayContainer&&this.isOpen&&(this.handleInstance(!0),this.overlayContainer.toggleAttribute("data-show",!0)),this.arrow&&this.showArrow&&this.arrow.toggleAttribute("data-show",!0),e.has("isOpen")&&this.updateTriggerElementAriaExpanded()}))}update(e){super.update(e),e.has("isOpen")&&(this.isOpen?(this.activateFocusTrap(),document.addEventListener("menu-item-click",this.handleTriggerClick)):(this.deactivateFocusTrap(),document.removeEventListener("menu-item-click",this.handleTriggerClick)))}updated(e){super.updated(e),e.has("isOpen")&&(this.isOpen?(this.dispatchMenuOpen(),this.triggerElement&&(this.triggerElement.setAttribute("aria-expanded","true"),this.triggerElement.hasAttribute("ariaexpanded")&&this.triggerElement.setAttribute("ariaexpanded","true"))):(this.dispatchMenuClose(),this.triggerElement&&(this.triggerElement.removeAttribute("aria-expanded"),this.triggerElement.hasAttribute("ariaexpanded")&&this.triggerElement.setAttribute("ariaexpanded","false"))))}dispatchMenuOpen(){this.dispatchEvent(new CustomEvent("menu-overlay-open",{composed:!0,bubbles:!0}))}dispatchMenuClose(){this.dispatchEvent(new CustomEvent("menu-overlay-close",{composed:!0,bubbles:!0}))}handleInstance(e){e?this.create():this.destroy()}create(){this.triggerElement&&(this.popperInstance=(0,y.createPopper)(this.triggerElement,this.overlayContainer,{onFirstUpdate:()=>b(this,void 0,void 0,(function*(){var e;this.isOpen&&(null===(e=this.popperInstance)||void 0===e||e.update(),this.setFocusableElements(),yield this.updateComplete,this.focusInsideOverlay())})),placement:this.placement,modifiers:[...y.defaultModifiers,u(),c(),m(),d(),{name:"preventOverflow",options:{padding:16}},{name:"offset",options:{offset:({placement:e,reference:t})=>"left-end"===e||"right-end"===e?[t.height+t.y+3,14]:[0,this.overlayOffset]}},{name:"arrow",options:{element:this.arrow,padding:5}},{name:"computeStyles",options:{adaptive:!1}}]}))}destroy(){this.popperInstance&&(this.popperInstance.destroy(),this.popperInstance=null)}toggleOverlay(){this.disabled||(this.isOpen=!this.isOpen)}focusOnTrigger(){requestAnimationFrame((()=>{var e;(null===(e=this.focusableElements)||void 0===e?void 0:e.length)&&this.focusableElements[0].focus()}))}focusInsideOverlay(){this.focusableElements&&(this.focusableElements.length>1?this.setInitialFocus(1):this.focusableElements.length&&this.setInitialFocus())}focusOnNestedTrigger(e){var t;null===(t=this.setFocusOnTrigger)||void 0===t||t.call(this,e)}handleWindowBlurEvent(){this._isOpen&&!this.keepOpenOnWindowBlur&&(this.isOpen=!1)}static get styles(){return[f.A]}render(){return E.html`
|
|
10
10
|
${this.getStyles()}
|
|
11
11
|
<div class="md-menu-overlay">
|
|
12
12
|
<slot name="menu-trigger"></slot>
|