tinkiet 0.5.0 → 0.6.0
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.
- package/accordion/accordion.js +36 -2
- package/badge/badge.js +3 -1
- package/box/box.js +6 -2
- package/button/button.js +28 -8
- package/button/button.scss.js +2 -2
- package/checkbox/checkbox.js +26 -3
- package/dialog/dialog.js +14 -5
- package/drawer/drawer.js +23 -6
- package/drawer/drawer.scss.js +2 -2
- package/form/form.d.ts +1 -1
- package/icon/icon.js +12 -4
- package/list-item/list-item.js +16 -6
- package/loading/loading.d.ts +1 -0
- package/loading/loading.js +30 -4
- package/navbar/navbar.js +12 -2
- package/notie/notie.js +40 -12
- package/notie/notie.scss.js +2 -2
- package/package.json +4 -4
- package/pages/pages.js +7 -3
- package/progress/progress.js +14 -6
- package/radio/radio.js +27 -3
- package/select/select.js +31 -3
- package/slider/slider.js +49 -5
- package/slider/slider.scss.js +2 -2
- package/switch/switch.js +26 -3
- package/tab-group/tab-group.js +16 -5
- package/tag/tag.js +7 -3
- package/textarea/textarea.js +32 -3
- package/textfield/textfield.js +33 -3
- package/theme/theme.js +7 -3
- package/umd/tinkiet.min.d.ts +2 -1
- package/umd/tinkiet.min.js +1 -1
package/accordion/accordion.js
CHANGED
|
@@ -16,11 +16,45 @@ let TkAccordion = class TkAccordion extends TkFocusableBox {
|
|
|
16
16
|
static get styles() {
|
|
17
17
|
return [
|
|
18
18
|
...TkBox.styles,
|
|
19
|
-
css
|
|
19
|
+
css `
|
|
20
|
+
${unsafeCSS(css_248z)}
|
|
21
|
+
`
|
|
20
22
|
];
|
|
21
23
|
}
|
|
22
24
|
render() {
|
|
23
|
-
return html
|
|
25
|
+
return html `
|
|
26
|
+
<tk-box margin="small">
|
|
27
|
+
<tk-box
|
|
28
|
+
@click=${this.handleClick.bind(this)}
|
|
29
|
+
?ripple=${this.rippleHeader}
|
|
30
|
+
class="header"
|
|
31
|
+
direction="row"
|
|
32
|
+
align-items="center"
|
|
33
|
+
>
|
|
34
|
+
<tk-box class="before">
|
|
35
|
+
<slot name="before"></slot>
|
|
36
|
+
</tk-box>
|
|
37
|
+
<tk-box class="header-content">
|
|
38
|
+
<h3 class="title"><slot name="title"></slot></h3>
|
|
39
|
+
<h5><slot name="description"></slot></h5>
|
|
40
|
+
</tk-box>
|
|
41
|
+
</tk-box>
|
|
42
|
+
<tk-box class="content">
|
|
43
|
+
<slot></slot>
|
|
44
|
+
</tk-box>
|
|
45
|
+
</tk-box>
|
|
46
|
+
<input
|
|
47
|
+
id=${this.id}
|
|
48
|
+
slot="none"
|
|
49
|
+
style="display: none;"
|
|
50
|
+
type="radio"
|
|
51
|
+
?checked="${this.checked}"
|
|
52
|
+
?disabled="${this.disabled}"
|
|
53
|
+
name="${ifDefined(this.name)}"
|
|
54
|
+
aria-hidden="true"
|
|
55
|
+
tabindex="-1"
|
|
56
|
+
/>
|
|
57
|
+
`;
|
|
24
58
|
}
|
|
25
59
|
firstUpdated() {
|
|
26
60
|
this.appendChild(this.$input);
|
package/badge/badge.js
CHANGED
package/box/box.js
CHANGED
|
@@ -81,11 +81,15 @@ let TkBox = class TkBox extends LitElement {
|
|
|
81
81
|
}
|
|
82
82
|
static get styles() {
|
|
83
83
|
return [
|
|
84
|
-
css
|
|
84
|
+
css `
|
|
85
|
+
${unsafeCSS(css_248z)}
|
|
86
|
+
`
|
|
85
87
|
];
|
|
86
88
|
}
|
|
87
89
|
render() {
|
|
88
|
-
return html
|
|
90
|
+
return html `
|
|
91
|
+
<slot></slot>
|
|
92
|
+
`;
|
|
89
93
|
}
|
|
90
94
|
connectedCallback() {
|
|
91
95
|
if (this.ripple) {
|
package/button/button.js
CHANGED
|
@@ -33,13 +33,35 @@ let TkButton = class TkButton extends TkBox {
|
|
|
33
33
|
static get styles() {
|
|
34
34
|
return [
|
|
35
35
|
...TkBox.styles,
|
|
36
|
-
css
|
|
36
|
+
css `
|
|
37
|
+
${unsafeCSS(css_248z)}
|
|
38
|
+
`
|
|
37
39
|
];
|
|
38
40
|
}
|
|
39
41
|
render() {
|
|
40
|
-
return html
|
|
41
|
-
|
|
42
|
-
|
|
42
|
+
return html `
|
|
43
|
+
<div class="before">
|
|
44
|
+
<slot name="before"></slot>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="content">
|
|
47
|
+
<slot></slot>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="after">
|
|
50
|
+
<slot name="after"></slot>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="badge-in">
|
|
53
|
+
<slot name="badge-in"></slot>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="badge-out">
|
|
56
|
+
<slot name="badge-out"></slot>
|
|
57
|
+
</div>
|
|
58
|
+
${this.href
|
|
59
|
+
? html `
|
|
60
|
+
<a tabindex="-1" hidden id="ahref" href="${this.href}" target="${ifDefined(this.target)}" rel="noreferrer"></a>
|
|
61
|
+
`
|
|
62
|
+
: ""}
|
|
63
|
+
<button id=${this._id} hidden type="${ifDefined(this.type)}"></button>
|
|
64
|
+
`;
|
|
43
65
|
}
|
|
44
66
|
connectedCallback() {
|
|
45
67
|
super.connectedCallback();
|
|
@@ -67,15 +89,13 @@ let TkButton = class TkButton extends TkBox {
|
|
|
67
89
|
this.appendChild(this.$button);
|
|
68
90
|
}
|
|
69
91
|
handleClick(e) {
|
|
70
|
-
const target = e.target;
|
|
71
|
-
console.log(target, e);
|
|
72
92
|
if (this.href && e.isTrusted) {
|
|
73
93
|
e.stopPropagation();
|
|
74
94
|
e.preventDefault();
|
|
75
95
|
this.$ahref.click();
|
|
76
96
|
}
|
|
77
|
-
else if (this.type == "submit" || this.type == "reset") {
|
|
78
|
-
this.querySelector("button")?.
|
|
97
|
+
else if (e.isTrusted && this.type == "submit" || this.type == "reset") {
|
|
98
|
+
this.querySelector("button")?.click();
|
|
79
99
|
}
|
|
80
100
|
}
|
|
81
101
|
};
|
package/button/button.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{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));--color-darker:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background-color:var(--color);border:1px solid var(--color);border-radius:var(--border-radius-medium,.25rem);box-sizing:border-box;color:var(--text);cursor:pointer;display:inline-flex;flex-direction:row;font-family:Roboto,sans-serif;
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));--color-darker:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background-color:var(--color);border:1px solid var(--color);border-radius:var(--border-radius-medium,.25rem);box-sizing:border-box;color:var(--text);cursor:pointer;display:inline-flex;flex-direction:row;font-family:Roboto,sans-serif;
|
|
1
|
+
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));--color-darker:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background-color:var(--color);border:1px solid var(--color);border-radius:var(--border-radius-medium,.25rem);box-sizing:border-box;color:var(--text);cursor:pointer;display:inline-flex;flex-direction:row;font-family:Roboto,sans-serif;justify-content:center;letter-spacing:.8px;padding:var(--spacing-s,.5rem) var(--spacing-m,1rem);position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;user-select:none;vertical-align:middle}:host .content{align-items:center;display:flex;pointer-events:none}:host .before{align-items:center;display:flex}:host .before ::slotted(*){margin-right:var(--spacing-s,.5rem)}:host .after{align-items:center;display:flex}:host .after ::slotted(*){margin-left:var(--spacing-s,.5rem)}:host .badge-out{display:flex;pointer-events:none;position:absolute;right:-.8em;top:-.7em}:host .badge-in{display:flex;pointer-events:none;position:absolute;right:2px;top:2px}:host(:focus){outline:none}:host(:focus),:host(:hover){--color:var(--primary-light,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.15)))}:host(:active){--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));--text:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]:focus),:host([inverted]:hover){--color:#0000001a}:host([inverted]:active){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)))}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--color-darker:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent]:focus),:host([accent]:hover){--color:var(--accent-light,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),calc(var(--accent-l, 72.7451%)*1.15)))}:host([accent]:active){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)));--text:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]:focus),:host([accent][inverted]:hover){--color:#0000001a}:host([accent][inverted]:active){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}:host([outlined]){background:var(--background,#f7f7f7) radial-gradient(circle,#0000 1%,var(--background,#f7f7f7) 1%) center/15000%;color:var(--color)}:host([pill]){border-radius:var(--border-radius-pill,9999px)}:host([small]){font-size:.8em;height:28px;line-height:.9em;padding:0 var(--spacing-s,.5rem)}:host([small]) .before ::slotted(*){margin-right:var(--spacing-xs,.25rem)}:host([small]) .after ::slotted(*){margin-left:var(--spacing-xs,.25rem)}:host([fab]){align-items:center;border-radius:50%;box-shadow:var(--elevation-1,0 1px 2px var(--shadow));height:40px;justify-content:center;line-height:normal;overflow:hidden;padding:0;width:40px}:host([fab]):hover{box-shadow:var(--elevation-3,0 4px 8px var(--shadow))}:host([fab][small]){font-size:.75em;height:30px;width:30px}:host([flat]){box-shadow:none}:host([flat]):hover{box-shadow:none}:host([disabled]),:host([disabled][accent]){--text:var(--button-color-disabled,var(--shade-lighter));--color:var(--button-bg-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));box-shadow:none;cursor:default;pointer-events:none}";
|
|
2
|
+
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));--color-darker:var(--primary-darker,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*0.7)));--text:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));align-items:center;background-color:var(--color);border:1px solid var(--color);border-radius:var(--border-radius-medium,.25rem);box-sizing:border-box;color:var(--text);cursor:pointer;display:inline-flex;flex-direction:row;font-family:Roboto,sans-serif;justify-content:center;letter-spacing:.8px;padding:var(--spacing-s,.5rem) var(--spacing-m,1rem);position:relative;text-align:center;text-decoration:none;text-overflow:ellipsis;user-select:none;vertical-align:middle}:host .content{align-items:center;display:flex;pointer-events:none}:host .before{align-items:center;display:flex}:host .before ::slotted(*){margin-right:var(--spacing-s,.5rem)}:host .after{align-items:center;display:flex}:host .after ::slotted(*){margin-left:var(--spacing-s,.5rem)}:host .badge-out{display:flex;pointer-events:none;position:absolute;right:-.8em;top:-.7em}:host .badge-in{display:flex;pointer-events:none;position:absolute;right:2px;top:2px}:host(:focus){outline:none}:host(:focus),:host(:hover){--color:var(--primary-light,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.15)))}:host(:active){--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));--text:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)))}:host([inverted]:focus),:host([inverted]:hover){--color:#0000001a}:host([inverted]:active){--color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)))}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)));--color-darker:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent]:focus),:host([accent]:hover){--color:var(--accent-light,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),calc(var(--accent-l, 72.7451%)*1.15)))}:host([accent]:active){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)));--text:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}:host([accent][inverted]:focus),:host([accent][inverted]:hover){--color:#0000001a}:host([accent][inverted]:active){--color:var(--on-accent,hsl(var(--on-accent-h,0),var(--on-accent-s,0%),var(--on-accent-l,100%)))}:host([outlined]){background:var(--background,#f7f7f7) radial-gradient(circle,#0000 1%,var(--background,#f7f7f7) 1%) center/15000%;color:var(--color)}:host([pill]){border-radius:var(--border-radius-pill,9999px)}:host([small]){font-size:.8em;height:28px;line-height:.9em;padding:0 var(--spacing-s,.5rem)}:host([small]) .before ::slotted(*){margin-right:var(--spacing-xs,.25rem)}:host([small]) .after ::slotted(*){margin-left:var(--spacing-xs,.25rem)}:host([fab]){align-items:center;border-radius:50%;box-shadow:var(--elevation-1,0 1px 2px var(--shadow));height:40px;justify-content:center;line-height:normal;overflow:hidden;padding:0;width:40px}:host([fab]):hover{box-shadow:var(--elevation-3,0 4px 8px var(--shadow))}:host([fab][small]){font-size:.75em;height:30px;width:30px}:host([flat]){box-shadow:none}:host([flat]):hover{box-shadow:none}:host([disabled]),:host([disabled][accent]){--text:var(--button-color-disabled,var(--shade-lighter));--color:var(--button-bg-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));box-shadow:none;cursor:default;pointer-events:none}";
|
|
3
3
|
|
|
4
4
|
export { css_248z as default, stylesheet };
|
package/checkbox/checkbox.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate, __metadata } from 'tslib';
|
|
2
|
-
import { LitElement,
|
|
2
|
+
import { LitElement, css, unsafeCSS, html } from 'lit';
|
|
3
3
|
import { property, query, customElement } from 'lit/decorators.js';
|
|
4
4
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
5
|
import '../box/index.js';
|
|
@@ -12,8 +12,32 @@ let TkCheckbox = class TkCheckbox extends LitElement {
|
|
|
12
12
|
this._id = uniqueID();
|
|
13
13
|
this.checked = false;
|
|
14
14
|
}
|
|
15
|
+
static { this.styles = css `
|
|
16
|
+
${unsafeCSS(css_248z)}
|
|
17
|
+
`; }
|
|
15
18
|
render() {
|
|
16
|
-
return html
|
|
19
|
+
return html `
|
|
20
|
+
<tk-box direction="row" align-items="center">
|
|
21
|
+
<div tabindex="0" class="checkbox">
|
|
22
|
+
<svg id="checkmark" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 24 24">
|
|
23
|
+
<path id="checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
|
|
24
|
+
<line id="indeterminate-path" fill="none" x1="0" y1="12.5" x2="24" y2="12.5" />
|
|
25
|
+
</svg>
|
|
26
|
+
</div>
|
|
27
|
+
<span class="label"><slot></slot></span>
|
|
28
|
+
</tk-box>
|
|
29
|
+
<input
|
|
30
|
+
id=${this._id}
|
|
31
|
+
slot="none"
|
|
32
|
+
style="display: none;"
|
|
33
|
+
?checked=${this.checked}
|
|
34
|
+
type="checkbox"
|
|
35
|
+
name="${ifDefined(this.name)}"
|
|
36
|
+
value="${ifDefined(this.value)}"
|
|
37
|
+
aria-hidden="true"
|
|
38
|
+
tabindex="-1"
|
|
39
|
+
/>
|
|
40
|
+
`;
|
|
17
41
|
}
|
|
18
42
|
connectedCallback() {
|
|
19
43
|
super.connectedCallback();
|
|
@@ -40,7 +64,6 @@ let TkCheckbox = class TkCheckbox extends LitElement {
|
|
|
40
64
|
setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
|
|
41
65
|
}
|
|
42
66
|
};
|
|
43
|
-
TkCheckbox.styles = css `${unsafeCSS(css_248z)}`;
|
|
44
67
|
__decorate([
|
|
45
68
|
property({ attribute: true, type: String }),
|
|
46
69
|
__metadata("design:type", String)
|
package/dialog/dialog.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate, __metadata } from 'tslib';
|
|
2
|
-
import { LitElement,
|
|
2
|
+
import { LitElement, css, unsafeCSS, html } from 'lit';
|
|
3
3
|
import { property, customElement } from 'lit/decorators.js';
|
|
4
4
|
import css_248z from './dialog.scss.js';
|
|
5
5
|
|
|
@@ -10,10 +10,20 @@ let TkDialog = class TkDialog extends LitElement {
|
|
|
10
10
|
this.open = false;
|
|
11
11
|
this.blurOverlay = false;
|
|
12
12
|
}
|
|
13
|
+
static { this.styles = css `
|
|
14
|
+
${unsafeCSS(css_248z)}
|
|
15
|
+
`; }
|
|
13
16
|
render() {
|
|
14
|
-
return html
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
return html `
|
|
18
|
+
${this.open
|
|
19
|
+
? html `
|
|
20
|
+
<div class="overlay ${this.blurOverlay ? "blur" : ""}" @click=${() => (this.modal ? null : this.hide())}></div>
|
|
21
|
+
<div class="container">
|
|
22
|
+
<slot></slot>
|
|
23
|
+
</div>
|
|
24
|
+
`
|
|
25
|
+
: ""}
|
|
26
|
+
`;
|
|
17
27
|
}
|
|
18
28
|
updated(props) {
|
|
19
29
|
if (props.has("open") && this.open)
|
|
@@ -32,7 +42,6 @@ let TkDialog = class TkDialog extends LitElement {
|
|
|
32
42
|
this.resolve(value);
|
|
33
43
|
}
|
|
34
44
|
};
|
|
35
|
-
TkDialog.styles = css `${unsafeCSS(css_248z)}`;
|
|
36
45
|
__decorate([
|
|
37
46
|
property({ type: Boolean, attribute: true }),
|
|
38
47
|
__metadata("design:type", Boolean)
|
package/drawer/drawer.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { __decorate, __metadata } from 'tslib';
|
|
2
|
-
import { LitElement,
|
|
2
|
+
import { LitElement, css, unsafeCSS, html } from 'lit';
|
|
3
3
|
import { property, query, customElement } from 'lit/decorators.js';
|
|
4
4
|
import css_248z from './drawer.scss.js';
|
|
5
|
-
import {
|
|
5
|
+
import { Direction, Pan, PointerListener, Tap } from 'contactjs';
|
|
6
6
|
|
|
7
7
|
let TkDrawer = class TkDrawer extends LitElement {
|
|
8
8
|
constructor() {
|
|
@@ -12,6 +12,9 @@ let TkDrawer = class TkDrawer extends LitElement {
|
|
|
12
12
|
this.right = false;
|
|
13
13
|
this.swipeable = false;
|
|
14
14
|
}
|
|
15
|
+
static { this.styles = css `
|
|
16
|
+
${unsafeCSS(css_248z)}
|
|
17
|
+
`; }
|
|
15
18
|
set open(value) {
|
|
16
19
|
if (value === this._open)
|
|
17
20
|
return;
|
|
@@ -27,7 +30,23 @@ let TkDrawer = class TkDrawer extends LitElement {
|
|
|
27
30
|
return this._open;
|
|
28
31
|
}
|
|
29
32
|
render() {
|
|
30
|
-
return html
|
|
33
|
+
return html `
|
|
34
|
+
<div class="container fi">
|
|
35
|
+
<slot name="drawer-container"></slot>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="overlay" @click=${() => (this.open = false)}></div>
|
|
38
|
+
<div class="drawer">
|
|
39
|
+
<div class="drawer-header">
|
|
40
|
+
<slot name="drawer-header"></slot>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="drawer-content">
|
|
43
|
+
<slot name="drawer-content"></slot>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="drawer-footer">
|
|
46
|
+
<slot name="drawer-footer"></slot>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
`;
|
|
31
50
|
}
|
|
32
51
|
updated(props) {
|
|
33
52
|
if (props.has("overQuery"))
|
|
@@ -38,13 +57,12 @@ let TkDrawer = class TkDrawer extends LitElement {
|
|
|
38
57
|
}
|
|
39
58
|
if (props.has("swipeable") && this.swipeable) {
|
|
40
59
|
var panOptions = {
|
|
41
|
-
supportedDirections:
|
|
60
|
+
supportedDirections: [Direction.Left, Direction.Right],
|
|
42
61
|
bubbles: false
|
|
43
62
|
};
|
|
44
63
|
var panRecognizer = new Pan(this.$drawer, panOptions);
|
|
45
64
|
this.pointerListener = new PointerListener(this.$drawer, {
|
|
46
65
|
DEBUG: true,
|
|
47
|
-
DEBUG_CONTACT: true,
|
|
48
66
|
DEBUG_GESTURES: true,
|
|
49
67
|
// handleTouchEvents : false,
|
|
50
68
|
supportedGestures: [Tap, panRecognizer],
|
|
@@ -104,7 +122,6 @@ let TkDrawer = class TkDrawer extends LitElement {
|
|
|
104
122
|
this.open = !this.open;
|
|
105
123
|
}
|
|
106
124
|
};
|
|
107
|
-
TkDrawer.styles = css `${unsafeCSS(css_248z)}`;
|
|
108
125
|
__decorate([
|
|
109
126
|
property({ type: Boolean, reflect: true }),
|
|
110
127
|
__metadata("design:type", Object),
|
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{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
|
|
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;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
|
|
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;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:rgba(0,0,0,.502);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,256px)}: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;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:rgba(0,0,0,.502);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,256px)}: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/form/form.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ declare class TkForm extends LitElement {
|
|
|
4
4
|
protected createRenderRoot(): Element | ShadowRoot;
|
|
5
5
|
connectedCallback(): void;
|
|
6
6
|
disconnectedCallback(): void;
|
|
7
|
-
submit(e:
|
|
7
|
+
submit(e: Event): void;
|
|
8
8
|
getFormDataAsObject(): any;
|
|
9
9
|
}
|
|
10
10
|
declare global {
|
package/icon/icon.js
CHANGED
|
@@ -14,13 +14,21 @@ let TkIcon = class TkIcon extends TkBox {
|
|
|
14
14
|
static get styles() {
|
|
15
15
|
return [
|
|
16
16
|
...TkBox.styles,
|
|
17
|
-
css
|
|
17
|
+
css `
|
|
18
|
+
${unsafeCSS(css_248z)}
|
|
19
|
+
`
|
|
18
20
|
];
|
|
19
21
|
}
|
|
20
22
|
render() {
|
|
21
|
-
return html
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
return html `
|
|
24
|
+
${this.path
|
|
25
|
+
? html `
|
|
26
|
+
<svg viewBox="0 0 24 24"><path d="${this.path}"></path></svg>
|
|
27
|
+
`
|
|
28
|
+
: html `
|
|
29
|
+
${unsafeHTML(this.svg)}
|
|
30
|
+
`}
|
|
31
|
+
`;
|
|
24
32
|
}
|
|
25
33
|
updated(props) {
|
|
26
34
|
if (props.has("name") && this.name)
|
package/list-item/list-item.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate, __metadata } from 'tslib';
|
|
2
|
-
import { LitElement,
|
|
2
|
+
import { LitElement, css, unsafeCSS, html } from 'lit';
|
|
3
3
|
import { property, query, customElement } from 'lit/decorators.js';
|
|
4
4
|
import css_248z from './list-item.scss.js';
|
|
5
5
|
|
|
@@ -9,10 +9,22 @@ let TkListItem = class TkListItem extends LitElement {
|
|
|
9
9
|
this.href = "";
|
|
10
10
|
this.target = "";
|
|
11
11
|
}
|
|
12
|
+
static { this.styles = css `
|
|
13
|
+
${unsafeCSS(css_248z)}
|
|
14
|
+
`; }
|
|
12
15
|
render() {
|
|
13
|
-
return html
|
|
14
|
-
|
|
15
|
-
|
|
16
|
+
return html `
|
|
17
|
+
<slot name="before" @click=${this.handleClick}></slot>
|
|
18
|
+
<div id="content">
|
|
19
|
+
<slot></slot>
|
|
20
|
+
</div>
|
|
21
|
+
<slot name="after" @click=${this.handleClick}></slot>
|
|
22
|
+
${this.href
|
|
23
|
+
? html `
|
|
24
|
+
<a tabindex="-1" id="ahref" href="${this.href}" rel="noreferrer" aria-label=${this.ariaLabel}></a>
|
|
25
|
+
`
|
|
26
|
+
: ""}
|
|
27
|
+
`;
|
|
16
28
|
}
|
|
17
29
|
firstUpdated() {
|
|
18
30
|
if (!this.ariaLabel && this.innerText)
|
|
@@ -28,7 +40,6 @@ let TkListItem = class TkListItem extends LitElement {
|
|
|
28
40
|
}
|
|
29
41
|
handleClick(e) {
|
|
30
42
|
const target = e.target;
|
|
31
|
-
console.log(target, e);
|
|
32
43
|
// In case click cames from a slotted element with href attribute we stop propagation
|
|
33
44
|
if ((target.tagName == "BUTTON" || target.tagName == "TK-BUTTON") && target.hasAttribute("href")) {
|
|
34
45
|
// e.preventDefault();
|
|
@@ -42,7 +53,6 @@ let TkListItem = class TkListItem extends LitElement {
|
|
|
42
53
|
}
|
|
43
54
|
}
|
|
44
55
|
};
|
|
45
|
-
TkListItem.styles = css `${unsafeCSS(css_248z)}`;
|
|
46
56
|
__decorate([
|
|
47
57
|
property({ attribute: true }),
|
|
48
58
|
__metadata("design:type", String)
|
package/loading/loading.d.ts
CHANGED
package/loading/loading.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate, __metadata } from 'tslib';
|
|
2
2
|
import { css, unsafeCSS, html } from 'lit';
|
|
3
3
|
import { property, customElement } from 'lit/decorators.js';
|
|
4
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
4
5
|
import '../box/index.js';
|
|
5
6
|
import css_248z from './loading.scss.js';
|
|
6
7
|
import { TkBox } from '../box/box.js';
|
|
@@ -10,17 +11,38 @@ let TkLoading = class TkLoading extends TkBox {
|
|
|
10
11
|
super(...arguments);
|
|
11
12
|
this.circle = false;
|
|
12
13
|
this.indeterminate = false;
|
|
14
|
+
this.value = 0.5;
|
|
13
15
|
}
|
|
14
16
|
static get styles() {
|
|
15
17
|
return [
|
|
16
18
|
...TkBox.styles,
|
|
17
|
-
css
|
|
19
|
+
css `
|
|
20
|
+
${unsafeCSS(css_248z)}
|
|
21
|
+
`
|
|
18
22
|
];
|
|
19
23
|
}
|
|
20
24
|
render() {
|
|
21
|
-
return html
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
return html `
|
|
26
|
+
${this.circle
|
|
27
|
+
? html `
|
|
28
|
+
<svg class="circle" viewBox="0 0 100 100">
|
|
29
|
+
<circle
|
|
30
|
+
class=${classMap({ indeterminate: this.indeterminate, path: true })}
|
|
31
|
+
fill="none"
|
|
32
|
+
stroke-width="1em"
|
|
33
|
+
stroke-linecap="butt"
|
|
34
|
+
cx="50"
|
|
35
|
+
cy="50"
|
|
36
|
+
r="40"
|
|
37
|
+
></circle>
|
|
38
|
+
</svg>
|
|
39
|
+
`
|
|
40
|
+
: html `
|
|
41
|
+
<div class="line">
|
|
42
|
+
<div class=${classMap({ indeterminate: this.indeterminate })}></div>
|
|
43
|
+
</div>
|
|
44
|
+
`}
|
|
45
|
+
`;
|
|
24
46
|
}
|
|
25
47
|
};
|
|
26
48
|
__decorate([
|
|
@@ -31,6 +53,10 @@ __decorate([
|
|
|
31
53
|
property({ attribute: true, type: Boolean }),
|
|
32
54
|
__metadata("design:type", Boolean)
|
|
33
55
|
], TkLoading.prototype, "indeterminate", void 0);
|
|
56
|
+
__decorate([
|
|
57
|
+
property({ attribute: true, type: Number }),
|
|
58
|
+
__metadata("design:type", Number)
|
|
59
|
+
], TkLoading.prototype, "value", void 0);
|
|
34
60
|
TkLoading = __decorate([
|
|
35
61
|
customElement("tk-loading")
|
|
36
62
|
], TkLoading);
|
package/navbar/navbar.js
CHANGED
|
@@ -9,11 +9,21 @@ let TkNavbar = class TkNavbar extends TkBox {
|
|
|
9
9
|
static get styles() {
|
|
10
10
|
return [
|
|
11
11
|
...TkBox.styles,
|
|
12
|
-
css
|
|
12
|
+
css `
|
|
13
|
+
${unsafeCSS(css_248z)}
|
|
14
|
+
`
|
|
13
15
|
];
|
|
14
16
|
}
|
|
15
17
|
render() {
|
|
16
|
-
return html
|
|
18
|
+
return html `
|
|
19
|
+
<div id="left">
|
|
20
|
+
<slot name="left"></slot>
|
|
21
|
+
<slot name="title"></slot>
|
|
22
|
+
</div>
|
|
23
|
+
<div id="right">
|
|
24
|
+
<slot name="right"></slot>
|
|
25
|
+
</div>
|
|
26
|
+
`;
|
|
17
27
|
}
|
|
18
28
|
};
|
|
19
29
|
TkNavbar = __decorate([
|
package/notie/notie.js
CHANGED
|
@@ -41,21 +41,49 @@ let TkNotie = TkNotie_1 = class TkNotie extends TkBox {
|
|
|
41
41
|
static get styles() {
|
|
42
42
|
return [
|
|
43
43
|
...TkBox.styles,
|
|
44
|
-
css
|
|
44
|
+
css `
|
|
45
|
+
${unsafeCSS(css_248z)}
|
|
46
|
+
`
|
|
45
47
|
];
|
|
46
48
|
}
|
|
47
49
|
render() {
|
|
48
|
-
return html
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
? html
|
|
58
|
-
|
|
50
|
+
return html `
|
|
51
|
+
<div class="overlay" @click=${() => this.hide(false)}></div>
|
|
52
|
+
<tk-box class="container ${this.level}">
|
|
53
|
+
${this.text
|
|
54
|
+
? html `
|
|
55
|
+
<tk-box class="text" @click="${() => (this.type == NotieType.show ? this.hide(true) : null)}">${this.text}</tk-box>
|
|
56
|
+
`
|
|
57
|
+
: ""}
|
|
58
|
+
${this.template
|
|
59
|
+
? html `
|
|
60
|
+
<tk-box class="template" @click="${() => (this.type == NotieType.show ? this.hide(true) : null)}">${this.template}</tk-box>
|
|
61
|
+
`
|
|
62
|
+
: ""}
|
|
63
|
+
${this.type == NotieType.force
|
|
64
|
+
? html `
|
|
65
|
+
<tk-box @click="${() => this.hide(true)}" class="button force">${this.buttonText}</tk-box>
|
|
66
|
+
`
|
|
67
|
+
: ""}
|
|
68
|
+
${this.type == NotieType.input
|
|
69
|
+
? html `
|
|
70
|
+
<tk-textfield class="input" ></tk-textfield>
|
|
71
|
+
`
|
|
72
|
+
: ""}
|
|
73
|
+
${this.type == NotieType.confirm || this.type == NotieType.input
|
|
74
|
+
? html `
|
|
75
|
+
<tk-box direction="row">
|
|
76
|
+
<tk-box justify="center" align-items="center" flex="grow" @click="${() => this.hide(true)}" class="button confirm">
|
|
77
|
+
${this.confirmText}
|
|
78
|
+
</tk-box>
|
|
79
|
+
<tk-box justify="center" align-items="center" flex="grow" @click="${() => this.hide(false)}" class="button confirm cancel">
|
|
80
|
+
${this.cancelText}
|
|
81
|
+
</tk-box>
|
|
82
|
+
</tk-box>
|
|
83
|
+
`
|
|
84
|
+
: ""}
|
|
85
|
+
</tk-box>
|
|
86
|
+
`;
|
|
59
87
|
}
|
|
60
88
|
show() {
|
|
61
89
|
return new Promise(resolve => {
|
package/notie/notie.scss.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ":host{bottom:0;display:none;font-size:1.6rem;left:0;margin:0;position:fixed;right:0;top:0}:host .overlay{background-color
|
|
2
|
-
var stylesheet=":host{bottom:0;display:none;font-size:1.6rem;left:0;margin:0;position:fixed;right:0;top:0}:host .overlay{background-color
|
|
1
|
+
var css_248z = ":host{bottom:0;display:none;font-size:1.6rem;left:0;margin:0;position:fixed;right:0;top:0}:host .overlay{background-color:rgba(0,0,0,.502);bottom:0;left:0;position:fixed;right:0;top:0;z-index:var(--notie-z-index,400)}:host .container{background-color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));bottom:0;box-shadow:10px 10px 10px 10px var(--shadow);color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));height:fit-content;left:0;position:fixed;right:0;text-align:center;transform:translateY(100%);transition:all .15s ease-in;z-index:calc(var(--notie-z-index, 400) + 1)}:host .container.info{background-color:#4d82d6}:host .container.error{background-color:#e1715b}:host .container.warning{background-color:#d6a14d}:host .container.success{background-color:#57bf57}:host .text{padding:.5em}:host .input{--input-font-size:$font-size-widescreen;background-color:var(--background);color:var(--foreground);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.forcer{background-color:#57bf57;color:#fff}:host .button.cancel{background-color:var(--error,#e1715b);color:var(--on-error,#fff)}@media screen and (max-width:900px){:host{font-size:1.4rem}}@media screen and (max-width:750px){:host{font-size:1.2rem}}@media screen and (max-width:400px){:host{font-size:1rem}}:host([position=top]) .container{bottom:inherit;position:fixed;top:0;transform:translateY(-100%)}:host([open]) .container{transform:translateY(0)}";
|
|
2
|
+
var stylesheet=":host{bottom:0;display:none;font-size:1.6rem;left:0;margin:0;position:fixed;right:0;top:0}:host .overlay{background-color:rgba(0,0,0,.502);bottom:0;left:0;position:fixed;right:0;top:0;z-index:var(--notie-z-index,400)}:host .container{background-color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));bottom:0;box-shadow:10px 10px 10px 10px var(--shadow);color:var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%)));height:fit-content;left:0;position:fixed;right:0;text-align:center;transform:translateY(100%);transition:all .15s ease-in;z-index:calc(var(--notie-z-index, 400) + 1)}:host .container.info{background-color:#4d82d6}:host .container.error{background-color:#e1715b}:host .container.warning{background-color:#d6a14d}:host .container.success{background-color:#57bf57}:host .text{padding:.5em}:host .input{--input-font-size:$font-size-widescreen;background-color:var(--background);color:var(--foreground);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.forcer{background-color:#57bf57;color:#fff}:host .button.cancel{background-color:var(--error,#e1715b);color:var(--on-error,#fff)}@media screen and (max-width:900px){:host{font-size:1.4rem}}@media screen and (max-width:750px){:host{font-size:1.2rem}}@media screen and (max-width:400px){:host{font-size:1rem}}:host([position=top]) .container{bottom:inherit;position:fixed;top:0;transform:translateY(-100%)}:host([open]) .container{transform:translateY(0)}";
|
|
3
3
|
|
|
4
4
|
export { css_248z as default, stylesheet };
|