'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b7293b2f.js');
const theme = require('./theme-1ac31ccf.js');

const spinnerCss = ":host{display:inline-flex;color:var(--color);user-select:none}:host svg{width:100%;height:100%;transform:translateZ(0)}:host circle{animation:dash-rotate 1.4s ease-in-out infinite;fill:transparent;stroke-dasharray:80px, 200px;stroke-dashoffset:0px;stroke-width:3.6px;stroke:currentColor}:host svg{animation:spinner-rotate 1.4s linear infinite;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(.lu-color){color:var(--lu-color-base)}:host([data-paused]) svg,:host([data-paused]) circle{animation-play-state:paused}:host([data-hidden]){position:absolute !important;width:1px;height:1px;overflow:hidden !important;clip-path:polygon(0px 0px, 0px 0px, 0px 0px);clip:rect(1px, 1px, 1px, 1px)}@keyframes spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes dash-rotate{0%{stroke-dasharray:1px, 200px;stroke-dashoffset:0px}50%{stroke-dasharray:100px, 200px;stroke-dashoffset:-15px}100%{stroke-dasharray:100px, 200px;stroke-dashoffset:-125px}}";

const Spinner = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /**
     * Size of the spinner as a multiple of its own dimensions (32px x 32px).
     */
    this.dataScale = 1;
    /**
     * Duration of the spinner animation in milliseconds.
     */
    this.dataDuration = 1000;
    /**
     * If `true`, the spinner's animation will be paused.
     */
    this.dataPaused = false;
    /**
     * If `true`, the spinner will be visibly hidden but still within the DOM.
     */
    this.dataHidden = false;
    /**
     * Set an a11y message for screen readers when the loader appears. Defaults to 'Please wait while the next step loads.'
     */
    this.dataMessage = 'Please wait while the next step loads.';
  }
  render() {
    return (index.h(index.Host, { class: Object.assign({}, theme.createColorClasses(this.dataColor)), style: {
        height: `${this.dataScale * 28}px`,
        width: `${this.dataScale * 28}px`
      }, role: 'progressbar', "data-paused": this.dataHidden || this.dataPaused }, index.h("svg", { role: "img", style: {
        'animation-duration': `${this.dataDuration * 1.2}ms`
      }, viewBox: "22 22 44 44" }, index.h("title", { role: "alert", "aria-live": "assertive" }, this.dataHidden ? null : this.dataMessage), index.h("circle", { style: { 'animation-duration': `${this.dataDuration * 1.4}ms` }, cx: "44", cy: "44", r: "20.2" }))));
  }
};
Spinner.style = spinnerCss;

exports.lu_spinner = Spinner;

//# sourceMappingURL=lu-spinner.cjs.entry.js.map