@govtechsg/sgds-web-component 3.12.0-rc.1 → 3.12.0

package/components/Mainnav/index.umd.min.js

@@ -2398,7 +2398,7 @@ let Be;$e?.({LitElement:He}),(_e.litElementVersions??=[]).push("4.2.2"),_e.litEl
    * @license
    * Copyright 2020 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */const xi=()=>new yi;class yi{}const Zi=new WeakMap;const Ci=Ie(class extends bi{render(e){return ce}update(e,[t]){const a=t!==this._ref;return a&&void 0!==this._ref&&this._updateRefValue(void 0),(a||this._lastElementForRef!==this._element)&&(this._ref=t,this._context=e.options?.host,this._updateRefValue(this._element=e.element)),ce}_updateRefValue(e){if(this.isConnected||(e=void 0),"function"==typeof this._ref){const t=this._context??globalThis;let a=Zi.get(t);void 0===a&&(a=new WeakMap,Zi.set(t,a)),void 0!==a.get(this._ref)&&this._ref.call(this._context,void 0),a.set(this._ref,e),void 0!==e&&this._ref.call(this._context,e)}else this._ref.value=e}get _lastElementForRef(){return"function"==typeof this._ref?Zi.get(this._context??globalThis)?.get(this._ref):this._ref?.value}disconnected(){this._lastElementForRef===this._element&&this._updateRefValue(void 0)}reconnected(){this._updateRefValue(this._element)}});class Mi extends qe{constructor(){super(...arguments),this.myDropdown=xi(),this.dropdownMenuId=tt("dropdown-menu","div"),this.noFlip=!1,this.menuAlignRight=!1,this.drop="down",this.floatingOpts={},this.menuIsOpen=!1,this.close="default",this.disabled=!1,this.readonly=!1,this.menuRef=xi(),this._handleClickOutOfElement=e=>{this.menuIsOpen&&(e.composedPath().includes(this)||this.hideMenu(!0))}}connectedCallback(){super.connectedCallback(),"inside"!==this.close&&document.addEventListener("click",this._handleClickOutOfElement),this.addEventListener("keydown",this._handleKeyboardMenuEvent)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleClickOutOfElement),this.removeEventListener("keydown",this._handleKeyboardMenuEvent),this._cleanupAutoUpdate&&(this._cleanupAutoUpdate(),this._cleanupAutoUpdate=void 0)}firstUpdated(e){super.firstUpdated(e),this.menuIsOpen&&this.updateFloatingPosition()}async showMenu(){this.disabled||this.menuIsOpen||(this.menuIsOpen=!0,this.emit("sgds-show"),await this.updateFloatingPosition(),this.emit("sgds-after-show"),this.myDropdown.value&&this.menuRef.value&&(this._cleanupAutoUpdate=ni(this.myDropdown.value,this.menuRef.value,()=>this.updateFloatingPosition())))}hideMenu(e){this.menuIsOpen&&(this.emit("sgds-hide",{detail:{isOutside:e}}),this.menuIsOpen=!1,setTimeout(()=>this.emit("sgds-after-hide"),0),this._cleanupAutoUpdate&&(this._cleanupAutoUpdate(),this._cleanupAutoUpdate=void 0))}toggleMenu(){this.menuIsOpen?this.hideMenu():this.showMenu()}_handleKeyboardMenuEvent(e){if(!this.readonly)switch(e.key){case"ArrowDown":case"ArrowUp":e.preventDefault(),this.menuIsOpen||this.showMenu();break;case"Escape":this.hideMenu()}}mergeMiddleware(e,t){const a=e=>{var t;return(null==e?void 0:e.name)||(null===(t=null==e?void 0:e.constructor)||void 0===t?void 0:t.name)},i=t.map(a),l=e.map(e=>{const l=a(e),n=i.indexOf(l);return-1!==n?t[n]:e}).concat(t.filter(t=>!e.some(e=>a(e)===a(t))));return l}async updateFloatingPosition(){if(!this.myDropdown.value||!this.menuRef.value)return;let e="bottom-start";switch(this.drop){case"up":e=this.menuAlignRight?"top-end":"top-start";break;case"right":e="right-start";break;case"left":e="left-start";break;case"down":e=this.menuAlignRight?"bottom-end":"bottom-start";break;default:e="bottom-start"}const t=[oi(8),this.noFlip?void 0:ri(),si()].filter(Boolean);let a=t;Array.isArray(this.floatingOpts.middleware)&&this.floatingOpts.middleware.length>0&&(a=this.mergeMiddleware(t,this.floatingOpts.middleware.filter(Boolean)));const i=Object.assign(Object.assign({strategy:"fixed",placement:e},this.floatingOpts),{middleware:a}),{x:l,y:n,strategy:o,placement:s}=await ci(this.myDropdown.value,this.menuRef.value,i);this.menuRef.value.setAttribute("data-placement",s),Object.assign(this.menuRef.value.style,{position:o,left:`${l}px`,top:`${n}px`})}}e([Le({type:Boolean,state:!0})],Mi.prototype,"noFlip",void 0),e([Le({type:Boolean,reflect:!0,state:!0})],Mi.prototype,"menuAlignRight",void 0),e([Le({type:String,reflect:!0,state:!0})],Mi.prototype,"drop",void 0),e([Le({type:Object})],Mi.prototype,"floatingOpts",void 0),e([Le({type:Boolean,reflect:!0})],Mi.prototype,"menuIsOpen",void 0),e([Le({type:Boolean,reflect:!0})],Mi.prototype,"disabled",void 0),e([Le({type:Boolean,reflect:!0})],Mi.prototype,"readonly",void 0);class _i extends Mi{constructor(){super(...arguments),this.nextDropdownItemNo=0,this.prevDropdownItemNo=-1,this.hidden=!1}connectedCallback(){super.connectedCallback(),this.addEventListener("sgds-hide",this._resetMenu)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("sgds-hide",this._resetMenu)}firstUpdated(e){super.firstUpdated(e),this.addEventListener("keydown",this._handleKeyboardMenuItemsEvent)}handleSelectSlot(e){const t=this._getActiveMenuItems(),a=t.indexOf(e.target);this.nextDropdownItemNo=a+1,this.prevDropdownItemNo=a<=0?t.length-1:a-1;e.target.disabled||(this.emit("sgds-select"),"outside"!==this.close&&this.hideMenu())}_resetMenu(){this.nextDropdownItemNo=0,this.prevDropdownItemNo=-1;this._getMenuItems().forEach(e=>{var t;const a=null===(t=null==e?void 0:e.shadowRoot)||void 0===t?void 0:t.querySelector(".dropdown-item");a&&a.removeAttribute("tabindex")})}_handleKeyboardMenuItemsEvent(e){if(this.readonly)return;const t=this._getActiveMenuItems();if(0!==t.length)switch(e.key){case"ArrowDown":e.preventDefault(),this._setMenuItem(this.nextDropdownItemNo);break;case"ArrowUp":e.preventDefault(),this._setMenuItem(this.prevDropdownItemNo);break;case"Tab":if(!this.menuIsOpen)return;e.preventDefault(),e.shiftKey?this._setMenuItem(this.prevDropdownItemNo):this._setMenuItem(this.nextDropdownItemNo);break;case"Enter":t.includes(e.target)&&this.handleSelectSlot(e)}}_getMenuItems(){var e,t;if(this.shadowRoot.querySelector("slot#default")){return null===(e=this.shadowRoot.querySelector("slot#default"))||void 0===e?void 0:e.assignedElements({flatten:!0}).filter(e=>!e.classList.contains("empty-menu")&&!e.hasAttribute("hidden"))}if(null===(t=this.menu)||void 0===t?void 0:t.hasChildNodes()){return[...Array.from(this.menu.children)]}return[]}_getActiveMenuItems(){return this._getMenuItems().filter(e=>!e.disabled&&!e.hidden)}_setMenuItem(e){const t=this._getActiveMenuItems();if(0===t.length)return;const a=(e%t.length+t.length)%t.length,i=t[a];this.emit("i-sgds-option-focus",{detail:{option:i}}),this.nextDropdownItemNo=(a+1)%t.length,this.prevDropdownItemNo=(a-1+t.length)%t.length,t.forEach(e=>{const t=e.shadowRoot.querySelector(".dropdown-item");t.setAttribute("tabindex",e===i?"0":"-1"),e===i&&t.focus()})}}_i.styles=Mi.styles,e([Te("ul.dropdown-menu")],_i.prototype,"menu",void 0),e([Ee()],_i.prototype,"nextDropdownItemNo",void 0),e([Ee()],_i.prototype,"prevDropdownItemNo",void 0),e([Le({type:Boolean,reflect:!0})],_i.prototype,"hidden",void 0);class Vi extends _i{constructor(){super(),this.noFlip=!1,this.menuAlignRight=!1,this.drop="down",this.menuRef=Ci()}async _handleClick(){this.disabled||this.toggleMenu()}_handleCloseMenu(){const e=this._toggler[0];null==e||e.focus()}async connectedCallback(){super.connectedCallback(),this.addEventListener("sgds-hide",this._handleCloseMenu)}async disconnectedCallback(){this.removeEventListener("sgds-hide",this._handleCloseMenu)}async firstUpdated(e){super.firstUpdated(e),this.menuIsOpen&&await this.showMenu(),this._handleDisabled()}_handleDisabled(){const e=this._toggler[0];e&&(this.disabled?e.setAttribute("disabled","true"):e.hasAttribute("disabled")&&e.removeAttribute("disabled"))}render(){return oe`
+   */const xi=()=>new yi;class yi{}const Zi=new WeakMap;const Ci=Ie(class extends bi{render(e){return ce}update(e,[t]){const a=t!==this._ref;return a&&void 0!==this._ref&&this._updateRefValue(void 0),(a||this._lastElementForRef!==this._element)&&(this._ref=t,this._context=e.options?.host,this._updateRefValue(this._element=e.element)),ce}_updateRefValue(e){if(this.isConnected||(e=void 0),"function"==typeof this._ref){const t=this._context??globalThis;let a=Zi.get(t);void 0===a&&(a=new WeakMap,Zi.set(t,a)),void 0!==a.get(this._ref)&&this._ref.call(this._context,void 0),a.set(this._ref,e),void 0!==e&&this._ref.call(this._context,e)}else this._ref.value=e}get _lastElementForRef(){return"function"==typeof this._ref?Zi.get(this._context??globalThis)?.get(this._ref):this._ref?.value}disconnected(){this._lastElementForRef===this._element&&this._updateRefValue(void 0)}reconnected(){this._updateRefValue(this._element)}});class Mi extends qe{constructor(){super(...arguments),this.myDropdown=xi(),this.dropdownMenuId=tt("dropdown-menu","div"),this.noFlip=!1,this.menuAlignRight=!1,this.drop="down",this.floatingOpts={},this.menuIsOpen=!1,this.close="default",this.disabled=!1,this.readonly=!1,this.menuRef=xi(),this._handleClickOutOfElement=e=>{this.menuIsOpen&&(e.composedPath().includes(this)||this.hideMenu(!0))}}connectedCallback(){super.connectedCallback(),"inside"!==this.close&&document.addEventListener("click",this._handleClickOutOfElement),this.addEventListener("keydown",this._handleKeyboardMenuEvent)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleClickOutOfElement),this.removeEventListener("keydown",this._handleKeyboardMenuEvent),this._cleanupAutoUpdate&&(this._cleanupAutoUpdate(),this._cleanupAutoUpdate=void 0)}firstUpdated(e){super.firstUpdated(e),this.menuIsOpen&&this.updateFloatingPosition()}async showMenu(){this.disabled||this.menuIsOpen||(this.menuIsOpen=!0,this.emit("sgds-show"),await this.updateFloatingPosition(),this.emit("sgds-after-show"),this.myDropdown.value&&this.menuRef.value&&(this._cleanupAutoUpdate=ni(this.myDropdown.value,this.menuRef.value,()=>this.updateFloatingPosition())))}hideMenu(e){this.menuIsOpen&&(this.emit("sgds-hide",{detail:{isOutside:e}}),this.menuIsOpen=!1,setTimeout(()=>this.emit("sgds-after-hide"),0),this._cleanupAutoUpdate&&(this._cleanupAutoUpdate(),this._cleanupAutoUpdate=void 0))}toggleMenu(){this.menuIsOpen?this.hideMenu():this.showMenu()}_handleKeyboardMenuEvent(e){if(!this.readonly)switch(e.key){case"ArrowDown":case"ArrowUp":e.preventDefault(),this.menuIsOpen||this.showMenu();break;case"Escape":this.hideMenu()}}mergeMiddleware(e,t){const a=e=>{var t;return(null==e?void 0:e.name)||(null===(t=null==e?void 0:e.constructor)||void 0===t?void 0:t.name)},i=t.map(a),l=e.map(e=>{const l=a(e),n=i.indexOf(l);return-1!==n?t[n]:e}).concat(t.filter(t=>!e.some(e=>a(e)===a(t))));return l}async updateFloatingPosition(){if(!this.myDropdown.value||!this.menuRef.value)return;let e="bottom-start";switch(this.drop){case"up":e=this.menuAlignRight?"top-end":"top-start";break;case"right":e="right-start";break;case"left":e="left-start";break;case"down":e=this.menuAlignRight?"bottom-end":"bottom-start";break;default:e="bottom-start"}const t=[oi(8),this.noFlip?void 0:ri(),si()].filter(Boolean);let a=t;Array.isArray(this.floatingOpts.middleware)&&this.floatingOpts.middleware.length>0&&(a=this.mergeMiddleware(t,this.floatingOpts.middleware.filter(Boolean)));const i=Object.assign(Object.assign({strategy:"fixed",placement:e},this.floatingOpts),{middleware:a}),{x:l,y:n,strategy:o,placement:s}=await ci(this.myDropdown.value,this.menuRef.value,i);this.menuRef.value.setAttribute("data-placement",s),Object.assign(this.menuRef.value.style,{position:o,left:`${l}px`,top:`${n}px`})}}e([Le({type:Boolean,state:!0})],Mi.prototype,"noFlip",void 0),e([Le({type:Boolean,reflect:!0,state:!0})],Mi.prototype,"menuAlignRight",void 0),e([Le({type:String,reflect:!0,state:!0})],Mi.prototype,"drop",void 0),e([Le({type:Object})],Mi.prototype,"floatingOpts",void 0),e([Le({type:Boolean,reflect:!0})],Mi.prototype,"menuIsOpen",void 0),e([Le({type:Boolean,reflect:!0})],Mi.prototype,"disabled",void 0),e([Le({type:Boolean,reflect:!0})],Mi.prototype,"readonly",void 0);class _i extends Mi{constructor(){super(...arguments),this.nextDropdownItemNo=0,this.prevDropdownItemNo=-1,this.hidden=!1}connectedCallback(){super.connectedCallback(),this.addEventListener("sgds-hide",this._resetMenu)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("sgds-hide",this._resetMenu)}firstUpdated(e){super.firstUpdated(e),this.addEventListener("keydown",this._handleKeyboardMenuItemsEvent)}handleSelectSlot(e){const t=this._getActiveMenuItems(),a=t.indexOf(e.target);this.nextDropdownItemNo=a+1,this.prevDropdownItemNo=a<=0?t.length-1:a-1;const i=e.target;i.disabled||(this.emit("sgds-select",{detail:{item:i}}),"outside"!==this.close&&this.hideMenu())}_resetMenu(){this.nextDropdownItemNo=0,this.prevDropdownItemNo=-1;this._getMenuItems().forEach(e=>{var t;const a=null===(t=null==e?void 0:e.shadowRoot)||void 0===t?void 0:t.querySelector(".dropdown-item");a&&a.removeAttribute("tabindex")})}_handleKeyboardMenuItemsEvent(e){if(this.readonly)return;const t=this._getActiveMenuItems();if(0!==t.length)switch(e.key){case"ArrowDown":e.preventDefault(),this._setMenuItem(this.nextDropdownItemNo);break;case"ArrowUp":e.preventDefault(),this._setMenuItem(this.prevDropdownItemNo);break;case"Tab":if(!this.menuIsOpen)return;e.preventDefault(),e.shiftKey?this._setMenuItem(this.prevDropdownItemNo):this._setMenuItem(this.nextDropdownItemNo);break;case"Enter":t.includes(e.target)&&this.handleSelectSlot(e)}}_getMenuItems(){var e,t;if(this.shadowRoot.querySelector("slot#default")){return null===(e=this.shadowRoot.querySelector("slot#default"))||void 0===e?void 0:e.assignedElements({flatten:!0}).filter(e=>!e.classList.contains("empty-menu")&&!e.hasAttribute("hidden"))}if(null===(t=this.menu)||void 0===t?void 0:t.hasChildNodes()){return[...Array.from(this.menu.children)]}return[]}_getActiveMenuItems(){return this._getMenuItems().filter(e=>!e.disabled&&!e.hidden)}_setMenuItem(e){const t=this._getActiveMenuItems();if(0===t.length)return;const a=(e%t.length+t.length)%t.length,i=t[a];this.emit("i-sgds-option-focus",{detail:{option:i}}),this.nextDropdownItemNo=(a+1)%t.length,this.prevDropdownItemNo=(a-1+t.length)%t.length,t.forEach(e=>{const t=e.shadowRoot.querySelector(".dropdown-item");t.setAttribute("tabindex",e===i?"0":"-1"),e===i&&t.focus()})}}_i.styles=Mi.styles,e([Te("ul.dropdown-menu")],_i.prototype,"menu",void 0),e([Ee()],_i.prototype,"nextDropdownItemNo",void 0),e([Ee()],_i.prototype,"prevDropdownItemNo",void 0),e([Le({type:Boolean,reflect:!0})],_i.prototype,"hidden",void 0);class Vi extends _i{constructor(){super(),this.noFlip=!1,this.menuAlignRight=!1,this.drop="down",this.menuRef=Ci()}async _handleClick(){this.disabled||this.toggleMenu()}_handleCloseMenu(){const e=this._toggler[0];null==e||e.focus()}async connectedCallback(){super.connectedCallback(),this.addEventListener("sgds-hide",this._handleCloseMenu)}async disconnectedCallback(){this.removeEventListener("sgds-hide",this._handleCloseMenu)}async firstUpdated(e){super.firstUpdated(e),this.menuIsOpen&&await this.showMenu(),this._handleDisabled()}_handleDisabled(){const e=this._toggler[0];e&&(this.disabled?e.setAttribute("disabled","true"):e.hasAttribute("disabled")&&e.removeAttribute("disabled"))}render(){return oe`
       <div class="dropdown">
         <div
           class="toggler-container"
@@ -2413,7 +2413,7 @@ let Be;$e?.({LitElement:He}),(_e.litElementVersions??=[]).push("4.2.2"),_e.litEl
           <slot id="default" @click=${this.handleSelectSlot}></slot>
         </div>
       </div>
-    `}}Vi.styles=[..._i.styles,di,hi],e([Le({type:Boolean,reflect:!0,state:!1})],Vi.prototype,"noFlip",void 0),e([Le({type:Boolean,reflect:!0,state:!1})],Vi.prototype,"menuAlignRight",void 0),e([Le({type:String,reflect:!0,state:!1})],Vi.prototype,"drop",void 0),e([Oe({slot:"toggler",flatten:!0})],Vi.prototype,"_toggler",void 0),e([at("disabled",{waitUntilFirstUpdate:!0})],Vi.prototype,"_handleDisabled",null);var Hi=p`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}`;class ki extends qe{constructor(){super(...arguments),this.active=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",e=>{"Enter"===e.key&&this.anchor[0].click()}),this.addEventListener("click",()=>{this.anchor.length>0&&this.anchor[0].click()}),this.setAttribute("role","menuitem"),this.setAttribute("aria-disabled",`${this.disabled}`)}render(){return oe`
+    `}}Vi.styles=[..._i.styles,di,hi],e([Le({type:Boolean,reflect:!0,state:!1})],Vi.prototype,"noFlip",void 0),e([Le({type:Boolean,reflect:!0,state:!1})],Vi.prototype,"menuAlignRight",void 0),e([Le({type:String,reflect:!0,state:!1})],Vi.prototype,"drop",void 0),e([Oe({slot:"toggler",flatten:!0})],Vi.prototype,"_toggler",void 0),e([at("disabled",{waitUntilFirstUpdate:!0})],Vi.prototype,"_handleDisabled",null);var Hi=p`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-50);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}`;class ki extends qe{constructor(){super(...arguments),this.active=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",e=>{"Enter"===e.key&&this.anchor[0].click()}),this.setAttribute("role","menuitem"),this.setAttribute("aria-disabled",`${this.disabled}`)}render(){return oe`
       <div
         class="dropdown-item ${Ue({disabled:this.disabled,active:this.active})}"
         tabindex=${this.disabled?"-1":"0"}