@momentum-ui/web-components 2.7.44 → 2.7.45
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/chunks/md-16.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[16],{32:function(e,t,r){"use strict";r.r(t),r.d(t,"OverlaySizes",(function(){return i})),r.d(t,"menuOverlaySize",(function(){return
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[16],{32:function(e,t,r){"use strict";r.r(t),r.d(t,"OverlaySizes",(function(){return i})),r.d(t,"menuOverlaySize",(function(){return f})),r.d(t,"menuOverlayPlacement",(function(){return O})),r.d(t,"MenuOverlay",(function(){return E}));var i,o=r(1),n=r(5),s=r(34),a=r(25),l=r.n(a),d=r(26),h=r.n(d),p=r(27),c=r.n(p),m=r(28),u=r.n(m),g=r(21),v=r(0),y=v.css`:host{--vw-padding:16px}.md-menu-overlay{box-sizing:border-box;color:var(--md-primary-text-color);position:relative}.md-menu-overlay *{box-sizing:inherit}.md-menu-overlay .overlay-content{background-color:var(--md-secondary-white-bg-color);border:1px solid var(--md-menu-overlay-border-color,--gray-20);border-radius:.5rem;display:flex;justify-content:space-around;max-width:calc(100vw - var(--vw-padding) * 2);overflow-y:auto}.md-menu-overlay .overlay-container{border-radius:.5rem;box-shadow:0 8px 16px rgba(0,0,0,.16),0 0 1px rgba(0,0,0,.14);box-sizing:border-box;display:none;position:absolute;z-index:1000}.md-menu-overlay .overlay-container[data-show]{display:block}.overlay-arrow{filter:drop-shadow(0 0 5px rgba(0,0,0,.16));height:0;visibility:hidden;width:0;z-index:-1}.overlay-arrow[data-show]{visibility:visible}.overlay-container[data-popper-placement^=top]>.overlay-arrow{border-left:solid 1rem transparent;border-right:solid 1rem transparent;border-top:solid 1rem var(--md-tertiary-white-bg-color);bottom:-.875rem}.overlay-container[data-popper-placement^=bottom]>.overlay-arrow{border-bottom:solid 1rem var(--md-tertiary-white-bg-color);border-left:solid 1rem transparent;border-right:solid 1rem transparent;top:-.875rem}.overlay-container[data-popper-placement^=right]>.overlay-arrow{border-bottom:solid 1rem transparent;border-right:solid 1rem var(--md-tertiary-white-bg-color);border-top:solid 1rem transparent;left:-.875rem}.overlay-container[data-popper-placement^=left]>.overlay-arrow{border-bottom:solid 1rem transparent;border-left:solid 1rem var(--md-tertiary-white-bg-color);border-top:solid 1rem transparent;right:-.875rem}`,b=function(e,t,r,i){var o,n=arguments.length,s=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(n<3?o(s):n>3?o(t,r,s):o(t,r))||s);return n>3&&s&&Object.defineProperty(t,r,s),s},w=function(e,t,r,i){return new(r||(r=Promise))((function(o,n){function s(e){try{l(i.next(e))}catch(e){n(e)}}function a(e){try{l(i.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(s,a)}l((i=i.apply(e,t||[])).next())}))};!function(e){e.small="260px",e.large="370px"}(i||(i={}));const f=["small","large"],O=["left-start","left","left-end","right-start","right","right-end","top-start","top","top-end","bottom-start","bottom","bottom-end"];var E;!function(e){let t=class extends(Object(s.a)(v.LitElement)){constructor(){super(...arguments),this._isOpen=!1,this.size="large",this.maxHeight="",this.customWidth="",this.showArrow=!1,this.disabled=!1,this.placement="bottom",this.popperInstance=null,this.triggerElement=null,this.handleTriggerClick=e=>{this.toggleOverlay()},this.handleOutsideOverlayKeydown=e=>w(this,void 0,void 0,(function*(){let t=!1;const r=e.composedPath();r.length&&(t=!!r.find(e=>e===this),!t)||this.overlayContainer&&e.code===o.b.Escape&&(e.preventDefault(),this.isOpen&&(this.isOpen=!1,yield this.updateComplete,this.focusOnTrigger()))})),this.handleTriggerKeyDown=e=>w(this,void 0,void 0,(function*(){switch(e.code){case o.b.Space:case o.b.Enter:e.preventDefault(),this.toggleOverlay(),this.isOpen||(yield this.updateComplete,this.focusOnTrigger())}})),this.handleOutsideOverlayClick=e=>{let t=!1;const r=e.composedPath();r.length&&(t=!!r.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);"}renderWidth(){return this.customWidth?`width: ${this.customWidth};`:"small"===this.size?`width: ${i.small};`:`width: ${i.large};`}getStyles(){return v.html`
|
|
2
2
|
<style>
|
|
3
3
|
:host .md-menu-overlay .overlay-content {
|
|
4
4
|
${this.renderMaxHeight()};
|
|
5
5
|
${this.renderWidth()};
|
|
6
6
|
}
|
|
7
7
|
</style>
|
|
8
|
-
`}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleOutsideOverlayClick),document.addEventListener("keydown",this.handleOutsideOverlayKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleOutsideOverlayClick),document.removeEventListener("keydown",this.handleOutsideOverlayKeydown),this.triggerElement&&(this.triggerElement.removeEventListener("click",this.handleTriggerClick),this.triggerElement.removeEventListener("keydown",this.handleTriggerKeyDown),this.triggerElement=null)}checkIsInputField(e){return!(!e||!e.tagName||"md-input"!==e.tagName.toLowerCase())}firstUpdated(e){const t=Object.create(null,{firstUpdated:{get:()=>super.firstUpdated}});return
|
|
8
|
+
`}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleOutsideOverlayClick),document.addEventListener("keydown",this.handleOutsideOverlayKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleOutsideOverlayClick),document.removeEventListener("keydown",this.handleOutsideOverlayKeydown),this.triggerElement&&(this.triggerElement.removeEventListener("click",this.handleTriggerClick),this.triggerElement.removeEventListener("keydown",this.handleTriggerKeyDown),this.triggerElement=null)}checkIsInputField(e){return!(!e||!e.tagName||"md-input"!==e.tagName.toLowerCase())}firstUpdated(e){const t=Object.create(null,{firstUpdated:{get:()=>super.firstUpdated}});return w(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.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)}))}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.dispatchMenuClose(),this.triggerElement&&this.triggerElement.removeAttribute("aria-expanded")))}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=Object(g.createPopper)(this.triggerElement,this.overlayContainer,{onFirstUpdate:()=>w(this,void 0,void 0,(function*(){this.isOpen&&(document.dispatchEvent(new CustomEvent("on-widget-update")),yield this.updateComplete,this.focusInsideOverlay())})),placement:this.placement,modifiers:[...g.defaultModifiers,h.a,c.a,u.a,l.a,{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,15]}},{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(()=>{this.focusableElements&&this.focusableElements.length&&this.focusableElements[0].focus()})}focusInsideOverlay(){this.focusableElements&&(this.focusableElements.length>1?this.setInitialFocus(1):this.focusableElements.length&&this.setInitialFocus())}static get styles(){return[y]}render(){return v.html`
|
|
9
9
|
${this.getStyles()}
|
|
10
10
|
<div aria-expanded=${this.isOpen} class="md-menu-overlay">
|
|
11
11
|
<slot name="menu-trigger"></slot>
|
package/dist/chunks/md-5.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[5],{34:function(e,t,
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[5],{34:function(e,t,s){"use strict";s.d(t,"a",(function(){return r}));var i=s(1),n=s(0),o=s(16),c=s(33),a=function(e,t,s,i){var n,o=arguments.length,c=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,s,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(c=(o<3?n(c):o>3?n(t,s,c):n(t,s))||c);return o>3&&c&&Object.defineProperty(t,s,c),c},l=function(e,t,s,i){return new(s||(s=Promise))((function(n,o){function c(e){try{l(i.next(e))}catch(e){o(e)}}function a(e){try{l(i.throw(e))}catch(e){o(e)}}function l(e){var t;e.done?n(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(c,a)}l((i=i.apply(e,t||[])).next())}))};n.LitElement;const r=e=>{if(Object(o.b)(r,e))return e;class t extends(Object(c.a)(e)){constructor(){super(...arguments),this.focusableElements=[],this.initialFocusComplete=!1,this.activeFocusTrap=!1,this.preventClickOutside=!1,this.focusTrapIndex=-1,this.preventScroll=!1,this.handleOutsideTrapClick=e=>{let t=!1;const s=e.composedPath();s.length&&(t=!!s.find(e=>e===this),t||this.preventClickOutside||!this.activeFocusTrap?t&&this.activeFocusTrap&&this.initialFocusComplete&&this.handleClickInsideTrap(e):this.deactivateFocusTrap())},this.updateFocusableElements=()=>{const e=setTimeout(()=>{this.setFocusableElements(),clearTimeout(e)},10)}}updated(e){if(super.updated(e),e.has("focusTrapIndex")){const t=e.get("focusTrapIndex"),s=this.focusableElements[t];s&&(s.blur(),s.toggleAttribute("focus-visible",!1));const i=this.focusableElements[this.focusTrapIndex];i&&this.tryFocus(i)}}tryFocus(e){requestAnimationFrame(()=>l(this,void 0,void 0,(function*(){this.isElementFocused(e)&&e.focus({preventScroll:this.preventScroll}),void 0!==e.updateComplete&&(yield e.updateComplete),document.hasFocus()&&this.isElementFocused(e)&&e.focus({preventScroll:this.preventScroll}),this.initialFocusComplete||(this.initialFocusComplete=!0)})))}domRectCollection(e){return 0===e.getClientRects().length}viewportPosition(e){const{width:t,height:s}=e.getBoundingClientRect(),{offsetWidth:i,offsetHeight:n}=e;return i+n+s+t===0}isNotVisible(e){return"SLOT"!==e.tagName&&(this.viewportPosition(e)||this.domRectCollection(e))}isHidden(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&"true"===e.getAttribute("aria-hidden")||"none"===e.style.display||"0"===e.style.opacity||"hidden"===e.style.visibility||"collapse"===e.style.visibility||this.isNotVisible(e)||"hidden"===getComputedStyle(e).visibility||"0"===getComputedStyle(e).height}isDisabled(e){return e.hasAttribute("disabled")||"true"===e.getAttribute("aria-disabled")}isNotTabbable(e){return"-1"===e.getAttribute("tabindex")}isInteractiveElement(e){return e instanceof HTMLButtonElement||e instanceof HTMLDetailsElement||e instanceof HTMLEmbedElement||e instanceof HTMLIFrameElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement||(!!(e instanceof HTMLAnchorElement&&e.hasAttribute("href"))||(e instanceof HTMLInputElement&&"hidden"!==e.type||(!(!(e instanceof HTMLAudioElement||e instanceof HTMLVideoElement)||!e.hasAttribute("controls"))||(!(!(e instanceof HTMLImageElement||e instanceof HTMLObjectElement)||!e.hasAttribute("usemap"))||!!(e.hasAttribute("tabindex")&&e.tabIndex>-1)))))}isFocusable(e){return!(this.isDisabled(e)||this.isHidden(e)||this.isNotTabbable(e))&&!!this.isInteractiveElement(e)}shouldSkipFocus(e){return!!(e.id&&e.id.split&&e.id.split(" ").indexOf("md-combobox-listbox")>-1)}findFocusable(e,t){const s=Array.from(e.children);for(const e of s)if(!this.isHidden(e)){if(this.shouldSkipFocus(e))break;if(this.isFocusable(e)&&t.add(e),e.shadowRoot)this.findFocusable(e.shadowRoot,t);else if("SLOT"===e.tagName){const s=e.assignedNodes().filter(e=>e.nodeType===e.ELEMENT_NODE);if(s.length){const e=s[0].parentElement;e&&this.findFocusable(e,t)}}else this.findFocusable(e,t)}return[...t]}isEqualFocusNode(e,t){return e.nodeType>=0&&(t.isEqualNode(e)&&t==e)}findElement(e){return this.focusableElements.findIndex(t=>this.isEqualFocusNode(e,t))}focusTrap(e){const t=this.getDeepActiveElement(),s=this.findElement(t);e?-1===s&&this.focusTrapIndex-1>0?this.focusTrapIndex--:this.focusTrapIndex=s>0?s-1:this.focusableElements.length-1:-1===s&&this.focusTrapIndex+1<this.focusableElements.length?this.focusTrapIndex++:this.focusTrapIndex=s+1<this.focusableElements.length?s+1:0}hasAutofocus(e){return e.hasAttribute("autofocus")}setInitialFocus(e=0,t=!1){let s=-1;this.initialFocusComplete=!1,this.focusableElements.length&&!t&&(s=this.focusableElements.findIndex(this.hasAutofocus)),this.focusableElements.length&&-1===s&&("object"==typeof e?s=this.findElement(e):"number"==typeof e&&(s=e)),this.focusableElements[s]&&(this.focusTrapIndex=s)}setFocusableElements(){this.focusableElements=this.findFocusable(this.shadowRoot,new Set)}removeFocusableElements(){this.focusableElements=[]}firstUpdated(e){const t=Object.create(null,{firstUpdated:{get:()=>super.firstUpdated}});return l(this,void 0,void 0,(function*(){t.firstUpdated.call(this,e),yield new Promise(e=>setTimeout(e,0)),this.setFocusableElements()}))}handleKeydownFocusTrap(e){e.code!==i.b.Tab||e.shiftKey&&e.code!==i.b.Tab||this.activeFocusTrap&&this.focusableElements.length&&(e.shiftKey?(e.preventDefault(),this.focusTrap(!0)):(e.preventDefault(),this.focusTrap(!1)))}activateFocusTrap(){this.activeFocusTrap=!0}deactivateFocusTrap(){this.activeFocusTrap=!1,this.focusTrapIndex=-1,this.removeAttribute("focus-trap-index"),this.removeFocusableElements()}handleClickInsideTrap(e){const t=e.composedPath(),s=t.findIndex(e=>-1!==this.findElement(e));if(-1!==s){const e=t[s],i=this.findElement(e);-1!==i&&(this.focusTrapIndex=i)}}manageNewElement(e){requestAnimationFrame(()=>{this.setFocusableElements();const t=this.findElement(e);-1!==t&&(this.focusTrapIndex=t)})}handleFocusVisible(e){const t=(e.detail?e.detail.sourceEvent:e).composedPath()[0];-1===(e.detail?this.findElement(t):-1)&&t!==this&&this.manageNewElement(t)}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeydownFocusTrap),this.addEventListener("focus-visible",this.handleFocusVisible),document.addEventListener("click",this.handleOutsideTrapClick),document.addEventListener("on-widget-update",this.updateFocusableElements)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeydownFocusTrap),this.removeEventListener("focus-visible",this.handleFocusVisible),document.removeEventListener("click",this.handleOutsideTrapClick),document.removeEventListener("on-widget-update",this.updateFocusableElements),this.removeFocusableElements()}}return a([Object(n.internalProperty)()],t.prototype,"focusableElements",void 0),a([Object(n.internalProperty)()],t.prototype,"initialFocusComplete",void 0),a([Object(n.property)({type:Boolean,reflect:!0,attribute:"active-focus-trap"})],t.prototype,"activeFocusTrap",void 0),a([Object(n.property)({type:Boolean,reflect:!0,attribute:"prevent-click-outside"})],t.prototype,"preventClickOutside",void 0),a([Object(n.property)({type:Number,reflect:!0,attribute:"focus-trap-index"})],t.prototype,"focusTrapIndex",void 0),a([Object(n.property)({type:Boolean,reflect:!0,attribute:"prevent-scroll"})],t.prototype,"preventScroll",void 0),Object(o.a)(r,t),t}}}]);
|
|
@@ -7,6 +7,7 @@ export declare abstract class FocusTrapClass extends LitElement {
|
|
|
7
7
|
protected focusableElements?: HTMLElement[];
|
|
8
8
|
protected initialFocusComplete?: boolean;
|
|
9
9
|
protected setFocusableElements?(): void;
|
|
10
|
+
protected removeFocusableElements?(): void;
|
|
10
11
|
protected setInitialFocus?(prefferableElement?: HTMLElement | number, ignoreAutoFocus?: boolean): void;
|
|
11
12
|
}
|
|
12
13
|
export interface FocusTrapInterface {
|