@govtechsg/sgds-web-component 3.23.0-rc.0 → 3.23.0-rc.1

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

@@ -2410,14 +2410,15 @@ let Se;$e?.({LitElement:He}),(_e.litElementVersions??=[]).push("4.2.2"),_e.litEl
           <slot id="default" @click=${this.handleSelectSlot}></slot>
         </div>
       </div>
-    `}}Hi.styles=[...Vi.styles,hi,vi],e([Le({type:Boolean,reflect:!0,state:!1})],Hi.prototype,"noFlip",void 0),e([Le({type:Boolean,reflect:!0,state:!1})],Hi.prototype,"menuAlignRight",void 0),e([Le({type:String,reflect:!0,state:!1})],Hi.prototype,"drop",void 0),e([Le({type:String,reflect:!0,state:!1})],Hi.prototype,"close",void 0),e([Oe({slot:"toggler",flatten:!0})],Hi.prototype,"_toggler",void 0),e([at("menuIsOpen")],Hi.prototype,"_handleMenuIsOpenChange",null),e([at("disabled",{waitUntilFirstUpdate:!0})],Hi.prototype,"_handleDisabled",null);var ki=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-40);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)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;class $i extends We{constructor(){super(...arguments),this.active=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",e=>{"Enter"===e.key&&this.anchor.length>0&&this.anchor[0].click()}),this.setAttribute("role","menuitem"),this.setAttribute("aria-disabled",`${this.disabled}`)}render(){return oe`
+    `}}Hi.styles=[...Vi.styles,hi,vi],e([Le({type:Boolean,reflect:!0,state:!1})],Hi.prototype,"noFlip",void 0),e([Le({type:Boolean,reflect:!0,state:!1})],Hi.prototype,"menuAlignRight",void 0),e([Le({type:String,reflect:!0,state:!1})],Hi.prototype,"drop",void 0),e([Le({type:String,reflect:!0,state:!1})],Hi.prototype,"close",void 0),e([Oe({slot:"toggler",flatten:!0})],Hi.prototype,"_toggler",void 0),e([at("menuIsOpen")],Hi.prototype,"_handleMenuIsOpenChange",null),e([at("disabled",{waitUntilFirstUpdate:!0})],Hi.prototype,"_handleDisabled",null);var ki=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-40);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)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;class $i extends We{constructor(){super(...arguments),this.active=!1,this.disabled=!1,this.ariaLabel=""}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",e=>{"Enter"===e.key&&this.anchor.length>0&&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"}
+        aria-label=${it(this.ariaLabel||void 0)}
       >
         <slot></slot>
       </div>
-    `}}$i.styles=[hi,ki],$i.dependencies={"sgds-icon":$t},e([Oe({flatten:!0})],$i.prototype,"anchor",void 0),e([Le({type:Boolean})],$i.prototype,"active",void 0),e([Le({type:Boolean,reflect:!0})],$i.prototype,"disabled",void 0);const Si="Enter";class Bi extends We{constructor(){super(...arguments),this._breakpointReached=!0,this.togglerId=tt("dropdown","button"),this.active=!1,this.disabled=!1}get defaultSlotItems(){return[...this.defaultNodes||[]].filter(e=>void 0!==e.tagName)}updated(){this._breakpointReached&&(this._copyTextToMenu(),this._resetDropdownMenu(),this._hideDropdownMenuItems())}_handleSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{var t;e.addEventListener("keydown",this._handleKeyboardMenuItemsEvent.bind(this));const a=e.shadowRoot.querySelector(".dropdown-item");a.classList.add("mainnav-dropdown-link");const i=(null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector("a"))||e.querySelector("a");i.tabIndex=-1,a.classList.contains("disabled")?(i.setAttribute("href","javascript:void(0)"),i.setAttribute("tabindex","-1")):i.addEventListener("click",e=>{e.target.closest("sgds-mainnav").hide()})})}_handleDesktopSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{const t=e.shadowRoot.querySelector(".dropdown-item");t.classList.remove("mainnav-dropdown-link");e.shadowRoot.querySelector(".dropdown-item slot").assignedElements({flatten:!0}).forEach(e=>{t.classList.contains("disabled")&&(e.setAttribute("href","javascript:void(0)"),e.setAttribute("tabindex","-1"))})})}_handleKeyboardMenuItemsEvent(e){if(!this._breakpointReached)return;const t=this.defaultSlotItems.filter(e=>!e.hasAttribute("disabled")),a=[this.menuHeaderButton,...t],i=a.length;if(0===i)return;const n=a[0],l=a[i-1].shadowRoot.querySelector(".dropdown-item");let o=document.activeElement;if(o===this&&(o=this.shadowRoot.activeElement),"Tab"===e.key)if(e.shiftKey)o===n&&(e.preventDefault(),setTimeout(()=>{l.focus()},0));else{const t=o.shadowRoot?o.shadowRoot.querySelector(".dropdown-item"):null;t&&t===l&&(e.preventDefault(),n.focus())}}_copyTextToMenu(){this.menuHeaderText.innerHTML=this.togglerNodes[0].innerHTML}_hideDropdownMenuItems(){this.dropdownItems.style.display="none",this.dropdownItems.setAttribute("aria-hidden","true")}_resetDropdownMenu(){const e=this._getNavbarBody();return e?new Promise(t=>{const a=i=>{"transform"===i.propertyName&&(e.removeEventListener("transitionend",a),t())};getComputedStyle(e).transitionProperty.includes("transform")?(e.addEventListener("transitionend",a),e.style.removeProperty("transform")):(e.style.removeProperty("transform"),t())}):Promise.resolve()}_handleKeyboardOpen(e){this.disabled||e.key!==Si&&" "!==e.key||(e.preventDefault(),this._openMenu())}_getNavbarBody(){const e=document.querySelector("sgds-mainnav");if(!(null==e?void 0:e.shadowRoot))return void console.warn("sgds-mainnav or its shadowRoot not found");const t=e.shadowRoot.querySelector(".navbar-body");if(t)return t;console.warn(".navbar-body not found in sgds-mainnav")}_openMenu(){this._getNavbarBody().style.transform="translateX(-100%)",this.dropdownItems.style.removeProperty("display"),this.dropdownItems.setAttribute("aria-hidden","false"),setTimeout(()=>{this.menuHeaderButton.focus()},50)}_handleHeaderKeyboardEvent(e){switch(e.key){case"Tab":this._handleKeyboardMenuItemsEvent(e);break;case Si:case" ":e.preventDefault(),this._closeMenu()}}async _closeMenu(){await this._resetDropdownMenu(),this._hideDropdownMenuItems(),this.navLink.focus()}render(){const e=oe`
+    `}}$i.styles=[hi,ki],$i.dependencies={"sgds-icon":$t},e([Oe({flatten:!0})],$i.prototype,"anchor",void 0),e([Le({type:Boolean})],$i.prototype,"active",void 0),e([Le({type:Boolean,reflect:!0})],$i.prototype,"disabled",void 0),e([Le({type:String})],$i.prototype,"ariaLabel",void 0);const Si="Enter";class Bi extends We{constructor(){super(...arguments),this._breakpointReached=!0,this.togglerId=tt("dropdown","button"),this.active=!1,this.disabled=!1}get defaultSlotItems(){return[...this.defaultNodes||[]].filter(e=>void 0!==e.tagName)}updated(){this._breakpointReached&&(this._copyTextToMenu(),this._resetDropdownMenu(),this._hideDropdownMenuItems())}_handleSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{var t;e.addEventListener("keydown",this._handleKeyboardMenuItemsEvent.bind(this));const a=e.shadowRoot.querySelector(".dropdown-item");a.classList.add("mainnav-dropdown-link");const i=(null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector("a"))||e.querySelector("a");i.tabIndex=-1,a.classList.contains("disabled")?(i.setAttribute("href","javascript:void(0)"),i.setAttribute("tabindex","-1")):i.addEventListener("click",e=>{e.target.closest("sgds-mainnav").hide()})})}_handleDesktopSlotChange(e){e.target.assignedElements({flatten:!0}).forEach(e=>{const t=e.shadowRoot.querySelector(".dropdown-item");t.classList.remove("mainnav-dropdown-link");e.shadowRoot.querySelector(".dropdown-item slot").assignedElements({flatten:!0}).forEach(e=>{t.classList.contains("disabled")&&(e.setAttribute("href","javascript:void(0)"),e.setAttribute("tabindex","-1"))})})}_handleKeyboardMenuItemsEvent(e){if(!this._breakpointReached)return;const t=this.defaultSlotItems.filter(e=>!e.hasAttribute("disabled")),a=[this.menuHeaderButton,...t],i=a.length;if(0===i)return;const n=a[0],l=a[i-1].shadowRoot.querySelector(".dropdown-item");let o=document.activeElement;if(o===this&&(o=this.shadowRoot.activeElement),"Tab"===e.key)if(e.shiftKey)o===n&&(e.preventDefault(),setTimeout(()=>{l.focus()},0));else{const t=o.shadowRoot?o.shadowRoot.querySelector(".dropdown-item"):null;t&&t===l&&(e.preventDefault(),n.focus())}}_copyTextToMenu(){this.menuHeaderText.innerHTML=this.togglerNodes[0].innerHTML}_hideDropdownMenuItems(){this.dropdownItems.style.display="none",this.dropdownItems.setAttribute("aria-hidden","true")}_resetDropdownMenu(){const e=this._getNavbarBody();return e?new Promise(t=>{const a=i=>{"transform"===i.propertyName&&(e.removeEventListener("transitionend",a),t())};getComputedStyle(e).transitionProperty.includes("transform")?(e.addEventListener("transitionend",a),e.style.removeProperty("transform")):(e.style.removeProperty("transform"),t())}):Promise.resolve()}_handleKeyboardOpen(e){this.disabled||e.key!==Si&&" "!==e.key||(e.preventDefault(),this._openMenu())}_getNavbarBody(){const e=document.querySelector("sgds-mainnav");if(!(null==e?void 0:e.shadowRoot))return void console.warn("sgds-mainnav or its shadowRoot not found");const t=e.shadowRoot.querySelector(".navbar-body");if(t)return t;console.warn(".navbar-body not found in sgds-mainnav")}_openMenu(){this._getNavbarBody().style.transform="translateX(-100%)",this.dropdownItems.style.removeProperty("display"),this.dropdownItems.setAttribute("aria-hidden","false"),setTimeout(()=>{this.menuHeaderButton.focus()},50)}_handleHeaderKeyboardEvent(e){switch(e.key){case"Tab":this._handleKeyboardMenuItemsEvent(e);break;case Si:case" ":e.preventDefault(),this._closeMenu()}}async _closeMenu(){await this._resetDropdownMenu(),this._hideDropdownMenuItems(),this.navLink.focus()}render(){const e=oe`
       <a
         class="${Ue({"nav-link":!0,active:this.active,disabled:this.disabled})}"
         aria-disabled=${this.disabled?"true":"false"}