@telekom/scale-components/dist/components/scale-loading-spinner.js

Scale is the digital design system for Telekom products and experiences.

import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as classnames } from './index2.js';

const loadingSpinnerCss = ":host{display:inline-flex;--size-outer-small:24px;--size-outer-large:48px;--size-inner-small:24px;--size-inner-large:48px;--line-height-size-small:24px;--line-height-size-large:48px;--font:var(--telekom-text-style-ui-bold);--color-circle-primary:var(--telekom-color-primary-standard);--color-circle-primary-inner:var(--telekom-color-ui-subtle);--color-text-primary:var(--telekom-color-text-and-icon-additional);--color-circle-white:var(--telekom-color-ui-base);--color-circle-white-inner:var(--telekom-color-ui-regular);--color-text-white:var(--telekom-color-text-and-icon-white-standard);--spacing-vertical:var(--telekom-spacing-composition-space-05);--spacing-horizontal:var(--telekom-spacing-composition-space-06)}.sr-only{position:absolute;left:-10000px;overflow:hidden}.spinner{display:inline-flex;align-items:center}.spinner.spinner--alignment-vertical{flex-direction:column}.spinner .spinner__text{font:var(--telekom-text-style-ui-bold);color:var(--color-text-primary)}.spinner.spinner--variant-white .spinner__text{color:var(--color-text-white)}.spinner.spinner--alignment-horizontal .spinner__text{display:flex;align-self:center;margin-left:var(--spacing-horizontal)}.spinner.spinner--alignment-horizontal.spinner--size-small .spinner__text{line-height:var(--line-height-size-small)}.spinner.spinner--alignment-horizontal.spinner--size-large .spinner__text{line-height:var(--line-height-size-large)}.spinner.spinner--alignment-vertical .spinner__text{margin-top:var(--spacing-vertical)}.spinner.spinner--alignment-vertical.spinner--size-small .spinner__container{height:var(--size-inner-small);width:var(--size-inner-small)}.spinner.spinner--alignment-vertical.spinner--size-large .spinner__container{height:var(--size-outer-large);width:var(--size-outer-large)}.spinner.spinner--alignment-horizontal.spinner--size-small .spinner__container{height:var(--size-inner-small);width:var(--size-inner-small);text-align:left}.spinner.spinner--alignment-horizontal.spinner--size-large .spinner__container{height:var(--size-outer-large);width:var(--size-outer-large);text-align:left}.spinner .spinner__container{align-items:center;display:inline-flex}.spinner .spinner__container .spinner__circle{animation:rotate 2s linear infinite;z-index:2;position:absolute;width:var(--size-inner-small);height:var(--size-inner-small)}.spinner .spinner__container .spinner__circle-background{animation:rotate 2s linear infinite;position:absolute;width:var(--size-outer-small);height:var(--size-outer-small)}.spinner.spinner--size-large .spinner__container .spinner__circle-background{width:var(--size-outer-large);height:var(--size-outer-large)}.spinner.spinner--size-large .spinner__container .spinner__circle{width:var(--size-inner-large);height:var(--size-inner-large)}.spinner.spinner--variant-white .spinner__container .spinner__circle-background .path{stroke:var(--color-circle-white-inner)}.spinner .spinner__container .spinner__circle-background .path{stroke:var(--color-circle-primary-inner)}.spinner.spinner--variant-white .spinner__container .spinner__circle .path{stroke:white}.spinner .spinner__container .spinner__circle .path{animation:dash 1.5s ease-in-out infinite;stroke:var(--color-circle-primary)}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.spinner .spinner__container .spinner__circle-background .path{stroke:none}.spinner .spinner__container .spinner__circle .path{stroke:white}.spinner.spinner--variant-white .spinner__container .spinner__circle-background .path{stroke:none}.spinner.spinner--variant-white .spinner__container .spinner__circle .path{stroke:white}}";

let i = 0;
const LoadingSpinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    // todo the variant white should be renamed for dark mode
    this.variant = 'primary';
    this.alignment = 'horizontal';
    this.size = 'small';
  }
  componentWillLoad() {
    i++;
  }
  render() {
    return (h(Host, null, h("div", { part: this.getBasePartMap(), class: this.getCssClassMap() }, h("div", { part: "container", class: "spinner__container" }, h("svg", { class: "spinner__circle", viewBox: "0 0 50 50", "aria-hidden": "true" }, h("circle", { class: "path", cx: "25", cy: "25", r: "22.5", fill: "none", "stroke-width": "4" })), h("svg", { class: "spinner__circle-background", viewBox: "0 0 50 50", "aria-hidden": "true" }, h("circle", { class: "path", cx: "25", cy: "25", r: "22.5", fill: "none", "stroke-width": "4" }))), h("div", { class: "sr-only", "aria-live": "polite", id: `spinner-label-${i}` }, this.accessibilityTitle
      ? this.accessibilityTitle
      : this.text || 'Loading'), this.text ? (h("div", { part: "text", class: "spinner__text", "aria-hidden": "true" }, this.text)) : (h("div", null)))));
  }
  getBasePartMap() {
    return this.getCssOrBasePartMap('basePart');
  }
  getCssClassMap() {
    return this.getCssOrBasePartMap('css');
  }
  getCssOrBasePartMap(mode) {
    const name = 'spinner';
    const prefix = mode === 'basePart' ? '' : `${name}--`;
    return classnames(name, this.alignment && `${prefix}alignment-${this.alignment}`, this.variant && `${prefix}variant-${this.variant}`, this.size && `${prefix}size-${this.size}`, this.text && `${prefix}text`);
  }
  static get style() { return loadingSpinnerCss; }
}, [1, "scale-loading-spinner", {
    "variant": [1],
    "alignment": [1],
    "text": [1],
    "accessibilityTitle": [1, "accessibility-title"],
    "size": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["scale-loading-spinner"];
  components.forEach(tagName => { switch (tagName) {
    case "scale-loading-spinner":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LoadingSpinner);
      }
      break;
  } });
}

const ScaleLoadingSpinner = LoadingSpinner;
const defineCustomElement = defineCustomElement$1;

export { ScaleLoadingSpinner, defineCustomElement };