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

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

index.js

 import { css, LitElement, html as html$2 } from 'lit';
-import { state, property, queryAssignedElements } from 'lit/decorators.js';
+import { property, state, queryAssignedElements } from 'lit/decorators.js';
+import { FoxButton } from '@assecosolutions/fox-button';
 
@@ -1685,3 +1686,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`.button-group{display:flex;align-items:center;gap:2px}.button-group ::slotted(fox-button){transition:background-color .3s,color .3s;--fox-button-box-shadow: none;--fox-button-hover-opacity: 1}.button-group ::slotted(fox-button):last-child{margin-right:0}.button-group ::slotted(fox-button).selected{background-color:blue;color:#fff}.button-group ::slotted(fox-button:first-child){--fox-button-border-radius: 8px 0 0 8px}.button-group ::slotted(fox-button:first-child):active{box-shadow:#0f69ac 0px 0px 0px 2px inset}.button-group ::slotted(fox-button:last-child){--fox-button-border-radius: 0 8px 8px 0}.button-group ::slotted(fox-button:nth-child(n+2):nth-last-child(n+2)){--fox-button-border-radius: 0}`));
+const styles = css(_t$1 || (_t$1 = _$1`.fox-button-group{display:flex;align-items:center;gap:2px}.fox-button-group ::slotted(fox-button){transition:background-color .3s,color .3s;--fox-button-box-shadow: none;--fox-button-hover-opacity: 1}.fox-button-group ::slotted(fox-button):last-child{--fox-button-border-radius: 0 8px 8px 0;margin-right:0}.fox-button-group ::slotted(fox-button):first-child{--fox-button-border-radius: 8px 0 0 8px}.fox-button-group ::slotted(fox-button):first-child:active{box-shadow:#0f69ac 0px 0px 0px 2px inset}::slotted(fox-button:nth-child(n+2):nth-last-child(n+2)){--fox-button-border-radius: 0}`));
 
@@ -1694,2 +1695,3 @@ let _ = t => t,
  * @element fox-button-group
+ * @fires button-pressed - Fired when a button in the group is clicked.
  *
@@ -1700,20 +1702,8 @@ */
     super(...arguments);
-    this.selectedIndex = [-1];
+    /**
+     * @property multiselect - If true, multiple buttons can be selected
+     */
     this.multiselect = false;
+    this.selectedIndex = [];
   }
-  handleButtonClick(event) {
-    const clickedButton = event.target;
-    const index = Array.from(this.buttons).indexOf(clickedButton);
-    const value = clickedButton.getAttribute('value');
-    if (index >= 0) {
-      this.multiselect ? this.toggleButton(index) : this.selectButton(index);
-      this.dispatchEvent(new CustomEvent('button-pressed', {
-        detail: {
-          index,
-          value,
-          clickedButton
-        }
-      }));
-    }
-  }
   firstUpdated() {
@@ -1730,3 +1720,3 @@ this.addEventListener('click', this.handleButtonClick);
     return html$2(_t || (_t = _`
-      <div class="button-group">
+      <div class="fox-button-group">
         <slot name="button-slot"></slot>
@@ -1746,2 +1736,21 @@ </div>
   }
+  handleButtonClick(event) {
+    const clickedButton = event.target;
+    if (!(clickedButton instanceof FoxButton)) {
+      console.warn('Clicked element is not a FoxButton');
+    } else {
+      const index = Array.from(this.buttons).indexOf(clickedButton);
+      const value = clickedButton.getAttribute('value');
+      if (index >= 0) {
+        this.multiselect ? this.toggleButton(index) : this.selectButton(index);
+        this.dispatchEvent(new CustomEvent('button-pressed', {
+          detail: {
+            index,
+            value,
+            clickedButton
+          }
+        }));
+      }
+    }
+  }
 }
@@ -1752,6 +1761,6 @@ /**
 FoxButtonGroup.styles = [styles];
-__decorate([state(), __metadata("design:type", Object)], FoxButtonGroup.prototype, "selectedIndex", void 0);
 __decorate([property({
   type: Boolean
 }), __metadata("design:type", Object)], FoxButtonGroup.prototype, "multiselect", void 0);
+__decorate([state(), __metadata("design:type", Array)], FoxButtonGroup.prototype, "selectedIndex", void 0);
 __decorate([queryAssignedElements({
@@ -1758,0 +1767,0 @@ slot: 'button-slot',

package.json

 {
   "name": "@assecosolutions/fox-button-group",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "public": true,
@@ -20,4 +20,4 @@ "publishConfig": {
   "dependencies": {
-    "@assecosolutions/fox-button": "~1.11.8-beta.1",
-    "@assecosolutions/fox-common-utils": "~1.11.7-beta.1"
+    "@assecosolutions/fox-button": "~1.11.8-beta.2",
+    "@assecosolutions/fox-common-utils": "~1.11.7-beta.2"
   },
@@ -24,0 +24,0 @@ "peerDependencies": {

src/lib/FoxButtonGroup.d.ts

@@ -19,2 +19,3 @@ import { LitElement } from 'lit';
  * @element fox-button-group
+ * @fires button-pressed - Fired when a button in the group is clicked.
  *
@@ -27,6 +28,8 @@ */
     static styles: import("lit").CSSResult[];
+    /**
+     * @property multiselect - If true, multiple buttons can be selected
+     */
+    multiselect: boolean;
     selectedIndex: number[];
-    multiselect: boolean;
-    buttons: NodeListOf<HTMLButtonElement>;
-    handleButtonClick(event: Event): void;
+    buttons: NodeListOf<FoxButton>;
     firstUpdated(): void;
@@ -37,2 +40,3 @@ updated(): void;
     private selectButton;
+    handleButtonClick(event: Event): void;
 }

src/lib/FoxButtonGroup.stories.d.ts

@@ -0,2 +1,4 @@
+import { Story } from '@storybook/web-components';
 import './FoxButtonGroup';
+import { FoxButtonGroup } from './FoxButtonGroup';
 declare const _default: {
@@ -9,1 +11,2 @@ title: string;
 export declare const Multiselect: () => import("lit-html").TemplateResult<1>;
+export declare const InteractionTests: Story<FoxButtonGroup>;

No alert changes

Improved metrics

Total package byte prevSize

65476

increased by0.89%

Lines of code

1535

increased by1.05%

Dependency changes

• Updated@assecosolutions/fox-button@~1.11.8-beta.2

• Updated@assecosolutions/fox-common-utils@~1.11.7-beta.2