@assecosolutions/fox-button - npm Package Compare versions

Comparing version 1.5.20 to 1.5.21

index.esm.js

@@ -1513,3 +1513,3 @@ import { css, LitElement, html as html$2 } from 'lit';
     _t$1;
-const styles = css(_t$1 || (_t$1 = _$1`:host{display:inline-flex;outline:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;vertical-align:top;box-sizing:border-box}:host{--fox-button-font-weight: var(--fox-font-weight-medium, 600);--fox-button-font-size: var(--fox-font-size-base, 14px);--fox-button-font-family-fallback: Nunito, Roboto, sans-serif;--fox-button-font-family: var( --fox-font-family, var(--fox-button-font-family-fallback) );--fox-button-text-color-rgb: 15, 19, 16;--fox-button-primary-color-rgb: 231, 236, 240;--fox-button-text-on-primary-color-rgb: 15, 19, 16}:host([primary]){--fox-button-primary-color-rgb-fallback: 69, 153, 255;--fox-button-primary-color-rgb: var( --fox-client-base-rgb-color, var(--fox-button-primary-color-rgb-fallback) );--fox-button-text-color-rgb: 69, 153, 255;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([danger]){--fox-button-primary-color-rgb: 250, 190, 58;--fox-button-text-color-rgb: 250, 190, 58;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([small]){--fox-button-font-size: 12px;--fox-button-height: 26px;--fox-button-horizontal-spaceing: 8px}:host([fullwidth]){width:100%}:host([disabled]){pointer-events:none}.fox-button{transition:all ease-out .4s;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--fox-button-font-family);font-size:var(--fox-button-font-size);font-weight:var(--fox-button-font-weight);text-decoration:none;color:rgba(var(--fox-button-text-color-rgb), var(--fox-button-color-alpha, 1));background:rgba(var(--fox-button-primary-color-rgb), var(--fox-button-background-alpha, 0));border-radius:var(--fox-button-border-radius, 4px);height:var(--fox-button-height, 32px);padding:0 var(--fox-button-horizontal-spaceing, 16px);flex:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle}.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 1)}.fox-button__raised{--fox-button-background-alpha: 1;--fox-button-text-color-rgb: var(--fox-button-text-on-primary-color-rgb)}.fox-button__icon-button{padding:0 var(--fox-button-horizontal-spaceing, 7px)}.fox-button:focus{--fox-button-background-alpha: 0.1}.fox-button:focus.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:hover{cursor:pointer}.fox-button:hover:not(.fox-button:hover.fox-button__raised){background:rgba(148,168,188,.1)}.fox-button:hover.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:active{--fox-button-background-alpha: 0.2;outline:none}.fox-button:active.fox-button__raised{transition:none;--fox-button-background-alpha: 0.9;box-shadow:0 3px 6px #0f131029}.fox-button:disabled{--fox-button-background-alpha: 0;--fox-button-color-alpha: 0.3;cursor:default;pointer-events:none}.fox-button:disabled.fox-button__raised{--fox-button-color-alpha: 0.3;--fox-button-background-alpha: 0.3}.fox-button:disabled.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 0.1)}.fox-button__progress{bottom:0;right:0;left:0;position:absolute;--mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.6);--mdc-theme-primary: rgba(var(--fox-button-primary-color-rgb), 1)}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon,.leading-icon ::slotted(*),.leading-icon .fox-button__icon{margin-left:0;margin-right:5px;display:block;width:18px;height:18px;font-size:18px;vertical-align:top}.fox-button__icon-button .trailing-icon ::slotted(*),.fox-button__icon-button .trailing-icon .fox-button__icon,.fox-button__icon-button .leading-icon ::slotted(*),.fox-button__icon-button .leading-icon .fox-button__icon{margin:0}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon{margin-left:5px;margin-right:0}.slot-container{display:inline-flex;align-items:center;justify-content:center}`));
+const styles = css(_t$1 || (_t$1 = _$1`:host{display:inline-flex;outline:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;vertical-align:top;box-sizing:border-box}:host{--fox-button-font-weight: var(--fox-font-weight-medium, 600);--fox-button-font-size: var(--fox-font-size-base, 14px);--fox-button-font-family-fallback: Nunito, Roboto, sans-serif;--fox-button-font-family: var( --fox-font-family, var(--fox-button-font-family-fallback) );--fox-button-text-color-rgb: 15, 19, 16;--fox-button-primary-color-rgb: 231, 236, 240;--fox-button-text-on-primary-color-rgb: 15, 19, 16}:host([primary]){--fox-button-primary-color-rgb-fallback: 69, 153, 255;--fox-button-primary-color-rgb: var( --fox-client-base-rgb-color, var(--fox-button-primary-color-rgb-fallback) );--fox-button-text-color-rgb: 69, 153, 255;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([danger]){--fox-button-primary-color-rgb: 250, 190, 58;--fox-button-text-color-rgb: 250, 190, 58;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([small]){--fox-button-font-size: 12px;--fox-button-height: 26px;--fox-button-horizontal-spaceing: 8px}:host([fullwidth]){width:100%}:host([disabled]){pointer-events:none}.fox-button{transition:all ease-out .4s;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--fox-button-font-family);font-size:var(--fox-button-font-size);font-weight:var(--fox-button-font-weight);text-decoration:none;color:rgba(var(--fox-button-text-color-rgb), var(--fox-button-color-alpha, 1));background:rgba(var(--fox-button-primary-color-rgb), var(--fox-button-background-alpha, 0));border-radius:var(--fox-button-border-radius, 4px);height:var(--fox-button-height, 32px);padding:0 var(--fox-button-horizontal-spaceing, 16px);flex:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle}.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 1)}.fox-button__raised{--fox-button-background-alpha: 1;--fox-button-text-color-rgb: var(--fox-button-text-on-primary-color-rgb)}.fox-button:focus{--fox-button-background-alpha: 0.1}.fox-button:focus.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:hover{cursor:pointer}.fox-button:hover:not(.fox-button:hover.fox-button__raised){background:rgba(148,168,188,.1)}.fox-button:hover.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:active{--fox-button-background-alpha: 0.2;outline:none}.fox-button:active.fox-button__raised{transition:none;--fox-button-background-alpha: 0.9;box-shadow:0 3px 6px #0f131029}.fox-button:disabled{--fox-button-background-alpha: 0;--fox-button-color-alpha: 0.3;cursor:default;pointer-events:none}.fox-button:disabled.fox-button__raised{--fox-button-color-alpha: 0.3;--fox-button-background-alpha: 0.3}.fox-button:disabled.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 0.1)}.fox-button__progress{bottom:0;right:0;left:0;position:absolute;--mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.6);--mdc-theme-primary: rgba(var(--fox-button-primary-color-rgb), 1)}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon,.leading-icon ::slotted(*),.leading-icon .fox-button__icon{margin-left:0;margin-right:5px;display:block;width:18px;height:18px;font-size:18px;vertical-align:top}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon{margin-left:5px;margin-right:0}.slot-container{display:inline-flex;align-items:center;justify-content:center}`));
 
@@ -1555,4 +1555,3 @@ let _ = t => t,
       'fox-button__raised': this.raised,
-      'fox-button__outlined': this.outlined,
-      'fox-button__icon-button': !this.label
+      'fox-button__outlined': this.outlined
     };
@@ -1571,3 +1570,4 @@ return html$2(_t || (_t = _`
         </span>
-        <span class="fox-button__label"> ${0} </span>
+        <span class="fox-button__label"><slot>${0}</slot></span>
+
         <span class="trailing-icon">
@@ -1574,0 +1574,0 @@ <slot name="trailingIcon">

index.umd.js

@@ -54,3 +54,3 @@ (function (global, factory) {
 
-    var styles = lit.css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([":host{display:inline-flex;outline:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;vertical-align:top;box-sizing:border-box}:host{--fox-button-font-weight: var(--fox-font-weight-medium, 600);--fox-button-font-size: var(--fox-font-size-base, 14px);--fox-button-font-family-fallback: Nunito, Roboto, sans-serif;--fox-button-font-family: var( --fox-font-family, var(--fox-button-font-family-fallback) );--fox-button-text-color-rgb: 15, 19, 16;--fox-button-primary-color-rgb: 231, 236, 240;--fox-button-text-on-primary-color-rgb: 15, 19, 16}:host([primary]){--fox-button-primary-color-rgb-fallback: 69, 153, 255;--fox-button-primary-color-rgb: var( --fox-client-base-rgb-color, var(--fox-button-primary-color-rgb-fallback) );--fox-button-text-color-rgb: 69, 153, 255;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([danger]){--fox-button-primary-color-rgb: 250, 190, 58;--fox-button-text-color-rgb: 250, 190, 58;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([small]){--fox-button-font-size: 12px;--fox-button-height: 26px;--fox-button-horizontal-spaceing: 8px}:host([fullwidth]){width:100%}:host([disabled]){pointer-events:none}.fox-button{transition:all ease-out .4s;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--fox-button-font-family);font-size:var(--fox-button-font-size);font-weight:var(--fox-button-font-weight);text-decoration:none;color:rgba(var(--fox-button-text-color-rgb), var(--fox-button-color-alpha, 1));background:rgba(var(--fox-button-primary-color-rgb), var(--fox-button-background-alpha, 0));border-radius:var(--fox-button-border-radius, 4px);height:var(--fox-button-height, 32px);padding:0 var(--fox-button-horizontal-spaceing, 16px);flex:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle}.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 1)}.fox-button__raised{--fox-button-background-alpha: 1;--fox-button-text-color-rgb: var(--fox-button-text-on-primary-color-rgb)}.fox-button__icon-button{padding:0 var(--fox-button-horizontal-spaceing, 7px)}.fox-button:focus{--fox-button-background-alpha: 0.1}.fox-button:focus.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:hover{cursor:pointer}.fox-button:hover:not(.fox-button:hover.fox-button__raised){background:rgba(148,168,188,.1)}.fox-button:hover.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:active{--fox-button-background-alpha: 0.2;outline:none}.fox-button:active.fox-button__raised{transition:none;--fox-button-background-alpha: 0.9;box-shadow:0 3px 6px #0f131029}.fox-button:disabled{--fox-button-background-alpha: 0;--fox-button-color-alpha: 0.3;cursor:default;pointer-events:none}.fox-button:disabled.fox-button__raised{--fox-button-color-alpha: 0.3;--fox-button-background-alpha: 0.3}.fox-button:disabled.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 0.1)}.fox-button__progress{bottom:0;right:0;left:0;position:absolute;--mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.6);--mdc-theme-primary: rgba(var(--fox-button-primary-color-rgb), 1)}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon,.leading-icon ::slotted(*),.leading-icon .fox-button__icon{margin-left:0;margin-right:5px;display:block;width:18px;height:18px;font-size:18px;vertical-align:top}.fox-button__icon-button .trailing-icon ::slotted(*),.fox-button__icon-button .trailing-icon .fox-button__icon,.fox-button__icon-button .leading-icon ::slotted(*),.fox-button__icon-button .leading-icon .fox-button__icon{margin:0}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon{margin-left:5px;margin-right:0}.slot-container{display:inline-flex;align-items:center;justify-content:center}"], [":host{display:inline-flex;outline:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;vertical-align:top;box-sizing:border-box}:host{--fox-button-font-weight: var(--fox-font-weight-medium, 600);--fox-button-font-size: var(--fox-font-size-base, 14px);--fox-button-font-family-fallback: Nunito, Roboto, sans-serif;--fox-button-font-family: var( --fox-font-family, var(--fox-button-font-family-fallback) );--fox-button-text-color-rgb: 15, 19, 16;--fox-button-primary-color-rgb: 231, 236, 240;--fox-button-text-on-primary-color-rgb: 15, 19, 16}:host([primary]){--fox-button-primary-color-rgb-fallback: 69, 153, 255;--fox-button-primary-color-rgb: var( --fox-client-base-rgb-color, var(--fox-button-primary-color-rgb-fallback) );--fox-button-text-color-rgb: 69, 153, 255;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([danger]){--fox-button-primary-color-rgb: 250, 190, 58;--fox-button-text-color-rgb: 250, 190, 58;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([small]){--fox-button-font-size: 12px;--fox-button-height: 26px;--fox-button-horizontal-spaceing: 8px}:host([fullwidth]){width:100%}:host([disabled]){pointer-events:none}.fox-button{transition:all ease-out .4s;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--fox-button-font-family);font-size:var(--fox-button-font-size);font-weight:var(--fox-button-font-weight);text-decoration:none;color:rgba(var(--fox-button-text-color-rgb), var(--fox-button-color-alpha, 1));background:rgba(var(--fox-button-primary-color-rgb), var(--fox-button-background-alpha, 0));border-radius:var(--fox-button-border-radius, 4px);height:var(--fox-button-height, 32px);padding:0 var(--fox-button-horizontal-spaceing, 16px);flex:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle}.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 1)}.fox-button__raised{--fox-button-background-alpha: 1;--fox-button-text-color-rgb: var(--fox-button-text-on-primary-color-rgb)}.fox-button__icon-button{padding:0 var(--fox-button-horizontal-spaceing, 7px)}.fox-button:focus{--fox-button-background-alpha: 0.1}.fox-button:focus.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:hover{cursor:pointer}.fox-button:hover:not(.fox-button:hover.fox-button__raised){background:rgba(148,168,188,.1)}.fox-button:hover.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:active{--fox-button-background-alpha: 0.2;outline:none}.fox-button:active.fox-button__raised{transition:none;--fox-button-background-alpha: 0.9;box-shadow:0 3px 6px #0f131029}.fox-button:disabled{--fox-button-background-alpha: 0;--fox-button-color-alpha: 0.3;cursor:default;pointer-events:none}.fox-button:disabled.fox-button__raised{--fox-button-color-alpha: 0.3;--fox-button-background-alpha: 0.3}.fox-button:disabled.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 0.1)}.fox-button__progress{bottom:0;right:0;left:0;position:absolute;--mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.6);--mdc-theme-primary: rgba(var(--fox-button-primary-color-rgb), 1)}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon,.leading-icon ::slotted(*),.leading-icon .fox-button__icon{margin-left:0;margin-right:5px;display:block;width:18px;height:18px;font-size:18px;vertical-align:top}.fox-button__icon-button .trailing-icon ::slotted(*),.fox-button__icon-button .trailing-icon .fox-button__icon,.fox-button__icon-button .leading-icon ::slotted(*),.fox-button__icon-button .leading-icon .fox-button__icon{margin:0}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon{margin-left:5px;margin-right:0}.slot-container{display:inline-flex;align-items:center;justify-content:center}"])));
+    var styles = lit.css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject([":host{display:inline-flex;outline:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;vertical-align:top;box-sizing:border-box}:host{--fox-button-font-weight: var(--fox-font-weight-medium, 600);--fox-button-font-size: var(--fox-font-size-base, 14px);--fox-button-font-family-fallback: Nunito, Roboto, sans-serif;--fox-button-font-family: var( --fox-font-family, var(--fox-button-font-family-fallback) );--fox-button-text-color-rgb: 15, 19, 16;--fox-button-primary-color-rgb: 231, 236, 240;--fox-button-text-on-primary-color-rgb: 15, 19, 16}:host([primary]){--fox-button-primary-color-rgb-fallback: 69, 153, 255;--fox-button-primary-color-rgb: var( --fox-client-base-rgb-color, var(--fox-button-primary-color-rgb-fallback) );--fox-button-text-color-rgb: 69, 153, 255;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([danger]){--fox-button-primary-color-rgb: 250, 190, 58;--fox-button-text-color-rgb: 250, 190, 58;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([small]){--fox-button-font-size: 12px;--fox-button-height: 26px;--fox-button-horizontal-spaceing: 8px}:host([fullwidth]){width:100%}:host([disabled]){pointer-events:none}.fox-button{transition:all ease-out .4s;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--fox-button-font-family);font-size:var(--fox-button-font-size);font-weight:var(--fox-button-font-weight);text-decoration:none;color:rgba(var(--fox-button-text-color-rgb), var(--fox-button-color-alpha, 1));background:rgba(var(--fox-button-primary-color-rgb), var(--fox-button-background-alpha, 0));border-radius:var(--fox-button-border-radius, 4px);height:var(--fox-button-height, 32px);padding:0 var(--fox-button-horizontal-spaceing, 16px);flex:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle}.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 1)}.fox-button__raised{--fox-button-background-alpha: 1;--fox-button-text-color-rgb: var(--fox-button-text-on-primary-color-rgb)}.fox-button:focus{--fox-button-background-alpha: 0.1}.fox-button:focus.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:hover{cursor:pointer}.fox-button:hover:not(.fox-button:hover.fox-button__raised){background:rgba(148,168,188,.1)}.fox-button:hover.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:active{--fox-button-background-alpha: 0.2;outline:none}.fox-button:active.fox-button__raised{transition:none;--fox-button-background-alpha: 0.9;box-shadow:0 3px 6px #0f131029}.fox-button:disabled{--fox-button-background-alpha: 0;--fox-button-color-alpha: 0.3;cursor:default;pointer-events:none}.fox-button:disabled.fox-button__raised{--fox-button-color-alpha: 0.3;--fox-button-background-alpha: 0.3}.fox-button:disabled.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 0.1)}.fox-button__progress{bottom:0;right:0;left:0;position:absolute;--mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.6);--mdc-theme-primary: rgba(var(--fox-button-primary-color-rgb), 1)}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon,.leading-icon ::slotted(*),.leading-icon .fox-button__icon{margin-left:0;margin-right:5px;display:block;width:18px;height:18px;font-size:18px;vertical-align:top}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon{margin-left:5px;margin-right:0}.slot-container{display:inline-flex;align-items:center;justify-content:center}"], [":host{display:inline-flex;outline:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;vertical-align:top;box-sizing:border-box}:host{--fox-button-font-weight: var(--fox-font-weight-medium, 600);--fox-button-font-size: var(--fox-font-size-base, 14px);--fox-button-font-family-fallback: Nunito, Roboto, sans-serif;--fox-button-font-family: var( --fox-font-family, var(--fox-button-font-family-fallback) );--fox-button-text-color-rgb: 15, 19, 16;--fox-button-primary-color-rgb: 231, 236, 240;--fox-button-text-on-primary-color-rgb: 15, 19, 16}:host([primary]){--fox-button-primary-color-rgb-fallback: 69, 153, 255;--fox-button-primary-color-rgb: var( --fox-client-base-rgb-color, var(--fox-button-primary-color-rgb-fallback) );--fox-button-text-color-rgb: 69, 153, 255;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([danger]){--fox-button-primary-color-rgb: 250, 190, 58;--fox-button-text-color-rgb: 250, 190, 58;--fox-button-text-on-primary-color-rgb: 255, 255, 255}:host([small]){--fox-button-font-size: 12px;--fox-button-height: 26px;--fox-button-horizontal-spaceing: 8px}:host([fullwidth]){width:100%}:host([disabled]){pointer-events:none}.fox-button{transition:all ease-out .4s;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--fox-button-font-family);font-size:var(--fox-button-font-size);font-weight:var(--fox-button-font-weight);text-decoration:none;color:rgba(var(--fox-button-text-color-rgb), var(--fox-button-color-alpha, 1));background:rgba(var(--fox-button-primary-color-rgb), var(--fox-button-background-alpha, 0));border-radius:var(--fox-button-border-radius, 4px);height:var(--fox-button-height, 32px);padding:0 var(--fox-button-horizontal-spaceing, 16px);flex:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle}.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 1)}.fox-button__raised{--fox-button-background-alpha: 1;--fox-button-text-color-rgb: var(--fox-button-text-on-primary-color-rgb)}.fox-button:focus{--fox-button-background-alpha: 0.1}.fox-button:focus.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:hover{cursor:pointer}.fox-button:hover:not(.fox-button:hover.fox-button__raised){background:rgba(148,168,188,.1)}.fox-button:hover.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:active{--fox-button-background-alpha: 0.2;outline:none}.fox-button:active.fox-button__raised{transition:none;--fox-button-background-alpha: 0.9;box-shadow:0 3px 6px #0f131029}.fox-button:disabled{--fox-button-background-alpha: 0;--fox-button-color-alpha: 0.3;cursor:default;pointer-events:none}.fox-button:disabled.fox-button__raised{--fox-button-color-alpha: 0.3;--fox-button-background-alpha: 0.3}.fox-button:disabled.fox-button__outlined{border:2px solid rgba(var(--fox-button-primary-color-rgb), 0.1)}.fox-button__progress{bottom:0;right:0;left:0;position:absolute;--mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.6);--mdc-theme-primary: rgba(var(--fox-button-primary-color-rgb), 1)}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon,.leading-icon ::slotted(*),.leading-icon .fox-button__icon{margin-left:0;margin-right:5px;display:block;width:18px;height:18px;font-size:18px;vertical-align:top}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon{margin-left:5px;margin-right:0}.slot-container{display:inline-flex;align-items:center;justify-content:center}"])));
     var templateObject_1$1;
@@ -99,6 +99,5 @@
           'fox-button__raised': this.raised,
-          'fox-button__outlined': this.outlined,
-          'fox-button__icon-button': !this.label
+          'fox-button__outlined': this.outlined
         };
-        return lit.html(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      <button\n        id=\"button\"\n        class=\"fox-button ", "\"\n        ?disabled=\"", "\"\n        aria-label=\"", "\"\n      >\n        <span class=\"leading-icon\">\n          <slot name=\"icon\">\n            ", "\n          </slot>\n        </span>\n        <span class=\"fox-button__label\"> ", " </span>\n        <span class=\"trailing-icon\">\n          <slot name=\"trailingIcon\">\n            ", "\n          </slot>\n        </span>\n        ", "\n      </button>\n    "], ["\n      <button\n        id=\"button\"\n        class=\"fox-button ", "\"\n        ?disabled=\"", "\"\n        aria-label=\"", "\"\n      >\n        <span class=\"leading-icon\">\n          <slot name=\"icon\">\n            ", "\n          </slot>\n        </span>\n        <span class=\"fox-button__label\"> ", " </span>\n        <span class=\"trailing-icon\">\n          <slot name=\"trailingIcon\">\n            ", "\n          </slot>\n        </span>\n        ", "\n      </button>\n    "])), classMap_js.classMap(classes), this.disabled, this.label || this.icon, this.icon && !this.trailingIcon ? this.renderIcon() : '', this.label, this.icon && this.trailingIcon ? this.renderIcon() : '', this.progress ? this.renderProgress() : '');
+        return lit.html(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      <button\n        id=\"button\"\n        class=\"fox-button ", "\"\n        ?disabled=\"", "\"\n        aria-label=\"", "\"\n      >\n        <span class=\"leading-icon\">\n          <slot name=\"icon\">\n            ", "\n          </slot>\n        </span>\n        <span class=\"fox-button__label\"><slot>", "</slot></span>\n\n        <span class=\"trailing-icon\">\n          <slot name=\"trailingIcon\">\n            ", "\n          </slot>\n        </span>\n        ", "\n      </button>\n    "], ["\n      <button\n        id=\"button\"\n        class=\"fox-button ", "\"\n        ?disabled=\"", "\"\n        aria-label=\"", "\"\n      >\n        <span class=\"leading-icon\">\n          <slot name=\"icon\">\n            ", "\n          </slot>\n        </span>\n        <span class=\"fox-button__label\"><slot>", "</slot></span>\n\n        <span class=\"trailing-icon\">\n          <slot name=\"trailingIcon\">\n            ", "\n          </slot>\n        </span>\n        ", "\n      </button>\n    "])), classMap_js.classMap(classes), this.disabled, this.label || this.icon, this.icon && !this.trailingIcon ? this.renderIcon() : '', this.label, this.icon && this.trailingIcon ? this.renderIcon() : '', this.progress ? this.renderProgress() : '');
       };
@@ -105,0 +104,0 @@

lib/FoxButton.stories.d.ts

@@ -25,2 +25,1 @@ import './FoxButton';
 export declare const Primary: () => import("lit-html").TemplateResult<1>;
-export declare const Icon: () => import("lit-html").TemplateResult<1>;

package.json

 {
   "name": "@assecosolutions/fox-button",
-  "version": "1.5.20",
+  "version": "1.5.21",
   "public": true,
@@ -24,6 +24,6 @@ "lib": {
     "lit": "^2.0.0",
-    "@assecosolutions/ng-strictly-typed": "0.0.2",
+    "@assecosolutions/ng-strictly-typed": "0.0.3",
     "lodash": "^4.17.21",
     "rxjs": "6.6.7",
-    "@assecosolutions/fox-icon": "1.5.15",
+    "@assecosolutions/fox-icon": "1.5.16",
     "@assecosolutions/fox-progress": "1.5.15",
@@ -30,0 +30,0 @@ "@material/mwc-circular-progress": "^0.25.3",

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

80111

decreased by-1.29%

Lines of code

1629

decreased by-0.49%

No dependency changes