@conectate/ct-button - npm Package Compare versions

Comparing version 3.11.1 to 3.12.0

CHANGELOG.md

 # Changelog
+
 All notable changes to this project will be documented in this file.
@@ -7,25 +8,35 @@
 
+## [1.3.0]
 
-## [1.3.0] 
 ### Changed
- - Update mwc version
 
-## [1.2.0] 
+-   Update mwc version
+
+## [1.2.0]
+
 ### Changed
- - CSS vars name
 
-## [1.1.0] 
+-   CSS vars name
+
+## [1.1.0]
+
 ### Added
- - Demo
 
-## [1.1.0] 
+-   Demo
+
+## [1.1.0]
+
 ### Added
- - CHANGELOG.md
- - dist/ for JS support
 
+-   CHANGELOG.md
+-   dist/ for JS support
+
 ### Fixed
- - package.json
 
-## [1.0.0] 
+-   package.json
+
+## [1.0.0]
+
 ### Added
- - Initial Release
+
+-   Initial Release

ct-button-helpers.js

 const state = new Map();
 export const rovingIndex = ({ element: rover, target: selector, targets }) => {
     // this api allows empty or a query string
-    const target_query = selector || ':scope *';
+    const target_query = selector || ":scope *";
     targets = targets || rover.querySelectorAll(target_query);
@@ -10,3 +10,3 @@ const startingPoint = targets[0];
     // and all the children
-    targets.forEach((a) => (a.tabIndex = -1));
+    targets.forEach(a => (a.tabIndex = -1));
     // except the first target, that accepts focus
@@ -23,18 +23,18 @@ startingPoint.tabIndex = 0;
     const onFocusin = () => {
-        if (state.get('last_rover') == rover)
+        if (state.get("last_rover") == rover)
             return;
         activate(rover, state.get(rover).active);
-        state.set('last_rover', rover);
+        state.set("last_rover", rover);
     };
-    rover.addEventListener('focusin', onFocusin);
+    rover.addEventListener("focusin", onFocusin);
     // watch for arrow keys
     const onKeydown = (e) => {
         switch (e.code) {
-            case 'ArrowRight':
-            case 'ArrowDown':
+            case "ArrowRight":
+            case "ArrowDown":
                 e.preventDefault();
                 focusNextItem(rover);
                 break;
-            case 'ArrowLeft':
-            case 'ArrowUp':
+            case "ArrowLeft":
+            case "ArrowUp":
                 e.preventDefault();
@@ -45,11 +45,11 @@ focusPreviousItem(rover);
     };
-    rover.addEventListener('keydown', onKeydown);
+    rover.addEventListener("keydown", onKeydown);
     const cleanup = () => {
-        rover.removeEventListener('focusin', onFocusin);
-        rover.removeEventListener('keydown', onKeydown);
-        rover.removeEventListener('DOMNodeRemoved', cleanup);
+        rover.removeEventListener("focusin", onFocusin);
+        rover.removeEventListener("keydown", onKeydown);
+        rover.removeEventListener("DOMNodeRemoved", cleanup);
         state.delete(rover);
-        targets.forEach((a) => (a.tabIndex = -1));
+        targets.forEach(a => (a.tabIndex = -1));
     };
-    rover.addEventListener('DOMNodeRemovedFromDocument', cleanup);
+    rover.addEventListener("DOMNodeRemovedFromDocument", cleanup);
 };
@@ -56,0 +56,0 @@ const focusNextItem = (rover) => {

ct-button-menu.d.ts

@@ -1,6 +0,6 @@
-import '@conectate/ct-icon';
-import { icon } from '@conectate/ct-icon/icon-list';
-import { LitElement, TemplateResult } from 'lit';
-type leftRight = 'left' | 'right';
-type topBottom = 'top' | 'bottom';
+import "@conectate/ct-icon";
+import { icon } from "@conectate/ct-icon/icon-list";
+import { LitElement, TemplateResult } from "lit";
+type leftRight = "left" | "right";
+type topBottom = "top" | "bottom";
 /**
@@ -39,5 +39,5 @@ * @group ct-elements
     interface HTMLElementTagNameMap {
-        'ct-button-menu': CtButtonMenu;
+        "ct-button-menu": CtButtonMenu;
     }
 }
 export {};

ct-button-menu.js

 import { __decorate } from "tslib";
-import '@conectate/ct-icon';
-import { LitElement, css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { rovingIndex } from './ct-button-helpers';
+import "@conectate/ct-icon";
+import { LitElement, css, html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { rovingIndex } from "./ct-button-helpers.js";
 /**
@@ -18,8 +18,8 @@ * @group ct-elements
         super(...arguments);
-        this.anim_selector = 'ct-list-item';
-        this.title = 'Open for more actions';
+        this.anim_selector = "ct-list-item";
+        this.title = "Open for more actions";
         this.tabindex = -1;
         this.rotate = false;
         /** Location from opened */
-        this.from = 'bottom-left';
+        this.from = "bottom-left";
         this.use_slot = false;
@@ -29,3 +29,3 @@ /** keep popup after click, you must close programmatically */
         /** Dropdown icon */
-        this.icon = 'expand_more';
+        this.icon = "expand_more";
     }
@@ -85,3 +85,5 @@ static { this.styles = [
 					transform: translateY(5px);
-					transition: opacity var(--out-speed) ease, transform var(--out-speed) ease;
+					transition:
+						opacity var(--out-speed) ease,
+						transform var(--out-speed) ease;
 				}
@@ -129,15 +131,15 @@ }
     firstUpdated() {
-        this.addEventListener('focus', this.setAriaExpanded(true));
-        this.addEventListener('click', this.setAriaExpanded(true));
-        this.addEventListener('blur', this.setAriaExpanded(false));
-        this.addEventListener('keyup', (e) => {
-            if (e.code === 'Escape')
+        this.addEventListener("focus", this.setAriaExpanded(true));
+        this.addEventListener("click", this.setAriaExpanded(true));
+        this.addEventListener("blur", this.setAriaExpanded(false));
+        this.addEventListener("keyup", (e) => {
+            if (e.code === "Escape")
                 e.target?.blur();
         });
         if (!this.keep) {
-            this.addEventListener('click', (ev) => {
+            this.addEventListener("click", ev => {
                 ev.stopPropagation();
                 ev.preventDefault();
             });
-            this.popup.addEventListener('click', (e) => {
+            this.popup.addEventListener("click", e => {
                 e.stopPropagation();
@@ -151,37 +153,37 @@ setTimeout(() => {
         switch (this.from) {
-            case 'top': {
-                this.popup.style.top = '80%';
-                this.popup.style.right = '0';
-                this.popup.style.transformOrigin = 'center top 0px';
+            case "top": {
+                this.popup.style.top = "80%";
+                this.popup.style.right = "0";
+                this.popup.style.transformOrigin = "center top 0px";
                 break;
             }
-            case 'top-right': {
-                this.popup.style.top = '80%';
-                this.popup.style.right = '30%';
-                this.popup.style.transformOrigin = 'right top 0px';
+            case "top-right": {
+                this.popup.style.top = "80%";
+                this.popup.style.right = "30%";
+                this.popup.style.transformOrigin = "right top 0px";
                 break;
             }
-            case 'top-left': {
-                this.popup.style.top = '80%';
-                this.popup.style.left = '0';
-                this.popup.style.transformOrigin = 'left top 0px';
+            case "top-left": {
+                this.popup.style.top = "80%";
+                this.popup.style.left = "0";
+                this.popup.style.transformOrigin = "left top 0px";
                 break;
             }
-            case 'bottom': {
-                this.popup.style.bottom = '80%';
-                this.popup.style.right = '0';
-                this.popup.style.transformOrigin = 'center bottom 0px';
+            case "bottom": {
+                this.popup.style.bottom = "80%";
+                this.popup.style.right = "0";
+                this.popup.style.transformOrigin = "center bottom 0px";
                 break;
             }
-            case 'bottom-right': {
-                this.popup.style.bottom = '80%';
-                this.popup.style.right = '30%';
-                this.popup.style.transformOrigin = 'right bottom 0px';
+            case "bottom-right": {
+                this.popup.style.bottom = "80%";
+                this.popup.style.right = "30%";
+                this.popup.style.transformOrigin = "right bottom 0px";
                 break;
             }
             default:
-            case 'bottom-left': {
-                this.popup.style.bottom = '80%';
-                this.popup.style.left = '30%';
-                this.popup.style.transformOrigin = 'left bottom 0px';
+            case "bottom-left": {
+                this.popup.style.bottom = "80%";
+                this.popup.style.left = "30%";
+                this.popup.style.transformOrigin = "left bottom 0px";
                 break;
@@ -197,3 +199,3 @@ }
         return (e) => {
-            this.setAttribute('aria-expanded', `${value}`);
+            this.setAttribute("aria-expanded", `${value}`);
         };
@@ -205,3 +207,3 @@ }
             let menu_btns = this.querySelectorAll(this.anim_selector);
-            menu_btns.forEach((btn) => btns.push(btn.button || btn.shadowRoot?.firstElementChild || btn.firstChild || btn));
+            menu_btns.forEach(btn => btns.push(btn.button || btn.shadowRoot?.firstElementChild || btn.firstChild || btn));
             if (btns.length > 0)
@@ -243,7 +245,7 @@ rovingIndex({
 __decorate([
-    query('.gui-popup')
+    query(".gui-popup")
 ], CtButtonMenu.prototype, "popup", void 0);
 CtButtonMenu = __decorate([
-    customElement('ct-button-menu')
+    customElement("ct-button-menu")
 ], CtButtonMenu);
 export { CtButtonMenu };

ct-button-split.d.ts

@@ -1,2 +0,2 @@
-import { LitElement } from 'lit';
+import { LitElement } from "lit";
 /**
@@ -16,4 +16,4 @@ * @element ct-button-split
     interface HTMLElementTagNameMap {
-        'ct-button-split': CtButtonSplit;
+        "ct-button-split": CtButtonSplit;
     }
 }

ct-button-split.js

 import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { CtButton } from './ct-button';
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { CtButton } from "./ct-button.js";
 /**
@@ -67,4 +67,4 @@ * @element ct-button-split
 CtButtonSplit = __decorate([
-    customElement('ct-button-split')
+    customElement("ct-button-split")
 ], CtButtonSplit);
 export { CtButtonSplit };

ct-button.d.ts

@@ -11,3 +11,3 @@ /**
  */
-import { LitElement } from 'lit';
+import { LitElement } from "lit";
 /**
@@ -99,8 +99,8 @@ ## Example usage
         interface IntrinsicElements {
-            'ct-button': any;
+            "ct-button": any;
         }
     }
     interface HTMLElementTagNameMap {
-        'ct-button': CtButton;
+        "ct-button": CtButton;
     }
 }

ct-button.js

@@ -12,4 +12,4 @@ /**
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 /**
@@ -94,3 +94,3 @@ ## Example usage
         this.light = false;
-        this.role = 'button';
+        this.role = "button";
         this.disabled = false;
@@ -107,3 +107,3 @@ this.gap = false;
 				position: relative;
-				font-family: 'Google Sans', 'Ubuntu', 'Roboto', sans-serif;
+				font-family: "Google Sans", "Ubuntu", "Roboto", sans-serif;
 				padding: 0;
@@ -204,3 +204,3 @@ background: #00aeff00;
     render() {
-        return html ` <button ?disabled=${this.disabled} @click=${() => this.dispatchEvent(new CustomEvent('btnclick'))}>
+        return html ` <button ?disabled=${this.disabled} @click=${() => this.dispatchEvent(new CustomEvent("btnclick"))}>
 			<slot name="prefix"></slot>
@@ -234,4 +234,4 @@ <slot></slot>
 CtButton = __decorate([
-    customElement('ct-button')
+    customElement("ct-button")
 ], CtButton);
 export { CtButton };

package.json

 {
 	"name": "@conectate/ct-button",
-	"version": "3.11.1",
+	"version": "3.12.0",
 	"description": "HTML Button made with Web Components and Lit",
@@ -17,3 +17,3 @@ "main": "ct-button.js",
 	"dependencies": {
-		"@conectate/ct-icon": "^3.11.1",
+		"@conectate/ct-icon": "^3.12.0",
 		"lit": "^2.8.0",
@@ -49,3 +49,3 @@ "tslib": "^2.6.1"
 	},
-	"gitHead": "4c0ffdf4fb9785b55f64cbd69f4f9d38fd069017"
+	"gitHead": "6370697d86d090272608c2b8e25bf1b470d11ba0"
 }

No alert changes

Improved metrics

Total package byte prevSize

31055

increased by0.07%

Lines of code

746

increased by0.27%

Dependency changes

• Updated@conectate/ct-icon@^3.12.0