tinkiet 0.2.64 → 0.2.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/drawer/drawer.d.ts +3 -0
  2. package/drawer/drawer.js +43 -4
  3. package/drawer/drawer.scss.js +2 -2
  4. package/list-item/list-item.d.ts +2 -1
  5. package/list-item/list-item.js +15 -8
  6. package/package.json +2 -1
  7. package/theme/theme.d.ts +2 -0
  8. package/theme/theme.js +18 -0
  9. package/umd/tinkiet.min.d.ts +7 -1
  10. package/umd/tinkiet.min.js +332 -14
package/drawer/drawer.d.ts CHANGED
@@ -6,7 +6,10 @@ declare class TkDrawer extends LitElement {
6
6
  openQuery: string;
7
7
  overQuery: string;
8
8
  left: boolean;
9
+ swipeable: boolean;
10
+ private $drawer;
9
11
  private mql;
12
+ private pointerListener;
10
13
  render(): import("lit-html").TemplateResult<1>;
11
14
  updated(props: any): void;
12
15
  protected overMediaQuery(): void;
package/drawer/drawer.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
2
  import { LitElement, html, css, unsafeCSS } from 'lit';
3
- import { property, customElement } from 'lit/decorators.js';
3
+ import { property, query, customElement } from 'lit/decorators.js';
4
4
  import css_248z from './drawer.scss.js';
5
+ import { PointerListener, Tap, Pan } from 'contactjs';
5
6
 
6
7
  let TkDrawer = class TkDrawer extends LitElement {
7
8
  constructor() {
@@ -9,9 +10,10 @@ let TkDrawer = class TkDrawer extends LitElement {
9
10
  this.open = false;
10
11
  this.over = false;
11
12
  this.left = false;
13
+ this.swipeable = false;
12
14
  }
13
15
  render() {
14
- 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>`;
16
+ 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>`;
15
17
  }
16
18
  updated(props) {
17
19
  if (props.has("open") && this.open)
@@ -24,7 +26,36 @@ let TkDrawer = class TkDrawer extends LitElement {
24
26
  if (window.matchMedia(this.openQuery).matches)
25
27
  this.show();
26
28
  }
27
- ;
29
+ if (props.has("swipeable") && this.swipeable) {
30
+ this.pointerListener = new PointerListener(this.$drawer, {
31
+ supportedGestures: [Tap, Pan],
32
+ bubbles: false
33
+ });
34
+ this.$drawer.addEventListener("tap", (event) => {
35
+ const { x, y } = event.detail.live.srcEvent;
36
+ const el = this.shadowRoot?.elementFromPoint(x, y);
37
+ if (el)
38
+ el.click();
39
+ });
40
+ this.$drawer.addEventListener("pan", (event) => {
41
+ var x = event.detail.global.deltaX > 0 ? 0 : event.detail.global.deltaX;
42
+ var y = 0;
43
+ var transformString = "translate3d(" + x + "px, " + y + "px, 0)";
44
+ requestAnimationFrame(_ => {
45
+ this.$drawer.style.transform = transformString;
46
+ });
47
+ });
48
+ this.$drawer.addEventListener("panend", (event) => {
49
+ requestAnimationFrame(_ => {
50
+ this.$drawer.style.transform = "";
51
+ this.open = event.detail.global.deltaX < -50 ? false : true;
52
+ });
53
+ });
54
+ }
55
+ if (props.has("swipeable") && !this.swipeable) {
56
+ this.pointerListener && this.pointerListener.destroy();
57
+ this.pointerListener = null;
58
+ }
28
59
  }
29
60
  overMediaQuery() {
30
61
  if (this.mql)
@@ -37,7 +68,7 @@ let TkDrawer = class TkDrawer extends LitElement {
37
68
  e.matches ? this.setAttribute("over", "") : this.removeAttribute("over");
38
69
  }
39
70
  hideIfOver() {
40
- if (this.overQuery && this.mql?.matches || this.over)
71
+ if ((this.overQuery && this.mql?.matches) || this.over)
41
72
  this.open = false;
42
73
  }
43
74
  show() {
@@ -71,6 +102,14 @@ __decorate([
71
102
  property({ type: Boolean, reflect: true }),
72
103
  __metadata("design:type", Boolean)
73
104
  ], TkDrawer.prototype, "left", void 0);
105
+ __decorate([
106
+ property({ type: Boolean, reflect: true }),
107
+ __metadata("design:type", Boolean)
108
+ ], TkDrawer.prototype, "swipeable", void 0);
109
+ __decorate([
110
+ query("div.drawer"),
111
+ __metadata("design:type", HTMLElement)
112
+ ], TkDrawer.prototype, "$drawer", void 0);
74
113
  TkDrawer = __decorate([
75
114
  customElement("tk-drawer")
76
115
  ], TkDrawer);
package/drawer/drawer.scss.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--drawer-width:256px;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);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([left]) .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}}";
2
- var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--drawer-width:256px;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);will-change:transform;z-index:var(--drawer-z-index,200)}.drawer .drawer-content{flex:1;overflow:scroll}:host([left]) .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}}";
1
+ 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}:host([left]) .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}}";
2
+ 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}:host([left]) .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}}";
3
3
 
4
4
  export { css_248z as default, stylesheet };
package/list-item/list-item.d.ts CHANGED
@@ -4,12 +4,13 @@ declare class TkListItem extends LitElement {
4
4
  href: string;
5
5
  target: string;
6
6
  ariaLabel: string;
7
+ protected $ahref: HTMLAnchorElement;
7
8
  render(): import("lit-html").TemplateResult<1>;
8
9
  constructor();
9
10
  firstUpdated(): void;
10
11
  connectedCallback(): void;
11
12
  disconnectedCallback(): void;
12
- private handleClick;
13
+ protected handleClick(e: Event): void;
13
14
  }
14
15
  declare global {
15
16
  interface HTMLElementTagNameMap {
package/list-item/list-item.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { __decorate, __metadata } from 'tslib';
2
2
  import { LitElement, html, css, unsafeCSS } from 'lit';
3
- import { property, customElement } from 'lit/decorators.js';
3
+ import { property, query, customElement } from 'lit/decorators.js';
4
4
  import css_248z from './list-item.scss.js';
5
5
 
6
6
  let TkListItem = class TkListItem extends LitElement {
@@ -11,7 +11,7 @@ let TkListItem = class TkListItem extends LitElement {
11
11
  }
12
12
  render() {
13
13
  return html `<slot name="before"></slot><div id="content"><slot></slot></div><slot name="after"></slot>${this.href
14
- ? html `<a tabindex="-1" id="link" href="${this.href}" rel="noreferrer" aria-label="${this.ariaLabel}"></a>`
14
+ ? html `<a tabindex="-1" id="ahref" href="${this.href}" rel="noreferrer" aria-label="${this.ariaLabel}"></a>`
15
15
  : ""}`;
16
16
  }
17
17
  firstUpdated() {
@@ -20,17 +20,20 @@ let TkListItem = class TkListItem extends LitElement {
20
20
  }
21
21
  connectedCallback() {
22
22
  super.connectedCallback();
23
- this.addEventListener("click", () => this.handleClick());
23
+ this.addEventListener("click", this.handleClick.bind(this));
24
24
  }
25
25
  disconnectedCallback() {
26
26
  this.removeEventListener("click", this.handleClick);
27
27
  super.disconnectedCallback();
28
28
  }
29
- handleClick() {
30
- if (this.href && this.target)
31
- window.open(this.href, this.target, "noopener noreferrer");
32
- else if (this.href)
33
- this.shadowRoot?.querySelector("#link")?.click();
29
+ handleClick(e) {
30
+ if (this.querySelector("button") && e.target == this.querySelector("button"))
31
+ return;
32
+ if (this.$ahref && e.target == this.$ahref)
33
+ return;
34
+ if (this.href) {
35
+ this.$ahref.click();
36
+ }
34
37
  }
35
38
  };
36
39
  TkListItem.styles = css `${unsafeCSS(css_248z)}`;
@@ -46,6 +49,10 @@ __decorate([
46
49
  property({ attribute: "aria-label" }),
47
50
  __metadata("design:type", String)
48
51
  ], TkListItem.prototype, "ariaLabel", void 0);
52
+ __decorate([
53
+ query("#ahref"),
54
+ __metadata("design:type", HTMLAnchorElement)
55
+ ], TkListItem.prototype, "$ahref", void 0);
49
56
  TkListItem = __decorate([
50
57
  customElement("tk-list-item"),
51
58
  __metadata("design:paramtypes", [])
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tinkiet",
3
- "version": "0.2.64",
3
+ "version": "0.2.80",
4
4
  "description": "Pragmatic UI Web Components",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -26,6 +26,7 @@
26
26
  "license": "MIT",
27
27
  "homepage": "https://tinkiet.educ.cloud",
28
28
  "dependencies": {
29
+ "contactjs": "^1.4.0",
29
30
  "lit": "^2.0.2",
30
31
  "tslib": "^2.3.1"
31
32
  },
package/theme/theme.d.ts CHANGED
@@ -11,6 +11,7 @@ declare class TkTheme extends LitElement {
11
11
  onError: string;
12
12
  foreground: string;
13
13
  background: string;
14
+ forceBody: boolean;
14
15
  inverted: boolean;
15
16
  render(): import("lit-html").TemplateResult<1>;
16
17
  updated(): void;
@@ -22,6 +23,7 @@ declare class TkTheme extends LitElement {
22
23
  turnThemeToNonInverted(): void;
23
24
  private hexToHSL;
24
25
  private setThemeColor;
26
+ private setBodyStyle;
25
27
  }
26
28
  declare global {
27
29
  interface HTMLElementTagNameMap {
package/theme/theme.js CHANGED
@@ -16,6 +16,7 @@ let TkTheme = class TkTheme extends LitElement {
16
16
  this.onError = "#FFFFFF";
17
17
  this.foreground = "#FFFFFF";
18
18
  this.background = "#000";
19
+ this.forceBody = false;
19
20
  this.inverted = false;
20
21
  }
21
22
  render() {
@@ -54,9 +55,11 @@ let TkTheme = class TkTheme extends LitElement {
54
55
  }
55
56
  turnThemeToInverted() {
56
57
  this.inverted = true;
58
+ this.forceBody && this.setBodyStyle();
57
59
  }
58
60
  turnThemeToNonInverted() {
59
61
  this.inverted = false;
62
+ this.forceBody && this.setBodyStyle();
60
63
  }
61
64
  hexToHSL(hex) {
62
65
  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 {
124
127
  this.style.setProperty("--theme-foreground", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
125
128
  const background = this.hexToHSL(this.background);
126
129
  this.style.setProperty("--theme-background", `hsl(${background[0]},${background[1]},${background[2]})`);
130
+ this.forceBody && this.setBodyStyle();
131
+ }
132
+ setBodyStyle() {
133
+ let foreground = this.hexToHSL(this.foreground);
134
+ let background = this.hexToHSL(this.background);
135
+ if (this.inverted) {
136
+ foreground = this.hexToHSL(this.background);
137
+ background = this.hexToHSL(this.foreground);
138
+ }
139
+ document.body.style.setProperty("background", `hsl(${background[0]},${background[1]},${background[2]})`);
140
+ document.body.style.setProperty("color", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
127
141
  }
128
142
  };
129
143
  TkTheme.styles = css `${unsafeCSS(css_248z)}`;
@@ -167,6 +181,10 @@ __decorate([
167
181
  property(),
168
182
  __metadata("design:type", String)
169
183
  ], TkTheme.prototype, "background", void 0);
184
+ __decorate([
185
+ property({ type: Boolean, attribute: "force-body", reflect: true }),
186
+ __metadata("design:type", Boolean)
187
+ ], TkTheme.prototype, "forceBody", void 0);
170
188
  __decorate([
171
189
  property({ type: Boolean, attribute: true, reflect: true }),
172
190
  __metadata("design:type", Boolean)
package/umd/tinkiet.min.d.ts CHANGED
@@ -211,7 +211,10 @@ declare class TkDrawer extends LitElement {
211
211
  openQuery: string;
212
212
  overQuery: string;
213
213
  left: boolean;
214
+ swipeable: boolean;
215
+ private $drawer;
214
216
  private mql;
217
+ private pointerListener;
215
218
  render(): import("lit-html").TemplateResult<1>;
216
219
  updated(props: any): void;
217
220
  protected overMediaQuery(): void;
@@ -251,12 +254,13 @@ declare class TkListItem extends LitElement {
251
254
  href: string;
252
255
  target: string;
253
256
  ariaLabel: string;
257
+ protected $ahref: HTMLAnchorElement;
254
258
  render(): import("lit-html").TemplateResult<1>;
255
259
  constructor();
256
260
  firstUpdated(): void;
257
261
  connectedCallback(): void;
258
262
  disconnectedCallback(): void;
259
- private handleClick;
263
+ protected handleClick(e: Event): void;
260
264
  }
261
265
  declare global {
262
266
  interface HTMLElementTagNameMap {
@@ -579,6 +583,7 @@ declare class TkTheme extends LitElement {
579
583
  onError: string;
580
584
  foreground: string;
581
585
  background: string;
586
+ forceBody: boolean;
582
587
  inverted: boolean;
583
588
  render(): import("lit-html").TemplateResult<1>;
584
589
  updated(): void;
@@ -590,6 +595,7 @@ declare class TkTheme extends LitElement {
590
595
  turnThemeToNonInverted(): void;
591
596
  private hexToHSL;
592
597
  private setThemeColor;
598
+ private setBodyStyle;
593
599
  }
594
600
  declare global {
595
601
  interface HTMLElementTagNameMap {