@assecosolutions/fox-icon-button - npm Package Compare versions

Comparing version 2.0.7 to 2.0.8

index.esm.js

 import { css, LitElement, html as html$2 } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import '@assecosolutions/fox-icon';
 
@@ -1582,3 +1583,3 @@ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
   _t$2;
-const styles = css(_t$2 || (_t$2 = _$2`:host{display:inline-block;position:relative}.fox-icon-button{all:unset;cursor:pointer;height:32px;width:32px;line-height:0;border-radius:50%;background:var(--fox-icon-button-background-color, transparent);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.fox-icon-button:hover{background-color:var(--fox-icon-button-hover-background-color, var(--fox-neutral-color-200))}.fox-icon-button:hover fox-icon{color:var(--fox-icon-button-hover-icon-color, var(--fox-neutral-color-800))}.fox-icon-button:focus{background-color:var(--fox-icon-button-focus-background-color, var(--fox-neutral-color-200))}.fox-icon-button:focus fox-icon{color:var(--fox-icon-button-focus-icon-color, var(--fox-neutral-color-700))}.fox-icon-button:focus{background-color:var(--fox-icon-button-focus-background-color, var(--fox-neutral-color-200))}.fox-icon-button:focus fox-icon{color:var(--fox-icon-button-focus-icon-color, var(--fox-neutral-color-700))}.fox-icon-button:active{background-color:var(--fox-icon-button-active-background-color, var(--fox-neutral-color-200))}.fox-icon-button:active fox-icon{color:var(--fox-icon-button-active-icon-color, var(--fox-neutral-color-900))}.fox-icon-button:active:not(:disabled){animation:click-animation .2s ease}.fox-icon-button:disabled,.fox-icon-button__disabled{background-color:var(--fox-icon-button-disabled-background-color, transparent)}.fox-icon-button:disabled fox-icon,.fox-icon-button__disabled fox-icon{color:var(--fox-icon-button-disabled-icon-color, var(--fox-neutral-color-300))}.fox-icon-button__filled{--fox-icon-button-background-color: var(--fox-neutral-color-700);--fox-icon-button-icon-color: var(--fox-neutral-color-white);--fox-icon-button-disabled-background-color: var(--fox-neutral-color-300);--fox-icon-button-disabled-icon-color: var(--fox-neutral-color-white);--fox-icon-button-hover-background-color: var(--fox-neutral-color-800);--fox-icon-button-hover-icon-color: var(--fox-neutral-color-white);--fox-icon-button-focus-background-color: var(--fox-neutral-color-700);--fox-icon-button-focus-icon-color: var(--fox-neutral-color-white);--fox-icon-button-active-background-color: var(--fox-neutral-color-900);--fox-icon-button-active-icon-color: var(--fox-neutral-color-white)}.fox-icon-button__elevated{box-shadow:var(--fox-elevation-2)}.fox-icon-button__outlined{border:1px solid var(--fox-neutral-color-700)}.fox-icon-button__outlined:disabled{border-color:var(--fox-neutral-color-300)}.fox-icon-button__primary{--fox-icon-button-icon-color: var(--fox-primary-color-base);--fox-icon-button-disabled-icon-color: var(--fox-primary-color-300);--fox-icon-button-hover-background-color: var(--fox-primary-color-light);--fox-icon-button-hover-icon-color: var(--fox-primary-color-base);--fox-icon-button-focus-background-color: var(--fox-primary-color-light);--fox-icon-button-focus-icon-color: var(--fox-primary-color-base);--fox-icon-button-active-background-color: var(--fox-primary-color-200);--fox-icon-button-active-icon-color: var(--fox-primary-color-base)}.fox-icon-button fox-icon{font-size:24px;color:var(--fox-icon-button-icon-color, var(--fox-neutral-color-700))}.fox-icon-button__small{height:24px;width:24px}.fox-icon-button__small fox-icon{font-size:18px}.fox-icon-button__square{border-radius:var(--fox-icon-button-square-border-radius, var(--fox-border-radius-l))}`));
+const styles = css(_t$2 || (_t$2 = _$2`:host{display:inline-block;position:relative}.fox-icon-button{all:unset;cursor:pointer;height:32px;width:32px;line-height:0;border-radius:50%;background:var(--fox-icon-button-background-color, transparent);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.fox-icon-button:hover:not(:disabled){background-color:var(--fox-icon-button-hover-background-color, var(--fox-neutral-color-100));--fox-icon-button-border-color: var( --fox-icon-button-hover-icon-color, var(--fox-neutral-color-800) )}.fox-icon-button:hover:not(:disabled) fox-icon{color:var(--fox-icon-button-hover-icon-color, var(--fox-neutral-color-800))}.fox-icon-button:focus:not(:disabled){background-color:var(--fox-icon-button-focus-background-color, var(--fox-neutral-color-100));outline:2px solid var(--fox-icon-button-focus-outline-color, var(--fox-neutral-color-light))}.fox-icon-button:focus:not(:disabled) fox-icon{color:var(--fox-icon-button-focus-icon-color, var(--fox-neutral-color-700))}.fox-icon-button:active:not(:disabled){background-color:var(--fox-icon-button-active-background-color, var(--fox-neutral-color-100));--fox-icon-button-border-color: var( --fox-icon-button-active-icon-color, var(--fox-neutral-color-900) )}.fox-icon-button:active:not(:disabled) fox-icon{color:var(--fox-icon-button-active-icon-color, var(--fox-neutral-color-900))}.fox-icon-button:disabled,.fox-icon-button__disabled{opacity:.4}.fox-icon-button__outlined{border:1px solid var(--fox-icon-button-border-color, var(--fox-neutral-color-700))}.fox-icon-button__filled{--fox-icon-button-background-color: var(--fox-neutral-color-700);--fox-icon-button-icon-color: var(--fox-neutral-color-white);--fox-icon-button-hover-background-color: var(--fox-neutral-color-800);--fox-icon-button-hover-icon-color: var(--fox-neutral-color-white);--fox-icon-button-focus-background-color: var(--fox-neutral-color-700);--fox-icon-button-focus-icon-color: var(--fox-neutral-color-white);--fox-icon-button-active-background-color: var(--fox-neutral-color-900);--fox-icon-button-active-icon-color: var(--fox-neutral-color-white)}.fox-icon-button__elevated{box-shadow:var(--fox-elevation-2)}.fox-icon-button__primary{--fox-icon-button-focus-outline-color: var(--fox-primary-color-light);--fox-icon-button-icon-color: var(--fox-primary-color-base);--fox-icon-button-hover-background-color: var(--fox-primary-color-100);--fox-icon-button-hover-icon-color: var(--fox-primary-color-dark);--fox-icon-button-focus-background-color: var(--fox-primary-color-100);--fox-icon-button-focus-icon-color: var(--fox-primary-color-700);--fox-icon-button-active-background-color: var(--fox-primary-color-100);--fox-icon-button-active-icon-color: var(--fox-primary-color-900)}.fox-icon-button__primary.fox-icon-button__filled{--fox-icon-button-background-color: var(--fox-primary-color-base);--fox-icon-button-icon-color: var(--fox-neutral-color-white);--fox-icon-button-hover-background-color: var(--fox-primary-color-dark);--fox-icon-button-hover-icon-color: var(--fox-neutral-color-white);--fox-icon-button-focus-background-color: var(--fox-primary-color-700);--fox-icon-button-focus-icon-color: var(--fox-neutral-color-white);--fox-icon-button-active-background-color: var(--fox-primary-color-900);--fox-icon-button-active-icon-color: var(--fox-neutral-color-white)}.fox-icon-button__primary.fox-icon-button__outlined{--fox-icon-button-border-color: var(--fox-primary-color-base)}.fox-icon-button fox-icon{font-size:24px;color:var(--fox-icon-button-icon-color, var(--fox-neutral-color-700))}.fox-icon-button__small{height:24px;width:24px}.fox-icon-button__small fox-icon{font-size:18px}.fox-icon-button__square{border-radius:var(--fox-icon-button-square-border-radius, var(--fox-border-radius-l))}`));
 
@@ -1596,3 +1597,2 @@ let _$1 = t => t,
     this.square = false;
-    this.trailingIcon = false;
     this.elevated = false;
@@ -1651,6 +1651,2 @@ this.icon = '';
   type: Boolean,
-  attribute: 'trailingicon'
-}), __metadata("design:type", Object)], FoxIconButton.prototype, "trailingIcon", void 0);
-__decorate([property({
-  type: Boolean,
   reflect: true
@@ -1673,2 +1669,9 @@ }), __metadata("design:type", Object)], FoxIconButton.prototype, "elevated", void 0);
     super(...arguments);
+    this.small = false;
+    this.primary = false;
+    this.filled = false;
+    this.outlined = false;
+    this.disabled = false;
+    this.square = false;
+    this.elevated = false;
     this.onIcon = '';
@@ -1682,5 +1685,12 @@ this.offIcon = '';
         icon="${0}"
+        ?elevated="${0}"
+        ?square="${0}"
+        ?disabled="${0}"
+        ?outlined="${0}"
+        ?filled="${0}"
+        ?primary="${0}"
+        ?small="${0}"
         @click="${0}"
       ></fox-icon-button>
-    `), this.isOnIcon ? this.onIcon : this.offIcon, () => this.isOnIcon = !this.isOnIcon);
+    `), this.isOnIcon ? this.onIcon : this.offIcon, this.elevated, this.square, this.disabled, this.outlined, this.filled, this.primary, this.small, () => this.isOnIcon = !this.isOnIcon);
   }
@@ -1693,2 +1703,30 @@ }
 __decorate([property({
+  type: Boolean,
+  reflect: true
+}), __metadata("design:type", Object)], FoxIconButtonToggle.prototype, "small", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+}), __metadata("design:type", Object)], FoxIconButtonToggle.prototype, "primary", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+}), __metadata("design:type", Object)], FoxIconButtonToggle.prototype, "filled", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+}), __metadata("design:type", Object)], FoxIconButtonToggle.prototype, "outlined", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+}), __metadata("design:type", Object)], FoxIconButtonToggle.prototype, "disabled", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+}), __metadata("design:type", Object)], FoxIconButtonToggle.prototype, "square", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+}), __metadata("design:type", Object)], FoxIconButtonToggle.prototype, "elevated", void 0);
+__decorate([property({
   type: String,
@@ -1695,0 +1733,0 @@ reflect: true

package.json

 {
   "name": "@assecosolutions/fox-icon-button",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "public": true,
@@ -15,3 +15,5 @@ "publishConfig": {
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "@assecosolutions/fox-icon": "~2.0.11"
+  },
   "module": "./index.esm.js",
@@ -18,0 +20,0 @@ "type": "module",

src/lib/FoxIconButton.d.ts

 import { LitElement } from 'lit';
+import '@assecosolutions/fox-icon';
 declare global {
@@ -18,3 +19,2 @@ interface HTMLElementTagNameMap {
     square: boolean;
-    trailingIcon: boolean;
     elevated: boolean;
@@ -21,0 +21,0 @@ icon: string;

src/lib/FoxIconButtonToggle.d.ts

@@ -12,2 +12,9 @@ import { LitElement } from 'lit';
     static styles: import("lit").CSSResult[];
+    small: boolean;
+    primary: boolean;
+    filled: boolean;
+    outlined: boolean;
+    disabled: boolean;
+    square: boolean;
+    elevated: boolean;
     onIcon: string;
@@ -14,0 +21,0 @@ offIcon: string;

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

67687

increased by2.92%

Lines of code

1542

increased by3.07%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@assecosolutions/fox-icon@~2.0.11

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