@carbon/web-components 2.57.0 → 2.58.0

package/es-custom/components/notification/actionable-notification-button.js

@@ -7,7 +7,7 @@
 
 import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import button_default from "../button/button.js";
 import actionable_notification_default from "./actionable-notification.scss.js";
 //#region src/components/notification/actionable-notification-button.ts

package/es-custom/components/notification/actionable-notification-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"actionable-notification-button.js","names":["CDSButton","styles","customElement"],"sources":["../../../src/components/notification/actionable-notification-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\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 { prefix } from '../../globals/settings';\nimport CDSButton from '../button/button';\nimport styles from './actionable-notification.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Actionable notification action button.\n *\n * @element cds-custom-actionable-notification-button\n */\n@customElement(`${prefix}-actionable-notification-button`)\nclass CDSActionableNotificationButton extends CDSButton {\n  update(changedProperties) {\n    super.update(changedProperties);\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    this.shadowRoot!.getElementById('button')?.classList.add(\n      `${prefix}--actionable-notification__action-button`\n    );\n\n    this.setAttribute('size', 'sm');\n  }\n\n  static styles = styles;\n}\n\nexport default CDSActionableNotificationButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,kCAAA,MACM,wCAAwCA,eAAU;CACtD,OAAO,mBAAmB;AACxB,QAAM,OAAO,kBAAkB;AAE/B,OAAK,WAAY,eAAe,SAAS,EAAE,UAAU,IACnD,8CACD;AAED,OAAK,aAAa,QAAQ,KAAK;;;gBAGjBC;;;8CAZjBC,cAAc,qCAA2C,CAAA,EAAA,gCAAA;AAe1D,IAAA,yCAAe"}
+{"version":3,"file":"actionable-notification-button.js","names":["CDSButton","styles","customElement"],"sources":["../../../src/components/notification/actionable-notification-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\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 { prefix } from '../../globals/settings';\nimport CDSButton from '../button/button';\nimport styles from './actionable-notification.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Actionable notification action button.\n *\n * @element cds-custom-actionable-notification-button\n */\n@customElement(`${prefix}-actionable-notification-button`)\nclass CDSActionableNotificationButton extends CDSButton {\n  update(changedProperties) {\n    super.update(changedProperties);\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    this.shadowRoot!.getElementById('button')?.classList.add(\n      `${prefix}--actionable-notification__action-button`\n    );\n\n    this.setAttribute('size', 'sm');\n  }\n\n  static styles = styles;\n}\n\nexport default CDSActionableNotificationButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,kCAAA,MACM,wCAAwCA,eAAU;CACtD,OAAO,mBAAmB;EACxB,MAAM,OAAO,iBAAiB;EAE9B,KAAK,WAAY,eAAe,QAAQ,CAAC,EAAE,UAAU,IACnD,6CACF;EAEA,KAAK,aAAa,QAAQ,IAAI;CAChC;;gBAEgBC;;AAClB;8CAbCC,cAAc,oCAA0C,CAAA,GAAA,+BAAA;AAezD,IAAA,yCAAe"}

package/es-custom/components/notification/actionable-notification.js

@@ -7,7 +7,7 @@
 
 import { selectorTabbable } from "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";

package/es-custom/components/notification/actionable-notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"actionable-notification.js","names":["CDSInlineNotification","styles","customElement"],"sources":["../../../src/components/notification/actionable-notification.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\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 */\nimport { html } from 'lit';\nimport CheckmarkFilled20 from '@carbon/icons/es/checkmark--filled/20.js';\nimport InformationFilled20 from '@carbon/icons/es/information--filled/20.js';\nimport InformationSquareFilled20 from '@carbon/icons/es/information--square--filled/20.js';\nimport WarningFilled20 from '@carbon/icons/es/warning--filled/20.js';\nimport WarningAltFilled20 from '@carbon/icons/es/warning--alt--filled/20.js';\nimport ErrorFilled20 from '@carbon/icons/es/error--filled/20.js';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix, selectorTabbable } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { NOTIFICATION_TYPE, NOTIFICATION_KIND } from './defs';\nimport CDSInlineNotification from './inline-notification';\nimport styles from './actionable-notification.scss?lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSButton from '../button/button';\n\n/**\n * The default icons, keyed by notification kind.\n */\nexport const iconsForKinds = {\n  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n  [NOTIFICATION_KIND.INFO]: InformationFilled20,\n  [NOTIFICATION_KIND.INFO_SQUARE]: InformationSquareFilled20,\n  [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n  [NOTIFICATION_KIND.WARNING_ALT]: WarningAltFilled20,\n  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse = false) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      const active = elem.ownerDocument!.activeElement;\n      if (\n        active === elem ||\n        active?.contains(elem) ||\n        active?.shadowRoot?.contains(elem)\n      ) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      const active = elem.ownerDocument!.activeElement;\n      if (\n        active === elem ||\n        active?.contains(elem) ||\n        active?.shadowRoot?.contains(elem)\n      ) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Actionable notification.\n *\n * @element cds-custom-actionable-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires cds-custom-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires cds-custom-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-actionable-notification`)\nclass CDSActionableNotification extends HostListenerMixin(\n  CDSInlineNotification\n) {\n  protected _type = NOTIFICATION_TYPE.ACTIONABLE;\n\n  /**\n   * Inline notification type.\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * Pass in the action button label that will be rendered within the ActionableNotification.\n   */\n  @property({ type: String, reflect: true, attribute: 'action-button-label' })\n  actionButtonLabel = '';\n\n  /**\n   * Specify if pressing the escape key should close notifications\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'close-on-escape' })\n  closeOnEscape = true;\n\n  /**\n   * Specify if focus should be moved to the component when the notification contains actions\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-focus' })\n  hasFocus = true;\n\n  /**\n   * Node to track focus going outside of actionable notification content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of actionable notification content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Handles `keydown` event on this event.\n   * Escape will close the notification if `closeOnEscape` is true\n   */\n  @HostListener('keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeyDown = async (event: KeyboardEvent) => {\n    const { key } = event;\n    if (this.closeOnEscape && key === 'Escape') {\n      this.open = false;\n    }\n  };\n\n  @HostListener('shadowRoot:focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    const {\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n    const oldContains =\n      target !== this &&\n      (this.contains(target as Node) ||\n        (this.shadowRoot?.contains(target as Node) &&\n          target !== (startSentinelNode as Node) &&\n          target !== (endSentinelNode as Node)));\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (startSentinelNode as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This notification is open\n    // * Notification role attribute is set to 'alertdialog'\n    // * The viewport still has focus\n    // * Notification body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForActionableNotification } = this\n      .constructor as typeof CDSActionableNotification;\n    if (\n      open &&\n      this.getAttribute('role') === 'alertdialog' &&\n      relatedTarget &&\n      !(relatedTarget instanceof CDSActionableNotification) &&\n      oldContains &&\n      !currentContains\n    ) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n      // tabbable elements in Shadow root\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      const shadowElems = this.shadowRoot!.querySelectorAll(\n        selectorTabbableForActionableNotification\n      );\n      // tabbable elements in light DOM\n      const lightElems = this.querySelectorAll(\n        selectorTabbableForActionableNotification\n      );\n\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof CDSActionableNotification)._delay();\n        if (\n          !tryFocusElems(shadowElems as NodeListOf<HTMLElement>, true) &&\n          !tryFocusElems(lightElems as NodeListOf<HTMLElement>, true) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      } else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof CDSActionableNotification)._delay();\n        if (\n          !tryFocusElems(lightElems as NodeListOf<HTMLElement>) &&\n          !tryFocusElems(shadowElems as NodeListOf<HTMLElement>)\n        ) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alertdialog');\n    }\n    super.connectedCallback();\n  }\n\n  protected _renderIcon() {\n    const { kind, inline } = this;\n    const IconComponent = iconsForKinds[kind];\n    return !IconComponent\n      ? undefined\n      : iconLoader(IconComponent, {\n          class: `${prefix}--${inline ? 'inline' : 'toast'}-notification__icon`,\n        });\n  }\n\n  protected _renderText() {\n    const { caption, subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__text-wrapper\">\n        <div class=\"${prefix}--${type}-notification__content\">\n          <div class=\"${prefix}--${type}-notification__title\">\n            ${title}<slot name=\"title\"></slot>\n          </div>\n          <div class=\"${prefix}--${type}-notification__subtitle\">\n            ${subtitle}<slot name=\"subtitle\"></slot>\n          </div>\n          ${caption &&\n          html`<div class=\"${prefix}--${type}-notification__caption\">\n            ${caption}<slot name=\"caption\"></slot>\n          </div>`}\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The caption.\n   */\n  @property()\n  caption = '';\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n    const button = this.querySelector(\n      (this.constructor as typeof CDSActionableNotification)\n        .selectorActionButton\n    );\n    if (changedProperties.has('inline')) {\n      button?.setAttribute('kind', this.inline ? 'ghost' : 'tertiary');\n    }\n    if (changedProperties.has('lowContrast')) {\n      if (this.lowContrast) {\n        button?.setAttribute('low-contrast', 'true');\n      } else {\n        button?.removeAttribute('low-contrast');\n      }\n    }\n    if (changedProperties.has('hideCloseButton')) {\n      if (this.hideCloseButton) {\n        button?.setAttribute('hide-close-button', 'true');\n      } else {\n        button?.removeAttribute('hide-close-button');\n      }\n    }\n    if (changedProperties.has('hasFocus')) {\n      if (this.hasFocus) {\n        if (button) {\n          (button as CDSButton).updateComplete.then(() => {\n            (button as HTMLElement).focus();\n          });\n        } else {\n          this.focus();\n        }\n      }\n    }\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderIcon()} ${this._renderText()}\n      </div>\n      <slot name=\"action\"></slot>\n      ${this._renderButton()}\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * A selector that will return the action button element\n   */\n  static get selectorActionButton() {\n    return `${prefix}-actionable-notification-button`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSActionableNotification;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,gBAAgB;cACE;WACH;kBACO;cACJ;kBACI;YACN;CAC5B;AAED,MAAM,YACJ,KAAK,8BAA8B,KAAK;AAE1C,MAAM,YACJ,KAAK,8BAA8B,KAAK;;;;;;;;AAS1C,SAAS,cAAc,OAAgC,UAAU,OAAO;AACtE,KAAI,CAAC,QACH,MAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,EAAE,GAAG;EACrC,MAAM,OAAO,MAAM;AACnB,OAAK,OAAO;EAEZ,MAAM,SAAS,KAAK,cAAe;AACnC,MACE,WAAW,QACX,QAAQ,SAAS,KAAK,IACtB,QAAQ,YAAY,SAAS,KAAK,CAElC,QAAO;;KAIX,MAAK,IAAI,IAAI,MAAM,SAAS,GAAG,KAAK,GAAG,EAAE,GAAG;EAC1C,MAAM,OAAO,MAAM;AACnB,OAAK,OAAO;EAEZ,MAAM,SAAS,KAAK,cAAe;AACnC,MACE,WAAW,QACX,QAAQ,SAAS,KAAK,IACtB,QAAQ,YAAY,SAAS,KAAK,CAElC,QAAO;;AAIb,QAAO;;;;;;;;;;;;;AAcT,IAAA,4BAAA,MACM,kCAAkC,kBACtCA,4BACD,CAAC;;;;;;;gBAOS;2BAMW;uBAMJ;kBAML;wBAqBc,OAAO,UAAyB;GACvD,MAAM,EAAE,QAAQ;AAChB,OAAI,KAAK,iBAAiB,QAAQ,SAChC,MAAK,OAAO;;qBAOM,OAAO,EAAE,QAAQ,oBAAgC;GACrE,MAAM,EACJ,MACA,oBAAoB,mBACpB,kBAAkB,oBAChB;GACJ,MAAM,cACJ,WAAW,SACV,KAAK,SAAS,OAAe,IAC3B,KAAK,YAAY,SAAS,OAAe,IACxC,WAAY,qBACZ,WAAY;GAClB,MAAM,kBACJ,kBAAkB,SACjB,KAAK,SAAS,cAAsB,IAClC,KAAK,YAAY,SAAS,cAAsB,IAC/C,kBAAmB,qBACnB,kBAAmB;GAOzB,MAAM,EAAE,kBAAkB,8CAA8C,KACrE;AACH,OACE,QACA,KAAK,aAAa,OAAO,KAAK,iBAC9B,iBACA,EAAE,yBAAA,+BACF,eACA,CAAC,iBACD;IACA,MAAM,mBAAoB,OAAgB,wBACxC,cACD;IAGD,MAAM,cAAc,KAAK,WAAY,iBACnC,0CACD;IAED,MAAM,aAAa,KAAK,iBACtB,0CACD;AAED,QAAI,kBAAkB,qBAAqB,mBAAmB,WAAW;AACvE,WAAO,KAAK,YAAiD,QAAQ;AACrE,SACE,CAAC,cAAc,aAAwC,KAAK,IAC5D,CAAC,cAAc,YAAuC,KAAK,IAC3D,kBAAkB,KAElB,MAAK,OAAO;eAGd,kBAAkB,mBAClB,mBAAmB,WACnB;AACA,WAAO,KAAK,YAAiD,QAAQ;AACrE,SACE,CAAC,cAAc,WAAsC,IACrD,CAAC,cAAc,YAAuC,CAEtD,MAAK,OAAO;;;;iBAgDV;;CA1CV,oBAAoB;AAClB,MAAI,CAAC,KAAK,aAAa,OAAO,CAC5B,MAAK,aAAa,QAAQ,cAAc;AAE1C,QAAM,mBAAmB;;CAG3B,cAAwB;EACtB,MAAM,EAAE,MAAM,WAAW;EACzB,MAAM,gBAAgB,cAAc;AACpC,SAAO,CAAC,gBACJ,KAAA,IACA,WAAW,eAAe,EACxB,OAAO,QAAc,SAAS,WAAW,QAAQ,sBAClD,CAAC;;CAGR,cAAwB;EACtB,MAAM,EAAE,SAAS,UAAU,OAAO,OAAO,SAAS;AAClD,SAAO,IAAI;0BACY,IAAI,KAAK;4BACP,IAAI,KAAK;8BACP,IAAI,KAAK;cAC1B,MAAM;;8BAEW,IAAI,KAAK;cAC1B,SAAS;;YAEX,WACF,IAAI,eAAA,MAAsB,IAAI,KAAK;cAC/B,QAAQ;kBACJ;;;;;;CAahB,QAAQ,mBAAmB;AACzB,QAAM,QAAQ,kBAAkB;EAChC,MAAM,SAAS,KAAK,cACjB,KAAK,YACH,qBACJ;AACD,MAAI,kBAAkB,IAAI,SAAS,CACjC,SAAQ,aAAa,QAAQ,KAAK,SAAS,UAAU,WAAW;AAElE,MAAI,kBAAkB,IAAI,cAAc,CACtC,KAAI,KAAK,YACP,SAAQ,aAAa,gBAAgB,OAAO;MAE5C,SAAQ,gBAAgB,eAAe;AAG3C,MAAI,kBAAkB,IAAI,kBAAkB,CAC1C,KAAI,KAAK,gBACP,SAAQ,aAAa,qBAAqB,OAAO;MAEjD,SAAQ,gBAAgB,oBAAoB;AAGhD,MAAI,kBAAkB,IAAI,WAAW;OAC/B,KAAK,SACP,KAAI,OACD,QAAqB,eAAe,WAAW;AAC7C,WAAuB,OAAO;KAC/B;OAEF,MAAK,OAAO;;;CAMpB,SAAS;EACP,MAAM,EAAE,OAAO,SAAS;AACxB,SAAO,IAAI;;;uBAGS;;;0BAGG,IAAI,KAAK;UAC1B,KAAK,aAAa,CAAC,GAAG,KAAK,aAAa,CAAC;;;QAG3C,KAAK,eAAe,CAAC;;;uBAGL;;;;;;;;;CAUtB,OAAe,OAAO,KAAK,GAAG;AAC5B,SAAO,IAAI,SAAS,YAAY;AAC9B,cAAW,SAAS,GAAG;IACvB;;;;;CAMJ,WAAW,mBAAmB;AAC5B,SAAO;;;;;CAMT,WAAW,uBAAuB;AAChC,SAAO;;;gBAGOC;;;YAtPf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,0BAAA,WAAA,UAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;CAAuB,CAAC,CAAA,EAAA,0BAAA,WAAA,qBAAA,KAAA,EAAA;YAM3E,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAmB,CAAC,CAAA,EAAA,0BAAA,WAAA,iBAAA,KAAA,EAAA;YAMxE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAa,CAAC,CAAA,EAAA,0BAAA,WAAA,YAAA,KAAA,EAAA;YAMlE,MAAM,kBAAkB,CAAA,EAAA,0BAAA,WAAA,sBAAA,KAAA,EAAA;YAMxB,MAAM,gBAAgB,CAAA,EAAA,0BAAA,WAAA,oBAAA,KAAA,EAAA;YAOtB,aAAa,UAAU,CAAA,EAAA,0BAAA,WAAA,kBAAA,KAAA,EAAA;YAUvB,aAAa,sBAAsB,CAAA,EAAA,0BAAA,WAAA,eAAA,KAAA,EAAA;YAmHnC,UAAU,CAAA,EAAA,0BAAA,WAAA,WAAA,KAAA,EAAA;qEA3KZC,cAAc,8BAAoC,CAAA,EAAA,0BAAA;AAkQnD,IAAA,kCAAe"}
+{"version":3,"file":"actionable-notification.js","names":["CDSInlineNotification","styles","customElement"],"sources":["../../../src/components/notification/actionable-notification.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\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 */\nimport { html } from 'lit';\nimport CheckmarkFilled20 from '@carbon/icons/es/checkmark--filled/20.js';\nimport InformationFilled20 from '@carbon/icons/es/information--filled/20.js';\nimport InformationSquareFilled20 from '@carbon/icons/es/information--square--filled/20.js';\nimport WarningFilled20 from '@carbon/icons/es/warning--filled/20.js';\nimport WarningAltFilled20 from '@carbon/icons/es/warning--alt--filled/20.js';\nimport ErrorFilled20 from '@carbon/icons/es/error--filled/20.js';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix, selectorTabbable } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { NOTIFICATION_TYPE, NOTIFICATION_KIND } from './defs';\nimport CDSInlineNotification from './inline-notification';\nimport styles from './actionable-notification.scss?lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSButton from '../button/button';\n\n/**\n * The default icons, keyed by notification kind.\n */\nexport const iconsForKinds = {\n  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n  [NOTIFICATION_KIND.INFO]: InformationFilled20,\n  [NOTIFICATION_KIND.INFO_SQUARE]: InformationSquareFilled20,\n  [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n  [NOTIFICATION_KIND.WARNING_ALT]: WarningAltFilled20,\n  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse = false) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      const active = elem.ownerDocument!.activeElement;\n      if (\n        active === elem ||\n        active?.contains(elem) ||\n        active?.shadowRoot?.contains(elem)\n      ) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      const active = elem.ownerDocument!.activeElement;\n      if (\n        active === elem ||\n        active?.contains(elem) ||\n        active?.shadowRoot?.contains(elem)\n      ) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Actionable notification.\n *\n * @element cds-custom-actionable-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires cds-custom-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires cds-custom-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-actionable-notification`)\nclass CDSActionableNotification extends HostListenerMixin(\n  CDSInlineNotification\n) {\n  protected _type = NOTIFICATION_TYPE.ACTIONABLE;\n\n  /**\n   * Inline notification type.\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * Pass in the action button label that will be rendered within the ActionableNotification.\n   */\n  @property({ type: String, reflect: true, attribute: 'action-button-label' })\n  actionButtonLabel = '';\n\n  /**\n   * Specify if pressing the escape key should close notifications\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'close-on-escape' })\n  closeOnEscape = true;\n\n  /**\n   * Specify if focus should be moved to the component when the notification contains actions\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-focus' })\n  hasFocus = true;\n\n  /**\n   * Node to track focus going outside of actionable notification content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of actionable notification content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Handles `keydown` event on this event.\n   * Escape will close the notification if `closeOnEscape` is true\n   */\n  @HostListener('keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeyDown = async (event: KeyboardEvent) => {\n    const { key } = event;\n    if (this.closeOnEscape && key === 'Escape') {\n      this.open = false;\n    }\n  };\n\n  @HostListener('shadowRoot:focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    const {\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n    const oldContains =\n      target !== this &&\n      (this.contains(target as Node) ||\n        (this.shadowRoot?.contains(target as Node) &&\n          target !== (startSentinelNode as Node) &&\n          target !== (endSentinelNode as Node)));\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (startSentinelNode as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This notification is open\n    // * Notification role attribute is set to 'alertdialog'\n    // * The viewport still has focus\n    // * Notification body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForActionableNotification } = this\n      .constructor as typeof CDSActionableNotification;\n    if (\n      open &&\n      this.getAttribute('role') === 'alertdialog' &&\n      relatedTarget &&\n      !(relatedTarget instanceof CDSActionableNotification) &&\n      oldContains &&\n      !currentContains\n    ) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n      // tabbable elements in Shadow root\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      const shadowElems = this.shadowRoot!.querySelectorAll(\n        selectorTabbableForActionableNotification\n      );\n      // tabbable elements in light DOM\n      const lightElems = this.querySelectorAll(\n        selectorTabbableForActionableNotification\n      );\n\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof CDSActionableNotification)._delay();\n        if (\n          !tryFocusElems(shadowElems as NodeListOf<HTMLElement>, true) &&\n          !tryFocusElems(lightElems as NodeListOf<HTMLElement>, true) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      } else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof CDSActionableNotification)._delay();\n        if (\n          !tryFocusElems(lightElems as NodeListOf<HTMLElement>) &&\n          !tryFocusElems(shadowElems as NodeListOf<HTMLElement>)\n        ) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alertdialog');\n    }\n    super.connectedCallback();\n  }\n\n  protected _renderIcon() {\n    const { kind, inline } = this;\n    const IconComponent = iconsForKinds[kind];\n    return !IconComponent\n      ? undefined\n      : iconLoader(IconComponent, {\n          class: `${prefix}--${inline ? 'inline' : 'toast'}-notification__icon`,\n        });\n  }\n\n  protected _renderText() {\n    const { caption, subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__text-wrapper\">\n        <div class=\"${prefix}--${type}-notification__content\">\n          <div class=\"${prefix}--${type}-notification__title\">\n            ${title}<slot name=\"title\"></slot>\n          </div>\n          <div class=\"${prefix}--${type}-notification__subtitle\">\n            ${subtitle}<slot name=\"subtitle\"></slot>\n          </div>\n          ${caption &&\n          html`<div class=\"${prefix}--${type}-notification__caption\">\n            ${caption}<slot name=\"caption\"></slot>\n          </div>`}\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The caption.\n   */\n  @property()\n  caption = '';\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n    const button = this.querySelector(\n      (this.constructor as typeof CDSActionableNotification)\n        .selectorActionButton\n    );\n    if (changedProperties.has('inline')) {\n      button?.setAttribute('kind', this.inline ? 'ghost' : 'tertiary');\n    }\n    if (changedProperties.has('lowContrast')) {\n      if (this.lowContrast) {\n        button?.setAttribute('low-contrast', 'true');\n      } else {\n        button?.removeAttribute('low-contrast');\n      }\n    }\n    if (changedProperties.has('hideCloseButton')) {\n      if (this.hideCloseButton) {\n        button?.setAttribute('hide-close-button', 'true');\n      } else {\n        button?.removeAttribute('hide-close-button');\n      }\n    }\n    if (changedProperties.has('hasFocus')) {\n      if (this.hasFocus) {\n        if (button) {\n          (button as CDSButton).updateComplete.then(() => {\n            (button as HTMLElement).focus();\n          });\n        } else {\n          this.focus();\n        }\n      }\n    }\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderIcon()} ${this._renderText()}\n      </div>\n      <slot name=\"action\"></slot>\n      ${this._renderButton()}\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * A selector that will return the action button element\n   */\n  static get selectorActionButton() {\n    return `${prefix}-actionable-notification-button`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSActionableNotification;\n"],"mappings":"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"}