@govtechsg/sgds-web-component 3.29.1-rc.1 → 3.29.1-rc.3

package/components/Modal/sgds-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-modal.js","names":["headerStyles","svgStyles","modalStyle"],"sources":["../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n *\n * @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n *\n * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key. This event is cancelable; use `event.preventDefault()` to prevent the modal from closing. `event.detail.source` indicates the trigger source: 'close-button', 'overlay', or 'keyboard'.\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n *\n */\nexport class SgdsModal extends SgdsElement {\n  static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n  /**@internal */\n  @query(\".modal\") dialog: HTMLElement;\n  /**@internal */\n  @query(\".modal-panel\") panel: HTMLElement;\n  /**@internal */\n  @query(\".modal-overlay\") overlay: HTMLElement;\n  /**@internal */\n  @query(\".modal-title\") heading: HTMLElement;\n  /**@internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /**@internal */\n  private modal: Modal;\n  /**@internal */\n  private originalTrigger: HTMLElement | null;\n  private _resizeHandler: () => void;\n\n  /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\" = \"md\";\n\n  /** Used only for SSR to indicate the presence of the `footer` slot. */\n  @property({ type: Boolean }) hasFooterSlot = false;\n\n  /** Removes the close button in the modal header. */\n  @property({ type: Boolean, reflect: true }) noCloseButton = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n    this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._onWindowResize();\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  updated() {\n    if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\n  }\n\n  private _debounce(func: (...args: any[]) => void, wait: number) {\n    let timeout: number;\n    return (...args: any[]) => {\n      clearTimeout(timeout);\n      timeout = window.setTimeout(() => func(...args), wait);\n    };\n  }\n\n  /** Handle the window resize event. */\n  private _onWindowResize() {\n    const panel = this.panel.getBoundingClientRect();\n    const panelWidth = panel.width;\n    const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n    if (!this.panel) return;\n\n    if (buttonElements.length <= 1) return;\n\n    if (panelWidth < SM_BREAKPOINT || (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = true;\n      });\n    } else {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = false;\n      });\n    }\n  }\n\n  /**  Add the resize event listener. */\n  private _addResizeListener() {\n    window.addEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Remove the resize event listener. */\n  private _removeResizeListener() {\n    window.removeEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Shows the dialog. */\n  public async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hides the dialog */\n  public async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const sgdsRequestClose = this.emit(\"sgds-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (sgdsRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"modal.denyClose\");\n      animateTo(this.panel, animation.keyframes);\n      return;\n    }\n\n    this.hide();\n  }\n\n  addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  }\n\n  private _overlayClickHandler() {\n    if (this.size === \"fullscreen\") {\n      return;\n    }\n\n    this.requestClose(\"overlay\");\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit(\"sgds-show\");\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      const panelAnimation = getAnimation(this, \"modal.show\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n        ]));\n\n      this.emit(\"sgds-after-show\");\n\n      // Add focus on modal heading after opening it\n      this.heading.focus();\n\n      // Add resize listener only when the modal is shown\n      this._addResizeListener();\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, \"modal.hide\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.hide\");\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n            this.overlay.hidden = true;\n          }),\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n            this.panel.hidden = true;\n          })\n        ]));\n\n      this.dialog.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      unlockBodyScrolling(this);\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === \"function\") {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit(\"sgds-after-hide\");\n\n      // Remove resize listener when the modal is hidden\n      this._removeResizeListener();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          modal: true,\n          show: this.open,\n          \"has-footer\": this.hasFooterSlot\n        })}\n      >\n        <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n        <div\n          class=\"modal-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-labelledby=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-content\">\n              ${\n                !this.noCloseButton\n                  ? html`<sgds-close-button\n                      class=\"modal-header__close\"\n                      @click=\"${() => this.requestClose(\"close-button\")}\"\n                      aria-label=\"close modal\"\n                    ></sgds-close-button>`\n                  : nothing\n              }\n            <div class=\"modal-header\">\n              <div class=\"modal-header__title-description\">\n                <div id=\"title\"><slot class=\"modal-title\" name=\"title\"></slot></div>\n                <slot name=\"description\"></slot>\n              </div>\n            </div>\n            <div class=\"modal-body\" tabindex=\"0\">\n              <slot></slot>\n            </div>\n          </div class=\"modal-content\">\n          <div class=\"modal-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n  keyframes: [\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n    { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n  keyframes: [\n    { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n  keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-modal.js","names":["headerStyles","svgStyles","modalStyle"],"sources":["../../../src/components/Modal/sgds-modal.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport { animateTo, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport Modal from \"../../utils/modal\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { lockBodyScrolling, unlockBodyScrolling } from \"../../utils/scroll\";\nimport { SM_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport SgdsButton from \"../Button/sgds-button\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport modalStyle from \"./modal.css\";\nimport headerStyles from \"../../styles/header-class.css\";\nimport svgStyles from \"../../styles/svg.css\";\n/**\n * @summary The modal component inform users about a specific task and may contain critical information which users then have to make a decision.\n *\n * @slot default - The content of the Modal's body.\n * @slot title - The title of the Modal.\n * @slot description - The description of the Modal.\n * @slot footer - The content of the Modal's footer, typically used to pass in buttons for call to action.\n *\n * @event sgds-close - Emitted when the modal is called to close via mouseclick of close button, overlay or via keyboard esc key. This event is cancelable; use `event.preventDefault()` to prevent the modal from closing. `event.detail.source` indicates the trigger source: 'close-button', 'overlay', or 'keyboard'.\n * @event sgds-show - Emitted when the modal opens\n * @event sgds-hide - Emitted when the modal closes\n * @event sgds-after-show - Emitted after modal opens and the animations has completed\n * @event sgds-after-hide - Emitted after modal closes and the animations has completed\n *\n */\nexport class SgdsModal extends SgdsElement {\n  static styles = [...SgdsElement.styles, headerStyles, svgStyles, modalStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton\n  };\n  /**@internal */\n  @query(\".modal\") dialog: HTMLElement;\n  /**@internal */\n  @query(\".modal-panel\") panel: HTMLElement;\n  /**@internal */\n  @query(\".modal-overlay\") overlay: HTMLElement;\n  /**@internal */\n  @query(\".modal-title\") heading: HTMLElement;\n  /**@internal */\n  private readonly hasSlotController = new HasSlotController(this, \"footer\");\n  /**@internal */\n  private modal: Modal;\n  /**@internal */\n  private originalTrigger: HTMLElement | null;\n  private _resizeHandler: () => void;\n\n  /**Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Removes the default animation when opening and closing of modal */\n  @property({ type: Boolean, reflect: true }) noAnimation = false;\n\n  /** Specifies a small, medium, large or fullscreen modal, the size is medium by default. */\n  @property({ reflect: true }) size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"fullscreen\" = \"md\";\n\n  /** Used only for SSR to indicate the presence of the `footer` slot. */\n  @property({ type: Boolean }) hasFooterSlot = false;\n\n  /** Removes the close button in the modal header. */\n  @property({ type: Boolean, reflect: true }) noCloseButton = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.modal = new Modal(this);\n    this._resizeHandler = this._debounce(this._onWindowResize.bind(this), 200);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._removeResizeListener();\n    unlockBodyScrolling(this);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._onWindowResize();\n    this.dialog.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n      this.modal.activate();\n      lockBodyScrolling(this);\n    }\n  }\n\n  updated() {\n    if (!this.hasFooterSlot) this.hasFooterSlot = this.hasSlotController.test(\"footer\");\n  }\n\n  private _debounce(func: (...args: any[]) => void, wait: number) {\n    let timeout: number;\n    return (...args: any[]) => {\n      clearTimeout(timeout);\n      timeout = window.setTimeout(() => func(...args), wait);\n    };\n  }\n\n  /** Handle the window resize event. */\n  private _onWindowResize() {\n    const panel = this.panel.getBoundingClientRect();\n    const panelWidth = panel.width;\n    const buttonElements = this.querySelectorAll(\"sgds-button[slot='footer']\");\n\n    if (!this.panel) return;\n\n    if (buttonElements.length <= 1) return;\n\n    if (panelWidth < SM_BREAKPOINT || (this.size === \"fullscreen\" && panelWidth < MD_BREAKPOINT)) {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = true;\n      });\n    } else {\n      buttonElements.forEach(buttonElement => {\n        const button = buttonElement as SgdsButton;\n        button.fullWidth = false;\n      });\n    }\n  }\n\n  /**  Add the resize event listener. */\n  private _addResizeListener() {\n    window.addEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Remove the resize event listener. */\n  private _removeResizeListener() {\n    window.removeEventListener(\"resize\", this._resizeHandler);\n  }\n\n  /** Shows the dialog. */\n  public async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hides the dialog */\n  public async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private requestClose(source: \"close-button\" | \"keyboard\" | \"overlay\") {\n    const sgdsRequestClose = this.emit(\"sgds-close\", {\n      cancelable: true,\n      detail: { source }\n    });\n\n    if (sgdsRequestClose.defaultPrevented) {\n      const animation = getAnimation(this, \"modal.denyClose\");\n      animateTo(this.panel, animation.keyframes);\n      return;\n    }\n\n    this.hide();\n  }\n\n  addOpenListeners() {\n    document.addEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  removeOpenListeners() {\n    document.removeEventListener(\"keydown\", this.handleDocumentKeyDown);\n  }\n\n  handleDocumentKeyDown(event: KeyboardEvent) {\n    if (this.open && event.key === \"Escape\") {\n      event.stopPropagation();\n      this.requestClose(\"keyboard\");\n    }\n  }\n\n  private _overlayClickHandler() {\n    if (this.size === \"fullscreen\") {\n      return;\n    }\n\n    this.requestClose(\"overlay\");\n  }\n\n  @watch(\"open\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit(\"sgds-show\");\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n      this.modal.activate();\n\n      lockBodyScrolling(this);\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      this.dialog.hidden = false;\n\n      const panelAnimation = getAnimation(this, \"modal.show\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.show\");\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options),\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options)\n        ]));\n\n      this.emit(\"sgds-after-show\");\n\n      // Add focus on modal heading after opening it\n      this.heading.focus();\n\n      // Add resize listener only when the modal is shown\n      this._addResizeListener();\n    } else {\n      // Hide\n      this.emit(\"sgds-hide\");\n      this.removeOpenListeners();\n      this.modal.deactivate();\n\n      await Promise.all([stopAnimations(this.dialog), stopAnimations(this.overlay)]);\n      const panelAnimation = getAnimation(this, \"modal.hide\");\n      const overlayAnimation = getAnimation(this, \"modal.overlay.hide\");\n\n      // Animate the overlay and the panel at the same time. Because animation durations might be different, we need to\n      // hide each one individually when the animation finishes, otherwise the first one that finishes will reappear\n      // unexpectedly. We'll unhide them after all animations have completed.\n      !this.noAnimation &&\n        (await Promise.all([\n          animateTo(this.overlay, overlayAnimation.keyframes, overlayAnimation.options).then(() => {\n            this.overlay.hidden = true;\n          }),\n          animateTo(this.panel, panelAnimation.keyframes, panelAnimation.options).then(() => {\n            this.panel.hidden = true;\n          })\n        ]));\n\n      this.dialog.hidden = true;\n\n      // Now that the dialog is hidden, restore the overlay and panel for next time\n      this.overlay.hidden = false;\n      this.panel.hidden = false;\n\n      unlockBodyScrolling(this);\n\n      // Restore focus to the original trigger\n      const trigger = this.originalTrigger;\n      if (typeof trigger?.focus === \"function\") {\n        setTimeout(() => trigger.focus());\n      }\n\n      this.emit(\"sgds-after-hide\");\n\n      // Remove resize listener when the modal is hidden\n      this._removeResizeListener();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          modal: true,\n          show: this.open,\n          \"has-footer\": this.hasFooterSlot\n        })}\n      >\n        <div class=\"modal-overlay\" @click=${this._overlayClickHandler}></div>\n\n        <div\n          class=\"modal-panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden=${this.open ? \"false\" : \"true\"}\n          aria-labelledby=\"title\"\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-content\">\n              ${\n                !this.noCloseButton\n                  ? html`<sgds-close-button\n                      class=\"modal-header__close\"\n                      @click=\"${() => this.requestClose(\"close-button\")}\"\n                      aria-label=\"close modal\"\n                    ></sgds-close-button>`\n                  : nothing\n              }\n            <div class=\"modal-header\">\n              <div class=\"modal-header__title-description\">\n                <div id=\"title\"><slot class=\"modal-title\" name=\"title\"></slot></div>\n                <slot name=\"description\"></slot>\n              </div>\n            </div>\n            <section class=\"modal-body\" tabindex=\"0\" aria-label=\"Modal body content\">\n              <slot></slot>\n            </section>\n          </div class=\"modal-content\">\n          <div class=\"modal-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation(\"modal.show\", {\n  keyframes: [\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" },\n    { opacity: 1, transform: \"scale(1) translate(0, 0%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.hide\", {\n  keyframes: [\n    { opacity: 1, transform: \"scale(1) translate(0, 0)\" },\n    { opacity: 0, transform: \"scale(1) translate(0, -100%)\" }\n  ],\n  options: { duration: 400, easing: \"ease\" }\n});\n\nsetDefaultAnimation(\"modal.denyClose\", {\n  keyframes: [{ transform: \"scale(1)\" }, { transform: \"scale(1.02)\" }, { transform: \"scale(1)\" }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.show\", {\n  keyframes: [{ opacity: 0 }, { opacity: 1 }],\n  options: { duration: 400 }\n});\n\nsetDefaultAnimation(\"modal.overlay.hide\", {\n  keyframes: [{ opacity: 1 }, { opacity: 0 }],\n  options: { duration: 400 }\n});\n\nexport default SgdsModal;\n"],"mappings":"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"}

package/components/index.umd.min.js

@@ -2627,12 +2627,12 @@ let n=e._$AN;if(n===void 0)return!1;for(let e of n)e._$AO?.(t,!1),Fg(e,t);return
                 </div>`:b}
           </div>
           <slot @slotchange=${this._handleSlotChange}></slot>
-        `}};E([C()],Qg.prototype,`_breakpointReached`,void 0),E([C()],Qg.prototype,`_mobileMenuOpen`,void 0),E([C()],Qg.prototype,`_hasDropdownItems`,void 0),E([T({flatten:!0})],Qg.prototype,`_defaultSlotElements`,void 0),E([S({type:String,reflect:!0})],Qg.prototype,`label`,void 0),E([S({type:String,reflect:!0})],Qg.prototype,`secondaryText`,void 0),E([S({type:Boolean})],Qg.prototype,`disabled`,void 0),E([S({type:String})],Qg.prototype,`ariaLabel`,void 0),E([S({type:String})],Qg.prototype,`close`,void 0);var $g=class extends Qg{constructor(...e){super(...e),this._breakpointReached=!0}};E([um({context:Cm,subscribe:!0}),C()],$g.prototype,`_breakpointReached`,void 0),x();var e_=u`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=accent]) .badge{background-color:var(--sgds-accent-surface-default)}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=cyan]) .badge{background-color:var(--sgds-cyan-surface-default)}:host([variant=purple]) .badge{background-color:var(--sgds-purple-surface-default)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=white]) .badge{background-color:var(--sgds-surface-fixed-light);color:var(--sgds-color-fixed-dark)}:host([variant=accent][outlined]) .badge{background-color:var(--sgds-accent-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);color:var(--sgds-accent-color-fixed-dark)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);color:var(--sgds-success-color-fixed-dark)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);color:var(--sgds-danger-color-fixed-dark)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);color:var(--sgds-warning-color-fixed-dark)}:host([variant=cyan][outlined]) .badge{background-color:var(--sgds-cyan-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);color:var(--sgds-cyan-color-fixed-dark)}:host([variant=purple][outlined]) .badge{background-color:var(--sgds-purple-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);color:var(--sgds-purple-color-fixed-dark)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);color:var(--sgds-color-fixed-dark)}:host([variant=white][outlined]) .badge{background-color:var(--sgds-surface-fixed-light);border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);color:var(--sgds-color-fixed-dark)}sgds-tooltip{display:block;max-width:100%}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-24,24px);justify-content:center;line-height:var(--sgds-line-height-3-xs);max-width:var(--sgds-dimension-192,192px);min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);color:var(--sgds-primary-color-fixed-dark)}.badge.full-width{max-width:100%}.badge-label{overflow:hidden;padding:var(--sgds-padding-none) var(--sgds-padding-3-xs);text-overflow:ellipsis;white-space:nowrap}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;margin:inherit!important}`;x();var t_=u`:host{display:contents}.tooltip-placeholder{display:inline-block;max-width:100%}.tooltip{word-wrap:break-word;background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);display:block;font-size:var(--sgds-font-size-label-sm);line-break:auto;max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm);text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:var(--sgds-z-index-overlay)}div{max-width:fit-content}`;x();var n_=class extends D{constructor(...e){super(...e),this._myTooltip=Hg(),this._tooltipBubble=Hg(),this.content=``,this.placement=`top`,this.trigger=`hover focus`,this.open=!1,this._handleClickOutOfElement=e=>{this.open&&(e.composedPath().includes(this)||this.hide())}}static{this.styles=[...D.styles,t_]}connectedCallback(){super.connectedCallback(),this.trigger.includes(`click`)&&document.addEventListener(`click`,this._handleClickOutOfElement)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this._handleClickOutOfElement),this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0)}firstUpdated(e){super.firstUpdated(e),this._tooltipTargetElements.forEach(e=>{e.setAttribute(`data-sgds-tooltip`,this.content),this.trigger.includes(`hover`)&&(e.addEventListener(`mouseenter`,()=>this.show()),e.addEventListener(`mouseleave`,()=>this.hide())),this.trigger.includes(`focus`)&&(e.addEventListener(`focus`,()=>this.show()),e.addEventListener(`blur`,()=>this.hide())),this.trigger===`click`&&e.addEventListener(`click`,()=>this.toggle())})}_handleSlotChange(){this._tooltipTargetElements.forEach(e=>e.setAttribute(`data-sgds-tooltip`,this.content))}async updateFloatingPosition(){if(!this._myTooltip.value||!this._tooltipBubble.value)return;let{x:e,y:t,placement:n,strategy:r,middlewareData:i}=await wg(this._tooltipTargetElements[0],this._tooltipBubble.value,{strategy:`fixed`,placement:this.placement,middleware:[yg(8),xg(),bg(),Cg()]});this._tooltipBubble.value.setAttribute(`data-placement`,n),Object.assign(this._tooltipBubble.value.style,{position:r,left:`${e}px`,top:`${t}px`});let{referenceHidden:a,escaped:o}=i.hide||{};a||o?this._tooltipBubble.value.style.visibility=`hidden`:this._tooltipBubble.value.style.visibility=`visible`}async show(){this.open||(this.open=!0,this.emit(`sgds-show`),await this.updateComplete,await this.updateFloatingPosition(),this._myTooltip.value&&this._tooltipBubble.value&&(this._cleanupAutoUpdate=vg(this._tooltipTargetElements[0],this._tooltipBubble.value,()=>this.updateFloatingPosition())),this.emit(`sgds-after-show`))}hide(){this.open&&(this.emit(`sgds-hide`),this.open=!1,this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0),setTimeout(()=>this.emit(`sgds-after-hide`),0))}toggle(){this.open?this.hide():this.show()}render(){return y`
+        `}};E([C()],Qg.prototype,`_breakpointReached`,void 0),E([C()],Qg.prototype,`_mobileMenuOpen`,void 0),E([C()],Qg.prototype,`_hasDropdownItems`,void 0),E([T({flatten:!0})],Qg.prototype,`_defaultSlotElements`,void 0),E([S({type:String,reflect:!0})],Qg.prototype,`label`,void 0),E([S({type:String,reflect:!0})],Qg.prototype,`secondaryText`,void 0),E([S({type:Boolean})],Qg.prototype,`disabled`,void 0),E([S({type:String})],Qg.prototype,`ariaLabel`,void 0),E([S({type:String})],Qg.prototype,`close`,void 0);var $g=class extends Qg{constructor(...e){super(...e),this._breakpointReached=!0}};E([um({context:Cm,subscribe:!0}),C()],$g.prototype,`_breakpointReached`,void 0),x();var e_=u`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=accent]) .badge{background-color:var(--sgds-accent-surface-default)}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=cyan]) .badge{background-color:var(--sgds-cyan-surface-default)}:host([variant=purple]) .badge{background-color:var(--sgds-purple-surface-default)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=white]) .badge{background-color:var(--sgds-surface-fixed-light);color:var(--sgds-color-fixed-dark)}:host([variant=accent][outlined]) .badge{background-color:var(--sgds-accent-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);color:var(--sgds-accent-color-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);color:var(--sgds-success-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);color:var(--sgds-danger-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);color:var(--sgds-warning-color-default)}:host([variant=cyan][outlined]) .badge{background-color:var(--sgds-cyan-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);color:var(--sgds-cyan-color-default)}:host([variant=purple][outlined]) .badge{background-color:var(--sgds-purple-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);color:var(--sgds-purple-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);color:var(--sgds-color-subtle)}:host([variant=white][outlined]) .badge{background-color:var(--sgds-surface-fixed-light);border:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);color:var(--sgds-color-fixed-dark)}sgds-tooltip{display:block;max-width:100%}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-24,24px);justify-content:center;line-height:var(--sgds-line-height-3-xs);max-width:var(--sgds-dimension-192,192px);min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);color:var(--sgds-primary-color-default)}.badge.full-width{max-width:100%}.badge-label{overflow:hidden;padding:var(--sgds-padding-none) var(--sgds-padding-3-xs);text-overflow:ellipsis;white-space:nowrap}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;margin:inherit!important}`;x();var t_=u`:host{display:contents}.tooltip-placeholder{display:inline-block;max-width:100%}.tooltip{word-wrap:break-word;background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);display:block;font-size:var(--sgds-font-size-label-sm);line-break:auto;max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm);text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:var(--sgds-z-index-overlay)}div{max-width:fit-content}`;x();var n_=class extends D{constructor(...e){super(...e),this._myTooltip=Hg(),this._tooltipBubble=Hg(),this.content=``,this.placement=`top`,this.trigger=`hover focus`,this.open=!1,this._handleClickOutOfElement=e=>{this.open&&(e.composedPath().includes(this)||this.hide())}}static{this.styles=[...D.styles,t_]}connectedCallback(){super.connectedCallback(),this.trigger.includes(`click`)&&document.addEventListener(`click`,this._handleClickOutOfElement)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this._handleClickOutOfElement),this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0)}firstUpdated(e){super.firstUpdated(e),this._tooltipTargetElements.forEach(e=>{e.setAttribute(`data-sgds-tooltip`,this.content),this.trigger.includes(`hover`)&&(e.addEventListener(`mouseenter`,()=>this.show()),e.addEventListener(`mouseleave`,()=>this.hide())),this.trigger.includes(`focus`)&&(e.addEventListener(`focus`,()=>this.show()),e.addEventListener(`blur`,()=>this.hide())),this.trigger===`click`&&e.addEventListener(`click`,()=>this.toggle())})}_handleSlotChange(){this._tooltipTargetElements.forEach(e=>e.setAttribute(`data-sgds-tooltip`,this.content))}async updateFloatingPosition(){if(!this._myTooltip.value||!this._tooltipBubble.value)return;let{x:e,y:t,placement:n,strategy:r,middlewareData:i}=await wg(this._tooltipTargetElements[0],this._tooltipBubble.value,{strategy:`fixed`,placement:this.placement,middleware:[yg(8),xg(),bg(),Cg()]});this._tooltipBubble.value.setAttribute(`data-placement`,n),Object.assign(this._tooltipBubble.value.style,{position:r,left:`${e}px`,top:`${t}px`});let{referenceHidden:a,escaped:o}=i.hide||{};a||o?this._tooltipBubble.value.style.visibility=`hidden`:this._tooltipBubble.value.style.visibility=`visible`}async show(){this.open||(this.open=!0,this.emit(`sgds-show`),await this.updateComplete,await this.updateFloatingPosition(),this._myTooltip.value&&this._tooltipBubble.value&&(this._cleanupAutoUpdate=vg(this._tooltipTargetElements[0],this._tooltipBubble.value,()=>this.updateFloatingPosition())),this.emit(`sgds-after-show`))}hide(){this.open&&(this.emit(`sgds-hide`),this.open=!1,this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0),setTimeout(()=>this.emit(`sgds-after-hide`),0))}toggle(){this.open?this.hide():this.show()}render(){return y`
       <div ${Gg(this._myTooltip)} class="tooltip-placeholder">
         <slot @slotchange=${()=>this._handleSlotChange()}></slot>
         ${this.open?y`<div ${Gg(this._tooltipBubble)} class="tooltip" role="tooltip">${this.content}</div>`:null}
       </div>
-    `}};E([S({type:String})],n_.prototype,`content`,void 0),E([S({type:String})],n_.prototype,`placement`,void 0),E([S({type:String})],n_.prototype,`trigger`,void 0),E([C()],n_.prototype,`open`,void 0),E([T()],n_.prototype,`_tooltipTargetElements`,void 0),x();var r_=class extends D{constructor(...e){super(...e),this.show=!1,this.variant=`primary`,this.outlined=!1,this.dismissible=!1,this.fullWidth=!1,this.truncated=!1,this.text=``}static{this.styles=[...D.styles,e_]}static{this.dependencies={"sgds-close-button":kt,"sgds-tooltip":n_}}close(){this.show=!1}_handleShowChange(){if(this.show){if(this.emit(`sgds-show`,{cancelable:!0}).defaultPrevented){this.show=!1;return}this.emit(`sgds-after-show`)}else{if(this.emit(`sgds-hide`,{cancelable:!0}).defaultPrevented){this.show=!0;return}this.emit(`sgds-after-hide`)}}_handleTruncation(){let e=this.shadowRoot?.querySelector(`.badge-label`);e&&(this.truncated=e.scrollWidth>e.clientWidth)}_handleLabelSlotChange(e){this.text=Sm(e.target)}_renderBadge(){let e=this.outlined||this.variant===`warning`||this.variant===`white`;return y`<div
+    `}};E([S({type:String})],n_.prototype,`content`,void 0),E([S({type:String})],n_.prototype,`placement`,void 0),E([S({type:String})],n_.prototype,`trigger`,void 0),E([C()],n_.prototype,`open`,void 0),E([T()],n_.prototype,`_tooltipTargetElements`,void 0),x();var r_=class extends D{constructor(...e){super(...e),this.show=!1,this.variant=`primary`,this.outlined=!1,this.dismissible=!1,this.fullWidth=!1,this.truncated=!1,this.text=``}static{this.styles=[...D.styles,e_]}static{this.dependencies={"sgds-close-button":kt,"sgds-tooltip":n_}}close(){this.show=!1}_handleShowChange(){if(this.show){if(this.emit(`sgds-show`,{cancelable:!0}).defaultPrevented){this.show=!1;return}this.emit(`sgds-after-show`)}else{if(this.emit(`sgds-hide`,{cancelable:!0}).defaultPrevented){this.show=!0;return}this.emit(`sgds-after-hide`)}}_handleTruncation(){let e=this.shadowRoot?.querySelector(`.badge-label`);e&&(this.truncated=e.scrollWidth>e.clientWidth)}_handleLabelSlotChange(e){this.text=Sm(e.target)}get _closeButtonTone(){return this.variant===`white`?`fixed-dark`:this.outlined?`default`:this.variant===`warning`?`fixed-dark`:`fixed-light`}_renderBadge(){return y`<div
       class="  
           ${O({"badge-dismissible":this.dismissible,badge:!0,outlined:this.outlined,"full-width":this.fullWidth})}"
       aria-hidden=${this.show?`false`:`true`}
@@ -2647,7 +2647,7 @@ let n=e._$AN;if(n===void 0)return!1;for(let e of n)e._$AO?.(t,!1),Fg(e,t);return
             size="sm"
             aria-label="close the badge"
             @click=${this.close}
-            tone=${e?`fixed-dark`:`fixed-light`}
+            tone=${this._closeButtonTone}
           ></sgds-close-button>`:b}
     </div>`}render(){return this.dismissible&&this.show||!this.dismissible?this.truncated?y`<sgds-tooltip content=${this.text} @sgds-hide=${e=>e.stopPropagation()}
             >${this._renderBadge()}</sgds-tooltip
@@ -3125,7 +3125,7 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
       :host {
         display: block;
       }
-    `]}static{this.dependencies={"sgds-pagination":G_,"sgds-data-table-cell":K_,"sgds-data-table-head":K,"sgds-skeleton":Y_}}connectedCallback(){super.connectedCallback()}_isRowChecked(e){return e.checked||e.checkbox?.checked===!0}_updateHeaderCheckbox(){let e=this.tableRows.filter(e=>this._isRowChecked(e)).length,t=e===this.tableRows.length&&e>0;this.headerRows.forEach(n=>{n.checked=t,n.checkbox&&(n.checkbox.checked=t,n.checkbox.indeterminate=e>0&&!t)})}async _syncHeaderCheckboxAfterRender(){if(!this.multiSelect||this.headerRows.length===0)return;let e=[...this.headerRows,...this.tableRows];await Promise.all(e.map(e=>e.updateComplete)),this._updateHeaderCheckbox()}_emitRowSelect(){let e=this.tableRows.filter(e=>this._isRowChecked(e)).map(e=>this._getRowData(e));this.emit(`sgds-row-select`,{detail:{selected:e}})}_attachRowListener(e){let t=this._rowHandlers.get(e);t&&e.removeEventListener(`i-sgds-change`,t);let n=t=>{let{checked:n}=t.detail;this.headerRows.includes(e)?this.tableRows.forEach(e=>{e.checked=n,e.checkbox&&(e.checkbox.checked=n)}):(e.checked=n,this._updateHeaderCheckbox()),this._emitRowSelect()};this._rowHandlers.set(e,n),e.addEventListener(`i-sgds-change`,n)}_configureRows(){let e=this.tableRows.some(e=>e.expand),t=this.tableRows.length>0;this.headerRows.forEach(n=>{n.showCheckbox=this.multiSelect,n.showExpandPlaceholder=e,n.hasDataRows=t,this.multiSelect&&this._attachRowListener(n)}),this.tableRows.forEach(t=>{t.showCheckbox=this.multiSelect,t.showExpandPlaceholder=!t.expand&&e,this.multiSelect&&this._attachRowListener(t)}),this.multiSelect&&this._syncHeaderCheckboxAfterRender(),this._applyColumnAlignment()}_applyColumnAlignment(){let e=this._headerCells.reduce((e,t)=>{let n=Number(t.colSpan)>0?Number(t.colSpan):1,r=t.textAlign??`left`;for(let t=0;t<n;t++)e.push(r);return e},[]);this.headerRows.forEach(t=>{t.columnAlignments=[...e]}),this.tableRows.forEach(t=>{t.columnAlignments=[...e]})}_extractCellText(e,t){return e.getCellText(t)||(Array.from(e.children).filter(e=>e.tagName.toLowerCase()===`sgds-data-table-cell`)[t]?.textContent||``).trim()}_getRowData(e){let t={};return this._headerCells.forEach((n,r)=>{let i=n.sortKey||(n.textContent??``).trim()||`col-${r}`;t[i]=this._extractCellText(e,r)}),t}_toComparableValue(e,t,n){return this._extractCellText(e,n)}_compareValues(e,t,n){if(e===t)return 0;let r=Number(e),i=Number(t);if(Number.isFinite(r)&&Number.isFinite(i))return n===`ascending`?r-i:i-r;let a=String(e).localeCompare(String(t),void 0,{numeric:!0,sensitivity:`base`});return n===`ascending`?a:-a}_resetOtherHeaderSortStates(e){this._headerCells.forEach(t=>{t!==e&&t.sorting&&(t.sortDirection=`none`)})}_getRowsInInitialPositionOrder(e){return[...e].sort((e,t)=>{let n=this._initialRowPositions.get(e),r=this._initialRowPositions.get(t);return n===void 0&&r===void 0?0:n===void 0?1:r===void 0?-1:n-r})}_captureInitialRowPositions(e){this._hasCapturedInitialRowPositions||=(e.forEach((e,t)=>{this._initialRowPositions.set(e,t)}),!0)}_handleSort(e){let t=e.composedPath().find(e=>e instanceof K);if(!t||!t.sorting)return;let{key:n,direction:r}=e.detail,i=t?this._headerCells.indexOf(t):-1;if(this._resetOtherHeaderSortStates(t),this.serverSort){e.stopPropagation(),this.emit(`sgds-sort`,{detail:{key:n,direction:r}});return}if(!(i<0)){if(r===`none`){this.tableRows=this._getRowsInInitialPositionOrder(this.tableRows),this._syncDomRowOrder(),this._updateVisibleRows();return}if(this.mode===`client`){let e=(this.currentPage-1)*this.itemsPerPage,t=e+this.itemsPerPage,a=[...this.tableRows],o=a.slice(e,t).sort((e,t)=>{let a=this._toComparableValue(e,n,i),o=this._toComparableValue(t,n,i);return this._compareValues(a,o,r)});a.splice(e,o.length,...o),this.tableRows=a,this._syncDomRowOrder(),this._updateVisibleRows();return}this.tableRows=[...this.tableRows].sort((e,t)=>{let a=this._toComparableValue(e,n,i),o=this._toComparableValue(t,n,i);return this._compareValues(a,o,r)}),this._syncDomRowOrder(),this._updateVisibleRows()}}_syncDomRowOrder(){let e=this.tableRows[0]?.parentElement;e&&this.tableRows.forEach(t=>e.appendChild(t))}_handleSlotChange(e){let t=e.target.assignedElements({flatten:!0}).filter(e=>e instanceof q_),n=e=>Array.from(e.children).filter(e=>{let t=e.tagName.toLowerCase();return t!==`sgds-data-table-cell`&&t!==`sgds-data-table-head`?!1:e.getAttribute(`slot`)!==`content`});this.headerRows=t.filter(e=>n(e).some(e=>e.tagName.toLowerCase()===`sgds-data-table-head`)),this.tableRows=t.filter(e=>{let t=n(e);return t.length>0&&t.every(e=>e.tagName.toLowerCase()===`sgds-data-table-cell`)}),this._headerCells=this.headerRows.reduce((e,t)=>{let n=Array.from(t.children).filter(e=>e instanceof K);return e.push(...n),e},[]),this._captureInitialRowPositions(this.tableRows),this._headerCells.forEach(e=>{e.sorting&&!e.sortDirection&&(e.sortDirection=`none`)}),this._configureRows(),this._updateVisibleRows()}_updateVisibleRows(){if(this.loading){this.tableRows.forEach(e=>e.style.display=`none`);return}if(this.mode===`server`){this.tableRows.forEach(e=>e.style.display=``);return}let e=this.dataLength||this.tableRows.length,t=Math.max(1,Math.ceil(e/this.itemsPerPage));if(this.currentPage>t){this.currentPage=t;return}let n=(this.currentPage-1)*this.itemsPerPage,r=new Set(this.tableRows.slice(n,n+this.itemsPerPage));this.tableRows.forEach(e=>e.style.display=r.has(e)?``:`none`)}_getSkeletonColumnCount(){let e=this._headerCells.reduce((e,t)=>e+(Number(t.colSpan)>0?Number(t.colSpan):1),0),t=this.tableRows[0],n=t?Array.from(t.children).filter(e=>e instanceof K_).length:0,r=this.tableRows.some(e=>e.expand);return{dataColumns:e||n||1,hasExpand:r,hasCheckbox:this.multiSelect}}_renderLoadingSkeleton(){let{dataColumns:e,hasExpand:t,hasCheckbox:n}=this._getSkeletonColumnCount(),r=Math.max(1,this.itemsPerPage||1);return Array.from({length:r},()=>y`<div class="skeleton-row" role="presentation">
+    `]}static{this.dependencies={"sgds-pagination":G_,"sgds-data-table-cell":K_,"sgds-data-table-head":K,"sgds-skeleton":Y_}}connectedCallback(){super.connectedCallback()}_isRowChecked(e){return e.checked||e.checkbox?.checked===!0}_updateHeaderCheckbox(){let e=this.tableRows.filter(e=>this._isRowChecked(e)).length,t=e===this.tableRows.length&&e>0;this.headerRows.forEach(n=>{n.checked=t,n.checkbox&&(n.checkbox.checked=t,n.checkbox.indeterminate=e>0&&!t)})}async _syncHeaderCheckboxAfterRender(){if(!this.multiSelect||this.headerRows.length===0)return;let e=[...this.headerRows,...this.tableRows];await Promise.all(e.map(e=>e.updateComplete)),this._updateHeaderCheckbox()}_emitRowSelect(){let e=this.tableRows.filter(e=>this._isRowChecked(e)).map(e=>this._getRowData(e));this.emit(`sgds-row-select`,{detail:{selected:e}})}_attachRowListener(e){let t=this._rowHandlers.get(e);t&&e.removeEventListener(`i-sgds-change`,t);let n=t=>{let{checked:n}=t.detail;this.headerRows.includes(e)?this.tableRows.forEach(e=>{e.checked=n,e.checkbox&&(e.checkbox.checked=n)}):(e.checked=n,this._updateHeaderCheckbox()),this._emitRowSelect()};this._rowHandlers.set(e,n),e.addEventListener(`i-sgds-change`,n)}_configureRows(){let e=this.tableRows.some(e=>e.expand),t=this.tableRows.length>0;this.headerRows.forEach(n=>{n.showCheckbox=this.multiSelect,n.showExpandPlaceholder=e,n.hasDataRows=t,this.multiSelect&&this._attachRowListener(n)}),this.tableRows.forEach(t=>{t.showCheckbox=this.multiSelect,t.showExpandPlaceholder=!t.expand&&e,this.multiSelect&&this._attachRowListener(t)}),this.multiSelect&&this._syncHeaderCheckboxAfterRender(),this._applyColumnAlignment()}_applyColumnAlignment(){let e=this._headerCells.reduce((e,t)=>{let n=Number(t.colSpan)>0?Number(t.colSpan):1,r=t.textAlign??`left`;for(let t=0;t<n;t++)e.push(r);return e},[]);this.headerRows.forEach(t=>{t.columnAlignments=[...e]}),this.tableRows.forEach(t=>{t.columnAlignments=[...e]})}_extractCellText(e,t){return e.getCellText(t)||(Array.from(e.children).filter(e=>e.tagName.toLowerCase()===`sgds-data-table-cell`)[t]?.textContent||``).trim()}_getRowData(e){let t={};return this._headerCells.forEach((n,r)=>{let i=n.sortKey||(n.textContent??``).trim()||`col-${r}`;t[i]=this._extractCellText(e,r)}),t}_toComparableValue(e,t,n){return this._extractCellText(e,n)}_compareValues(e,t,n){if(e===t)return 0;let r=Number(e),i=Number(t);if(Number.isFinite(r)&&Number.isFinite(i))return n===`ascending`?r-i:i-r;let a=String(e).localeCompare(String(t),void 0,{numeric:!0,sensitivity:`base`});return n===`ascending`?a:-a}_resetOtherHeaderSortStates(e){this._headerCells.forEach(t=>{t!==e&&t.sorting&&(t.sortDirection=`none`)})}_getRowsInInitialPositionOrder(e){return[...e].sort((e,t)=>{let n=this._initialRowPositions.get(e),r=this._initialRowPositions.get(t);return n===void 0&&r===void 0?0:n===void 0?1:r===void 0?-1:n-r})}_captureInitialRowPositions(e){this._hasCapturedInitialRowPositions||=(e.forEach((e,t)=>{this._initialRowPositions.set(e,t)}),!0)}_handleSort(e){let t=e.composedPath().find(e=>e instanceof K);if(!t||!t.sorting)return;let{key:n,direction:r}=e.detail,i=t?this._headerCells.indexOf(t):-1;if(this._resetOtherHeaderSortStates(t),this.serverSort){e.stopPropagation(),this.emit(`sgds-sort`,{detail:{key:n,direction:r}});return}if(!(i<0)){if(r===`none`){this.tableRows=this._getRowsInInitialPositionOrder(this.tableRows),this.mode===`client`&&(this.currentPage=1),this._syncDomRowOrder(),this._updateVisibleRows();return}this.tableRows=[...this.tableRows].sort((e,t)=>{let a=this._toComparableValue(e,n,i),o=this._toComparableValue(t,n,i);return this._compareValues(a,o,r)}),this.mode===`client`&&(this.currentPage=1),this._syncDomRowOrder(),this._updateVisibleRows()}}_syncDomRowOrder(){let e=this.tableRows[0]?.parentElement;e&&this.tableRows.forEach(t=>e.appendChild(t))}_handleSlotChange(e){let t=e.target.assignedElements({flatten:!0}).filter(e=>e instanceof q_),n=e=>Array.from(e.children).filter(e=>{let t=e.tagName.toLowerCase();return t!==`sgds-data-table-cell`&&t!==`sgds-data-table-head`?!1:e.getAttribute(`slot`)!==`content`});this.headerRows=t.filter(e=>n(e).some(e=>e.tagName.toLowerCase()===`sgds-data-table-head`)),this.tableRows=t.filter(e=>{let t=n(e);return t.length>0&&t.every(e=>e.tagName.toLowerCase()===`sgds-data-table-cell`)}),this._headerCells=this.headerRows.reduce((e,t)=>{let n=Array.from(t.children).filter(e=>e instanceof K);return e.push(...n),e},[]),this._captureInitialRowPositions(this.tableRows),this._headerCells.forEach(e=>{e.sorting&&!e.sortDirection&&(e.sortDirection=`none`)}),this._configureRows(),this._updateVisibleRows()}_updateVisibleRows(){if(this.loading){this.tableRows.forEach(e=>e.style.display=`none`);return}if(this.mode===`server`){this.tableRows.forEach(e=>e.style.display=``);return}let e=this.dataLength||this.tableRows.length,t=Math.max(1,Math.ceil(e/this.itemsPerPage));if(this.currentPage>t){this.currentPage=t;return}let n=(this.currentPage-1)*this.itemsPerPage,r=new Set(this.tableRows.slice(n,n+this.itemsPerPage));this.tableRows.forEach(e=>e.style.display=r.has(e)?``:`none`)}_getSkeletonColumnCount(){let e=this._headerCells.reduce((e,t)=>e+(Number(t.colSpan)>0?Number(t.colSpan):1),0),t=this.tableRows[0],n=t?Array.from(t.children).filter(e=>e instanceof K_).length:0,r=this.tableRows.some(e=>e.expand);return{dataColumns:e||n||1,hasExpand:r,hasCheckbox:this.multiSelect}}_renderLoadingSkeleton(){let{dataColumns:e,hasExpand:t,hasCheckbox:n}=this._getSkeletonColumnCount(),r=Math.max(1,this.itemsPerPage||1);return Array.from({length:r},()=>y`<div class="skeleton-row" role="presentation">
           ${t?y`<div class="skeleton-cell control-cell">
                 <sgds-skeleton .height=${`20px`} .width=${`20px`} .borderRadius=${`4px`}></sgds-skeleton>
               </div>`:b}
@@ -3906,9 +3906,9 @@ let V_=(e,t,n)=>{let r=/* @__PURE__ */ new Map;for(let i=t;i<=n;i++)r.set(e[i],i
                 <slot name="description"></slot>
               </div>
             </div>
-            <div class="modal-body" tabindex="0">
+            <section class="modal-body" tabindex="0" aria-label="Modal body content">
               <slot></slot>
-            </div>
+            </section>
           </div class="modal-content">
           <div class="modal-footer">
             <slot name="footer"></slot>