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

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

@@ -78,7 +78,12 @@ function $e(e){return(t,l)=>{const{slot:i,selector:a}=e??{},o="slot"+(i?`[name=$
    * Copyright 2018 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-class extends Ee{constructor(e){if(super(e),e.type!==Le||"class"!==e.name||e.strings?.length>2)throw new Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}update(e,[t]){if(void 0===this._previousClasses){this._previousClasses=new Set,void 0!==e.strings&&(this._staticClasses=new Set(e.strings.join(" ").split(/\s/).filter(e=>""!==e)));for(const e in t)t[e]&&!this._staticClasses?.has(e)&&this._previousClasses.add(e);return this.render(t)}const l=e.element.classList;for(const e of this._previousClasses)e in t||(l.remove(e),this._previousClasses.delete(e));for(const e in t){const i=!!t[e];i===this._previousClasses.has(e)||this._staticClasses?.has(e)||(i?(l.add(e),this._previousClasses.add(e)):(l.remove(e),this._previousClasses.delete(e)))}return te}});var Hl=Q`
+class extends Ee{constructor(e){if(super(e),e.type!==Le||"class"!==e.name||e.strings?.length>2)throw new Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}update(e,[t]){if(void 0===this._previousClasses){this._previousClasses=new Set,void 0!==e.strings&&(this._staticClasses=new Set(e.strings.join(" ").split(/\s/).filter(e=>""!==e)));for(const e in t)t[e]&&!this._staticClasses?.has(e)&&this._previousClasses.add(e);return this.render(t)}const l=e.element.classList;for(const e of this._previousClasses)e in t||(l.remove(e),this._previousClasses.delete(e));for(const e in t){const i=!!t[e];i===this._previousClasses.has(e)||this._staticClasses?.has(e)||(i?(l.add(e),this._previousClasses.add(e)):(l.remove(e),this._previousClasses.delete(e)))}return te}});
+/**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */var Hl=Q`
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
     <path
       fill="currentColor"
@@ -2294,12 +2299,13 @@ class extends Ee{constructor(e){if(super(e),e.type!==Le||"class"!==e.name||e.str
       clip-rule="evenodd"
     />
   </svg>
-`};var Ul=n`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class Wl extends fl{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=zl[e];if(t)return t;console.warn(`Icon not found: ${e}`)}updated(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("svg");t&&(this.ariaLabel?(t.removeAttribute("aria-hidden"),t.setAttribute("aria-label",this.ariaLabel)):(t.removeAttribute("aria-label"),t.setAttribute("aria-hidden","true")))}render(){const e=this._getIconByName(this.name);return e||le}}Wl.styles=[...fl.styles,Ul],e([Ve({type:String,reflect:!0})],Wl.prototype,"name",void 0),e([Ve({type:String,reflect:!0})],Wl.prototype,"size",void 0),e([Ve({type:String})],Wl.prototype,"ariaLabel",void 0);var Fl=n`: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 ql extends fl{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 Q`
+`};var Ul=n`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class Wl extends fl{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=zl[e];if(t)return t;console.warn(`Icon not found: ${e}`)}updated(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("svg");t&&(this.ariaLabel?(t.removeAttribute("aria-hidden"),t.setAttribute("aria-label",this.ariaLabel)):(t.removeAttribute("aria-label"),t.setAttribute("aria-hidden","true")))}render(){const e=this._getIconByName(this.name);return e||le}}Wl.styles=[...fl.styles,Ul],e([Ve({type:String,reflect:!0})],Wl.prototype,"name",void 0),e([Ve({type:String,reflect:!0})],Wl.prototype,"size",void 0),e([Ve({type:String})],Wl.prototype,"ariaLabel",void 0);var Fl=n`: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 ql extends fl{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 Q`
       <div
         class="dropdown-item ${Vl({disabled:this.disabled,active:this.active})}"
         tabindex=${this.disabled?"-1":"0"}
+        aria-label=${e=this.ariaLabel||void 0,e??le}
       >
         <slot></slot>
       </div>
-    `}}function jl(e,t){customElements.get(e)||customElements.define(e,t)}ql.styles=[bl,Fl],ql.dependencies={"sgds-icon":Wl},e([$e({flatten:!0})],ql.prototype,"anchor",void 0),e([Ve({type:Boolean})],ql.prototype,"active",void 0),e([Ve({type:Boolean,reflect:!0})],ql.prototype,"disabled",void 0),jl("sgds-dropdown",_l),jl("sgds-dropdown-item",ql)});
+    `;var e}}function jl(e,t){customElements.get(e)||customElements.define(e,t)}ql.styles=[bl,Fl],ql.dependencies={"sgds-icon":Wl},e([$e({flatten:!0})],ql.prototype,"anchor",void 0),e([Ve({type:Boolean})],ql.prototype,"active",void 0),e([Ve({type:Boolean,reflect:!0})],ql.prototype,"disabled",void 0),e([Ve({type:String})],ql.prototype,"ariaLabel",void 0),jl("sgds-dropdown",_l),jl("sgds-dropdown-item",ql)});
 //# sourceMappingURL=index.umd.min.js.map