@govtechsg/sgds-web-component 3.26.0 → 3.26.1-rc.1

package/base/option-element.d.ts

@@ -12,6 +12,7 @@ export declare class OptionElement extends SgdsElement {
     /** The value of the option item */
     value: string;
     connectedCallback(): void;
+    private _updateAriaLabel;
     render(): TemplateResult<1>;
     protected _renderItemContent: () => TemplateResult<1>;
 }

package/base/option-element.js

@@ -20,6 +20,14 @@ class OptionElement extends SgdsElement {
         super.connectedCallback();
         this.setAttribute("role", "menuitem");
         this.setAttribute("aria-disabled", `${this.disabled}`);
+        this._updateAriaLabel();
+    }
+    _updateAriaLabel() {
+        var _a;
+        const label = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        if (label) {
+            this.setAttribute("aria-label", label);
+        }
     }
     render() {
         const classes = {

package/base/option-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-element.js","sources":["../../src/base/option-element.ts"],"sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport optionStyles from \"./option.css\";\nimport SgdsElement from \"./sgds-element\";\n\nexport class OptionElement extends SgdsElement {\n  static styles = [optionStyles];\n  /**\n   * @internal when true, sets the active stylings.\n   * This property is controlled by its nearest parent e.g. Select or Combo box\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the Item */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The value of the option item */\n  @property({ type: String, reflect: true }) value: string;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n  render() {\n    const classes = {\n      disabled: this.disabled,\n      active: this.active\n    };\n    return html`\n      <div class=\"dropdown-item ${classMap(classes)}\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n        ${this._renderItemContent()}\n      </div>\n    `;\n  }\n\n  protected declare _renderItemContent: () => TemplateResult<1>;\n}\n"],"names":["optionStyles"],"mappings":";;;;;;;AAMM,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;AAEE;;;AAGG;QACyC,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAGf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAuB9D;IAlBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IACD,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;AACF,QAAA,OAAO,IAAI,CAAA,CAAA;AACmB,gCAAA,EAAA,QAAQ,CAAC,OAAO,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;UACjF,IAAI,CAAC,kBAAkB,EAAE,CAAA;;KAE9B,CAAC;KACH;;AA5BM,aAAA,CAAA,MAAM,GAAG,CAACA,QAAY,CAAC,CAAC;AAKa,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"option-element.js","sources":["../../src/base/option-element.ts"],"sourcesContent":["import { html, TemplateResult } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport optionStyles from \"./option.css\";\nimport SgdsElement from \"./sgds-element\";\n\nexport class OptionElement extends SgdsElement {\n  static styles = [optionStyles];\n  /**\n   * @internal when true, sets the active stylings.\n   * This property is controlled by its nearest parent e.g. Select or Combo box\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the Item */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The value of the option item */\n  @property({ type: String, reflect: true }) value: string;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n    this._updateAriaLabel();\n  }\n\n  private _updateAriaLabel() {\n    const label = this.textContent?.trim();\n    if (label) {\n      this.setAttribute(\"aria-label\", label);\n    }\n  }\n  render() {\n    const classes = {\n      disabled: this.disabled,\n      active: this.active\n    };\n    return html`\n      <div class=\"dropdown-item ${classMap(classes)}\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n        ${this._renderItemContent()}\n      </div>\n    `;\n  }\n\n  protected declare _renderItemContent: () => TemplateResult<1>;\n}\n"],"names":["optionStyles"],"mappings":";;;;;;;AAMM,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;AAEE;;;AAGG;QACyC,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAGf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KA+B9D;IA1BC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAEO,gBAAgB,GAAA;;QACtB,MAAM,KAAK,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,IAAI,EAAE,CAAC;QACvC,IAAI,KAAK,EAAE;AACT,YAAA,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;SACxC;KACF;IACD,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;AACF,QAAA,OAAO,IAAI,CAAA,CAAA;AACmB,gCAAA,EAAA,QAAQ,CAAC,OAAO,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;UACjF,IAAI,CAAC,kBAAkB,EAAE,CAAA;;KAE9B,CAAC;KACH;;AApCM,aAAA,CAAA,MAAM,GAAG,CAACA,QAAY,CAAC,CAAC;AAKa,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;"}