tinkiet 0.11.2 → 0.11.4

package/drawer/drawer.d.ts

@@ -11,10 +11,10 @@ export declare class TkDrawer extends LitElement {
     swipeable: boolean;
     private $drawer;
     private mql;
+    private overMediaQueryListener;
     render(): import("lit").TemplateResult<1>;
     updated(props: any): void;
     protected overMediaQuery(): void;
-    private overMediaQueryListener;
     hideIfOver(): void;
     show(): void;
     hide(): void;
@@ -25,6 +25,7 @@ export declare class TkDrawer extends LitElement {
     touchStart(event: TouchEvent): void;
     touchMove(event: TouchEvent): void;
     touchEnd(event: TouchEvent): void;
+    disconnectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/drawer/index.js

@@ -46,6 +46,9 @@ let TkDrawer = class TkDrawer extends external_lit_.LitElement {
         this.over = false;
         this.right = false;
         this.swipeable = false;
+        this.overMediaQueryListener = (e) => {
+            e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
+        };
         this.swipeX = 0;
         this.swipeY = 0;
         this.isHorizontalSwipe = false;
@@ -100,13 +103,10 @@ let TkDrawer = class TkDrawer extends external_lit_.LitElement {
     }
     overMediaQuery() {
         if (this.mql)
-            this.mql.removeEventListener("change", this.overMediaQueryListener.bind(this));
+            this.mql.removeEventListener("change", this.overMediaQueryListener);
         this.mql = window.matchMedia(this.overQuery);
         this.mql.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
-        this.mql.addEventListener("change", this.overMediaQueryListener.bind(this));
-    }
-    overMediaQueryListener(e) {
-        e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
+        this.mql.addEventListener("change", this.overMediaQueryListener);
     }
     hideIfOver() {
         var _a;
@@ -163,6 +163,11 @@ let TkDrawer = class TkDrawer extends external_lit_.LitElement {
         }
         this.isHorizontalSwipe = false;
     }
+    disconnectedCallback() {
+        if (this.mql)
+            this.mql.removeEventListener("change", this.overMediaQueryListener);
+        super.disconnectedCallback();
+    }
 };
 TkDrawer.styles = (0,external_lit_.css) `
 		${(0,external_lit_.unsafeCSS)(drawer)}

package/icon/index.js

@@ -146,6 +146,61 @@ let TkBox = class TkBox extends external_lit_.LitElement {
          * Activate ripple
          */
         this.ripple = false;
+        this.showRipple = (event) => {
+            const x = event.clientX;
+            const y = event.clientY;
+            const { offsetWidth, offsetHeight } = this;
+            const container = document.createElement("span");
+            container.classList.add("ripple", "open");
+            const element = document.createElement("span");
+            container.appendChild(element);
+            this.shadowRoot.appendChild(container);
+            const rect = this.getBoundingClientRect();
+            const diameter = Math.max(offsetWidth, offsetWidth) * 2;
+            element.style.width = element.style.height = diameter + "px";
+            element.style.left = x - rect.left - diameter / 2 + "px";
+            element.style.top = y - rect.top - diameter / 2 + "px";
+            const inAnimation = element.animate({
+                transform: [`scale(0)`, `scale(1)`]
+            }, {
+                easing: "ease-out",
+                fill: "both",
+                duration: 500
+            });
+            inAnimation.onfinish = () => {
+                container.classList.remove("open");
+                const outAnimation = element.animate({
+                    opacity: ["0.5", "0"]
+                }, {
+                    easing: "ease-in",
+                    fill: "both",
+                    duration: 300
+                });
+                outAnimation.onfinish = () => {
+                    requestAnimationFrame(() => {
+                        container.remove();
+                    });
+                };
+            };
+        };
+        this.hideRipple = (event) => {
+            var _a;
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
+                const element = container.querySelector("span");
+                const outAnimation = element.animate({
+                    opacity: ["0.5", "0"]
+                }, {
+                    easing: "ease-out",
+                    fill: "both",
+                    duration: 300
+                });
+                outAnimation.onfinish = () => {
+                    requestAnimationFrame(() => {
+                        container.remove();
+                    });
+                };
+            });
+        };
     }
     static get styles() {
         return [
@@ -161,14 +216,14 @@ let TkBox = class TkBox extends external_lit_.LitElement {
     }
     connectedCallback() {
         if (this.ripple) {
-            this.addEventListener("mousedown", this.showRipple.bind(this), { passive: true });
-            this.addEventListener("mouseup", this.hideRipple.bind(this), { passive: true });
+            this.addEventListener("mousedown", this.showRipple, { passive: true });
+            this.addEventListener("mouseup", this.hideRipple, { passive: true });
         }
         super.connectedCallback();
     }
     disconnectedCallback() {
         this.removeEventListener("mousedown", this.showRipple);
-        this.addEventListener("mouseup", this.hideRipple);
+        this.removeEventListener("mouseup", this.hideRipple);
         super.disconnectedCallback();
     }
     updated(props) {
@@ -178,61 +233,6 @@ let TkBox = class TkBox extends external_lit_.LitElement {
         // 	this.style.setProperty("color", this.color.toString());
         super.updated(props);
     }
-    showRipple(event) {
-        const x = event.clientX;
-        const y = event.clientY;
-        const { offsetWidth, offsetHeight } = this;
-        const container = document.createElement("span");
-        container.classList.add("ripple", "open");
-        const element = document.createElement("span");
-        container.appendChild(element);
-        this.shadowRoot.appendChild(container);
-        const rect = this.getBoundingClientRect();
-        const diameter = Math.max(offsetWidth, offsetWidth) * 2;
-        element.style.width = element.style.height = diameter + "px";
-        element.style.left = x - rect.left - diameter / 2 + "px";
-        element.style.top = y - rect.top - diameter / 2 + "px";
-        const inAnimation = element.animate({
-            transform: [`scale(0)`, `scale(1)`]
-        }, {
-            easing: "ease-out",
-            fill: "both",
-            duration: 500
-        });
-        inAnimation.onfinish = () => {
-            container.classList.remove("open");
-            const outAnimation = element.animate({
-                opacity: ["0.5", "0"]
-            }, {
-                easing: "ease-in",
-                fill: "both",
-                duration: 300
-            });
-            outAnimation.onfinish = () => {
-                requestAnimationFrame(() => {
-                    container.remove();
-                });
-            };
-        };
-    }
-    hideRipple(event) {
-        var _a;
-        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
-            const element = container.querySelector("span");
-            const outAnimation = element.animate({
-                opacity: ["0.5", "0"]
-            }, {
-                easing: "ease-out",
-                fill: "both",
-                duration: 300
-            });
-            outAnimation.onfinish = () => {
-                requestAnimationFrame(() => {
-                    container.remove();
-                });
-            };
-        });
-    }
 };
 __decorate([
     (0,decorators_js_.property)({ type: Boolean })

package/index.js

@@ -157,6 +157,25 @@ let TkListItem = class TkListItem extends box/* TkBox */.P {
         super();
         this.href = "";
         this.target = "";
+        this.onKeyDown = (e) => {
+            if (e.code === "Space" || e.code === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                this.click();
+            }
+        };
+        this.handleClick = (e) => {
+            const target = e.target;
+            // In case click cames from a slotted element with href attribute we stop propagation
+            if (target.tagName == "BUTTON" || target.tagName == "TK-BUTTON" || target.tagName == "TK-SWITCH" || target.tagName == "TK-CHECKBOX") {
+                return;
+            }
+            if (this.href && e.isTrusted) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.$ahref.click();
+            }
+        };
     }
     firstUpdated() {
         if (!this.ariaLabel && this.innerText)
@@ -164,33 +183,14 @@ let TkListItem = class TkListItem extends box/* TkBox */.P {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
-        this.addEventListener("click", this.handleClick.bind(this));
+        this.addEventListener("keydown", this.onKeyDown);
+        this.addEventListener("click", this.handleClick);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener("click", this.handleClick);
         this.removeEventListener("keydown", this.onKeyDown);
     }
-    onKeyDown(e) {
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
-    handleClick(e) {
-        const target = e.target;
-        // In case click cames from a slotted element with href attribute we stop propagation
-        if (target.tagName == "BUTTON" || target.tagName == "TK-BUTTON" || target.tagName == "TK-SWITCH" || target.tagName == "TK-CHECKBOX") {
-            return;
-        }
-        if (this.href && e.isTrusted) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.$ahref.click();
-        }
-    }
 };
 __decorate([
     (0,decorators_js_.property)({ attribute: true })
@@ -1012,6 +1012,61 @@ let TkBox = class TkBox extends external_lit_.LitElement {
          * Activate ripple
          */
         this.ripple = false;
+        this.showRipple = (event) => {
+            const x = event.clientX;
+            const y = event.clientY;
+            const { offsetWidth, offsetHeight } = this;
+            const container = document.createElement("span");
+            container.classList.add("ripple", "open");
+            const element = document.createElement("span");
+            container.appendChild(element);
+            this.shadowRoot.appendChild(container);
+            const rect = this.getBoundingClientRect();
+            const diameter = Math.max(offsetWidth, offsetWidth) * 2;
+            element.style.width = element.style.height = diameter + "px";
+            element.style.left = x - rect.left - diameter / 2 + "px";
+            element.style.top = y - rect.top - diameter / 2 + "px";
+            const inAnimation = element.animate({
+                transform: [`scale(0)`, `scale(1)`]
+            }, {
+                easing: "ease-out",
+                fill: "both",
+                duration: 500
+            });
+            inAnimation.onfinish = () => {
+                container.classList.remove("open");
+                const outAnimation = element.animate({
+                    opacity: ["0.5", "0"]
+                }, {
+                    easing: "ease-in",
+                    fill: "both",
+                    duration: 300
+                });
+                outAnimation.onfinish = () => {
+                    requestAnimationFrame(() => {
+                        container.remove();
+                    });
+                };
+            };
+        };
+        this.hideRipple = (event) => {
+            var _a;
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
+                const element = container.querySelector("span");
+                const outAnimation = element.animate({
+                    opacity: ["0.5", "0"]
+                }, {
+                    easing: "ease-out",
+                    fill: "both",
+                    duration: 300
+                });
+                outAnimation.onfinish = () => {
+                    requestAnimationFrame(() => {
+                        container.remove();
+                    });
+                };
+            });
+        };
     }
     static get styles() {
         return [
@@ -1027,14 +1082,14 @@ let TkBox = class TkBox extends external_lit_.LitElement {
     }
     connectedCallback() {
         if (this.ripple) {
-            this.addEventListener("mousedown", this.showRipple.bind(this), { passive: true });
-            this.addEventListener("mouseup", this.hideRipple.bind(this), { passive: true });
+            this.addEventListener("mousedown", this.showRipple, { passive: true });
+            this.addEventListener("mouseup", this.hideRipple, { passive: true });
         }
         super.connectedCallback();
     }
     disconnectedCallback() {
         this.removeEventListener("mousedown", this.showRipple);
-        this.addEventListener("mouseup", this.hideRipple);
+        this.removeEventListener("mouseup", this.hideRipple);
         super.disconnectedCallback();
     }
     updated(props) {
@@ -1044,61 +1099,6 @@ let TkBox = class TkBox extends external_lit_.LitElement {
         // 	this.style.setProperty("color", this.color.toString());
         super.updated(props);
     }
-    showRipple(event) {
-        const x = event.clientX;
-        const y = event.clientY;
-        const { offsetWidth, offsetHeight } = this;
-        const container = document.createElement("span");
-        container.classList.add("ripple", "open");
-        const element = document.createElement("span");
-        container.appendChild(element);
-        this.shadowRoot.appendChild(container);
-        const rect = this.getBoundingClientRect();
-        const diameter = Math.max(offsetWidth, offsetWidth) * 2;
-        element.style.width = element.style.height = diameter + "px";
-        element.style.left = x - rect.left - diameter / 2 + "px";
-        element.style.top = y - rect.top - diameter / 2 + "px";
-        const inAnimation = element.animate({
-            transform: [`scale(0)`, `scale(1)`]
-        }, {
-            easing: "ease-out",
-            fill: "both",
-            duration: 500
-        });
-        inAnimation.onfinish = () => {
-            container.classList.remove("open");
-            const outAnimation = element.animate({
-                opacity: ["0.5", "0"]
-            }, {
-                easing: "ease-in",
-                fill: "both",
-                duration: 300
-            });
-            outAnimation.onfinish = () => {
-                requestAnimationFrame(() => {
-                    container.remove();
-                });
-            };
-        };
-    }
-    hideRipple(event) {
-        var _a;
-        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
-            const element = container.querySelector("span");
-            const outAnimation = element.animate({
-                opacity: ["0.5", "0"]
-            }, {
-                easing: "ease-out",
-                fill: "both",
-                duration: 300
-            });
-            outAnimation.onfinish = () => {
-                requestAnimationFrame(() => {
-                    container.remove();
-                });
-            };
-        });
-    }
 };
 __decorate([
     (0,decorators_js_.property)({ type: Boolean })
@@ -1373,6 +1373,25 @@ let TkRadio = class TkRadio extends external_lit_.LitElement {
         this.required = false;
         this.disabled = false;
         this.readonly = false;
+        this.onKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.code === "Space" || e.code === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                this.click();
+            }
+        };
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            if (this.checked && this.name)
+                this.getRootNode()
+                    .querySelectorAll(`tk-radio[name="${this.name}"]`)
+                    .forEach(el => (el != this ? (el.checked = false) : null));
+            setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
+        };
     }
     render() {
         return (0,external_lit_.html) `
@@ -1402,8 +1421,8 @@ let TkRadio = class TkRadio extends external_lit_.LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("click", this.handleClick.bind(this));
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
+        this.addEventListener("click", this.handleClick);
+        this.addEventListener("keydown", this.onKeyDown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -1413,25 +1432,6 @@ let TkRadio = class TkRadio extends external_lit_.LitElement {
     firstUpdated() {
         this.appendChild(this.$input);
     }
-    onKeyDown(e) {
-        if (this.disabled)
-            return;
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
-    handleClick() {
-        if (this.disabled)
-            return;
-        this.checked = !this.checked;
-        if (this.checked && this.name)
-            this.getRootNode()
-                .querySelectorAll(`tk-radio[name="${this.name}"]`)
-                .forEach(el => (el != this ? (el.checked = false) : null));
-        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
-    }
 };
 TkRadio.styles = (0,external_lit_.css) `
 		${(0,external_lit_.unsafeCSS)(radio_radio)}
@@ -2028,6 +2028,9 @@ let TkDrawer = class TkDrawer extends external_lit_.LitElement {
         this.over = false;
         this.right = false;
         this.swipeable = false;
+        this.overMediaQueryListener = (e) => {
+            e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
+        };
         this.swipeX = 0;
         this.swipeY = 0;
         this.isHorizontalSwipe = false;
@@ -2082,13 +2085,10 @@ let TkDrawer = class TkDrawer extends external_lit_.LitElement {
     }
     overMediaQuery() {
         if (this.mql)
-            this.mql.removeEventListener("change", this.overMediaQueryListener.bind(this));
+            this.mql.removeEventListener("change", this.overMediaQueryListener);
         this.mql = window.matchMedia(this.overQuery);
         this.mql.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
-        this.mql.addEventListener("change", this.overMediaQueryListener.bind(this));
-    }
-    overMediaQueryListener(e) {
-        e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
+        this.mql.addEventListener("change", this.overMediaQueryListener);
     }
     hideIfOver() {
         var _a;
@@ -2145,6 +2145,11 @@ let TkDrawer = class TkDrawer extends external_lit_.LitElement {
         }
         this.isHorizontalSwipe = false;
     }
+    disconnectedCallback() {
+        if (this.mql)
+            this.mql.removeEventListener("change", this.overMediaQueryListener);
+        super.disconnectedCallback();
+    }
 };
 TkDrawer.styles = (0,external_lit_.css) `
 		${(0,external_lit_.unsafeCSS)(drawer)}
@@ -2356,6 +2361,24 @@ let TkButton = class TkButton extends box/* TkBox */.P {
         this.disabled = false;
         this.fab = false;
         this.ripple = true;
+        this.onKeyDown = (e) => {
+            if (e.code === "Space" || e.code === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                this.click();
+            }
+        };
+        this.handleClick = (e) => {
+            var _a;
+            if (this.href && e.isTrusted) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.$ahref.click();
+            }
+            else if ((e.isTrusted && this.type == "submit") || this.type == "reset") {
+                (_a = this.querySelector("button")) === null || _a === void 0 ? void 0 : _a.click();
+            }
+        };
     }
     static get styles() {
         return [
@@ -2387,7 +2410,8 @@ let TkButton = class TkButton extends box/* TkBox */.P {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("click", this.handleClick.bind(this));
+        this.addEventListener("click", this.handleClick);
+        this.addEventListener("keydown", this.onKeyDown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -2398,28 +2422,10 @@ let TkButton = class TkButton extends box/* TkBox */.P {
         this.tabIndex = this.disabled ? -1 : 0;
         super.updated(props);
     }
-    onKeyDown(e) {
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
     firstUpdated() {
         if (this.type == "submit" || this.type == "reset")
             this.appendChild(this.$button);
     }
-    handleClick(e) {
-        var _a;
-        if (this.href && e.isTrusted) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.$ahref.click();
-        }
-        else if ((e.isTrusted && this.type == "submit") || this.type == "reset") {
-            (_a = this.querySelector("button")) === null || _a === void 0 ? void 0 : _a.click();
-        }
-    }
     slotChanged() {
         var _a;
         const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
@@ -2509,6 +2515,21 @@ let TkSwitch = class TkSwitch extends external_lit_.LitElement {
         this.required = false;
         this.disabled = false;
         this.readonly = false;
+        this.onKeyDown = (e) => {
+            if (e.code === "Space" || e.code === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                this.click();
+            }
+        };
+        this.handleClick = () => {
+            this.checked = !this.checked;
+            if (this.checked && this.name)
+                this.getRootNode()
+                    .querySelectorAll(`tk-radio[name="${this.name}"]`)
+                    .forEach(el => (el != this ? (el.checked = false) : null));
+            setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
+        };
     }
     render() {
         return (0,external_lit_.html) `
@@ -2538,8 +2559,8 @@ let TkSwitch = class TkSwitch extends external_lit_.LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("click", this.handleClick.bind(this));
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
+        this.addEventListener("click", this.handleClick);
+        this.addEventListener("keydown", this.onKeyDown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -2549,21 +2570,6 @@ let TkSwitch = class TkSwitch extends external_lit_.LitElement {
     firstUpdated() {
         this.appendChild(this.$input);
     }
-    onKeyDown(e) {
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
-    handleClick() {
-        this.checked = !this.checked;
-        if (this.checked && this.name)
-            this.getRootNode()
-                .querySelectorAll(`tk-radio[name="${this.name}"]`)
-                .forEach(el => (el != this ? (el.checked = false) : null));
-        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
-    }
 };
 TkSwitch.styles = (0,external_lit_.css) `
 		${(0,external_lit_.unsafeCSS)(switch_switch)}
@@ -3561,6 +3567,10 @@ let TkDialog = class TkDialog extends external_lit_.LitElement {
         this.modal = false;
         this.open = false;
         this.blurOverlay = false;
+        this.handleKeyDown = (event) => {
+            if (event.key === "Escape" && this.open && !this.modal)
+                this.hide();
+        };
     }
     render() {
         return (0,external_lit_.html) `
@@ -3580,6 +3590,14 @@ let TkDialog = class TkDialog extends external_lit_.LitElement {
         if (_changedProperties.has("open") && _changedProperties.get("open") == true && !this.open)
             this.dispatchEvent(new Event("did-close"));
     }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("keydown", this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("keydown", this.handleKeyDown);
+        super.disconnectedCallback();
+    }
     show() {
         this.open = true;
         return new Promise(resolve => {