@carbon/web-components 2.61.0 → 2.62.0-rc.0

package/es/components/tabs/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","names":["CDSContentSwitcherItem","styles","customElement"],"sources":["../../../src/components/tabs/tab.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 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 { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, state, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSContentSwitcherItem from '../content-switcher/content-switcher-item';\nimport { TABS_ICON_SIZE, TABS_TYPE } from './defs';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport '../button/button';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport iconLoader from '../../globals/internal/icon-loader';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Basic tab.\n *\n * @element cds-tab\n * @fires cds-tab-beingclosed\n *   The custom event fired before a tab is closed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated action.\n * @fires cds-tab-closed - The custom event fired after a a tab is closed upon a user gesture.\n */\n@customElement(`${prefix}-tab`)\nexport default class CDSTab extends HostListenerMixin(CDSContentSwitcherItem) {\n  /**\n   * `true` if this tab should be highlighted.\n   * If `true`, parent `<cds-tabs>` selects/deselects this tab upon keyboard interaction.\n   *\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  highlighted = false;\n\n  /**\n   * Tab type.\n   */\n  @property({ reflect: true })\n  type = TABS_TYPE.REGULAR;\n\n  /**\n   * `true` if the tab is in vertical orientation.\n   * This is automatically set by the parent `<cds-tabs>` when it's in vertical mode.\n   */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /**\n   * `true` if this tab is icon-only.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'icon-only' })\n  iconOnly = false;\n\n  /**\n   * Specify the icon size used by icon-only tabs.\n   */\n  @property({ attribute: 'icon-size', reflect: true })\n  iconSize?: TABS_ICON_SIZE;\n\n  /**\n   * The tab text content.\n   */\n  @property()\n  tabTitle;\n\n  /**\n   * An optional label to render under the primary tab label.\n   * Only useful for contained tabs.\n   */\n  @property({ attribute: 'secondary-label', reflect: true })\n  secondaryLabel?: string;\n\n  /**\n   * **Experimental**: Display an empty dot badge on the Tab.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'badge-indicator' })\n  badgeIndicator = false;\n\n  /**\n   * `true` if the tab text is truncated with ellipsis.\n   * This state is automatically updated when the component renders in vertical mode.\n   */\n  @state()\n  truncated = false;\n\n  /**\n   * Whether this tab should be dismissable.\n   */\n  @state()\n  _dismissable = false;\n\n  /**\n   * The index of the tab component\n   */\n  @state()\n  _index = -1;\n\n  /**\n   * Reference to the label span element (only present in vertical mode).\n   * @private\n   */\n  @query(`.${prefix}--tabs__nav-item-label`)\n  private _labelElement?: HTMLElement;\n\n  /**\n   * Checks if the text overflow ellipsis is currently applied to the label.\n   * This is useful for determining if a tooltip should be shown.\n   *\n   * @returns `true` if text is truncated/clamped, `false` otherwise or if not in vertical mode\n   */\n  isTextTruncated(): boolean {\n    if (!this.vertical || !this._labelElement) {\n      return false;\n    }\n\n    // Compare scrollHeight with clientHeight to detect if content is overflowing\n    // When line-clamp is active and text exceeds 2 lines, scrollHeight > clientHeight\n    return this._labelElement.scrollHeight > this._labelElement.clientHeight;\n  }\n\n  /**\n   * Updates the truncated state after the component has rendered.\n   */\n  updated(changedProperties: Map<PropertyKey, unknown>) {\n    super.updated(changedProperties);\n\n    // Check if text is truncated and update state when in vertical mode\n    if (this.vertical && this._labelElement) {\n      const isTruncated = this.isTextTruncated();\n      if (this.truncated !== isTruncated) {\n        this.truncated = isTruncated;\n      }\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    // Retrieve content of the slot to use for aria-label.\n    const content = (target as HTMLSlotElement).assignedNodes();\n    const textContent = content[0]?.textContent;\n    // Normalize whitespace: trim and replace multiple spaces with single space\n    this.tabTitle = textContent?.trim().replace(/\\s+/g, ' ') || undefined;\n  }\n\n  /**\n   * Handles `keydown` event on the tab.\n   * Triggers tab close when Delete key is pressed on a dismissable tab.\n   */\n  @HostListener('keydown')\n  protected _handleKeydown(event: KeyboardEvent) {\n    const { key } = event;\n    if (\n      this._dismissable &&\n      !this.disabled &&\n      (key === 'Delete' || key === 'Backspace')\n    ) {\n      event.preventDefault();\n      this._handleClose(event);\n    }\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const navLinkClasses = classMap({\n      [`${prefix}--tabs__nav-link`]: true,\n      [`${prefix}--tabs__nav-link--dismissable`]: this._dismissable,\n    });\n    const closeButtonClasses = classMap({\n      [`${prefix}--tabs__nav-item--close`]: this._dismissable,\n      [`${prefix}--tabs__nav-item--close--hidden`]: !this._dismissable,\n    });\n    const {\n      badgeIndicator,\n      disabled,\n      secondaryLabel,\n      selected,\n      tabTitle,\n      vertical,\n      truncated,\n      _handleSlotChange: handleSlotChange,\n      _handleClick: handleClick,\n    } = this;\n\n    const iconButton = html`\n      <cds-button\n        title=\"${this.textContent?.trim()\n          ? `Remove ${this.textContent.trim()} tab`\n          : 'Remove tab'}\"\n        class=\"${closeButtonClasses}\"\n        kind=\"ghost\"\n        size=\"xs\"\n        @click=\"${handleClick}\"\n        tab-index=\"${-1}\"\n        aria-hidden=\"${this.selected && this._dismissable ? 'false' : 'true'}\"\n        ?disabled=\"${disabled}\">\n        ${iconLoader(Close16, { 'aria-label': 'close', slot: 'icon' })}\n      </cds-button>\n    `;\n\n    const accessibleLabel = tabTitle || this.getAttribute('aria-label');\n    const isIconOnly =\n      this.iconOnly ||\n      this.classList.contains(`${prefix}--tabs__nav-item--icon-only`);\n    // No `href`/`tabindex` to not to make this `<a>` click-focusable\n    const tabLink = html`\n      <a\n        class=\"${navLinkClasses}\"\n        role=\"tab\"\n        aria-label=\"${ifDefined(accessibleLabel || undefined)}\"\n        tabindex=\"${selected ? 0 : -1}\"\n        ?disabled=\"${disabled}\"\n        aria-selected=\"${selected}\">\n        ${vertical\n          ? html`<span\n              class=\"${prefix}--tabs__nav-item-label\"\n              title=\"${truncated ? tabTitle.trim() : ''}\">\n              <slot @slotchange=\"${handleSlotChange}\"></slot>\n            </span>`\n          : html`\n              <span class=\"${prefix}--tabs__nav-item-label-wrapper\">\n                <slot @slotchange=\"${handleSlotChange}\"></slot>\n              </span>\n            `}\n        ${secondaryLabel\n          ? html`<span\n              class=\"${prefix}--tabs__nav-item-secondary-label\"\n              title=\"${secondaryLabel}\"\n              >${secondaryLabel}</span\n            >`\n          : ''}\n        ${!disabled && badgeIndicator\n          ? html`<cds-badge-indicator></cds-badge-indicator>`\n          : ''}\n      </a>\n      ${iconButton}\n    `;\n\n    if (isIconOnly && accessibleLabel && !disabled) {\n      return html`\n        <cds-tooltip align=\"bottom\" class=\"${prefix}--icon-tooltip\">\n          ${tabLink}\n          <cds-tooltip-content>${accessibleLabel}</cds-tooltip-content>\n        </cds-tooltip>\n      `;\n    }\n\n    return tabLink;\n  }\n\n  /**\n   * Handles the close action for the tab.\n   * Dispatches before-close and close events.\n   */\n  protected _handleClose(event: Event) {\n    event.stopPropagation();\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        index: this._index,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSTab).eventBeforeClose,\n          init\n        )\n      )\n    ) {\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSTab).eventClose, init)\n      );\n    }\n  }\n\n  /**\n   * Handles click event on the close button.\n   */\n  _handleClick(event: Event) {\n    this._handleClose(event);\n  }\n\n  /**\n   * The name of the custom event fired before a tab is closed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated action.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-tab-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after a a tab is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-tab-closed`;\n  }\n\n  static styles = styles;\n}\n"],"mappings":"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"}
+{"version":3,"file":"tab.js","names":["CDSContentSwitcherItem","styles","customElement"],"sources":["../../../src/components/tabs/tab.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 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 { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, state, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSContentSwitcherItem from '../content-switcher/content-switcher-item';\nimport { TABS_ICON_SIZE, TABS_TYPE } from './defs';\nimport styles from './tabs.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport '../button/button';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport iconLoader from '../../globals/internal/icon-loader';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Basic tab.\n *\n * @element cds-tab\n * @fires cds-tab-beingclosed\n *   The custom event fired before a tab is closed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated action.\n * @fires cds-tab-closed - The custom event fired after a a tab is closed upon a user gesture.\n */\n@customElement(`${prefix}-tab`)\nexport default class CDSTab extends HostListenerMixin(CDSContentSwitcherItem) {\n  /**\n   * `true` if this tab should be highlighted.\n   * If `true`, parent `<cds-tabs>` selects/deselects this tab upon keyboard interaction.\n   *\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  highlighted = false;\n\n  /**\n   * Tab type.\n   */\n  @property({ reflect: true })\n  type = TABS_TYPE.REGULAR;\n\n  /**\n   * `true` if the tab is in vertical orientation.\n   * This is automatically set by the parent `<cds-tabs>` when it's in vertical mode.\n   */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /**\n   * `true` if this tab is icon-only.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'icon-only' })\n  iconOnly = false;\n\n  /**\n   * Specify the icon size used by icon-only tabs.\n   */\n  @property({ attribute: 'icon-size', reflect: true })\n  iconSize?: TABS_ICON_SIZE;\n\n  /**\n   * The tab text content.\n   */\n  @property()\n  tabTitle;\n\n  /**\n   * An optional label to render under the primary tab label.\n   * Only useful for contained tabs.\n   */\n  @property({ attribute: 'secondary-label', reflect: true })\n  secondaryLabel?: string;\n\n  /**\n   * **Experimental**: Display an empty dot badge on the Tab.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'badge-indicator' })\n  badgeIndicator = false;\n\n  /**\n   * `true` if the tab text is truncated with ellipsis.\n   * This state is automatically updated when the component renders in vertical mode.\n   */\n  @state()\n  truncated = false;\n\n  /**\n   * Whether this tab should be dismissable.\n   */\n  @state()\n  _dismissable = false;\n\n  /**\n   * The index of the tab component\n   */\n  @state()\n  _index = -1;\n\n  /**\n   * Reference to the label span element (only present in vertical mode).\n   * @private\n   */\n  @query(`.${prefix}--tabs__nav-item-label`)\n  private _labelElement?: HTMLElement;\n\n  /**\n   * Checks if the text overflow ellipsis is currently applied to the label.\n   * This is useful for determining if a tooltip should be shown.\n   *\n   * @returns `true` if text is truncated/clamped, `false` otherwise or if not in vertical mode\n   */\n  isTextTruncated(): boolean {\n    if (!this.vertical || !this._labelElement) {\n      return false;\n    }\n\n    // Compare scrollHeight with clientHeight to detect if content is overflowing\n    // When line-clamp is active and text exceeds 2 lines, scrollHeight > clientHeight\n    return this._labelElement.scrollHeight > this._labelElement.clientHeight;\n  }\n\n  /**\n   * Updates the truncated state after the component has rendered.\n   */\n  updated(changedProperties: Map<PropertyKey, unknown>) {\n    super.updated(changedProperties);\n\n    // Check if text is truncated and update state when in vertical mode\n    if (this.vertical && this._labelElement) {\n      const isTruncated = this.isTextTruncated();\n      if (this.truncated !== isTruncated) {\n        this.truncated = isTruncated;\n      }\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    // Retrieve content of the slot to use for aria-label.\n    const content = (target as HTMLSlotElement).assignedNodes();\n    const textContent = content[0]?.textContent;\n    // Normalize whitespace: trim and replace multiple spaces with single space\n    this.tabTitle = textContent?.trim().replace(/\\s+/g, ' ') || undefined;\n  }\n\n  /**\n   * Handles `keydown` event on the tab.\n   * Triggers tab close when Delete key is pressed on a dismissable tab.\n   */\n  @HostListener('keydown')\n  protected _handleKeydown(event: KeyboardEvent) {\n    const { key } = event;\n    if (\n      this._dismissable &&\n      !this.disabled &&\n      (key === 'Delete' || key === 'Backspace')\n    ) {\n      event.preventDefault();\n      this._handleClose(event);\n    }\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const navLinkClasses = classMap({\n      [`${prefix}--tabs__nav-link`]: true,\n      [`${prefix}--tabs__nav-link--dismissable`]: this._dismissable,\n    });\n    const closeButtonClasses = classMap({\n      [`${prefix}--tabs__nav-item--close`]: this._dismissable,\n      [`${prefix}--tabs__nav-item--close--hidden`]: !this._dismissable,\n    });\n    const {\n      badgeIndicator,\n      disabled,\n      secondaryLabel,\n      selected,\n      tabTitle,\n      vertical,\n      truncated,\n      _handleSlotChange: handleSlotChange,\n      _handleClick: handleClick,\n    } = this;\n\n    const iconButton = html`\n      <cds-button\n        title=\"${this.textContent?.trim()\n          ? `Remove ${this.textContent.trim()} tab`\n          : 'Remove tab'}\"\n        class=\"${closeButtonClasses}\"\n        kind=\"ghost\"\n        size=\"xs\"\n        @click=\"${handleClick}\"\n        tab-index=\"${-1}\"\n        aria-hidden=\"${this.selected && this._dismissable ? 'false' : 'true'}\"\n        ?disabled=\"${disabled}\">\n        ${iconLoader(Close16, { 'aria-label': 'close', slot: 'icon' })}\n      </cds-button>\n    `;\n\n    const accessibleLabel = tabTitle || this.getAttribute('aria-label');\n    const isIconOnly =\n      this.iconOnly ||\n      this.classList.contains(`${prefix}--tabs__nav-item--icon-only`);\n    // No `href`/`tabindex` to not to make this `<a>` click-focusable\n    const tabLink = html`\n      <a\n        class=\"${navLinkClasses}\"\n        role=\"tab\"\n        aria-label=\"${ifDefined(accessibleLabel || undefined)}\"\n        tabindex=\"${selected ? 0 : -1}\"\n        ?disabled=\"${disabled}\"\n        aria-selected=\"${selected}\">\n        ${vertical\n          ? html`<span\n              class=\"${prefix}--tabs__nav-item-label\"\n              title=\"${truncated ? tabTitle.trim() : ''}\">\n              <slot @slotchange=\"${handleSlotChange}\"></slot>\n            </span>`\n          : html`\n              <span class=\"${prefix}--tabs__nav-item-label-wrapper\">\n                <slot @slotchange=\"${handleSlotChange}\"></slot>\n              </span>\n            `}\n        ${secondaryLabel\n          ? html`<span\n              class=\"${prefix}--tabs__nav-item-secondary-label\"\n              title=\"${secondaryLabel}\"\n              >${secondaryLabel}</span\n            >`\n          : ''}\n        ${!disabled && badgeIndicator\n          ? html`<cds-badge-indicator></cds-badge-indicator>`\n          : ''}\n      </a>\n      ${iconButton}\n    `;\n\n    if (isIconOnly && accessibleLabel && !disabled) {\n      return html`\n        <cds-tooltip\n          align=\"bottom\"\n          class=\"${prefix}--icon-tooltip\"\n          leave-delay-ms=\"0\">\n          ${tabLink}\n          <cds-tooltip-content>${accessibleLabel}</cds-tooltip-content>\n        </cds-tooltip>\n      `;\n    }\n\n    return tabLink;\n  }\n\n  /**\n   * Handles the close action for the tab.\n   * Dispatches before-close and close events.\n   */\n  protected _handleClose(event: Event) {\n    event.stopPropagation();\n    const init = {\n      bubbles: true,\n      cancelable: true,\n      composed: true,\n      detail: {\n        index: this._index,\n      },\n    };\n    if (\n      this.dispatchEvent(\n        new CustomEvent(\n          (this.constructor as typeof CDSTab).eventBeforeClose,\n          init\n        )\n      )\n    ) {\n      this.dispatchEvent(\n        new CustomEvent((this.constructor as typeof CDSTab).eventClose, init)\n      );\n    }\n  }\n\n  /**\n   * Handles click event on the close button.\n   */\n  _handleClick(event: Event) {\n    this._handleClose(event);\n  }\n\n  /**\n   * The name of the custom event fired before a tab is closed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated action.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-tab-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after a a tab is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-tab-closed`;\n  }\n\n  static styles = styles;\n}\n"],"mappings":"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"}