@patternfly/pfe-button - npm Package Compare versions

Comparing version 2.0.0-next.6 to 2.0.0-next.7

BaseButton.d.ts

@@ -138,3 +138,5 @@ import type { TemplateResult } from 'lit';
     /** Shorthand for the `icon` slot, the value is icon name */
-    icon: string;
+    icon?: string;
+    /** Icon set for the `icon` property */
+    iconSet?: string;
     /** Represents the state of the anonymous and icon slots */
@@ -141,0 +143,0 @@ protected slots: SlotController;

BaseButton.js

@@ -1,2 +0,2 @@
-var P=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var p=(n,r,a,e)=>{for(var d=e>1?void 0:e?R(r,a):r,C=n.length-1,k;C>=0;C--)(k=n[C])&&(d=(e?k(r,a,d):k(d))||d);return e&&d&&P(r,a,d),d};var B=(n,r,a)=>{if(!r.has(n))throw TypeError("Cannot "+a)};var o=(n,r,a)=>(B(n,r,"read from private field"),a?a.call(n):r.get(n)),f=(n,r,a)=>{if(r.has(n))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(n):r.set(n,a)},h=(n,r,a,e)=>(B(n,r,"write to private field"),e?e.call(n,a):r.set(n,a),a);var u=(n,r,a)=>(B(n,r,"access private method"),a);import{LitElement as S,html as I}from"lit";import{property as b}from"lit/decorators.js";import{classMap as T}from"lit/directives/class-map.js";import{observed as w}from"@patternfly/pfe-core/decorators.js";import{Logger as z}from"@patternfly/pfe-core/controllers/logger.js";import{SlotController as A}from"@patternfly/pfe-core/controllers/slot-controller.js";import{css as L}from"lit";var F=L`:host{display:inline-block;height:max-content;--pfe-icon--color:currentColor}:host([hidden]){display:none!important}[hidden]{display:none!important}::slotted(button){cursor:pointer!important;position:relative!important;color:var(--pf-c-button--m-primary--Color,var(--pf-global--Color--light-100,#fff))!important;background-color:var(--pf-c-button--m-primary--BackgroundColor,var(--pf-global--primary-color--100,#06c))!important;font-family:inherit!important;font-size:var(--pf-c-button--FontSize, var(--pf-global--FontSize--md, 1rem))!important;font-weight:var(--pf-c-button--FontWeight,var(--pf-global--FontWeight--normal,400))!important;line-height:var(--pf-c-button--LineHeight, var(--pf-global--LineHeight--md, 1.5))!important;padding:var(--pf-c-button--PaddingTop,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-button--PaddingBottom,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem))!important}::slotted(button),:host{border-width:0!important;border-style:solid!important;border-radius:var(--pf-c-button--BorderRadius,var(--pf-global--BorderRadius--sm,3px))!important}::slotted(button)::after{position:absolute!important;inset:0 0 0 0!important;content:""!important;border-style:solid!important;border-color:var(--pf-c-button--after--BorderColor,transparent)!important;border-width:var(--pf-c-button--after--BorderWidth,var(--pf-global--BorderWidth--sm,1px))!important;border-radius:var(--pf-c-button--after--BorderRadius,var(--pf-global--BorderRadius--sm,3px))!important}::slotted(button:active){--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--active--Color,
+var P=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var i=(n,r,a,c)=>{for(var p=c>1?void 0:c?R(r,a):r,C=n.length-1,k;C>=0;C--)(k=n[C])&&(p=(c?k(r,a,p):k(p))||p);return c&&p&&P(r,a,p),p};var B=(n,r,a)=>{if(!r.has(n))throw TypeError("Cannot "+a)};var o=(n,r,a)=>(B(n,r,"read from private field"),a?a.call(n):r.get(n)),f=(n,r,a)=>{if(r.has(n))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(n):r.set(n,a)},h=(n,r,a,c)=>(B(n,r,"write to private field"),c?c.call(n,a):r.set(n,a),a);var u=(n,r,a)=>(B(n,r,"access private method"),a);import{LitElement as F,html as I}from"lit";import{property as b}from"lit/decorators.js";import{classMap as T}from"lit/directives/class-map.js";import{observed as w}from"@patternfly/pfe-core/decorators.js";import{Logger as z}from"@patternfly/pfe-core/controllers/logger.js";import{SlotController as A}from"@patternfly/pfe-core/controllers/slot-controller.js";import{css as L}from"lit";var S=L`:host{display:inline-block;height:max-content}::slotted(pfe-icon),pfe-icon{color:currentColor}:host([hidden]){display:none!important}[hidden]{display:none!important}::slotted(button){cursor:pointer!important;position:relative!important;color:var(--pf-c-button--m-primary--Color,var(--pf-global--Color--light-100,#fff))!important;background-color:var(--pf-c-button--m-primary--BackgroundColor,var(--pf-global--primary-color--100,#06c))!important;font-family:inherit!important;font-size:var(--pf-c-button--FontSize, var(--pf-global--FontSize--md, 1rem))!important;font-weight:var(--pf-c-button--FontWeight,var(--pf-global--FontWeight--normal,400))!important;line-height:var(--pf-c-button--LineHeight, var(--pf-global--LineHeight--md, 1.5))!important;padding:var(--pf-c-button--PaddingTop,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-button--PaddingBottom,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem))!important}::slotted(button),:host{border-width:0!important;border-style:solid!important;border-radius:var(--pf-c-button--BorderRadius,var(--pf-global--BorderRadius--sm,3px))!important}::slotted(button)::after{position:absolute!important;inset:0 0 0 0!important;content:""!important;border-style:solid!important;border-color:var(--pf-c-button--after--BorderColor,transparent)!important;border-width:var(--pf-c-button--after--BorderWidth,var(--pf-global--BorderWidth--sm,1px))!important;border-radius:var(--pf-c-button--after--BorderRadius,var(--pf-global--BorderRadius--sm,3px))!important}::slotted(button:active){--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--active--Color,
     var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--active--BackgroundColor,
@@ -70,3 +70,3 @@ var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--active--after--BorderWidth,
     var(--pf-global--FontWeight--bold, 700))}:host([size=small]) ::slotted(button){--pf-c-button--FontSize:var(--pf-c-button--m-small--FontSize,
-    var(--pf-global--FontSize--md, 1rem))}[part=icon]{display:none;pointer-events:none}.hasIcon{position:relative;display:flex;align-items:center}.hasIcon [part=icon]{display:inline-flex;align-items:center;position:absolute;width:16px;left:var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem));margin-inline-end:var(--pf-c-button__icon--m-start--MarginRight,var(--pf-global--spacer--xs,.25rem))}:host(:not([disabled])) .hasIcon [part=icon]{cursor:pointer}[part=icon] ::slotted(*){width:16px;max-width:16px;height:16px;max-height:16px}.hasIcon ::slotted(button){position:absolute;inset:0;padding-left:calc(24px + var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem)))!important}.hasIcon ::slotted(button){padding-left:calc(24px + var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem)))!important}:host([danger]) ::slotted(button){color:var(--pf-c-button--m-danger--Color,var(--pf-global--Color--light-100,#fff))!important;background-color:var(--pf-c-button--m-danger--BackgroundColor,var(--pf-global--danger-color--100,#c9190b))!important}`,W=F;var t,l,s,m,i,v,y,g,x,c=class extends S{constructor(){super(...arguments);f(this,t);f(this,v);f(this,g);this.disabled=!1;this.variant="primary";this.danger=!1;this.icon="";this.slots=new A(this,null,"icon");f(this,s,new z(this));f(this,m,new MutationObserver(()=>u(this,g,x).call(this)));f(this,i,o(this,t,l)?.tabIndex??null)}connectedCallback(){u(this,v,y).call(this),super.connectedCallback(),this.shadowRoot?.addEventListener("slotchange",()=>u(this,v,y).call(this))}render(){let{icon:a}=this,e=this.slots.hasSlotted("icon")||!!a;return I`<span id="container" class="${T({hasIcon:e})}"><span part="icon"><slot name="icon">${this.renderDefaultIcon()}</slot></span><slot></slot></span>`}firstUpdated(){this._disabledChanged(),u(this,g,x).call(this)}_typeChanged(){o(this,t,l)&&o(this,t,l).type!==this.type&&(this.type?o(this,t,l).type=this.type:o(this,t,l).removeAttribute("type"))}_disabledChanged(){o(this,t,l)&&o(this,t,l).disabled!==this.disabled&&(o(this,t,l).disabled=this.disabled,this.disabled?(h(this,i,o(this,t,l).tabIndex),o(this,t,l).setAttribute("tabindex","-1")):o(this,i)?(o(this,t,l).setAttribute("tabindex",o(this,i).toString()),h(this,i,null)):(o(this,t,l).removeAttribute("tabindex"),h(this,i,null)))}};t=new WeakSet,l=function(){return this.querySelector("button")},s=new WeakMap,m=new WeakMap,i=new WeakMap,v=new WeakSet,y=function(){o(this,m).disconnect(),o(this,t,l)&&o(this,m).observe(o(this,t,l),{attributes:!0,attributeFilter:["type","disabled"]})},g=new WeakSet,x=function(){let a=this.querySelectorAll("button");o(this,t,l)?(this.disabled=o(this,t,l).hasAttribute("disabled")||o(this,t,l).getAttribute("aria-disabled")==="true",this.type=o(this,t,l).getAttribute("type")??void 0,a.length>1&&o(this,s).warn("Only one button child is allowed")):o(this,s).warn("You must have a button in the light DOM")},c.styles=[W],p([w,b({reflect:!0,type:Boolean})],c.prototype,"disabled",2),p([b({reflect:!0})],c.prototype,"variant",2),p([b({reflect:!0})],c.prototype,"size",2),p([w,b()],c.prototype,"type",2),p([b({type:Boolean,reflect:!0})],c.prototype,"danger",2),p([b()],c.prototype,"icon",2);export{c as BaseButton};
+    var(--pf-global--FontSize--md, 1rem))}[part=icon]{display:none;pointer-events:none}.hasIcon{position:relative;display:flex;align-items:center}.hasIcon [part=icon]{display:inline-flex;align-items:center;position:absolute;width:16px;left:var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem));margin-inline-end:var(--pf-c-button__icon--m-start--MarginRight,var(--pf-global--spacer--xs,.25rem))}:host(:not([disabled])) .hasIcon [part=icon]{cursor:pointer}[part=icon] ::slotted(*){width:16px;max-width:16px;height:16px;max-height:16px}.hasIcon ::slotted(button){position:absolute;inset:0;padding-left:calc(24px + var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem)))!important}.hasIcon ::slotted(button){padding-left:calc(24px + var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem)))!important}:host([danger]) ::slotted(button){color:var(--pf-c-button--m-danger--Color,var(--pf-global--Color--light-100,#fff))!important;background-color:var(--pf-c-button--m-danger--BackgroundColor,var(--pf-global--danger-color--100,#c9190b))!important}`,W=S;var t,l,s,m,d,v,y,g,x,e=class extends F{constructor(){super(...arguments);f(this,t);f(this,v);f(this,g);this.disabled=!1;this.variant="primary";this.danger=!1;this.slots=new A(this,null,"icon");f(this,s,new z(this));f(this,m,new MutationObserver(()=>u(this,g,x).call(this)));f(this,d,o(this,t,l)?.tabIndex??null)}connectedCallback(){u(this,v,y).call(this),super.connectedCallback(),this.shadowRoot?.addEventListener("slotchange",()=>u(this,v,y).call(this))}render(){let{icon:a}=this,c=this.slots.hasSlotted("icon")||!!a;return I`<span id="container" class="${T({hasIcon:c})}"><span part="icon"><slot name="icon">${this.renderDefaultIcon()}</slot></span><slot></slot></span>`}firstUpdated(){this._disabledChanged(),u(this,g,x).call(this)}_typeChanged(){o(this,t,l)&&o(this,t,l).type!==this.type&&(this.type?o(this,t,l).type=this.type:o(this,t,l).removeAttribute("type"))}_disabledChanged(){o(this,t,l)&&o(this,t,l).disabled!==this.disabled&&(o(this,t,l).disabled=this.disabled,this.disabled?(h(this,d,o(this,t,l).tabIndex),o(this,t,l).setAttribute("tabindex","-1")):o(this,d)?(o(this,t,l).setAttribute("tabindex",o(this,d).toString()),h(this,d,null)):(o(this,t,l).removeAttribute("tabindex"),h(this,d,null)))}};t=new WeakSet,l=function(){return this.querySelector("button")},s=new WeakMap,m=new WeakMap,d=new WeakMap,v=new WeakSet,y=function(){o(this,m).disconnect(),o(this,t,l)&&o(this,m).observe(o(this,t,l),{attributes:!0,attributeFilter:["type","disabled"]})},g=new WeakSet,x=function(){let a=this.querySelectorAll("button");o(this,t,l)?(this.disabled=o(this,t,l).hasAttribute("disabled")||o(this,t,l).getAttribute("aria-disabled")==="true",this.type=o(this,t,l).getAttribute("type")??void 0,a.length>1&&o(this,s).warn("Only one button child is allowed")):o(this,s).warn("You must have a button in the light DOM")},e.styles=[W],i([w,b({reflect:!0,type:Boolean})],e.prototype,"disabled",2),i([b({reflect:!0})],e.prototype,"variant",2),i([b({reflect:!0})],e.prototype,"size",2),i([w,b()],e.prototype,"type",2),i([b({type:Boolean,reflect:!0})],e.prototype,"danger",2),i([b()],e.prototype,"icon",2),i([b({attribute:"icon-set"})],e.prototype,"iconSet",2);export{e as BaseButton};
 //# sourceMappingURL=BaseButton.js.map

custom-elements.json

@@ -673,3 +673,3 @@ {
               "static": true,
-              "default": "2.0.0-next.6",
+              "default": "2.0.0-next.7",
               "readonly": true
@@ -800,5 +800,4 @@ },
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
               "description": "Shorthand for the `icon` slot, the value is icon name",
@@ -813,2 +812,15 @@ "attribute": "icon",
               "kind": "field",
+              "name": "iconSet",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icon set for the `icon` property",
+              "attribute": "icon-set",
+              "inheritedFrom": {
+                "name": "BaseButton",
+                "module": "BaseButton.js"
+              }
+            },
+            {
+              "kind": "field",
               "name": "slots",
@@ -906,4 +918,4 @@ "privacy": "protected",
               },
-              "description": "ARIA label for the progress indicator",
-              "name": "progress-label",
+              "description": "ARIA label for the loading indicator",
+              "name": "loading-label",
               "default": "'loading'"
@@ -1003,5 +1015,4 @@ },
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
               "description": "Shorthand for the `icon` slot, the value is icon name",
@@ -1013,2 +1024,14 @@ "fieldName": "icon",
               }
+            },
+            {
+              "name": "icon-set",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icon set for the `icon` property",
+              "fieldName": "iconSet",
+              "inheritedFrom": {
+                "name": "BaseButton",
+                "module": "BaseButton.ts"
+              }
             }
@@ -1660,5 +1683,4 @@ ],
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
               "description": "Shorthand for the `icon` slot, the value is icon name",
@@ -1669,2 +1691,11 @@ "attribute": "icon"
               "kind": "field",
+              "name": "iconSet",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icon set for the `icon` property",
+              "attribute": "icon-set"
+            },
+            {
+              "kind": "field",
               "name": "slots",
@@ -1778,7 +1809,14 @@ "privacy": "protected",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
               "description": "Shorthand for the `icon` slot, the value is icon name",
               "fieldName": "icon"
+            },
+            {
+              "name": "icon-set",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icon set for the `icon` property",
+              "fieldName": "iconSet"
             }
@@ -1785,0 +1823,0 @@ ],

package.json

 {
   "name": "@patternfly/pfe-button",
-  "version": "2.0.0-next.6",
+  "version": "2.0.0-next.7",
   "license": "MIT",
@@ -72,7 +72,7 @@ "description": "Button element for PatternFly Elements",
   "dependencies": {
-    "@patternfly/pfe-core": "^2.0.0-next.9",
-    "@patternfly/pfe-icon": "^2.0.0-next.4",
-    "@patternfly/pfe-spinner": "^2.0.0-next.5",
+    "@patternfly/pfe-core": "^2.0.0-next.10",
+    "@patternfly/pfe-icon": "^2.0.0-next.5",
+    "@patternfly/pfe-spinner": "^2.0.0-next.6",
     "lit": "2.3.0"
   }
 }

pfe-button.d.ts

@@ -114,3 +114,3 @@ import { BaseButton } from './BaseButton.js';
  *
- * @attr {string} progress-label - ARIA label for the progress indicator {@default `'loading'`}
+ * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}
  *
@@ -117,0 +117,0 @@ * @cssprop {<color>}  --pf-c-button--m-warning--Color                   {@default `#151515`}

pfe-button.js

@@ -1,2 +0,2 @@
-var g=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var a=(l,r,i,n)=>{for(var t=n>1?void 0:n?b(r,i):r,e=l.length-1,p;e>=0;e--)(p=l[e])&&(t=(n?p(r,i,t):p(t))||t);return n&&t&&g(r,i,t),t};import{html as m}from"lit";import{customElement as v,property as c}from"lit/decorators.js";import{BaseButton as d}from"./BaseButton.js";import"@patternfly/pfe-icon";import"@patternfly/pfe-spinner";import{css as f}from"lit";var u=f`:host([warning]) ::slotted(button){color:var(--pf-c-button--m-warning--Color,var(--pf-global--Color--dark-100,#151515))!important;background-color:var(--pf-c-button--m-warning--BackgroundColor,var(--pf-global--warning-color--100,#f0ab00))!important}:host([warning]) ::slotted(button:active){--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--active--Color,
+var b=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var a=(l,r,i,n)=>{for(var t=n>1?void 0:n?f(r,i):r,e=l.length-1,p;e>=0;e--)(p=l[e])&&(t=(n?p(r,i,t):p(t))||t);return n&&t&&b(r,i,t),t};import{html as v}from"lit";import{customElement as h,property as c}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{BaseButton as g}from"./BaseButton.js";import"@patternfly/pfe-icon";import"@patternfly/pfe-spinner";import{css as u}from"lit";var m=u`:host([warning]) ::slotted(button){color:var(--pf-c-button--m-warning--Color,var(--pf-global--Color--dark-100,#151515))!important;background-color:var(--pf-c-button--m-warning--BackgroundColor,var(--pf-global--warning-color--100,#f0ab00))!important}:host([warning]) ::slotted(button:active){--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--active--Color,
     var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--active--BackgroundColor,
@@ -19,3 +19,3 @@ var(--pf-global--palette--gold-500, #c58c00))}:host([warning]) ::slotted(button:focus){--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--focus--Color,
       var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width,
-        calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem))) / 2))}:host([loading]:not([plain])) ::slotted(button){padding-left:calc(12px + var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem)))!important}`,s=u;var o=class extends d{constructor(){super(...arguments);this.loading=!1;this.plain=!1;this.warning=!1}renderDefaultIcon(){return m`<pfe-icon ?hidden="${!this.icon}" icon="${this.icon}" size="sm"></pfe-icon><pfe-spinner ?hidden="${!this.loading}" aria-label="${this.getAttribute("progress-label")??"loading"}"></pfe-spinner>`}};o.version="{{version}}",o.styles=[...d.styles,s],a([c({type:Boolean,reflect:!0})],o.prototype,"loading",2),a([c({type:Boolean,reflect:!0})],o.prototype,"plain",2),a([c({type:Boolean,reflect:!0})],o.prototype,"warning",2),o=a([v("pfe-button")],o);export{o as PfeButton};
+        calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem))) / 2))}:host([loading]:not([plain])) ::slotted(button){padding-left:calc(12px + var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem)))!important}`,s=m;var o=class extends g{constructor(){super(...arguments);this.loading=!1;this.plain=!1;this.warning=!1}renderDefaultIcon(){return v`<pfe-icon size="sm" icon="${d(this.icon)}" set="${d(this.iconSet)}" ?hidden="${!this.icon}"></pfe-icon><pfe-spinner ?hidden="${!this.loading}" aria-label="${this.getAttribute("loading-label")??"loading"}"></pfe-spinner>`}};o.version="{{version}}",o.styles=[...g.styles,s],a([c({type:Boolean,reflect:!0})],o.prototype,"loading",2),a([c({type:Boolean,reflect:!0})],o.prototype,"plain",2),a([c({type:Boolean,reflect:!0})],o.prototype,"warning",2),o=a([h("pfe-button")],o);export{o as PfeButton};
 //# sourceMappingURL=pfe-button.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

146112

increased by1.11%

Lines of code

2304

increased by1.77%

Dependency changes

• Updated@patternfly/pfe-core@^2.0.0-next.10

• Updated@patternfly/pfe-icon@^2.0.0-next.5

• Updated@patternfly/pfe-spinner@^2.0.0-next.6