/**
 * INSPIRED BY: https://shoelace.style/components/icon-library
 */ import { Component , Element , Prop , Watch } from '@stencil/core' ; import { isUndefined } from '../../../utils/unit' ; import { PlayerProps } from '../../core/player/PlayerProps' ; import { withComponentRegistry } from '../../core/player/withComponentRegistry' ; import { withPlayerContext } from '../../core/player/withPlayerContext' ; import { deregisterIconLibrary , IconLibraryResolver , registerIconLibrary , } from './IconRegistry' ; /**
 * _This component was inspired by [Shoelace](https://shoelace.style/)._
 *
 * Loads and renders an SVG icon. The icon be loaded from an [icon library](./icon-library) or from
 * an absolute URL via the `src` property. Only SVGs on a local or CORS-enabled endpoint are
 * supported. If you're using more than one custom icon, it might make sense to register a custom
 * [icon library](./icon-library).
 */ @ Component ( { tag : 'vm-icon-library' , shadow : true , } ) export class IconLibrary { @ Element ( ) host ! : HTMLVmIconLibraryElement ; /**
     * The name of the icon library to register. Vime provides some default libraries out of the box
     * such as `vime`or `material`.
     */ @ Prop ( ) name ? : string ; /**
     * A function that translates an icon name to a URL where the corresponding SVG file exists.
     * The URL can be local or a CORS-enabled endpoint.
     */ @ Prop ( ) resolver ? : IconLibraryResolver ; internal @ Prop ( ) icons : PlayerProps [ 'icons' ] = 'material' ; @ Watch ( 'name' ) @ Watch ( 'resolver' ) @ Watch ( 'icons' ) handleUpdate ( ) { this . register ( ) ; } constructor ( ) { withComponentRegistry ( this ) ; withPlayerContext ( this , [ 'icons' ] ) ; } connectedCallback ( ) { this . register ( ) ; } disconnectedCallback ( ) { if ( ! isUndefined ( this . name ) ) deregisterIconLibrary ( this . name ) ; } private register ( ) { registerIconLibrary ( this . name ?? this . icons , this . name ? this . resolver : undefined ) ; } }