{"version":3,"names":["preloaderCircleCss","EonUiPreloaderCircleStyle0","PreloaderCircle","this","schemeConfig","PRELOADER_CIRCLE_SCHEME_CONFIG","schemeMap","PRELOADER_CIRCLE_SCHEME_MAP","PRELOADER_CIRCLE_SIZE_NORMAL","componentWillLoad","applyScheme","componentDidLoad","setCssVariables","applySchemeDelegate","activeScheme","colorful","setCssVariablesDelegate","render","h","Host","key","class","pfx","small","size","PRELOADER_CIRCLE_SIZE_SMALL","viewBox","width","height","cx","cy","r"],"sources":["src/components/preloader-circle/preloader-circle.scss?tag=eon-ui-preloader-circle&encapsulation=shadow","src/components/preloader-circle/preloader-circle.tsx"],"sourcesContent":["/**\n * THEME JSON CONFIG CSS VARS\n * The following default component scss variables can be overwritten via theme configuration per brand.\n * If you need to add new one, please make sure to set a default value.\n * JSON Definition for Component with name \"Example\": testCssVar: \"20px\"\n * Resulting CSS var: $example-test-css-var: 20px;\n */\n\n$preloader-circle-theme-color1: #1ea281 !default;\n$preloader-circle-theme-color2: #e3e000 !default;\n$preloader-circle-theme-color3: #ea1b0a !default;\n$preloader-circle-theme-color4: #f59a86 !default;\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n$pi: 3.14159265358979; // PI\n$radius: 24px;\n$radiusSmall: 12px;\n$fullCircle: $radius * 2 * $pi; // 2 * PI * Radius = circumference\n$fullCircleSmall: $radiusSmall * 2 * $pi; // 2 * PI * Radius = circumference\n$duration: 1500ms;\n$durationSmall: 1250ms;\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes spin {\n  0% {\n    stroke-dashoffset: -$fullCircle;\n  }\n  100% {\n    stroke-dashoffset: -$fullCircle * 3;\n    stroke-dasharray: $fullCircle * 0.5 $fullCircle * 1.5;\n  }\n}\n\n@keyframes spinSmall {\n  0% {\n    stroke-dashoffset: -$fullCircleSmall;\n  }\n  100% {\n    stroke-dashoffset: -$fullCircleSmall * 3;\n    stroke-dasharray: $fullCircleSmall * 0.5 $fullCircleSmall * 1.5;\n  }\n}\n\n// Animate Stroke Color\n@keyframes color {\n  0%,\n  25% {\n    stroke: $preloader-circle-theme-color1;\n  }\n  26%,\n  50% {\n    stroke: $preloader-circle-theme-color2;\n  }\n  51%,\n  75% {\n    stroke: $preloader-circle-theme-color3;\n  }\n  76%,\n  100% {\n    stroke: $preloader-circle-theme-color4;\n  }\n}\n\n:host {\n  display: inline-block;\n}\n\n.#{$prefix}preloader-wrapper {\n  position: relative;\n\n  .#{$prefix}preloader-spinner {\n    width: 64px;\n    height: 64px;\n    fill: none;\n    stroke-width: 4px;\n    animation: rotate $duration linear infinite;\n\n    svg {\n      .spinner {\n        stroke: v(spinnerColor);\n        animation: spin $duration linear infinite;\n        stroke-dasharray: $fullCircle $fullCircle;\n        stroke-dashoffset: -$fullCircle;\n      }\n\n      .track {\n        stroke: v(trackColor);\n      }\n    }\n  }\n\n  &.#{$prefix}small {\n    .#{$prefix}preloader-spinner {\n      width: 40px;\n      height: 40px;\n      stroke-width: 4px;\n      animation: rotate $durationSmall linear infinite;\n\n      svg {\n        .spinner {\n          animation: spinSmall $durationSmall linear infinite;\n          stroke-dasharray: $fullCircleSmall $fullCircleSmall;\n          stroke-dashoffset: -$fullCircleSmall;\n        }\n      }\n    }\n  }\n\n  &.#{$prefix}colorful {\n    .#{$prefix}preloader-spinner {\n      svg {\n        .spinner {\n          animation: spin $duration linear infinite, color $duration * 4 linear infinite;\n        }\n      }\n    }\n\n    &.#{$prefix}small {\n      .#{$prefix}preloader-spinner {\n        svg {\n          .spinner {\n            animation: spinSmall $durationSmall linear infinite, color $durationSmall * 4 linear infinite;\n          }\n        }\n      }\n    }\n  }\n}\n","import { h, Component, Host, State, Element, Prop, Watch } from \"@stencil/core\";\nimport { ColorableComponent, applySchemeDelegate, setCssVariablesDelegate } from \"../../common/colorable-component\";\nimport {\n  PreloaderCircleSchemeDefinition,\n  PreloaderCircleSchemeName,\n  PreloaderCircleSize\n} from \"./constants/preloader-circle-types\";\nimport {\n  PRELOADER_CIRCLE_SCHEME_CONFIG,\n  PRELOADER_CIRCLE_SCHEME_MAP,\n  PRELOADER_CIRCLE_SIZE_NORMAL,\n  PRELOADER_CIRCLE_SIZE_SMALL\n} from \"./constants/preloader-circle-constants\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { PreloaderCircleSchemeConfiguration } from \"../../constants/colors\";\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n@Component({\n  tag: \"eon-ui-preloader-circle\",\n  styleUrl: \"preloader-circle.scss\",\n  shadow: true\n})\nexport class PreloaderCircle\n  implements ColorableComponent<PreloaderCircleSchemeConfiguration<PreloaderCircleSchemeDefinition>> {\n  // @InitLogging() sentryTransaction;\n  schemeConfig: PreloaderCircleSchemeConfiguration<PreloaderCircleSchemeDefinition> = PRELOADER_CIRCLE_SCHEME_CONFIG;\n  schemeMap = PRELOADER_CIRCLE_SCHEME_MAP;\n\n  /**\n   * The components active scheme. If {@link scheme} is set, it will be set to the corresponding scheme.\n   * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n   */\n  @State() activeScheme: PreloaderCircleSchemeDefinition;\n  @State() colorful: boolean;\n\n  @Element() hostElement: HTMLEonUiPreloaderCircleElement;\n\n  /**\n   * The name of the color scheme of the component.\n   * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n   */\n  @Prop({ reflect: true }) scheme: PreloaderCircleSchemeName;\n\n  /**\n   * Defines radius for preloader\n   */\n  @Prop({ reflect: true }) size: PreloaderCircleSize = PRELOADER_CIRCLE_SIZE_NORMAL;\n\n  componentWillLoad() {\n    this.applyScheme();\n  }\n\n  componentDidLoad() {\n    this.setCssVariables();\n  }\n\n  @Watch(\"scheme\")\n  applyScheme() {\n    applySchemeDelegate(this);\n    this.activeScheme === this.schemeConfig.colorful ? (this.colorful = true) : (this.colorful = false);\n  }\n\n  @Watch(\"activeScheme\")\n  setCssVariables(): void {\n    setCssVariablesDelegate(this);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={pfx({\n            \"preloader-wrapper\": true,\n            colorful: !!this.colorful,\n            small: this.size === PRELOADER_CIRCLE_SIZE_SMALL\n          })}\n        >\n          <div class={pfx(\"preloader-spinner\")}>\n            {this.size === PRELOADER_CIRCLE_SIZE_SMALL ? (\n              <svg viewBox=\"0 0 40 40\" width=\"40\" height=\"40\">\n                <circle class=\"track\" cx=\"20\" cy=\"20\" r=\"12\"></circle>\n                <circle class=\"spinner\" cx=\"20\" cy=\"20\" r=\"12\"></circle>\n              </svg>\n            ) : (\n              <svg viewBox=\"0 0 64 64\" width=\"64\" height=\"64\">\n                <circle class=\"track\" cx=\"32\" cy=\"32\" r=\"24\"></circle>\n                <circle class=\"spinner\" cx=\"32\" cy=\"32\" r=\"24\"></circle>\n              </svg>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oTAAA,MAAMA,EAAqB,+khDAC3B,MAAAC,EAAeD,E,MCqBFE,EAAe,M,yBAG1BC,KAAAC,aAAoFC,EACpFF,KAAAG,UAAYC,E,oFAoByCC,C,CAErD,iBAAAC,GACEN,KAAKO,a,CAGP,gBAAAC,GACER,KAAKS,iB,CAIP,WAAAF,GACEG,EAAoBV,MACpBA,KAAKW,eAAiBX,KAAKC,aAAaW,SAAYZ,KAAKY,SAAW,KAASZ,KAAKY,SAAW,K,CAI/F,eAAAH,GACEI,EAAwBb,K,CAG1B,MAAAc,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAOC,EAAI,CACT,oBAAqB,KACrBP,WAAYZ,KAAKY,SACjBQ,MAAOpB,KAAKqB,OAASC,KAGvBP,EAAA,OAAAE,IAAA,2CAAKC,MAAOC,EAAI,sBACbnB,KAAKqB,OAASC,EACbP,EAAA,OAAKQ,QAAQ,YAAYC,MAAM,KAAKC,OAAO,MACzCV,EAAA,UAAQG,MAAM,QAAQQ,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCb,EAAA,UAAQG,MAAM,UAAUQ,GAAG,KAAKC,GAAG,KAAKC,EAAE,QAG5Cb,EAAA,OAAKQ,QAAQ,YAAYC,MAAM,KAAKC,OAAO,MACzCV,EAAA,UAAQG,MAAM,QAAQQ,GAAG,KAAKC,GAAG,KAAKC,EAAE,OACxCb,EAAA,UAAQG,MAAM,UAAUQ,GAAG,KAAKC,GAAG,KAAKC,EAAE,U"}