@carbon/ibm-products-web-components 0.48.0 → 0.49.0

package/es-custom/components/page-header/page-header-tags-set/page-header-tags-set.js

@@ -10,9 +10,9 @@ import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.127.0/help
 import page_header_tags_set_default$1 from "./page-header-tags-set.scss.js";
 import { LitElement, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
+import '@carbon/web-components/es-custom/components/button/index.js';
 import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
 import '@carbon/web-components/es-custom/components/modal/index.js';
-import '@carbon/web-components/es-custom/components/link/index.js';
 import '@carbon/web-components/es-custom/components/search/index.js';
 import '@carbon/web-components/es-custom/components/tag/index.js';
 import { createOverflowHandler } from "@carbon/utilities";
@@ -40,10 +40,15 @@ let CDSPageHeaderTagsSet = class CDSPageHeaderTagsSet extends LitElement {
 		this.handleDismiss = (e, tag) => {
 			e.stopPropagation();
 			e.preventDefault();
-			this.tagsData = this.tagsData.filter((t) => t.text !== tag.text);
+			const dismissedIndex = this.tagsData.findIndex((t) => t === tag);
+			this.tagsData = this.tagsData.filter((t) => t !== tag);
 			this.shadowRoot?.querySelectorAll("[data-hidden]:not([data-offset])").forEach((el) => el.removeAttribute("data-hidden"));
-			const remaining = this.hiddenTags.filter((t) => t.text !== tag.text);
-			if (this.hiddenTags.length === 2 && remaining[0]) this.shadowRoot?.querySelector(`#${remaining[0].text}`)?.removeAttribute("data-hidden");
+			const remaining = this.hiddenTags.filter((t) => t !== tag);
+			if (this.hiddenTags.length === 2 && remaining[0]) {
+				const originalIndex = this.tagsData.findIndex((t) => t === remaining[0]);
+				const adjustedIndex = originalIndex >= 0 ? originalIndex : dismissedIndex > 0 ? dismissedIndex - 1 : 0;
+				this.shadowRoot?.querySelector(`#${this._tagId(adjustedIndex)}`)?.removeAttribute("data-hidden");
+			}
 		};
 	}
 	connectedCallback() {
@@ -94,14 +99,17 @@ let CDSPageHeaderTagsSet = class CDSPageHeaderTagsSet extends LitElement {
 	handleTogglePopover(event) {
 		if (event instanceof PointerEvent || event instanceof KeyboardEvent && [" ", "Enter"].includes(event.key)) this.isPopoverOpen = !this.isPopoverOpen;
 	}
+	_tagId(index) {
+		return `c4p--page-header-tag-${index}`;
+	}
 	render() {
 		return html` <div class=${blockClass}>
-        ${this.tagsData.map((tag) => html`
-            <span id=${tag?.text}>
+        ${this.tagsData.map((tag, index) => html`
+            <span id=${this._tagId(index)}>
               ${tag?.onClose ? html`<cds-custom-dismissible-tag
                     @cds-custom-dismissible-tag-beingclosed=${(e) => this.handleDismiss(e, tag)}
                     text=${tag?.text}
-                    tag-title="Provide a custom title to the tag"
+                    tag-title=${tag?.text}
                     type=${tag.type}
                     size=${tag.size}
                   ></cds-custom-dismissible-tag>` : html`<cds-custom-tag type=${tag.type} size=${tag.size}
@@ -110,6 +118,14 @@ let CDSPageHeaderTagsSet = class CDSPageHeaderTagsSet extends LitElement {
             </span>
           `)}
         <span data-offset ?data-hidden=${this.hiddenTags.length === 0}>
+          <span
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+            class="${blockClass}__hidden-count-announcement"
+          >
+            ${this.hiddenTags.length > 0 ? `${this.hiddenTags.length} more tags` : ""}
+          </span>
           <cds-custom-popover
             ?open=${this.isPopoverOpen}
             ?highContrast=${true}
@@ -119,6 +135,9 @@ let CDSPageHeaderTagsSet = class CDSPageHeaderTagsSet extends LitElement {
               size=${this.tagsData[0]?.size}
               title="+${this.hiddenTags.length}"
               text="+${this.hiddenTags.length}"
+              aria-label="${this.hiddenTags.length} more tags"
+              aria-expanded=${this.isPopoverOpen ? "true" : "false"}
+              aria-haspopup="true"
               @click=${this.handleTogglePopover}
               @keydown=${this.handleTogglePopover}
             ></cds-custom-operational-tag>
@@ -129,24 +148,26 @@ let CDSPageHeaderTagsSet = class CDSPageHeaderTagsSet extends LitElement {
                               <cds-custom-dismissible-tag
                                 @cds-custom-dismissible-tag-beingclosed=${(e) => this.handleDismiss(e, tag)}
                                 text=${tag?.text}
-                                tag-title="Provide a custom title to the tag"
+                                tag-title=${tag?.text}
                                 type=${tag.type}
                                 size=${tag.size}
                               ></cds-custom-dismissible-tag>
                             </div>
-                          ` : html`<p class="${blockClass}__popover-tag">
-                            ${tag?.text}
-                          </p>`) : nothing}
+                          ` : html`<cds-custom-tag
+                            class="${blockClass}__popover-tag"
+                            type=${tag.type}
+                            size=${tag.size}
+                            >${tag?.text}</cds-custom-tag
+                          >`) : nothing}
                 ${this.hiddenTags.length > 10 ? html`
-                      <cds-custom-link
+                      <cds-custom-button
                         class="${blockClass}__view-all"
+                        kind="ghost"
+                        size="sm"
                         @click=${() => this.modalOpen = true}
-                        @keydown=${(e) => {
-			if (e.key === " ") this.modalOpen = true;
-		}}
                       >
                         View all tags
-                      </cds-custom-link>
+                      </cds-custom-button>
                     ` : nothing}
               </div>
             </cds-custom-popover-content>
@@ -177,7 +198,7 @@ let CDSPageHeaderTagsSet = class CDSPageHeaderTagsSet extends LitElement {
                 ${this.tagsData.filter((tag) => tag.text && new RegExp(this.searchString, "i").test(tag.text)).map((tag) => tag.onClose ? html`<cds-custom-dismissible-tag
                           @cds-custom-dismissible-tag-beingclosed=${(e) => this.handleDismiss(e, tag)}
                           text=${tag?.text}
-                          tag-title="Provide a custom title to the tag"
+                          tag-title=${tag?.text}
                           type=${tag.type}
                           size=${tag.size}
                         ></cds-custom-dismissible-tag>` : html`<cds-custom-tag type=${tag.type} size=${tag.size}

package/es-custom/components/page-header/page-header-tags-set/page-header-tags-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-tags-set.js","names":["styles","customElement"],"sources":["../../../../src/components/page-header/page-header-tags-set/page-header-tags-set.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es-custom/components/tag/index.js';\nimport '@carbon/web-components/es-custom/components/link/index.js';\nimport '@carbon/web-components/es-custom/components/modal/index.js';\nimport '@carbon/web-components/es-custom/components/search/index.js';\nimport { createOverflowHandler } from '@carbon/utilities';\nimport { TagType } from './utils';\nimport styles from './page-header-tags-set.scss?lit';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-tags-set`;\n\n@customElement(`${prefix}-page-header-tags-set`)\nexport default class CDSPageHeaderTagsSet extends LitElement {\n  @state()\n  hiddenTags: TagType[] = [];\n\n  @property({ type: Array, attribute: 'tags-data', reflect: true })\n  tagsData: TagType[] = [];\n\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  @query('[data-offset]')\n  private offset!: HTMLElement;\n\n  @state()\n  private isPopoverOpen = false;\n\n  @state()\n  private modalOpen = false;\n\n  @state()\n  private searchString = '';\n\n  private overflowHandler: { disconnect: () => void } | undefined;\n  private resizeObserver: ResizeObserver | undefined; // only for observing width changes of offset\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    // setup overflow handler by observing offset by default\n    // dynamic changes in offset sizes re-initializes the handler to account for the new offset size\n    this.resizeObserver = new ResizeObserver(() => {\n      this.setupOverflowHandler();\n    });\n    this.resizeObserver.observe(this.offset);\n\n    // On first render, all elements are initially visible. so hiding `this` visibility in connectedCallback\n    // The handler runs on the second render to hide specific elements as needed.\n    // The following line restores visibility after layout settles, allowing for smoother transitions.\n    setTimeout(() => {\n      this.style.visibility = 'visible';\n    });\n\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // setup overflow handler whenever tags data changes to account for the new item sizes\n    if (changedProperties.has('tagsData')) {\n      const previousIsPopoverOpen = this.isPopoverOpen;\n      this.updateComplete.then(() => {\n        this.hiddenTags = [];\n        this.isPopoverOpen = previousIsPopoverOpen;\n        this.setupOverflowHandler();\n      });\n    }\n\n    if (!this.hiddenTags.length) {\n      const lastItem = this.shadowRoot?.querySelector(\n        '[data-hidden]:not([data-offset])'\n      );\n      lastItem?.removeAttribute('data-hidden');\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.overflowHandler?.disconnect();\n    this.resizeObserver?.disconnect();\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private setupOverflowHandler() {\n    if (!this.container) {\n      return;\n    }\n\n    // Disconnect existing handler if any\n    this.overflowHandler?.disconnect();\n\n    this.overflowHandler = createOverflowHandler({\n      container: this.container,\n      onChange: (_, hiddenItems: HTMLElement[]) => {\n        const filteredChildren = Array.from(this.container.children).filter(\n          (child) =>\n            !child.hasAttribute('data-offset') &&\n            !child.hasAttribute('data-fixed')\n        );\n\n        this.hiddenTags = hiddenItems.map((hiddenItem) => {\n          const index = filteredChildren.indexOf(hiddenItem);\n          return this.tagsData[index];\n        });\n      },\n    });\n  }\n\n  private handleTogglePopover(event: Event) {\n    if (\n      event instanceof PointerEvent ||\n      (event instanceof KeyboardEvent && [' ', 'Enter'].includes(event.key))\n    ) {\n      this.isPopoverOpen = !this.isPopoverOpen;\n    }\n  }\n\n  private handleDocumentClick = (event: Event) => {\n    if (event.target !== this) {\n      this.isPopoverOpen = false;\n    }\n  };\n\n  private handleDismiss = (e: CustomEvent, tag: TagType) => {\n    e.stopPropagation();\n    e.preventDefault();\n\n    this.tagsData = this.tagsData.filter((t) => t.text !== tag.text);\n    this.shadowRoot\n      ?.querySelectorAll('[data-hidden]:not([data-offset])')\n      .forEach((el) => el.removeAttribute('data-hidden'));\n\n    const remaining = this.hiddenTags.filter((t) => t.text !== tag.text);\n    if (this.hiddenTags.length === 2 && remaining[0]) {\n      this.shadowRoot\n        ?.querySelector(`#${remaining[0].text}`)\n        ?.removeAttribute('data-hidden');\n    }\n  };\n\n  render() {\n    return html` <div class=${blockClass}>\n        ${this.tagsData.map(\n          (tag) => html`\n            <span id=${tag?.text}>\n              ${tag?.onClose\n                ? html`<cds-custom-dismissible-tag\n                    @cds-custom-dismissible-tag-beingclosed=${(e: CustomEvent) =>\n                      this.handleDismiss(e, tag)}\n                    text=${tag?.text}\n                    tag-title=\"Provide a custom title to the tag\"\n                    type=${tag.type}\n                    size=${tag.size}\n                  ></cds-custom-dismissible-tag>`\n                : html`<cds-custom-tag type=${tag.type} size=${tag.size}\n                    >${tag?.text}</cds-custom-tag\n                  >`}\n            </span>\n          `\n        )}\n        <span data-offset ?data-hidden=${this.hiddenTags.length === 0}>\n          <cds-custom-popover\n            ?open=${this.isPopoverOpen}\n            ?highContrast=${true}\n            align=${document.dir === 'rtl' ? 'bottom-left' : 'bottom-right'}\n          >\n            <cds-custom-operational-tag\n              size=${this.tagsData[0]?.size}\n              title=\"+${this.hiddenTags.length}\"\n              text=\"+${this.hiddenTags.length}\"\n              @click=${this.handleTogglePopover}\n              @keydown=${this.handleTogglePopover}\n            ></cds-custom-operational-tag>\n            <cds-custom-popover-content>\n              <div class=\"${`${blockClass}__popover-container`}\">\n                ${this.hiddenTags.length > 0\n                  ? this.hiddenTags.slice(0, 10).map((tag) =>\n                      tag.onClose\n                        ? html`\n                            <div>\n                              <cds-custom-dismissible-tag\n                                @cds-custom-dismissible-tag-beingclosed=${(\n                                  e: CustomEvent\n                                ) => this.handleDismiss(e, tag)}\n                                text=${tag?.text}\n                                tag-title=\"Provide a custom title to the tag\"\n                                type=${tag.type}\n                                size=${tag.size}\n                              ></cds-custom-dismissible-tag>\n                            </div>\n                          `\n                        : html`<p class=\"${blockClass}__popover-tag\">\n                            ${tag?.text}\n                          </p>`\n                    )\n                  : nothing}\n                ${this.hiddenTags.length > 10\n                  ? html`\n                      <cds-custom-link\n                        class=\"${blockClass}__view-all\"\n                        @click=${() => (this.modalOpen = true)}\n                        @keydown=${(e: KeyboardEvent) => {\n                          if (e.key === ' ') {\n                            this.modalOpen = true;\n                          }\n                        }}\n                      >\n                        View all tags\n                      </cds-custom-link>\n                    `\n                  : nothing}\n              </div>\n            </cds-custom-popover-content>\n          </cds-custom-popover>\n        </span>\n      </div>\n      ${this.hiddenTags.length > 10\n        ? html`<cds-custom-modal\n            ?open=${this.modalOpen}\n            size=\"sm\"\n            @cds-custom-modal-closed=${(_: CustomEvent) => (this.modalOpen = false)}\n          >\n            <cds-custom-modal-header>\n              <cds-custom-modal-close-button></cds-custom-modal-close-button>\n              <cds-custom-modal-heading>All tags</cds-custom-modal-heading>\n              <cds-custom-search\n                size=\"lg\"\n                close-button-label-text=\"Clear search input\"\n                value=\"${this.searchString}\"\n                class=\"${blockClass}__modal-tags-search\"\n                label-text=\"Search\"\n                placeholder=\"Search all tags\"\n                type=\"text\"\n                @cds-custom-search-input=${(e: CustomEvent) =>\n                  (this.searchString = e.detail.value)}\n              ></cds-custom-search>\n            </cds-custom-modal-header>\n            <cds-custom-modal-body>\n              <div class=\"${blockClass}__modal-tags-container\">\n                ${this.tagsData\n                  .filter(\n                    (tag) =>\n                      tag.text &&\n                      new RegExp(this.searchString, 'i').test(tag.text)\n                  )\n                  .map((tag) =>\n                    tag.onClose\n                      ? html`<cds-custom-dismissible-tag\n                          @cds-custom-dismissible-tag-beingclosed=${(e: CustomEvent) =>\n                            this.handleDismiss(e, tag)}\n                          text=${tag?.text}\n                          tag-title=\"Provide a custom title to the tag\"\n                          type=${tag.type}\n                          size=${tag.size}\n                        ></cds-custom-dismissible-tag>`\n                      : html`<cds-custom-tag type=${tag.type} size=${tag.size}\n                          >${tag?.text}</cds-custom-tag\n                        >`\n                  )}\n              </div>\n            </cds-custom-modal-body>\n          </cds-custom-modal>`\n        : nothing}`;\n  }\n\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-tags-set': CDSPageHeaderTagsSet;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"page-header-tags-set.js","names":["styles","customElement"],"sources":["../../../../src/components/page-header/page-header-tags-set/page-header-tags-set.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2025, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\nimport '@carbon/web-components/es-custom/components/tag/index.js';\nimport '@carbon/web-components/es-custom/components/button/index.js';\nimport '@carbon/web-components/es-custom/components/modal/index.js';\nimport '@carbon/web-components/es-custom/components/search/index.js';\nimport { createOverflowHandler } from '@carbon/utilities';\nimport { TagType } from './utils';\nimport styles from './page-header-tags-set.scss?lit';\nimport { prefix } from '../../../globals/settings';\n\nconst blockClass = `${prefix}--page-header-tags-set`;\n\n@customElement(`${prefix}-page-header-tags-set`)\nexport default class CDSPageHeaderTagsSet extends LitElement {\n  @state()\n  hiddenTags: TagType[] = [];\n\n  @property({ type: Array, attribute: 'tags-data', reflect: true })\n  tagsData: TagType[] = [];\n\n  @query(`.${blockClass}`)\n  private container!: HTMLElement;\n\n  @query('[data-offset]')\n  private offset!: HTMLElement;\n\n  @state()\n  private isPopoverOpen = false;\n\n  @state()\n  private modalOpen = false;\n\n  @state()\n  private searchString = '';\n\n  private overflowHandler: { disconnect: () => void } | undefined;\n  private resizeObserver: ResizeObserver | undefined; // only for observing width changes of offset\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.style.visibility = 'hidden';\n  }\n\n  firstUpdated() {\n    // setup overflow handler by observing offset by default\n    // dynamic changes in offset sizes re-initializes the handler to account for the new offset size\n    this.resizeObserver = new ResizeObserver(() => {\n      this.setupOverflowHandler();\n    });\n    this.resizeObserver.observe(this.offset);\n\n    // On first render, all elements are initially visible. so hiding `this` visibility in connectedCallback\n    // The handler runs on the second render to hide specific elements as needed.\n    // The following line restores visibility after layout settles, allowing for smoother transitions.\n    setTimeout(() => {\n      this.style.visibility = 'visible';\n    });\n\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // setup overflow handler whenever tags data changes to account for the new item sizes\n    if (changedProperties.has('tagsData')) {\n      const previousIsPopoverOpen = this.isPopoverOpen;\n      this.updateComplete.then(() => {\n        this.hiddenTags = [];\n        this.isPopoverOpen = previousIsPopoverOpen;\n        this.setupOverflowHandler();\n      });\n    }\n\n    if (!this.hiddenTags.length) {\n      const lastItem = this.shadowRoot?.querySelector(\n        '[data-hidden]:not([data-offset])'\n      );\n      lastItem?.removeAttribute('data-hidden');\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.overflowHandler?.disconnect();\n    this.resizeObserver?.disconnect();\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private setupOverflowHandler() {\n    if (!this.container) {\n      return;\n    }\n\n    // Disconnect existing handler if any\n    this.overflowHandler?.disconnect();\n\n    this.overflowHandler = createOverflowHandler({\n      container: this.container,\n      onChange: (_, hiddenItems: HTMLElement[]) => {\n        const filteredChildren = Array.from(this.container.children).filter(\n          (child) =>\n            !child.hasAttribute('data-offset') &&\n            !child.hasAttribute('data-fixed')\n        );\n\n        this.hiddenTags = hiddenItems.map((hiddenItem) => {\n          const index = filteredChildren.indexOf(hiddenItem);\n          return this.tagsData[index];\n        });\n      },\n    });\n  }\n\n  private handleTogglePopover(event: Event) {\n    if (\n      event instanceof PointerEvent ||\n      (event instanceof KeyboardEvent && [' ', 'Enter'].includes(event.key))\n    ) {\n      this.isPopoverOpen = !this.isPopoverOpen;\n    }\n  }\n\n  private handleDocumentClick = (event: Event) => {\n    if (event.target !== this) {\n      this.isPopoverOpen = false;\n    }\n  };\n\n  private _tagId(index: number) {\n    return `${prefix}--page-header-tag-${index}`;\n  }\n\n  private handleDismiss = (e: CustomEvent, tag: TagType) => {\n    e.stopPropagation();\n    e.preventDefault();\n\n    const dismissedIndex = this.tagsData.findIndex((t) => t === tag);\n    this.tagsData = this.tagsData.filter((t) => t !== tag);\n    this.shadowRoot\n      ?.querySelectorAll('[data-hidden]:not([data-offset])')\n      .forEach((el) => el.removeAttribute('data-hidden'));\n\n    const remaining = this.hiddenTags.filter((t) => t !== tag);\n    if (this.hiddenTags.length === 2 && remaining[0]) {\n      // Find the original index of the remaining tag before the dismissed item shifted indices\n      const originalIndex = this.tagsData.findIndex((t) => t === remaining[0]);\n      const adjustedIndex =\n        originalIndex >= 0\n          ? originalIndex\n          : dismissedIndex > 0\n            ? dismissedIndex - 1\n            : 0;\n      this.shadowRoot\n        ?.querySelector(`#${this._tagId(adjustedIndex)}`)\n        ?.removeAttribute('data-hidden');\n    }\n  };\n\n  render() {\n    return html` <div class=${blockClass}>\n        ${this.tagsData.map(\n          (tag, index) => html`\n            <span id=${this._tagId(index)}>\n              ${tag?.onClose\n                ? html`<cds-custom-dismissible-tag\n                    @cds-custom-dismissible-tag-beingclosed=${(e: CustomEvent) =>\n                      this.handleDismiss(e, tag)}\n                    text=${tag?.text}\n                    tag-title=${tag?.text}\n                    type=${tag.type}\n                    size=${tag.size}\n                  ></cds-custom-dismissible-tag>`\n                : html`<cds-custom-tag type=${tag.type} size=${tag.size}\n                    >${tag?.text}</cds-custom-tag\n                  >`}\n            </span>\n          `\n        )}\n        <span data-offset ?data-hidden=${this.hiddenTags.length === 0}>\n          <span\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            class=\"${blockClass}__hidden-count-announcement\"\n          >\n            ${this.hiddenTags.length > 0\n              ? `${this.hiddenTags.length} more tags`\n              : ''}\n          </span>\n          <cds-custom-popover\n            ?open=${this.isPopoverOpen}\n            ?highContrast=${true}\n            align=${document.dir === 'rtl' ? 'bottom-left' : 'bottom-right'}\n          >\n            <cds-custom-operational-tag\n              size=${this.tagsData[0]?.size}\n              title=\"+${this.hiddenTags.length}\"\n              text=\"+${this.hiddenTags.length}\"\n              aria-label=\"${this.hiddenTags.length} more tags\"\n              aria-expanded=${this.isPopoverOpen ? 'true' : 'false'}\n              aria-haspopup=\"true\"\n              @click=${this.handleTogglePopover}\n              @keydown=${this.handleTogglePopover}\n            ></cds-custom-operational-tag>\n            <cds-custom-popover-content>\n              <div class=\"${`${blockClass}__popover-container`}\">\n                ${this.hiddenTags.length > 0\n                  ? this.hiddenTags.slice(0, 10).map((tag) =>\n                      tag.onClose\n                        ? html`\n                            <div>\n                              <cds-custom-dismissible-tag\n                                @cds-custom-dismissible-tag-beingclosed=${(\n                                  e: CustomEvent\n                                ) => this.handleDismiss(e, tag)}\n                                text=${tag?.text}\n                                tag-title=${tag?.text}\n                                type=${tag.type}\n                                size=${tag.size}\n                              ></cds-custom-dismissible-tag>\n                            </div>\n                          `\n                        : html`<cds-custom-tag\n                            class=\"${blockClass}__popover-tag\"\n                            type=${tag.type}\n                            size=${tag.size}\n                            >${tag?.text}</cds-custom-tag\n                          >`\n                    )\n                  : nothing}\n                ${this.hiddenTags.length > 10\n                  ? html`\n                      <cds-custom-button\n                        class=\"${blockClass}__view-all\"\n                        kind=\"ghost\"\n                        size=\"sm\"\n                        @click=${() => (this.modalOpen = true)}\n                      >\n                        View all tags\n                      </cds-custom-button>\n                    `\n                  : nothing}\n              </div>\n            </cds-custom-popover-content>\n          </cds-custom-popover>\n        </span>\n      </div>\n      ${this.hiddenTags.length > 10\n        ? html`<cds-custom-modal\n            ?open=${this.modalOpen}\n            size=\"sm\"\n            @cds-custom-modal-closed=${(_: CustomEvent) => (this.modalOpen = false)}\n          >\n            <cds-custom-modal-header>\n              <cds-custom-modal-close-button></cds-custom-modal-close-button>\n              <cds-custom-modal-heading>All tags</cds-custom-modal-heading>\n              <cds-custom-search\n                size=\"lg\"\n                close-button-label-text=\"Clear search input\"\n                value=\"${this.searchString}\"\n                class=\"${blockClass}__modal-tags-search\"\n                label-text=\"Search\"\n                placeholder=\"Search all tags\"\n                type=\"text\"\n                @cds-custom-search-input=${(e: CustomEvent) =>\n                  (this.searchString = e.detail.value)}\n              ></cds-custom-search>\n            </cds-custom-modal-header>\n            <cds-custom-modal-body>\n              <div class=\"${blockClass}__modal-tags-container\">\n                ${this.tagsData\n                  .filter(\n                    (tag) =>\n                      tag.text &&\n                      new RegExp(this.searchString, 'i').test(tag.text)\n                  )\n                  .map((tag) =>\n                    tag.onClose\n                      ? html`<cds-custom-dismissible-tag\n                          @cds-custom-dismissible-tag-beingclosed=${(e: CustomEvent) =>\n                            this.handleDismiss(e, tag)}\n                          text=${tag?.text}\n                          tag-title=${tag?.text}\n                          type=${tag.type}\n                          size=${tag.size}\n                        ></cds-custom-dismissible-tag>`\n                      : html`<cds-custom-tag type=${tag.type} size=${tag.size}\n                          >${tag?.text}</cds-custom-tag\n                        >`\n                  )}\n              </div>\n            </cds-custom-modal-body>\n          </cds-custom-modal>`\n        : nothing}`;\n  }\n\n  static styles = styles;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'c4p-page-header-tags-set': CDSPageHeaderTagsSet;\n  }\n}\n"],"mappings":"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"}