@skyux/indicators/fesm2022/skyux-indicators.mjs.map

This library was generated with [Nx](https://nx.dev).

{"version":3,"file":"skyux-indicators.mjs","sources":["../../../../../libs/components/indicators/src/lib/modules/shared/sky-indicators-resources.module.ts","../../../../../libs/components/indicators/src/lib/modules/shared/indicator-icon-utility.ts","../../../../../libs/components/indicators/src/lib/modules/alert/alert.component.ts","../../../../../libs/components/indicators/src/lib/modules/alert/alert.component.html","../../../../../libs/components/indicators/src/lib/modules/alert/alert.module.ts","../../../../../libs/components/indicators/src/lib/modules/expansion-indicator/expansion-indicator.component.ts","../../../../../libs/components/indicators/src/lib/modules/expansion-indicator/expansion-indicator.component.html","../../../../../libs/components/indicators/src/lib/modules/expansion-indicator/expansion-indicator.module.ts","../../../../../libs/components/indicators/src/lib/modules/chevron/chevron.component.ts","../../../../../libs/components/indicators/src/lib/modules/chevron/chevron.component.html","../../../../../libs/components/indicators/src/lib/modules/chevron/chevron.module.ts","../../../../../libs/components/indicators/src/lib/modules/illustration/illustration-resolver.service.ts","../../../../../libs/components/indicators/src/lib/modules/illustration/illustration.component.ts","../../../../../libs/components/indicators/src/lib/modules/illustration/illustration.component.html","../../../../../libs/components/indicators/src/lib/modules/illustration/illustration.module.ts","../../../../../libs/components/indicators/src/lib/modules/key-info/key-info-label.component.ts","../../../../../libs/components/indicators/src/lib/modules/key-info/key-info-value.component.ts","../../../../../libs/components/indicators/src/lib/modules/key-info/key-info.component.ts","../../../../../libs/components/indicators/src/lib/modules/key-info/key-info.component.html","../../../../../libs/components/indicators/src/lib/modules/key-info/key-info.module.ts","../../../../../libs/components/indicators/src/lib/modules/label/label.component.ts","../../../../../libs/components/indicators/src/lib/modules/label/label.component.html","../../../../../libs/components/indicators/src/lib/modules/label/label.module.ts","../../../../../libs/components/indicators/src/lib/modules/status-indicator/status-indicator.component.ts","../../../../../libs/components/indicators/src/lib/modules/status-indicator/status-indicator.component.html","../../../../../libs/components/indicators/src/lib/modules/status-indicator/status-indicator.module.ts","../../../../../libs/components/indicators/src/lib/modules/text-highlight/text-highlight.directive.ts","../../../../../libs/components/indicators/src/lib/modules/text-highlight/text-highlight.module.ts","../../../../../libs/components/indicators/src/lib/modules/tokens/token.component.ts","../../../../../libs/components/indicators/src/lib/modules/tokens/token.component.html","../../../../../libs/components/indicators/src/lib/modules/tokens/types/tokens-message-type.ts","../../../../../libs/components/indicators/src/lib/modules/tokens/tokens.component.ts","../../../../../libs/components/indicators/src/lib/modules/tokens/tokens.component.html","../../../../../libs/components/indicators/src/lib/modules/tokens/tokens.module.ts","../../../../../libs/components/indicators/src/lib/modules/wait/wait-adapter.service.ts","../../../../../libs/components/indicators/src/lib/modules/wait/wait.component.ts","../../../../../libs/components/indicators/src/lib/modules/wait/wait.component.html","../../../../../libs/components/indicators/src/lib/modules/wait/wait.module.ts","../../../../../libs/components/indicators/src/lib/modules/wait/wait-page.component.ts","../../../../../libs/components/indicators/src/lib/modules/wait/wait-page.component.html","../../../../../libs/components/indicators/src/lib/modules/wait/wait.service.ts","../../../../../libs/components/indicators/src/skyux-indicators.ts"],"sourcesContent":["/* istanbul ignore file */\n/**\n * NOTICE: DO NOT MODIFY THIS FILE!\n * The contents of this file were automatically generated by\n * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-indicators' schematic.\n * To update this file, simply rerun the command.\n */\nimport { NgModule } from '@angular/core';\nimport {\n  SkyI18nModule,\n  SkyLibResources,\n  SkyLibResourcesService,\n} from '@skyux/i18n';\n\nconst RESOURCES: Record<string, SkyLibResources> = {\n  'EN-US': {\n    skyux_alert_close: { message: 'Close the alert' },\n    skyux_alert_sr_attention: { message: 'Attention:' },\n    skyux_alert_sr_caution: { message: 'Caution:' },\n    skyux_alert_sr_completed: { message: 'Completed:' },\n    skyux_alert_sr_danger: { message: 'Danger:' },\n    skyux_alert_sr_error: { message: 'Error:' },\n    skyux_alert_sr_important_info: { message: 'Important information:' },\n    skyux_alert_sr_important_warning: { message: 'Important warning:' },\n    skyux_alert_sr_success: { message: 'Success:' },\n    skyux_alert_sr_warning: { message: 'Warning:' },\n    skyux_help_inline_button_title: { message: 'Show help content' },\n    skyux_label_sr_attention: { message: 'Attention:' },\n    skyux_label_sr_caution: { message: 'Caution:' },\n    skyux_label_sr_completed: { message: 'Completed:' },\n    skyux_label_sr_danger: { message: 'Danger:' },\n    skyux_label_sr_error: { message: 'Error:' },\n    skyux_label_sr_important_info: { message: 'Important information:' },\n    skyux_label_sr_important_warning: { message: 'Important warning:' },\n    skyux_label_sr_success: { message: 'Success:' },\n    skyux_label_sr_warning: { message: 'Warning:' },\n    skyux_status_indicator_sr_attention: { message: 'Attention:' },\n    skyux_status_indicator_sr_caution: { message: 'Caution:' },\n    skyux_status_indicator_sr_completed: { message: 'Completed:' },\n    skyux_status_indicator_sr_danger: { message: 'Danger:' },\n    skyux_status_indicator_sr_error: { message: 'Error:' },\n    skyux_status_indicator_sr_important_info: {\n      message: 'Important information:',\n    },\n    skyux_status_indicator_sr_important_warning: {\n      message: 'Important warning:',\n    },\n    skyux_status_indicator_sr_success: { message: 'Success:' },\n    skyux_status_indicator_sr_warning: { message: 'Warning:' },\n    skyux_tokens_dismiss_button_default_label: { message: 'Remove ' },\n    skyux_tokens_dismiss_button_title: { message: 'Remove item' },\n    skyux_tokens_token_dismissed: { message: '{0} removed' },\n    skyux_wait_aria_alt_text: { message: 'Loading.' },\n    skyux_wait_blocking_aria_alt_text: { message: 'Loading. Please wait.' },\n    skyux_wait_page_aria_alt_text: { message: 'Page loading.' },\n    skyux_wait_page_blocking_aria_alt_text: {\n      message: 'Page loading. Please wait.',\n    },\n    skyux_wait_screen_reader_completed_text: { message: 'Loading complete.' },\n    skyux_wait_page_screen_reader_completed_text: {\n      message: 'Page loading complete.',\n    },\n  },\n  'FR-CA': {\n    skyux_alert_close: { message: 'Fermer l’alerte' },\n    skyux_alert_sr_attention: { message: 'Attention :' },\n    skyux_alert_sr_caution: { message: 'Mise en garde :' },\n    skyux_alert_sr_completed: { message: 'Terminé :' },\n    skyux_alert_sr_danger: { message: 'Danger :' },\n    skyux_alert_sr_error: { message: 'Erreur :' },\n    skyux_alert_sr_important_info: { message: 'Information importante :' },\n    skyux_alert_sr_important_warning: { message: 'Avertissement important :' },\n    skyux_alert_sr_success: { message: 'Réussi :' },\n    skyux_alert_sr_warning: { message: 'Avertissement :' },\n    skyux_help_inline_button_title: {\n      message: 'Afficher le contenu de l’aide',\n    },\n    skyux_label_sr_attention: { message: 'Attention :' },\n    skyux_label_sr_caution: { message: 'Mise en garde :' },\n    skyux_label_sr_completed: { message: 'Terminé :' },\n    skyux_label_sr_danger: { message: 'Danger :' },\n    skyux_label_sr_error: { message: 'Erreur :' },\n    skyux_label_sr_important_info: { message: 'Information importante :' },\n    skyux_label_sr_important_warning: { message: 'Avertissement important :' },\n    skyux_label_sr_success: { message: 'Réussi :' },\n    skyux_label_sr_warning: { message: 'Avertissement :' },\n    skyux_status_indicator_sr_attention: { message: 'Attention :' },\n    skyux_status_indicator_sr_caution: { message: 'Mise en garde :' },\n    skyux_status_indicator_sr_completed: { message: 'Terminé :' },\n    skyux_status_indicator_sr_danger: { message: 'Danger :' },\n    skyux_status_indicator_sr_error: { message: 'Erreur :' },\n    skyux_status_indicator_sr_important_info: {\n      message: 'Information importante :',\n    },\n    skyux_status_indicator_sr_important_warning: {\n      message: 'Avertissement important :',\n    },\n    skyux_status_indicator_sr_success: { message: 'Réussi :' },\n    skyux_status_indicator_sr_warning: { message: 'Avertissement :' },\n    skyux_tokens_dismiss_button_default_label: { message: 'Retirer ' },\n    skyux_tokens_dismiss_button_title: { message: 'Retirer l’article' },\n    skyux_tokens_token_dismissed: { message: '{0} retiré' },\n    skyux_wait_aria_alt_text: { message: 'Chargement en cours.' },\n    skyux_wait_blocking_aria_alt_text: {\n      message: 'Chargement en cours. Veuillez patienter.',\n    },\n    skyux_wait_page_aria_alt_text: {\n      message: 'Chargement de la page en cours.',\n    },\n    skyux_wait_page_blocking_aria_alt_text: {\n      message: 'Chargement de la page en cours. Veuillez patienter.',\n    },\n    skyux_wait_screen_reader_completed_text: { message: 'Chargement terminé.' },\n    skyux_wait_page_screen_reader_completed_text: {\n      message: 'Chargement de la page terminé.',\n    },\n  },\n};\n\nSkyLibResourcesService.addResources(RESOURCES);\n\n/**\n * Import into any component library module that needs to use resource strings.\n */\n@NgModule({\n  exports: [SkyI18nModule],\n})\nexport class SkyIndicatorsResourcesModule {}\n","import { SkyIndicatorIconType } from './indicator-icon-type';\n\n/**\n * @internal\n */\nexport class SkyIndicatorIconUtility {\n  public static getIconNameForType(\n    indicatorType: SkyIndicatorIconType,\n  ): string {\n    let icon: string;\n\n    switch (indicatorType) {\n      case 'danger':\n      case 'warning':\n        icon = 'warning';\n        break;\n      case 'info':\n        icon = 'info';\n        break;\n      case 'success':\n        icon = 'success';\n        break;\n    }\n\n    return icon;\n  }\n}\n","import {\n  AfterViewChecked,\n  Component,\n  EventEmitter,\n  Input,\n  OnDestroy,\n  OnInit,\n  Output,\n  inject,\n} from '@angular/core';\nimport { SkyLogService } from '@skyux/core';\nimport { SkyLibResourcesService } from '@skyux/i18n';\nimport { SkyThemeComponentClassDirective } from '@skyux/theme';\n\nimport { Subscription } from 'rxjs';\n\nimport { SkyIndicatorDescriptionType } from '../shared/indicator-description-type';\nimport { SkyIndicatorIconType } from '../shared/indicator-icon-type';\nimport { SkyIndicatorIconUtility } from '../shared/indicator-icon-utility';\n\nconst ALERT_TYPE_DEFAULT = 'warning';\n\n@Component({\n  selector: 'sky-alert',\n  styleUrls: [\n    './alert.default.component.scss',\n    './alert.modern.component.scss',\n  ],\n  templateUrl: './alert.component.html',\n  hostDirectives: [SkyThemeComponentClassDirective],\n  standalone: false,\n})\nexport class SkyAlertComponent implements AfterViewChecked, OnInit, OnDestroy {\n  /**\n   * The style for the alert, which determines the icon and background color.\n   * The valid options are `danger`, `info`, `success`, and `warning`.\n   * @default \"warning\"\n   */\n  @Input()\n  public set alertType(value: SkyIndicatorIconType | undefined) {\n    if (value !== this.alertTypeOrDefault) {\n      this.alertTypeOrDefault = value || ALERT_TYPE_DEFAULT;\n      this.#updateAlertIcon();\n    }\n  }\n\n  /**\n   * Whether to include a close button for users to dismiss the alert.\n   * @default false\n   */\n  @Input()\n  public closeable: boolean | undefined;\n\n  /**\n   * Whether the alert is closed.\n   * @default false\n   */\n  @Input()\n  public closed: boolean | undefined;\n\n  /**\n   * The predefined text to be read by screen readers for users who cannot see the alert icon.\n   * This property is optional but will be required in future versions of SKY UX.\n   */\n  @Input()\n  public set descriptionType(value: SkyIndicatorDescriptionType | undefined) {\n    this.#_descriptionType = value;\n    this.#updateDescriptionComputed();\n  }\n\n  public get descriptionType(): SkyIndicatorDescriptionType | undefined {\n    return this.#_descriptionType;\n  }\n\n  /**\n   * The text to be read by screen readers for users who cannot see\n   * the indicator icon when `descriptionType` is `custom`.\n   */\n  @Input()\n  public set customDescription(value: string | undefined) {\n    this.#_customDescription = value;\n    this.#updateDescriptionComputed();\n  }\n\n  public get customDescription(): string | undefined {\n    return this.#_customDescription;\n  }\n\n  /**\n   * Fires when users close the alert.\n   */\n  @Output()\n  public closedChange = new EventEmitter<boolean>();\n\n  public iconName: string | undefined;\n\n  public alertTypeOrDefault: SkyIndicatorIconType = ALERT_TYPE_DEFAULT;\n\n  public descriptionComputed: string | undefined;\n\n  #_descriptionType: SkyIndicatorDescriptionType | undefined;\n\n  #_customDescription: string | undefined;\n\n  #descriptionTypeResourceSubscription: Subscription | undefined;\n  #descriptionTypeWarned: boolean | undefined;\n\n  #resources = inject(SkyLibResourcesService);\n  #logSvc = inject(SkyLogService);\n\n  public ngOnInit(): void {\n    this.#updateAlertIcon();\n  }\n\n  public ngAfterViewChecked(): void {\n    if (!this.descriptionType && !this.#descriptionTypeWarned) {\n      this.#logSvc.deprecated('SkyAlertComponent without `descriptionType`', {\n        deprecationMajorVersion: 8,\n        replacementRecommendation:\n          'Always specify a `descriptionType` property.',\n      });\n\n      this.#descriptionTypeWarned = true;\n    }\n  }\n\n  public ngOnDestroy(): void {\n    this.#unsubscribe();\n  }\n\n  public close(): void {\n    this.closed = true;\n    this.closedChange.emit(true);\n  }\n\n  #updateAlertIcon(): void {\n    this.iconName = SkyIndicatorIconUtility.getIconNameForType(\n      this.alertTypeOrDefault,\n    );\n  }\n\n  #updateDescriptionComputed(): void {\n    this.#unsubscribe();\n\n    if (this.descriptionType) {\n      switch (this.descriptionType) {\n        case 'none':\n          this.descriptionComputed = undefined;\n          break;\n        case 'custom':\n          this.descriptionComputed = this.customDescription;\n          break;\n        default:\n          this.#descriptionTypeResourceSubscription = this.#resources\n            .getString(\n              'skyux_alert_sr_' + this.descriptionType.replace(/-/g, '_'),\n            )\n            .subscribe((value) => {\n              this.descriptionComputed = value;\n            });\n\n          break;\n      }\n    } else {\n      this.descriptionComputed = undefined;\n    }\n  }\n\n  #unsubscribe(): void {\n    if (this.#descriptionTypeResourceSubscription) {\n      this.#descriptionTypeResourceSubscription.unsubscribe();\n      this.#descriptionTypeResourceSubscription = undefined;\n    }\n  }\n}\n","<div\n  class=\"sky-alert\"\n  role=\"alert\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  [hidden]=\"closed\"\n  [ngClass]=\"{\n    'sky-alert-info': alertTypeOrDefault === 'info',\n    'sky-alert-success': alertTypeOrDefault === 'success',\n    'sky-alert-warning': alertTypeOrDefault === 'warning',\n    'sky-alert-danger': alertTypeOrDefault === 'danger',\n    'sky-alert-closeable': closeable\n  }\"\n>\n  <div *skyThemeIf=\"'modern'\" aria-hidden=\"true\" class=\"sky-alert-icon\">\n    <sky-icon iconSize=\"xxl\" variant=\"solid\" [iconName]=\"iconName\" />\n  </div>\n  <div *skyThemeIf=\"'default'\" aria-hidden=\"true\" class=\"sky-alert-icon\">\n    <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n  </div>\n  @if (descriptionComputed) {\n    <span class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n  }\n  <div class=\"sky-alert-content\">\n    <ng-content />\n  </div>\n  <button\n    class=\"sky-alert-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n    [hidden]=\"!closeable\"\n    (click)=\"close()\"\n  >\n    <span aria-hidden=\"true\">\n      <sky-icon iconName=\"close\" />\n    </span>\n  </button>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule } from '@skyux/icon';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyIndicatorsResourcesModule } from '../shared/sky-indicators-resources.module';\n\nimport { SkyAlertComponent } from './alert.component';\n\n@NgModule({\n  declarations: [SkyAlertComponent],\n  imports: [\n    CommonModule,\n    SkyIconModule,\n    SkyIndicatorsResourcesModule,\n    SkyThemeModule,\n  ],\n  exports: [SkyAlertComponent],\n})\nexport class SkyAlertModule {}\n","import { Component, Input } from '@angular/core';\nimport { SkyThemeComponentClassDirective } from '@skyux/theme';\n\n/**\n * Displays a chevron icon.\n * @internal\n */\n@Component({\n  selector: 'sky-expansion-indicator',\n  styleUrls: ['./expansion-indicator.component.scss'],\n  templateUrl: './expansion-indicator.component.html',\n  hostDirectives: [SkyThemeComponentClassDirective],\n  standalone: false,\n})\nexport class SkyExpansionIndicatorComponent {\n  /**\n   * The direction that the chevron points, which can be up or down.\n   */\n  @Input()\n  public set direction(value: string | undefined) {\n    /* istanbul ignore else */\n    if (value !== this.directionOrDefault) {\n      this.directionOrDefault = value ? value : 'up';\n    }\n  }\n\n  public directionOrDefault = 'up';\n}\n","<div\n  aria-hidden=\"true\"\n  class=\"sky-expansion-indicator\"\n  [ngClass]=\"['sky-expansion-indicator-' + directionOrDefault]\"\n>\n  <span class=\"sky-expansion-indicator-glyph-container\">\n    <i class=\"sky-expansion-indicator-part sky-expansion-indicator-left\"> </i>\n    <i class=\"sky-expansion-indicator-part sky-expansion-indicator-right\"> </i>\n  </span>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyExpansionIndicatorComponent } from './expansion-indicator.component';\n\n@NgModule({\n  declarations: [SkyExpansionIndicatorComponent],\n  imports: [CommonModule, SkyThemeModule],\n  exports: [SkyExpansionIndicatorComponent],\n})\nexport class SkyExpansionIndicatorModule {}\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { SkyThemeComponentClassDirective } from '@skyux/theme';\n\n/**\n * Creates an accessible button that wraps the chevron icon.\n * @internal\n */\n@Component({\n  selector: 'sky-chevron',\n  styleUrls: [\n    './chevron.default.component.scss',\n    './chevron.modern.component.scss',\n  ],\n  templateUrl: './chevron.component.html',\n  hostDirectives: [SkyThemeComponentClassDirective],\n  standalone: false,\n})\nexport class SkyChevronComponent {\n  /**\n   * The element whose contents are controlled by the chevron.\n   * This sets the chevron's `aria-controls` attribute\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n   * For more information about the `aria-controls` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-controls).\n   */\n  @Input()\n  public ariaControls: string | undefined;\n\n  /**\n   * The ARIA label for the chevron. This sets the chevron's `aria-label` attribute to provide a text equivalent for screen readers\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n   * For more information about the `aria-label` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-label).\n   */\n  @Input()\n  public ariaLabel: string | undefined;\n\n  /**\n   * The direction that the chevron points, which can be up or down.\n   */\n  @Input()\n  public set direction(value: string | undefined) {\n    /* istanbul ignore else */\n    if (value !== this.directionOrDefault) {\n      this.directionOrDefault = value ? value : 'up';\n      /* istanbul ignore else */\n      if (this.directionOrDefault === 'up') {\n        this.ariaExpanded = true;\n      } else if (this.directionOrDefault === 'down') {\n        this.ariaExpanded = false;\n      }\n    }\n  }\n\n  /**\n   * Whether to disable the chevron button.\n   */\n  @Input()\n  public disabled = false;\n\n  /**\n   * Fires when the direction of the chevron changes.\n   */\n  @Output()\n  public directionChange = new EventEmitter<string>();\n\n  public ariaExpanded = true;\n\n  public directionOrDefault = 'up';\n\n  public chevronClick(event: Event): void {\n    event.stopPropagation();\n    this.direction = this.directionOrDefault === 'up' ? 'down' : 'up';\n    this.directionChange.emit(this.directionOrDefault);\n  }\n\n  public chevronKeyDown(event: KeyboardEvent): void {\n    /* istanbul ignore else */\n    if (event.key) {\n      switch (event.key.toLowerCase()) {\n        case ' ':\n        case 'enter':\n          this.direction = this.directionOrDefault === 'up' ? 'down' : 'up';\n          this.directionChange.emit(this.directionOrDefault);\n          event.preventDefault();\n          event.stopPropagation();\n          break;\n        default:\n          break;\n      }\n    }\n  }\n}\n","<button\n  class=\"sky-chevron\"\n  type=\"button\"\n  [attr.aria-controls]=\"ariaControls\"\n  [attr.aria-expanded]=\"ariaExpanded\"\n  [attr.aria-label]=\"ariaLabel\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"['sky-chevron-' + directionOrDefault]\"\n  [skyThemeClass]=\"{\n    'sky-btn sky-btn-icon-borderless': 'modern'\n  }\"\n  (click)=\"chevronClick($event)\"\n  (keydown)=\"chevronKeyDown($event)\"\n>\n  <sky-expansion-indicator [direction]=\"directionOrDefault\" />\n</button>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyExpansionIndicatorModule } from '../expansion-indicator/expansion-indicator.module';\nimport { SkyIndicatorsResourcesModule } from '../shared/sky-indicators-resources.module';\n\nimport { SkyChevronComponent } from './chevron.component';\n\n/**\n * @internal\n */\n@NgModule({\n  declarations: [SkyChevronComponent],\n  imports: [\n    CommonModule,\n    SkyIndicatorsResourcesModule,\n    SkyThemeModule,\n    SkyExpansionIndicatorModule,\n  ],\n  exports: [SkyChevronComponent],\n})\nexport class SkyChevronModule {}\n","import { Injectable } from '@angular/core';\n\n/**\n * Resolves information about spot illustrations.\n */\n@Injectable()\nexport abstract class SkyIllustrationResolverService {\n  /**\n   * Resolves a URL for the specified illustration name.\n   */\n  public abstract resolveUrl(name: string): Promise<string>;\n}\n","import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n} from '@angular/core';\nimport { toObservable, toSignal } from '@angular/core/rxjs-interop';\nimport { SkyThemeComponentClassDirective } from '@skyux/theme';\n\nimport { catchError, from, of, switchMap } from 'rxjs';\n\nimport { SkyIllustrationResolverService } from './illustration-resolver.service';\nimport { SkyIllustrationSize } from './illustration-size';\n\nconst pixelSizes: Record<SkyIllustrationSize, number> = {\n  sm: 48,\n  md: 64,\n  lg: 80,\n  xl: 96,\n};\n\n/**\n * Displays a spot illustration at the specified size.\n */\n@Component({\n  selector: 'sky-illustration',\n  imports: [CommonModule],\n  templateUrl: './illustration.component.html',\n  styleUrls: [\n    './illustration.default.component.scss',\n    './illustration.modern.component.scss',\n  ],\n  hostDirectives: [SkyThemeComponentClassDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyIllustrationComponent {\n  readonly #resolverSvc = inject(SkyIllustrationResolverService, {\n    optional: true,\n  });\n\n  /**\n   * The name of the illustration to display.\n   * @required\n   */\n  public readonly name = input.required<string>();\n\n  /**\n   * The size of the illustration.\n   * @required\n   */\n  public readonly size = input.required<SkyIllustrationSize>();\n\n  protected readonly url = toSignal(\n    toObservable(this.name).pipe(\n      switchMap((name) =>\n        this.#resolverSvc ? from(this.#resolverSvc.resolveUrl(name)) : of(''),\n      ),\n      catchError(() => of('')),\n    ),\n  );\n\n  protected readonly pixelSize = computed(() => pixelSizes[this.size()]);\n}\n","<img\n  alt=\"\"\n  class=\"sky-illustration-img\"\n  loading=\"lazy\"\n  [attr.data-sky-illustration-name]=\"name()\"\n  [height]=\"pixelSize()\"\n  [ngClass]=\"{\n    'sky-illustration-img-loaded': !!url()\n  }\"\n  [src]=\"url()\"\n  [width]=\"pixelSize()\"\n/>\n","import { NgModule } from '@angular/core';\n\nimport { SkyIllustrationComponent } from './illustration.component';\n\n@NgModule({\n  imports: [SkyIllustrationComponent],\n  exports: [SkyIllustrationComponent],\n})\nexport class SkyIllustrationModule {}\n","import { Component } from '@angular/core';\n\n/**\n * Specifies a label to display in smaller text under or beside the value.\n * To display a help button beside the label, include a help button element, such as `sky-help-inline`,\n * in the `sky-key-info` element and a `sky-control-help` CSS class on that help button element.\n * @required\n */\n@Component({\n  selector: 'sky-key-info-label',\n  template: '<span skyTrim><ng-content /></span>',\n  standalone: false,\n})\nexport class SkyKeyInfoLabelComponent {}\n","import { Component } from '@angular/core';\n\n/**\n * Specifies a value to display in larger, bold text.\n * @required\n */\n@Component({\n  selector: 'sky-key-info-value',\n  template: '<ng-content />',\n  standalone: false,\n})\nexport class SkyKeyInfoValueComponent {}\n","import { Component, Input, TemplateRef } from '@angular/core';\n\nimport { SkyKeyInfoLayoutType } from './key-info-layout-type';\n\n@Component({\n  selector: 'sky-key-info',\n  templateUrl: './key-info.component.html',\n  styleUrls: ['./key-info.component.scss'],\n  standalone: false,\n})\nexport class SkyKeyInfoComponent {\n  /**\n   * A help key that identifies the global help content to display. When specified, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline) button is\n   * placed beside the key info. Clicking the button invokes global help as configured by the application.\n   */\n  @Input()\n  public helpKey: string | undefined;\n\n  /**\n   * The content of the help popover. When specified, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)\n   * button is added to the key info. The help inline button displays a [popover](https://developer.blackbaud.com/skyux/components/popover)\n   * when clicked using the specified content and optional title.\n   */\n  @Input()\n  public helpPopoverContent: string | TemplateRef<unknown> | undefined;\n\n  /**\n   * The title of the help popover. This property only applies when `helpPopoverContent` is\n   * also specified.\n   */\n  @Input()\n  public helpPopoverTitle: string | undefined;\n\n  /**\n   * The layout for the key info. The vertical layout places the label under the\n   * value, while the horizontal layout places the label beside the value.\n   * @default \"vertical\"\n   */\n  @Input()\n  public layout: SkyKeyInfoLayoutType | undefined = 'vertical';\n}\n","<div\n  class=\"sky-key-info\"\n  [ngClass]=\"{\n    'sky-key-info-horizontal': layout === 'horizontal'\n  }\"\n>\n  <div class=\"sky-key-info-value sky-font-display-3\">\n    <ng-content select=\"sky-key-info-value\" />\n  </div>\n  <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n    <span #label=\"skyId\" skyId><ng-content select=\"sky-key-info-label\" /></span\n    ><span class=\"sky-control-help-container\">\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [labelledBy]=\"label.id\"\n          [helpKey]=\"helpKey\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      } @else {\n        <ng-content select=\".sky-control-help\" />\n      }\n    </span>\n  </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIdModule, SkyTrimModule } from '@skyux/core';\nimport { SkyHelpInlineModule } from '@skyux/help-inline';\n\nimport { SkyKeyInfoLabelComponent } from './key-info-label.component';\nimport { SkyKeyInfoValueComponent } from './key-info-value.component';\nimport { SkyKeyInfoComponent } from './key-info.component';\n\n@NgModule({\n  declarations: [\n    SkyKeyInfoComponent,\n    SkyKeyInfoLabelComponent,\n    SkyKeyInfoValueComponent,\n  ],\n  imports: [CommonModule, SkyTrimModule, SkyHelpInlineModule, SkyIdModule],\n  exports: [\n    SkyKeyInfoComponent,\n    SkyKeyInfoLabelComponent,\n    SkyKeyInfoValueComponent,\n  ],\n})\nexport class SkyKeyInfoModule {}\n","import {\n  AfterViewChecked,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnDestroy,\n  OnInit,\n  inject,\n} from '@angular/core';\nimport { SkyLogService } from '@skyux/core';\nimport { SkyLibResourcesService } from '@skyux/i18n';\n\nimport { Subscription } from 'rxjs/internal/Subscription';\n\nimport { SkyIndicatorDescriptionType } from '../shared/indicator-description-type';\nimport { SkyIndicatorIconUtility } from '../shared/indicator-icon-utility';\n\nimport { SkyLabelType } from './label-type';\n\nconst LABEL_TYPE_DEFAULT: SkyLabelType = 'info';\n\n@Component({\n  selector: 'sky-label',\n  templateUrl: './label.component.html',\n  styleUrls: ['./label.component.scss'],\n  standalone: false,\n})\nexport class SkyLabelComponent implements AfterViewChecked, OnDestroy, OnInit {\n  /**\n   * The type of label to display.\n   * @default 'info'\n   */\n  @Input()\n  public set labelType(value: SkyLabelType | undefined) {\n    this.labelTypeOrDefault = value === undefined ? LABEL_TYPE_DEFAULT : value;\n\n    this.#updateIcon();\n  }\n\n  /**\n   * The predefined text to be read by screen readers for users who cannot see the indicator icon.\n   * This property is optional but will be required in future versions of SKY UX.\n   */\n  @Input()\n  public set descriptionType(value: SkyIndicatorDescriptionType | undefined) {\n    this.#_descriptionType = value;\n    this.#updateDescriptionComputed();\n  }\n\n  public get descriptionType(): SkyIndicatorDescriptionType | undefined {\n    return this.#_descriptionType;\n  }\n\n  /**\n   * The text to be read by screen readers for users who cannot see\n   * the indicator icon when `descriptionType` is `custom`.\n   */\n  @Input()\n  public set customDescription(value: string | undefined) {\n    this.#_customDescription = value;\n    this.#updateDescriptionComputed();\n  }\n\n  public get customDescription(): string | undefined {\n    return this.#_customDescription;\n  }\n\n  public descriptionComputed: string | undefined;\n\n  public iconName: string | undefined;\n\n  public labelTypeOrDefault = LABEL_TYPE_DEFAULT;\n\n  #_descriptionType: SkyIndicatorDescriptionType | undefined;\n  #_customDescription: string | undefined;\n\n  #descriptionTypeResourceSubscription: Subscription | undefined;\n  #descriptionTypeWarned: boolean | undefined;\n\n  #changeDetector = inject(ChangeDetectorRef);\n  #resources = inject(SkyLibResourcesService);\n  #logSvc = inject(SkyLogService);\n\n  public ngOnInit(): void {\n    this.#updateIcon();\n  }\n\n  public ngAfterViewChecked(): void {\n    if (!this.descriptionType && !this.#descriptionTypeWarned) {\n      this.#logSvc.deprecated('SkyLabelComponent without `descriptionType`', {\n        deprecationMajorVersion: 8,\n        replacementRecommendation:\n          'Always specify a `descriptionType` property.',\n      });\n\n      this.#descriptionTypeWarned = true;\n    }\n  }\n\n  public ngOnDestroy(): void {\n    this.#unsubscribe();\n  }\n\n  #updateIcon(): void {\n    this.iconName = SkyIndicatorIconUtility.getIconNameForType(\n      this.labelTypeOrDefault,\n    );\n  }\n\n  #updateDescriptionComputed(): void {\n    this.#unsubscribe();\n\n    if (this.descriptionType) {\n      switch (this.descriptionType) {\n        case 'none':\n          this.descriptionComputed = undefined;\n          break;\n        case 'custom':\n          this.descriptionComputed = this.customDescription;\n          break;\n        default:\n          this.#descriptionTypeResourceSubscription = this.#resources\n            .getString(\n              'skyux_label_sr_' + this.descriptionType.replace(/-/g, '_'),\n            )\n            .subscribe((value) => {\n              this.descriptionComputed = value;\n              this.#changeDetector.markForCheck();\n            });\n\n          break;\n      }\n    } else {\n      this.descriptionComputed = undefined;\n    }\n  }\n\n  #unsubscribe(): void {\n    if (this.#descriptionTypeResourceSubscription) {\n      this.#descriptionTypeResourceSubscription.unsubscribe();\n      this.#descriptionTypeResourceSubscription = undefined;\n    }\n  }\n}\n","<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n  <span class=\"sky-label-icon\">\n    <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n  </span>\n  @if (descriptionComputed) {\n    <span class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n  }\n  <span class=\"sky-label-text\">\n    <ng-content />\n  </span>\n</span>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule } from '@skyux/icon';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyIndicatorsResourcesModule } from '../shared/sky-indicators-resources.module';\n\nimport { SkyLabelComponent } from './label.component';\n\n@NgModule({\n  declarations: [SkyLabelComponent],\n  imports: [\n    CommonModule,\n    SkyIconModule,\n    SkyIndicatorsResourcesModule,\n    SkyThemeModule,\n  ],\n  exports: [SkyLabelComponent],\n})\nexport class SkyLabelModule {}\n","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnInit,\n  TemplateRef,\n  inject,\n} from '@angular/core';\nimport { SkyLibResourcesService } from '@skyux/i18n';\n\nimport { SkyIndicatorDescriptionType } from '../shared/indicator-description-type';\nimport { SkyIndicatorIconType } from '../shared/indicator-icon-type';\nimport { SkyIndicatorIconUtility } from '../shared/indicator-icon-utility';\n\nconst INDICATOR_TYPE_DEFAULT: SkyIndicatorIconType = 'warning';\n/**\n * Displays status text with an icon matching the specified indicator type.\n * To display a help button beside the label, include a help button element, such as\n * `sky-help-inline`, in the `sky-status-indicator` element and a `sky-control-help`\n * CSS class on that help button element.\n */\n@Component({\n  selector: 'sky-status-indicator',\n  templateUrl: './status-indicator.component.html',\n  styleUrls: ['./status-indicator.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: false,\n})\nexport class SkyStatusIndicatorComponent implements OnInit {\n  /**\n   * The style for the status indicator, which determines the icon.\n   * @default \"warning\"\n   */\n  @Input()\n  public set indicatorType(value: SkyIndicatorIconType) {\n    this.indicatorTypeOrDefault =\n      value === undefined ? INDICATOR_TYPE_DEFAULT : value;\n\n    this.#updateIcon();\n  }\n\n  /**\n   * The predefined text to be read by screen readers for users who\n   * cannot see the indicator icon.\n   * @required\n   */\n  @Input()\n  public set descriptionType(value: SkyIndicatorDescriptionType | undefined) {\n    this.#_descriptionType = value;\n    this.#updateDescriptionComputed();\n  }\n\n  public get descriptionType(): SkyIndicatorDescriptionType | undefined {\n    return this.#_descriptionType;\n  }\n\n  /**\n   * The text to be read by screen readers for users who cannot see\n   * the indicator icon when `descriptionType` is `custom`.\n   */\n  @Input()\n  public set customDescription(value: string | undefined) {\n    this.#_customDescription = value;\n    this.#updateDescriptionComputed();\n  }\n\n  public get customDescription(): string | undefined {\n    return this.#_customDescription;\n  }\n\n  /**\n   * The content of the help popover. When specified, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)\n   * button is added to the status indicator. The help inline button displays a [popover](https://developer.blackbaud.com/skyux/components/popover)\n   * when clicked using the specified content and optional title.\n   */\n  @Input()\n  public helpPopoverContent: string | TemplateRef<unknown> | undefined;\n\n  /**\n   * The title of the help popover. This property only applies when `helpPopoverContent` is\n   * also specified.\n   */\n  @Input()\n  public helpPopoverTitle: string | undefined;\n\n  /**\n   * A help key that identifies the global help content to display. When specified, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline) button is\n   * placed beside the status indicator label. Clicking the button invokes global help as configured by the application.\n   */\n  @Input()\n  public helpKey: string | undefined;\n\n  public descriptionComputed: string | undefined;\n\n  public iconName: string | undefined;\n\n  public indicatorTypeOrDefault: SkyIndicatorIconType = INDICATOR_TYPE_DEFAULT;\n\n  #changeDetector = inject(ChangeDetectorRef);\n  #resourcesSvc = inject(SkyLibResourcesService);\n\n  #_descriptionType: SkyIndicatorDescriptionType | undefined;\n  #_customDescription: string | undefined;\n\n  public ngOnInit(): void {\n    this.#updateIcon();\n  }\n\n  #updateIcon(): void {\n    this.iconName = SkyIndicatorIconUtility.getIconNameForType(\n      this.indicatorTypeOrDefault,\n    );\n  }\n\n  #updateDescriptionComputed(): void {\n    if (this.descriptionType) {\n      switch (this.descriptionType) {\n        case 'none':\n          this.descriptionComputed = '';\n          break;\n        case 'custom':\n          this.descriptionComputed = this.customDescription;\n          break;\n        default:\n          this.#resourcesSvc\n            .getString(\n              'skyux_status_indicator_sr_' +\n                this.descriptionType.replace(/-/g, '_'),\n            )\n            .subscribe((value) => {\n              this.descriptionComputed = value;\n              this.#changeDetector.markForCheck();\n            });\n\n          break;\n      }\n    } else {\n      this.descriptionComputed = undefined;\n    }\n  }\n}\n","@if (descriptionType) {\n  <div class=\"sky-status-indicator\">\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-status-indicator-icon\"\n      [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n    >\n      <sky-icon variant=\"solid\" [iconName]=\"iconName\" />\n    </div>\n    <div class=\"sky-status-indicator-message-wrapper\">\n      @if (descriptionComputed) {\n        <span class=\"sky-screen-reader-only\">\n          {{ descriptionComputed }}\n        </span>\n      }\n      <span #message=\"skyId\" skyId class=\"sky-status-indicator-message\" skyTrim\n        ><ng-content /></span\n      ><span class=\"sky-control-help-container\">\n        @if (helpPopoverContent || helpKey) {\n          <sky-help-inline\n            [labelledBy]=\"message.id\"\n            [helpKey]=\"helpKey\"\n            [popoverTitle]=\"helpPopoverTitle\"\n            [popoverContent]=\"helpPopoverContent\"\n          />\n        } @else {\n          <ng-content select=\".sky-control-help\" />\n        }\n      </span>\n    </div>\n  </div>\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIdModule, SkyTrimModule } from '@skyux/core';\nimport { SkyHelpInlineModule } from '@skyux/help-inline';\nimport { SkyIconModule } from '@skyux/icon';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyIndicatorsResourcesModule } from '../shared/sky-indicators-resources.module';\n\nimport { SkyStatusIndicatorComponent } from './status-indicator.component';\n\n@NgModule({\n  declarations: [SkyStatusIndicatorComponent],\n  imports: [\n    CommonModule,\n    SkyHelpInlineModule,\n    SkyIconModule,\n    SkyIdModule,\n    SkyIndicatorsResourcesModule,\n    SkyThemeModule,\n    SkyTrimModule,\n  ],\n  exports: [SkyStatusIndicatorComponent],\n})\nexport class SkyStatusIndicatorModule {}\n","import {\n  AfterViewInit,\n  Directive,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnChanges,\n  OnDestroy,\n  SimpleChanges,\n  inject,\n} from '@angular/core';\nimport { SkyMutationObserverService } from '@skyux/core';\n\nconst CLASS_NAME = 'sky-highlight-mark';\nconst SPECIAL_CHAR_REGEX = /[-/\\\\^$*+?.()|[\\]{}]/g;\n\nfunction markNode(node: Text, searchRegex: RegExp): number {\n  // The search regular expression is reused across calls to markNode(), so reset\n  // it so it searches from the start of the string each time.\n  searchRegex.lastIndex = 0;\n\n  const text = node.nodeValue;\n\n  if (text) {\n    const match = searchRegex.exec(text);\n\n    if (match) {\n      // Split apart text node with mark tags in the middle on the search term.\n      const matchIndex = match.index;\n\n      const middle = node.splitText(matchIndex);\n      middle.splitText(searchRegex.lastIndex - matchIndex);\n      const middleClone = middle.cloneNode(true);\n\n      const markNode = document.createElement('mark');\n      markNode.className = CLASS_NAME;\n      markNode.appendChild(middleClone);\n\n      /* istanbul ignore else */\n      if (middle.parentNode) {\n        middle.parentNode.replaceChild(markNode, middle);\n      }\n\n      return 1;\n    }\n  }\n\n  return 0;\n}\n\nfunction markTextNodes(node: Node, searchRegex: RegExp): number {\n  if (node.nodeType === 3) {\n    return markNode(node as Text, searchRegex);\n  } else if (node.nodeType === 1 && node.childNodes) {\n    for (let i = 0; i < node.childNodes.length; i++) {\n      const childNode = node.childNodes[i];\n      i += markTextNodes(childNode, searchRegex);\n    }\n  }\n\n  return 0;\n}\n\nfunction removeHighlight(el: ElementRef): void {\n  const matchedElements = Array.from(\n    (el.nativeElement as Element).querySelectorAll(`mark.${CLASS_NAME}`),\n  );\n\n  if (matchedElements) {\n    for (const node of matchedElements) {\n      const parentNode = node.parentNode;\n\n      if (parentNode && node.firstChild) {\n        parentNode.replaceChild(node.firstChild, node);\n        parentNode.normalize();\n      }\n    }\n  }\n}\n\nfunction createSearchRegex(searchTerms: string[]): RegExp | undefined {\n  let searchRegex: RegExp | undefined;\n\n  if (searchTerms.length > 0) {\n    // Escape all the special regular expression characters by adding a\n    // preceding '\\' to each match.\n    searchTerms = searchTerms.map((searchTerm) =>\n      searchTerm.replace(SPECIAL_CHAR_REGEX, '\\\\$&'),\n    );\n\n    searchRegex = new RegExp(searchTerms.join('|'), 'gi');\n  }\n\n  return searchRegex;\n}\n\n/**\n * Highlights all matching text within the current DOM element.\n */\n@Directive({\n  selector: '[skyHighlight]',\n  standalone: true,\n})\nexport class SkyTextHighlightDirective\n  implements OnChanges, AfterViewInit, OnDestroy\n{\n  /**\n   * The text to highlight.\n   */\n  @Input()\n  public set skyHighlight(value: string | string[] | undefined) {\n    value = value || [];\n\n    if (Array.isArray(value)) {\n      this.#searchTerms = value.filter((item) => !!item);\n      // Reorder strings by their length in descending order to avoid missing matches\n      // that contain substrings of other matches.\n      this.#searchTerms.sort(function (a, b) {\n        return b.length - a.length;\n      });\n    } else {\n      this.#searchTerms = [value as string];\n    }\n  }\n\n  @HostBinding('attr.skyHighlight') public readonly highlight = true;\n\n  #existingHighlight = false;\n\n  #observer: MutationObserver | undefined;\n\n  #searchTerms: string[] = [];\n\n  #el = inject(ElementRef);\n  #observerSvc = inject(SkyMutationObserverService);\n\n  public ngOnChanges(changes: SimpleChanges): void {\n    if (changes['skyHighlight'] && !changes['skyHighlight'].firstChange) {\n      this.#highlight();\n    }\n  }\n\n  public ngAfterViewInit(): void {\n    this.#observer = this.#observerSvc.create(() => {\n      this.#highlight();\n    });\n\n    this.#highlight();\n  }\n\n  public ngOnDestroy(): void {\n    this.#disconnectObserver();\n  }\n\n  #disconnectObserver(): void {\n    if (this.#observer) {\n      this.#observer.disconnect();\n    }\n  }\n\n  #highlight(): void {\n    this.#disconnectObserver();\n\n    if (this.#existingHighlight) {\n      removeHighlight(this.#el);\n    }\n\n    const node = this.#el.nativeElement;\n\n    if (node) {\n      const searchRegex = createSearchRegex(this.#searchTerms);\n\n      // mark all matched text in the DOM\n      if (searchRegex) {\n        markTextNodes(node, searchRegex);\n        this.#existingHighlight = true;\n      }\n    }\n\n    this.#observeDom();\n  }\n\n  #observeDom(): void {\n    if (this.#observer) {\n      const config = {\n        attributes: false,\n        childList: true,\n        characterData: true,\n        subtree: true,\n      };\n\n      this.#observer.observe(this.#el.nativeElement, config);\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { SkyMutationObserverService } from '@skyux/core';\n\nimport { SkyTextHighlightDirective } from './text-highlight.directive';\n\n@NgModule({\n  imports: [SkyTextHighlightDirective],\n  exports: [SkyTextHighlightDirective],\n  providers: [SkyMutationObserverService],\n})\nexport class SkyTextHighlightModule {}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  Output,\n  ViewChild,\n  inject,\n} from '@angular/core';\nimport { SkyLiveAnnouncerService } from '@skyux/core';\nimport { SkyLibResourcesService } from '@skyux/i18n';\n\nimport { take } from 'rxjs';\n\n@Component({\n  selector: 'sky-token',\n  templateUrl: './token.component.html',\n  styleUrls: ['./token.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: false,\n})\nexport class SkyTokenComponent {\n  /**\n   * Whether to disable the token to prevent users from selecting it, dismissing it,\n   * or navigating to it with the arrow keys. When the token is disabled,\n   * users can still place focus on it using the `Tab` key.\n   * @default false\n   */\n  @Input()\n  public set disabled(value: boolean | undefined) {\n    this.#_disabled = !!value;\n  }\n\n  public get disabled(): boolean {\n    return this.#_disabled;\n  }\n\n  /**\n   * The ARIA label for the token's close button. This sets the button's `aria-label` to provide a text equivalent for screen readers\n   * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n   * For more information about the `aria-label` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-label).\n   * @default \"Remove item\"\n   */\n  @Input()\n  public ariaLabel: string | undefined;\n\n  /**\n   * Whether users can remove the token from the list by selecting the close button.\n   * @default true\n   */\n  @Input()\n  public set dismissible(value: boolean | undefined) {\n    this.#_dismissible = value !== false;\n  }\n\n  public get dismissible(): boolean {\n    return this.#_dismissible;\n  }\n\n  /**\n   * Whether users can place focus on the token using the `Tab`. This does not\n   * affect the ability to select the token, dismiss it, or navigate to it with the arrow keys.\n   * @default true\n   */\n  @Input()\n  public set focusable(value: boolean | undefined) {\n    this.tabIndex = value !== false ? 0 : -1;\n  }\n\n  /**\n   * Used by the tokens component to set the appropriate role for each token.\n   * @internal\n   */\n  @Input()\n  public role: string | undefined;\n\n  /**\n   * Fires when users click the close button.\n   */\n  @Output()\n  public dismiss = new EventEmitter<void>();\n\n  /**\n   * Fires when users place focus on the token by navigating to it with the `Tab` key.\n   */\n  @Output()\n  public tokenFocus = new EventEmitter<void>();\n\n  @ViewChild('actionButton', { read: ElementRef, static: true })\n  public actionButtonRef: ElementRef | undefined;\n\n  public isFocused = false;\n  public tokenActive = false;\n  public closeActive = false;\n  public tabIndex = 0;\n\n  #elementRef = inject(ElementRef);\n\n  readonly #liveAnnouncerSvc = inject(SkyLiveAnnouncerService);\n  readonly #resourcesSvc = inject(SkyLibResourcesService);\n\n  #_disabled = false;\n  #_dismissible = true;\n\n  protected onFocusIn(): void {\n    if (!this.isFocused) {\n      this.tokenFocus.emit();\n      this.isFocused = true;\n    }\n  }\n\n  protected onFocusOut(event: FocusEvent): void {\n    this.isFocused = this.#elementRef.nativeElement.contains(\n      event.relatedTarget,\n    );\n  }\n\n  public dismissToken(event: Event): void {\n    event.stopPropagation();\n    this.#announceState(\n      'skyux_tokens_token_dismissed',\n      this.actionButtonRef?.nativeElement.textContent.trim(),\n    );\n    this.dismiss.emit();\n  }\n\n  public focusElement(): void {\n    this.actionButtonRef?.nativeElement.focus();\n  }\n\n  pub