@umbraco-ui/uui-button - npm Package Compare versions

Comparing version 0.0.9 to 0.1.0

custom-elements.json

@@ -27,2 +27,8 @@ {
         {
+          "name": "state",
+          "description": "Sets the state of the button. With waiting state a loader will show, the success state and fail states display icons. State is reset do default automatically after 3 seconds.",
+          "type": "null |'waiting' | 'success' | 'failed'",
+          "default": "\"null\""
+        },
+        {
           "name": "label",
@@ -61,2 +67,9 @@ "description": "Text with which component should be labeled",
         {
+          "name": "state",
+          "attribute": "state",
+          "description": "Sets the state of the button. With waiting state a loader will show, the success state and fail states display icons. State is reset do default automatically after 3 seconds.",
+          "type": "null |'waiting' | 'success' | 'failed'",
+          "default": "\"null\""
+        },
+        {
           "name": "label",
@@ -63,0 +76,0 @@ "attribute": "label",

dist/uui-button.min.js

@@ -1,26 +0,26 @@
-var zt=Object.defineProperty,Nt=Object.defineProperties;var Mt=Object.getOwnPropertyDescriptors;var ht=Object.getOwnPropertySymbols;var Rt=Object.prototype.hasOwnProperty,Lt=Object.prototype.propertyIsEnumerable;var vt=(v,b,p)=>b in v?zt(v,b,{enumerable:!0,configurable:!0,writable:!0,value:p}):v[b]=p,F=(v,b)=>{for(var p in b||(b={}))Rt.call(b,p)&&vt(v,p,b[p]);if(ht)for(var p of ht(b))Lt.call(b,p)&&vt(v,p,b[p]);return v},G=(v,b)=>Nt(v,Mt(b));(function(v){typeof define=="function"&&define.amd?define(v):v()})(function(){"use strict";/**
+var zt=Object.defineProperty,Nt=Object.defineProperties;var Mt=Object.getOwnPropertyDescriptors;var ht=Object.getOwnPropertySymbols;var Rt=Object.prototype.hasOwnProperty,It=Object.prototype.propertyIsEnumerable;var bt=(b,v,p)=>v in b?zt(b,v,{enumerable:!0,configurable:!0,writable:!0,value:p}):b[v]=p,F=(b,v)=>{for(var p in v||(v={}))Rt.call(v,p)&&bt(b,p,v[p]);if(ht)for(var p of ht(v))It.call(v,p)&&bt(b,p,v[p]);return b},G=(b,v)=>Nt(b,Mt(v));(function(b){typeof define=="function"&&define.amd?define(b):b()})(function(){"use strict";/**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const v=window.ShadowRoot&&(window.ShadyCSS===void 0||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,b=Symbol(),p=new Map;class Q{constructor(t,e){if(this._$cssResult$=!0,e!==b)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let t=p.get(this.cssText);return v&&t===void 0&&(p.set(this.cssText,t=new CSSStyleSheet),t.replaceSync(this.cssText)),t}toString(){return this.cssText}}const O=i=>new Q(typeof i=="string"?i:i+"",b),z=(i,...t)=>{const e=i.length===1?i[0]:t.reduce((o,r,n)=>o+(s=>{if(s._$cssResult$===!0)return s.cssText;if(typeof s=="number")return s;throw Error("Value passed to 'css' function must be a 'css' function result: "+s+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(r)+i[n+1],i[0]);return new Q(e,b)},bt=(i,t)=>{v?i.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet):t.forEach(e=>{const o=document.createElement("style"),r=window.litNonce;r!==void 0&&o.setAttribute("nonce",r),o.textContent=e.cssText,i.appendChild(o)})},Y=v?i=>i:i=>i instanceof CSSStyleSheet?(t=>{let e="";for(const o of t.cssRules)e+=o.cssText;return O(e)})(i):i;/**
+ */const b=window.ShadowRoot&&(window.ShadyCSS===void 0||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,v=Symbol(),p=new Map;class Q{constructor(t,e){if(this._$cssResult$=!0,e!==v)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){let t=p.get(this.cssText);return b&&t===void 0&&(p.set(this.cssText,t=new CSSStyleSheet),t.replaceSync(this.cssText)),t}toString(){return this.cssText}}const z=i=>new Q(typeof i=="string"?i:i+"",v),N=(i,...t)=>{const e=i.length===1?i[0]:t.reduce((o,r,a)=>o+(s=>{if(s._$cssResult$===!0)return s.cssText;if(typeof s=="number")return s;throw Error("Value passed to 'css' function must be a 'css' function result: "+s+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(r)+i[a+1],i[0]);return new Q(e,v)},vt=(i,t)=>{b?i.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet):t.forEach(e=>{const o=document.createElement("style"),r=window.litNonce;r!==void 0&&o.setAttribute("nonce",r),o.textContent=e.cssText,i.appendChild(o)})},Y=b?i=>i:i=>i instanceof CSSStyleSheet?(t=>{let e="";for(const o of t.cssRules)e+=o.cssText;return z(e)})(i):i;/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */var D,I;const B={toAttribute(i,t){switch(t){case Boolean:i=i?"":null;break;case Object:case Array:i=i==null?i:JSON.stringify(i)}return i},fromAttribute(i,t){let e=i;switch(t){case Boolean:e=i!==null;break;case Number:e=i===null?null:Number(i);break;case Object:case Array:try{e=JSON.parse(i)}catch(o){e=null}}return e}},tt=(i,t)=>t!==i&&(t==t||i==i),j={attribute:!0,type:String,converter:B,reflect:!1,hasChanged:tt};class k extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var e;(e=this.l)!==null&&e!==void 0||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach((e,o)=>{const r=this._$Eh(o,e);r!==void 0&&(this._$Eu.set(r,o),t.push(r))}),t}static createProperty(t,e=j){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const o=typeof t=="symbol"?Symbol():"__"+t,r=this.getPropertyDescriptor(t,o,e);r!==void 0&&Object.defineProperty(this.prototype,t,r)}}static getPropertyDescriptor(t,e,o){return{get(){return this[e]},set(r){const n=this[t];this[e]=r,this.requestUpdate(t,n,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||j}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const e=this.properties,o=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const r of o)this.createProperty(r,e[r])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const o=new Set(t.flat(1/0).reverse());for(const r of o)e.unshift(Y(r))}else t!==void 0&&e.push(Y(t));return e}static _$Eh(t,e){const o=e.attribute;return o===!1?void 0:typeof o=="string"?o:typeof t=="string"?t.toLowerCase():void 0}o(){var t;this._$Ev=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$Ep(),this.requestUpdate(),(t=this.constructor.l)===null||t===void 0||t.forEach(e=>e(this))}addController(t){var e,o;((e=this._$Em)!==null&&e!==void 0?e:this._$Em=[]).push(t),this.renderRoot!==void 0&&this.isConnected&&((o=t.hostConnected)===null||o===void 0||o.call(t))}removeController(t){var e;(e=this._$Em)===null||e===void 0||e.splice(this._$Em.indexOf(t)>>>0,1)}_$Ep(){this.constructor.elementProperties.forEach((t,e)=>{this.hasOwnProperty(e)&&(this._$Et.set(e,this[e]),delete this[e])})}createRenderRoot(){var t;const e=(t=this.shadowRoot)!==null&&t!==void 0?t:this.attachShadow(this.constructor.shadowRootOptions);return bt(e,this.constructor.elementStyles),e}connectedCallback(){var t;this.renderRoot===void 0&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$Em)===null||t===void 0||t.forEach(e=>{var o;return(o=e.hostConnected)===null||o===void 0?void 0:o.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$Em)===null||t===void 0||t.forEach(e=>{var o;return(o=e.hostDisconnected)===null||o===void 0?void 0:o.call(e)})}attributeChangedCallback(t,e,o){this._$AK(t,o)}_$Eg(t,e,o=j){var r,n;const s=this.constructor._$Eh(t,o);if(s!==void 0&&o.reflect===!0){const d=((n=(r=o.converter)===null||r===void 0?void 0:r.toAttribute)!==null&&n!==void 0?n:B.toAttribute)(e,o.type);this._$Ei=t,d==null?this.removeAttribute(s):this.setAttribute(s,d),this._$Ei=null}}_$AK(t,e){var o,r,n;const s=this.constructor,d=s._$Eu.get(t);if(d!==void 0&&this._$Ei!==d){const a=s.getPropertyOptions(d),l=a.converter,f=(n=(r=(o=l)===null||o===void 0?void 0:o.fromAttribute)!==null&&r!==void 0?r:typeof l=="function"?l:null)!==null&&n!==void 0?n:B.fromAttribute;this._$Ei=d,this[d]=f(e,a.type),this._$Ei=null}}requestUpdate(t,e,o){let r=!0;t!==void 0&&(((o=o||this.constructor.getPropertyOptions(t)).hasChanged||tt)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),o.reflect===!0&&this._$Ei!==t&&(this._$ES===void 0&&(this._$ES=new Map),this._$ES.set(t,o))):r=!1),!this.isUpdatePending&&r&&(this._$Ev=this._$EC())}async _$EC(){this.isUpdatePending=!0;try{await this._$Ev}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach((r,n)=>this[n]=r),this._$Et=void 0);let e=!1;const o=this._$AL;try{e=this.shouldUpdate(o),e?(this.willUpdate(o),(t=this._$Em)===null||t===void 0||t.forEach(r=>{var n;return(n=r.hostUpdate)===null||n===void 0?void 0:n.call(r)}),this.update(o)):this._$ET()}catch(r){throw e=!1,this._$ET(),r}e&&this._$AE(o)}willUpdate(t){}_$AE(t){var e;(e=this._$Em)===null||e===void 0||e.forEach(o=>{var r;return(r=o.hostUpdated)===null||r===void 0?void 0:r.call(o)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$ET(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ev}shouldUpdate(t){return!0}update(t){this._$ES!==void 0&&(this._$ES.forEach((e,o)=>this._$Eg(o,this[o],e)),this._$ES=void 0),this._$ET()}updated(t){}firstUpdated(t){}}k.finalized=!0,k.elementProperties=new Map,k.elementStyles=[],k.shadowRootOptions={mode:"open"},(D=globalThis.reactiveElementPolyfillSupport)===null||D===void 0||D.call(globalThis,{ReactiveElement:k}),((I=globalThis.reactiveElementVersions)!==null&&I!==void 0?I:globalThis.reactiveElementVersions=[]).push("1.0.0");/**
+ */var B,j;const V={toAttribute(i,t){switch(t){case Boolean:i=i?"":null;break;case Object:case Array:i=i==null?i:JSON.stringify(i)}return i},fromAttribute(i,t){let e=i;switch(t){case Boolean:e=i!==null;break;case Number:e=i===null?null:Number(i);break;case Object:case Array:try{e=JSON.parse(i)}catch(o){e=null}}return e}},tt=(i,t)=>t!==i&&(t==t||i==i),X={attribute:!0,type:String,converter:V,reflect:!1,hasChanged:tt};class k extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(t){var e;(e=this.l)!==null&&e!==void 0||(this.l=[]),this.l.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach((e,o)=>{const r=this._$Eh(o,e);r!==void 0&&(this._$Eu.set(r,o),t.push(r))}),t}static createProperty(t,e=X){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const o=typeof t=="symbol"?Symbol():"__"+t,r=this.getPropertyDescriptor(t,o,e);r!==void 0&&Object.defineProperty(this.prototype,t,r)}}static getPropertyDescriptor(t,e,o){return{get(){return this[e]},set(r){const a=this[t];this[e]=r,this.requestUpdate(t,a,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||X}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const e=this.properties,o=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const r of o)this.createProperty(r,e[r])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const o=new Set(t.flat(1/0).reverse());for(const r of o)e.unshift(Y(r))}else t!==void 0&&e.push(Y(t));return e}static _$Eh(t,e){const o=e.attribute;return o===!1?void 0:typeof o=="string"?o:typeof t=="string"?t.toLowerCase():void 0}o(){var t;this._$Ev=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$Ep(),this.requestUpdate(),(t=this.constructor.l)===null||t===void 0||t.forEach(e=>e(this))}addController(t){var e,o;((e=this._$Em)!==null&&e!==void 0?e:this._$Em=[]).push(t),this.renderRoot!==void 0&&this.isConnected&&((o=t.hostConnected)===null||o===void 0||o.call(t))}removeController(t){var e;(e=this._$Em)===null||e===void 0||e.splice(this._$Em.indexOf(t)>>>0,1)}_$Ep(){this.constructor.elementProperties.forEach((t,e)=>{this.hasOwnProperty(e)&&(this._$Et.set(e,this[e]),delete this[e])})}createRenderRoot(){var t;const e=(t=this.shadowRoot)!==null&&t!==void 0?t:this.attachShadow(this.constructor.shadowRootOptions);return vt(e,this.constructor.elementStyles),e}connectedCallback(){var t;this.renderRoot===void 0&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$Em)===null||t===void 0||t.forEach(e=>{var o;return(o=e.hostConnected)===null||o===void 0?void 0:o.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$Em)===null||t===void 0||t.forEach(e=>{var o;return(o=e.hostDisconnected)===null||o===void 0?void 0:o.call(e)})}attributeChangedCallback(t,e,o){this._$AK(t,o)}_$Eg(t,e,o=X){var r,a;const s=this.constructor._$Eh(t,o);if(s!==void 0&&o.reflect===!0){const d=((a=(r=o.converter)===null||r===void 0?void 0:r.toAttribute)!==null&&a!==void 0?a:V.toAttribute)(e,o.type);this._$Ei=t,d==null?this.removeAttribute(s):this.setAttribute(s,d),this._$Ei=null}}_$AK(t,e){var o,r,a;const s=this.constructor,d=s._$Eu.get(t);if(d!==void 0&&this._$Ei!==d){const n=s.getPropertyOptions(d),l=n.converter,f=(a=(r=(o=l)===null||o===void 0?void 0:o.fromAttribute)!==null&&r!==void 0?r:typeof l=="function"?l:null)!==null&&a!==void 0?a:V.fromAttribute;this._$Ei=d,this[d]=f(e,n.type),this._$Ei=null}}requestUpdate(t,e,o){let r=!0;t!==void 0&&(((o=o||this.constructor.getPropertyOptions(t)).hasChanged||tt)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),o.reflect===!0&&this._$Ei!==t&&(this._$ES===void 0&&(this._$ES=new Map),this._$ES.set(t,o))):r=!1),!this.isUpdatePending&&r&&(this._$Ev=this._$EC())}async _$EC(){this.isUpdatePending=!0;try{await this._$Ev}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach((r,a)=>this[a]=r),this._$Et=void 0);let e=!1;const o=this._$AL;try{e=this.shouldUpdate(o),e?(this.willUpdate(o),(t=this._$Em)===null||t===void 0||t.forEach(r=>{var a;return(a=r.hostUpdate)===null||a===void 0?void 0:a.call(r)}),this.update(o)):this._$ET()}catch(r){throw e=!1,this._$ET(),r}e&&this._$AE(o)}willUpdate(t){}_$AE(t){var e;(e=this._$Em)===null||e===void 0||e.forEach(o=>{var r;return(r=o.hostUpdated)===null||r===void 0?void 0:r.call(o)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$ET(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ev}shouldUpdate(t){return!0}update(t){this._$ES!==void 0&&(this._$ES.forEach((e,o)=>this._$Eg(o,this[o],e)),this._$ES=void 0),this._$ET()}updated(t){}firstUpdated(t){}}k.finalized=!0,k.elementProperties=new Map,k.elementStyles=[],k.shadowRootOptions={mode:"open"},(B=globalThis.reactiveElementPolyfillSupport)===null||B===void 0||B.call(globalThis,{ReactiveElement:k}),((j=globalThis.reactiveElementVersions)!==null&&j!==void 0?j:globalThis.reactiveElementVersions=[]).push("1.0.0");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */var V,X;const N=globalThis.trustedTypes,et=N?N.createPolicy("lit-html",{createHTML:i=>i}):void 0,g=`lit$${(Math.random()+"").slice(9)}$`,ot="?"+g,pt=`<${ot}>`,m=document,S=(i="")=>m.createComment(i),E=i=>i===null||typeof i!="object"&&typeof i!="function",rt=Array.isArray,ft=i=>{var t;return rt(i)||typeof((t=i)===null||t===void 0?void 0:t[Symbol.iterator])=="function"},x=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,it=/-->/g,st=/>/g,y=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,nt=/'/g,at=/"/g,lt=/^(?:script|style|textarea)$/i,$t=i=>(t,...e)=>({_$litType$:i,strings:t,values:e}),W=$t(1),_=Symbol.for("lit-noChange"),h=Symbol.for("lit-nothing"),ut=new WeakMap,gt=(i,t,e)=>{var o,r;const n=(o=e==null?void 0:e.renderBefore)!==null&&o!==void 0?o:t;let s=n._$litPart$;if(s===void 0){const d=(r=e==null?void 0:e.renderBefore)!==null&&r!==void 0?r:null;n._$litPart$=s=new P(t.insertBefore(S(),d),d,void 0,e!=null?e:{})}return s._$AI(i),s},A=m.createTreeWalker(m,129,null,!1),yt=(i,t)=>{const e=i.length-1,o=[];let r,n=t===2?"<svg>":"",s=x;for(let a=0;a<e;a++){const l=i[a];let f,u,c=-1,$=0;for(;$<l.length&&(s.lastIndex=$,u=s.exec(l),u!==null);)$=s.lastIndex,s===x?u[1]==="!--"?s=it:u[1]!==void 0?s=st:u[2]!==void 0?(lt.test(u[2])&&(r=RegExp("</"+u[2],"g")),s=y):u[3]!==void 0&&(s=y):s===y?u[0]===">"?(s=r!=null?r:x,c=-1):u[1]===void 0?c=-2:(c=s.lastIndex-u[2].length,f=u[1],s=u[3]===void 0?y:u[3]==='"'?at:nt):s===at||s===nt?s=y:s===it||s===st?s=x:(s=y,r=void 0);const R=s===y&&i[a+1].startsWith("/>")?" ":"";n+=s===x?l+pt:c>=0?(o.push(f),l.slice(0,c)+"$lit$"+l.slice(c)+g+R):l+g+(c===-2?(o.push(void 0),a):R)}const d=n+(i[e]||"<?>")+(t===2?"</svg>":"");return[et!==void 0?et.createHTML(d):d,o]};class C{constructor({strings:t,_$litType$:e},o){let r;this.parts=[];let n=0,s=0;const d=t.length-1,a=this.parts,[l,f]=yt(t,e);if(this.el=C.createElement(l,o),A.currentNode=this.el.content,e===2){const u=this.el.content,c=u.firstChild;c.remove(),u.append(...c.childNodes)}for(;(r=A.nextNode())!==null&&a.length<d;){if(r.nodeType===1){if(r.hasAttributes()){const u=[];for(const c of r.getAttributeNames())if(c.endsWith("$lit$")||c.startsWith(g)){const $=f[s++];if(u.push(c),$!==void 0){const R=r.getAttribute($.toLowerCase()+"$lit$").split(g),L=/([.?@])?(.*)/.exec($);a.push({type:1,index:n,name:L[2],strings:R,ctor:L[1]==="."?mt:L[1]==="?"?_t:L[1]==="@"?At:M})}else a.push({type:6,index:n})}for(const c of u)r.removeAttribute(c)}if(lt.test(r.tagName)){const u=r.textContent.split(g),c=u.length-1;if(c>0){r.textContent=N?N.emptyScript:"";for(let $=0;$<c;$++)r.append(u[$],S()),A.nextNode(),a.push({type:2,index:++n});r.append(u[c],S())}}}else if(r.nodeType===8)if(r.data===ot)a.push({type:2,index:n});else{let u=-1;for(;(u=r.data.indexOf(g,u+1))!==-1;)a.push({type:7,index:n}),u+=g.length-1}n++}}static createElement(t,e){const o=m.createElement("template");return o.innerHTML=t,o}}function w(i,t,e=i,o){var r,n,s,d;if(t===_)return t;let a=o!==void 0?(r=e._$Cl)===null||r===void 0?void 0:r[o]:e._$Cu;const l=E(t)?void 0:t._$litDirective$;return(a==null?void 0:a.constructor)!==l&&((n=a==null?void 0:a._$AO)===null||n===void 0||n.call(a,!1),l===void 0?a=void 0:(a=new l(i),a._$AT(i,e,o)),o!==void 0?((s=(d=e)._$Cl)!==null&&s!==void 0?s:d._$Cl=[])[o]=a:e._$Cu=a),a!==void 0&&(t=w(i,a._$AS(i,t.values),a,o)),t}class kt{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:o},parts:r}=this._$AD,n=((e=t==null?void 0:t.creationScope)!==null&&e!==void 0?e:m).importNode(o,!0);A.currentNode=n;let s=A.nextNode(),d=0,a=0,l=r[0];for(;l!==void 0;){if(d===l.index){let f;l.type===2?f=new P(s,s.nextSibling,this,t):l.type===1?f=new l.ctor(s,l.name,l.strings,this,t):l.type===6&&(f=new wt(s,this,t)),this.v.push(f),l=r[++a]}d!==(l==null?void 0:l.index)&&(s=A.nextNode(),d++)}return n}m(t){let e=0;for(const o of this.v)o!==void 0&&(o.strings!==void 0?(o._$AI(t,o,e),e+=o.strings.length-2):o._$AI(t[e])),e++}}class P{constructor(t,e,o,r){var n;this.type=2,this._$AH=h,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=o,this.options=r,this._$Cg=(n=r==null?void 0:r.isConnected)===null||n===void 0||n}get _$AU(){var t,e;return(e=(t=this._$AM)===null||t===void 0?void 0:t._$AU)!==null&&e!==void 0?e:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&t.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=w(this,t,e),E(t)?t===h||t==null||t===""?(this._$AH!==h&&this._$AR(),this._$AH=h):t!==this._$AH&&t!==_&&this.$(t):t._$litType$!==void 0?this.T(t):t.nodeType!==void 0?this.S(t):ft(t)?this.M(t):this.$(t)}A(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.A(t))}$(t){this._$AH!==h&&E(this._$AH)?this._$AA.nextSibling.data=t:this.S(m.createTextNode(t)),this._$AH=t}T(t){var e;const{values:o,_$litType$:r}=t,n=typeof r=="number"?this._$AC(t):(r.el===void 0&&(r.el=C.createElement(r.h,this.options)),r);if(((e=this._$AH)===null||e===void 0?void 0:e._$AD)===n)this._$AH.m(o);else{const s=new kt(n,this),d=s.p(this.options);s.m(o),this.S(d),this._$AH=s}}_$AC(t){let e=ut.get(t.strings);return e===void 0&&ut.set(t.strings,e=new C(t)),e}M(t){rt(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let o,r=0;for(const n of t)r===e.length?e.push(o=new P(this.A(S()),this.A(S()),this,this.options)):o=e[r],o._$AI(n),r++;r<e.length&&(this._$AR(o&&o._$AB.nextSibling,r),e.length=r)}_$AR(t=this._$AA.nextSibling,e){var o;for((o=this._$AP)===null||o===void 0||o.call(this,!1,!0,e);t&&t!==this._$AB;){const r=t.nextSibling;t.remove(),t=r}}setConnected(t){var e;this._$AM===void 0&&(this._$Cg=t,(e=this._$AP)===null||e===void 0||e.call(this,t))}}class M{constructor(t,e,o,r,n){this.type=1,this._$AH=h,this._$AN=void 0,this.element=t,this.name=e,this._$AM=r,this.options=n,o.length>2||o[0]!==""||o[1]!==""?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=h}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,o,r){const n=this.strings;let s=!1;if(n===void 0)t=w(this,t,e,0),s=!E(t)||t!==this._$AH&&t!==_,s&&(this._$AH=t);else{const d=t;let a,l;for(t=n[0],a=0;a<n.length-1;a++)l=w(this,d[o+a],e,a),l===_&&(l=this._$AH[a]),s||(s=!E(l)||l!==this._$AH[a]),l===h?t=h:t!==h&&(t+=(l!=null?l:"")+n[a+1]),this._$AH[a]=l}s&&!r&&this.k(t)}k(t){t===h?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t!=null?t:"")}}class mt extends M{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===h?void 0:t}}class _t extends M{constructor(){super(...arguments),this.type=4}k(t){t&&t!==h?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name)}}class At extends M{constructor(t,e,o,r,n){super(t,e,o,r,n),this.type=5}_$AI(t,e=this){var o;if((t=(o=w(this,t,e,0))!==null&&o!==void 0?o:h)===_)return;const r=this._$AH,n=t===h&&r!==h||t.capture!==r.capture||t.once!==r.once||t.passive!==r.passive,s=t!==h&&(r===h||n);n&&this.element.removeEventListener(this.name,this,r),s&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,o;typeof this._$AH=="function"?this._$AH.call((o=(e=this.options)===null||e===void 0?void 0:e.host)!==null&&o!==void 0?o:this.element,t):this._$AH.handleEvent(t)}}class wt{constructor(t,e,o){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(t){w(this,t)}}(V=globalThis.litHtmlPolyfillSupport)===null||V===void 0||V.call(globalThis,C,P),((X=globalThis.litHtmlVersions)!==null&&X!==void 0?X:globalThis.litHtmlVersions=[]).push("2.0.0");/**
+ */var W,K;const M=globalThis.trustedTypes,et=M?M.createPolicy("lit-html",{createHTML:i=>i}):void 0,$=`lit$${(Math.random()+"").slice(9)}$`,ot="?"+$,pt=`<${ot}>`,_=document,C=(i="")=>_.createComment(i),P=i=>i===null||typeof i!="object"&&typeof i!="function",rt=Array.isArray,ft=i=>{var t;return rt(i)||typeof((t=i)===null||t===void 0?void 0:t[Symbol.iterator])=="function"},T=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,it=/-->/g,st=/>/g,m=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,at=/'/g,nt=/"/g,lt=/^(?:script|style|textarea)$/i,gt=i=>(t,...e)=>({_$litType$:i,strings:t,values:e}),y=gt(1),A=Symbol.for("lit-noChange"),h=Symbol.for("lit-nothing"),ut=new WeakMap,$t=(i,t,e)=>{var o,r;const a=(o=e==null?void 0:e.renderBefore)!==null&&o!==void 0?o:t;let s=a._$litPart$;if(s===void 0){const d=(r=e==null?void 0:e.renderBefore)!==null&&r!==void 0?r:null;a._$litPart$=s=new H(t.insertBefore(C(),d),d,void 0,e!=null?e:{})}return s._$AI(i),s},w=_.createTreeWalker(_,129,null,!1),yt=(i,t)=>{const e=i.length-1,o=[];let r,a=t===2?"<svg>":"",s=T;for(let n=0;n<e;n++){const l=i[n];let f,u,c=-1,g=0;for(;g<l.length&&(s.lastIndex=g,u=s.exec(l),u!==null);)g=s.lastIndex,s===T?u[1]==="!--"?s=it:u[1]!==void 0?s=st:u[2]!==void 0?(lt.test(u[2])&&(r=RegExp("</"+u[2],"g")),s=m):u[3]!==void 0&&(s=m):s===m?u[0]===">"?(s=r!=null?r:T,c=-1):u[1]===void 0?c=-2:(c=s.lastIndex-u[2].length,f=u[1],s=u[3]===void 0?m:u[3]==='"'?nt:at):s===nt||s===at?s=m:s===it||s===st?s=T:(s=m,r=void 0);const L=s===m&&i[n+1].startsWith("/>")?" ":"";a+=s===T?l+pt:c>=0?(o.push(f),l.slice(0,c)+"$lit$"+l.slice(c)+$+L):l+$+(c===-2?(o.push(void 0),n):L)}const d=a+(i[e]||"<?>")+(t===2?"</svg>":"");return[et!==void 0?et.createHTML(d):d,o]};class U{constructor({strings:t,_$litType$:e},o){let r;this.parts=[];let a=0,s=0;const d=t.length-1,n=this.parts,[l,f]=yt(t,e);if(this.el=U.createElement(l,o),w.currentNode=this.el.content,e===2){const u=this.el.content,c=u.firstChild;c.remove(),u.append(...c.childNodes)}for(;(r=w.nextNode())!==null&&n.length<d;){if(r.nodeType===1){if(r.hasAttributes()){const u=[];for(const c of r.getAttributeNames())if(c.endsWith("$lit$")||c.startsWith($)){const g=f[s++];if(u.push(c),g!==void 0){const L=r.getAttribute(g.toLowerCase()+"$lit$").split($),D=/([.?@])?(.*)/.exec(g);n.push({type:1,index:a,name:D[2],strings:L,ctor:D[1]==="."?kt:D[1]==="?"?_t:D[1]==="@"?At:R})}else n.push({type:6,index:a})}for(const c of u)r.removeAttribute(c)}if(lt.test(r.tagName)){const u=r.textContent.split($),c=u.length-1;if(c>0){r.textContent=M?M.emptyScript:"";for(let g=0;g<c;g++)r.append(u[g],C()),w.nextNode(),n.push({type:2,index:++a});r.append(u[c],C())}}}else if(r.nodeType===8)if(r.data===ot)n.push({type:2,index:a});else{let u=-1;for(;(u=r.data.indexOf($,u+1))!==-1;)n.push({type:7,index:a}),u+=$.length-1}a++}}static createElement(t,e){const o=_.createElement("template");return o.innerHTML=t,o}}function S(i,t,e=i,o){var r,a,s,d;if(t===A)return t;let n=o!==void 0?(r=e._$Cl)===null||r===void 0?void 0:r[o]:e._$Cu;const l=P(t)?void 0:t._$litDirective$;return(n==null?void 0:n.constructor)!==l&&((a=n==null?void 0:n._$AO)===null||a===void 0||a.call(n,!1),l===void 0?n=void 0:(n=new l(i),n._$AT(i,e,o)),o!==void 0?((s=(d=e)._$Cl)!==null&&s!==void 0?s:d._$Cl=[])[o]=n:e._$Cu=n),n!==void 0&&(t=S(i,n._$AS(i,t.values),n,o)),t}class mt{constructor(t,e){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var e;const{el:{content:o},parts:r}=this._$AD,a=((e=t==null?void 0:t.creationScope)!==null&&e!==void 0?e:_).importNode(o,!0);w.currentNode=a;let s=w.nextNode(),d=0,n=0,l=r[0];for(;l!==void 0;){if(d===l.index){let f;l.type===2?f=new H(s,s.nextSibling,this,t):l.type===1?f=new l.ctor(s,l.name,l.strings,this,t):l.type===6&&(f=new wt(s,this,t)),this.v.push(f),l=r[++n]}d!==(l==null?void 0:l.index)&&(s=w.nextNode(),d++)}return a}m(t){let e=0;for(const o of this.v)o!==void 0&&(o.strings!==void 0?(o._$AI(t,o,e),e+=o.strings.length-2):o._$AI(t[e])),e++}}class H{constructor(t,e,o,r){var a;this.type=2,this._$AH=h,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=o,this.options=r,this._$Cg=(a=r==null?void 0:r.isConnected)===null||a===void 0||a}get _$AU(){var t,e;return(e=(t=this._$AM)===null||t===void 0?void 0:t._$AU)!==null&&e!==void 0?e:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&t.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=S(this,t,e),P(t)?t===h||t==null||t===""?(this._$AH!==h&&this._$AR(),this._$AH=h):t!==this._$AH&&t!==A&&this.$(t):t._$litType$!==void 0?this.T(t):t.nodeType!==void 0?this.S(t):ft(t)?this.M(t):this.$(t)}A(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.A(t))}$(t){this._$AH!==h&&P(this._$AH)?this._$AA.nextSibling.data=t:this.S(_.createTextNode(t)),this._$AH=t}T(t){var e;const{values:o,_$litType$:r}=t,a=typeof r=="number"?this._$AC(t):(r.el===void 0&&(r.el=U.createElement(r.h,this.options)),r);if(((e=this._$AH)===null||e===void 0?void 0:e._$AD)===a)this._$AH.m(o);else{const s=new mt(a,this),d=s.p(this.options);s.m(o),this.S(d),this._$AH=s}}_$AC(t){let e=ut.get(t.strings);return e===void 0&&ut.set(t.strings,e=new U(t)),e}M(t){rt(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let o,r=0;for(const a of t)r===e.length?e.push(o=new H(this.A(C()),this.A(C()),this,this.options)):o=e[r],o._$AI(a),r++;r<e.length&&(this._$AR(o&&o._$AB.nextSibling,r),e.length=r)}_$AR(t=this._$AA.nextSibling,e){var o;for((o=this._$AP)===null||o===void 0||o.call(this,!1,!0,e);t&&t!==this._$AB;){const r=t.nextSibling;t.remove(),t=r}}setConnected(t){var e;this._$AM===void 0&&(this._$Cg=t,(e=this._$AP)===null||e===void 0||e.call(this,t))}}class R{constructor(t,e,o,r,a){this.type=1,this._$AH=h,this._$AN=void 0,this.element=t,this.name=e,this._$AM=r,this.options=a,o.length>2||o[0]!==""||o[1]!==""?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=h}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,o,r){const a=this.strings;let s=!1;if(a===void 0)t=S(this,t,e,0),s=!P(t)||t!==this._$AH&&t!==A,s&&(this._$AH=t);else{const d=t;let n,l;for(t=a[0],n=0;n<a.length-1;n++)l=S(this,d[o+n],e,n),l===A&&(l=this._$AH[n]),s||(s=!P(l)||l!==this._$AH[n]),l===h?t=h:t!==h&&(t+=(l!=null?l:"")+a[n+1]),this._$AH[n]=l}s&&!r&&this.k(t)}k(t){t===h?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t!=null?t:"")}}class kt extends R{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===h?void 0:t}}class _t extends R{constructor(){super(...arguments),this.type=4}k(t){t&&t!==h?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name)}}class At extends R{constructor(t,e,o,r,a){super(t,e,o,r,a),this.type=5}_$AI(t,e=this){var o;if((t=(o=S(this,t,e,0))!==null&&o!==void 0?o:h)===A)return;const r=this._$AH,a=t===h&&r!==h||t.capture!==r.capture||t.once!==r.once||t.passive!==r.passive,s=t!==h&&(r===h||a);a&&this.element.removeEventListener(this.name,this,r),s&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,o;typeof this._$AH=="function"?this._$AH.call((o=(e=this.options)===null||e===void 0?void 0:e.host)!==null&&o!==void 0?o:this.element,t):this._$AH.handleEvent(t)}}class wt{constructor(t,e,o){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t)}}(W=globalThis.litHtmlPolyfillSupport)===null||W===void 0||W.call(globalThis,U,H),((K=globalThis.litHtmlVersions)!==null&&K!==void 0?K:globalThis.litHtmlVersions=[]).push("2.0.0");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */var K,q,J;class U extends k{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,e;const o=super.createRenderRoot();return(t=(e=this.renderOptions).renderBefore)!==null&&t!==void 0||(e.renderBefore=o.firstChild),o}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=gt(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Dt)===null||t===void 0||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Dt)===null||t===void 0||t.setConnected(!1)}render(){return _}}U.finalized=!0,U._$litElement$=!0,(K=globalThis.litElementHydrateSupport)===null||K===void 0||K.call(globalThis,{LitElement:U}),(q=globalThis.litElementPolyfillSupport)===null||q===void 0||q.call(globalThis,{LitElement:U}),((J=globalThis.litElementVersions)!==null&&J!==void 0?J:globalThis.litElementVersions=[]).push("3.0.0");/**
+ */var q,J,Z;class O extends k{constructor(){super(...arguments),this.renderOptions={host:this},this._$Dt=void 0}createRenderRoot(){var t,e;const o=super.createRenderRoot();return(t=(e=this.renderOptions).renderBefore)!==null&&t!==void 0||(e.renderBefore=o.firstChild),o}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Dt=$t(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),(t=this._$Dt)===null||t===void 0||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this._$Dt)===null||t===void 0||t.setConnected(!1)}render(){return A}}O.finalized=!0,O._$litElement$=!0,(q=globalThis.litElementHydrateSupport)===null||q===void 0||q.call(globalThis,{LitElement:O}),(J=globalThis.litElementPolyfillSupport)===null||J===void 0||J.call(globalThis,{LitElement:O}),((Z=globalThis.litElementVersions)!==null&&Z!==void 0?Z:globalThis.litElementVersions=[]).push("3.0.0");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const St=(i,t)=>t.kind==="method"&&t.descriptor&&!("value"in t.descriptor)?G(F({},t),{finisher(e){e.createProperty(t.key,i)}}):{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:t.key,initializer(){typeof t.initializer=="function"&&(this[t.key]=t.initializer.call(this))},finisher(e){e.createProperty(t.key,i)}};function H(i){return(t,e)=>e!==void 0?((o,r,n)=>{r.constructor.createProperty(n,o)})(i,t,e):St(i,t)}/**
+ */const St=(i,t)=>t.kind==="method"&&t.descriptor&&!("value"in t.descriptor)?G(F({},t),{finisher(e){e.createProperty(t.key,i)}}):{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:t.key,initializer(){typeof t.initializer=="function"&&(this[t.key]=t.initializer.call(this))},finisher(e){e.createProperty(t.key,i)}};function E(i){return(t,e)=>e!==void 0?((o,r,a)=>{r.constructor.createProperty(a,o)})(i,t,e):St(i,t)}/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function Et(i){return H(G(F({},i),{state:!0}))}z`@-webkit-keyframes uui-blink{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}@keyframes uui-blink{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}`,O("uui-blink 0.9s infinite both"),z`@-webkit-keyframes pulse{0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}80%{transform:translate(-50%,-50%) scale(1.2);opacity:0}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}80%{transform:translate(-50%,-50%) scale(1.2);opacity:0}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}`,O("pulse 0.8s ease-in-out infinite both");const xt=z`@-webkit-keyframes uui-horizontal-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(1px)}30%,50%,70%{transform:translateX(-2px)}40%,60%{transform:translateX(2px)}}@keyframes uui-horizontal-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(1px)}30%,50%,70%{transform:translateX(-2px)}40%,60%{transform:translateX(2px)}}`,dt=O("uui-horizontal-shake 600ms ease backwards");var Ct=Object.defineProperty,Pt=Object.getOwnPropertyDescriptor,ct=(i,t,e,o)=>{for(var r=o>1?void 0:o?Pt(t,e):t,n=i.length-1,s;n>=0;n--)(s=i[n])&&(r=(o?s(t,e,r):s(r))||r);return o&&r&&Ct(t,e,r),r};const Ut=(i,t)=>{class e extends t{constructor(){super(...arguments);this.labelSlotHasContent=!1}connectedCallback(){super.connectedCallback(),this.label||console.warn(this.tagName+" needs a `label`")}labelSlotChanged(r){this.labelSlotHasContent=r.target.assignedNodes({flatten:!0}).length>0}renderLabel(){return W`${this.labelSlotHasContent===!1?W`<span class="label">${this.label}</span>`:""}<slot class="label" style="${this.labelSlotHasContent?"":"visibility: hidden"}" name="${i||""}" @slotchange="${this.labelSlotChanged}"></slot>`}}return ct([H({type:String})],e.prototype,"label",2),ct([Et()],e.prototype,"labelSlotHasContent",2),e},Ht="";var Tt=Object.defineProperty,Ot=Object.getOwnPropertyDescriptor,Z=(i,t,e,o)=>{for(var r=o>1?void 0:o?Ot(t,e):t,n=i.length-1,s;n>=0;n--)(s=i[n])&&(r=(o?s(t,e,r):s(r))||r);return o&&r&&Tt(t,e,r),r};class T extends Ut("",U){constructor(){super();this.disabled=!1,this.look=Ht,this.compact=!1,this.addEventListener("click",this.onHostClick)}onHostClick(t){this.disabled&&(t.preventDefault(),t.stopImmediatePropagation())}render(){return W`<button ?disabled="${this.disabled}" aria-label="${this.label}">${this.renderLabel()}</button>`}}T.styles=[xt,z`:host{position:relative;display:inline-block;margin-left:calc(var(--uui-button-merge-border-left,0) * -1px);--uui-button-slot-padding-l-factor:3;--uui-button-slot-padding-r-factor:3;background-color:var(--uui-interface-surface,#fefefe)}:host([compact]){--uui-button-slot-padding-l-factor:1;--uui-button-slot-padding-r-factor:1}button{height:100%;min-height:var(--uui-button-height,calc(var(--uui-button-base-unit,var(--uui-size-base-unit,6px)) * 6));width:100%;padding:0;text-align:center;vertical-align:middle;box-shadow:none;border-width:var(--uui-button-border-width,1px);border-style:solid;border-color:var(--uui-button-border-color,var(--uui-interface-surface,#fefefe));border-radius:var(--uui-button-border-radius,var(--uui-size-border-radius,3px));cursor:pointer;font-weight:var(--uui-button-font-weight,var(--uui-interface-font-weight,400));font-size:inherit;font-family:inherit;background-color:var(--uui-button-background-color,var(--uui-interface-surface,#fefefe));color:var(--uui-button-contrast,var(--uui-interface-contrast,#060606));transition:background-color 80ms,border-color 80ms,color 80ms}button:hover{background-color:var(--uui-button-background-color-hover,var(--uui-interface-surface-hover,#fafafa));border-color:var(--uui-button-border-color-hover,var(--uui-interface-surface-hover,#fafafa));color:var(--uui-button-contrast-hover,var(--uui-interface-contrast-hover,#1b264f))}button[disabled]{background-color:var(--uui-button-background-color-disabled,var(--uui-interface-surface-disabled,#e4e4e4));color:var(--uui-button-contrast-disabled,var(--uui-interface-contrast-disabled,#73716e));cursor:default}button[disabled]:active{-webkit-animation:${dt};animation:${dt}}button>.label{display:block;padding:0 calc((var(--uui-button-base-unit,var(--uui-size-base-unit,6px)) * var(--uui-button-slot-padding-r-factor))) 0 calc((var(--uui-button-base-unit,var(--uui-size-base-unit,6px)) * var(--uui-button-slot-padding-l-factor)))}:host([look=primary]) button{background-color:var(--uui-look-primary-surface,#1b264f);color:var(--uui-look-primary-contrast,#fefefe);border-style:var(--uui-button-border-style,var(--uui-look-primary-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-primary-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-primary-border,#1b264f);font-weight:var(--uui-look-primary-font-weight,700)}:host([look=primary]) button:hover{background-color:var(--uui-look-primary-surface-hover,#3544b1);color:var(--uui-look-primary-contrast-hover,#fefefe);border-color:var(--uui-look-primary-border-hover,#3544b1)}:host([look=primary]) button[disabled]{background-color:var(--uui-look-primary-surface-disabled,#737882);color:var(--uui-look-primary-contrast-disabled,#e4e4e4);border-color:var(--uui-look-primary-border-disabled,#737882)}:host([look=secondary]) button{background-color:var(--uui-look-secondary-surface,#e2dad4);color:var(--uui-look-secondary-contrast,#1b264f);border-style:var(--uui-button-border-style,var(--uui-look-secondary-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-secondary-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-secondary-border,#e2dad4);font-weight:var(--uui-look-secondary-font-weight,500)}:host([look=secondary]) button:hover{background-color:var(--uui-look-secondary-surface-hover,#f3efed);color:var(--uui-look-secondary-contrast-hover,#3544b1);border-color:var(--uui-look-secondary-border-hover,#f3efed)}:host([look=secondary]) button[disabled]{background-color:var(--uui-look-secondary-surface-disabled,#cfcfcf);color:var(--uui-look-secondary-contrast-disabled,#6a759a);border-color:var(--uui-look-secondary-border-disabled,#cfcfcf)}:host([look=outline]) button{background-color:var(--uui-look-outline-surface,transparent);color:var(--uui-look-outline-contrast,#1b264f);border-style:var(--uui-button-border-style,var(--uui-look-outline-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-outline-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-outline-border,#1b264f);font-weight:var(--uui-look-outline-font-weight,700)}:host([look=outline]) button:hover{background-color:var(--uui-look-outline-surface-hover,transparent);color:var(--uui-look-outline-contrast-hover,#3544b1);border-color:var(--uui-look-outline-border-hover,#3544b1)}:host([look=outline]) button[disabled]{background-color:var(--uui-look-outline-surface-disabled,transparent);color:var(--uui-look-outline-contrast-disabled,#6a759a);border-color:var(--uui-look-outline-border-disabled,#6a759a)}:host([look=placeholder]) button{background-color:var(--uui-look-placeholder-surface,transparent);color:var(--uui-look-placeholder-contrast,#1b264f);border-style:var(--uui-button-border-style,var(--uui-look-placeholder-border-style,dashed));border-radius:var(--uui-button-border-radius,var(--uui-look-placeholder-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-placeholder-border,#1b264f);font-weight:var(--uui-look-placeholder-font-weight,400)}:host([look=placeholder]) button:hover{background-color:var(--uui-look-placeholder-surface-hover,transparent);color:var(--uui-look-placeholder-contrast-hover,#3544b1);border-color:var(--uui-look-placeholder-border-hover,#3544b1)}:host([look=placeholder]) button[disabled]{background-color:var(--uui-look-placeholder-surface-disabled,transparent);color:var(--uui-look-placeholder-contrast-disabled,#6a759a);border-color:var(--uui-look-placeholder-border-disabled,#6a759a)}:host([look=positive]) button{background-color:var(--uui-look-positive-surface,#25aa60);color:var(--uui-look-positive-contrast,#fefefe);border-style:var(--uui-button-border-style,var(--uui-look-positive-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-positive-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-positive-border,#25aa60);font-weight:var(--uui-look-positive-font-weight,700)}:host([look=positive]) button:hover{background-color:var(--uui-look-positive-surface-hover,#2bc570);color:var(--uui-look-positive-contrast-hover,#fefefe);border-color:var(--uui-look-positive-border-hover,#2bc570)}:host([look=positive]) button[disabled]{background-color:var(--uui-look-positive-surface-disabled,#597566);color:var(--uui-look-positive-contrast-disabled,#fefefe);border-color:var(--uui-look-positive-border-disabled,#597566)}:host([look=warning]) button{background-color:var(--uui-look-warning-surface,#fad634);color:var(--uui-look-warning-contrast,#060606);border-style:var(--uui-button-border-style,var(--uui-look-warning-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-warning-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-warning-border,#fad634);font-weight:var(--uui-look-warning-font-weight,700)}:host([look=warning]) button:hover{background-color:var(--uui-look-warning-surface-hover,#fbe065);color:var(--uui-look-warning-contrast-hover,#060606);border-color:var(--uui-look-warning-border-hover,#fbe065)}:host([look=warning]) button[disabled]{background-color:var(--uui-look-warning-surface-disabled,#a6a085);color:var(--uui-look-warning-contrast-disabled,#060606);border-color:var(--uui-look-warning-border-disabled,#a6a085)}:host([look=danger]) button{background-color:var(--uui-look-danger-surface,#d42054);color:var(--uui-look-danger-contrast,#fefefe);border-style:var(--uui-button-border-style,var(--uui-look-danger-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-danger-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-danger-border,#d42054);font-weight:var(--uui-look-danger-font-weight,700)}:host([look=danger]) button:hover{background-color:var(--uui-look-danger-surface-hover,#e23c6b);color:var(--uui-look-danger-contrast-hover,#fefefe);border-color:var(--uui-look-danger-border-hover,#e23c6b)}:host([look=danger]) button[disabled]{background-color:var(--uui-look-danger-surface-disabled,#856b72);color:var(--uui-look-danger-contrast-disabled,#fefefe);border-color:var(--uui-look-danger-border-disabled,#856b72)}`],Z([H({type:Boolean,reflect:!0})],T.prototype,"disabled",2),Z([H({reflect:!0})],T.prototype,"look",2),Z([H({type:Boolean,reflect:!0})],T.prototype,"compact",2),customElements.define("uui-button",T)});
+ */function Et(i){return E(G(F({},i),{state:!0}))}N`@-webkit-keyframes uui-blink{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}@keyframes uui-blink{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}`,z("uui-blink 0.9s infinite both"),N`@-webkit-keyframes pulse{0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}80%{transform:translate(-50%,-50%) scale(1.2);opacity:0}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}80%{transform:translate(-50%,-50%) scale(1.2);opacity:0}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}`,z("pulse 0.8s ease-in-out infinite both");const xt=N`@-webkit-keyframes uui-horizontal-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(1px)}30%,50%,70%{transform:translateX(-2px)}40%,60%{transform:translateX(2px)}}@keyframes uui-horizontal-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(1px)}30%,50%,70%{transform:translateX(-2px)}40%,60%{transform:translateX(2px)}}`,dt=z("uui-horizontal-shake 600ms ease backwards");var Ct=Object.defineProperty,Pt=Object.getOwnPropertyDescriptor,ct=(i,t,e,o)=>{for(var r=o>1?void 0:o?Pt(t,e):t,a=i.length-1,s;a>=0;a--)(s=i[a])&&(r=(o?s(t,e,r):s(r))||r);return o&&r&&Ct(t,e,r),r};const Tt=(i,t)=>{class e extends t{constructor(){super(...arguments);this.labelSlotHasContent=!1}connectedCallback(){super.connectedCallback(),this.label||console.warn(this.tagName+" needs a `label`")}labelSlotChanged(r){this.labelSlotHasContent=r.target.assignedNodes({flatten:!0}).length>0}renderLabel(){return y`${this.labelSlotHasContent===!1?y`<span class="label">${this.label}</span>`:""}<slot class="label" style="${this.labelSlotHasContent?"":"visibility: hidden"}" name="${i||""}" @slotchange="${this.labelSlotChanged}"></slot>`}}return ct([E({type:String})],e.prototype,"label",2),ct([Et()],e.prototype,"labelSlotHasContent",2),e},Ut="";var Ht=Object.defineProperty,Ot=Object.getOwnPropertyDescriptor,I=(i,t,e,o)=>{for(var r=o>1?void 0:o?Ot(t,e):t,a=i.length-1,s;a>=0;a--)(s=i[a])&&(r=(o?s(t,e,r):s(r))||r);return o&&r&&Ht(t,e,r),r};class x extends Tt("",O){constructor(){super();this.disabled=!1,this.look=Ut,this.compact=!1,this.state=null,this.addEventListener("click",this.onHostClick)}onHostClick(t){this.disabled&&(t.preventDefault(),t.stopImmediatePropagation())}connectedCallback(){super.connectedCallback(),customElements.get("uui-loader")||console.warn("To properly render the waiting state, the uui-loader element has to be registered")}updated(t){t.has("state")&&(this.disabled=!!this.state,(this.state==="success"||this.state==="failed")&&setTimeout(()=>this.state=null,2e3))}__renderState(){let t=y``;switch(this.state){case"waiting":t=y`<uui-loader-circle size="m"></uui-loader-circle>`;break;case"success":t=y`<span style="font-size:24px">✔</span>`;break;case"failed":t=y`<span style="font-size:24px;line-height:1">🗙</span>`;break;default:return""}return y`<div id="state">${t}</div>`}render(){return y`<button ?disabled="${this.disabled}" aria-label="${this.label}">${this.renderLabel()} ${this.__renderState()}</button>`}}x.styles=[xt,N`:host{position:relative;display:inline-block;margin-left:calc(var(--uui-button-merge-border-left,0) * -1px);--uui-button-slot-padding-l-factor:3;--uui-button-slot-padding-r-factor:3;background-color:var(--uui-interface-surface,#fefefe)}:host([compact]){--uui-button-slot-padding-l-factor:1;--uui-button-slot-padding-r-factor:1}:host([state]:not([state=''])) span.label{opacity:0}span.label{transition:opacity 150ms linear}#state{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-delay:50ms;animation-delay:50ms;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}button{height:100%;min-height:var(--uui-button-height,calc(var(--uui-button-base-unit,var(--uui-size-base-unit,6px)) * 6));width:100%;padding:0;text-align:center;vertical-align:middle;box-shadow:none;border-width:var(--uui-button-border-width,1px);border-style:solid;border-color:var(--uui-button-border-color,var(--uui-interface-surface,#fefefe));border-radius:var(--uui-button-border-radius,var(--uui-size-border-radius,3px));cursor:pointer;font-weight:var(--uui-button-font-weight,var(--uui-interface-font-weight,400));font-size:inherit;font-family:inherit;background-color:var(--uui-button-background-color,var(--uui-interface-surface,#fefefe));color:var(--uui-button-contrast,var(--uui-interface-contrast,#060606));transition:background-color 80ms,border-color 80ms,color 80ms}button:hover{background-color:var(--uui-button-background-color-hover,var(--uui-interface-surface-hover,#fafafa));border-color:var(--uui-button-border-color-hover,var(--uui-interface-surface-hover,#fafafa));color:var(--uui-button-contrast-hover,var(--uui-interface-contrast-hover,#1b264f))}button[disabled]{background-color:var(--uui-button-background-color-disabled,var(--uui-interface-surface-disabled,#e4e4e4));color:var(--uui-button-contrast-disabled,var(--uui-interface-contrast-disabled,#73716e));cursor:default}button[disabled]:active{-webkit-animation:${dt};animation:${dt}}button>.label{display:block;padding:0 calc((var(--uui-button-base-unit,var(--uui-size-base-unit,6px)) * var(--uui-button-slot-padding-r-factor))) 0 calc((var(--uui-button-base-unit,var(--uui-size-base-unit,6px)) * var(--uui-button-slot-padding-l-factor)))}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}:host([look=primary]) button{background-color:var(--uui-look-primary-surface,#1b264f);color:var(--uui-look-primary-contrast,#fefefe);border-style:var(--uui-button-border-style,var(--uui-look-primary-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-primary-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-primary-border,#1b264f);font-weight:var(--uui-look-primary-font-weight,700)}:host([look=primary]) button:hover{background-color:var(--uui-look-primary-surface-hover,#3544b1);color:var(--uui-look-primary-contrast-hover,#fefefe);border-color:var(--uui-look-primary-border-hover,#3544b1)}:host([look=primary]) button[disabled]{background-color:var(--uui-look-primary-surface-disabled,#737882);color:var(--uui-look-primary-contrast-disabled,#e4e4e4);border-color:var(--uui-look-primary-border-disabled,#737882)}:host([look=secondary]) button{background-color:var(--uui-look-secondary-surface,#e2dad4);color:var(--uui-look-secondary-contrast,#1b264f);border-style:var(--uui-button-border-style,var(--uui-look-secondary-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-secondary-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-secondary-border,#e2dad4);font-weight:var(--uui-look-secondary-font-weight,500)}:host([look=secondary]) button:hover{background-color:var(--uui-look-secondary-surface-hover,#f3efed);color:var(--uui-look-secondary-contrast-hover,#3544b1);border-color:var(--uui-look-secondary-border-hover,#f3efed)}:host([look=secondary]) button[disabled]{background-color:var(--uui-look-secondary-surface-disabled,#cfcfcf);color:var(--uui-look-secondary-contrast-disabled,#6a759a);border-color:var(--uui-look-secondary-border-disabled,#cfcfcf)}:host([look=outline]) button{background-color:var(--uui-look-outline-surface,transparent);color:var(--uui-look-outline-contrast,#1b264f);border-style:var(--uui-button-border-style,var(--uui-look-outline-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-outline-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-outline-border,#1b264f);font-weight:var(--uui-look-outline-font-weight,700)}:host([look=outline]) button:hover{background-color:var(--uui-look-outline-surface-hover,transparent);color:var(--uui-look-outline-contrast-hover,#3544b1);border-color:var(--uui-look-outline-border-hover,#3544b1)}:host([look=outline]) button[disabled]{background-color:var(--uui-look-outline-surface-disabled,transparent);color:var(--uui-look-outline-contrast-disabled,#6a759a);border-color:var(--uui-look-outline-border-disabled,#6a759a)}:host([look=placeholder]) button{background-color:var(--uui-look-placeholder-surface,transparent);color:var(--uui-look-placeholder-contrast,#1b264f);border-style:var(--uui-button-border-style,var(--uui-look-placeholder-border-style,dashed));border-radius:var(--uui-button-border-radius,var(--uui-look-placeholder-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-placeholder-border,#1b264f);font-weight:var(--uui-look-placeholder-font-weight,400)}:host([look=placeholder]) button:hover{background-color:var(--uui-look-placeholder-surface-hover,transparent);color:var(--uui-look-placeholder-contrast-hover,#3544b1);border-color:var(--uui-look-placeholder-border-hover,#3544b1)}:host([look=placeholder]) button[disabled]{background-color:var(--uui-look-placeholder-surface-disabled,transparent);color:var(--uui-look-placeholder-contrast-disabled,#6a759a);border-color:var(--uui-look-placeholder-border-disabled,#6a759a)}:host([look=positive]) button{background-color:var(--uui-look-positive-surface,#25aa60);color:var(--uui-look-positive-contrast,#fefefe);border-style:var(--uui-button-border-style,var(--uui-look-positive-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-positive-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-positive-border,#25aa60);font-weight:var(--uui-look-positive-font-weight,700)}:host([look=positive]) button:hover{background-color:var(--uui-look-positive-surface-hover,#2bc570);color:var(--uui-look-positive-contrast-hover,#fefefe);border-color:var(--uui-look-positive-border-hover,#2bc570)}:host([look=positive]) button[disabled]{background-color:var(--uui-look-positive-surface-disabled,#597566);color:var(--uui-look-positive-contrast-disabled,#fefefe);border-color:var(--uui-look-positive-border-disabled,#597566)}:host([look=warning]) button{background-color:var(--uui-look-warning-surface,#fad634);color:var(--uui-look-warning-contrast,#060606);border-style:var(--uui-button-border-style,var(--uui-look-warning-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-warning-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-warning-border,#fad634);font-weight:var(--uui-look-warning-font-weight,700)}:host([look=warning]) button:hover{background-color:var(--uui-look-warning-surface-hover,#fbe065);color:var(--uui-look-warning-contrast-hover,#060606);border-color:var(--uui-look-warning-border-hover,#fbe065)}:host([look=warning]) button[disabled]{background-color:var(--uui-look-warning-surface-disabled,#a6a085);color:var(--uui-look-warning-contrast-disabled,#060606);border-color:var(--uui-look-warning-border-disabled,#a6a085)}:host([look=danger]) button{background-color:var(--uui-look-danger-surface,#d42054);color:var(--uui-look-danger-contrast,#fefefe);border-style:var(--uui-button-border-style,var(--uui-look-danger-border-style,solid));border-radius:var(--uui-button-border-radius,var(--uui-look-danger-border-radius,var(--uui-size-border-radius,3px)));border-color:var(--uui-look-danger-border,#d42054);font-weight:var(--uui-look-danger-font-weight,700)}:host([look=danger]) button:hover{background-color:var(--uui-look-danger-surface-hover,#e23c6b);color:var(--uui-look-danger-contrast-hover,#fefefe);border-color:var(--uui-look-danger-border-hover,#e23c6b)}:host([look=danger]) button[disabled]{background-color:var(--uui-look-danger-surface-disabled,#856b72);color:var(--uui-look-danger-contrast-disabled,#fefefe);border-color:var(--uui-look-danger-border-disabled,#856b72)}`],I([E({type:Boolean,reflect:!0})],x.prototype,"disabled",2),I([E({reflect:!0})],x.prototype,"look",2),I([E({type:Boolean,reflect:!0})],x.prototype,"compact",2),I([E({type:String,reflect:!0})],x.prototype,"state",2),customElements.define("uui-button",x)});
 //# sourceMappingURL=uui-button.min.js.map

lib/index.js

@@ -24,2 +24,3 @@ import { LitElement, html, css } from 'lit';
     this.compact = false;
+    this.state = null;
     this.addEventListener("click", this.onHostClick);
@@ -33,6 +34,36 @@ }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!customElements.get("uui-loader"))
+      console.warn("To properly render the waiting state, the uui-loader element has to be registered");
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("state")) {
+      this.disabled = !!this.state;
+      if (this.state === "success" || this.state === "failed") {
+        setTimeout(() => this.state = null, 2e3);
+      }
+    }
+  }
+  __renderState() {
+    let element = html``;
+    switch (this.state) {
+      case "waiting":
+        element = html`<uui-loader-circle size="m"></uui-loader-circle>`;
+        break;
+      case "success":
+        element = html`<span style="font-size: 24px">✔</span>`;
+        break;
+      case "failed":
+        element = html`<span style="font-size: 24px; line-height: 1;">🗙</span>`;
+        break;
+      default:
+        return "";
+    }
+    return html`<div id="state">${element}</div>`;
+  }
   render() {
     return html`
       <button ?disabled=${this.disabled} aria-label="${this.label}">
-        ${this.renderLabel()}
+        ${this.renderLabel()} ${this.__renderState()}
       </button>
@@ -59,2 +90,26 @@ `;
 
+      :host([state]:not([state=''])) span.label {
+        opacity: 0;
+      }
+
+      span.label {
+        transition: opacity 150ms linear;
+      }
+
+      #state {
+        position: absolute;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        left: 50%;
+        -webkit-animation-name: fadeIn;
+                animation-name: fadeIn;
+        -webkit-animation-delay: 50ms;
+                animation-delay: 50ms;
+        -webkit-animation-duration: 500ms;
+                animation-duration: 500ms;
+        -webkit-animation-fill-mode: forwards;
+                animation-fill-mode: forwards;
+        opacity: 0;
+      }
+
       button {
@@ -146,2 +201,38 @@ height: 100%;
 
+      /* ANIMATIONS */
+      @-webkit-keyframes fadeIn {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+      @keyframes fadeIn {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+
+      @-webkit-keyframes fadeOut {
+        0% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+
+      @keyframes fadeOut {
+        0% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+
       /* LOOKS */
@@ -337,3 +428,6 @@
 ], UUIButtonElement.prototype, "compact", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], UUIButtonElement.prototype, "state", 2);
 
 customElements.define("uui-button", UUIButtonElement);

lib/uui-button.element.d.ts

 import { LitElement } from 'lit';
 import { InterfaceLookType } from '@umbraco-ui/uui-base/lib/types';
+export declare type ButtonState = null | 'waiting' | 'success' | 'failed';
 declare const UUIButtonElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & typeof LitElement;
@@ -45,6 +46,16 @@ /**
     compact: boolean;
+    /**
+     * Sets the state of the button. With waiting state a loader will show, the success state and fail states display icons. State is reset do default automatically after 3 seconds.
+     * @type {null |'waiting' | 'success' | 'failed'}
+     * @attr
+     * @default null
+     */
+    state: ButtonState;
     constructor();
     private onHostClick;
+    connectedCallback(): void;
+    updated(changedProperties: any): void;
+    private __renderState;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

lib/uui-button.element.js

@@ -24,2 +24,3 @@ import { LitElement, html, css } from 'lit';
     this.compact = false;
+    this.state = null;
     this.addEventListener("click", this.onHostClick);
@@ -33,6 +34,36 @@ }
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!customElements.get("uui-loader"))
+      console.warn("To properly render the waiting state, the uui-loader element has to be registered");
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("state")) {
+      this.disabled = !!this.state;
+      if (this.state === "success" || this.state === "failed") {
+        setTimeout(() => this.state = null, 2e3);
+      }
+    }
+  }
+  __renderState() {
+    let element = html``;
+    switch (this.state) {
+      case "waiting":
+        element = html`<uui-loader-circle size="m"></uui-loader-circle>`;
+        break;
+      case "success":
+        element = html`<span style="font-size: 24px">✔</span>`;
+        break;
+      case "failed":
+        element = html`<span style="font-size: 24px; line-height: 1;">🗙</span>`;
+        break;
+      default:
+        return "";
+    }
+    return html`<div id="state">${element}</div>`;
+  }
   render() {
     return html`
       <button ?disabled=${this.disabled} aria-label="${this.label}">
-        ${this.renderLabel()}
+        ${this.renderLabel()} ${this.__renderState()}
       </button>
@@ -59,2 +90,26 @@ `;
 
+      :host([state]:not([state=''])) span.label {
+        opacity: 0;
+      }
+
+      span.label {
+        transition: opacity 150ms linear;
+      }
+
+      #state {
+        position: absolute;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        left: 50%;
+        -webkit-animation-name: fadeIn;
+                animation-name: fadeIn;
+        -webkit-animation-delay: 50ms;
+                animation-delay: 50ms;
+        -webkit-animation-duration: 500ms;
+                animation-duration: 500ms;
+        -webkit-animation-fill-mode: forwards;
+                animation-fill-mode: forwards;
+        opacity: 0;
+      }
+
       button {
@@ -146,2 +201,38 @@ height: 100%;
 
+      /* ANIMATIONS */
+      @-webkit-keyframes fadeIn {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+      @keyframes fadeIn {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+
+      @-webkit-keyframes fadeOut {
+        0% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+
+      @keyframes fadeOut {
+        0% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+
       /* LOOKS */
@@ -337,3 +428,6 @@
 ], UUIButtonElement.prototype, "compact", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], UUIButtonElement.prototype, "state", 2);
 
 export { UUIButtonElement };

package.json

 {
   "name": "@umbraco-ui/uui-button",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "license": "MIT",
@@ -43,3 +43,3 @@ "description": "All-round button, Umbraco backoffice style.",
   "homepage": "https://uui.umbraco.com/?path=/story/uui-button",
-  "gitHead": "bb05b78ed6001ae18d3db96bf8f4455ac1a4f67a"
+  "gitHead": "00fc3edb35d99b7e328a7932493c2df1662a3ecf"
 }

No alert changes

Improved metrics

Total package byte prevSize

130487

increased by8.18%

Lines of code

1148

increased by21.87%

No dependency changes