@govtechsg/sgds-web-component 3.21.1 → 3.21.2-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Tab/index.umd.min.js +1 -1
- package/components/Tab/index.umd.min.js.map +1 -1
- package/components/Tab/sgds-tab-panel.js +1 -0
- package/components/Tab/sgds-tab-panel.js.map +1 -1
- package/components/index.umd.min.js +1 -1
- package/components/index.umd.min.js.map +1 -1
- package/custom-elements.json +1 -1
- package/index.umd.min.js +1 -1
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Tab/sgds-tab-panel.cjs.js +1 -0
- package/react/components/Tab/sgds-tab-panel.cjs.js.map +1 -1
- package/react/components/Tab/sgds-tab-panel.js +1 -0
- package/react/components/Tab/sgds-tab-panel.js.map +1 -1
- package/types/react.d.ts +73 -73
|
@@ -1 +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;
|
|
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 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;;;;"}
|
|
@@ -4047,7 +4047,7 @@ const Yl="important",jl=" !"+Yl;const Wl=je(class extends We{constructor(e){if(s
|
|
|
4047
4047
|
<slot class="tab-group__body" @slotchange=${this._syncTabsAndPanels}></slot>
|
|
4048
4048
|
</div>
|
|
4049
4049
|
</div>
|
|
4050
|
-
`}}Od.styles=[...He.styles,Rd],t([Ze(".tab-group")],Od.prototype,"_tabGroup",void 0),t([Ze(".tab-group__body")],Od.prototype,"_body",void 0),t([Ze(".tab-group__nav")],Od.prototype,"_nav",void 0),t([Ve({type:String,reflect:!0})],Od.prototype,"variant",void 0),t([Ve({type:String,reflect:!0})],Od.prototype,"orientation",void 0),t([Ve({type:String,reflect:!0})],Od.prototype,"density",void 0),t([Te({slot:"nav",flatten:!0})],Od.prototype,"_navSlot",void 0);var Nd=r`.tab-panel{display:block}.tab-panel:not(.tab-panel--active){display:none}`;let Ud=0;class qd extends He{constructor(){super(...arguments),this.attrId=++Ud,this.componentId=`sgds-tab-panel-${this.attrId}`,this.name="",this.active=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tabpanel")}_handleActiveChange(){this.setAttribute("aria-hidden",this.active?"false":"true")}render(){return te`
|
|
4050
|
+
`}}Od.styles=[...He.styles,Rd],t([Ze(".tab-group")],Od.prototype,"_tabGroup",void 0),t([Ze(".tab-group__body")],Od.prototype,"_body",void 0),t([Ze(".tab-group__nav")],Od.prototype,"_nav",void 0),t([Ve({type:String,reflect:!0})],Od.prototype,"variant",void 0),t([Ve({type:String,reflect:!0})],Od.prototype,"orientation",void 0),t([Ve({type:String,reflect:!0})],Od.prototype,"density",void 0),t([Te({slot:"nav",flatten:!0})],Od.prototype,"_navSlot",void 0);var Nd=r`.tab-panel{display:block}.tab-panel:not(.tab-panel--active){display:none}`;let Ud=0;class qd extends He{constructor(){super(...arguments),this.attrId=++Ud,this.componentId=`sgds-tab-panel-${this.attrId}`,this.name="",this.active=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tabpanel")}_handleActiveChange(){this.setAttribute("aria-hidden",this.active?"false":"true"),this.inert=!this.active}render(){return te`
|
|
4051
4051
|
<slot
|
|
4052
4052
|
class=${Ke({"tab-panel":!0,"tab-panel--active":this.active})}
|
|
4053
4053
|
></slot>
|