diff --git a/packages/common/index.js b/packages/common/index.js
index bf45336adefb38b0cdff45e5e54c31ded734d956..c4e7bb0281a57e27aaef99755e17e35cb21d0b76 100644
--- a/packages/common/index.js
+++ b/packages/common/index.js
@@ -1,6 +1,12 @@
import {EventBus} from './src/eventbus.js';
import {createLinkedAbortController, createTimeoutAbortSignal} from './src/abort.js';
import {getIconSVGURL, getIconCSS, Icon} from './src/icon.js';
+import {MiniSpinner} from './src/mini-spinner.js';
+import {Button} from './src/button.js';
+import {Spinner} from './src/spinner.js';
export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
-export {getIconSVGURL, getIconCSS, Icon};
\ No newline at end of file
+export {getIconSVGURL, getIconCSS, Icon};
+export {MiniSpinner};
+export {Button};
+export {Spinner};
\ No newline at end of file
diff --git a/packages/common/test/unit.js b/packages/common/test/unit.js
index e444d46dde9214299a00ea3b8abe7023054e207a..0f0d92e1c38d8f63942ccc6f742a107536322468 100644
--- a/packages/common/test/unit.js
+++ b/packages/common/test/unit.js
@@ -1,8 +1,6 @@
import {expect, assert} from 'chai';
import * as utils from '../utils';
import * as styles from '../styles';
-import '../vpu-mini-spinner.js';
-import '../vpu-spinner.js';
import '../jsonld.js';
suite('utils', () => {
diff --git a/packages/common/vpu-button.js b/packages/common/vpu-button.js
deleted file mode 100644
index f5fff6cc36016c30e15c44d50d4c17cd45148743..0000000000000000000000000000000000000000
--- a/packages/common/vpu-button.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import {html, LitElement, css} from 'lit-element';
-import * as commonUtils from './utils.js';
-import * as commonStyles from './styles.js';
-
-/**
- * vpu-button implements a button with Bulma styles and automatic spinner and
- * disabling if button is clicked
- *
- * Use the attribute "no-spinner-on-click" to disable the spinner, then you can
- * start it with start() and stop it with stop()
- *
- * Type can be is-primary/is-info/is-success/is-warning/is-danger
- */
-class Button extends LitElement {
- constructor() {
- super();
- this.value = "";
- this.type = "";
- this.spinner = false;
- this.noSpinnerOnClick = false;
- this.disabled = false;
- }
-
- connectedCallback() {
- super.connectedCallback();
- }
-
- static get properties() {
- return {
- value: { type: String },
- type: { type: String },
- spinner: { type: Boolean },
- noSpinnerOnClick: { type: Boolean, attribute: 'no-spinner-on-click' },
- disabled: { type: Boolean, reflect: true },
- };
- }
-
- clickHandler() {
- if (!this.noSpinnerOnClick) {
- this.start();
- }
- }
-
- start() {
- this.spinner = true;
- this.disabled = true;
- }
-
- stop() {
- this.spinner = false;
- this.disabled = false;
- }
-
- isDisabled() {
- return this.disabled;
- }
-
- static get styles() {
- // language=css
- return css`
- ${commonStyles.getThemeCSS()}
- ${commonStyles.getButtonCSS()}
-
- vpu-mini-spinner { margin-left: 0.5em; }
- `;
- }
-
- render() {
- return html`
- <button @click="${this.clickHandler}" class="button ${this.type}" ?disabled="${this.disabled}">
- ${this.value} <vpu-mini-spinner style="display: ${this.spinner ? "inline" : "none"}"></vpu-mini-spinner>
- </button>
- `;
- }
-}
-
-commonUtils.defineCustomElement('vpu-button', Button);
diff --git a/packages/common/vpu-common-demo.js b/packages/common/vpu-common-demo.js
index 355270c6a2851b0c0135d1c6659b0b93b3edb238..323acc882e3d01e5eedc7864c094a44db56c8199 100644
--- a/packages/common/vpu-common-demo.js
+++ b/packages/common/vpu-common-demo.js
@@ -3,10 +3,7 @@ import {css, html, LitElement} from 'lit-element';
import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import * as commonUtils from './utils.js';
import * as commonStyles from './styles.js';
-import './vpu-mini-spinner.js';
-import './vpu-spinner.js';
-import {getIconCSS, Icon} from './index.js';
-import './vpu-button.js';
+import {getIconCSS, Icon, MiniSpinner, Button, Spinner} from './index.js';
class VpuCommonDemo extends ScopedElementsMixin(LitElement) {
constructor() {
@@ -18,9 +15,9 @@ class VpuCommonDemo extends ScopedElementsMixin(LitElement) {
static get scopedElements() {
return {
'vpu-icon': Icon,
- 'vpu-mini-spinner': customElements.get('vpu-mini-spinner'),
- 'vpu-spinner': customElements.get('vpu-spinner'),
- 'vpu-button': customElements.get('vpu-button'),
+ 'vpu-mini-spinner': MiniSpinner,
+ 'vpu-spinner': Spinner,
+ 'vpu-button': Button,
'vpu-auth': customElements.get('vpu-auth'),
};
}
diff --git a/packages/common/vpu-mini-spinner.js b/packages/common/vpu-mini-spinner.js
deleted file mode 100644
index 5de1725939ee76cb68e810d32a26259946d6d768..0000000000000000000000000000000000000000
--- a/packages/common/vpu-mini-spinner.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import {html, LitElement, css} from 'lit-element';
-import * as commonUtils from './utils.js';
-
-
-class MiniSpinner extends LitElement {
- constructor() {
- super();
- this.text = "";
- }
-
- static get properties() {
- return {
- text: { type: String },
- };
- }
-
- static get styles() {
- // language=css
- return css`
- .outer {
- display: inline-block;
- }
- .inner {
- display: flex;
- }
- .ring {
- display: inline-block;
- position: relative;
- width: 1em;
- height: 1em;
- }
- .ring div {
- box-sizing: border-box;
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- border: 0.2em solid currentColor;
- border-radius: 50%;
- animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
- border-color: currentColor transparent transparent transparent;
- }
- .ring div:nth-child(1) {
- animation-delay: -0.45s;
- }
- .ring div:nth-child(2) {
- animation-delay: -0.3s;
- }
- .ring div:nth-child(3) {
- animation-delay: -0.15s;
- }
- @keyframes ring {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- .text {
- display: inline-block;
- margin-left: 0.5em;
- font-size: 0.7em;
- }`;
- }
-
- render() {
- const textHtml = this.text !== "" ? html`<div class="text">${this.text}</div>` : html``;
-
- return html`<div class="outer"><div class="inner"><div class="ring"><div></div><div></div><div></div><div></div></div>${textHtml}</div></div>`;
- }
-}
-
-commonUtils.defineCustomElement('vpu-mini-spinner', MiniSpinner);
diff --git a/packages/common/vpu-spinner.js b/packages/common/vpu-spinner.js
deleted file mode 100644
index f06618d8a9c794b97aaddf408314e91747e8c6b2..0000000000000000000000000000000000000000
--- a/packages/common/vpu-spinner.js
+++ /dev/null
@@ -1,122 +0,0 @@
-// Note: This doesn't have a lit-element dependency on purpose, so it can be loaded faster before
-// other web components (assuming it's not bundled)
-
-class Spinner extends HTMLElement {
-
- constructor() {
- super();
- let shadowRoot = this.attachShadow({mode: 'open'});
- shadowRoot.innerHTML = `
-<style>
-:host {
- display: block;
-}
-#all-spinner-tuglogo {
- width:130px;
- height:130px;
- position:relative;
- background-color:transparent;
- margin:0 auto;
-}
-
-.all-spinner-tuglogo-box {
- width:20%;
- height:20%;
- background-color:#e4154b;
- position:absolute;
- top:50%;
- left:50%;
- animation-duration: 1.6s;
- animation-direction:alternate;
- animation-iteration-count:infinite;
- animation-fill-mode:both;
- animation-timing-function:ease;
- transition: transform 0.5s, background-color 0.2s 0.5s;
-}
-
-#all-spinner-tuglogo-box-1 {
- animation-name: box1;
- transform:translateX(-160%) translateY(-50%);
-}
-
-#all-spinner-tuglogo-box-2 {
- transform-origin:0 0;
- animation-name: box2;
-transform:scale(1) translateX(-50%) translateY(-50%);
-}
-
-#all-spinner-tuglogo-box-3 {
-
- animation-name: box3;
- animation-delay:0.3s;
- transform:translateX(60%) translateY(-50%); visibility:visible;
-}
-
-#all-spinner-tuglogo-box-4 {
-
- animation-name: box4;
- animation-delay:0.1s;
-transform:translateX(0%) translateY(-100%); visibility:visible;
-}
-
-#all-spinner-tuglogo-box-5 {
-
- animation-name: box5;
- animation-delay:0.2s;
-transform:translateX(-100%) translateY(0%); visibility:visible;
-}
-
-@keyframes box1 {
- 0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
- 50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
- 70% { transform:translateX(-170%) translateY(-50%); visibility:visible;}
- 80% { transform:translateX(-160%) translateY(-50%); visibility:visible;}
- 100% { transform:translateX(-160%) translateY(-50%); visibility:visible;}
-}
-
-@keyframes box2 {
- 0% { transform:scale(0) translateX(-50%) translateY(-50%);}
- 5% { transform:scale(0) translateX(-50%) translateY(-50%);}
- 30% { transform:scale(1.2) translateX(-50%) translateY(-50%);}
- 35% { transform:scale(1) translateX(-50%) translateY(-50%);}
- 100% { transform:scale(1) translateX(-50%) translateY(-50%);}
-
-}
-
-@keyframes box3 {
- 0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
- 50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
- 70% { transform:translateX(70%) translateY(-50%); visibility:visible;}
- 80% { transform:translateX(60%) translateY(-50%); visibility:visible;}
- 100% { transform:translateX(60%) translateY(-50%); visibility:visible;}
-}
-
-@keyframes box4 {
- 0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
- 50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
- 70% { transform:translateX(10%) translateY(-110%); visibility:visible;}
- 80% { transform:translateX(0%) translateY(-100%); visibility:visible;}
- 100% { transform:translateX(0%) translateY(-100%); visibility:visible;}
-}
-@keyframes box5 {
- 0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
- 50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
- 70% { transform:translateX(-110%) translateY(10%); visibility:visible;}
- 80% { transform:translateX(-100%) translateY(0%); visibility:visible;}
- 100% { transform:translateX(-100%) translateY(0%); visibility:visible;}
-}
-</style>
-
-<div id="all-spinner-tuglogo">
- <div id="all-spinner-tuglogo-box-1" class="all-spinner-tuglogo-box"></div>
- <div id="all-spinner-tuglogo-box-2" class="all-spinner-tuglogo-box"></div>
- <div id="all-spinner-tuglogo-box-3" class="all-spinner-tuglogo-box"></div>
- <div id="all-spinner-tuglogo-box-4" class="all-spinner-tuglogo-box"></div>
- <div id="all-spinner-tuglogo-box-5" class="all-spinner-tuglogo-box"></div>
-</div>`;
- }
-}
-
-// customElements is undefined in Edge
-if (typeof customElements != 'undefined' && !customElements.get('vpu-spinner'))
- customElements.define('vpu-spinner', Spinner);