import { MDCCircularProgress } from '@material/circular-progress';
import { Component, h } from '@stencil/core';
export class NkLoading {
  render() {
    return (h("div", { ref: el => (this.container = el), class: "mdc-circular-progress", role: "progressbar", "aria-label": "Loading...", "aria-valuemin": "0", "aria-valuemax": "1" },
      h("div", { class: "mdc-circular-progress__determinate-container" },
        h("svg", { class: "mdc-circular-progress__determinate-circle-graphic", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
          h("circle", { class: "mdc-circular-progress__determinate-track", cx: "12", cy: "12", r: "8.75", "stroke-width": "2.5" }),
          h("circle", { class: "mdc-circular-progress__determinate-circle", cx: "12", cy: "12", r: "8.75", "stroke-dasharray": "54.978", "stroke-dashoffset": "54.978", "stroke-width": "2.5" }))),
      h("div", { class: "mdc-circular-progress__indeterminate-container" },
        h("div", { class: "mdc-circular-progress__spinner-layer" },
          h("div", { class: "mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left" },
            h("svg", { class: "mdc-circular-progress__indeterminate-circle-graphic", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
              h("circle", { cx: "12", cy: "12", r: "8.75", "stroke-dasharray": "54.978", "stroke-dashoffset": "27.489", "stroke-width": "2.5" }))),
          h("div", { class: "mdc-circular-progress__gap-patch" },
            h("svg", { class: "mdc-circular-progress__indeterminate-circle-graphic", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
              h("circle", { cx: "12", cy: "12", r: "8.75", "stroke-dasharray": "54.978", "stroke-dashoffset": "27.489", "stroke-width": "2" }))),
          h("div", { class: "mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right" },
            h("svg", { class: "mdc-circular-progress__indeterminate-circle-graphic", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
              h("circle", { cx: "12", cy: "12", r: "8.75", "stroke-dasharray": "54.978", "stroke-dashoffset": "27.489", "stroke-width": "2.5" })))))));
  }
  componentDidLoad() {
    this.circularProgress = new MDCCircularProgress(this.container);
    this.circularProgress.determinate = false;
    this.circularProgress.open();
  }
  static get is() { return "nk-loading"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["nk-loading.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["nk-loading.css"]
  }; }
}
