@patternfly/elements
Version:
PatternFly Elements
1 lines • 14 kB
Source Map (JSON)
{"version":3,"file":"pf-accordion-header.js","sourceRoot":"","sources":["pf-accordion-header.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PfAccordion } from './pf-accordion.js';\n\nimport { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport style from './pf-accordion-header.css';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nconst isPorHeader =\n (el: Node): el is HTMLElement =>\n el instanceof HTMLElement && !!el.tagName.match(/P|^H[1-6]/);\n\nexport class PfAccordionHeaderChangeEvent extends Event {\n declare target: PfAccordionHeader;\n constructor(\n public expanded: boolean,\n public toggle: PfAccordionHeader,\n public accordion: PfAccordion\n ) {\n super('change', { bubbles: true });\n }\n}\n\n/**\n * Accordion Header\n * @csspart text - inline element containing the heading text or slotted heading content\n * @csspart accents - container for accents within the header\n * @csspart icon - caret icon\n * @slot\n * We expect the light DOM of the pf-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)\n * @slot accents\n * These elements will appear inline with the accordion header, between the header and the chevron\n * (or after the chevron and header in disclosure mode).\n * @fires {AccordionHeaderChangeEvent} change - when the open panels change\n * @cssprop {<color>} [--pf-c-accordion__toggle--Color=var(--pf-global--Color--100, #151515)]\n * Sets the font color for the accordion header.\n *\n * @cssprop {<color>} [--pf-c-accordion__toggle--BackgroundColor=transparent]\n * Sets the background color for the accordion header toggle element.\n *\n * @cssprop {<color>} [--pf-c-accordion__toggle--after--BackgroundColor=transparent]\n * Sets the background color for the after element for the accordion header toggle element.\n *\n * @cssprop {<length>} [--pf-c-accordion__toggle--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]\n * Sets the top padding for the accordion header.\n *\n * @cssprop {<length>} [--pf-c-accordion__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * Sets the right padding for the accordion header.\n *\n * @cssprop {<length>} [--pf-c-accordion__toggle--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]\n * Sets the bottom padding for the accordion header.\n *\n * @cssprop {<length>} [--pf-c-accordion__toggle--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * Sets the left padding for the accordion header.\n *\n * @cssprop {<length>} [--pf-c-accordion__toggle--FontSize=var(--pf-global--FontSize--lg, 1rem)]\n * Sets the sidebar background color for the accordion header.\n *\n * @cssprop {<color>} [--pf-c-accordion__toggle--FontFamily=var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, \"RedHatDisplayUpdated\", helvetica, arial, sans-serif)]\n * Sets the font family for the accordion header.\n *\n * @cssprop [--pf-c-accordion__toggle--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * Sets the font weight for the accordion header.\n *\n * @cssprop {<color>} [--pf-c-accordion__toggle--active--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * Sets the active backgrdound color for the accordion header.\n *\n * @cssprop {<color>} [--pf-c-accordion__toggle--active-text--Color=var(--pf-global--link--Color, #0066cc)]\n * Sets the active text color for the accordion header.\n *\n * @cssprop [--pf-c-accordion__toggle--active-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]\n * Sets the active text font weight for the accordion header.\n *\n * @cssprop {<color>} [--pf-c-accordion__toggle--expanded--before--BackgroundColor=var(--pf-global--link--Color, #0066cc)]\n * Sets the hover expanded before background color for the accordion header.\n *\n * @cssprop [--pf-c-accordion__toggle--expanded-icon--Rotate=90deg]\n * Sets the expanded icon rotation degrees for the accordion header.\n *\n * @cssprop {<length>} [--pf-c-accordion__toggle-text--MaxWidth=calc(100 - var(--pf-global--spacer--lg, 1.5rem))]\n * Sets the max width for the text inside the accordion header.\n *\n * @cssprop [--pf-c-accordion__toggle--before--Width=var(--pf-global--BorderWidth--lg, 3px)]\n * Sets the sidebar width for the accordion header.\n *\n * @cssprop [--pf-c-accordion__toggle-icon--Transition=0.2s ease-in 0s]\n * Sets the transition animation for the accordion header.\n *\n */\n@customElement('pf-accordion-header')\nexport class PfAccordionHeader extends LitElement {\n static readonly styles: CSSStyleSheet[] = [style];\n\n static override readonly shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ reflect: true }) bordered?: 'true' | 'false';\n\n @property({ reflect: true }) icon?: string;\n\n @property({ reflect: true, attribute: 'icon-set' }) iconSet?: string;\n\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n @property({ reflect: true, attribute: 'heading-text' }) headingText?: string;\n\n @property({ reflect: true, attribute: 'heading-tag' }) headingTag?: string;\n\n #generatedHtag?: HTMLHeadingElement;\n\n #logger = new Logger(this);\n\n #header?: HTMLElement;\n\n #slots = new SlotController(this, 'accents', null);\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.id ||= getRandomId(this.localName);\n this.#initHeader();\n }\n\n override render(): TemplateResult<1> {\n const headingText = this.headingText?.trim() ?? this.#header?.textContent?.trim();\n const content = html`\n <button id=\"button\"\n class=\"toggle\"\n @click=\"${this.#onClick}\"\n aria-expanded=\"${String(!!this.expanded) as 'true' | 'false'}\">\n <span part=\"text\">${headingText ?? html`\n <slot></slot>`}\n </span>\n <span part=\"accents\" ?hidden=\"${this.#slots.isEmpty('accents')}\">\n <slot name=\"accents\"></slot>\n </span>\n <pf-icon part=\"icon\"\n class=\"icon\"\n size=\"lg\"\n set=\"${this.iconSet ?? 'fas'}\"\n icon=\"${this.icon ?? 'angle-right'}\"\n ></pf-icon>\n </button>\n `;\n switch (this.headingTag) {\n case 'h1': return html`<h1 id=\"heading\">${content}</h1>`;\n case 'h2': return html`<h2 id=\"heading\">${content}</h2>`;\n case 'h3': return html`<h3 id=\"heading\">${content}</h3>`;\n case 'h4': return html`<h4 id=\"heading\">${content}</h4>`;\n case 'h5': return html`<h5 id=\"heading\">${content}</h5>`;\n case 'h6': return html`<h6 id=\"heading\">${content}</h6>`;\n default: return content;\n }\n }\n\n async #initHeader() {\n if (this.headingText) {\n this.headingTag ||= 'h3';\n }\n this.#header = this.#getOrCreateHeader();\n\n // prevent double-logging\n if (this.#header !== this.#generatedHtag) {\n this.#generatedHtag = undefined;\n }\n\n do {\n await this.updateComplete;\n } while (!await this.updateComplete);\n\n // Remove the hidden attribute after upgrade\n this.hidden = false;\n }\n\n #getOrCreateHeader(): HTMLElement | undefined {\n // Check if there is no nested element or nested textNodes\n if (!this.firstElementChild && !this.firstChild) {\n return void this.#logger.warn('No header content provided');\n } else if (this.firstElementChild) {\n const [heading, ...otherContent] = Array.from(this.children)\n .filter((x): x is HTMLElement => !x.hasAttribute('slot') && isPorHeader(x));\n\n // If there is no content inside the slot, return empty with a warning\n // else, if there is more than 1 element in the slot, capture the first h-tag\n if (!heading) {\n return void this.#logger.warn('No heading information was provided.');\n } else if (otherContent.length) {\n this.#logger.warn('Heading currently only supports 1 tag; extra tags will be ignored.');\n }\n return heading;\n } else {\n if (!this.#generatedHtag) {\n this.#logger.warn('Header should contain at least 1 heading tag for correct semantics.');\n }\n this.#generatedHtag = document.createElement('h3');\n\n // If a text node was provided but no semantics, default to an h3\n // otherwise, incorrect semantics were used, create an H3 and try to capture the content\n if (this.firstChild?.nodeType === Node.TEXT_NODE) {\n this.#generatedHtag.textContent = this.firstChild.textContent;\n } else {\n this.#generatedHtag.textContent = this.textContent;\n }\n\n return this.#generatedHtag;\n }\n }\n\n #onClick() {\n const expanded = !this.expanded;\n const acc = this.closest('pf-accordion');\n if (acc) {\n this.dispatchEvent(new PfAccordionHeaderChangeEvent(expanded, this, acc));\n }\n }\n}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-accordion-header': PfAccordionHeader;\n }\n}\n"]}