tinkiet 0.11.2 → 0.11.8

package/list-item/index.js

@@ -47,63 +47,69 @@ let TkListItem = class TkListItem extends box/* TkBox */.P {
         return (0,external_lit_.html) `
 			<slot name="before" @click=${this.handleClick}></slot>
 			<div id="content">
-				<slot></slot>
+				<slot @slotchange=${this.ensureAriaLabel}></slot>
 			</div>
 			<slot name="after" @click=${this.handleClick}></slot>
 			${this.href
             ? (0,external_lit_.html) `
-						<a tabindex="-1" id="ahref" href="${this.href}" target=${(0,if_defined_js_.ifDefined)(this.target)} rel="noreferrer" aria-label=${this.ariaLabel}></a>
+						<a tabindex="-1" id="ahref" href=${this.href} target=${(0,if_defined_js_.ifDefined)(this.target)} rel="noreferrer" aria-label=${this.ariaLabel}></a>
 				  `
-            : ""}
+            : external_lit_.nothing}
 		`;
     }
     constructor() {
         super();
         this.href = "";
         this.target = "";
-    }
-    firstUpdated() {
-        if (!this.ariaLabel && this.innerText)
-            this.ariaLabel = this.innerText;
+        this.ariaLabel = "";
+        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 && this.$ahref) {
+                e.stopPropagation();
+                e.preventDefault();
+                this.$ahref.click();
+            }
+        };
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
-        this.addEventListener("click", this.handleClick.bind(this));
+        this.ensureAriaLabel();
+        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") {
+    ensureAriaLabel() {
+        var _a;
+        if (this.ariaLabel)
             return;
-        }
-        if (this.href && e.isTrusted) {
-            e.stopPropagation();
-            e.preventDefault();
-            this.$ahref.click();
-        }
+        const text = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        if (text)
+            this.ariaLabel = text;
     }
 };
 __decorate([
-    (0,decorators_js_.property)({ attribute: true })
+    (0,decorators_js_.property)({ type: String, reflect: true })
 ], TkListItem.prototype, "href", void 0);
 __decorate([
-    (0,decorators_js_.property)({ attribute: true })
+    (0,decorators_js_.property)({ type: String, reflect: true })
 ], TkListItem.prototype, "target", void 0);
 __decorate([
-    (0,decorators_js_.property)({ attribute: "aria-label" })
+    (0,decorators_js_.property)({ attribute: "aria-label", reflect: true })
 ], TkListItem.prototype, "ariaLabel", void 0);
 __decorate([
     (0,decorators_js_.query)("#ahref")
@@ -220,6 +226,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 [
@@ -235,14 +296,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) {
@@ -252,61 +313,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 })
@@ -332,7 +338,7 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
+module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["nothing"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.nothing), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
 
 /***/ }),
 

package/list-item/list-item.d.ts

@@ -4,14 +4,14 @@ export declare class TkListItem extends TkBox {
     href: string;
     target: string;
     ariaLabel: string;
-    protected $ahref: HTMLAnchorElement;
+    protected $ahref?: HTMLAnchorElement;
     render(): import("lit").TemplateResult<1>;
     constructor();
-    firstUpdated(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected onKeyDown(e: KeyboardEvent): void;
-    protected handleClick(e: Event): void;
+    protected onKeyDown: (e: KeyboardEvent) => void;
+    protected handleClick: (e: Event) => void;
+    private ensureAriaLabel;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/loading/index.js

@@ -108,6 +108,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 [
@@ -123,14 +178,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) {
@@ -140,61 +195,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/notie/index.js

@@ -275,6 +275,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 [
@@ -290,14 +345,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) {
@@ -307,61 +362,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinkiet",
-  "version": "0.11.2",
+  "version": "0.11.8",
   "description": "Pragmatic UI Web Components",
   "type": "module",
   "main": "index.js",