UNPKG

@patternfly/elements

Version:
1 lines 3.1 kB
{"version":3,"file":"pf-tab-panel.js","sourceRoot":"","sources":["pf-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAsB,OAAO,EAAE,MAAM,cAAc,CAAC;;;AAUpD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAMxC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;QACxC,IAAI,CAAC,MAAM,KAAX,IAAI,CAAC,MAAM,GAAK,IAAI,EAAC;QAErB;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;IAEQ,UAAU;QACjB,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QACzC,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC3C,IAAI,GAAG,EAAE,CAAC;YACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;;AApCe,iBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAGlC;IADhB,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrC,KAAK,EAAE;uCAA6B;AAJ1B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\nimport { consume } from '@lit/context';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { type PfTabsContext, context } from './context.js';\n\nimport styles from './pf-tab-panel.css';\n\n/**\n * @slot - Tab panel content\n * @cssprop {<color>} [--pf-c-tab-content--m-light-300=#f0f0f0]\n * @csspart container - container for the panel content\n */\n@customElement('pf-tab-panel')\nexport class PfTabPanel extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n @consume({ context, subscribe: true })\n @state() private ctx?: PfTabsContext;\n\n render(): TemplateResult<1> {\n return html`\n <slot></slot>\n `;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.id ||= getRandomId('pf-tab-panel');\n this.hidden ??= true;\n\n /*\n To make it easy for screen reader users to navigate from a tab\n to the beginning of content in the active tabpanel, the tabpanel\n element has tabindex=\"0\" to include the panel in the page Tab sequence.\n It is recommended that all tabpanel elements in a tab set are focusable\n if there are any panels in the set that contain content where the first\n element in the panel is not focusable.\n https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic\n */\n this.tabIndex = 0;\n }\n\n override willUpdate(): void {\n const { box, vertical } = this.ctx ?? {};\n this.toggleAttribute('vertical', vertical);\n if (box) {\n this.setAttribute('box', box);\n } else {\n this.removeAttribute('box');\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-tab-panel': PfTabPanel;\n }\n}\n"]}