carbon-custom-elements/es/components/inline-loading/inline-loading.d.ts.map

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.

{"version":3,"sources":["components/inline-loading/inline-loading.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAiC,UAAU,EAAE,MAAM,aAAa,CAAC;AAWxE;;GAEG;AACH,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,QAAQ,aAAa;IAErB;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,QAAQ,aAAa;IAErB;;OAEG;IACH,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,cACM,eAAgB,SAAQ,UAAU;IACtC;;OAEG;IACH,OAAO,CAAC,WAAW;IA2BnB;;OAEG;IAEH,MAAM,uBAA+B;IAErC,iBAAiB;IAOjB,MAAM;IAeN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,eAAe,CAAC","file":"inline-loading.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, property, customElement, LitElement } from 'lit-element';\nimport { classMap } from 'lit-html/directives/class-map';\nimport CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';\nimport ErrorFilled16 from '@carbon/icons/lib/error--filled/16';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport LOADING_TYPE from '../loading/types';\nimport getLoadingIcon from '../loading/loading-icon';\nimport styles from './inline-loading.scss';\n\nconst { prefix } = settings;\n\n/**\n * Loading state for inline loading spinner.\n */\nexport enum INLINE_LOADING_STATE {\n  /**\n   * Inactive state.\n   */\n  INACTIVE = 'inactive',\n\n  /**\n   * State for loading in progress.\n   */\n  ACTIVE = 'active',\n\n  /**\n   * State for loading successful.\n   */\n  FINISHED = 'finished',\n\n  /**\n   * State for loading failure.\n   */\n  ERROR = 'error',\n}\n\n/**\n * Lnline loading spinner.\n * @element bx-inline-loading\n */\n@customElement(`${prefix}-inline-loading`)\nclass BXInlineLoading extends LitElement {\n  /**\n   * @returns The template for the status icon.\n   */\n  private _renderIcon() {\n    const { status } = this;\n    if (status === INLINE_LOADING_STATE.ERROR) {\n      return ErrorFilled16({\n        class: `${prefix}--inline-loading--error`,\n      });\n    }\n    if (status === INLINE_LOADING_STATE.FINISHED) {\n      return CheckmarkFilled16({\n        class: `${prefix}--inline-loading__checkmark-container ${prefix}--inline-loading__svg`,\n      });\n    }\n    if (status === INLINE_LOADING_STATE.INACTIVE || status === INLINE_LOADING_STATE.ACTIVE) {\n      const classes = classMap({\n        [`${prefix}--loading`]: true,\n        [`${prefix}--loading--small`]: true,\n        [`${prefix}--loading--stop`]: status === INLINE_LOADING_STATE.INACTIVE,\n      });\n      return html`\n        <div class=\"${classes}\">\n          ${getLoadingIcon({ type: LOADING_TYPE.SMALL })}\n        </div>\n      `;\n    }\n    return undefined;\n  }\n\n  /**\n   * The loading status.\n   */\n  @property({ reflect: true })\n  status = INLINE_LOADING_STATE.ACTIVE;\n\n  connectedCallback() {\n    if (!this.hasAttribute('aria-live')) {\n      this.setAttribute('aria-live', 'assertive');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const statusIconResult = this._renderIcon();\n    const statusIconWrapperResult = !statusIconResult\n      ? undefined\n      : html`\n          <div class=\"${prefix}--inline-loading__animation\">\n            ${statusIconResult}\n          </div>\n        `;\n    return html`\n      ${statusIconWrapperResult}\n      <p class=\"${prefix}--inline-loading__text\"><slot></slot></p>\n    `;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXInlineLoading;\n"]}