@patternfly/elements
Version:
PatternFly Elements
1 lines • 10.1 kB
Source Map (JSON)
{"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAuB,MAAM,KAAK,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,EAAE,cAAc,EAAE,OAAO,EAAsB,MAAM,cAAc,CAAC;;;AAiDpE,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;;QAMuC,WAAM,GAAG,KAAK,CAAC;QAEf,aAAQ,GAAG,KAAK,CAAC;QAM7D,2BAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAC;;IAElD,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,EAAC;QACxC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,wCAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,0CAAW,CAAC,CAAC;QAClD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,wCAAS,CAAC,CAAC;IAChD,CAAC;IAEQ,UAAU;QACjB,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QACrE,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QACvC,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;QACD,IAAI,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;QACnD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACxB,MAAM,EAAE,GAAG,EAAE,IAAI,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;QAC/D,MAAM,KAAK,GAAG,GAAG,KAAK,OAAO,CAAC;QAC9B,MAAM,IAAI,GAAG,GAAG,KAAK,MAAM,CAAC;QAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QACzC,OAAO,IAAI,CAAA;;;oBAGK,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;;;yBAGxD,CAAC,KAAK,EAAE,MAAM;6BACV,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGlD,CAAC;IACJ,CAAC;IA4BS,aAAa,CAAC,GAAY,EAAE,MAAe;QACnD,uBAAA,IAAI,wBAAW,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAChD,IAAI,MAAM,IAAI,CAAC,GAAG,EAAE,CAAC;YACnB,uBAAA,IAAI,yCAAU,MAAd,IAAI,CAAY,CAAC;QACnB,CAAC;IACH,CAAC;IAGS,eAAe;QACvB,uBAAA,IAAI,wBAAW,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC;IACvF,CAAC;;;;;IAnCC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnB,uBAAA,IAAI,yCAAU,MAAd,IAAI,CAAY,CAAC;IACnB,CAAC;AACH,CAAC;6CAEU,KAAoB;IAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnB,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,uBAAA,IAAI,yCAAU,MAAd,IAAI,CAAY,CAAC;QACrB,CAAC;IACH,CAAC;AACH,CAAC;;IAGC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACxC,uBAAA,IAAI,yCAAU,MAAd,IAAI,CAAY,CAAC;IACnB,CAAC;AACH,CAAC;kBAED,KAAK;IACH,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/C,CAAC;AAlFe,YAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAG3C;IADP,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACzB;AAEc;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCAAgB;AAEf;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAkB;AAIrD;IAFP,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kCACH;AA0ElB;IADT,QAAQ,CAAC,QAAQ,CAAC;0CAMlB;AAGS;IADT,QAAQ,CAAC,UAAU,CAAC;4CAGpB;AAhGU,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK","sourcesContent":["import { LitElement, html, isServer, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { consume } from '@lit/context';\n\nimport { observes } from '@patternfly/pfe-core/decorators.js';\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport { TabExpandEvent, context, type PfTabsContext } from './context.js';\n\nimport styles from './pf-tab.css';\n\n/**\n * Tab\n * @slot icon\n * Can contain an `<svg>` or `<pf-icon>`\n * @slot\n * Tab title text\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n * @cssprop {<length>} [--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth=1px]\n * @cssprop {<length>} [--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth=1px]\n * @cssprop {<color>} [--pf-c-tabs__link--BackgroundColor=#f0f0f0]\n * @cssprop {<color>} [--pf-c-tabs__link--disabled--BackgroundColor=#d2d2d2]\n * @cssprop {<length>} [--pf-c-tabs__link--before--BorderTopWidth=1px]\n * @cssprop {<length>} [--pf-c-tabs__link--before--BorderBottomWidth=1px]\n * @cssprop {<length>} [--pf-c-tabs__link--before--BorderLeftWidth=0]\n * @cssprop {<length>} [--pf-c-tabs__link--before--BorderRightWidth=1px]\n * @cssprop {<length>} [--pf-c-tabs__link--disabled--before--BorderRightWidth=1px]\n * @cssprop {<length>} [--pf-c-tabs__link--after--Top=auto]\n * @cssprop {<length>} [--pf-c-tabs__link--after--Right=0]\n * @cssprop {<length>} [--pf-c-tabs__link--after--Bottom=0]\n * @cssprop {<length>} [--pf-c-tabs__link--before--Left=0]\n * @cssprop {<length>} [--pf-c-tabs__link--PaddingTop=1rem]\n * @cssprop {<length>} [--pf-c-tabs__link--PaddingBottom=1rem]\n * @cssprop {<length>} [--pf-c-tabs__link--disabled--before--BorderBottomWidth=1px]\n * @cssprop {<length>} [--pf-c-tabs__link--disabled--before--BorderLeftWidth=1px]\n * @cssprop {<color>} [--pf-c-tabs__link--before--BorderTopColor=#d2d2d2]\n * @cssprop {<color>} [--pf-c-tabs__link--before--BorderRightColor=#d2d2d2]\n * @cssprop {<color>} [--pf-c-tabs__link--before--BorderBottomColor=#d2d2d2]\n * @cssprop {<color>} [--pf-c-tabs__link--before--BorderLeftColor=#d2d2d2]\n * @cssprop {<length>} [--pf-c-tabs__link--FontSize=1rem]\n * @cssprop {<color>} [--pf-c-tabs__link--Color=#6a6e73]\n * @cssprop {<length>} [--pf-c-tabs__link--OutlineOffset=-0.375rem]\n * @cssprop {<color>} [--pf-c-tabs__link--after--BorderColor=#b8bbbe]\n * @cssprop {<length>} [--pf-c-tabs__link--after--BorderTopWidth=0]\n * @cssprop {<length>} [--pf-c-tabs__link--after--BorderRightWidth=0]\n * @cssprop {<length>} [--pf-c-tabs__link--after--BorderBottomWidth=0]\n * @cssprop {<length>} [--pf-c-tabs__link--after--BorderLeftWidth=0]\n * @cssprop {<color>} [--pf-c-tabs__item--m-current__link--Color=#151515]\n * @cssprop {<color>} [--pf-c-tabs__item--m-current__link--after--BorderColor=#06c]\n * @cssprop {<length>} [--pf-c-tabs__item--m-current__link--after--BorderWidth=3px]\n * @cssprop {<length>} [--pf-c-tabs__link--child--MarginRight=1rem]\n * @fires {TabExpandEvent} expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n @queryAssignedElements({ slot: 'icon', flatten: true })\n private icons?: HTMLElement[];\n\n @property({ reflect: true, type: Boolean }) active = false;\n\n @property({ reflect: true, type: Boolean }) disabled = false;\n\n @consume({ context, subscribe: true })\n @property({ attribute: false })\n private ctx?: PfTabsContext;\n\n #internals = InternalsController.of(this, { role: 'tab' });\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.id ||= getRandomId(this.localName);\n this.addEventListener('click', this.#onClick);\n this.addEventListener('keydown', this.#onKeydown);\n this.addEventListener('focus', this.#onFocus);\n }\n\n override willUpdate(): void {\n const { borderBottom, box, fill, manual, vertical } = this.ctx ?? {};\n this.toggleAttribute('fill', fill);\n this.toggleAttribute('manual', manual);\n this.toggleAttribute('vertical', vertical);\n if (box) {\n this.setAttribute('box', box);\n } else {\n this.removeAttribute('box');\n }\n if (borderBottom) {\n this.setAttribute('border-bottom', borderBottom);\n } else {\n this.removeAttribute('border-bottom');\n }\n }\n\n render(): TemplateResult<1> {\n const { active } = this;\n const { box, fill = false, vertical = false } = this.ctx ?? {};\n const light = box === 'light';\n const dark = box === 'dark';\n const icons = isServer ? [] : this.icons;\n return html`\n <div id=\"button\"\n part=\"button\"\n class=\"${classMap({ active, box: !!box, dark, light, fill, vertical })}\">\n <slot name=\"icon\"\n part=\"icon\"\n ?hidden=\"${!icons?.length}\"\n @slotchange=\"${() => this.requestUpdate()}\"></slot>\n <slot part=\"text\"></slot>\n </div>\n `;\n }\n\n #onClick() {\n if (!this.disabled) {\n this.#activate();\n }\n }\n\n #onKeydown(event: KeyboardEvent) {\n if (!this.disabled) {\n switch (event.key) {\n case 'Enter':\n this.#activate();\n }\n }\n }\n\n #onFocus() {\n if (!this.ctx?.manual && !this.disabled) {\n this.#activate();\n }\n }\n\n async #activate() {\n this.dispatchEvent(new TabExpandEvent(this));\n }\n\n @observes('active')\n protected activeChanged(old: boolean, active: boolean): void {\n this.#internals.ariaSelected = String(!!active);\n if (active && !old) {\n this.#activate();\n }\n }\n\n @observes('disabled')\n protected disabledChanged(): void {\n this.#internals.ariaDisabled = this.disabled ? 'true' : this.ariaDisabled ?? 'false';\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-tab': PfTab;\n }\n}\n"]}