@patternfly/elements
Version:
PatternFly Elements
1 lines • 14.4 kB
Source Map (JSON)
{"version":3,"file":"pf-chip-group.js","sourceRoot":"","sources":["pf-chip-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\n\nimport { PfChip, PfChipRemoveEvent } from './pf-chip.js';\n\nimport styles from './pf-chip-group.css';\nimport shared from './pf-chip-shared.css';\n\nexport class PfChipGroupExpandEvent extends Event {\n constructor() {\n super('expand', { bubbles: true, cancelable: true });\n }\n}\n\nexport class PfChipGroupRemoveEvent extends Event {\n constructor() {\n super('remove', { bubbles: true, cancelable: true });\n }\n}\n\n/**\n * `${`\n * **WS** (_>= 0x_)\n * `remaining`\n * **WS** (_>= 0x_)\n * `}`\n */\nconst REMAINING_RE = /\\$\\{\\s*remaining\\s*\\}/g;\n\n/**\n * A **chip group** is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When value of numChips is exceeded, additional chips will be hidden using an overflow chip.\n * @fires expand - Fires when chip group is expanded to show all chips\n * @fires remove - Fires when chip group is closed/removed\n * @slot category-name\n * Category name text for chip group category. If this prop is supplied chip group with have a label and category styling applied\n * @slot - `<pf-chip>` elements.\n * @cssprop [--pf-c-chip-group__list--MarginBottom=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]\n * @cssprop [--pf-c-chip-group__list--MarginRight=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]\n * @cssprop [--pf-c-chip-group--m-category--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-chip-group--m-category--PaddingRight=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-chip-group--m-category--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-chip-group--m-category--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-chip-group--m-category--BorderRadius=var(--pf-global--BorderRadius--sm, 3px)]\n * @cssprop [--pf-c-chip-group--m-category--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-chip-group__label--MarginRight=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-chip-group__label--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]\n * @cssprop [--pf-c-chip-group__label--MaxWidth=18ch]\n * @cssprop [--pf-c-chip-group__close--MarginTop=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]\n * @cssprop [--pf-c-chip-group__close--MarginBottom=calc(var(--pf-global--spacer--xs, 0.25rem) * -1)]\n * @cssprop [--pf-c-chip-group__list-item--MarginRight=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-chip-group__list-item--MarginBottom=var(--pf-global--spacer--xs, 0.25rem)]\n */\n@customElement('pf-chip-group')\nexport class PfChipGroup extends LitElement {\n static readonly styles: CSSStyleSheet[] = [shared, styles];\n\n static override readonly shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Accessible label for chip group that does not have a category name\n */\n @property({ attribute: 'accessible-label', type: String }) accessibleLabel = '';\n\n /**\n * Accessible label for close button\n */\n @property({ attribute: 'accessible-close-label', type: String }) accessibleCloseLabel = 'Close';\n\n /**\n * Customizeable \"more\" template string. Use variable \"${remaining}\" for overflow chip count.\n */\n @property({ attribute: 'collapsed-text', type: String }) collapsedText = '${remaining} more';\n\n /**\n * Customizable \"show less\" text string.\n */\n @property({ attribute: 'expanded-text', type: String }) expandedText = 'show less';\n\n /**\n * Set number of chips to show before overflow\n */\n @property({ attribute: 'num-chips', type: Number }) numChips = 3;\n\n /**\n * Flag indicating if overflow chips are visible\n */\n @property({ reflect: true, type: Boolean }) open = false;\n\n /**\n * Flag if chip group can be closed\n */\n @property({ reflect: true, type: Boolean }) closeable = false;\n\n @query('#overflow') private _overflowChip?: PfChip;\n\n @query('#close-button') private _button?: HTMLButtonElement;\n\n @queryAssignedNodes({ slot: 'category-name', flatten: true }) private _categorySlotted?: Node[];\n\n get #chips(): NodeListOf<PfChip> {\n return this.querySelectorAll<PfChip>('pf-chip:not([slot]):not([overflow-chip])');\n }\n\n #tabindex = RovingTabindexController.of(this, {\n getItems: () => [\n ...Array.prototype.slice.call(this.#chips, 0, this.open ? this.#chips.length\n : Math.min(this.#chips.length, this.numChips)),\n this._overflowChip,\n this._button,\n ].filter(x => !!x),\n });\n\n /**\n * active chip that receives focus when group receives focus\n */\n get activeChip() {\n const button = this.#tabindex.items.at(this.#tabindex.atFocusedItemIndex);\n const shadow = button?.getRootNode() as ShadowRoot;\n return shadow?.host as PfChip;\n }\n\n set activeChip(chip: HTMLElement) {\n const button = chip.shadowRoot?.querySelector('button');\n if (button) {\n this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(button);\n }\n }\n\n /**\n * whether or not group has a category\n */\n get hasCategory(): boolean {\n return (this._categorySlotted || []).length > 0;\n }\n\n get remaining(): number {\n return this.#chips.length - this.numChips;\n }\n\n constructor() {\n super();\n this.addEventListener('remove', this.#onRemove);\n }\n\n render(): TemplateResult<1> {\n const empty = this.#chips.length <= 0;\n return html`\n <div id=\"outer\"\n class=\"${classMap({ 'has-category': this.hasCategory, empty })}\"\n role=\"toolbar\">\n <slot id=\"category\"\n name=\"category-name\"\n @slotchange=\"${this.#onSlotchange}\">\n <span class=\"visually-hidden\"\n ?hidden=\"${!this.accessibleLabel}\">${this.accessibleLabel ?? ''}</span>\n </slot>\n <slot id=\"chips\" @slotchange=\"${this.#onSlotchange}\"></slot>\n <pf-chip id=\"overflow\"\n aria-controls=\"chips\"\n overflow-chip\n ?hidden=\"${this.remaining < 1}\"\n @click=\"${this.#onMoreClick}\"\n >${this.remaining < 1 ? ''\n : this.open ? this.expandedText\n : this.collapsedText.replace(REMAINING_RE, this.remaining.toString())}</pf-chip>\n <pf-button id=\"close-button\"\n plain\n icon=\"times-circle\"\n icon-set=\"fas\"\n label=\"${this.accessibleCloseLabel}\"\n aria-describedby=\"category\"\n ?hidden=\"${!this.closeable}\"\n @click=\"${this.#onCloseClick}\"></pf-button>\n </div>\n `;\n }\n\n /**\n * updates chips when they change\n */\n @observes('accessibleCloseLabel')\n @observes('numChips')\n @observes('closeable')\n @observes('open')\n private chipsChanged(): void {\n this.#updateOverflow();\n }\n\n /**\n * handles chip group close\n */\n #onCloseClick() {\n this.dispatchEvent(new PfChipGroupRemoveEvent());\n }\n\n /**\n * handles overflow chip's click event\n * @param event click event\n */\n async #onMoreClick(event: Event) {\n event.stopPropagation();\n this.open = !this.open;\n await this.updateComplete;\n this.chipsChanged();\n if (this._overflowChip) {\n this.focusOnChip(this._overflowChip);\n }\n this.dispatchEvent(new PfChipGroupExpandEvent());\n }\n\n #onSlotchange() {\n this.requestUpdate();\n }\n\n #onRemove(event: Event) {\n if (event instanceof PfChipRemoveEvent) {\n const index = this.#tabindex.atFocusedItemIndex;\n if (event.chip) {\n this.#tabindex.atFocusedItemIndex = index + 1;\n }\n } else if (event instanceof PfChipGroupRemoveEvent) {\n this.remove();\n }\n }\n\n /**\n * updates which chips are hidden\n */\n #updateOverflow() {\n this.#chips.forEach((chip, i) => {\n chip.accessibleCloseLabel = this.accessibleCloseLabel;\n const overflowHidden = i >= this.numChips && !this.open;\n chip.hidden = overflowHidden;\n });\n }\n\n /**\n * Activates the specified chip and sets focus on it\n * @param chip pf-chip element\n */\n focusOnChip(chip: PfChip): void {\n this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(chip);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-chip-group': PfChipGroup;\n }\n}\n"]}