@govtechsg/sgds-web-component 3.26.1-rc.0 → 3.26.1-rc.2

package/components/Dropdown/sgds-dropdown-item.d.ts

@@ -15,6 +15,8 @@ export declare class SgdsDropdownItem extends SgdsElement {
     active: boolean;
     /** Disables the SgdsMainnavItem */
     disabled: boolean;
+    /** When true, removes interactive styles (hover, cursor) for non-navigational display items */
+    readonly: boolean;
     /** Forwards aria-label to the inner clickable element for accessibility */
     ariaLabel: string;
     connectedCallback(): void;

package/components/Dropdown/sgds-dropdown-item.js

@@ -19,6 +19,8 @@ class SgdsDropdownItem extends SgdsElement {
         this.active = false;
         /** Disables the SgdsMainnavItem */
         this.disabled = false;
+        /** When true, removes interactive styles (hover, cursor) for non-navigational display items */
+        this.readonly = false;
         /** Forwards aria-label to the inner clickable element for accessibility */
         this.ariaLabel = "";
     }
@@ -37,9 +39,10 @@ class SgdsDropdownItem extends SgdsElement {
       <div
         class="dropdown-item ${classMap({
             disabled: this.disabled,
-            active: this.active
+            active: this.active,
+            readonly: this.readonly
         })}"
-        tabindex=${this.disabled ? "-1" : "0"}
+        tabindex=${this.disabled || this.readonly ? "-1" : "0"}
         aria-label=${ifDefined(this.ariaLabel || undefined)}
       >
         <slot></slot>
@@ -60,6 +63,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsDropdownItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsDropdownItem.prototype, "readonly", void 0);
 __decorate([
     property({ type: String })
 ], SgdsDropdownItem.prototype, "ariaLabel", void 0);

package/components/Dropdown/sgds-dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown-item.js","sources":["../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/**\n * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n */\nexport class SgdsDropdownItem extends SgdsElement {\n  static styles = [dropdownStyle, dropdownItemStyle];\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n  /** when true, sets the active stylings of dropdown item */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Forwards aria-label to the inner clickable element for accessibility */\n  @property({ type: String })\n  ariaLabel = \"\";\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" && this.anchor.length > 0) {\n        this.anchor[0].click();\n      }\n    });\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"dropdown-item ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        aria-label=${ifDefined(this.ariaLabel || undefined)}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["dropdownStyle","dropdownItemStyle"],"mappings":";;;;;;;;;;AAQA;;;AAGG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;KA2BhB;IAzBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,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;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAA,QAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;mBACS,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AACxB,mBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,CAAA;;;;KAItD,CAAC;KACH;;AA5CM,gBAAA,CAAA,MAAM,GAAG,CAACA,QAAa,EAAEC,UAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAGgD,UAAA,CAAA;AAAjD,IAAA,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9E,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACZ,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-dropdown-item.js","sources":["../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/**\n * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n */\nexport class SgdsDropdownItem extends SgdsElement {\n  static styles = [dropdownStyle, dropdownItemStyle];\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n  /** when true, sets the active stylings of dropdown item */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** When true, removes interactive styles (hover, cursor) for non-navigational display items */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /** Forwards aria-label to the inner clickable element for accessibility */\n  @property({ type: String })\n  ariaLabel = \"\";\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" && this.anchor.length > 0) {\n        this.anchor[0].click();\n      }\n    });\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"dropdown-item ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          readonly: this.readonly\n        })}\"\n        tabindex=${this.disabled || this.readonly ? \"-1\" : \"0\"}\n        aria-label=${ifDefined(this.ariaLabel || undefined)}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["dropdownStyle","dropdownItemStyle"],"mappings":";;;;;;;;;;AAQA;;;AAGG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;KA4BhB;IA1BC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,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;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAA,QAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;AACS,iBAAA,EAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AACzC,mBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,CAAA;;;;KAItD,CAAC;KACH;;AAjDM,gBAAA,CAAA,MAAM,GAAG,CAACA,QAAa,EAAEC,UAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAGgD,UAAA,CAAA;AAAjD,IAAA,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9E,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACZ,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Mainnav/index.d.ts

@@ -1,10 +1,12 @@
 import { SgdsMainnav } from "./sgds-mainnav";
 import { SgdsMainnavDropdown } from "./sgds-mainnav-dropdown";
 import { SgdsMainnavItem } from "./sgds-mainnav-item";
+import { SgdsMainnavProfile } from "./sgds-mainnav-profile";
 declare global {
     interface HTMLElementTagNameMap {
         "sgds-mainnav": SgdsMainnav;
         "sgds-mainnav-dropdown": SgdsMainnavDropdown;
         "sgds-mainnav-item": SgdsMainnavItem;
+        "sgds-mainnav-profile": SgdsMainnavProfile;
     }
 }

package/components/Mainnav/index.js

@@ -1,9 +1,11 @@
 import { SgdsMainnav } from './sgds-mainnav.js';
 import { SgdsMainnavDropdown } from './sgds-mainnav-dropdown.js';
 import { SgdsMainnavItem } from './sgds-mainnav-item.js';
+import { SgdsMainnavProfile } from './sgds-mainnav-profile.js';
 import { register } from '../../utils/ce-registry.js';
 
 register("sgds-mainnav", SgdsMainnav);
 register("sgds-mainnav-dropdown", SgdsMainnavDropdown);
 register("sgds-mainnav-item", SgdsMainnavItem);
+register("sgds-mainnav-profile", SgdsMainnavProfile);
 //# sourceMappingURL=index.js.map

package/components/Mainnav/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Mainnav/index.ts"],"sourcesContent":["import { SgdsMainnav } from \"./sgds-mainnav\";\nimport { SgdsMainnavDropdown } from \"./sgds-mainnav-dropdown\";\nimport { SgdsMainnavItem } from \"./sgds-mainnav-item\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-mainnav\", SgdsMainnav);\nregister(\"sgds-mainnav-dropdown\", SgdsMainnavDropdown);\nregister(\"sgds-mainnav-item\", SgdsMainnavItem);\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"sgds-mainnav\": SgdsMainnav;\n    \"sgds-mainnav-dropdown\": SgdsMainnavDropdown;\n    \"sgds-mainnav-item\": SgdsMainnavItem;\n  }\n}\n"],"names":[],"mappings":";;;;;AAKA,QAAQ,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACtC,QAAQ,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAC;AACvD,QAAQ,CAAC,mBAAmB,EAAE,eAAe,CAAC"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Mainnav/index.ts"],"sourcesContent":["import { SgdsMainnav } from \"./sgds-mainnav\";\nimport { SgdsMainnavDropdown } from \"./sgds-mainnav-dropdown\";\nimport { SgdsMainnavItem } from \"./sgds-mainnav-item\";\nimport { SgdsMainnavProfile } from \"./sgds-mainnav-profile\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-mainnav\", SgdsMainnav);\nregister(\"sgds-mainnav-dropdown\", SgdsMainnavDropdown);\nregister(\"sgds-mainnav-item\", SgdsMainnavItem);\nregister(\"sgds-mainnav-profile\", SgdsMainnavProfile);\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"sgds-mainnav\": SgdsMainnav;\n    \"sgds-mainnav-dropdown\": SgdsMainnavDropdown;\n    \"sgds-mainnav-item\": SgdsMainnavItem;\n    \"sgds-mainnav-profile\": SgdsMainnavProfile;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAMA,QAAQ,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACtC,QAAQ,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAC;AACvD,QAAQ,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAC/C,QAAQ,CAAC,sBAAsB,EAAE,kBAAkB,CAAC"}