{"version":3,"names":["CSS","loader","loaderParts","loaderPart","loaderPartId","partId","loaderText","loaderPercentage","loaderCss","CalciteLoaderStyle0","Loader","this","formatValue","type","value","formatter","format","valueChangeHandler","complete","startsWith","connectedCallback","connectLocalized","updateFormatter","disconnectedCallback","disconnectLocalized","componentWillLoad","requestAnimationFrame","render","el","inline","label","scale","text","id","guid","radiusRatio","size","getInlineSize","getSize","radius","viewbox","isDeterminate","circumference","Math","PI","progress","remaining","valueNow","floor","determinateStyle","h","Host","key","undefined","toString","role","class","map","index","style","viewBox","cx","cy","r","formatterPropsChange","s","m","l","resolvedOptions","locale","effectiveLocale","Intl","NumberFormat"],"sources":["src/components/loader/resources.ts","src/components/loader/loader.scss?tag=calcite-loader&encapsulation=shadow","src/components/loader/loader.tsx"],"sourcesContent":["export const CSS = {\n  loader: \"loader\",\n  loaderParts: \"loader__svgs\",\n  loaderPart: \"loader__svg\",\n  loaderPartId: (partId: number) => `${CSS.loaderPart}--${partId}` as const,\n  loaderText: \"loader__text\",\n  loaderPercentage: \"loader__percentage\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-loader-font-size: Specifies the font size of the loading percentage when type is `\"determinate\"`.\n * @prop --calcite-loader-size: The width and height of a non-inline loader.\n * @prop --calcite-loader-size-inline: The width and height of an inline loader\n * @prop --calcite-loader-padding : Specifies the padding of the loader.\n */\n\n@import \"../../assets/styles/animation\";\n\n$stroke-width: 3;\n$loader-scale: 54;\n$loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --calcite-internal-duration-factor: 0;\n  }\n}\n\n:host {\n  @apply relative mx-auto hidden items-center justify-center opacity-100;\n  min-block-size: var(--calcite-loader-size);\n  font-size: var(--calcite-loader-font-size);\n  stroke: var(--calcite-color-brand);\n  stroke-width: $stroke-width;\n  fill: none;\n  transform: scale(1, 1);\n  animation: loader-color-shift scale-duration(--calcite-internal-animation-timing-slow, 2) alternate-reverse infinite\n    linear;\n  padding-block: var(--calcite-loader-padding, theme(\"spacing.16\"));\n  will-change: contents;\n}\n\n:host([scale=\"s\"]) {\n  --calcite-loader-font-size: var(--calcite-font-size--3);\n  --calcite-loader-size: theme(\"spacing.8\");\n  --calcite-loader-size-inline: theme(\"spacing.3\");\n  --calcite-internal-loader-value-line-height: 0.625rem; // 10px\n}\n\n:host([scale=\"m\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.0\");\n  --calcite-loader-size: theme(\"spacing.16\");\n  --calcite-loader-size-inline: theme(\"spacing.4\");\n  --calcite-internal-loader-value-line-height: 1.375rem; // 22px\n}\n\n:host([scale=\"l\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.2\");\n  --calcite-loader-size: theme(\"spacing.24\");\n  --calcite-loader-size-inline: theme(\"spacing.6\");\n  --calcite-internal-loader-value-line-height: 1.71875rem; // 27.5px\n}\n\n:host([no-padding]) {\n  @apply py-0;\n}\n\n:host {\n  @apply flex;\n}\n\n.loader__text {\n  @apply text-n2h\n  text-color-1\n  block\n  text-center;\n  margin-block-start: calc(var(--calcite-loader-size) + theme(\"spacing.6\"));\n}\n\n.loader__percentage {\n  @apply block text-center text-color-1;\n  font-size: var(--calcite-loader-font-size);\n  inline-size: var(--calcite-loader-size);\n  line-height: var(--calcite-internal-loader-value-line-height);\n  align-self: center;\n}\n\n.loader__svgs {\n  @apply absolute overflow-visible opacity-100;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  inset-inline-start: 50%;\n  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  animation-duration: scale-duration(--calcite-internal-animation-timing-slow, 6.66);\n  animation-name: loader-clockwise;\n  display: flex;\n}\n\n.loader__svg {\n  @apply absolute top-0 origin-center overflow-visible;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n\n  &--1 {\n    animation-name: loader-offset-1;\n  }\n  &--2 {\n    animation-name: loader-offset-2;\n  }\n  &--3 {\n    animation-name: loader-offset-3;\n  }\n}\n\n:host([type=\"determinate\"]),\n:host([type=\"determinate-value\"]) {\n  @apply animate-none;\n  stroke: var(--calcite-color-border-3);\n  .loader__svgs {\n    @apply animate-none;\n  }\n  .loader__svg--3 {\n    @apply animate-none;\n    stroke: var(--calcite-color-brand);\n    stroke-dasharray: $loader-circumference;\n    transform: rotate(-90deg);\n    transition: all var(--calcite-internal-animation-timing-fast) linear;\n  }\n}\n\n:host([inline]) {\n  @apply relative m-0 animate-none stroke-current stroke-2 py-0;\n  block-size: var(--calcite-loader-size-inline);\n  min-block-size: var(--calcite-loader-size-inline);\n  inline-size: var(--calcite-loader-size-inline);\n  margin-inline-end: calc(var(--calcite-loader-size-inline) * 0.5);\n  vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);\n}\n\n:host([inline]) .loader__svgs {\n  @apply top-0 m-0;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([inline]) .loader__svg {\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([complete]) {\n  @apply opacity-0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition:\n    opacity var(--calcite-internal-animation-timing-medium) linear 1000ms,\n    transform var(--calcite-internal-animation-timing-medium) linear 1000ms;\n}\n\n:host([complete]) .loader__svgs {\n  @apply opacity-0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition:\n    opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms,\n    transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms;\n}\n\n:host([complete]) .loader__percentage {\n  color: theme(\"colors.brand\");\n  transform: scale(1.05, 1.05);\n  transform-origin: center;\n  transition:\n    color var(--calcite-internal-animation-timing-medium) linear,\n    transform var(--calcite-internal-animation-timing-medium) linear;\n}\n\n/**\n  Segment variables\n  - i         index (1-3)\n  - size      length of the segment (0 - 100)\n  - growth    how much the segment grows during the animation\n              (size + growth should not exceed 100)\n  - duration  how long the segment takes to rotate 360° (seconds)\n*/\n@mixin generate-segment($i, $size, $growth, $duration) {\n  $circumference: calc($loader-circumference / $loader-scale) * 100;\n  $length: ($size * 0.01) * $circumference;\n  $end: $length + ($growth * 0.01) * $circumference;\n\n  .loader__svg--#{$i} {\n    stroke-dasharray: $length $circumference - $end;\n    animation-duration: $duration;\n  }\n  @keyframes loader-offset-#{$i} {\n    0% {\n      stroke-dasharray: $length $circumference - $length;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: $end $circumference - $end;\n      stroke-dashoffset: -$circumference * 0.5 - ($length - $end) * 0.5;\n    }\n    100% {\n      stroke-dasharray: $length $circumference - $length;\n      stroke-dashoffset: -$circumference;\n    }\n  }\n}\n\n@include generate-segment(1, 10, 40, scale-duration(--calcite-internal-animation-timing-slow, 4.8));\n@include generate-segment(2, 20, 30, scale-duration(--calcite-internal-animation-timing-slow, 6.4));\n@include generate-segment(3, 05, 45, scale-duration(--calcite-internal-animation-timing-slow, 7.734));\n\n@keyframes loader-color-shift {\n  0% {\n    stroke: var(--calcite-color-brand);\n  }\n  33% {\n    stroke: var(--calcite-color-brand-press);\n  }\n  66% {\n    stroke: var(--calcite-color-brand-hover);\n  }\n  100% {\n    stroke: var(--calcite-color-brand);\n  }\n}\n\n@keyframes loader-clockwise {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, State, VNode, Watch } from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport { Scale } from \"../interfaces\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { CSS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-loader\",\n  styleUrl: \"loader.scss\",\n  shadow: true,\n})\nexport class Loader implements LocalizedComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Indicates whether the component is in a loading state.\n   *\n   * @internal\n   */\n  @Prop({ mutable: true, reflect: true }) complete = false;\n\n  /** When `true`, displays smaller and appears to the left of the text. */\n  @Prop({ reflect: true }) inline = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies the component type.\n   *\n   * Use `\"indeterminate\"` if finding actual progress value is impossible. Otherwise, use `\"determinate\"` to have the value indicate the progress or `\"determinate-value\"` to have the value label displayed along the progress.\n   *\n   */\n  @Prop({ reflect: true }) type: \"indeterminate\" | \"determinate\" | \"determinate-value\" =\n    \"indeterminate\";\n\n  /** The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100. */\n  @Prop() value = 0;\n\n  @Watch(\"value\")\n  valueChangeHandler(): void {\n    this.complete = this.type.startsWith(\"determinate\") && this.value === 100;\n  }\n\n  /** Text that displays under the component's indicator. */\n  @Prop() text = \"\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n\n    this.updateFormatter();\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n  }\n\n  componentWillLoad(): void {\n    requestAnimationFrame(() => this.valueChangeHandler());\n  }\n\n  render(): VNode {\n    const { el, inline, label, scale, text, type, value } = this;\n\n    const id = el.id || guid();\n    const radiusRatio = 0.45;\n    const size = inline ? this.getInlineSize(scale) : this.getSize(scale);\n    const radius = size * radiusRatio;\n    const viewbox = `0 0 ${size} ${size}`;\n    const isDeterminate = type.startsWith(\"determinate\");\n    const circumference = 2 * radius * Math.PI;\n    const progress = (value / 100) * circumference;\n    const remaining = circumference - progress;\n    const valueNow = Math.floor(value);\n    const determinateStyle = { \"stroke-dasharray\": `${progress} ${remaining}` };\n\n    return (\n      <Host\n        aria-label={label}\n        aria-valuemax={isDeterminate ? \"100\" : undefined}\n        aria-valuemin={isDeterminate ? \"0\" : undefined}\n        aria-valuenow={isDeterminate ? valueNow.toString() : undefined}\n        id={id}\n        role=\"progressbar\"\n      >\n        <div class={CSS.loaderParts}>\n          {[1, 2, 3].map((index) => (\n            <svg\n              aria-hidden=\"true\"\n              class={{\n                [CSS.loaderPart]: true,\n                [CSS.loaderPartId(index)]: true,\n              }}\n              key={index}\n              style={isDeterminate && index === 3 ? determinateStyle : undefined}\n              viewBox={viewbox}\n            >\n              <circle cx={size / 2} cy={size / 2} r={radius} />\n            </svg>\n          ))}\n          {isDeterminate && <div class={CSS.loaderPercentage}>{this.formatValue()}</div>}\n        </div>\n        {text && <div class={CSS.loaderText}>{text}</div>}\n      </Host>\n    );\n  }\n\n  private formatValue = (): string => {\n    if (this.type !== \"determinate-value\") {\n      return `${this.value}`;\n    }\n\n    return this.formatter.format(this.value / 100);\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteLoaderElement;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  @Watch(\"type\")\n  formatterPropsChange(): void {\n    this.updateFormatter();\n  }\n\n  private formatter: Intl.NumberFormat;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Return the proper sizes based on the scale property\n   *\n   * @param scale\n   */\n  private getSize(scale: string) {\n    return {\n      s: 32,\n      m: 56,\n      l: 80,\n    }[scale];\n  }\n\n  private getInlineSize(scale: string) {\n    return {\n      s: 12,\n      m: 16,\n      l: 20,\n    }[scale];\n  }\n\n  private updateFormatter(): void {\n    if (\n      this.type !== \"determinate-value\" ||\n      this.formatter?.resolvedOptions().locale === this.effectiveLocale\n    ) {\n      return;\n    }\n\n    this.formatter = new Intl.NumberFormat(this.effectiveLocale, {\n      style: \"percent\",\n    });\n  }\n}\n"],"mappings":";;;;;gQAAO,MAAMA,EAAM,CACjBC,OAAQ,SACRC,YAAa,eACbC,WAAY,cACZC,aAAeC,GAAmB,GAAGL,EAAIG,eAAeE,IACxDC,WAAY,eACZC,iBAAkB,sBCNpB,MAAMC,EAAY,ioMAClB,MAAAC,EAAeD,E,MCUFE,EAAM,M,yBA6GTC,KAAAC,YAAc,KACpB,GAAID,KAAKE,OAAS,oBAAqB,CACrC,MAAO,GAAGF,KAAKG,O,CAGjB,OAAOH,KAAKI,UAAUC,OAAOL,KAAKG,MAAQ,IAAI,E,cAtGG,M,YAGjB,M,gCAMM,I,UAStC,gB,WAGc,E,UAQD,G,qBAoFY,E,CAzF3B,kBAAAG,GACEN,KAAKO,SAAWP,KAAKE,KAAKM,WAAW,gBAAkBR,KAAKG,QAAU,G,CAYxE,iBAAAM,GACEC,EAAiBV,MAEjBA,KAAKW,iB,CAGP,oBAAAC,GACEC,EAAoBb,K,CAGtB,iBAAAc,GACEC,uBAAsB,IAAMf,KAAKM,sB,CAGnC,MAAAU,GACE,MAAMC,GAAEA,EAAEC,OAAEA,EAAMC,MAAEA,EAAKC,MAAEA,EAAKC,KAAEA,EAAInB,KAAEA,EAAIC,MAAEA,GAAUH,KAExD,MAAMsB,EAAKL,EAAGK,IAAMC,IACpB,MAAMC,EAAc,IACpB,MAAMC,EAAOP,EAASlB,KAAK0B,cAAcN,GAASpB,KAAK2B,QAAQP,GAC/D,MAAMQ,EAASH,EAAOD,EACtB,MAAMK,EAAU,OAAOJ,KAAQA,IAC/B,MAAMK,EAAgB5B,EAAKM,WAAW,eACtC,MAAMuB,EAAgB,EAAIH,EAASI,KAAKC,GACxC,MAAMC,EAAY/B,EAAQ,IAAO4B,EACjC,MAAMI,EAAYJ,EAAgBG,EAClC,MAAME,EAAWJ,KAAKK,MAAMlC,GAC5B,MAAMmC,EAAmB,CAAE,mBAAoB,GAAGJ,KAAYC,KAE9D,OACEI,EAACC,EAAI,CAAAC,IAAA,wDACStB,EAAK,gBACFW,EAAgB,MAAQY,UAAS,gBACjCZ,EAAgB,IAAMY,UAAS,gBAC/BZ,EAAgBM,EAASO,WAAaD,UACrDpB,GAAIA,EACJsB,KAAK,eAELL,EAAA,OAAAE,IAAA,2CAAKI,MAAOxD,EAAIE,aACb,CAAC,EAAG,EAAG,GAAGuD,KAAKC,GACdR,EAAA,qBACc,OACZM,MAAO,CACL,CAACxD,EAAIG,YAAa,KAClB,CAACH,EAAII,aAAasD,IAAS,MAE7BN,IAAKM,EACLC,MAAOlB,GAAiBiB,IAAU,EAAIT,EAAmBI,UACzDO,QAASpB,GAETU,EAAA,UAAQW,GAAIzB,EAAO,EAAG0B,GAAI1B,EAAO,EAAG2B,EAAGxB,OAG1CE,GAAiBS,EAAA,OAAAE,IAAA,2CAAKI,MAAOxD,EAAIO,kBAAmBI,KAAKC,gBAE3DoB,GAAQkB,EAAA,OAAAE,IAAA,2CAAKI,MAAOxD,EAAIM,YAAa0B,G,CAyB5C,oBAAAgC,GACErD,KAAKW,iB,CAgBC,OAAAgB,CAAQP,GACd,MAAO,CACLkC,EAAG,GACHC,EAAG,GACHC,EAAG,IACHpC,E,CAGI,aAAAM,CAAcN,GACpB,MAAO,CACLkC,EAAG,GACHC,EAAG,GACHC,EAAG,IACHpC,E,CAGI,eAAAT,GACN,GACEX,KAAKE,OAAS,qBACdF,KAAKI,WAAWqD,kBAAkBC,SAAW1D,KAAK2D,gBAClD,CACA,M,CAGF3D,KAAKI,UAAY,IAAIwD,KAAKC,aAAa7D,KAAK2D,gBAAiB,CAC3DX,MAAO,W","ignoreList":[]}