@uiowa/spinner/fesm2022/uiowa-spinner.mjs

(action-spinner) rotating circle spinner, used for actions such as button clicks. (loading-bar) beeping blocks, used for loading promises. (uiowa-ring) rotating golden and black spinner, used as loading indicator.

import * as i0 from '@angular/core';
import { Attribute, ChangeDetectionStrategy, Component } from '@angular/core';

class ActionSpinner {
    size;
    constructor(size) {
        this.size = size;
        if (!this.size || isNaN(this.size) || this.size < 0) {
            this.size = 1;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ActionSpinner, deps: [{ token: 'size', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: ActionSpinner, isStandalone: true, selector: "action-spinner", ngImport: i0, template: `
    <div class="fading-circle-spinner" [style.width.rem]="size" [style.height.rem]="size">
      <div class="circle1 circle"></div>
      <div class="circle2 circle"></div>
      <div class="circle3 circle"></div>
      <div class="circle4 circle"></div>
      <div class="circle5 circle"></div>
      <div class="circle6 circle"></div>
      <div class="circle7 circle"></div>
      <div class="circle8 circle"></div>
      <div class="circle9 circle"></div>
      <div class="circle10 circle"></div>
      <div class="circle11 circle"></div>
      <div class="circle12 circle"></div>
    </div>
  `, isInline: true, styles: [".fading-circle-spinner{position:relative;display:inline-block}.fading-circle-spinner .circle{position:absolute;top:0;left:0;width:100%;height:100%}.fading-circle-spinner .circle:before{display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;background-color:currentColor;content:\"\";-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.fading-circle-spinner .circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.fading-circle-spinner .circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.fading-circle-spinner .circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fading-circle-spinner .circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.fading-circle-spinner .circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.fading-circle-spinner .circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fading-circle-spinner .circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.fading-circle-spinner .circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.fading-circle-spinner .circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fading-circle-spinner .circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.fading-circle-spinner .circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.fading-circle-spinner .circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.fading-circle-spinner .circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.fading-circle-spinner .circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.fading-circle-spinner .circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.fading-circle-spinner .circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.fading-circle-spinner .circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.fading-circle-spinner .circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.fading-circle-spinner .circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.fading-circle-spinner .circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.fading-circle-spinner .circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.fading-circle-spinner .circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ActionSpinner, decorators: [{
            type: Component,
            args: [{ selector: 'action-spinner', imports: [], template: `
    <div class="fading-circle-spinner" [style.width.rem]="size" [style.height.rem]="size">
      <div class="circle1 circle"></div>
      <div class="circle2 circle"></div>
      <div class="circle3 circle"></div>
      <div class="circle4 circle"></div>
      <div class="circle5 circle"></div>
      <div class="circle6 circle"></div>
      <div class="circle7 circle"></div>
      <div class="circle8 circle"></div>
      <div class="circle9 circle"></div>
      <div class="circle10 circle"></div>
      <div class="circle11 circle"></div>
      <div class="circle12 circle"></div>
    </div>
  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".fading-circle-spinner{position:relative;display:inline-block}.fading-circle-spinner .circle{position:absolute;top:0;left:0;width:100%;height:100%}.fading-circle-spinner .circle:before{display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;background-color:currentColor;content:\"\";-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.fading-circle-spinner .circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.fading-circle-spinner .circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.fading-circle-spinner .circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fading-circle-spinner .circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.fading-circle-spinner .circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.fading-circle-spinner .circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fading-circle-spinner .circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.fading-circle-spinner .circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.fading-circle-spinner .circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fading-circle-spinner .circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.fading-circle-spinner .circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.fading-circle-spinner .circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.fading-circle-spinner .circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.fading-circle-spinner .circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.fading-circle-spinner .circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.fading-circle-spinner .circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.fading-circle-spinner .circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.fading-circle-spinner .circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.fading-circle-spinner .circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.fading-circle-spinner .circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.fading-circle-spinner .circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.fading-circle-spinner .circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Attribute,
                    args: ['size']
                }] }] });

class LoadingBar {
    size;
    constructor(size) {
        this.size = size;
        if (!this.size || isNaN(this.size) || this.size < 0) {
            this.size = 1;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LoadingBar, deps: [{ token: 'size', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: LoadingBar, isStandalone: true, selector: "loading-bar", ngImport: i0, template: ` <span class="loading-bars">
    <span
      class="loading-bars-block block-1"
      [style.height.rem]="size"
      [style.width.rem]="size / 4"
    ></span>
    <span
      class="loading-bars-block block-2"
      [style.height.rem]="size"
      [style.width.rem]="size / 4"
    ></span>
    <span
      class="loading-bars-block block-3"
      [style.height.rem]="size"
      [style.width.rem]="size / 4"
    ></span>
  </span>`, isInline: true, styles: [".loading-bars{display:inline-block;height:100%;vertical-align:middle;position:relative;margin:auto}.loading-bars-block{background-color:#fff;border:1px solid #000000;float:left;margin-left:1px;opacity:.1;animation-name:bounceG;-o-animation-name:bounceG;-ms-animation-name:bounceG;-webkit-animation-name:bounceG;-moz-animation-name:bounceG;animation-duration:1.5s;-o-animation-duration:1.5s;-ms-animation-duration:1.5s;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-direction:normal;-o-animation-direction:normal;-ms-animation-direction:normal;-webkit-animation-direction:normal;-moz-animation-direction:normal;transform:scale(.7);-o-transform:scale(.7);-ms-transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7)}.loading-bars-block.block-1{display:inline-block;animation-delay:.45s;-o-animation-delay:.45s;-ms-animation-delay:.45s;-webkit-animation-delay:.45s;-moz-animation-delay:.45s}.loading-bars-block.block-2{display:inline-block;animation-delay:.6s;-o-animation-delay:.6s;-ms-animation-delay:.6s;-webkit-animation-delay:.6s;-moz-animation-delay:.6s}.loading-bars-block.block-3{display:inline-block;animation-delay:.75s;-o-animation-delay:.75s;-ms-animation-delay:.75s;-webkit-animation-delay:.75s;-moz-animation-delay:.75s}@keyframes bounceG{0%{transform:scale(1.2);opacity:1}to{transform:scale(.7);opacity:.1}}@-o-keyframes bounceG{0%{-o-transform:scale(1.2);opacity:1}to{-o-transform:scale(.7);opacity:.1}}@-ms-keyframes bounceG{0%{-ms-transform:scale(1.2);opacity:1}to{-ms-transform:scale(.7);opacity:.1}}@-webkit-keyframes bounceG{0%{-webkit-transform:scale(1.2);opacity:1}to{-webkit-transform:scale(.7);opacity:.1}}@-moz-keyframes bounceG{0%{-moz-transform:scale(1.2);opacity:1}to{-moz-transform:scale(.7);opacity:.1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LoadingBar, decorators: [{
            type: Component,
            args: [{ selector: 'loading-bar', imports: [], template: ` <span class="loading-bars">
    <span
      class="loading-bars-block block-1"
      [style.height.rem]="size"
      [style.width.rem]="size / 4"
    ></span>
    <span
      class="loading-bars-block block-2"
      [style.height.rem]="size"
      [style.width.rem]="size / 4"
    ></span>
    <span
      class="loading-bars-block block-3"
      [style.height.rem]="size"
      [style.width.rem]="size / 4"
    ></span>
  </span>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".loading-bars{display:inline-block;height:100%;vertical-align:middle;position:relative;margin:auto}.loading-bars-block{background-color:#fff;border:1px solid #000000;float:left;margin-left:1px;opacity:.1;animation-name:bounceG;-o-animation-name:bounceG;-ms-animation-name:bounceG;-webkit-animation-name:bounceG;-moz-animation-name:bounceG;animation-duration:1.5s;-o-animation-duration:1.5s;-ms-animation-duration:1.5s;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-direction:normal;-o-animation-direction:normal;-ms-animation-direction:normal;-webkit-animation-direction:normal;-moz-animation-direction:normal;transform:scale(.7);-o-transform:scale(.7);-ms-transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7)}.loading-bars-block.block-1{display:inline-block;animation-delay:.45s;-o-animation-delay:.45s;-ms-animation-delay:.45s;-webkit-animation-delay:.45s;-moz-animation-delay:.45s}.loading-bars-block.block-2{display:inline-block;animation-delay:.6s;-o-animation-delay:.6s;-ms-animation-delay:.6s;-webkit-animation-delay:.6s;-moz-animation-delay:.6s}.loading-bars-block.block-3{display:inline-block;animation-delay:.75s;-o-animation-delay:.75s;-ms-animation-delay:.75s;-webkit-animation-delay:.75s;-moz-animation-delay:.75s}@keyframes bounceG{0%{transform:scale(1.2);opacity:1}to{transform:scale(.7);opacity:.1}}@-o-keyframes bounceG{0%{-o-transform:scale(1.2);opacity:1}to{-o-transform:scale(.7);opacity:.1}}@-ms-keyframes bounceG{0%{-ms-transform:scale(1.2);opacity:1}to{-ms-transform:scale(.7);opacity:.1}}@-webkit-keyframes bounceG{0%{-webkit-transform:scale(1.2);opacity:1}to{-webkit-transform:scale(.7);opacity:.1}}@-moz-keyframes bounceG{0%{-moz-transform:scale(1.2);opacity:1}to{-moz-transform:scale(.7);opacity:.1}}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Attribute,
                    args: ['size']
                }] }] });

class LoadingPlaceholder {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LoadingPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: LoadingPlaceholder, isStandalone: true, selector: "loading-placeholder", ngImport: i0, template: `<div class="ld-placeholder"></div>`, isInline: true, styles: [".ld-placeholder{box-shadow:0 4px 10px #2121210d;position:relative;overflow:hidden;height:100%}.ld-placeholder:before{content:\"\";display:block;position:absolute;left:-200px;top:0;height:100%;width:200px;background:linear-gradient(to right,transparent 0%,#f8f8f8 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{left:-200px}to{left:100%}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: LoadingPlaceholder, decorators: [{
            type: Component,
            args: [{ selector: 'loading-placeholder', imports: [], template: `<div class="ld-placeholder"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ld-placeholder{box-shadow:0 4px 10px #2121210d;position:relative;overflow:hidden;height:100%}.ld-placeholder:before{content:\"\";display:block;position:absolute;left:-200px;top:0;height:100%;width:200px;background:linear-gradient(to right,transparent 0%,#f8f8f8 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{left:-200px}to{left:100%}}\n"] }]
        }] });

class UiowaRing {
    size;
    constructor(size) {
        this.size = size;
        if (!this.size || isNaN(this.size) || this.size < 0) {
            this.size = 4;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UiowaRing, deps: [{ token: 'size', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: UiowaRing, isStandalone: true, selector: "uiowa-ring", ngImport: i0, template: `
    <div
      class="uiowa-ring"
      [style.height.rem]="size"
      [style.width.rem]="size"
      [style.border-width.rem]="size / 4"
    ></div>
  `, isInline: true, styles: [".uiowa-ring{border-radius:50%;border-color:#000000 #ffcd00;border-style:solid;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UiowaRing, decorators: [{
            type: Component,
            args: [{ selector: 'uiowa-ring', imports: [], template: `
    <div
      class="uiowa-ring"
      [style.height.rem]="size"
      [style.width.rem]="size"
      [style.border-width.rem]="size / 4"
    ></div>
  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".uiowa-ring{border-radius:50%;border-color:#000000 #ffcd00;border-style:solid;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Attribute,
                    args: ['size']
                }] }] });

/*
 * Public API Surface of spinner
 */

/**
 * Generated bundle index. Do not edit.
 */

export { ActionSpinner, LoadingBar, LoadingPlaceholder, UiowaRing };
//# sourceMappingURL=uiowa-spinner.mjs.map