@xui/components/fesm2022/xui-components.mjs.map

xUI Components for Angular

{"version":3,"file":"xui-components.mjs","sources":["../../../../libs/xui/src/badge/badge.types.ts","../../../../libs/xui/src/badge/badge.ts","../../../../libs/xui/src/badge/badge.configure.ts","../../../../libs/xui/src/banner/banner.types.ts","../../../../libs/xui/src/icon/trusted-types.ts","../../../../libs/xui/src/icon/icon-registry.ts","../../../../libs/xui/src/icon/icon.ts","../../../../libs/xui/src/banner/banner.ts","../../../../libs/xui/src/banner/banner.html","../../../../libs/xui/src/config/config.ts","../../../../libs/xui/src/config/config.service.ts","../../../../libs/xui/src/config/configure.ts","../../../../libs/xui/src/config/config.module.ts","../../../../libs/xui/src/utils/basic.ts","../../../../libs/xui/src/utils/delay.ts","../../../../libs/xui/src/button/button-group.ts","../../../../libs/xui/src/button/button.ts","../../../../libs/xui/src/utils/focus.service.ts","../../../../libs/xui/src/button/button.module.ts","../../../../libs/xui/src/card/card.ts","../../../../libs/xui/src/card/card.html","../../../../libs/xui/src/card/card-actions.ts","../../../../libs/xui/src/card/card-title.ts","../../../../libs/xui/src/card/card.module.ts","../../../../libs/xui/src/checkbox/checkbox.ts","../../../../libs/xui/src/context-menu/context-menu.ts","../../../../libs/xui/src/context-menu/menu-trigger-for.ts","../../../../libs/xui/src/context-menu/context-menu-trigger-for.ts","../../../../libs/xui/src/context-menu/context-menu.module.ts","../../../../libs/xui/src/input/input.types.ts","../../../../libs/xui/src/input/input.ts","../../../../libs/xui/src/input/input.html","../../../../libs/xui/src/input/input-group.ts","../../../../libs/xui/src/input/input-addon.ts","../../../../libs/xui/src/input/input.module.ts","../../../../libs/xui/src/date-picker/date-picker.ts","../../../../libs/xui/src/date-picker/date-picker.html","../../../../libs/xui/src/decagram/decagram.ts","../../../../libs/xui/src/divider/divider.ts","../../../../libs/xui/src/docker-manager/docker-manager.ts","../../../../libs/xui/src/docker-manager/docker-manager.module.ts","../../../../libs/xui/src/drawer/drawer.ts","../../../../libs/xui/src/drawer/drawer.html","../../../../libs/xui/src/drawer/drawer-item-template.ts","../../../../libs/xui/src/drawer/drawer-header-template.ts","../../../../libs/xui/src/drawer/drawer-footer-template.ts","../../../../libs/xui/src/drawer/drawer.module.ts","../../../../libs/xui/src/graph-view/graph-view.service.ts","../../../../libs/xui/src/graph-view/node.ts","../../../../libs/xui/src/graph-view/node.html","../../../../libs/xui/src/graph-view/graph-view.ts","../../../../libs/xui/src/graph-view/graph-view.html","../../../../libs/xui/src/graph-view/graph-view.module.ts","../../../../libs/xui/src/image-upload/image-upload-cropper.ts","../../../../libs/xui/src/image-upload/image-upload.ts","../../../../libs/xui/src/image-upload/image-upload.html","../../../../libs/xui/src/image-upload/image-upload.module.ts","../../../../libs/xui/src/layout/sider.ts","../../../../libs/xui/src/layout/layout.ts","../../../../libs/xui/src/layout/header.ts","../../../../libs/xui/src/layout/content.ts","../../../../libs/xui/src/layout/footer.ts","../../../../libs/xui/src/layout/layout.module.ts","../../../../libs/xui/src/menu/menu.service.ts","../../../../libs/xui/src/menu/menu.ts","../../../../libs/xui/src/menu/submenu.service.ts","../../../../libs/xui/src/menu/submenu/submenu.ts","../../../../libs/xui/src/menu/submenu/submenu.html","../../../../libs/xui/src/menu/menu-group.ts","../../../../libs/xui/src/menu/menu-item.ts","../../../../libs/xui/src/menu/menu.module.ts","../../../../libs/xui/src/panelbar/panelbar.types.ts","../../../../libs/xui/src/panelbar/panelbar-item.ts","../../../../libs/xui/src/panelbar/panelbar-item.html","../../../../libs/xui/src/panelbar/panelbar.ts","../../../../libs/xui/src/panelbar/panelbar.html","../../../../libs/xui/src/panelbar/panelbar-item-template.ts","../../../../libs/xui/src/panelbar/panelbar-item-title.ts","../../../../libs/xui/src/panelbar/panelbar-item-content.ts","../../../../libs/xui/src/panelbar/panelbar.module.ts","../../../../libs/xui/src/popover/popover.ts","../../../../libs/xui/src/popover/popover.html","../../../../libs/xui/src/popover/popover-trigger-for.ts","../../../../libs/xui/src/popover/popover.module.ts","../../../../libs/xui/src/progress/progress.ts","../../../../libs/xui/src/progress/progress.html","../../../../libs/xui/src/radio/radio.types.ts","../../../../libs/xui/src/radio/radio.ts","../../../../libs/xui/src/radio/radio-group.ts","../../../../libs/xui/src/radio/radio.module.ts","../../../../libs/xui/src/radio-list/radio-list.types.ts","../../../../libs/xui/src/radio-list/radio-option.ts","../../../../libs/xui/src/radio-list/radio-list.ts","../../../../libs/xui/src/radio-list/radio-list.module.ts","../../../../libs/xui/src/select/select.types.ts","../../../../libs/xui/src/select/option.ts","../../../../libs/xui/src/select/select.ts","../../../../libs/xui/src/select/select.html","../../../../libs/xui/src/select/select.module.ts","../../../../libs/xui/src/utils/animations.ts","../../../../libs/xui/src/snack-bar/snack-bar-ref.ts","../../../../libs/xui/src/snack-bar/snack-bar.types.ts","../../../../libs/xui/src/snack-bar/simple-snack-bar.ts","../../../../libs/xui/src/snack-bar/snack-bar-animations.ts","../../../../libs/xui/src/snack-bar/snack-bar-container.ts","../../../../libs/xui/src/snack-bar/snack-bar-container.html","../../../../libs/xui/src/snack-bar/snack-bar.ts","../../../../libs/xui/src/snack-bar/snack-bar.module.ts","../../../../libs/xui/src/settings/settings-snackbar.ts","../../../../libs/xui/src/settings/settings.ts","../../../../libs/xui/src/settings/settings.html","../../../../libs/xui/src/settings/settings.module.ts","../../../../libs/xui/src/tooltip/tooltip.ts","../../../../libs/xui/src/tooltip/tooltip.directive.ts","../../../../libs/xui/src/tooltip/tooltip.module.ts","../../../../libs/xui/src/slider/slider.ts","../../../../libs/xui/src/slider/slider.html","../../../../libs/xui/src/spinner/spinner.ts","../../../../libs/xui/src/status/status.ts","../../../../libs/xui/src/switch/switch.ts","../../../../libs/xui/src/switch/switch.html","../../../../libs/xui/src/tabs/tab.types.ts","../../../../libs/xui/src/tabs/tab.ts","../../../../libs/xui/src/tabs/tab-group.ts","../../../../libs/xui/src/tabs/tab.module.ts","../../../../libs/xui/src/textarea/textarea.ts","../../../../libs/xui/src/textarea/textarea.html","../../../../libs/xui/src/time-picker/time-picker.types.ts","../../../../libs/xui/src/time-picker/time-picker.ts","../../../../libs/xui/src/time-picker/time-picker.html","../../../../libs/xui/src/toggle/toggle.ts","../../../../libs/xui/src/xui-components.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nexport type BadgeColor = 'primary' | 'primary-alt' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\n\nexport const XUI_BADGE_DEFAULT_OPTIONS = new InjectionToken<XuiBadgeOptions>('XUI_BADGE_DEFAULT_OPTIONS');\n\nexport interface XuiBadgeOptions {\n  color?: BadgeColor;\n}\n","import { ChangeDetectionStrategy, Component, Inject, input, Optional } from '@angular/core';\nimport { BadgeColor, XUI_BADGE_DEFAULT_OPTIONS, XuiBadgeOptions } from './badge.types';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  standalone: true,\n  imports: [CommonModule],\n  selector: 'xui-badge',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<ng-content />`,\n  host: {\n    class: 'x-badge',\n    '[class]': '\"x-badge-\" + color()'\n  }\n})\nexport class XuiBadge {\n  color = input<BadgeColor>(this.options?.color ?? 'primary');\n\n  constructor(@Optional() @Inject(XUI_BADGE_DEFAULT_OPTIONS) private options?: XuiBadgeOptions) {}\n}\n","import { Directive, Inject, Input } from '@angular/core';\nimport { BadgeColor, XUI_BADGE_DEFAULT_OPTIONS, XuiBadgeOptions } from './badge.types';\n\n@Directive({\n  standalone: true,\n  selector: '[xuiBadgeConfigure]',\n  providers: [{ provide: XUI_BADGE_DEFAULT_OPTIONS, useFactory: () => ({ color: 'primary' }) }]\n})\nexport class XuiBadgeConfigure {\n  @Input() set xuiBadgeColor(color: BadgeColor) {\n    this.options.color = color;\n  }\n\n  constructor(@Inject(XUI_BADGE_DEFAULT_OPTIONS) private options: XuiBadgeOptions) {}\n}\n","import { InjectionToken } from '@angular/core';\n\nexport type BannerType = 'info' | 'success' | 'warning' | 'alert';\n\nexport const XUI_BANNER_DEFAULT_OPTIONS = new InjectionToken<XuiBannerOptions>('XUI_BANNER_DEFAULT_OPTIONS');\n\nexport interface XuiBannerOptions {\n  type?: BannerType;\n  dismissible?: boolean;\n}\n","/**\n * @fileoverview\n * A module to facilitate use of a Trusted Types policy internally within\n * Angular Material. It lazily constructs the Trusted Types policy, providing\n * helper utilities for promoting strings to Trusted Types. When Trusted Types\n * are not available, strings are used as a fallback.\n * @security All use of this module is security-sensitive and should go through\n * security review.\n */\n\nexport declare interface TrustedHTML {\n  __brand__: 'TrustedHTML';\n}\n\nexport declare interface TrustedTypePolicyFactory {\n  createPolicy(\n    policyName: string,\n    policyOptions: {\n      createHTML?: (input: string) => string;\n    }\n  ): TrustedTypePolicy;\n}\n\nexport declare interface TrustedTypePolicy {\n  createHTML(input: string): TrustedHTML;\n}\n\n/**\n * The Trusted Types policy, or null if Trusted Types are not\n * enabled/supported, or undefined if the policy has not been created yet.\n */\nlet policy: TrustedTypePolicy | null | undefined;\n\n/**\n * Returns the Trusted Types policy, or null if Trusted Types are not\n * enabled/supported. The first call to this function will create the policy.\n */\nfunction getPolicy(): TrustedTypePolicy | null {\n  if (policy === undefined) {\n    policy = null;\n    if (typeof window !== 'undefined') {\n      const ttWindow = window as unknown as { trustedTypes?: TrustedTypePolicyFactory };\n      if (ttWindow.trustedTypes !== undefined) {\n        policy = ttWindow.trustedTypes.createPolicy('angular#components', {\n          createHTML: (s: string) => s\n        });\n      }\n    }\n  }\n  return policy;\n}\n\n/**\n * Unsafely promote a string to a TrustedHTML, falling back to strings when\n * Trusted Types are not available.\n * @security This is a security-sensitive function; any use of this function\n * must go through security review. In particular, it must be assured that the\n * provided string will never cause an XSS vulnerability if used in a context\n * that will be interpreted as HTML by a browser, e.g. when assigning to\n * element.innerHTML.\n */\nexport function trustedHTMLFromString(html: string): TrustedHTML {\n  return getPolicy()?.createHTML(html) || (html as unknown as TrustedHTML);\n}\n","import { DOCUMENT } from '@angular/common';\nimport { HttpClient, HttpErrorResponse } from '@angular/common/http';\nimport {\n  ErrorHandler,\n  Inject,\n  Injectable,\n  InjectionToken,\n  OnDestroy,\n  Optional,\n  SecurityContext,\n  SkipSelf\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-browser';\nimport { forkJoin, Observable, of as observableOf, throwError as observableThrow } from 'rxjs';\nimport { catchError, finalize, map, share, tap } from 'rxjs/operators';\nimport { TrustedHTML, trustedHTMLFromString } from './trusted-types';\n\n/**\n * Returns an exception to be thrown in the case when attempting to\n * load an icon with a name that cannot be found.\n * @docs-private\n */\nexport function getXuiIconNameNotFoundError(iconName: string): Error {\n  return Error(`Unable to find icon with the name \"${iconName}\"`);\n}\n\n/**\n * Returns an exception to be thrown when the consumer attempts to use\n * `<xui-icon>` without including @angular/common/http.\n * @docs-private\n */\nexport function getXuiIconNoHttpProviderError(): Error {\n  return Error(\n    'Could not find HttpClient provider for use with xUI icons. ' +\n      'Please include the HttpClientModule from @angular/common/http in your ' +\n      'app imports.'\n  );\n}\n\n/**\n * Returns an exception to be thrown when a URL couldn't be sanitized.\n * @param url URL that was attempted to be sanitized.\n * @docs-private\n */\nexport function getXuiIconFailedToSanitizeUrlError(url: SafeResourceUrl): Error {\n  return Error(\n    `The URL provided to XuiIconRegistry was not trusted as a resource URL ` +\n      `via Angular's DomSanitizer. Attempted URL was \"${url}\".`\n  );\n}\n\n/**\n * Returns an exception to be thrown when an HTML string couldn't be sanitized.\n * @param literal HTML that was attempted to be sanitized.\n * @docs-private\n */\nexport function getXuiIconFailedToSanitizeLiteralError(literal: SafeHtml): Error {\n  return Error(\n    `The literal provided to XuiIconRegistry was not trusted as safe HTML by ` +\n      `Angular's DomSanitizer. Attempted literal was \"${literal}\".`\n  );\n}\n\n/** Options that can be used to configure how an icon or the icons in an icon set are presented. */\nexport interface IconOptions {\n  /** View box to set on the icon. */\n  viewBox?: string;\n\n  /** Whether to fetch the icon or icon set using HTTP credentials. */\n  withCredentials?: boolean;\n}\n\n/**\n * Function that will be invoked by the icon registry when trying to resolve the\n * URL from which to fetch an icon. The returned URL will be used to make a request for the icon.\n */\nexport type IconResolver = (name: string, namespace: string) => SafeResourceUrl | SafeResourceUrlWithIconOptions | null;\n\n/** Object that specifies a URL from which to fetch an icon and the options to use for it. */\nexport interface SafeResourceUrlWithIconOptions {\n  url: SafeResourceUrl;\n  options: IconOptions;\n}\n\n/**\n * Configuration for an icon, including the URL and possibly the cached SVG element.\n * @docs-private\n */\nclass SvgIconConfig {\n  svgElement!: SVGElement | null;\n\n  constructor(\n    public url: SafeResourceUrl,\n    public svgText: TrustedHTML | null,\n    public options?: IconOptions\n  ) {}\n}\n\n/** Icon configuration whose content has already been loaded. */\ntype LoadedSvgIconConfig = SvgIconConfig & { svgText: TrustedHTML };\n\n/**\n * Service to register and display icons used by the `<xui-icon>` component.\n * - Registers icon URLs by namespace and name.\n * - Registers icon set URLs by namespace.\n * - Registers aliases for CSS classes, for use with icon fonts.\n * - Loads icons from URLs and extracts individual icons from icon sets.\n */\n@Injectable({ providedIn: 'root' })\nexport class XuiIconRegistry implements OnDestroy {\n  private _document: Document;\n\n  /**\n   * URLs and cached SVG elements for individual icons. Keys are of the format \"[namespace]:[icon]\".\n   */\n  private _svgIconConfigs = new Map<string, SvgIconConfig>();\n\n  /**\n   * SvgIconConfig objects and cached SVG elements for icon sets, keyed by namespace.\n   * Multiple icon sets can be registered under the same namespace.\n   */\n  private _iconSetConfigs = new Map<string, SvgIconConfig[]>();\n\n  /** Cache for icons loaded by direct URLs. */\n  private _cachedIconsByUrl = new Map<string, SVGElement>();\n\n  /** In-progress icon fetches. Used to coalesce multiple requests to the same URL. */\n  private _inProgressUrlFetches = new Map<string, Observable<TrustedHTML>>();\n\n  /** Map from font identifiers to their CSS class names. Used for icon fonts. */\n  private _fontCssClassesByAlias = new Map<string, string>();\n\n  /** Registered icon resolver functions. */\n  private _resolvers: IconResolver[] = [];\n\n  /**\n   * The CSS classes to apply when an `<xui-icon>` component has no icon name, url, or font\n   * specified. The default 'xui-icons' value assumes that the material icon font has been\n   * loaded as described at https://google.github.io/material-design-icons/#icon-font-for-the-web\n   */\n  private _defaultFontSetClass = ['material-symbols', 'x-ligature-font'];\n\n  constructor(\n    @Optional() private _httpClient: HttpClient,\n    private _sanitizer: DomSanitizer,\n    @Optional() @Inject(DOCUMENT) document: any,\n    private readonly _errorHandler: ErrorHandler\n  ) {\n    this._document = document;\n  }\n\n  /**\n   * Registers an icon by URL in the default namespace.\n   * @param iconName Name under which the icon should be registered.\n   * @param url\n   * @param options\n   */\n  addSvgIcon(iconName: string, url: SafeResourceUrl, options?: IconOptions): this {\n    return this.addSvgIconInNamespace('', iconName, url, options);\n  }\n\n  /**\n   * Registers an icon using an HTML string in the default namespace.\n   * @param iconName Name under which the icon should be registered.\n   * @param literal SVG source of the icon.\n   * @param options\n   */\n  addSvgIconLiteral(iconName: string, literal: SafeHtml, options?: IconOptions): this {\n    return this.addSvgIconLiteralInNamespace('', iconName, literal, options);\n  }\n\n  /**\n   * Registers an icon by URL in the specified namespace.\n   * @param namespace Namespace in which the icon should be registered.\n   * @param iconName Name under which the icon should be registered.\n   * @param url\n   * @param options\n   */\n  addSvgIconInNamespace(namespace: string, iconName: string, url: SafeResourceUrl, options?: IconOptions): this {\n    return this._addSvgIconConfig(namespace, iconName, new SvgIconConfig(url, null, options));\n  }\n\n  /**\n   * Registers an icon resolver function with the registry. The function will be invoked with the\n   * name and namespace of an icon when the registry tries to resolve the URL from which to fetch\n   * the icon. The resolver is expected to return a `SafeResourceUrl` that points to the icon,\n   * an object with the icon URL and icon options, or `null` if the icon is not supported. Resolvers\n   * will be invoked in the order in which they have been registered.\n   * @param resolver Resolver function to be registered.\n   */\n  addSvgIconResolver(resolver: IconResolver): this {\n    this._resolvers.push(resolver);\n    return this;\n  }\n\n  /**\n   * Registers an icon using an HTML string in the specified namespace.\n   * @param namespace Namespace in which the icon should be registered.\n   * @param iconName Name under which the icon should be registered.\n   * @param literal SVG source of the icon.\n   * @param options\n   */\n  addSvgIconLiteralInNamespace(namespace: string, iconName: string, literal: SafeHtml, options?: IconOptions): this {\n    const cleanLiteral = this._sanitizer.sanitize(SecurityContext.HTML, literal);\n    if (!cleanLiteral) {\n      throw getXuiIconFailedToSanitizeLiteralError(literal);\n    }\n\n    // Security: The literal is passed in as SafeHtml, and is thus trusted.\n    const trustedLiteral = trustedHTMLFromString(cleanLiteral);\n    return this._addSvgIconConfig(namespace, iconName, new SvgIconConfig('', trustedLiteral, options));\n  }\n\n  /**\n   * Registers an icon set by URL in the default namespace.\n   * @param url\n   * @param options\n   */\n  addSvgIconSet(url: SafeResourceUrl, options?: IconOptions): this {\n    return this.addSvgIconSetInNamespace('', url, options);\n  }\n\n  /**\n   * Registers an icon set using an HTML string in the default namespace.\n   * @param literal SVG source of the icon set.\n   * @param options\n   */\n  addSvgIconSetLiteral(literal: SafeHtml, options?: IconOptions): this {\n    return this.addSvgIconSetLiteralInNamespace('', literal, options);\n  }\n\n  /**\n   * Registers an icon set by URL in the specified namespace.\n   * @param namespace Namespace in which to register the icon set.\n   * @param url\n   * @param options\n   */\n  addSvgIconSetInNamespace(namespace: string, url: SafeResourceUrl, options?: IconOptions): this {\n    return this._addSvgIconSetConfig(namespace, new SvgIconConfig(url, null, options));\n  }\n\n  /**\n   * Registers an icon set using an HTML string in the specified namespace.\n   * @param namespace Namespace in which to register the icon set.\n   * @param literal SVG source of the icon set.\n   * @param options\n   */\n  addSvgIconSetLiteralInNamespace(namespace: string, literal: SafeHtml, options?: IconOptions): this {\n    const cleanLiteral = this._sanitizer.sanitize(SecurityContext.HTML, literal);\n\n    if (!cleanLiteral) {\n      throw getXuiIconFailedToSanitizeLiteralError(literal);\n    }\n\n    // Security: The literal is passed in as SafeHtml, and is thus trusted.\n    const trustedLiteral = trustedHTMLFromString(cleanLiteral);\n    return this._addSvgIconSetConfig(namespace, new SvgIconConfig('', trustedLiteral, options));\n  }\n\n  /**\n   * Defines an alias for CSS class names to be used for icon fonts. Creating an xuiIcon\n   * component with the alias as the fontSet input will cause the class name to be applied\n   * to the `<xui-icon>` element.\n   *\n   * If the registered font is a ligature font, then don't forget to also include the special\n   * class `x-ligature-font` to allow the usage via attribute. So register like this:\n   *\n   * ```ts\n   * iconRegistry.registerFontClassAlias('f1', 'font1 x-ligature-font');\n   * ```\n   *\n   * And use like this:\n   *\n   * ```html\n   * <xui-icon fontSet=\"f1\" fontIcon=\"home\"></xui-icon>\n   * ```\n   *\n   * @param alias Alias for the font.\n   * @param classNames Class names override to be used instead of the alias.\n   */\n  registerFontClassAlias(alias: string, classNames: string = alias): this {\n    this._fontCssClassesByAlias.set(alias, classNames);\n    return this;\n  }\n\n  /**\n   * Returns the CSS class name associated with the alias by a previous call to\n   * registerFontClassAlias. If no CSS class has been associated, returns the alias unmodified.\n   */\n  classNameForFontAlias(alias: string): string {\n    return this._fontCssClassesByAlias.get(alias) || alias;\n  }\n\n  /**\n   * Sets the CSS classes to be used for icon fonts when an `<xui-icon>` component does not\n   * have a fontSet input value, and is not loading an icon by name or URL.\n   */\n  setDefaultFontSetClass(...classNames: string[]): this {\n    this._defaultFontSetClass = classNames;\n    return this;\n  }\n\n  /**\n   * Returns the CSS classes to be used for icon fonts when an `<xui-icon>` component does not\n   * have a fontSet input value, and is not loading an icon by name or URL.\n   */\n  getDefaultFontSetClass(): string[] {\n    return this._defaultFontSetClass;\n  }\n\n  /**\n   * Returns an Observable that produces the icon (as an `<svg>` DOM element) from the given URL.\n   * The response from the URL may be cached so this will not always cause an HTTP request, but\n   * the produced element will always be a new copy of the originally fetched icon. (That is,\n   * it will not contain any modifications made to elements previously returned).\n   *\n   * @param safeUrl URL from which to fetch the SVG icon.\n   */\n  getSvgIconFromUrl(safeUrl: SafeResourceUrl): Observable<SVGElement> {\n    const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl);\n    if (!url) {\n      throw getXuiIconFailedToSanitizeUrlError(safeUrl);\n    }\n\n    const cachedIcon = this._cachedIconsByUrl.get(url);\n    if (cachedIcon) {\n      return observableOf(cloneSvg(cachedIcon));\n    }\n\n    return this._loadSvgIconFromConfig(new SvgIconConfig(safeUrl, null)).pipe(\n      tap(svg => this._cachedIconsByUrl.set(url!, svg)),\n      map(svg => cloneSvg(svg))\n    );\n  }\n\n  /**\n   * Returns an Observable that produces the icon (as an `<svg>` DOM element) with the given name\n   * and namespace. The icon must have been previously registered with addIcon or addIconSet;\n   * if not, the Observable will throw an error.\n   *\n   * @param name Name of the icon to be retrieved.\n   * @param namespace Namespace in which to look for the icon.\n   */\n  getNamedSvgIcon(name: string, namespace = ''): Observable<SVGElement> {\n    const key = iconKey(namespace, name);\n    let config = this._svgIconConfigs.get(key);\n\n    // Return (copy of) cached icon if possible.\n    if (config) {\n      return this._getSvgFromConfig(config);\n    }\n\n    // Otherwise try to resolve the config from one of the resolver functions.\n    config = this._getIconConfigFromResolvers(namespace, name);\n\n    if (config) {\n      this._svgIconConfigs.set(key, config);\n      return this._getSvgFromConfig(config);\n    }\n\n    // See if we have any icon sets registered for the namespace.\n    const iconSetConfigs = this._iconSetConfigs.get(namespace);\n\n    if (iconSetConfigs) {\n      return this._getSvgFromIconSetConfigs(name, iconSetConfigs);\n    }\n\n    return observableThrow(getXuiIconNameNotFoundError(key));\n  }\n\n  ngOnDestroy() {\n    this._resolvers = [];\n    this._svgIconConfigs.clear();\n    this._iconSetConfigs.clear();\n    this._cachedIconsByUrl.clear();\n  }\n\n  /**\n   * Returns the cached icon for a SvgIconConfig if available, or fetches it from its URL if not.\n   */\n  private _getSvgFromConfig(config: SvgIconConfig): Observable<SVGElement> {\n    if (config.svgText) {\n      // We already have the SVG element for this icon, return a copy.\n      return observableOf(cloneSvg(this._svgElementFromConfig(config as LoadedSvgIconConfig)));\n    } else {\n      // Fetch the icon from the config's URL, cache it, and return a copy.\n      return this._loadSvgIconFromConfig(config).pipe(map(svg => cloneSvg(svg)));\n    }\n  }\n\n  /**\n   * Attempts to find an icon with the specified name in any of the SVG icon sets.\n   * First searches the available cached icons for a nested element with a matching name, and\n   * if found copies the element to a new `<svg>` element. If not found, fetches all icon sets\n   * that have not been cached, and searches again after all fetches are completed.\n   * The returned Observable produces the SVG element if possible, and throws\n   * an error if no icon with the specified name can be found.\n   */\n  private _getSvgFromIconSetConfigs(name: string, iconSetConfigs: SvgIconConfig[]): Observable<SVGElement> {\n    // For all the icon set SVG elements we've fetched, see if any contain an icon with the\n    // requested name.\n    const namedIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs);\n\n    if (namedIcon) {\n      // We could cache namedIcon in _svgIconConfigs, but since we have to make a copy every\n      // time anyway, there's probably not much advantage compared to just always extracting\n      // it from the icon set.\n      return observableOf(namedIcon);\n    }\n\n    // Not found in any cached icon sets. If there are icon sets with URLs that we haven't\n    // fetched, fetch them now and look for iconName in the results.\n    const iconSetFetchRequests: Observable<TrustedHTML | null>[] = iconSetConfigs\n      .filter(iconSetConfig => !iconSetConfig.svgText)\n      .map(iconSetConfig => {\n        return this._loadSvgIconSetFromConfig(iconSetConfig).pipe(\n          catchError((err: HttpErrorResponse) => {\n            const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, iconSetConfig.url);\n\n            // Swallow errors fetching individual URLs so the\n            // combined Observable won't necessarily fail.\n            const errorMessage = `Loading icon set URL: ${url} failed: ${err.message}`;\n            this._errorHandler.handleError(new Error(errorMessage));\n            return observableOf(null);\n          })\n        );\n      });\n\n    // Fetch all the icon set URLs. When the requests complete, every IconSet should have a\n    // cached SVG element (unless the request failed), and we can check again for the icon.\n    return forkJoin(iconSetFetchRequests).pipe(\n      map(() => {\n        const foundIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs);\n\n        if (!foundIcon) {\n          throw getXuiIconNameNotFoundError(name);\n        }\n\n        return foundIcon;\n      })\n    );\n  }\n\n  /**\n   * Searches the cached SVG elements for the given icon sets for a nested icon element whose \"id\"\n   * tag matches the specified name. If found, copies the nested element to a new SVG element and\n   * returns it. Returns null if no matching element is found.\n   */\n  private _extractIconWithNameFromAnySet(iconName: string, iconSetConfigs: SvgIconConfig[]): SVGElement | null {\n    // Iterate backwards, so icon sets added later have precedence.\n    for (let i = iconSetConfigs.length - 1; i >= 0; i--) {\n      const config = iconSetConfigs[i];\n\n      // Parsing the icon set's text into an SVG element can be expensive. We can avoid some of\n      // the parsing by doing a quick check using `indexOf` to see if there's any chance for the\n      // icon to be in the set. This won't be 100% accurate, but it should help us avoid at least\n      // some of the parsing.\n      if (config.svgText && config.svgText.toString().indexOf(iconName) > -1) {\n        const svg = this._svgElementFromConfig(config as LoadedSvgIconConfig);\n        const foundIcon = this._extractSvgIconFromSet(svg, iconName, config.options);\n        if (foundIcon) {\n          return foundIcon;\n        }\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Loads the content of the icon URL specified in the SvgIconConfig and creates an SVG element\n   * from it.\n   */\n  private _loadSvgIconFromConfig(config: SvgIconConfig): Observable<SVGElement> {\n    return this._fetchIcon(config).pipe(\n      tap(svgText => (config.svgText = svgText)),\n      map(() => this._svgElementFromConfig(config as LoadedSvgIconConfig))\n    );\n  }\n\n  /**\n   * Loads the content of the icon set URL specified in the\n   * SvgIconConfig and attaches it to the config.\n   */\n  private _loadSvgIconSetFromConfig(config: SvgIconConfig): Observable<TrustedHTML | null> {\n    if (config.svgText) {\n      return observableOf(null);\n    }\n\n    return this._fetchIcon(config).pipe(tap(svgText => (config.svgText = svgText)));\n  }\n\n  /**\n   * Searches the cached element of the given SvgIconConfig for a nested icon element whose \"id\"\n   * tag matches the specified name. If found, copies the nested element to a new SVG element and\n   * returns it. Returns null if no matching element is found.\n   */\n  private _extractSvgIconFromSet(iconSet: SVGElement, iconName: string, options?: IconOptions): SVGElement | null {\n    // Use the `id=\"iconName\"` syntax in order to escape special\n    // characters in the ID (versus using the #iconName syntax).\n    const iconSource = iconSet.querySelector(`[id=\"${iconName}\"]`);\n\n    if (!iconSource) {\n      return null;\n    }\n\n    // Clone the element and remove the ID to prevent multiple elements from being added\n    // to the page with the same ID.\n    const iconElement = iconSource.cloneNode(true) as Element;\n    iconElement.removeAttribute('id');\n\n    // If the icon node is itself an <svg> node, clone and return it directly. If not, set it as\n    // the content of a new <svg> node.\n    if (iconElement.nodeName.toLowerCase() === 'svg') {\n      return this._setSvgAttributes(iconElement as SVGElement, options);\n    }\n\n    // If the node is a <symbol>, it won't be rendered, so we have to convert it into <svg>. Note\n    // that the same could be achieved by referring to it via <use href=\"#id\">, however the <use>\n    // tag is problematic on Firefox, because it needs to include the current page path.\n    if (iconElement.nodeName.toLowerCase() === 'symbol') {\n      return this._setSvgAttributes(this._toSvgElement(iconElement), options);\n    }\n\n    // createElement('SVG') doesn't work as expected; the DOM ends up with\n    // the correct nodes, but the SVG content doesn't render. Instead, we\n    // have to create an empty SVG node using innerHTML and append its content.\n    // Elements created using DOMParser.parseFromString have the same problem.\n    // http://stackoverflow.com/questions/23003278/svg-innerhtml-in-firefox-can-not-display\n    const svg = this._svgElementFromString(trustedHTMLFromString('<svg></svg>'));\n    // Clone the node, so we don't remove it from the parent icon set element.\n    svg.appendChild(iconElement);\n\n    return this._setSvgAttributes(svg, options);\n  }\n\n  /**\n   * Creates a DOM element from the given SVG string.\n   */\n  private _svgElementFromString(str: TrustedHTML): SVGElement {\n    const div = this._document.createElement('DIV');\n    div.innerHTML = str as unknown as string;\n    const svg = div.querySelector('svg') as SVGElement;\n\n    // TODO: add an ngDevMode check\n    if (!svg) {\n      throw Error('<svg> tag not found');\n    }\n\n    return svg;\n  }\n\n  /**\n   * Converts an element into an SVG node by cloning all of its children.\n   */\n  private _toSvgElement(element: Element): SVGElement {\n    const svg = this._svgElementFromString(trustedHTMLFromString('<svg></svg>'));\n    const attributes = element.attributes;\n\n    // Copy over all the attributes from the `symbol` to the new SVG, except the id.\n    for (let i = 0; i < attributes.length; i++) {\n      const { name, value } = attributes[i];\n\n      if (name !== 'id') {\n        svg.setAttribute(name, value);\n      }\n    }\n\n    for (let i = 0; i < element.childNodes.length; i++) {\n      if (element.childNodes[i].nodeType === this._document.ELEMENT_NODE) {\n        svg.appendChild(element.childNodes[i].cloneNode(true));\n      }\n    }\n\n    return svg;\n  }\n\n  /**\n   * Sets the default attributes for an SVG element to be used as an icon.\n   */\n  private _setSvgAttributes(svg: SVGElement, options?: IconOptions): SVGElement {\n    svg.setAttribute('fit', '');\n    svg.setAttribute('height', '100%');\n    svg.setAttribute('width', '100%');\n    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');\n    svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable.\n\n    if (options && options.viewBox) {\n      svg.setAttribute('viewBox', options.viewBox);\n    }\n\n    return svg;\n  }\n\n  /**\n   * Returns an Observable which produces the string contents of the given icon. Results may be\n   * cached, so future calls with the same URL may not cause another HTTP request.\n   */\n  private _fetchIcon(iconConfig: SvgIconConfig): Observable<TrustedHTML> {\n    const { url: safeUrl, options } = iconConfig;\n    const withCredentials = options?.withCredentials ?? false;\n\n    if (!this._httpClient) {\n      throw getXuiIconNoHttpProviderError();\n    }\n\n    if (safeUrl == null) {\n      throw Error(`Cannot fetch icon from URL \"${safeUrl}\".`);\n    }\n\n    const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl);\n    if (!url) {\n      throw getXuiIconFailedToSanitizeUrlError(safeUrl);\n    }\n\n    // Store in-progress fetches to avoid sending a duplicate request for a URL when there is\n    // already a request in progress for that URL. It's necessary to call share() on the\n    // Observable returned by http.get() so that multiple subscribers don't cause multiple XHRs.\n    const inProgressFetch = this._inProgressUrlFetches.get(url);\n    if (inProgressFetch) {\n      return inProgressFetch;\n    }\n\n    const req = this._httpClient.get(url, { responseType: 'text', withCredentials }).pipe(\n      map(svg => {\n        // Security: This SVG is fetched from a SafeResourceUrl, and is thus\n        // trusted HTML.\n        return trustedHTMLFromString(svg);\n      }),\n      finalize(() => this._inProgressUrlFetches.delete(url)),\n      share()\n    );\n\n    this._inProgressUrlFetches.set(url, req);\n    return req;\n  }\n\n  /**\n   * Registers an icon config by name in the specified namespace.\n   * @param namespace Namespace in which to register the icon config.\n   * @param iconName Name under which to register the config.\n   * @param config Config to be registered.\n   */\n  private _addSvgIconConfig(namespace: string, iconName: string, config: SvgIconConfig): this {\n    this._svgIconConfigs.set(iconKey(namespace, iconName), config);\n    return this;\n  }\n\n  /**\n   * Registers an icon set config in the specified namespace.\n   * @param namespace Namespace in which to register the icon config.\n   * @param config Config to be registered.\n   */\n  private _addSvgIconSetConfig(namespace: string, config: SvgIconConfig): this {\n    const configNamespace = this._iconSetConfigs.get(namespace);\n\n    if (configNamespace) {\n      configNamespace.push(config);\n    } else {\n      this._iconSetConfigs.set(namespace, [config]);\n    }\n\n    return this;\n  }\n\n  /** Parses a config's text into an SVG element. */\n  private _svgElementFromConfig(config: LoadedSvgIconConfig): SVGElement {\n    if (!config.svgElement) {\n      const svg = this._svgElementFromString(config.svgText);\n      this._setSvgAttributes(svg, config.options);\n      config.svgElement = svg;\n    }\n\n    return config.svgElement;\n  }\n\n  /** Tries to create an icon config through the registered resolver functions. */\n  private _getIconConfigFromResolvers(namespace: string, name: string): SvgIconConfig | undefined {\n    for (let i = 0; i < this._resolvers.length; i++) {\n      const result = this._resolvers[i](name, namespace);\n\n      if (result) {\n        return isSafeUrlWithOptions(result)\n          ? new SvgIconConfig(result.url, null, result.options)\n          : new SvgIconConfig(result, null);\n      }\n    }\n\n    return undefined;\n  }\n}\n\n/** @docs-private */\nexport function ICON_REGISTRY_PROVIDER_FACTORY(\n  parentRegistry: XuiIconRegistry,\n  httpClient: HttpClient,\n  sanitizer: DomSanitizer,\n  errorHandler: ErrorHandler,\n  document?: any\n) {\n  return parentRegistry || new XuiIconRegistry(httpClient, sanitizer, document, errorHandler);\n}\n\n/** @docs-private */\nexport const ICON_REGISTRY_PROVIDER = {\n  // If there is already an XuiIconRegistry available, use that. Otherwise, provide a new one.\n  provide: XuiIconRegistry,\n  deps: [\n    [new Optional(), new SkipSelf(), XuiIconRegistry],\n    [new Optional(), HttpClient],\n    DomSanitizer,\n    ErrorHandler,\n    [new Optional(), DOCUMENT as InjectionToken<any>]\n  ],\n  useFactory: ICON_REGISTRY_PROVIDER_FACTORY\n};\n\n/** Clones an SVGElement while preserving type information. */\nfunction cloneSvg(svg: SVGElement): SVGElement {\n  return svg.cloneNode(true) as SVGElement;\n}\n\n/** Returns the cache key to use for an icon namespace and name. */\nfunction iconKey(namespace: string, name: string) {\n  return namespace + ':' + name;\n}\n\nfunction isSafeUrlWithOptions(value: any): value is SafeResourceUrlWithIconOptions {\n  return !!(value.url && value.options);\n}\n","import { DOCUMENT } from '@angular/common';\nimport {\n  AfterViewChecked,\n  Attribute,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ErrorHandler,\n  inject,\n  Inject,\n  InjectionToken,\n  Input,\n  OnDestroy,\n  OnInit,\n  Optional\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { take } from 'rxjs/operators';\nimport { XuiIconRegistry } from './icon-registry';\n\nexport type IconColor = 'primary';\n\n/** Default options for `xui-icon`.  */\nexport interface XuiIconDefaultOptions {\n  /** Default color of the icon. */\n  color?: IconColor;\n  /** Font set that the icon is a part of. */\n  fontSet?: string;\n}\n\n/** Injection token to be used to override the default options for `xui-icon`. */\n// TODO: use config service\nexport const XUI_ICON_DEFAULT_OPTIONS = new InjectionToken<XuiIconDefaultOptions>('XUI_ICON_DEFAULT_OPTIONS');\n\n/**\n * Injection token used to provide the current location to `XuiIcon`.\n * Used to handle server-side rendering and to stub out during unit tests.\n * @docs-private\n */\nexport const XUI_ICON_LOCATION = new InjectionToken<XuiIconLocation>('xui-icon-location', {\n  providedIn: 'root',\n  factory: XUI_ICON_LOCATION_FACTORY\n});\n\n/**\n * Stubbed out location for `XuiIcon`.\n * @docs-private\n */\nexport interface XuiIconLocation {\n  getPathname: () => string;\n}\n\n/** @docs-private */\nexport function XUI_ICON_LOCATION_FACTORY(): XuiIconLocation {\n  const _document = inject(DOCUMENT);\n  const _location = _document ? _document.location : null;\n\n  return {\n    // Note that this needs to be a function, rather than a property, because Angular\n    // will only resolve it once, but we want the current path on each call.\n    getPathname: () => (_location ? _location.pathname + _location.search : '')\n  };\n}\n\n/** SVG attributes that accept a FuncIRI (e.g. `url(<something>)`). */\nconst funcIriAttributes = [\n  'clip-path',\n  'color-profile',\n  'src',\n  'cursor',\n  'fill',\n  'filter',\n  'marker',\n  'marker-start',\n  'marker-mid',\n  'marker-end',\n  'mask',\n  'stroke'\n];\n\n/** Selector that can be used to find all elements that are using a `FuncIRI`. */\nconst funcIriAttributeSelector = funcIriAttributes.map(attr => `[${attr}]`).join(', ');\n\n/** Regex that can be used to extract the id out of a FuncIRI. */\nconst funcIriPattern = /^url\\(['\"]?#(.*?)['\"]?\\)$/;\n\n/**\n * Component to display an icon. It can be used in the following ways:\n *\n * - Specify the svgIcon input to load an SVG icon from a URL previously registered with the\n *   addSvgIcon, addSvgIconInNamespace, addSvgIconSet, or addSvgIconSetInNamespace methods of\n *   XuiIconRegistry. If the svgIcon value contains a colon it is assumed to be in the format\n *   \"[namespace]:[name]\", if not the value will be the name of an icon in the default namespace.\n *   Examples:\n *     `<xui-icon svgIcon=\"left-arrow\"></xui-icon>\n *     <xui-icon svgIcon=\"animals:cat\"></xui-icon>`\n *\n * - Use a font ligature as an icon by putting the ligature text in the `fontIcon` attribute or the\n *   content of the `<xui-icon>` component. If you register a custom font class, don't forget to also\n *   include the special class `x-ligature-font`. It is recommended to use the attribute alternative\n *   to prevent the ligature text to be selectable and to appear in search engine results.\n *   By default, the Material icons font is used as described at\n *   http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an\n *   alternate font by setting the fontSet input to either the CSS class to apply to use the\n *   desired font, or to an alias previously registered with XuiIconRegistry.registerFontClassAlias.\n *   Examples:\n *     `<xui-icon fontIcon=\"home\"></xui-icon>\n *     <xui-icon>home</xui-icon>\n *     <xui-icon fontSet=\"myfont\" fontIcon=\"sun\"></xui-icon>\n *     <xui-icon fontSet=\"myfont\">sun</xui-icon>`\n *\n * - Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the\n *   font, and the fontIcon input to specify the icon. Typically, the fontIcon will specify a\n *   CSS class which causes the glyph to be displayed via a :before selector, as in\n *   https://fortawesome.github.io/Font-Awesome/examples/\n *   Example:\n *     `<xui-icon fontSet=\"fa\" fontIcon=\"alarm\"></xui-icon>`\n */\n@Component({\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'xui-icon',\n  exportAs: 'xuiIcon',\n  host: {\n    role: 'img',\n    class: 'x-icon notranslate',\n    '[class]': 'color ? \"x-icon-\" + color : \"\"',\n    '[attr.data-xui-icon-type]': '_usingFontIcon() ? \"font\" : \"svg\"',\n    '[attr.data-xui-icon-name]': '_svgName || icon',\n    '[attr.data-xui-icon-namespace]': '_svgNamespace || fontSet',\n    '[attr.fontIcon]': '_usingFontIcon() ? icon : null',\n    '[class.x-icon-inline]': 'inline',\n    '[class.x-icon-no-color]': 'color !== \"primary\" && color !== \"accent\" && color !== \"warn\"' // TODO\n  }\n})\nexport class XuiIcon implements OnInit, AfterViewChecked, OnDestroy {\n  private readonly _defaultColor!: IconColor;\n  private _color!: string | null | undefined;\n  private _svgIcon!: string;\n  private _fontSet!: string;\n  private _fontIcon!: string;\n  private _previousFontSetClass: string[] = [];\n  private _previousFontIconClass!: string;\n\n  _svgName!: string | null;\n  _svgNamespace!: string | null;\n\n  /** Keeps track of the current page path. */\n  private _previousPath?: string;\n\n  /** Keeps track of the elements and attributes that we've prefixed with the current path. */\n  private _elementsWithExternalReferences?: Map<Element, { name: string; value: string }[]>;\n\n  /** Subscription to the current in-progress SVG icon request. */\n  private _currentIconFetch = Subscription.EMPTY;\n\n  /** Color of the icon. */\n  @Input()\n  get color() {\n    return this._color || this._defaultColor;\n  }\n\n  set color(value: string | null | undefined) {\n    this._color = value;\n  }\n\n  /**\n   * Whether the icon should be inlined, automatically sizing the icon to match the font size of\n   * the element the icon is contained in.\n   */\n  @Input({ transform: booleanAttribute })\n  inline = false;\n\n  /** Name of the icon in the SVG icon set. */\n  @Input()\n  get svgIcon(): string {\n    return this._svgIcon;\n  }\n\n  set svgIcon(value: string) {\n    if (value !== this._svgIcon) {\n      if (value) {\n        this._updateSvgIcon(value);\n      } else if (this._svgIcon) {\n        this._clearSvgElement();\n      }\n      this._svgIcon = value;\n    }\n  }\n\n  /** Font set that the icon is a part of. */\n  @Input()\n  get fontSet(): string {\n    return this._fontSet;\n  }\n\n  set fontSet(value: string) {\n    const newValue = this._cleanupFontValue(value);\n\n    if (newValue !== this._fontSet) {\n      this._fontSet = newValue;\n      this._updateFontIconClasses();\n    }\n  }\n\n  /** Name of an icon within a font set. */\n  @Input()\n  get icon(): string {\n    return this._fontIcon;\n  }\n\n  set icon(value: string) {\n    const newValue = this._cleanupFontValue(value);\n\n    if (newValue !== this._fontIcon) {\n      this._fontIcon = newValue;\n      this._updateFontIconClasses();\n    }\n  }\n\n  constructor(\n    readonly _elementRef: ElementRef<HTMLElement>,\n    private _iconRegistry: XuiIconRegistry,\n    @Attribute('aria-hidden') ariaHidden: string,\n    @Inject(XUI_ICON_LOCATION) private _location: XuiIconLocation,\n    private readonly _errorHandler: ErrorHandler,\n    @Optional()\n    @Inject(XUI_ICON_DEFAULT_OPTIONS)\n    defaults?: XuiIconDefaultOptions\n  ) {\n    if (defaults) {\n      if (defaults.color) {\n        this.color = this._defaultColor = defaults.color;\n      }\n\n      if (defaults.fontSet) {\n        this.fontSet = defaults.fontSet;\n      }\n    }\n\n    // If the user has not explicitly set aria-hidden, mark the icon as hidden, as this is\n    // the right thing to do for the majority of icon use-cases.\n    if (!ariaHidden) {\n      _elementRef.nativeElement.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  /**\n   * Splits an svgIcon binding value into its icon set and icon name components.\n   * Returns a 2-element array of [(icon set), (icon name)].\n   * The separator for the two fields is ':'. If there is no separator, an empty\n   * string is returned for the icon set and the entire value is returned for\n   * the icon name. If the argument is falsy, returns an array of two empty strings.\n   * Throws an error if the name contains two or more ':' separators.\n   * Examples:\n   *   `'social:cake' -> ['social', 'cake']\n   *   'penguin' -> ['', 'penguin']\n   *   null -> ['', '']\n   *   'a:b:c' -> (throws Error)`\n   */\n  private _splitIconName(iconName: string): [string, string] {\n    if (!iconName) {\n      return ['', ''];\n    }\n    const parts = iconName.split(':');\n    switch (parts.length) {\n      case 1:\n        return ['', parts[0]]; // Use default namespace.\n      case 2:\n        return <[string, string]>parts;\n      default:\n        throw Error(`Invalid icon name: \"${iconName}\"`); // TODO: add an ngDevMode check\n    }\n  }\n\n  ngOnInit() {\n    // Update font classes because ngOnChanges won't be called if none of the inputs are present,\n    // e.g. <xui-icon>arrow</xui-icon> In this case we need to add a CSS class for the default font.\n    this._updateFontIconClasses();\n  }\n\n  ngAfterViewChecked() {\n    const cachedElements = this._elementsWithExternalReferences;\n\n    if (cachedElements && cachedElements.size) {\n      const newPath = this._location.getPathname();\n\n      // We need to check whether the URL has changed on each change detection since\n      // the browser doesn't have an API that will let us react on link clicks and\n      // we can't depend on the Angular router. The references need to be updated,\n      // because while most browsers don't care whether the URL is correct after\n      // the first render, Safari will break if the user navigates to a different\n      // page and the SVG isn't re-rendered.\n      if (newPath !== this._previousPath) {\n        this._previousPath = newPath;\n        this._prependPathToReferences(newPath);\n      }\n    }\n  }\n\n  ngOnDestroy() {\n    this._currentIconFetch.unsubscribe();\n\n    if (this._elementsWithExternalReferences) {\n      this._elementsWithExternalReferences.clear();\n    }\n  }\n\n  _usingFontIcon(): boolean {\n    return !this.svgIcon;\n  }\n\n  private _setSvgElement(svg: SVGElement) {\n    this._clearSvgElement();\n\n    // Note: we do this fix here, rather than the icon registry, because the\n    // references have to point to the URL at the time that the icon was created.\n    const path = this._location.getPathname();\n    this._previousPath = path;\n    this._cacheChildrenWithExternalReferences(svg);\n    this._prependPathToReferences(path);\n    this._elementRef.nativeElement.appendChild(svg);\n  }\n\n  private _clearSvgElement() {\n    const layoutElement: HTMLElement = this._elementRef.nativeElement;\n    let ch