tinkiet 0.2.66 → 0.3.0

package/drawer/drawer.d.ts

@@ -5,8 +5,11 @@ declare class TkDrawer extends LitElement {
     over: boolean;
     openQuery: string;
     overQuery: string;
-    left: boolean;
+    right: boolean;
+    swipeable: boolean;
+    private $drawer;
     private mql;
+    private pointerListener;
     render(): import("lit-html").TemplateResult<1>;
     updated(props: any): void;
     protected overMediaQuery(): void;

package/drawer/drawer.js

@@ -1,17 +1,19 @@
 import { __decorate, __metadata } from 'tslib';
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { property, query, customElement } from 'lit/decorators.js';
 import css_248z from './drawer.scss.js';
+import { DIRECTION_HORIZONTAL, Pan, PointerListener, Tap } from 'contactjs';
 
 let TkDrawer = class TkDrawer extends LitElement {
     constructor() {
         super(...arguments);
         this.open = false;
         this.over = false;
-        this.left = false;
+        this.right = false;
+        this.swipeable = false;
     }
     render() {
-        return html `<div class="container"><slot name="drawer-container"></slot></div><div class="overlay" @click="${() => (this.open = false)}"></div><div class="drawer"><div class="drawer-header"><slot name="drawer-header"></slot></div><div class="drawer-content"><slot name="drawer-content"></slot></div><div class="drawer-footer"><slot name="drawer-footer"></slot></div></div>`;
+        return html `<div class="container fi"><slot name="drawer-container"></slot></div><div class="overlay" @click="${() => (this.open = false)}"></div><div class="drawer"><div class="drawer-header"><slot name="drawer-header"></slot></div><div class="drawer-content"><slot name="drawer-content"></slot></div><div class="drawer-footer"><slot name="drawer-footer"></slot></div></div>`;
     }
     updated(props) {
         if (props.has("open") && this.open)
@@ -24,7 +26,49 @@ let TkDrawer = class TkDrawer extends LitElement {
             if (window.matchMedia(this.openQuery).matches)
                 this.show();
         }
-        ;
+        if (props.has("swipeable") && this.swipeable) {
+            var panOptions = {
+                supportedDirections: DIRECTION_HORIZONTAL,
+                bubbles: false
+            };
+            var panRecognizer = new Pan(this.$drawer, panOptions);
+            this.pointerListener = new PointerListener(this.$drawer, {
+                DEBUG: true,
+                DEBUG_CONTACT: true,
+                DEBUG_GESTURES: true,
+                // handleTouchEvents : false,
+                supportedGestures: [Tap, panRecognizer],
+                bubbles: false
+            });
+            this.$drawer.addEventListener("tap", (event) => {
+                const { x, y } = event.detail.live.srcEvent;
+                const el = this.shadowRoot?.elementFromPoint(x, y);
+                if (el)
+                    el.click();
+            });
+            this.$drawer.addEventListener("panstart", (event) => {
+                this.$drawer.style.transition = "transform 0ms ease";
+            });
+            this.$drawer.addEventListener("pan", (event) => {
+                var x = event.detail.global.deltaX > 0 ? 0 : event.detail.global.deltaX;
+                var y = 0;
+                var transformString = "translate3d(" + x + "px, " + y + "px, 0)";
+                requestAnimationFrame(_ => {
+                    this.$drawer.style.transform = transformString;
+                });
+            });
+            this.$drawer.addEventListener("panend", (event) => {
+                requestAnimationFrame(_ => {
+                    this.$drawer.style.transition = "";
+                    this.$drawer.style.transform = "";
+                    this.open = event.detail.global.deltaX < -50 ? false : true;
+                });
+            });
+        }
+        if (props.has("swipeable") && !this.swipeable) {
+            this.pointerListener && this.pointerListener.destroy();
+            this.pointerListener = null;
+        }
     }
     overMediaQuery() {
         if (this.mql)
@@ -37,7 +81,7 @@ let TkDrawer = class TkDrawer extends LitElement {
         e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
     }
     hideIfOver() {
-        if (this.overQuery && this.mql?.matches || this.over)
+        if ((this.overQuery && this.mql?.matches) || this.over)
             this.open = false;
     }
     show() {
@@ -70,7 +114,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)
-], TkDrawer.prototype, "left", void 0);
+], TkDrawer.prototype, "right", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], TkDrawer.prototype, "swipeable", void 0);
+__decorate([
+    query("div.drawer"),
+    __metadata("design:type", HTMLElement)
+], TkDrawer.prototype, "$drawer", void 0);
 TkDrawer = __decorate([
     customElement("tk-drawer")
 ], TkDrawer);

package/drawer/drawer.scss.js

@@ -1,4 +1,4 @@
-var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .container{overflow:hidden}:host([left]) .drawer{right:0;transform:translateX(100%)}:host([open]:not([left])) .drawer{transform:none}:host([open]:not([left])) .container{padding-left:var(--drawer-width)}:host([open][left]) .drawer{transform:none}:host([open][left]) .container{padding-right:var(--drawer-width)}:host([open][over]:not([left])) .container{padding-left:0}:host([open][over]:not([left])) .overlay{display:block}:host([open][over][left]) .container{padding-right:0}:host([open][over][left]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
-var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .container{overflow:hidden}:host([left]) .drawer{right:0;transform:translateX(100%)}:host([open]:not([left])) .drawer{transform:none}:host([open]:not([left])) .container{padding-left:var(--drawer-width)}:host([open][left]) .drawer{transform:none}:host([open][left]) .container{padding-right:var(--drawer-width)}:host([open][over]:not([left])) .container{padding-left:0}:host([open][over]:not([left])) .overlay{display:block}:host([open][over][left]) .container{padding-right:0}:host([open][over][left]) .overlay{display:block}@media (max-width:var(--drawer-trigger-width,400px)){:host([open]) .container{padding-left:0}:host([open]) .overlay{display:block}}";
+var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;touch-action:pan-y;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([right]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width)}: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}}";
+var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{display:block;height:100%;overflow:hidden;position:relative;width:100%}.drawer{background-color:var(--background,#f7f7f7);color:var(--foreground,#454545);display:flex;flex-direction:column;height:100%;overflow:scroll;position:absolute;top:0;touch-action:pan-y;transform:translateX(-100%);transition:transform cubic-bezier(.4,0,.2,1) var(--transition-duration-medium,.18s);width:var(--drawer-width,256px);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([right]) .drawer{right:0;transform:translateX(100%)}.overlay{background-color:#00000080;bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:var(--drawer-overlay-z-index,200)}.container{background-color:var(--background,#f7f7f7);height:100%;overflow:scroll;transition:padding cubic-bezier(.4,0,.2,1) var(--transition-duration-slow,.25s)}:host([open]) .drawer{transform:none}:host([open]) .container{padding-left:var(--drawer-width)}: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}}";
 
 export { css_248z as default, stylesheet };

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

@@ -4,12 +4,13 @@ declare class TkListItem extends LitElement {
     href: string;
     target: string;
     ariaLabel: string;
+    protected $ahref: HTMLAnchorElement;
     render(): import("lit-html").TemplateResult<1>;
     constructor();
     firstUpdated(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private handleClick;
+    protected handleClick(e: Event): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/list-item/list-item.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from 'tslib';
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { property, query, customElement } from 'lit/decorators.js';
 import css_248z from './list-item.scss.js';
 
 let TkListItem = class TkListItem extends LitElement {
@@ -11,7 +11,7 @@ let TkListItem = class TkListItem extends LitElement {
     }
     render() {
         return html `<slot name="before"></slot><div id="content"><slot></slot></div><slot name="after"></slot>${this.href
-            ? html `<a tabindex="-1" id="link" href="${this.href}" rel="noreferrer" aria-label="${this.ariaLabel}"></a>`
+            ? html `<a tabindex="-1" id="ahref" href="${this.href}" rel="noreferrer" aria-label="${this.ariaLabel}"></a>`
             : ""}`;
     }
     firstUpdated() {
@@ -20,17 +20,20 @@ let TkListItem = class TkListItem extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("click", () => this.handleClick());
+        this.addEventListener("click", this.handleClick.bind(this));
     }
     disconnectedCallback() {
         this.removeEventListener("click", this.handleClick);
         super.disconnectedCallback();
     }
-    handleClick() {
-        if (this.href && this.target)
-            window.open(this.href, this.target, "noopener noreferrer");
-        else if (this.href)
-            this.shadowRoot?.querySelector("#link")?.click();
+    handleClick(e) {
+        if (this.querySelector("button") && e.target == this.querySelector("button"))
+            return;
+        if (this.$ahref && e.target == this.$ahref)
+            return;
+        if (this.href) {
+            this.$ahref.click();
+        }
     }
 };
 TkListItem.styles = css `${unsafeCSS(css_248z)}`;
@@ -46,6 +49,10 @@ __decorate([
     property({ attribute: "aria-label" }),
     __metadata("design:type", String)
 ], TkListItem.prototype, "ariaLabel", void 0);
+__decorate([
+    query("#ahref"),
+    __metadata("design:type", HTMLAnchorElement)
+], TkListItem.prototype, "$ahref", void 0);
 TkListItem = __decorate([
     customElement("tk-list-item"),
     __metadata("design:paramtypes", [])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinkiet",
-  "version": "0.2.66",
+  "version": "0.3.0",
   "description": "Pragmatic UI Web Components",
   "main": "index.js",
   "module": "index.js",
@@ -26,7 +26,8 @@
   "license": "MIT",
   "homepage": "https://tinkiet.educ.cloud",
   "dependencies": {
-    "lit": "^2.0.2",
+    "contactjs": "^1.4.0",
+    "lit": "^2.2.1",
     "tslib": "^2.3.1"
   },
   "contributors": [

package/select/select.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from 'tslib';
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, eventOptions, customElement } from 'lit/decorators.js';
+import { property, state, eventOptions, customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '../box/index.js';
 import { uniqueID } from '../utils/unique.js';
@@ -85,7 +85,7 @@ __decorate([
     __metadata("design:type", String)
 ], TkSelect.prototype, "pattern", void 0);
 __decorate([
-    property({ type: String, attribute: "value" }),
+    state(),
     __metadata("design:type", String)
 ], TkSelect.prototype, "initialValue", void 0);
 __decorate([

package/textarea/textarea.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from 'tslib';
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, eventOptions, customElement } from 'lit/decorators.js';
+import { property, state, eventOptions, customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { uniqueID } from '../utils/unique.js';
 import css_248z from './textarea.scss.js';
@@ -90,7 +90,7 @@ __decorate([
     __metadata("design:type", String)
 ], TkTextarea.prototype, "pattern", void 0);
 __decorate([
-    property({ type: String }),
+    state(),
     __metadata("design:type", String)
 ], TkTextarea.prototype, "initialValue", void 0);
 __decorate([

package/textfield/textfield.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from 'tslib';
+import { property, state, eventOptions, customElement } from 'lit/decorators.js';
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import { property, eventOptions, customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { uniqueID } from '../utils/unique.js';
 import css_248z from './textfield.scss.js';
@@ -89,7 +89,7 @@ __decorate([
     __metadata("design:type", String)
 ], TkTextfield.prototype, "pattern", void 0);
 __decorate([
-    property({ type: String, attribute: "value" }),
+    state(),
     __metadata("design:type", String)
 ], TkTextfield.prototype, "initialValue", void 0);
 __decorate([

package/theme/theme.d.ts

@@ -11,6 +11,7 @@ declare class TkTheme extends LitElement {
     onError: string;
     foreground: string;
     background: string;
+    forceBody: boolean;
     inverted: boolean;
     render(): import("lit-html").TemplateResult<1>;
     updated(): void;
@@ -22,6 +23,7 @@ declare class TkTheme extends LitElement {
     turnThemeToNonInverted(): void;
     private hexToHSL;
     private setThemeColor;
+    private setBodyStyle;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/theme/theme.js

@@ -16,6 +16,7 @@ let TkTheme = class TkTheme extends LitElement {
         this.onError = "#FFFFFF";
         this.foreground = "#FFFFFF";
         this.background = "#000";
+        this.forceBody = false;
         this.inverted = false;
     }
     render() {
@@ -54,9 +55,11 @@ let TkTheme = class TkTheme extends LitElement {
     }
     turnThemeToInverted() {
         this.inverted = true;
+        this.forceBody && this.setBodyStyle();
     }
     turnThemeToNonInverted() {
         this.inverted = false;
+        this.forceBody && this.setBodyStyle();
     }
     hexToHSL(hex) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
@@ -124,6 +127,17 @@ let TkTheme = class TkTheme extends LitElement {
         this.style.setProperty("--theme-foreground", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
         const background = this.hexToHSL(this.background);
         this.style.setProperty("--theme-background", `hsl(${background[0]},${background[1]},${background[2]})`);
+        this.forceBody && this.setBodyStyle();
+    }
+    setBodyStyle() {
+        let foreground = this.hexToHSL(this.foreground);
+        let background = this.hexToHSL(this.background);
+        if (this.inverted) {
+            foreground = this.hexToHSL(this.background);
+            background = this.hexToHSL(this.foreground);
+        }
+        document.body.style.setProperty("background", `hsl(${background[0]},${background[1]},${background[2]})`);
+        document.body.style.setProperty("color", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
     }
 };
 TkTheme.styles = css `${unsafeCSS(css_248z)}`;
@@ -167,6 +181,10 @@ __decorate([
     property(),
     __metadata("design:type", String)
 ], TkTheme.prototype, "background", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "force-body", reflect: true }),
+    __metadata("design:type", Boolean)
+], TkTheme.prototype, "forceBody", void 0);
 __decorate([
     property({ type: Boolean, attribute: true, reflect: true }),
     __metadata("design:type", Boolean)

package/umd/tinkiet.min.d.ts

@@ -210,8 +210,11 @@ declare class TkDrawer extends LitElement {
     over: boolean;
     openQuery: string;
     overQuery: string;
-    left: boolean;
+    right: boolean;
+    swipeable: boolean;
+    private $drawer;
     private mql;
+    private pointerListener;
     render(): import("lit-html").TemplateResult<1>;
     updated(props: any): void;
     protected overMediaQuery(): void;
@@ -251,12 +254,13 @@ declare class TkListItem extends LitElement {
     href: string;
     target: string;
     ariaLabel: string;
+    protected $ahref: HTMLAnchorElement;
     render(): import("lit-html").TemplateResult<1>;
     constructor();
     firstUpdated(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private handleClick;
+    protected handleClick(e: Event): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -579,6 +583,7 @@ declare class TkTheme extends LitElement {
     onError: string;
     foreground: string;
     background: string;
+    forceBody: boolean;
     inverted: boolean;
     render(): import("lit-html").TemplateResult<1>;
     updated(): void;
@@ -590,6 +595,7 @@ declare class TkTheme extends LitElement {
     turnThemeToNonInverted(): void;
     private hexToHSL;
     private setThemeColor;
+    private setBodyStyle;
 }
 declare global {
     interface HTMLElementTagNameMap {