tinkiet 0.11.2 → 0.11.8

package/switch/switch.d.ts

@@ -14,8 +14,8 @@ export declare class TkSwitch extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
-    protected onKeyDown(e: KeyboardEvent): void;
-    protected handleClick(): void;
+    protected onKeyDown: (e: KeyboardEvent) => void;
+    protected handleClick: () => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/theme/index.js

@@ -47,8 +47,13 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
         this.error = "#B3261E";
         this.neutral = "#5E5F5C";
         this.neutralVariant = "#5c6057";
-        this.forceBody = false;
         this.inverted = false;
+        this.primary_hsl = [];
+        this.secondary_hsl = [];
+        this.tertiary_hsl = [];
+        this.error_hsl = [];
+        this.neutral_hsl = [];
+        this.neutral_variant_hsl = [];
     }
     render() {
         return (0,external_lit_.html) `
@@ -58,6 +63,17 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
     firstUpdated(_changedProperties) {
         this.setThemeColor();
     }
+    updated(changedProps) {
+        if (changedProps.has("primary") ||
+            changedProps.has("secondary") ||
+            changedProps.has("tertiary") ||
+            changedProps.has("error") ||
+            changedProps.has("neutral") ||
+            changedProps.has("neutralVariant")) {
+            this.setThemeColor();
+        }
+        super.updated(changedProps);
+    }
     hexToHSL(hex) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
         if (result == null)
@@ -94,8 +110,11 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
         this.error_hsl = this.hexToHSL(this.error);
         this.neutral_hsl = this.hexToHSL(this.neutral);
         this.neutral_variant_hsl = this.hexToHSL(this.neutralVariant);
-        const style = document.createElement("style");
-        style.innerHTML = `
+        if (!this.styleEl) {
+            this.styleEl = document.createElement("style");
+            document.body.appendChild(this.styleEl);
+        }
+        this.styleEl.innerHTML = `
 			:root {
 				--primary-h: ${this.primary_hsl[0]};
 				--primary-s: ${this.primary_hsl[1]};
@@ -117,7 +136,6 @@ let TkTheme = class TkTheme extends external_lit_.LitElement {
 				--neutral-variant-l: ${this.neutral_variant_hsl[2]};
 			}
 		`;
-        document.body.appendChild(style);
     }
 };
 TkTheme.styles = (0,external_lit_.css) `
@@ -141,30 +159,9 @@ __decorate([
 __decorate([
     (0,decorators_js_.property)()
 ], TkTheme.prototype, "neutralVariant", void 0);
-__decorate([
-    (0,decorators_js_.property)({ type: Boolean, attribute: "force-body", reflect: true })
-], TkTheme.prototype, "forceBody", void 0);
 __decorate([
     (0,decorators_js_.property)({ type: Boolean, attribute: true, reflect: true })
 ], TkTheme.prototype, "inverted", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "primary_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "secondary_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "tertiary_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "error_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "neutral_hsl", void 0);
-__decorate([
-    (0,decorators_js_.state)()
-], TkTheme.prototype, "neutral_variant_hsl", void 0);
 TkTheme = __decorate([
     (0,decorators_js_.customElement)("tk-theme")
 ], TkTheme);
@@ -180,7 +177,7 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["state"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.state) });
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
 
 /***/ })
 

package/theme/theme.d.ts

@@ -7,7 +7,6 @@ export declare class TkTheme extends LitElement {
     error: string;
     neutral: string;
     neutralVariant: string;
-    forceBody: boolean;
     inverted: boolean;
     private primary_hsl;
     private secondary_hsl;
@@ -15,8 +14,10 @@ export declare class TkTheme extends LitElement {
     private error_hsl;
     private neutral_hsl;
     private neutral_variant_hsl;
+    private styleEl?;
     render(): import("lit").TemplateResult<1>;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected updated(changedProps: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private hexToHSL;
     private setThemeColor;
 }

package/topbar/index.js

@@ -163,6 +163,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 [
@@ -178,14 +233,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) {
@@ -195,61 +250,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 })