diff --git a/packages/common/assets/index.html b/packages/common/assets/index.html
index 1e833122fe3ad55f171150a2974deddd6fc01d04..8f2a35f5b062d1f7adec5b56d3256f731da66ce6 100644
--- a/packages/common/assets/index.html
+++ b/packages/common/assets/index.html
@@ -2,6 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="demo.js"></script>
<style>
body {
diff --git a/packages/common/dbp-common-demo.js b/packages/common/dbp-common-demo.js
index 00d8edb2236c10ec80984ea1224d97811577ef16..b022a31dbf0b0570e0bc055c3e6cfbb334ece336 100644
--- a/packages/common/dbp-common-demo.js
+++ b/packages/common/dbp-common-demo.js
@@ -3,7 +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 {getIconCSS, Icon, MiniSpinner, Button, Spinner, InlineNotification} from './index.js';
+import {getIconCSS, Icon, MiniSpinner, Button, LoadingButton, Spinner, InlineNotification} from './index.js';
export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
constructor() {
@@ -18,6 +18,7 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
'dbp-mini-spinner': MiniSpinner,
'dbp-spinner': Spinner,
'dbp-button': Button,
+ 'dbp-loading-button': LoadingButton,
'dbp-auth': customElements.get('dbp-auth'),
'dbp-inline-notification': InlineNotification,
};
@@ -93,6 +94,14 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
}, 1000);
}
+ loadingButtonClickHandler(e) {
+ let button = e.target;
+ button.start();
+ setTimeout(() => {
+ button.stop();
+ }, 1000);
+ }
+
render() {
return html`
<style>
@@ -137,6 +146,9 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
<h2>Button</h2>
<div class="control">
<dbp-button value="Load" @click="${this.buttonClickHandler}" type="is-primary"></dbp-button>
+
+ <dbp-loading-button @click="${this.loadingButtonClickHandler}" type="is-primary">Loading Button</dbp-loading-button>
+ <dbp-loading-button @click="${this.loadingButtonClickHandler}" type="is-primary" disabled>Loading Button Disabled</dbp-loading-button>
</div>
</div>
<div class="content">
diff --git a/packages/common/src/button.js b/packages/common/src/button.js
index acbbf483f4fe6abc024882c1e9007b8850d5861f..2eca7ae4480fcd732775d500f51f6dc4da60e753 100644
--- a/packages/common/src/button.js
+++ b/packages/common/src/button.js
@@ -88,7 +88,8 @@ export class LoadingButton extends ScopedElementsMixin(LitElement) {
this.type = "";
this.loading = false;
this.disabled = false;
-
+
+ // https://bugs.chromium.org/p/chromium/issues/detail?id=1061240#c12
this.addEventListener('click', (e) => {
if (this.disabled) {
e.stopImmediatePropagation();