tinkiet 0.11.4 → 0.11.8

package/drawer/index.js

@@ -27,7 +27,7 @@ var external_lit_ = __webpack_require__(2927);
 // EXTERNAL MODULE: external "lit/decorators.js"
 var decorators_js_ = __webpack_require__(8899);
 ;// ./tinkiet/drawer/drawer.scss
-/* harmony default export */ const drawer = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:block;height:100%;width:100%;position:relative;overflow:hidden;background-color:hsl(var(--surface))}.drawer{display:grid;grid-template-columns:var(--drawer-width, 256px) 10px;grid-template-rows:auto 1fr auto;grid-template-areas:\"header swipe\" \"content swipe\" \"footer swipe\";position:absolute;top:0;bottom:0;transform:translateX(calc(-100% + 10px));transition:transform cubic-bezier(0.4, 0, 0.2, 1) var(--transition-duration-medium, 180ms);will-change:transform;touch-action:pan-y;z-index:var(--drawer-z-index, 200);background-color:hsl(var(--surface))}.drawer .drawer-header{grid-area:header}.drawer .drawer-content{grid-area:content;overflow:auto}.drawer .drawer-footer{grid-area:footer}.drawer .drawer-swipe{grid-area:swipe;background-color:rgba(0,0,0,0)}:host([right]) .drawer{right:0;transform:translateX(calc(100% + 10px))}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:var(--drawer-overlay-z-index, 200);background-color:rgba(0,0,0,.5);display:none}.container{transition:padding cubic-bezier(0.4, 0, 0.2, 1) var(--transition-duration-slow, 250ms);overflow:auto;height:100%}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width, 256px)}:host([open][over]) .drawer{background-color:hsl(var(--surface-container-low));box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media(max-width: var(--drawer-trigger-width, 400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}");
+/* harmony default export */ const drawer = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:block;height:100%;width:100%;position:relative;overflow:hidden;background-color:hsl(var(--surface))}.drawer{display:grid;grid-template-columns:var(--drawer-width, 256px) 10px;grid-template-rows:auto 1fr auto;grid-template-areas:\"header swipe\" \"content swipe\" \"footer swipe\";position:absolute;top:0;bottom:0;transform:translateX(calc(-100% + 10px));transition:transform cubic-bezier(0.4, 0, 0.2, 1) var(--transition-duration-medium, 180ms);will-change:transform;touch-action:pan-y;z-index:var(--drawer-z-index, 200);background-color:hsl(var(--surface))}.drawer .drawer-header{grid-area:header}.drawer .drawer-content{grid-area:content;overflow:auto;position:relative;transition:opacity var(--transition-duration-medium, 180ms) ease}.drawer .drawer-content::before,.drawer .drawer-content::after{content:\"\";position:sticky;display:block;height:14px;pointer-events:none;opacity:0;transition:opacity var(--transition-duration-medium, 180ms) ease;left:0;right:0;width:100%;z-index:1}.drawer .drawer-content::before{top:0;margin-top:-14px;background:linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0))}.drawer .drawer-content::after{bottom:0;margin-bottom:-14px;background:linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0))}.drawer .drawer-content.has-top-shadow::before{opacity:1}.drawer .drawer-content.has-bottom-shadow::after{opacity:1}.drawer .drawer-footer{grid-area:footer}.drawer .drawer-swipe{grid-area:swipe;background-color:rgba(0,0,0,0)}:host([right]) .drawer{right:0;transform:translateX(calc(100% + 10px))}.overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:var(--drawer-overlay-z-index, 200);background-color:rgba(0,0,0,.5);display:none}.container{transition:padding cubic-bezier(0.4, 0, 0.2, 1) var(--transition-duration-slow, 250ms);overflow:auto;height:100%}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width, 256px)}:host([open][over]) .drawer{background-color:hsl(var(--surface-container-low));box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)}:host([open][over]) .container{padding-left:0}:host([open][over]) .overlay{display:block}@media(max-width: var(--drawer-trigger-width, 400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}");
 ;// ./tinkiet/drawer/drawer.ts
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -38,46 +38,47 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
-
 let TkDrawer = class TkDrawer extends external_lit_.LitElement {
     constructor() {
         super(...arguments);
-        this._open = false;
+        this.open = false;
         this.over = false;
         this.right = false;
         this.swipeable = false;
+        this.contentScrolled = false;
+        this.contentHasBottomShadow = false;
         this.overMediaQueryListener = (e) => {
             e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
         };
+        this.handleOverlayClick = () => {
+            this.hide();
+        };
+        this.handleContentScroll = () => {
+            if (!this.$content)
+                return;
+            const { scrollTop, scrollHeight, clientHeight } = this.$content;
+            this.contentScrolled = scrollTop > 0;
+            const atBottom = Math.ceil(scrollTop + clientHeight) >= scrollHeight;
+            this.contentHasBottomShadow = !atBottom && scrollHeight > clientHeight;
+        };
         this.swipeX = 0;
         this.swipeY = 0;
         this.isHorizontalSwipe = false;
     }
-    set open(value) {
-        if (value === this._open)
-            return;
-        const oldValue = this._open;
-        this._open = value;
-        this.requestUpdate("open", oldValue);
-        if (this._open)
-            this.dispatchEvent(new Event("did-show"));
-        if (!this._open)
-            this.dispatchEvent(new Event("did-close"));
-    }
-    get open() {
-        return this._open;
-    }
     render() {
         return (0,external_lit_.html) `
 			<div class="container">
 				<slot name="drawer-container"></slot>
 			</div>
-			<div class="overlay" @click=${() => (this.open = false)}></div>
+			<div class="overlay" @click=${this.handleOverlayClick}></div>
 			<div class="drawer" @touchstart=${this.touchStart} @touchmove=${this.touchMove} @touchend=${this.touchEnd}>
 				<div class="drawer-header">
 					<slot name="drawer-header"></slot>
 				</div>
-				<div class="drawer-content">
+				<div
+					class="drawer-content ${this.contentScrolled ? "has-top-shadow" : ""} ${this.contentHasBottomShadow ? "has-bottom-shadow" : ""}"
+					@scroll=${this.handleContentScroll}
+				>
 					<slot name="drawer-content"></slot>
 				</div>
 				<div class="drawer-footer">
@@ -88,17 +89,31 @@ let TkDrawer = class TkDrawer extends external_lit_.LitElement {
 			
 		`;
     }
+    firstUpdated() {
+        if (this.overQuery)
+            this.overMediaQuery();
+        if (this.openQuery && window.matchMedia(this.openQuery).matches)
+            this.show();
+        this.handleContentScroll();
+    }
     updated(props) {
-        if (props.has("overQuery"))
+        super.updated(props);
+        if (props.has("overQuery") && this.overQuery)
             this.overMediaQuery();
-        if (props.has("openQuery")) {
-            if (window.matchMedia(this.openQuery).matches)
-                this.show();
-        }
-        if (props.has("open") && this.swipeable) {
-            requestAnimationFrame(_ => {
-                this.$drawer.removeAttribute('style');
-            });
+        if (props.has("openQuery") && this.openQuery && window.matchMedia(this.openQuery).matches)
+            this.show();
+        if (props.has("open")) {
+            if (this.open) {
+                this.dispatchEvent(new CustomEvent("did-show", { bubbles: true }));
+            }
+            else if (props.get("open") === true) {
+                this.dispatchEvent(new CustomEvent("did-close", { bubbles: true }));
+            }
+            if (this.swipeable && this.$drawer) {
+                requestAnimationFrame(() => {
+                    this.$drawer.removeAttribute("style");
+                });
+            }
         }
     }
     overMediaQuery() {
@@ -123,42 +138,43 @@ let TkDrawer = class TkDrawer extends external_lit_.LitElement {
         this.open = !this.open;
     }
     touchStart(event) {
-        if (!this.swipeable)
+        if (!this.swipeable || !this.$drawer)
             return;
         this.$drawer.style.transition = "transform 0ms ease";
         this.swipeX = event.touches[0].clientX;
         this.swipeY = event.touches[0].clientY;
     }
     touchMove(event) {
-        if (!this.swipeable)
+        if (!this.swipeable || !this.$drawer)
             return;
         const deltaX = event.touches[0].clientX - this.swipeX;
         const deltaY = event.touches[0].clientY - this.swipeY;
         this.isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
         if (!this.isHorizontalSwipe)
             return;
-        var x = this.open ?
-            deltaX > 0 ? 0 : deltaX :
-            deltaX < 0 ? 0 : deltaX;
-        var transformString;
-        this.open ?
-            transformString = "translateX(" + x + "px)" :
-            transformString = `translateX(min(calc(-100% + 10px + ${x}px), 0px)`;
-        requestAnimationFrame(_ => {
+        const x = this.open
+            ? deltaX > 0 ? 0 : deltaX
+            : deltaX < 0 ? 0 : deltaX;
+        const transformString = this.open
+            ? `translateX(${x}px)`
+            : `translateX(min(calc(-100% + 10px + ${x}px), 0px))`;
+        requestAnimationFrame(() => {
+            if (!this.$drawer)
+                return;
             this.$drawer.style.transform = transformString;
         });
     }
     touchEnd(event) {
-        if (!this.swipeable)
+        if (!this.swipeable || !this.$drawer)
             return;
-        requestAnimationFrame(_ => {
-            this.$drawer.removeAttribute('style');
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = this.$drawer) === null || _a === void 0 ? void 0 : _a.removeAttribute("style");
         });
         const deltaX = event.changedTouches[0].clientX - this.swipeX;
         if (this.isHorizontalSwipe && this.open)
             this.open = -50 > deltaX ? false : true;
         else if (this.isHorizontalSwipe && !this.open) {
-            console.log("bbb", deltaX, 50 < Math.abs(deltaX) ? true : false);
             this.open = 50 < deltaX ? true : false;
         }
         this.isHorizontalSwipe = false;
@@ -174,7 +190,7 @@ TkDrawer.styles = (0,external_lit_.css) `
 	`;
 __decorate([
     (0,decorators_js_.property)({ type: Boolean, reflect: true })
-], TkDrawer.prototype, "open", null);
+], TkDrawer.prototype, "open", void 0);
 __decorate([
     (0,decorators_js_.property)({ type: Boolean, reflect: true })
 ], TkDrawer.prototype, "over", void 0);
@@ -193,6 +209,15 @@ __decorate([
 __decorate([
     (0,decorators_js_.query)("div.drawer")
 ], TkDrawer.prototype, "$drawer", void 0);
+__decorate([
+    (0,decorators_js_.query)("div.drawer-content")
+], TkDrawer.prototype, "$content", void 0);
+__decorate([
+    (0,decorators_js_.state)()
+], TkDrawer.prototype, "contentScrolled", void 0);
+__decorate([
+    (0,decorators_js_.state)()
+], TkDrawer.prototype, "contentHasBottomShadow", void 0);
 __decorate([
     (0,decorators_js_.eventOptions)({ passive: true })
 ], TkDrawer.prototype, "touchStart", null);
@@ -217,7 +242,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), ["eventOptions"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.eventOptions), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query) });
+module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["eventOptions"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.eventOptions), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query), ["state"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.state) });
 
 /***/ })
 

package/icon/icon.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from "lit";
 import { TkBox } from "../box";
 export declare class TkIcon extends TkBox {
     static get styles(): import("lit").CSSResult[];
@@ -6,7 +7,7 @@ export declare class TkIcon extends TkBox {
     path: string;
     private svg;
     render(): import("lit").TemplateResult<1>;
-    updated(props: any): void;
+    protected updated(props: PropertyValues<TkIcon>): void;
     loadIcon(): Promise<void>;
 }
 declare global {

package/icon/index.js

@@ -339,29 +339,43 @@ let TkIcon = class TkIcon extends box/* TkBox */.P {
 		`;
     }
     updated(props) {
-        if (props.has("name") && this.name)
+        if ((props.has("name") || props.has("library")) && this.name && !this.path)
             this.loadIcon();
     }
     loadIcon() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (!this.name || this.path) {
+                this.svg = "";
+                return;
+            }
+            const name = this.name;
+            const library = this.library;
             const resolver = this.library
                 ? document.querySelector(`tk-icons[library=${this.library}]`)
                 : document.querySelector("tk-icons");
-            if (resolver) {
-                this.svg = yield fetch(resolver.resolve(this.name))
-                    .then(response => {
-                    return response.blob().then(blob => {
-                        return {
-                            contentType: response.headers.get("Content-Type"),
-                            raw: blob
-                        };
-                    });
-                })
-                    .then(data => {
-                    if (data.contentType && /svg/.test(data.contentType))
-                        return data.raw.text();
-                    return "";
-                });
+            if (!resolver) {
+                this.svg = "";
+                return;
+            }
+            try {
+                const response = yield fetch(resolver.resolve(name));
+                if (!response.ok) {
+                    this.svg = "";
+                    return;
+                }
+                const contentType = response.headers.get("Content-Type") || "";
+                if (!/svg/i.test(contentType)) {
+                    this.svg = "";
+                    return;
+                }
+                const svg = yield response.text();
+                // Ensure the props are still current to avoid race conditions
+                if (name === this.name && library === this.library && !this.path) {
+                    this.svg = svg;
+                }
+            }
+            catch (_e) {
+                this.svg = "";
             }
         });
     }
@@ -376,7 +390,7 @@ __decorate([
     (0,decorators_js_.property)()
 ], TkIcon.prototype, "path", void 0);
 __decorate([
-    (0,decorators_js_.property)()
+    (0,decorators_js_.state)()
 ], TkIcon.prototype, "svg", void 0);
 TkIcon = __decorate([
     (0,decorators_js_.customElement)("tk-icon")
@@ -393,7 +407,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) });
+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) });
 
 /***/ })