@digital-realty/ix-button - npm Package Compare versions

Comparing version 3.3.4-alpha-225517-t51.0 to 3.3.4-alpha-225535-t51.0

dist/ix-button.js

@@ -8,2 +8,3 @@ import { css } from 'lit';
       display: flex;
+      --md-circular-progress-size: 24px;
     }
@@ -10,0 +11,0 @@

dist/ix-button.min.js

@@ -1,2 +0,2 @@
-import{LitElement,isServer,html,nothing,css}from"lit";import{__decorate}from"tslib";import{literal,html as html$1}from"lit/static-html.js";import{property}from"lit/decorators.js";import{isActivationClick,dispatchActivationClick}from"@material/web/internal/events/form-label-activation.js";import{ifDefined}from"lit/directives/if-defined.js";import{internals}from"@material/web/labs/behaviors/element-internals.js";import"@material/web/button/text-button.js";import"@material/web/button/elevated-button.js";import"@material/web/button/filled-button.js";import"@material/web/button/outlined-button.js";import"@material/web/button/filled-tonal-button.js";import"@material/web/icon/icon.js";import{setupFormSubmitter}from"@material/web/internal/controller/form-submitter.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";var _a;class IxButton extends LitElement{get form(){return this[internals].form}set form(t){this.setAttribute("form",t)}get buttonElement(){var t;return null==(t=null==(t=null==(t=this.shadowRoot)?void 0:t.querySelector(".md-button"))?void 0:t.shadowRoot)?void 0:t.querySelector(".button")}get name(){var t;return null!=(t=this.getAttribute("name"))?t:""}set name(t){this.setAttribute("name",t)}focus(){this.buttonElement.focus()}blur(){this.buttonElement.blur()}constructor(){super(),this.value="",this[_a]=this.attachInternals(),this.type="submit",this.disabled=!1,this.href=void 0,this.target="",this.trailingIcon=!1,this.hasIcon=!1,this.appearance="filled",this.handleActivationClick=t=>{isActivationClick(t)&&this.buttonElement&&(this.focus(),dispatchActivationClick(this.buttonElement))},this.tags={elevated:literal`md-elevated-button`,filled:literal`md-filled-button`,"filled-tonal":literal`md-filled-tonal-button`,outlined:literal`md-outlined-button`,text:literal`md-text-button`},isServer||this.addEventListener("click",this.handleActivationClick)}render(){var t;return"anchor"===this.appearance?html`<a
+import{LitElement,isServer,html,nothing,css}from"lit";import{__decorate}from"tslib";import{literal,html as html$1}from"lit/static-html.js";import{property}from"lit/decorators.js";import{isActivationClick,dispatchActivationClick}from"@material/web/internal/events/form-label-activation.js";import{ifDefined}from"lit/directives/if-defined.js";import{internals}from"@material/web/labs/behaviors/element-internals.js";import"@material/web/button/text-button.js";import"@material/web/button/elevated-button.js";import"@material/web/button/filled-button.js";import"@material/web/button/outlined-button.js";import"@material/web/button/filled-tonal-button.js";import"@material/web/icon/icon.js";import"@digital-realty/ix-progress/ix-progress.js";import{setupFormSubmitter}from"@material/web/internal/controller/form-submitter.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";var _a;class IxButton extends LitElement{get form(){return this[internals].form}set form(t){this.setAttribute("form",t)}get buttonElement(){var t;return null==(t=null==(t=null==(t=this.shadowRoot)?void 0:t.querySelector(".md-button"))?void 0:t.shadowRoot)?void 0:t.querySelector(".button")}get name(){var t;return null!=(t=this.getAttribute("name"))?t:""}set name(t){this.setAttribute("name",t)}focus(){this.buttonElement.focus()}blur(){this.buttonElement.blur()}constructor(){super(),this.value="",this[_a]=this.attachInternals(),this.type="submit",this.disabled=!1,this.submitting=!1,this.href=void 0,this.target="",this.trailingIcon=!1,this.hasIcon=!1,this.appearance="filled",this.handleActivationClick=t=>{isActivationClick(t)&&this.buttonElement&&(this.focus(),dispatchActivationClick(this.buttonElement))},this.tags={elevated:literal`md-elevated-button`,filled:literal`md-filled-button`,"filled-tonal":literal`md-filled-tonal-button`,outlined:literal`md-outlined-button`,text:literal`md-text-button`},isServer||this.addEventListener("click",this.handleActivationClick)}render(){var t;return"anchor"===this.appearance?html`<a
         target=${ifDefined(this.target)}
@@ -6,3 +6,3 @@ href=${ifDefined(this.href)}
       ></a>`:(t=(null==(t=this.tags)?void 0:t[this.appearance])||this.tags.outlined,html$1`<${t}
-      ?disabled=${this.disabled}
+      ?disabled=${this.disabled||this.submitting}
       target=${ifDefined(this.target)}
@@ -17,5 +17,8 @@ href=${ifDefined(this.href)}
       <div class="slot-wrap">
-        <slot></slot>
+        ${this.submitting?html`<ix-progress
+                .indeterminate=${!0}
+                .linear=${!1}
+              ></ix-progress>`:html`<slot></slot>`}
       </div>
       ${this.hasIcon?html`<slot slot="icon" name="icon"></slot>`:nothing}
-    </${t}>`)}}_a=internals,requestUpdateOnAriaChange(IxButton),setupFormSubmitter(IxButton),IxButton.formAssociated=!0,IxButton.shadowRootOptions={mode:"open",delegatesFocus:!0},__decorate([property()],IxButton.prototype,"value",void 0),__decorate([property()],IxButton.prototype,"type",void 0),__decorate([property({type:Boolean,reflect:!0})],IxButton.prototype,"disabled",void 0),__decorate([property()],IxButton.prototype,"href",void 0),__decorate([property()],IxButton.prototype,"target",void 0),__decorate([property({type:Boolean,attribute:"trailing-icon"})],IxButton.prototype,"trailingIcon",void 0),__decorate([property({type:Boolean,attribute:"has-icon"})],IxButton.prototype,"hasIcon",void 0),__decorate([property()],IxButton.prototype,"appearance",void 0);class IxButtonStyled extends IxButton{}IxButtonStyled.styles=css`.md-button{display:flex}.slot-wrap{font-weight:700;text-transform:uppercase;position:relative;letter-spacing:1.25px}`,window.customElements.define("ix-button",IxButtonStyled);export{IxButtonStyled};
+    </${t}>`)}}_a=internals,requestUpdateOnAriaChange(IxButton),setupFormSubmitter(IxButton),IxButton.formAssociated=!0,IxButton.shadowRootOptions={mode:"open",delegatesFocus:!0},__decorate([property()],IxButton.prototype,"value",void 0),__decorate([property()],IxButton.prototype,"type",void 0),__decorate([property({type:Boolean,reflect:!0})],IxButton.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],IxButton.prototype,"submitting",void 0),__decorate([property()],IxButton.prototype,"href",void 0),__decorate([property()],IxButton.prototype,"target",void 0),__decorate([property({type:Boolean,attribute:"trailing-icon"})],IxButton.prototype,"trailingIcon",void 0),__decorate([property({type:Boolean,attribute:"has-icon"})],IxButton.prototype,"hasIcon",void 0),__decorate([property()],IxButton.prototype,"appearance",void 0);class IxButtonStyled extends IxButton{}IxButtonStyled.styles=css`.md-button{display:flex;--md-circular-progress-size:24px}.slot-wrap{font-weight:700;text-transform:uppercase;position:relative;letter-spacing:1.25px}`,window.customElements.define("ix-button",IxButtonStyled);export{IxButtonStyled};

dist/IxButton.d.ts

@@ -9,2 +9,3 @@ import { LitElement } from 'lit';
 import '@material/web/icon/icon.js';
+import '@digital-realty/ix-progress/ix-progress.js';
 import { FormSubmitter, FormSubmitterType } from '@material/web/internal/controller/form-submitter.js';
@@ -35,2 +36,6 @@ export declare class IxButton extends LitElement implements FormSubmitter {
     /**
+     * Whether or not the button is submitting.
+     */
+    submitting: boolean;
+    /**
      * The URL that the link button points to.
@@ -37,0 +42,0 @@ */

dist/IxButton.js

@@ -15,2 +15,3 @@ var _a;
 import '@material/web/icon/icon.js';
+import '@digital-realty/ix-progress/ix-progress.js';
 import { setupFormSubmitter, } from '@material/web/internal/controller/form-submitter.js';
@@ -57,2 +58,6 @@ import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
         /**
+         * Whether or not the button is submitting.
+         */
+        this.submitting = false;
+        /**
          * The URL that the link button points to.
@@ -107,3 +112,3 @@ */
         return staticHtml `<${tag}
-      ?disabled=${this.disabled}
+      ?disabled=${this.disabled || this.submitting}
       target=${ifDefined(this.target)}
@@ -118,3 +123,8 @@ href=${ifDefined(this.href)}
       <div class="slot-wrap">
-        <slot></slot>
+        ${this.submitting
+            ? html `<ix-progress
+                .indeterminate=${true}
+                .linear=${false}
+              ></ix-progress>`
+            : html `<slot></slot>`}
       </div>
@@ -147,2 +157,5 @@ ${this.hasIcon ? html `<slot slot="icon" name="icon"></slot>` : nothing}
 __decorate([
+    property({ type: Boolean, reflect: true })
+], IxButton.prototype, "submitting", void 0);
+__decorate([
     property()
@@ -149,0 +162,0 @@ ], IxButton.prototype, "href", void 0);

package.json

@@ -6,3 +6,3 @@ {
   "author": "Digital Realty",
-  "version": "3.3.4-alpha-225517-t51.0",
+  "version": "3.3.4-alpha-225535-t51.0",
   "type": "module",
@@ -31,2 +31,3 @@ "main": "dist/index.js",
   "dependencies": {
+    "@digital-realty/ix-progress": "^1.2.4-alpha-225535-t51.0",
     "@lit/react": "^1.0.2",
@@ -111,3 +112,3 @@ "@material/web": "1.2.0",
   ],
-  "gitHead": "c15ea02b7341615d8c9df7454aa4913b29773356"
+  "gitHead": "003a49b8a9820a743a09511821f294163bf32f60"
 }

No alert changes

Improved metrics

Total package byte prevSize

28467

increased by6.63%

Lines of code

299

increased by8.33%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Added@digital-realty/ix-progress@^1.2.4-alpha-225535-t51.0

• + Added@digital-realty/ix-progress@1.2.6(transitive)