Make vpu-button disable work

packages/common/utils.js

 import env from './env.js';
 
+export const getAssetURL = (path) => {
+    const elm = document.getElementById('vpu-library-app-src');
+    if (!elm)
+        return path;
+    const url = elm.src;
+    // newer browsers only
+    //var url = import.meta.url;
+    return new URL(path, url).href;
+};
+
 /**
  * Parses a link header
  *
@@ -28,7 +38,7 @@ export const parseLinkHeader = (header) => {
     }
 
     return links;
-}
+};
 
 /**
  * Reads a setting
@@ -38,11 +48,11 @@ export const parseLinkHeader = (header) => {
  */
 export const setting = (key) => {
     return env[key];
-}
+};
 
 export const getAPiUrl = (path = "", withPrefix = true) => {
     return env.apiBaseUrl + (withPrefix ? env.apiUrlPrefix : "") + path;
-}
+};
 
 /**
  * Parses the base url from an url
@@ -55,7 +65,7 @@ export const parseBaseUrl = (url) => {
     const protocol = pathArray[0];
     const host = pathArray[2];
     return protocol + '//' + host;
-}
+};
 
 /**
  * Converts a string list to a data array for Select2
@@ -67,7 +77,7 @@ export const stringListToSelect2DataArray = (list) => {
     let data = [];
     list.forEach((item) => {data.push({id: item, text: item})});
     return data;
-}
+};
 
 /**
  * Does generic Base64 Encoding with support for 16-bit encoded strings
@@ -84,7 +94,7 @@ export const base64EncodeUnicode = (str) => {
     });
 
     return btoa(utf8Bytes);
-}
+};
 
 /**
  * Like customElements.define() but tries to display an error in case the browser doesn't
@@ -106,7 +116,7 @@ export const defineCustomElement = (name, constructor, options) => {
     }
     customElements.define(name, constructor, options);
     return true;
-}
+};
 
 /**
  * Creates a random id
@@ -117,15 +127,15 @@ export const defineCustomElement = (name, constructor, options) => {
  * @returns {string}
  */
 export const makeId = (length) => {
-    var result           = '';
-    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    var charactersLength = characters.length;
-    for ( var i = 0; i < length; i++ ) {
+    let result           = '';
+    const characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = characters.length;
+    for ( let i = 0; i < length; i++ ) {
         result += characters.charAt(Math.floor(Math.random() * charactersLength));
     }
 
     return result;
-}
+};
 
 /**
  * Pads a number with a 0 so it has two digits

packages/common/vpu-button.js

 import {html, LitElement, css} from 'lit-element';
 import * as commonUtils from './utils.js';
 import bulmaCSSPath from 'bulma/css/bulma.min.css';
-import * as utils from "../../src/utils";
 
 
 class Button extends LitElement {
@@ -12,6 +11,7 @@ class Button extends LitElement {
         this.type = "primary";
         this.spinner = false;
         this.spinnerOnClick = true;
+        this.disabled = false;
     }
 
     static get properties() {
@@ -20,6 +20,7 @@ class Button extends LitElement {
             type: { type: String },
             spinner: { type: Boolean },
             spinnerOnClick: { type: Boolean, attribute: 'spinner-on-click' },
+            disabled: { type: Boolean },
         };
     }
 
@@ -38,11 +39,13 @@ class Button extends LitElement {
     }
 
     render() {
-        const bulmaCSS = utils.getAssetURL(bulmaCSSPath);
+        const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
 
         return html`
             <link rel="stylesheet" href="${bulmaCSS}">
-            <button @click="${this.clickHandler}" class="button ${this.type}">${this.value} <vpu-mini-spinner style="display: ${this.spinner ? "inline" : "none"}"></vpu-mini-spinner></button>
+            <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>
         `;
     }
 }