@govtechsg/sgds-web-component 3.21.0 → 3.21.2-rc.0

package/components/Tab/sgds-tab-panel.js

@@ -29,6 +29,7 @@ class SgdsTabPanel extends SgdsElement {
     }
     _handleActiveChange() {
         this.setAttribute("aria-hidden", this.active ? "false" : "true");
+        this.inert = !this.active;
     }
     render() {
         return html `

package/components/Tab/sgds-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab-panel.js","sources":["../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n */\nexport class SgdsTabPanel extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabPanelStyles];\n  private readonly attrId = ++id;\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  _handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n  }\n\n  render() {\n    return html`\n      <slot\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["tabPanelStyles"],"mappings":";;;;;;;;AAOA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;AAIG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;QAEmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;AACd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAuB5D;IArBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;KAClE;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AA7BM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAc,CAAzC,CAA2C;AAI3B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGK,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3D,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-tab-panel.js","sources":["../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n */\nexport class SgdsTabPanel extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabPanelStyles];\n  private readonly attrId = ++id;\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  _handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n    this.inert = !this.active;\n  }\n\n  render() {\n    return html`\n      <slot\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["tabPanelStyles"],"mappings":";;;;;;;;AAOA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;AAIG;AACG,MAAO,YAAa,SAAQ,WAAW,CAAA;AAA7C,IAAA,WAAA,GAAA;;QAEmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;AACd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAwB5D;IAtBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AACjE,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC3B;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AA9BM,YAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAc,CAAzC,CAA2C;AAI3B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGK,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3D,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAIf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA;;;;"}