@govtechsg/sgds-web-component 3.21.2-rc.2 → 3.21.2-rc.3

package/custom-elements.json

@@ -27538,7 +27538,7 @@
   "package": {
     "name": "@govtechsg/sgds-web-component",
     "description": "",
-    "version": "3.21.2-rc.2",
+    "version": "3.21.2-rc.3",
     "author": "GovTechSG",
     "license": "MIT"
   }

package/index.umd.min.js

@@ -4184,8 +4184,10 @@ const Ol="important",Nl=" !"+Ol;const Ul=Ye(class extends je{constructor(e){if(s
       </${e}>
     `}}ic.styles=[...ga.styles,sc],e([Fe({slot:"icon",flatten:!0})],ic.prototype,"_iconNode",void 0),e([Fe({slot:"upper",flatten:!0})],ic.prototype,"_upperNode",void 0),e([Le({slot:"footer"})],ic.prototype,"footerNode",void 0),e([Le({slot:"link"})],ic.prototype,"linkNode",void 0),e([De({type:Boolean,reflect:!0})],ic.prototype,"noPadding",void 0),lt("sgds-icon-card",ic);var ac=n`.sidebar{display:flex;flex-direction:column;height:100%;position:relative;transition:width var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);width:var(--sgds-dimension-288);z-index:var(--sgds-z-index-sticky)}.sidebar:not(.overlay).sidebar--collapsed{width:var(--sgds-dimension-72)}.overlay{left:0;position:absolute;top:0}.overlay.sidebar--collapsed{width:var(--sgds-dimension-0)}.sidebar-top{align-items:center;display:flex;gap:var(--sgds-gap-md);justify-content:space-between;padding:0 var(--sgds-padding-xs)}:not(.overlay).sidebar--collapsed .sidebar-brand-name{display:none}:not(.overlay).sidebar--collapsed .sidebar-top{justify-content:center}.sidebar-main{background-color:var(--sgds-surface-default);border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);height:100%;overflow-x:hidden;overflow-y:auto;padding:var(--sgds-padding-lg) 0;position:relative;z-index:1}.overlay .sidebar-main{left:0;transition:left var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard)}.overlay.sidebar--collapsed .sidebar-main{left:calc(var(--sgds-dimension-288)*-1)}.sidebar-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.sidebar-content{display:flex;flex:1;flex-direction:column;gap:var(--sgds-gap-md);overflow-y:auto}.sidebar-nested-overlay{background-color:var(--sgds-surface-raised);overflow-y:auto;padding:var(--sgds-padding-md) var(--sgds-padding-xs);transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);transition-property:opacity left;width:var(--sgds-dimension-288);z-index:0}.sidebar--overlay,.sidebar-nested-overlay{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0}.sidebar--overlay{background-color:var(--sgds-bg-overlay);content:"";transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);width:100vw}.sidebar--overlay.show{opacity:1;pointer-events:unset}.sidebar-nested-overlay.show{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:var(--sgds-dimension-288);opacity:1;pointer-events:auto}:not(.overlay).sidebar--collapsed .sidebar-nested-overlay.show{left:var(--sgds-dimension-72)}.sidebar-nested-overlay sgds-icon-button{display:none}.sidebar::-webkit-scrollbar{width:var(--sgds-dimension-2)}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-xs)}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--sgds-color-subtle)}@media screen and (max-width:767px){.sidebar-nested-overlay sgds-icon-button{display:block}.sidebar,.sidebar-nested-overlay{width:var(--sgds-dimension-256)}.sidebar-nested-overlay,.sidebar-nested-overlay.show{left:var(--sgds-dimension-256)}}@media screen and (max-width:511px){.sidebar--overlay{display:none}.sidebar{position:absolute;width:100dvw}.sidebar-nested-overlay{left:-100dvw;width:100dvw;z-index:2}.sidebar-nested-overlay.show,:not(.overlay).sidebar--collapsed .sidebar-nested-overlay.show{left:0}.overlay.sidebar--collapsed .sidebar-main{left:calc(100dvw*-1)}}`;const oc="sidebar-active-group",nc="sidebar-active",rc="sidebar-collapsed",lc="sidebar-drawer-items",dc="sidebar-drawer-open",cc="sidebar-drawer-overlay";var hc=n`.sidebar-item{border-radius:var(--sgds-border-radius-md);cursor:pointer;padding:var(--sgds-padding-xs);transition:background-color .15s ease-in-out,color .15s ease-in-out}.sidebar-item.active,.sidebar-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.sidebar-item:focus,.sidebar-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sidebar-item-label-wrapper,.sidebar-item-label-wrapper>div{align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sidebar-item-label-wrapper{justify-content:space-between}.sidebar-item-label{-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;display:-webkit-box;font-size:var(--sgds-font-size-1);line-height:var(--sgds-line-height-20);max-height:calc(var(--sgds-line-height-20, 20px)*2);overflow:hidden}.sidebar-item-label.offset{margin-left:var(--sgds-margin-2-xl)}.sidebar-item-label-wrapper .sidebar-item.active{background-color:var(--sgds-surface-raised);color:var(--sgds-primary-color-default)}.sidebar-item-label-wrapper .sidebar-item-indicator{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}.sidebar-item--collapsed .sidebar-item-indicator,.sidebar-item--collapsed .sidebar-item-label{display:none}.sidebar-item--collapsed .sidebar-item-label-wrapper{justify-content:center}.sidebar-submenu{overflow:hidden}.sidebar-submenu>div{margin-top:-100%;opacity:0;pointer-events:none;transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard)}.sidebar-submenu.show>div{margin-top:0;opacity:1;pointer-events:auto}.sidebar-submenu--collapsed{display:none}`;class uc extends Pe{constructor(){super(...arguments),this.title="",this.name="",this._sidebarCollapsed=!1,this._sidebarActiveItem=null,this._sidebarActiveGroup=null,this._drawerItems=null,this._showDrawer=!1,this._isOverlay=!1,this._childLevel=1,this._selected=!1,this._hidden=!1,this._childElements=[],this._childActive=!1}connectedCallback(){super.connectedCallback(),this._getChildLevel(),this.addEventListener("keydown",this._handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeyDown)}firstUpdated(e){super.firstUpdated(e),this._getChildLevel()}updated(){2===this._childLevel&&(this._hidden=!this.closest(".sidebar-nested-overlay"))}_handleSlotChange(){this._childElements=this._defaultNodes}_handleClick(){this.emit("i-sgds-click",{detail:{element:this,level:this._childLevel}})}_handleKeyDown(e){var t,s,i,a;const o=e.target;switch(e.key){case" ":case"Enter":return e.preventDefault(),e.stopPropagation(),void(e.target===this&&this._handleClick());case"ArrowDown":{e.preventDefault(),e.stopPropagation();const s=o._childElements[0],i=((null==s?void 0:s._hidden)?null:s)||o.nextElementSibling||(null===(t=o.parentElement)||void 0===t?void 0:t.nextElementSibling);if(null==i?void 0:i.shadowRoot){const e=i.shadowRoot.querySelector("[tabindex]");null==e||e.focus()}return}case"ArrowUp":{e.preventDefault(),e.stopPropagation();const t=null===(s=o.previousElementSibling)||void 0===s?void 0:s._childElements,i=t?t[(null==t?void 0:t.length)-1]:null,a=((null==i?void 0:i._hidden)?null:i)||o.previousElementSibling||o.parentElement;if(null==a?void 0:a.shadowRoot){const e=a.shadowRoot.querySelector("[tabindex]");null==e||e.focus()}return}case"ArrowLeft":if(e.preventDefault(),e.stopPropagation(),this._sidebarActiveGroup===this)this._showDrawer&&this._handleClick();else{if(o._childLevel>=2&&(null===(i=this._sidebarActiveGroup)||void 0===i?void 0:i.shadowRoot)){const e=this._sidebarActiveGroup.shadowRoot.querySelector("[tabindex]");null==e||e.focus()}}return;case"ArrowRight":if(e.preventDefault(),e.stopPropagation(),this._sidebarActiveGroup===this){if(null===(a=this._drawerItems)||void 0===a?void 0:a.length)if(this._showDrawer){const e=this._drawerItems[0];if(null==e?void 0:e.shadowRoot){const t=e.shadowRoot.querySelector("[tabindex]");null==t||t.focus()}}else this._handleClick()}else 1===this._childLevel&&this._childElements.length>0&&this._handleClick();return}}_getChildLevel(){let e=this.parentElement,t=1;for(;"sgds-sidebar-group"===(null==e?void 0:e.tagName.toLowerCase());)t+=1,e=e.parentElement;const s=null==e?void 0:e.classList.contains("sidebar-nested-overlay");this._childLevel=s?t+1:t}}uc.styles=Ni.styles,e([De({type:String,reflect:!0})],uc.prototype,"title",void 0),e([De({type:String,reflect:!0})],uc.prototype,"name",void 0),e([wl({context:rc,subscribe:!0}),Ve()],uc.prototype,"_sidebarCollapsed",void 0),e([wl({context:nc,subscribe:!0}),Ve()],uc.prototype,"_sidebarActiveItem",void 0),e([wl({context:oc,subscribe:!0}),Ve()],uc.prototype,"_sidebarActiveGroup",void 0),e([wl({context:lc,subscribe:!0}),Ve()],uc.prototype,"_drawerItems",void 0),e([wl({context:dc,subscribe:!0}),Ve()],uc.prototype,"_showDrawer",void 0),e([wl({context:cc,subscribe:!0}),Ve()],uc.prototype,"_isOverlay",void 0),e([Ve()],uc.prototype,"_childLevel",void 0),e([Ve()],uc.prototype,"_selected",void 0),e([Ve()],uc.prototype,"_hidden",void 0),e([Ve()],uc.prototype,"_childElements",void 0),e([Ve()],uc.prototype,"_childActive",void 0),e([Le({flatten:!0})],uc.prototype,"_defaultNodes",void 0);class pc extends uc{constructor(){super(...arguments),this._showMenu=!1}get showMenu(){return this._showMenu}_handleActiveItemContext(){this._childLevel>1&&this._sidebarActiveItem&&this.contains(this._sidebarActiveItem)&&(this._showMenu=!0)}_handleClick(){1!==this._childLevel?(this._showMenu=!this._showMenu,this._childElements.forEach(e=>{e._hidden=!this._showMenu})):super._handleClick()}_getIcon(){return 1===this._childLevel?"chevron-right":this._showMenu?"chevron-down":"chevron-up"}render(){return ee`
       <div
+        role="button"
         class=${We({"sidebar-item":!0,"sidebar-item--collapsed":!this._isOverlay&&this._sidebarCollapsed&&1===this._childLevel,active:this._selected})}
         @click=${()=>this._handleClick()}
+        aria-label=${this.title||this.name}
         aria-expanded=${this._showMenu}
         tabindex=${this._childLevel>2&&!this._showMenu?-1:0}
       >
@@ -4197,7 +4199,7 @@ const Ol="important",Nl=" !"+Ol;const Ul=Ye(class extends je{constructor(e){if(s
 
           <span class="sidebar-item-indicator">
             <slot name="indicator"></slot>
-            <sgds-icon aria-label=${this.title||this.name} name=${this._getIcon()} size="sm"></sgds-icon>
+            <sgds-icon name=${this._getIcon()} size="sm"></sgds-icon>
           </span>
         </div>
       </div>