@skyux/modals 8.0.0-alpha.8 → 8.0.0-beta.0

package/fesm2020/skyux-modals-testing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skyux-modals-testing.mjs","sources":["../../../../../libs/components/modals/testing/src/modal-fixture.ts","../../../../../libs/components/modals/testing/src/confirm/confirm-button-harness.ts","../../../../../libs/components/modals/testing/src/confirm/confirm-harness.ts","../../../../../libs/components/modals/testing/src/skyux-modals-testing.ts"],"sourcesContent":["import { ComponentFixture } from '@angular/core/testing';\n\n/**\n * Allows interaction with a SKY UX modal component.\n * @internal\n */\nexport class SkyModalFixture {\n  #modalElement: HTMLElement;\n\n  #fixture: ComponentFixture<unknown>;\n\n  constructor(fixture: ComponentFixture<unknown>, skyTestId: string) {\n    this.#fixture = fixture;\n    const modalElement = document.querySelector(\n      'sky-modal[data-sky-id=\"' + skyTestId + '\"]'\n    ) as HTMLElement;\n\n    if (!modalElement) {\n      throw new Error(\n        `No element was found with a \\`data-sky-id\\` value of \"${skyTestId}\".`\n      );\n    }\n\n    this.#modalElement = modalElement;\n  }\n\n  /**\n   * The modal component's ARIA describedby attribute.\n   */\n  public get ariaDescribedBy(): string | undefined {\n    const modalDialogElement = this.#getModalDialogElement();\n    /* Non-null assertion as our component has a default for if the user does not provide this attribute or if they provide \"undefined\" */\n    const describedByAttribute =\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      modalDialogElement.getAttribute('aria-describedby')!;\n    return describedByAttribute;\n  }\n\n  /**\n   * The modal component's ARIA labelledby attribute.\n   */\n  public get ariaLabelledBy(): string | undefined {\n    const modalDialogElement = this.#getModalDialogElement();\n    /* Non-null assertion as our component has a default for if the user does not provide this attribute or if they provide \"undefined\" */\n    const labelledByAttribute =\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      modalDialogElement.getAttribute('aria-labelledby')!;\n\n    return labelledByAttribute;\n  }\n\n  /**\n   * The modal component's role attribute.\n   */\n  public get ariaRole(): string | undefined {\n    const modalDialogElement = this.#getModalDialogElement();\n    /* Non-null assertion as our component has a default for if the user does not provide this attribute or if they provide \"undefined\" */\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    const roleAttribute = modalDialogElement.getAttribute('role')!;\n    return roleAttribute;\n  }\n\n  /**\n   * Whether or not the modal is a full page modal.\n   */\n  public get fullPage(): boolean {\n    const modalDivElement = this.getModalDiv();\n    return modalDivElement.classList.contains('sky-modal-full-page');\n  }\n\n  /**\n   * The size of the modal.\n   */\n  public get size(): string | undefined {\n    const modalDivElement = this.getModalDiv();\n    const possibleSizes = ['small', 'medium', 'large'];\n\n    for (const size of possibleSizes) {\n      if (modalDivElement.classList.contains('sky-modal-' + size)) {\n        return size;\n      }\n    }\n\n    return;\n  }\n\n  /**\n   * Whether or not the modal is set up for tiled content.\n   */\n  public get tiledBody(): boolean {\n    const modalDivElement = this.getModalDiv();\n    return modalDivElement.classList.contains('sky-modal-tiled');\n  }\n\n  /**\n   * Clicks the modal header's \"close\" button.\n   */\n  public clickHeaderCloseButton(): void {\n    this.#checkModalElement();\n    const closeButton: HTMLElement | null = this.#modalElement.querySelector(\n      '.sky-modal .sky-modal-btn-close'\n    );\n\n    if (\n      closeButton &&\n      window.getComputedStyle(closeButton).display !== 'none'\n    ) {\n      closeButton.click();\n      this.#fixture.detectChanges();\n    } else {\n      throw new Error(`No header close button exists.`);\n    }\n  }\n\n  /**\n   * Clicks the modal header's \"help\" button.\n   */\n  public clickHelpButton(): void {\n    this.#checkModalElement();\n    const helpButton: HTMLElement | null = this.#modalElement.querySelector(\n      '.sky-modal .sky-modal-header-buttons button[name=\"help-button\"]'\n    );\n\n    if (helpButton && window.getComputedStyle(helpButton).display !== 'none') {\n      helpButton.click();\n      this.#fixture.detectChanges();\n    } else {\n      throw new Error(`No help button exists.`);\n    }\n  }\n\n  /**\n   * Returns the main modal element.\n   */\n  public getModalDiv(): any {\n    this.#checkModalElement();\n    return this.#modalElement.querySelector('.sky-modal');\n  }\n\n  /**\n   * Returns the modal's content element.\n   */\n  public getModalContentEl(): any {\n    this.#checkModalElement();\n    return this.#modalElement.querySelector('.sky-modal-content');\n  }\n\n  /**\n   * Returns the modal's footer element.\n   */\n  public getModalFooterEl(): any {\n    this.#checkModalElement();\n    return this.#modalElement.querySelector('.sky-modal-footer');\n  }\n\n  /**\n   * Returns the modal's header element.\n   */\n  public getModalHeaderEl(): any {\n    this.#checkModalElement();\n    return this.#modalElement.querySelector('.sky-modal-header');\n  }\n\n  #checkModalElement(): void {\n    if (!document.contains(this.#modalElement)) {\n      throw new Error('Modal element no longer exists. Was the modal closed?');\n    }\n  }\n\n  #getModalDialogElement(): HTMLElement {\n    this.#checkModalElement();\n    // We can always know that the dialog element will exist if the modal is open and exists.\n    return this.#modalElement.querySelector('.sky-modal-dialog')!;\n  }\n}\n","import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\nimport { SkyConfirmButtonStyleType } from '@skyux/modals';\n\nimport { SkyConfirmButtonHarnessFilters } from './confirm-button-harness-filters';\n\n/**\n * Harness for interacting with a confirm component in tests.\n * @internal\n */\nexport class SkyConfirmButtonHarness extends ComponentHarness {\n  public static hostSelector = '.sky-confirm-buttons .sky-btn';\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search for a\n   * `SkyConfirmButtonHarness` that meets certain criteria.\n   */\n  public static with(\n    filters: SkyConfirmButtonHarnessFilters\n  ): HarnessPredicate<SkyConfirmButtonHarness> {\n    return new HarnessPredicate(SkyConfirmButtonHarness, filters)\n      .addOption('text', filters.text, async (harness, text) =>\n        HarnessPredicate.stringMatches(await harness.getText(), text)\n      )\n      .addOption('styleType', filters.styleType, async (harness, styleType) =>\n        HarnessPredicate.stringMatches(await harness.getStyleType(), styleType)\n      );\n  }\n\n  /**\n   * Clicks the confirm button.\n   */\n  public async click(): Promise<void> {\n    return (await this.host()).click();\n  }\n\n  /**\n   * Gets the button style of the confirm button.\n   */\n  public async getStyleType(): Promise<SkyConfirmButtonStyleType> {\n    const hostEl = await this.host();\n\n    if (await hostEl.hasClass('sky-btn-primary')) {\n      return 'primary';\n    } else if (await hostEl.hasClass('sky-btn-link')) {\n      return 'link';\n    } else if (await hostEl.hasClass('sky-btn-danger')) {\n      return 'danger';\n    }\n    return 'default';\n  }\n\n  /**\n   * Gets the text content of the confirm button.\n   */\n  public async getText(): Promise<string> {\n    return (await this.host()).text();\n  }\n}\n","import { ComponentHarness, HarnessQuery } from '@angular/cdk/testing';\nimport { SkyComponentHarness } from '@skyux/core/testing';\nimport { SkyConfirmType } from '@skyux/modals';\n\nimport { SkyConfirmButtonHarness } from './confirm-button-harness';\nimport { SkyConfirmButtonHarnessFilters } from './confirm-button-harness-filters';\n\n/**\n * Harness for interacting with a confirm component in tests.\n */\nexport class SkyConfirmHarness extends SkyComponentHarness {\n  public static hostSelector = 'sky-confirm';\n\n  #getBodyEl = this.locatorForOptional('.sky-confirm-body');\n  #getButtons = this.locatorForAll(SkyConfirmButtonHarness);\n  #getConfirmEl = this.locatorFor('.sky-confirm');\n  #getMessageEl = this.locatorFor('.sky-confirm-message');\n\n  /**\n   * Clicks a confirm button.\n   */\n  public async clickCustomButton(\n    filters: SkyConfirmButtonHarnessFilters\n  ): Promise<void> {\n    const buttons = await this.getCustomButtons(filters);\n\n    if (buttons.length > 1) {\n      if (filters.text instanceof RegExp) {\n        filters.text = filters.text.toString();\n      }\n      throw new Error(\n        `More than one button matches the filter(s): ${JSON.stringify(\n          filters\n        )}.`\n      );\n    }\n    await buttons[0].click();\n  }\n\n  /**\n   * Clicks a confirm button.\n   */\n  public async clickOkButton(): Promise<void> {\n    const type = await this.getType();\n\n    if (type === SkyConfirmType.Custom) {\n      throw new Error('Cannot click OK button on a confirm of type custom.');\n    }\n    const buttons = await this.#getButtons();\n    await buttons[0].click();\n  }\n\n  /**\n   * Gets the body of the confirm component.\n   */\n  public async getBodyText(): Promise<string | undefined> {\n    return (await this.#getBodyEl())?.text();\n  }\n\n  /**\n   * Gets the confirm component's custom buttons.\n   */\n  public async getCustomButtons(\n    filters?: SkyConfirmButtonHarnessFilters\n  ): Promise<SkyConfirmButtonHarness[]> {\n    const confirmType = await this.getType();\n\n    if (confirmType === SkyConfirmType.OK) {\n      throw new Error('Cannot get custom buttons for confirm of type OK.');\n    }\n\n    const harnesses = await this.#queryHarnesses(\n      SkyConfirmButtonHarness.with(filters || {})\n    );\n\n    if (filters && harnesses.length === 0) {\n      // Stringify the regular expression so that it's readable in the console log.\n      if (filters.text instanceof RegExp) {\n        filters.text = filters.text.toString();\n      }\n\n      throw new Error(\n        `Could not find buttons matching filter(s): ${JSON.stringify(filters)}.`\n      );\n    }\n\n    return harnesses;\n  }\n\n  /**\n   * Gets the message of the confirm component.\n   */\n  public async getMessageText(): Promise<string> {\n    return (await this.#getMessageEl()).text();\n  }\n\n  /**\n   * Gets the type of the confirm component.\n   */\n  public async getType(): Promise<SkyConfirmType> {\n    const confirmEl = await this.#getConfirmEl();\n    if (await confirmEl.hasClass('sky-confirm-type-ok')) {\n      return SkyConfirmType.OK;\n    }\n\n    return SkyConfirmType.Custom;\n  }\n\n  /**\n   * Whether the whitespace is preserved on the confirm component.\n   */\n  public async isWhiteSpacePreserved(): Promise<boolean> {\n    return (await this.#getMessageEl()).hasClass(\n      'sky-confirm-preserve-white-space'\n    );\n  }\n\n  /**\n   * Returns child harnesses.\n   */\n  async #queryHarnesses<T extends ComponentHarness>(\n    harness: HarnessQuery<T>\n  ): Promise<T[]> {\n    return this.locatorForAll(harness)();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"skyux-modals-testing.mjs","sources":["../../../../../libs/components/modals/testing/src/modal-fixture.ts","../../../../../libs/components/modals/testing/src/confirm/confirm-button-harness.ts","../../../../../libs/components/modals/testing/src/confirm/confirm-harness.ts","../../../../../libs/components/modals/testing/src/modal/modal-harness.ts","../../../../../libs/components/modals/testing/src/skyux-modals-testing.ts"],"sourcesContent":["import { ComponentFixture } from '@angular/core/testing';\n\n/**\n * Allows interaction with a SKY UX modal component.\n * @internal\n */\nexport class SkyModalFixture {\n  #modalElement: HTMLElement;\n\n  #fixture: ComponentFixture<unknown>;\n\n  constructor(fixture: ComponentFixture<unknown>, skyTestId: string) {\n    this.#fixture = fixture;\n    const modalElement = document.querySelector(\n      'sky-modal[data-sky-id=\"' + skyTestId + '\"]'\n    ) as HTMLElement;\n\n    if (!modalElement) {\n      throw new Error(\n        `No element was found with a \\`data-sky-id\\` value of \"${skyTestId}\".`\n      );\n    }\n\n    this.#modalElement = modalElement;\n  }\n\n  /**\n   * The modal component's ARIA describedby attribute.\n   */\n  public get ariaDescribedBy(): string | undefined {\n    const modalDialogElement = this.#getModalDialogElement();\n    /* Non-null assertion as our component has a default for if the user does not provide this attribute or if they provide \"undefined\" */\n    const describedByAttribute =\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      modalDialogElement.getAttribute('aria-describedby')!;\n    return describedByAttribute;\n  }\n\n  /**\n   * The modal component's ARIA labelledby attribute.\n   */\n  public get ariaLabelledBy(): string | undefined {\n    const modalDialogElement = this.#getModalDialogElement();\n    /* Non-null assertion as our component has a default for if the user does not provide this attribute or if they provide \"undefined\" */\n    const labelledByAttribute =\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      modalDialogElement.getAttribute('aria-labelledby')!;\n\n    return labelledByAttribute;\n  }\n\n  /**\n   * The modal component's role attribute.\n   */\n  public get ariaRole(): string | undefined {\n    const modalDialogElement = this.#getModalDialogElement();\n    /* Non-null assertion as our component has a default for if the user does not provide this attribute or if they provide \"undefined\" */\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    const roleAttribute = modalDialogElement.getAttribute('role')!;\n    return roleAttribute;\n  }\n\n  /**\n   * Whether or not the modal is a full page modal.\n   */\n  public get fullPage(): boolean {\n    const modalDivElement = this.getModalDiv();\n    return modalDivElement.classList.contains('sky-modal-full-page');\n  }\n\n  /**\n   * The size of the modal.\n   */\n  public get size(): string | undefined {\n    const modalDivElement = this.getModalDiv();\n    const possibleSizes = ['small', 'medium', 'large'];\n\n    for (const size of possibleSizes) {\n      if (modalDivElement.classList.contains('sky-modal-' + size)) {\n        return size;\n      }\n    }\n\n    return;\n  }\n\n  /**\n   * Whether or not the modal is set up for tiled content.\n   */\n  public get tiledBody(): boolean {\n    const modalDivElement = this.getModalDiv();\n    return modalDivElement.classList.contains('sky-modal-tiled');\n  }\n\n  /**\n   * Clicks the modal header's \"close\" button.\n   */\n  public clickHeaderCloseButton(): void {\n    this.#checkModalElement();\n    const closeButton: HTMLElement | null = this.#modalElement.querySelector(\n      '.sky-modal .sky-modal-btn-close'\n    );\n\n    if (\n      closeButton &&\n      window.getComputedStyle(closeButton).display !== 'none'\n    ) {\n      closeButton.click();\n      this.#fixture.detectChanges();\n    } else {\n      throw new Error(`No header close button exists.`);\n    }\n  }\n\n  /**\n   * Clicks the modal header's \"help\" button.\n   */\n  public clickHelpButton(): void {\n    this.#checkModalElement();\n    const helpButton: HTMLElement | null = this.#modalElement.querySelector(\n      '.sky-modal .sky-modal-header-buttons button[name=\"help-button\"]'\n    );\n\n    if (helpButton && window.getComputedStyle(helpButton).display !== 'none') {\n      helpButton.click();\n      this.#fixture.detectChanges();\n    } else {\n      throw new Error(`No help button exists.`);\n    }\n  }\n\n  /**\n   * Returns the main modal element.\n   */\n  public getModalDiv(): any {\n    this.#checkModalElement();\n    return this.#modalElement.querySelector('.sky-modal');\n  }\n\n  /**\n   * Returns the modal's content element.\n   */\n  public getModalContentEl(): any {\n    this.#checkModalElement();\n    return this.#modalElement.querySelector('.sky-modal-content');\n  }\n\n  /**\n   * Returns the modal's footer element.\n   */\n  public getModalFooterEl(): any {\n    this.#checkModalElement();\n    return this.#modalElement.querySelector('.sky-modal-footer');\n  }\n\n  /**\n   * Returns the modal's header element.\n   */\n  public getModalHeaderEl(): any {\n    this.#checkModalElement();\n    return this.#modalElement.querySelector('.sky-modal-header');\n  }\n\n  #checkModalElement(): void {\n    if (!document.contains(this.#modalElement)) {\n      throw new Error('Modal element no longer exists. Was the modal closed?');\n    }\n  }\n\n  #getModalDialogElement(): HTMLElement {\n    this.#checkModalElement();\n    // We can always know that the dialog element will exist if the modal is open and exists.\n    return this.#modalElement.querySelector('.sky-modal-dialog')!;\n  }\n}\n","import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\nimport { SkyConfirmButtonStyleType } from '@skyux/modals';\n\nimport { SkyConfirmButtonHarnessFilters } from './confirm-button-harness-filters';\n\n/**\n * Harness for interacting with a confirm component in tests.\n * @internal\n */\nexport class SkyConfirmButtonHarness extends ComponentHarness {\n  public static hostSelector = '.sky-confirm-buttons .sky-btn';\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search for a\n   * `SkyConfirmButtonHarness` that meets certain criteria.\n   */\n  public static with(\n    filters: SkyConfirmButtonHarnessFilters\n  ): HarnessPredicate<SkyConfirmButtonHarness> {\n    return new HarnessPredicate(SkyConfirmButtonHarness, filters)\n      .addOption('text', filters.text, async (harness, text) =>\n        HarnessPredicate.stringMatches(await harness.getText(), text)\n      )\n      .addOption('styleType', filters.styleType, async (harness, styleType) =>\n        HarnessPredicate.stringMatches(await harness.getStyleType(), styleType)\n      );\n  }\n\n  /**\n   * Clicks the confirm button.\n   */\n  public async click(): Promise<void> {\n    return (await this.host()).click();\n  }\n\n  /**\n   * Gets the button style of the confirm button.\n   */\n  public async getStyleType(): Promise<SkyConfirmButtonStyleType> {\n    const hostEl = await this.host();\n\n    if (await hostEl.hasClass('sky-btn-primary')) {\n      return 'primary';\n    } else if (await hostEl.hasClass('sky-btn-link')) {\n      return 'link';\n    } else if (await hostEl.hasClass('sky-btn-danger')) {\n      return 'danger';\n    }\n    return 'default';\n  }\n\n  /**\n   * Gets the text content of the confirm button.\n   */\n  public async getText(): Promise<string> {\n    return (await this.host()).text();\n  }\n}\n","import { ComponentHarness, HarnessQuery } from '@angular/cdk/testing';\nimport { SkyComponentHarness } from '@skyux/core/testing';\nimport { SkyConfirmType } from '@skyux/modals';\n\nimport { SkyConfirmButtonHarness } from './confirm-button-harness';\nimport { SkyConfirmButtonHarnessFilters } from './confirm-button-harness-filters';\n\n/**\n * Harness for interacting with a confirm component in tests.\n */\nexport class SkyConfirmHarness extends SkyComponentHarness {\n  public static hostSelector = 'sky-confirm';\n\n  #getBodyEl = this.locatorForOptional('.sky-confirm-body');\n  #getButtons = this.locatorForAll(SkyConfirmButtonHarness);\n  #getConfirmEl = this.locatorFor('.sky-confirm');\n  #getMessageEl = this.locatorFor('.sky-confirm-message');\n\n  /**\n   * Clicks a confirm button.\n   */\n  public async clickCustomButton(\n    filters: SkyConfirmButtonHarnessFilters\n  ): Promise<void> {\n    const buttons = await this.getCustomButtons(filters);\n\n    if (buttons.length > 1) {\n      if (filters.text instanceof RegExp) {\n        filters.text = filters.text.toString();\n      }\n      throw new Error(\n        `More than one button matches the filter(s): ${JSON.stringify(\n          filters\n        )}.`\n      );\n    }\n    await buttons[0].click();\n  }\n\n  /**\n   * Clicks a confirm button.\n   */\n  public async clickOkButton(): Promise<void> {\n    const type = await this.getType();\n\n    if (type === SkyConfirmType.Custom) {\n      throw new Error('Cannot click OK button on a confirm of type custom.');\n    }\n    const buttons = await this.#getButtons();\n    await buttons[0].click();\n  }\n\n  /**\n   * Gets the body of the confirm component.\n   */\n  public async getBodyText(): Promise<string | undefined> {\n    return (await this.#getBodyEl())?.text();\n  }\n\n  /**\n   * Gets the confirm component's custom buttons.\n   */\n  public async getCustomButtons(\n    filters?: SkyConfirmButtonHarnessFilters\n  ): Promise<SkyConfirmButtonHarness[]> {\n    const confirmType = await this.getType();\n\n    if (confirmType === SkyConfirmType.OK) {\n      throw new Error('Cannot get custom buttons for confirm of type OK.');\n    }\n\n    const harnesses = await this.#queryHarnesses(\n      SkyConfirmButtonHarness.with(filters || {})\n    );\n\n    if (filters && harnesses.length === 0) {\n      // Stringify the regular expression so that it's readable in the console log.\n      if (filters.text instanceof RegExp) {\n        filters.text = filters.text.toString();\n      }\n\n      throw new Error(\n        `Could not find buttons matching filter(s): ${JSON.stringify(filters)}.`\n      );\n    }\n\n    return harnesses;\n  }\n\n  /**\n   * Gets the message of the confirm component.\n   */\n  public async getMessageText(): Promise<string> {\n    return (await this.#getMessageEl()).text();\n  }\n\n  /**\n   * Gets the type of the confirm component.\n   */\n  public async getType(): Promise<SkyConfirmType> {\n    const confirmEl = await this.#getConfirmEl();\n    if (await confirmEl.hasClass('sky-confirm-type-ok')) {\n      return SkyConfirmType.OK;\n    }\n\n    return SkyConfirmType.Custom;\n  }\n\n  /**\n   * Whether the whitespace is preserved on the confirm component.\n   */\n  public async isWhiteSpacePreserved(): Promise<boolean> {\n    return (await this.#getMessageEl()).hasClass(\n      'sky-confirm-preserve-white-space'\n    );\n  }\n\n  /**\n   * Returns child harnesses.\n   */\n  async #queryHarnesses<T extends ComponentHarness>(\n    harness: HarnessQuery<T>\n  ): Promise<T[]> {\n    return this.locatorForAll(harness)();\n  }\n}\n","import { HarnessPredicate } from '@angular/cdk/testing';\nimport { SkyComponentHarness } from '@skyux/core/testing';\n\nimport { SkyModalHarnessFilters } from './modal-harness-filters';\n\n/**\n * Harness for interacting with a modal component in tests.\n */\nexport class SkyModalHarness extends SkyComponentHarness {\n  /**\n   * @internal\n   */\n  public static hostSelector = 'sky-modal';\n\n  #getModal = this.locatorFor('.sky-modal');\n  #getModalDialog = this.locatorFor('.sky-modal-dialog');\n\n  /**\n   * Gets a `HarnessPredicate` that can be used to search for a\n   * `SkyModalHarness` that meets certain criteria\n   */\n  public static with(\n    filters: SkyModalHarnessFilters\n  ): HarnessPredicate<SkyModalHarness> {\n    return SkyModalHarness.getDataSkyIdPredicate(filters);\n  }\n\n  /**\n   * Gets the aria-describedBy property of the modal\n   */\n  public async getAriaDescribedBy(): Promise<string | null> {\n    return (await this.#getModalDialog()).getAttribute('aria-describedby');\n  }\n\n  /**\n   * Gets the aria-labelledBy property of the modal\n   */\n  public async getAriaLabelledBy(): Promise<string | null> {\n    return (await this.#getModalDialog()).getAttribute('aria-labelledby');\n  }\n\n  /**\n   * Gets the role of the modal.\n   */\n  public async getAriaRole(): Promise<string | null> {\n    return (await this.#getModalDialog()).getAttribute('role');\n  }\n\n  /**\n   * Gets the modal size.\n   */\n  public async getSize(): Promise<string> {\n    if (await this.isFullPage()) {\n      throw new Error(\n        'Size cannot be determined because size property is overridden when modal is full page'\n      );\n    }\n\n    const modal = await this.#getModal();\n\n    if (await modal.hasClass('sky-modal-small')) {\n      return 'small';\n    }\n\n    if (await modal.hasClass('sky-modal-large')) {\n      return 'large';\n    }\n\n    return 'medium';\n  }\n\n  /**\n   * Gets the wrapper class of the modal.\n   */\n  public async getWrapperClass(): Promise<string | undefined> {\n    return await (await this.host()).getProperty('className');\n  }\n\n  /**\n   * Whether the modal is full page.\n   */\n  public async isFullPage(): Promise<boolean> {\n    const modal = this.#getModal();\n    return (await modal).hasClass('sky-modal-full-page');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAEA;;;AAGG;MACU,eAAe,CAAA;IAK1B,WAAY,CAAA,OAAkC,EAAE,SAAiB,EAAA;;QAJjE,6BAA2B,CAAA,GAAA,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;QAE3B,wBAAoC,CAAA,GAAA,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlC,QAAA,sBAAA,CAAA,IAAI,EAAA,wBAAA,EAAY,OAAO,EAAA,GAAA,CAAA,CAAC;AACxB,QAAA,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CACzC,yBAAyB,GAAG,SAAS,GAAG,IAAI,CAC9B,CAAC;QAEjB,IAAI,CAAC,YAAY,EAAE;AACjB,YAAA,MAAM,IAAI,KAAK,CACb,yDAAyD,SAAS,CAAA,EAAA,CAAI,CACvE,CAAC;AACH,SAAA;AAED,QAAA,sBAAA,CAAA,IAAI,EAAA,6BAAA,EAAiB,YAAY,EAAA,GAAA,CAAA,CAAC;KACnC;AAED;;AAEG;AACH,IAAA,IAAW,eAAe,GAAA;QACxB,MAAM,kBAAkB,GAAG,sBAAA,CAAA,IAAI,0EAAuB,CAA3B,IAAA,CAAA,IAAI,CAAyB,CAAC;;AAEzD,QAAA,MAAM,oBAAoB;;AAExB,QAAA,kBAAkB,CAAC,YAAY,CAAC,kBAAkB,CAAE,CAAC;AACvD,QAAA,OAAO,oBAAoB,CAAC;KAC7B;AAED;;AAEG;AACH,IAAA,IAAW,cAAc,GAAA;QACvB,MAAM,kBAAkB,GAAG,sBAAA,CAAA,IAAI,0EAAuB,CAA3B,IAAA,CAAA,IAAI,CAAyB,CAAC;;AAEzD,QAAA,MAAM,mBAAmB;;AAEvB,QAAA,kBAAkB,CAAC,YAAY,CAAC,iBAAiB,CAAE,CAAC;AAEtD,QAAA,OAAO,mBAAmB,CAAC;KAC5B;AAED;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;QACjB,MAAM,kBAAkB,GAAG,sBAAA,CAAA,IAAI,0EAAuB,CAA3B,IAAA,CAAA,IAAI,CAAyB,CAAC;;;QAGzD,MAAM,aAAa,GAAG,kBAAkB,CAAC,YAAY,CAAC,MAAM,CAAE,CAAC;AAC/D,QAAA,OAAO,aAAa,CAAC;KACtB;AAED;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC3C,OAAO,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;KAClE;AAED;;AAEG;AACH,IAAA,IAAW,IAAI,GAAA;AACb,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC3C,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAEnD,QAAA,KAAK,MAAM,IAAI,IAAI,aAAa,EAAE;YAChC,IAAI,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE;AAC3D,gBAAA,OAAO,IAAI,CAAC;AACb,aAAA;AACF,SAAA;QAED,OAAO;KACR;AAED;;AAEG;AACH,IAAA,IAAW,SAAS,GAAA;AAClB,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC3C,OAAO,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;KAC9D;AAED;;AAEG;IACI,sBAAsB,GAAA;AAC3B,QAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,kCAAA,CAAmB,CAAvB,IAAA,CAAA,IAAI,CAAqB,CAAC;QAC1B,MAAM,WAAW,GAAuB,sBAAA,CAAA,IAAI,EAAA,6BAAA,EAAA,GAAA,CAAc,CAAC,aAAa,CACtE,iCAAiC,CAClC,CAAC;AAEF,QAAA,IACE,WAAW;YACX,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,OAAO,KAAK,MAAM,EACvD;YACA,WAAW,CAAC,KAAK,EAAE,CAAC;AACpB,YAAA,sBAAA,CAAA,IAAI,EAAA,wBAAA,EAAA,GAAA,CAAS,CAAC,aAAa,EAAE,CAAC;AAC/B,SAAA;AAAM,aAAA;AACL,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8BAAA,CAAgC,CAAC,CAAC;AACnD,SAAA;KACF;AAED;;AAEG;IACI,eAAe,GAAA;AACpB,QAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,kCAAA,CAAmB,CAAvB,IAAA,CAAA,IAAI,CAAqB,CAAC;QAC1B,MAAM,UAAU,GAAuB,sBAAA,CAAA,IAAI,EAAA,6BAAA,EAAA,GAAA,CAAc,CAAC,aAAa,CACrE,iEAAiE,CAClE,CAAC;AAEF,QAAA,IAAI,UAAU,IAAI,MAAM,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,OAAO,KAAK,MAAM,EAAE;YACxE,UAAU,CAAC,KAAK,EAAE,CAAC;AACnB,YAAA,sBAAA,CAAA,IAAI,EAAA,wBAAA,EAAA,GAAA,CAAS,CAAC,aAAa,EAAE,CAAC;AAC/B,SAAA;AAAM,aAAA;AACL,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,sBAAA,CAAwB,CAAC,CAAC;AAC3C,SAAA;KACF;AAED;;AAEG;IACI,WAAW,GAAA;AAChB,QAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,kCAAA,CAAmB,CAAvB,IAAA,CAAA,IAAI,CAAqB,CAAC;QAC1B,OAAO,sBAAA,CAAA,IAAI,EAAc,6BAAA,EAAA,GAAA,CAAA,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;KACvD;AAED;;AAEG;IACI,iBAAiB,GAAA;AACtB,QAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,kCAAA,CAAmB,CAAvB,IAAA,CAAA,IAAI,CAAqB,CAAC;QAC1B,OAAO,sBAAA,CAAA,IAAI,EAAc,6BAAA,EAAA,GAAA,CAAA,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;KAC/D;AAED;;AAEG;IACI,gBAAgB,GAAA;AACrB,QAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,kCAAA,CAAmB,CAAvB,IAAA,CAAA,IAAI,CAAqB,CAAC;QAC1B,OAAO,sBAAA,CAAA,IAAI,EAAc,6BAAA,EAAA,GAAA,CAAA,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;KAC9D;AAED;;AAEG;IACI,gBAAgB,GAAA;AACrB,QAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,kCAAA,CAAmB,CAAvB,IAAA,CAAA,IAAI,CAAqB,CAAC;QAC1B,OAAO,sBAAA,CAAA,IAAI,EAAc,6BAAA,EAAA,GAAA,CAAA,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;KAC9D;AAaF,CAAA;;IAVG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,sBAAA,CAAA,IAAI,EAAc,6BAAA,EAAA,GAAA,CAAA,CAAC,EAAE;AAC1C,QAAA,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;AAC1E,KAAA;AACH,CAAC,EAAA,sCAAA,GAAA,SAAA,sCAAA,GAAA;AAGC,IAAA,sBAAA,CAAA,IAAI,EAAA,0BAAA,EAAA,GAAA,EAAA,kCAAA,CAAmB,CAAvB,IAAA,CAAA,IAAI,CAAqB,CAAC;;IAE1B,OAAO,sBAAA,CAAA,IAAI,EAAc,6BAAA,EAAA,GAAA,CAAA,CAAC,aAAa,CAAC,mBAAmB,CAAE,CAAC;AAChE,CAAC;;ACxKH;;;AAGG;AACG,MAAO,uBAAwB,SAAQ,gBAAgB,CAAA;AAG3D;;;AAGG;IACI,OAAO,IAAI,CAChB,OAAuC,EAAA;AAEvC,QAAA,OAAO,IAAI,gBAAgB,CAAC,uBAAuB,EAAE,OAAO,CAAC;aAC1D,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,OAAO,EAAE,IAAI,KACnD,gBAAgB,CAAC,aAAa,CAAC,MAAM,OAAO,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,CAC9D;AACA,aAAA,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,OAAO,EAAE,SAAS,KAClE,gBAAgB,CAAC,aAAa,CAAC,MAAM,OAAO,CAAC,YAAY,EAAE,EAAE,SAAS,CAAC,CACxE,CAAC;KACL;AAED;;AAEG;AACI,IAAA,MAAM,KAAK,GAAA;QAChB,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC;KACpC;AAED;;AAEG;AACI,IAAA,MAAM,YAAY,GAAA;AACvB,QAAA,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;AAEjC,QAAA,IAAI,MAAM,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE;AAC5C,YAAA,OAAO,SAAS,CAAC;AAClB,SAAA;AAAM,aAAA,IAAI,MAAM,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;AAChD,YAAA,OAAO,MAAM,CAAC;AACf,SAAA;AAAM,aAAA,IAAI,MAAM,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE;AAClD,YAAA,OAAO,QAAQ,CAAC;AACjB,SAAA;AACD,QAAA,OAAO,SAAS,CAAC;KAClB;AAED;;AAEG;AACI,IAAA,MAAM,OAAO,GAAA;QAClB,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC;KACnC;;AA9Ca,uBAAY,CAAA,YAAA,GAAG,+BAA+B;;;ACH9D;;AAEG;AACG,MAAO,iBAAkB,SAAQ,mBAAmB,CAAA;AAA1D,IAAA,WAAA,GAAA;;;AAGE,QAAA,4BAAA,CAAA,GAAA,CAAA,IAAA,EAAa,IAAI,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAC1D,QAAA,6BAAA,CAAA,GAAA,CAAA,IAAA,EAAc,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,CAAA;AAC1D,QAAA,+BAAA,CAAA,GAAA,CAAA,IAAA,EAAgB,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,CAAA;AAChD,QAAA,+BAAA,CAAA,GAAA,CAAA,IAAA,EAAgB,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC,CAAA;KA6GzD;AA3GC;;AAEG;IACI,MAAM,iBAAiB,CAC5B,OAAuC,EAAA;QAEvC,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAErD,QAAA,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;AACtB,YAAA,IAAI,OAAO,CAAC,IAAI,YAAY,MAAM,EAAE;gBAClC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACxC,aAAA;AACD,YAAA,MAAM,IAAI,KAAK,CACb,CAAA,4CAAA,EAA+C,IAAI,CAAC,SAAS,CAC3D,OAAO,CACR,CAAG,CAAA,CAAA,CACL,CAAC;AACH,SAAA;AACD,QAAA,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;KAC1B;AAED;;AAEG;AACI,IAAA,MAAM,aAAa,GAAA;AACxB,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;AAElC,QAAA,IAAI,IAAI,KAAK,cAAc,CAAC,MAAM,EAAE;AAClC,YAAA,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;AACxE,SAAA;QACD,MAAM,OAAO,GAAG,MAAM,sBAAA,CAAA,IAAI,EAAY,6BAAA,EAAA,GAAA,CAAA,CAAA,IAAA,CAAhB,IAAI,CAAc,CAAC;AACzC,QAAA,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;KAC1B;AAED;;AAEG;AACI,IAAA,MAAM,WAAW,GAAA;AACtB,QAAA,OAAO,CAAC,MAAM,sBAAA,CAAA,IAAI,EAAW,4BAAA,EAAA,GAAA,CAAA,CAAA,IAAA,CAAf,IAAI,CAAa,GAAG,IAAI,EAAE,CAAC;KAC1C;AAED;;AAEG;IACI,MAAM,gBAAgB,CAC3B,OAAwC,EAAA;AAExC,QAAA,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC;AAEzC,QAAA,IAAI,WAAW,KAAK,cAAc,CAAC,EAAE,EAAE;AACrC,YAAA,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;AACtE,SAAA;AAED,QAAA,MAAM,SAAS,GAAG,MAAM,uBAAA,IAAI,EAAA,4BAAA,EAAA,GAAA,EAAA,iCAAA,CAAgB,MAApB,IAAI,EAC1B,uBAAuB,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAC5C,CAAC;AAEF,QAAA,IAAI,OAAO,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;;AAErC,YAAA,IAAI,OAAO,CAAC,IAAI,YAAY,MAAM,EAAE;gBAClC,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AACxC,aAAA;AAED,YAAA,MAAM,IAAI,KAAK,CACb,CAAA,2CAAA,EAA8C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAG,CAAA,CAAA,CACzE,CAAC;AACH,SAAA;AAED,QAAA,OAAO,SAAS,CAAC;KAClB;AAED;;AAEG;AACI,IAAA,MAAM,cAAc,GAAA;AACzB,QAAA,OAAO,CAAC,MAAM,sBAAA,CAAA,IAAI,EAAc,+BAAA,EAAA,GAAA,CAAA,CAAA,IAAA,CAAlB,IAAI,CAAgB,EAAE,IAAI,EAAE,CAAC;KAC5C;AAED;;AAEG;AACI,IAAA,MAAM,OAAO,GAAA;QAClB,MAAM,SAAS,GAAG,MAAM,sBAAA,CAAA,IAAI,EAAc,+BAAA,EAAA,GAAA,CAAA,CAAA,IAAA,CAAlB,IAAI,CAAgB,CAAC;AAC7C,QAAA,IAAI,MAAM,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE;YACnD,OAAO,cAAc,CAAC,EAAE,CAAC;AAC1B,SAAA;QAED,OAAO,cAAc,CAAC,MAAM,CAAC;KAC9B;AAED;;AAEG;AACI,IAAA,MAAM,qBAAqB,GAAA;AAChC,QAAA,OAAO,CAAC,MAAM,sBAAA,CAAA,IAAI,uCAAc,CAAlB,IAAA,CAAA,IAAI,CAAgB,EAAE,QAAQ,CAC1C,kCAAkC,CACnC,CAAC;KACH;;;AAED;;AAEG;AACH,iDACE,OAAwB,EAAA;AAExB,IAAA,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC;AACvC,CAAC,CAAA;AAjHa,iBAAY,CAAA,YAAA,GAAG,aAAa;;;ACN5C;;AAEG;AACG,MAAO,eAAgB,SAAQ,mBAAmB,CAAA;AAAxD,IAAA,WAAA,GAAA;;AAME,QAAA,yBAAA,CAAA,GAAA,CAAA,IAAA,EAAY,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAA;AAC1C,QAAA,+BAAA,CAAA,GAAA,CAAA,IAAA,EAAkB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC,CAAA;KAsExD;AApEC;;;AAGG;IACI,OAAO,IAAI,CAChB,OAA+B,EAAA;AAE/B,QAAA,OAAO,eAAe,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;KACvD;AAED;;AAEG;AACI,IAAA,MAAM,kBAAkB,GAAA;AAC7B,QAAA,OAAO,CAAC,MAAM,sBAAA,CAAA,IAAI,uCAAgB,CAApB,IAAA,CAAA,IAAI,CAAkB,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;KACxE;AAED;;AAEG;AACI,IAAA,MAAM,iBAAiB,GAAA;AAC5B,QAAA,OAAO,CAAC,MAAM,sBAAA,CAAA,IAAI,uCAAgB,CAApB,IAAA,CAAA,IAAI,CAAkB,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;KACvE;AAED;;AAEG;AACI,IAAA,MAAM,WAAW,GAAA;AACtB,QAAA,OAAO,CAAC,MAAM,sBAAA,CAAA,IAAI,uCAAgB,CAApB,IAAA,CAAA,IAAI,CAAkB,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;KAC5D;AAED;;AAEG;AACI,IAAA,MAAM,OAAO,GAAA;AAClB,QAAA,IAAI,MAAM,IAAI,CAAC,UAAU,EAAE,EAAE;AAC3B,YAAA,MAAM,IAAI,KAAK,CACb,uFAAuF,CACxF,CAAC;AACH,SAAA;QAED,MAAM,KAAK,GAAG,MAAM,sBAAA,CAAA,IAAI,EAAU,yBAAA,EAAA,GAAA,CAAA,CAAA,IAAA,CAAd,IAAI,CAAY,CAAC;AAErC,QAAA,IAAI,MAAM,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE;AAC3C,YAAA,OAAO,OAAO,CAAC;AAChB,SAAA;AAED,QAAA,IAAI,MAAM,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE;AAC3C,YAAA,OAAO,OAAO,CAAC;AAChB,SAAA;AAED,QAAA,OAAO,QAAQ,CAAC;KACjB;AAED;;AAEG;AACI,IAAA,MAAM,eAAe,GAAA;AAC1B,QAAA,OAAO,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KAC3D;AAED;;AAEG;AACI,IAAA,MAAM,UAAU,GAAA;QACrB,MAAM,KAAK,GAAG,sBAAA,CAAA,IAAI,iCAAU,CAAd,IAAA,CAAA,IAAI,CAAY,CAAC;QAC/B,OAAO,CAAC,MAAM,KAAK,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;KACtD;;;AA3ED;;AAEG;AACW,eAAY,CAAA,YAAA,GAAG,WAAW;;ACZ1C;;AAEG;;;;"}

package/fesm2020/skyux-modals.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Inject, Injector, ViewContainerRef, Optional, ViewChild, Directive, Output, HostListener, ElementRef, Host, HostBinding, Input, InjectionToken } from '@angular/core';
+import { EventEmitter, NgModule, Component, ViewEncapsulation, Injectable, Inject, Injector, ViewContainerRef, Optional, ViewChild, Directive, Output, HostListener, inject, ChangeDetectorRef, ElementRef, Host, HostBinding, Input, InjectionToken } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@skyux/core';
-import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, SKY_STACKING_CONTEXT, SkyDockLocation, SkyDockService, SkyIdModule, SkyTrimModule } from '@skyux/core';
+import { SkyMediaQueryService, SkyResizeObserverMediaQueryService, SKY_STACKING_CONTEXT, SkyLiveAnnouncerService, SkyDockLocation, SkyDockService, SkyIdModule, SkyTrimModule } from '@skyux/core';
 import * as i2 from '@skyux/theme';
 import { SkyTheme, SkyThemeModule } from '@skyux/theme';
 import * as i3$1 from '@angular/router';
@@ -120,10 +120,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
 class SkyModalFooterComponent {
 }
 SkyModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container ::ng-deep .sky-btn-link:first-child{margin-left:-12px}:host-context(.sky-theme-modern) .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-footer-container{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal-footer-container{background-color:transparent}\n"] });
+SkyModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalFooterComponent, selector: "sky-modal-footer", ngImport: i0, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:var(--sky-compat-modal-footer-adjacent-btn-btn-link-margin, 10px)}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-modal-footer', template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container ::ng-deep .sky-btn-link:first-child{margin-left:-12px}:host-context(.sky-theme-modern) .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-footer-container{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal-footer-container{background-color:transparent}\n"] }]
+            args: [{ selector: 'sky-modal-footer', encapsulation: ViewEncapsulation.None, template: "<div class=\"sky-modal-footer-container sky-padding-even-large\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-modal-footer-container{background-color:#fff;border-top:1px solid #e2e3e4}.sky-modal-footer-container .sky-btn-link:first-child{margin-left:-12px}.sky-modal-footer-container .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:-2px}.sky-theme-modern .sky-modal-footer-container{border-top:none;padding:20px 30px}.sky-theme-modern .sky-modal-footer-container .sky-btn-link:first-child{margin-left:0}.sky-theme-modern .sky-modal-footer-container .sky-btn+.sky-btn-link{margin-left:var(--sky-compat-modal-footer-adjacent-btn-btn-link-margin, 10px)}.sky-theme-modern-dark .sky-modal-footer-container{background-color:transparent}\n"] }]
         }] });
 
 /**
@@ -132,10 +132,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
 class SkyModalHeaderComponent {
 }
 SkyModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h2\n  class=\"sky-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-display-3': 'modern'\n  }\"\n  skyTrim\n>\n  <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n  ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ4, selector: "[skyTrim]" }] });
+SkyModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalHeaderComponent, selector: "sky-modal-header", ngImport: i0, template: "<h2\n  class=\"sky-font-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-4': 'default',\n    'sky-font-display-3': 'modern'\n  }\"\n  skyTrim\n>\n  <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n  ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i3.λ4, selector: "[skyTrim]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-modal-header', template: "<h2\n  class=\"sky-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-display-3': 'modern'\n  }\"\n  skyTrim\n>\n  <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n  ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"] }]
+            args: [{ selector: 'sky-modal-header', template: "<h2\n  class=\"sky-font-emphasized\"\n  [skyThemeClass]=\"{\n    'sky-font-heading-4': 'default',\n    'sky-font-display-3': 'modern'\n  }\"\n  skyTrim\n>\n  <ng-content></ng-content>\n</h2>\n<span class=\"sky-control-help-container\" skyTrim\n  ><ng-content select=\".sky-control-help\"></ng-content\n></span>\n", styles: ["h2{margin:0;line-height:1.2;display:inline}:host-context(.sky-theme-modern.sky-theme-mode-dark) h2{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark h2{color:#fbfcfe}\n"] }]
         }] });
 
 var _SkyModalAdapterService_instances, _SkyModalAdapterService_docRef, _SkyModalAdapterService_bodyEl, _SkyModalAdapterService_windowRef, _SkyModalAdapterService_hostSiblingAriaHiddenCache, _SkyModalAdapterService_addClassToBody, _SkyModalAdapterService_removeClassFromBody;
@@ -697,7 +697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
             type: Injectable
         }], ctorParameters: function () { return [{ type: i3.SkyCoreAdapterService }]; } });
 
-var _SkyModalComponent_hostService, _SkyModalComponent_elRef, _SkyModalComponent_windowRef, _SkyModalComponent_componentAdapter, _SkyModalComponent_coreAdapter, _SkyModalComponent_dockService, _SkyModalComponent_mediaQueryService, _SkyModalComponent__ariaDescribedBy, _SkyModalComponent__ariaLabelledBy;
+var _SkyModalComponent_hostService, _SkyModalComponent_elRef, _SkyModalComponent_windowRef, _SkyModalComponent_componentAdapter, _SkyModalComponent_coreAdapter, _SkyModalComponent_dockService, _SkyModalComponent_mediaQueryService, _SkyModalComponent_ngUnsubscribe, _SkyModalComponent__ariaDescribedBy, _SkyModalComponent__ariaLabelledBy, _SkyModalComponent_changeDetector, _SkyModalComponent_liveAnnouncerSvc;
 const ARIA_ROLE_DEFAULT = 'dialog';
 /**
  * Provides a common look-and-feel for modal content with options to display
@@ -731,6 +731,7 @@ class SkyModalComponent {
     }
     constructor(hostService, config, elRef, windowRef, componentAdapter, coreAdapter, dockService, mediaQueryService) {
         this.ariaRoleOrDefault = ARIA_ROLE_DEFAULT;
+        this.ariaOwns = null;
         this.modalState = 'in';
         _SkyModalComponent_hostService.set(this, void 0);
         _SkyModalComponent_elRef.set(this, void 0);
@@ -739,8 +740,11 @@ class SkyModalComponent {
         _SkyModalComponent_coreAdapter.set(this, void 0);
         _SkyModalComponent_dockService.set(this, void 0);
         _SkyModalComponent_mediaQueryService.set(this, void 0);
+        _SkyModalComponent_ngUnsubscribe.set(this, new Subject());
         _SkyModalComponent__ariaDescribedBy.set(this, void 0);
         _SkyModalComponent__ariaLabelledBy.set(this, void 0);
+        _SkyModalComponent_changeDetector.set(this, inject(ChangeDetectorRef));
+        _SkyModalComponent_liveAnnouncerSvc.set(this, inject(SkyLiveAnnouncerService));
         __classPrivateFieldSet(this, _SkyModalComponent_hostService, hostService, "f");
         __classPrivateFieldSet(this, _SkyModalComponent_elRef, elRef, "f");
         __classPrivateFieldSet(this, _SkyModalComponent_windowRef, windowRef, "f");
@@ -802,6 +806,16 @@ class SkyModalComponent {
             }
         }
     }
+    ngOnInit() {
+        __classPrivateFieldGet(this, _SkyModalComponent_liveAnnouncerSvc, "f").announcerElementChanged
+            .pipe(takeUntil(__classPrivateFieldGet(this, _SkyModalComponent_ngUnsubscribe, "f")))
+            .subscribe((element) => {
+            if (element?.id) {
+                this.ariaOwns = element.id;
+                __classPrivateFieldGet(this, _SkyModalComponent_changeDetector, "f").markForCheck();
+            }
+        });
+    }
     ngAfterViewInit() {
         __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").handleWindowChange(__classPrivateFieldGet(this, _SkyModalComponent_elRef, "f"));
         // Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.
@@ -824,6 +838,8 @@ class SkyModalComponent {
         if (__classPrivateFieldGet(this, _SkyModalComponent_mediaQueryService, "f")) {
             __classPrivateFieldGet(this, _SkyModalComponent_mediaQueryService, "f").unobserve();
         }
+        __classPrivateFieldGet(this, _SkyModalComponent_ngUnsubscribe, "f").next();
+        __classPrivateFieldGet(this, _SkyModalComponent_ngUnsubscribe, "f").complete();
     }
     helpButtonClick() {
         if (this.helpKey) {
@@ -843,12 +859,12 @@ class SkyModalComponent {
         return __classPrivateFieldGet(this, _SkyModalComponent_componentAdapter, "f").modalContentHasDirectChildViewkeeper(__classPrivateFieldGet(this, _SkyModalComponent_elRef, "f"));
     }
 }
-_SkyModalComponent_hostService = new WeakMap(), _SkyModalComponent_elRef = new WeakMap(), _SkyModalComponent_windowRef = new WeakMap(), _SkyModalComponent_componentAdapter = new WeakMap(), _SkyModalComponent_coreAdapter = new WeakMap(), _SkyModalComponent_dockService = new WeakMap(), _SkyModalComponent_mediaQueryService = new WeakMap(), _SkyModalComponent__ariaDescribedBy = new WeakMap(), _SkyModalComponent__ariaLabelledBy = new WeakMap();
+_SkyModalComponent_hostService = new WeakMap(), _SkyModalComponent_elRef = new WeakMap(), _SkyModalComponent_windowRef = new WeakMap(), _SkyModalComponent_componentAdapter = new WeakMap(), _SkyModalComponent_coreAdapter = new WeakMap(), _SkyModalComponent_dockService = new WeakMap(), _SkyModalComponent_mediaQueryService = new WeakMap(), _SkyModalComponent_ngUnsubscribe = new WeakMap(), _SkyModalComponent__ariaDescribedBy = new WeakMap(), _SkyModalComponent__ariaLabelledBy = new WeakMap(), _SkyModalComponent_changeDetector = new WeakMap(), _SkyModalComponent_liveAnnouncerSvc = new WeakMap();
 SkyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalComponent, deps: [{ token: SkyModalHostService }, { token: SkyModalConfiguration }, { token: i0.ElementRef }, { token: i3.SkyAppWindowRef }, { token: SkyModalComponentAdapterService }, { token: i3.SkyCoreAdapterService }, { token: i3.SkyDockService, host: true }, { token: i3.SkyResizeObserverMediaQueryService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody", ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n  [attr.role]=\"ariaRoleOrDefault\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-tiled': tiledBody,\n      'sky-modal-viewkeeper': viewkeeperEnabled()\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        skyId\n        [ngClass]=\"{\n          'sky-section-heading': size === 'full-page'\n        }\"\n        #headerContent\n        #headerId=\"skyId\"\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      skyId\n      [attr.aria-labelledby]=\"headerId.id\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentId=\"skyId\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }] });
+SkyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyModalComponent, selector: "sky-modal", inputs: { ariaRole: "ariaRole", tiledBody: "tiledBody", ariaDescribedBy: "ariaDescribedBy", ariaLabelledBy: "ariaLabelledBy" }, host: { listeners: { "document:keyup": "onDocumentKeyUp($event)", "document:keydown": "onDocumentKeyDown($event)" }, properties: { "class": "this.wrapperClass" } }, providers: [SkyModalComponentAdapterService, SkyDockService], viewQueries: [{ propertyName: "modalContentWrapperElement", first: true, predicate: ["modalContentWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.role]=\"ariaRoleOrDefault\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-tiled': tiledBody,\n      'sky-modal-viewkeeper': viewkeeperEnabled()\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        skyId\n        [ngClass]=\"{\n          'sky-section-heading': size === 'full-page'\n        }\"\n        #headerContent\n        #headerId=\"skyId\"\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      skyId\n      [attr.aria-labelledby]=\"headerId.id\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentId=\"skyId\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff;--sky-background-color-page-default: #fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef;--sky-background-color-page-default: $sky-background-color-neutral-light}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "directive", type: SkyModalScrollShadowDirective, selector: "[skyModalScrollShadow]", outputs: ["skyModalScrollShadow"] }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-modal', providers: [SkyModalComponentAdapterService, SkyDockService], template: "<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n  [attr.role]=\"ariaRoleOrDefault\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-tiled': tiledBody,\n      'sky-modal-viewkeeper': viewkeeperEnabled()\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        skyId\n        [ngClass]=\"{\n          'sky-section-heading': size === 'full-page'\n        }\"\n        #headerContent\n        #headerId=\"skyId\"\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      skyId\n      [attr.aria-labelledby]=\"headerId.id\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentId=\"skyId\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer ::ng-deep .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent}\n"] }]
+            args: [{ selector: 'sky-modal', providers: [SkyModalComponentAdapterService, SkyDockService], template: "<div\n  class=\"sky-modal-dialog\"\n  aria-modal=\"true\"\n  [attr.aria-describedby]=\"ariaDescribedBy || modalContentId.id\"\n  [attr.aria-labelledby]=\"ariaLabelledBy || headerId.id\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.role]=\"ariaRoleOrDefault\"\n  (window:resize)=\"windowResize()\"\n>\n  <div\n    class=\"sky-modal sky-shadow sky-box sky-elevation-16 sky-modal-{{ size }}\"\n    tabindex=\"-1\"\n    [ngClass]=\"{\n      'sky-modal-tiled': tiledBody,\n      'sky-modal-viewkeeper': viewkeeperEnabled()\n    }\"\n    [ngStyle]=\"{\n      zIndex: modalZIndex\n    }\"\n  >\n    <div\n      class=\"sky-modal-header\"\n      [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length &lt; 1\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.topShadow\n      }\"\n    >\n      <div\n        class=\"sky-modal-header-content\"\n        skyId\n        [ngClass]=\"{\n          'sky-section-heading': size === 'full-page'\n        }\"\n        #headerContent\n        #headerId=\"skyId\"\n      >\n        <ng-content select=\"sky-modal-header\"></ng-content>\n      </div>\n      <div class=\"sky-modal-header-buttons\">\n        <button\n          *ngIf=\"helpKey\"\n          class=\"sky-btn sky-modal-btn-help\"\n          name=\"help-button\"\n          type=\"button\"\n          [attr.aria-label]=\"'skyux_modal_open_help' | skyLibResources\"\n          (click)=\"helpButtonClick()\"\n        >\n          <sky-icon icon=\"question-circle\"></sky-icon>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-modal-btn-close\"\n          [attr.aria-label]=\"'skyux_modal_close' | skyLibResources\"\n          (click)=\"closeButtonClick()\"\n        >\n          <sky-icon icon=\"close\"></sky-icon>\n        </button>\n      </div>\n    </div>\n    <div\n      class=\"sky-modal-content sky-padding-even-large\"\n      role=\"region\"\n      tabindex=\"0\"\n      skyId\n      [attr.aria-labelledby]=\"headerId.id\"\n      (skyModalScrollShadow)=\"scrollShadowChange($event)\"\n      #modalContentId=\"skyId\"\n      #modalContentWrapper\n    >\n      <ng-content select=\"sky-modal-content\"></ng-content>\n    </div>\n    <div\n      class=\"sky-modal-footer\"\n      [ngStyle]=\"{\n        'box-shadow': scrollShadow?.bottomShadow\n      }\"\n    >\n      <ng-content select=\"sky-modal-footer\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column;overflow:hidden}.sky-modal:focus{outline:none}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-small .sky-modal-content,.sky-modal-small .sky-modal-header,.sky-modal-small .sky-modal-footer{max-width:300px}.sky-modal-medium{width:600px}.sky-modal-medium .sky-modal-content,.sky-modal-medium .sky-modal-header,.sky-modal-medium .sky-modal-footer{max-width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}.sky-modal-large .sky-modal-content,.sky-modal-large .sky-modal-header,.sky-modal-large .sky-modal-footer{max-width:900px}}.sky-modal-content{background-color:#fff;--sky-background-color-page-default: #fff}.sky-modal-content:focus{outline-style:dotted;outline-width:thin;outline-offset:-1px}.sky-modal-tiled .sky-modal-content{background-color:#eeeeef;--sky-background-color-page-default: $sky-background-color-neutral-light}.sky-modal-tiled .sky-modal-content ::ng-deep .sky-tile-title{font-family:BLKB Sans,Helvetica Neue,Arial,sans-serif;color:var(--sky-text-color-deemphasized);font-weight:300;font-size:19px}.sky-modal-header{padding:9px 3px 9px 15px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons{flex-shrink:.0001}.sky-modal-header-buttons .sky-btn{border:none;color:#cdcfd2;cursor:pointer}.sky-modal-header-buttons .sky-btn:hover{color:#979ba2;transition:color .15s}.sky-modal-header-content{flex-grow:1}.sky-modal-header{flex-shrink:0;z-index:2}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0;z-index:2}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-buttons sky-icon[icon=close]{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}:host ::ng-deep .sky-sectioned-form{min-height:460px;margin:-15px}.sky-modal-content>::ng-deep sky-dock{bottom:-15px;margin-left:-15px;margin-bottom:-15px;padding-top:15px;width:calc(100% + 30px)}:host-context(.sky-theme-modern) .sky-modal-header{border:none;padding:20px 30px}:host-context(.sky-theme-modern) .sky-modal-btn-help,:host-context(.sky-theme-modern) .sky-modal-btn-close{display:none}:host-context(.sky-theme-modern) .sky-modal-content{padding:0}:host-context(.sky-theme-modern) .sky-modal-full-page{width:calc(100% - 60px);margin:30px}:host-context(.sky-theme-modern) .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}:host-context(.sky-theme-modern) .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}.sky-theme-modern .sky-modal-header{border:none;padding:20px 30px}.sky-theme-modern .sky-modal-btn-help,.sky-theme-modern .sky-modal-btn-close{display:none}.sky-theme-modern .sky-modal-content{padding:0}.sky-theme-modern .sky-modal-full-page{width:calc(100% - 60px);margin:30px}.sky-theme-modern .sky-modal-content>::ng-deep sky-dock{bottom:0;margin-left:initial;margin-bottom:initial;padding-top:initial;width:100%}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-header{box-shadow:none!important}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed{box-shadow:0 4px 8px -4px #0000004d}.sky-theme-modern .sky-modal-viewkeeper .sky-modal-content ::ng-deep sky-modal-content>.sky-viewkeeper-fixed>sky-toolbar .sky-toolbar-container{background-color:#fff;--sky-background-color-page-default: #fff;padding-left:30px;padding-right:30px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal{border-color:#121212}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header{color:#fbfcfe}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-header,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}.sky-theme-modern.sky-theme-mode-dark .sky-modal{border-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-modal-header,.sky-theme-modern.sky-theme-mode-dark .sky-modal-content{background-color:transparent;--sky-background-color-page-default: $sky-theme-modern-mode-dark-background-color-page-default}\n"] }]
         }], ctorParameters: function () { return [{ type: SkyModalHostService }, { type: SkyModalConfiguration }, { type: i0.ElementRef }, { type: i3.SkyAppWindowRef }, { type: SkyModalComponentAdapterService }, { type: i3.SkyCoreAdapterService }, { type: i3.SkyDockService, decorators: [{
                     type: Host
                 }] }, { type: i3.SkyResizeObserverMediaQueryService, decorators: [{
@@ -935,12 +951,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImpor
 const SKY_CONFIRM_CONFIG = new InjectionToken('SkyConfirmConfig');
 
 /**
- * Closes the modal instance using the `closeModal` method.
+ * Properties about the modal close action and a method to close the modal.
  */
 class SkyModalBeforeCloseHandler {
     constructor(closeModal, closeArgs) {
-        this.closeModal = closeModal;
         this.closeArgs = closeArgs;
+        this.closeModal = closeModal;
     }
 }
 
@@ -1140,10 +1156,10 @@ _SkyConfirmComponent_config = new WeakMap(), _SkyConfirmComponent_modal = new We
     }));
 };
 SkyConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyConfirmComponent, deps: [{ token: SKY_CONFIRM_CONFIG }, { token: SkyModalInstance }, { token: i2$1.SkyLibResourcesService }, { token: i3.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
-SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n  <sky-modal\n    ariaRole=\"alertdialog\"\n    [ariaLabelledBy]=\"confirmMessage.id\"\n    [ariaDescribedBy]=\"body ? bodyId : undefined\"\n  >\n    <sky-modal-content class=\"sky-confirm-content\">\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n        skyId\n        #confirmMessage=\"skyId\"\n        >{{ message }}</div\n      >\n\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [id]=\"bodyId\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        >{{ body }}</div\n      >\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"'sky-btn-' + button.styleType\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: SkyModalContentComponent, selector: "sky-modal-content" }, { kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
+SkyConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.1", type: SkyConfirmComponent, selector: "sky-confirm", ngImport: i0, template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n  <sky-modal\n    ariaRole=\"alertdialog\"\n    [ariaLabelledBy]=\"confirmMessage.id\"\n    [ariaDescribedBy]=\"body ? bodyId : undefined\"\n  >\n    <sky-modal-content class=\"sky-confirm-content\">\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-font-display-4': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n        skyId\n        #confirmMessage=\"skyId\"\n        >{{ message }}</div\n      >\n\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [id]=\"bodyId\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        >{{ body }}</div\n      >\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"'sky-btn-' + button.styleType\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyModalComponent, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: SkyModalContentComponent, selector: "sky-modal-content" }, { kind: "directive", type: i2.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.1", ngImport: i0, type: SkyConfirmComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-confirm', template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n  <sky-modal\n    ariaRole=\"alertdialog\"\n    [ariaLabelledBy]=\"confirmMessage.id\"\n    [ariaDescribedBy]=\"body ? bodyId : undefined\"\n  >\n    <sky-modal-content class=\"sky-confirm-content\">\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-emphasized': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n        skyId\n        #confirmMessage=\"skyId\"\n        >{{ message }}</div\n      >\n\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [id]=\"bodyId\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        >{{ body }}</div\n      >\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"'sky-btn-' + button.styleType\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"] }]
+            args: [{ selector: 'sky-confirm', template: "<div class=\"sky-confirm\" [ngClass]=\"{ 'sky-confirm-type-ok': isOkType }\">\n  <sky-modal\n    ariaRole=\"alertdialog\"\n    [ariaLabelledBy]=\"confirmMessage.id\"\n    [ariaDescribedBy]=\"body ? bodyId : undefined\"\n  >\n    <sky-modal-content class=\"sky-confirm-content\">\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        class=\"sky-confirm-message\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        [skyThemeClass]=\"{\n          'sky-font-display-4': 'default',\n          'sky-font-heading-1 sky-font-display-3': 'modern'\n        }\"\n        skyId\n        #confirmMessage=\"skyId\"\n        >{{ message }}</div\n      >\n\n      <!--\n        The following \"magic comment\" keeps Prettier from adding line breaks\n        inside the div and causing leading and trailing whitespace when\n        `preserveWhiteSpace` is `true`.\n        https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting\n      -->\n      <!-- display: inline -->\n      <div\n        *ngIf=\"body\"\n        class=\"sky-confirm-body\"\n        [id]=\"bodyId\"\n        [ngClass]=\"{\n          'sky-confirm-preserve-white-space': preserveWhiteSpace\n        }\"\n        >{{ body }}</div\n      >\n\n      <div class=\"sky-confirm-buttons\">\n        <button\n          *ngFor=\"let button of buttons\"\n          type=\"button\"\n          class=\"sky-btn\"\n          [ngClass]=\"'sky-btn-' + button.styleType\"\n          [skyThemeClass]=\"{\n            'sky-margin-inline-sm': 'modern',\n            'sky-margin-inline-compact': 'default'\n          }\"\n          (click)=\"close(button)\"\n          [attr.autofocus]=\"button.autofocus ? 'autofocus' : null\"\n        >\n          {{ button.text }}\n        </button>\n      </div>\n    </sky-modal-content>\n  </sky-modal>\n</div>\n", styles: [".sky-confirm{--sky-confirm-body-margin-top: var(--sky-margin-stacked-sm);--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-xl);--sky-confirm-content-padding: 0;--sky-confirm-message-padding-bottom: 0}:host-context(.sky-theme-modern) .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-theme-modern .sky-confirm{--sky-confirm-body-margin-top: 0;--sky-confirm-buttons-margin-top: var(--sky-margin-stacked-lg);--sky-confirm-content-padding: var(--sky-margin-stacked-lg) var(--sky-margin-inline-xl);--sky-confirm-message-padding-bottom: var(--sky-margin-stacked-lg)}.sky-confirm-content{padding:var(--sky-confirm-content-padding)}.sky-confirm-message{margin-top:var(--sky-margin-stacked-xs);padding-bottom:var(--sky-confirm-message-padding-bottom)}.sky-confirm-body{margin-top:var(--sky-confirm-body-margin-top)}.sky-confirm-buttons{margin-top:var(--sky-confirm-buttons-margin-top)}.sky-confirm-preserve-white-space{white-space:pre-wrap}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SKY_CONFIRM_CONFIG]