tinkiet 0.5.2 → 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 -7
- 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/icon/icon.js +12 -4
- package/list-item/list-item.js +16 -5
- 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 +1 -0
- 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,14 +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
92
|
if (this.href && e.isTrusted) {
|
|
72
93
|
e.stopPropagation();
|
|
73
94
|
e.preventDefault();
|
|
74
95
|
this.$ahref.click();
|
|
75
96
|
}
|
|
76
|
-
else if (this.type == "submit" || this.type == "reset") {
|
|
77
|
-
this.querySelector("button")?.
|
|
97
|
+
else if (e.isTrusted && this.type == "submit" || this.type == "reset") {
|
|
98
|
+
this.querySelector("button")?.click();
|
|
78
99
|
}
|
|
79
100
|
}
|
|
80
101
|
};
|
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/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)
|
|
@@ -41,7 +53,6 @@ let TkListItem = class TkListItem extends LitElement {
|
|
|
41
53
|
}
|
|
42
54
|
}
|
|
43
55
|
};
|
|
44
|
-
TkListItem.styles = css `${unsafeCSS(css_248z)}`;
|
|
45
56
|
__decorate([
|
|
46
57
|
property({ attribute: true }),
|
|
47
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 };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tinkiet",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "Pragmatic UI Web Components",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
],
|
|
20
20
|
"scripts": {
|
|
21
21
|
"clean": "rimraf ./dist",
|
|
22
|
-
"blib": "rollup -c rollup.config.
|
|
23
|
-
"build": "rimraf ./dist && rollup -c rollup.config.
|
|
22
|
+
"blib": "rollup -c rollup.config.mjs",
|
|
23
|
+
"build": "rimraf ./dist && rollup -c rollup.config.mjs"
|
|
24
24
|
},
|
|
25
25
|
"author": "Cyrille Colin <cyrille.colin@educ.cloud>",
|
|
26
26
|
"license": "MIT",
|
|
27
27
|
"homepage": "https://tinkiet.educ.cloud",
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"contactjs": "^1.
|
|
29
|
+
"contactjs": "^2.1.3",
|
|
30
30
|
"lit": "^2.2.7",
|
|
31
31
|
"tslib": "^2.4.0"
|
|
32
32
|
},
|
package/pages/pages.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 './pages.scss.js';
|
|
5
5
|
|
|
@@ -11,6 +11,9 @@ let TkPages = class TkPages extends LitElement {
|
|
|
11
11
|
this.handleScroll = false;
|
|
12
12
|
this.scrollHistory = {};
|
|
13
13
|
}
|
|
14
|
+
static { this.styles = css `
|
|
15
|
+
${unsafeCSS(css_248z)}
|
|
16
|
+
`; }
|
|
14
17
|
set page(val) {
|
|
15
18
|
let oldVal = this._page;
|
|
16
19
|
this._page = val;
|
|
@@ -27,7 +30,9 @@ let TkPages = class TkPages extends LitElement {
|
|
|
27
30
|
return this._page;
|
|
28
31
|
}
|
|
29
32
|
render() {
|
|
30
|
-
return html
|
|
33
|
+
return html `
|
|
34
|
+
<slot></slot>
|
|
35
|
+
`;
|
|
31
36
|
}
|
|
32
37
|
updated(props) {
|
|
33
38
|
if (props.has("page")) {
|
|
@@ -53,7 +58,6 @@ let TkPages = class TkPages extends LitElement {
|
|
|
53
58
|
}
|
|
54
59
|
}
|
|
55
60
|
};
|
|
56
|
-
TkPages.styles = css `${unsafeCSS(css_248z)}`;
|
|
57
61
|
__decorate([
|
|
58
62
|
property({ attribute: "page", type: String }),
|
|
59
63
|
__metadata("design:type", String),
|