@assecosolutions/fox-button - npm Package Compare versions

Comparing version 2.0.5 to 2.0.6

index.esm.js

@@ -5,3 +5,2 @@ import { css, LitElement, html as html$2, nothing } from 'lit';
 import '@assecosolutions/fox-icon';
-import '@assecosolutions/fox-progress';
 
@@ -1585,3 +1584,3 @@ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
   _t$1;
-const styles = css(_t$1 || (_t$1 = _$1`:host{display:inline-flex;outline:none;white-space:nowrap;-webkit-tap-highcolor-light:rgba(0,0,0,0);vertical-align:top;box-sizing:border-box;font-family:var(--fox-font-family),Roboto,sans-serif}.fox-button{background:var(--fox-button-background-color, none);height:var(--fox-button-height, 32px);padding:var(--fox-button-padding, 0 var(--fox-space-3));margin:0;cursor:pointer;outline:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;font-family:var(--fox-font-family),Roboto,sans-serif;font-size:var(--fox-button-font-size, var(--fox-font-size-base));line-height:var(--fox-button-font-size, var(--fox-font-size-3));font-weight:var(--fox-button-font-weight, var(--fox-font-weight-medium));color:var(--fox-button-text-color, var(--fox-base-font-color));border:1px solid var(--fox-button-border-color, transparent);display:flex;align-items:center;border-radius:var(--fox-border-radius-l)}.fox-button__filled{--fox-button-background-color: var(--fox-neutral-color-200);--fox-button-focus-background-color: var(--fox-neutral-color-200);--fox-button-hover-background-color: var(--fox-neutral-color-300);--fox-button-active-background-color: var(--fox-neutral-color-200);--fox-button-disabled-background-color: var(--fox-neutral-color-200);--fox-button-disabled-text-color: var(--fox-neutral-color-white)}.fox-button__outlined{--fox-button-border-color: var(--fox-neutral-color-700);--fox-button-disabled-text-color: var(--fox-neutral-color-200)}.fox-button__elevated{box-shadow:var(--fox-elevation-2)}.fox-button__small{height:var(--fox-button-small-height, var(--fox-button-height, 24px))}.fox-button__primary{--fox-button-text-color: var(--fox-primary-color-base);--fox-button-icon-color: var(--fox-primary-color-base);--fox-button-focus-border-color: var(--fox-primary-color-base)}.fox-button__primary.fox-button__outlined{--fox-button-border-color: var(--fox-primary-color-base);--fox-button-focus-background-color: var(--fox-primary-color-light)}.fox-button__primary.fox-button__filled{--fox-button-background-color: var(--fox-primary-color-base);--fox-button-hover-background-color: var(--fox-primary-color-400);--fox-button-focus-background-color: var(--fox-primary-color-light);--fox-button-focus-border-color: var(--fox-primary-color-base);--fox-button-active-background-color: var(--fox-primary-color-base);--fox-button-text-color: var(--fox-neutral-color-white);--fox-button-icon-color: var(--fox-neutral-color-white)}.fox-button__primary.fox-button__filled:focus{color:var(--fox-primary-color-base);border-color:var(--fox-primary-color-base);--fox-button-icon-color: var(--fox-primary-color-base)}.fox-button__primary.fox-button__filled:active{color:var(--fox-neutral-color-white);--fox-button-icon-color: var(--fox-neutral-color-white)}.fox-button__primary.fox-button__disabled{--fox-button-border-color: transparent}.fox-button:hover{background:var(--fox-button-hover-background-color, var(--fox-neutral-color-white))}.fox-button:focus{background:var(--fox-button-focus-background-color, var(--fox-neutral-color-white));border-color:--fox-button-focus-border-color,var(--fox-neutral-color-700)}.fox-button:active{background:var(--fox-button-active-background-color, transparent)}.fox-button:disabled{background:var(--fox-button-disabled-background-color, transparent);color:var(--fox-button-disabled-text-color, var(--fox-neutral-color-200));box-shadow:none;--fox-button-icon-color: var( --fox-button-disabled-text-color, var(--fox-neutral-color-200) )}.fox-button fox-icon{color:var(--fox-button-icon-color, var(--fox-neutral-color-700))}.fox-button__icon{padding:var(--fox-button-padding, 0 var(--fox-space-3) 0 var(--fox-space-2))}.fox-button__icon fox-icon{margin-right:var(--fox-space-1)}.fox-button__trailing-icon{flex-direction:row-reverse;padding:var(--fox-button-padding, 0 var(--fox-space-2) 0 var(--fox-space-3))}.fox-button__trailing-icon fox-icon{margin-left:var(--fox-space-1)}`));
+const styles = css(_t$1 || (_t$1 = _$1`:host{display:inline-flex;outline:none;white-space:nowrap;-webkit-tap-highcolor-light:rgba(0,0,0,0);vertical-align:top;box-sizing:border-box;font-family:var(--fox-font-family),Roboto,sans-serif}.fox-button{background:var(--fox-button-background-color, none);height:var(--fox-button-height, 32px);padding:var(--fox-button-padding, 0 var(--fox-space-2));margin:0;cursor:pointer;outline:inherit;overflow:hidden;box-sizing:border-box;text-overflow:ellipsis;white-space:nowrap;font:inherit;font-family:var(--fox-font-family),Roboto,sans-serif;font-size:var(--fox-button-font-size, var(--fox-font-size-base));line-height:var(--fox-button-font-size, var(--fox-font-size-3));font-weight:var(--fox-button-font-weight, var(--fox-font-weight-medium));width:100%;color:var(--fox-button-text-color, var(--fox-base-font-color));border:1px solid var(--fox-button-border-color, transparent);display:flex;align-items:center;border-radius:var(--fox-button-border-radius, var(--fox-border-radius-l))}.fox-button__label{padding:var(--fox-button-label-padding, 0 var(--fox-space-1));width:100%}.fox-button__filled{--fox-button-background-color: var(--fox-neutral-color-light);--fox-button-focus-background-color: var(--fox-neutral-color-100);--fox-button-hover-background-color: var(--fox-neutral-color-100)}.fox-button__outlined{--fox-button-border-color: var(--fox-neutral-color-base)}.fox-button__elevated{box-shadow:var(--fox-elevation-2)}.fox-button__small{height:var(--fox-button-small-height, var(--fox-button-height, 24px))}.fox-button__primary{--fox-button-text-color: var(--fox-primary-color-base);--fox-button-icon-color: var(--fox-primary-color-base);--fox-button-focus-outline-color: var(--fox-primary-color-base)}.fox-button__primary.fox-button__outlined{--fox-button-border-color: var(--fox-primary-color-base)}.fox-button__primary.fox-button__filled{--fox-button-background-color: var(--fox-primary-color-base);--fox-button-hover-background-color: var(--fox-primary-color-400);--fox-button-focus-background-color: var(--fox-primary-color-400);--fox-button-text-color: var(--fox-neutral-color-white);--fox-button-icon-color: var(--fox-neutral-color-white)}.fox-button:hover:not(:disabled){background:var(--fox-button-hover-background-color, var(--fox-neutral-color-100))}.fox-button:focus:not(:disabled){background:var(--fox-button-focus-background-color, var(--fox-neutral-color-100));--fox-button-border-color: transparent;outline:2px solid var(--fox-button-focus-outline-color, var(--fox-neutral-color-light))}.fox-button:disabled{opacity:.4}.fox-button fox-icon{color:var(--fox-button-icon-color, var(--fox-neutral-color-700))}.fox-button__trailing-icon{flex-direction:row-reverse}`));
 
@@ -1592,17 +1591,82 @@ let _ = t => t,
   _t3;
+/**
+ * This is a fox-button component.
+ *
+ * @element fox-button
+ *
+ * @cssprop [--fox-button-background-color] - Background color of the button.
+ * @cssprop [--fox-button-height] - Height of the button.
+ * @cssprop [--fox-button-padding] - Padding inside the button.
+ * @cssprop [--fox-button-font-size] - Font size of the button text.
+ * @cssprop [--fox-button-font-weight] - Font weight of the button text.
+ * @cssprop [--fox-button-text-color] - Text color of the button.
+ * @cssprop [--fox-button-border-color] - Border color of the button.
+ * @cssprop [--fox-button-border-radius] - Border radius of the button.
+ * @cssprop [--fox-button-label-padding] - Padding of the button label.
+ * @cssprop [--fox-button-focus-background-color] - Background color of the button when focused.
+ * @cssprop [--fox-button-hover-background-color] - Background color of the button when hovered.
+ * @cssprop [--fox-button-focus-outline-color] - Outline color of the button when focused.
+ * @cssprop [--fox-button-icon-color] - Color of the button icon.
+ * @cssprop [--fox-button-small-height] - Height of the button when small.
+ * @cssprop [--fox-button-primary-background-color] - Background color of the button when primary.
+ * @cssprop [--fox-button-primary-hover-background-color] - Background color of the button when primary and hovered.
+ * @cssprop [--fox-button-primary-focus-background-color] - Background color of the button when primary and focused.
+ * @cssprop [--fox-button-primary-text-color] - Text color of the button when primary.
+ * @cssprop [--fox-button-primary-icon-color] - Icon color of the button when primary.
+ * @cssprop [--fox-button-primary-border-color] - Border color of the button when primary and outlined.
+ * @cssprop [--fox-button-elevated-box-shadow] - Box shadow of the button when elevated.
+ */
 class FoxButton extends LitElement {
   constructor() {
     super(...arguments);
+    /**
+     * Indicates if the button is small.
+     * @type {boolean}
+     */
     this.small = false;
+    /**
+     * Indicates if the button is primary.
+     * @type {boolean}
+     */
     this.primary = false;
+    /**
+     * Indicates if the button is filled.
+     * @type {boolean}
+     */
     this.filled = false;
+    /**
+     * Indicates if the button is outlined.
+     * @type {boolean}
+     */
     this.outlined = false;
+    /**
+     * Indicates if the button is disabled.
+     * @type {boolean}
+     */
     this.disabled = false;
+    /**
+     * Indicates if the button has a trailing icon.
+     * @type {boolean}
+     */
     this.trailingIcon = false;
+    /**
+     * Indicates if the button is elevated.
+     * @type {boolean}
+     */
     this.elevated = false;
+    /**
+     * Icon name to be displayed in the button.
+     * @type {string}
+     */
     this.icon = '';
+    /**
+     * Label text to be displayed in the button.
+     * @type {string}
+     */
     this.label = '';
-    //TODO: refactor that to show progress bar in percentage
-    this.progress = '';
   }
+  /**
+   * Renders the button element.
+   * @returns {TemplateResult} The template result for the button element.
+   */
   render() {
@@ -1629,18 +1693,16 @@ const classes = {
         ${0}
-
-        <span class="fox-button__label"> ${0} </span>
-
         ${0}
       </button>
-    `), classMap(classes), this.disabled, this.label || this.icon, this.onClick, this.icon ? this.renderIcon() : nothing, this.label, this.progress ? this.renderProgress() : nothing);
+    `), classMap(classes), this.disabled, this.label || this.icon, this.onClick, this.icon ? this.renderIcon() : nothing, this.label ? html$2(_t2 || (_t2 = _` <span class="fox-button__label"> ${0}</span>`), this.label) : nothing);
   }
+  /**
+   * Renders the icon element.
+   * @returns {TemplateResult} The template result for the icon element.
+   */
   renderIcon() {
-    return html$2(_t2 || (_t2 = _`<fox-icon small icon="${0}"></fox-icon>`), this.icon);
+    return html$2(_t3 || (_t3 = _`<fox-icon small icon="${0}"></fox-icon>`), this.icon);
   }
-  renderProgress() {
-    return html$2(_t3 || (_t3 = _` <fox-linear-progress
-      indeterminate
-      class="fox-button__progress"
-    ></fox-linear-progress>`));
-  }
+  /**
+   * Handles the click event on the button.
+   */
   onClick() {
@@ -1698,5 +1760,2 @@ var _a;
   type: String
-}), __metadata("design:type", Object)], FoxButton.prototype, "progress", void 0);
-__decorate([property({
-  type: String
 }), __metadata("design:type", String)], FoxButton.prototype, "type", void 0);
@@ -1703,0 +1762,0 @@ const name = 'fox-button';

package.json

 {
   "name": "@assecosolutions/fox-button",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "public": true,
@@ -16,4 +16,3 @@ "publishConfig": {
   "dependencies": {
-    "@assecosolutions/fox-icon": "~2.0.11",
-    "@assecosolutions/fox-progress": "~2.0.4"
+    "@assecosolutions/fox-icon": "~1.12.0"
   },
@@ -20,0 +19,0 @@ "module": "./index.esm.js",

src/lib/FoxButton.d.ts

 import { LitElement } from 'lit';
 import '@assecosolutions/fox-icon';
-import '@assecosolutions/fox-progress';
 declare global {
@@ -9,2 +8,29 @@ interface HTMLElementTagNameMap {
 }
+/**
+ * This is a fox-button component.
+ *
+ * @element fox-button
+ *
+ * @cssprop [--fox-button-background-color] - Background color of the button.
+ * @cssprop [--fox-button-height] - Height of the button.
+ * @cssprop [--fox-button-padding] - Padding inside the button.
+ * @cssprop [--fox-button-font-size] - Font size of the button text.
+ * @cssprop [--fox-button-font-weight] - Font weight of the button text.
+ * @cssprop [--fox-button-text-color] - Text color of the button.
+ * @cssprop [--fox-button-border-color] - Border color of the button.
+ * @cssprop [--fox-button-border-radius] - Border radius of the button.
+ * @cssprop [--fox-button-label-padding] - Padding of the button label.
+ * @cssprop [--fox-button-focus-background-color] - Background color of the button when focused.
+ * @cssprop [--fox-button-hover-background-color] - Background color of the button when hovered.
+ * @cssprop [--fox-button-focus-outline-color] - Outline color of the button when focused.
+ * @cssprop [--fox-button-icon-color] - Color of the button icon.
+ * @cssprop [--fox-button-small-height] - Height of the button when small.
+ * @cssprop [--fox-button-primary-background-color] - Background color of the button when primary.
+ * @cssprop [--fox-button-primary-hover-background-color] - Background color of the button when primary and hovered.
+ * @cssprop [--fox-button-primary-focus-background-color] - Background color of the button when primary and focused.
+ * @cssprop [--fox-button-primary-text-color] - Text color of the button when primary.
+ * @cssprop [--fox-button-primary-icon-color] - Icon color of the button when primary.
+ * @cssprop [--fox-button-primary-border-color] - Border color of the button when primary and outlined.
+ * @cssprop [--fox-button-elevated-box-shadow] - Box shadow of the button when elevated.
+ */
 export declare class FoxButton extends LitElement {
@@ -15,16 +41,65 @@ /**
     static styles: import("lit").CSSResult[];
+    /**
+     * Indicates if the button is small.
+     * @type {boolean}
+     */
     small: boolean;
+    /**
+     * Indicates if the button is primary.
+     * @type {boolean}
+     */
     primary: boolean;
+    /**
+     * Indicates if the button is filled.
+     * @type {boolean}
+     */
     filled: boolean;
+    /**
+     * Indicates if the button is outlined.
+     * @type {boolean}
+     */
     outlined: boolean;
+    /**
+     * Indicates if the button is disabled.
+     * @type {boolean}
+     */
     disabled: boolean;
+    /**
+     * Indicates if the button has a trailing icon.
+     * @type {boolean}
+     */
     trailingIcon: boolean;
+    /**
+     * Indicates if the button is elevated.
+     * @type {boolean}
+     */
     elevated: boolean;
+    /**
+     * Icon name to be displayed in the button.
+     * @type {string}
+     */
     icon: string;
+    /**
+     * Label text to be displayed in the button.
+     * @type {string}
+     */
     label: string;
-    progress: string;
+    /**
+     * Type of the button, can be 'submit' or 'reset'.
+     * @type {'submit' | 'reset'}
+     */
     type?: 'submit' | 'reset';
+    /**
+     * Renders the button element.
+     * @returns {TemplateResult} The template result for the button element.
+     */
     protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders the icon element.
+     * @returns {TemplateResult} The template result for the icon element.
+     */
     protected renderIcon(): import("lit-html").TemplateResult<1>;
-    protected renderProgress(): import("lit-html").TemplateResult<1>;
+    /**
+     * Handles the click event on the button.
+     */
     protected onClick(): void;
@@ -31,0 +106,0 @@ }

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

70280

increased by6.05%

Dependency count

2

decreased by-33.33%

Lines of code

1618

increased by8.81%

Dependency changes

• + Added@assecosolutions/fox-icon@1.12.0(transitive)

• - Removed@assecosolutions/fox-progress@~2.0.4

• - Removed@assecosolutions/fox-icon@2.0.11(transitive)

• - Removed@assecosolutions/fox-progress@2.0.4(transitive)

• - Removed@material/mwc-base@0.26.1(transitive)

• - Removed@material/mwc-circular-progress@0.26.1(transitive)

• - Removed@material/mwc-linear-progress@0.26.1(transitive)

• - Removedtslib@2.8.1(transitive)

• Updated@assecosolutions/fox-icon@~1.12.0