tinkiet 0.10.0 → 0.10.1
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/chip/chip.d.ts +15 -0
- package/chip/index.js +52 -7
- package/index.js +51 -6
- package/package.json +2 -6
- package/umd/tinkiet.min.js +35 -18
package/chip/chip.d.ts
CHANGED
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* Material-style Chip component.
|
|
4
|
+
*
|
|
5
|
+
* Slots :
|
|
6
|
+
* • default <slot> → label text
|
|
7
|
+
* • <slot name="leading"> → leading icon / image
|
|
8
|
+
* • <slot name="trailing"> → trailing icon (remove / action)
|
|
9
|
+
*
|
|
10
|
+
* Attributes :
|
|
11
|
+
* • removable (boolean) → affiche un trailing icon automatique (ex: bouton X)
|
|
12
|
+
* • disabled (boolean)
|
|
13
|
+
*/
|
|
2
14
|
export declare class TkChip extends LitElement {
|
|
15
|
+
disabled: boolean;
|
|
16
|
+
removable: boolean;
|
|
3
17
|
static styles: import("lit").CSSResult;
|
|
18
|
+
private onRemove;
|
|
4
19
|
render(): import("lit").TemplateResult<1>;
|
|
5
20
|
}
|
|
6
21
|
declare global {
|
package/chip/index.js
CHANGED
|
@@ -27,7 +27,7 @@ var external_lit_ = __webpack_require__(2927);
|
|
|
27
27
|
// EXTERNAL MODULE: external "lit/decorators.js"
|
|
28
28
|
var decorators_js_ = __webpack_require__(8899);
|
|
29
29
|
;// ./tinkiet/chip/chip.scss
|
|
30
|
-
/* harmony default export */ const chip = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}
|
|
30
|
+
/* harmony default export */ const chip = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}.chip{display:inline-flex;align-items:center;border-radius:16px;padding:4px 12px;background:hsl(var(--surface-container-highest));border:1px solid hsl(var(--outline-variant));font-size:14px;height:32px;gap:8px;cursor:pointer}.chip.disabled{opacity:.4;pointer-events:none}.chip .leading{display:inline-flex;align-items:center}.chip .label{white-space:nowrap}.chip .trailing{display:inline-flex;align-items:center}.chip .trailing .remove{background:none;border:none;cursor:pointer;font-size:14px;opacity:.7}.chip .trailing .remove:hover{opacity:1}");
|
|
31
31
|
;// ./tinkiet/chip/chip.ts
|
|
32
32
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
33
33
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -38,16 +38,61 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
|
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
|
41
|
+
/**
|
|
42
|
+
* Material-style Chip component.
|
|
43
|
+
*
|
|
44
|
+
* Slots :
|
|
45
|
+
* • default <slot> → label text
|
|
46
|
+
* • <slot name="leading"> → leading icon / image
|
|
47
|
+
* • <slot name="trailing"> → trailing icon (remove / action)
|
|
48
|
+
*
|
|
49
|
+
* Attributes :
|
|
50
|
+
* • removable (boolean) → affiche un trailing icon automatique (ex: bouton X)
|
|
51
|
+
* • disabled (boolean)
|
|
52
|
+
*/
|
|
41
53
|
let TkChip = class TkChip extends external_lit_.LitElement {
|
|
54
|
+
constructor() {
|
|
55
|
+
super(...arguments);
|
|
56
|
+
this.disabled = false;
|
|
57
|
+
this.removable = false;
|
|
58
|
+
}
|
|
59
|
+
onRemove() {
|
|
60
|
+
this.dispatchEvent(new CustomEvent("remove", { bubbles: true, composed: true }));
|
|
61
|
+
}
|
|
42
62
|
render() {
|
|
43
63
|
return (0,external_lit_.html) `
|
|
44
|
-
|
|
45
|
-
|
|
64
|
+
<div class="chip ${this.disabled ? "disabled" : ""}">
|
|
65
|
+
|
|
66
|
+
<!-- 3. LEADING ICON (optional) -->
|
|
67
|
+
<span class="leading">
|
|
68
|
+
<slot name="leading"></slot>
|
|
69
|
+
</span>
|
|
70
|
+
|
|
71
|
+
<!-- 2. LABEL TEXT -->
|
|
72
|
+
<span class="label">
|
|
73
|
+
<slot></slot>
|
|
74
|
+
</span>
|
|
75
|
+
|
|
76
|
+
<!-- 4. TRAILING ICON -->
|
|
77
|
+
<span class="trailing">
|
|
78
|
+
<slot name="trailing">
|
|
79
|
+
${this.removable
|
|
80
|
+
? (0,external_lit_.html) `<button class="remove" @click=${this.onRemove}>✕</button>`
|
|
81
|
+
: ""}
|
|
82
|
+
</slot>
|
|
83
|
+
</span>
|
|
84
|
+
|
|
85
|
+
</div>
|
|
86
|
+
`;
|
|
46
87
|
}
|
|
47
88
|
};
|
|
48
|
-
TkChip.styles = (0,external_lit_.css)
|
|
49
|
-
|
|
50
|
-
|
|
89
|
+
TkChip.styles = (0,external_lit_.css) `${(0,external_lit_.unsafeCSS)(chip)}`;
|
|
90
|
+
__decorate([
|
|
91
|
+
(0,decorators_js_.property)({ type: Boolean })
|
|
92
|
+
], TkChip.prototype, "disabled", void 0);
|
|
93
|
+
__decorate([
|
|
94
|
+
(0,decorators_js_.property)({ type: Boolean })
|
|
95
|
+
], TkChip.prototype, "removable", void 0);
|
|
51
96
|
TkChip = __decorate([
|
|
52
97
|
(0,decorators_js_.customElement)("tk-chip")
|
|
53
98
|
], TkChip);
|
|
@@ -63,7 +108,7 @@ var x = (y) => {
|
|
|
63
108
|
var x = {}; __webpack_require__.d(x, y); return x
|
|
64
109
|
}
|
|
65
110
|
var y = (x) => (() => (x))
|
|
66
|
-
module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement) });
|
|
111
|
+
module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property) });
|
|
67
112
|
|
|
68
113
|
/***/ })
|
|
69
114
|
|
package/index.js
CHANGED
|
@@ -1135,7 +1135,7 @@ var external_lit_ = __webpack_require__(2927);
|
|
|
1135
1135
|
// EXTERNAL MODULE: external "lit/decorators.js"
|
|
1136
1136
|
var decorators_js_ = __webpack_require__(8899);
|
|
1137
1137
|
;// ./tinkiet/chip/chip.scss
|
|
1138
|
-
/* harmony default export */ const chip = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}
|
|
1138
|
+
/* harmony default export */ const chip = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}.chip{display:inline-flex;align-items:center;border-radius:16px;padding:4px 12px;background:hsl(var(--surface-container-highest));border:1px solid hsl(var(--outline-variant));font-size:14px;height:32px;gap:8px;cursor:pointer}.chip.disabled{opacity:.4;pointer-events:none}.chip .leading{display:inline-flex;align-items:center}.chip .label{white-space:nowrap}.chip .trailing{display:inline-flex;align-items:center}.chip .trailing .remove{background:none;border:none;cursor:pointer;font-size:14px;opacity:.7}.chip .trailing .remove:hover{opacity:1}");
|
|
1139
1139
|
;// ./tinkiet/chip/chip.ts
|
|
1140
1140
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
1141
1141
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -1146,16 +1146,61 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
|
|
|
1146
1146
|
|
|
1147
1147
|
|
|
1148
1148
|
|
|
1149
|
+
/**
|
|
1150
|
+
* Material-style Chip component.
|
|
1151
|
+
*
|
|
1152
|
+
* Slots :
|
|
1153
|
+
* • default <slot> → label text
|
|
1154
|
+
* • <slot name="leading"> → leading icon / image
|
|
1155
|
+
* • <slot name="trailing"> → trailing icon (remove / action)
|
|
1156
|
+
*
|
|
1157
|
+
* Attributes :
|
|
1158
|
+
* • removable (boolean) → affiche un trailing icon automatique (ex: bouton X)
|
|
1159
|
+
* • disabled (boolean)
|
|
1160
|
+
*/
|
|
1149
1161
|
let TkChip = class TkChip extends external_lit_.LitElement {
|
|
1162
|
+
constructor() {
|
|
1163
|
+
super(...arguments);
|
|
1164
|
+
this.disabled = false;
|
|
1165
|
+
this.removable = false;
|
|
1166
|
+
}
|
|
1167
|
+
onRemove() {
|
|
1168
|
+
this.dispatchEvent(new CustomEvent("remove", { bubbles: true, composed: true }));
|
|
1169
|
+
}
|
|
1150
1170
|
render() {
|
|
1151
1171
|
return (0,external_lit_.html) `
|
|
1152
|
-
|
|
1153
|
-
|
|
1172
|
+
<div class="chip ${this.disabled ? "disabled" : ""}">
|
|
1173
|
+
|
|
1174
|
+
<!-- 3. LEADING ICON (optional) -->
|
|
1175
|
+
<span class="leading">
|
|
1176
|
+
<slot name="leading"></slot>
|
|
1177
|
+
</span>
|
|
1178
|
+
|
|
1179
|
+
<!-- 2. LABEL TEXT -->
|
|
1180
|
+
<span class="label">
|
|
1181
|
+
<slot></slot>
|
|
1182
|
+
</span>
|
|
1183
|
+
|
|
1184
|
+
<!-- 4. TRAILING ICON -->
|
|
1185
|
+
<span class="trailing">
|
|
1186
|
+
<slot name="trailing">
|
|
1187
|
+
${this.removable
|
|
1188
|
+
? (0,external_lit_.html) `<button class="remove" @click=${this.onRemove}>✕</button>`
|
|
1189
|
+
: ""}
|
|
1190
|
+
</slot>
|
|
1191
|
+
</span>
|
|
1192
|
+
|
|
1193
|
+
</div>
|
|
1194
|
+
`;
|
|
1154
1195
|
}
|
|
1155
1196
|
};
|
|
1156
|
-
TkChip.styles = (0,external_lit_.css)
|
|
1157
|
-
|
|
1158
|
-
|
|
1197
|
+
TkChip.styles = (0,external_lit_.css) `${(0,external_lit_.unsafeCSS)(chip)}`;
|
|
1198
|
+
__decorate([
|
|
1199
|
+
(0,decorators_js_.property)({ type: Boolean })
|
|
1200
|
+
], TkChip.prototype, "disabled", void 0);
|
|
1201
|
+
__decorate([
|
|
1202
|
+
(0,decorators_js_.property)({ type: Boolean })
|
|
1203
|
+
], TkChip.prototype, "removable", void 0);
|
|
1159
1204
|
TkChip = __decorate([
|
|
1160
1205
|
(0,decorators_js_.customElement)("tk-chip")
|
|
1161
1206
|
], TkChip);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tinkiet",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.1",
|
|
4
4
|
"description": "Pragmatic UI Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "index.js",
|
|
@@ -29,9 +29,5 @@
|
|
|
29
29
|
{
|
|
30
30
|
"name": "Cyrille Colin"
|
|
31
31
|
}
|
|
32
|
-
]
|
|
33
|
-
"dependencies": {
|
|
34
|
-
"client": "^0.0.1",
|
|
35
|
-
"page": "^1.11.6"
|
|
36
|
-
}
|
|
32
|
+
]
|
|
37
33
|
}
|
package/umd/tinkiet.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!function(t,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("lit"),require("lit/decorators.js"),require("lit/directives/if-defined.js"),require("lit/directives/unsafe-html.js"),require("lit/directives/class-map.js")):"function"==typeof define&&define.amd?define(["lit","lit/decorators.js","lit/directives/if-defined.js","lit/directives/unsafe-html.js","lit/directives/class-map.js"],r):"object"==typeof exports?exports.tinkiet=r(require("lit"),require("lit/decorators.js"),require("lit/directives/if-defined.js"),require("lit/directives/unsafe-html.js"),require("lit/directives/class-map.js")):t.tinkiet=r(t.lit,t["lit/decorators.js"],t["lit/directives/if-defined.js"],t["lit/directives/unsafe-html.js"],t["lit/directives/class-map.js"])}(this,(t,r,e,o,a)=>(()=>{"use strict";var i={125:t=>{t.exports=a},161:r=>{r.exports=t},291:t=>{t.exports=e},429:t=>{t.exports=r},968:t=>{t.exports=o}},n={};function s(t){var r=n[t];if(void 0!==r)return r.exports;var e=n[t]={exports:{}};return i[t](e,e.exports,s),e.exports}s.d=(t,r)=>{for(var e in r)s.o(r,e)&&!s.o(t,e)&&Object.defineProperty(t,e,{enumerable:!0,get:r[e]})},s.o=(t,r)=>Object.prototype.hasOwnProperty.call(t,r),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var l={};s.r(l),s.d(l,{NotieLevel:()=>tt,TkAccordion:()=>y,TkBadge:()=>x,TkBox:()=>u,TkButton:()=>w,TkCheckbox:()=>z,TkChip:()=>j,TkDialog:()=>C,TkDrawer:()=>T,TkForm:()=>_,TkIcon:()=>q,TkIcons:()=>B,TkListItem:()=>
|
|
1
|
+
!function(t,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("lit"),require("lit/decorators.js"),require("lit/directives/if-defined.js"),require("lit/directives/unsafe-html.js"),require("lit/directives/class-map.js")):"function"==typeof define&&define.amd?define(["lit","lit/decorators.js","lit/directives/if-defined.js","lit/directives/unsafe-html.js","lit/directives/class-map.js"],r):"object"==typeof exports?exports.tinkiet=r(require("lit"),require("lit/decorators.js"),require("lit/directives/if-defined.js"),require("lit/directives/unsafe-html.js"),require("lit/directives/class-map.js")):t.tinkiet=r(t.lit,t["lit/decorators.js"],t["lit/directives/if-defined.js"],t["lit/directives/unsafe-html.js"],t["lit/directives/class-map.js"])}(this,(t,r,e,o,a)=>(()=>{"use strict";var i={125:t=>{t.exports=a},161:r=>{r.exports=t},291:t=>{t.exports=e},429:t=>{t.exports=r},968:t=>{t.exports=o}},n={};function s(t){var r=n[t];if(void 0!==r)return r.exports;var e=n[t]={exports:{}};return i[t](e,e.exports,s),e.exports}s.d=(t,r)=>{for(var e in r)s.o(r,e)&&!s.o(t,e)&&Object.defineProperty(t,e,{enumerable:!0,get:r[e]})},s.o=(t,r)=>Object.prototype.hasOwnProperty.call(t,r),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var l={};s.r(l),s.d(l,{NotieLevel:()=>tt,TkAccordion:()=>y,TkBadge:()=>x,TkBox:()=>u,TkButton:()=>w,TkCheckbox:()=>z,TkChip:()=>j,TkDialog:()=>C,TkDrawer:()=>T,TkForm:()=>_,TkIcon:()=>q,TkIcons:()=>B,TkListItem:()=>I,TkLoading:()=>M,TkNavigationBar:()=>V,TkNavigationItem:()=>Y,TkNotie:()=>et,TkPages:()=>at,TkRadio:()=>nt,TkSelect:()=>lt,TkSlider:()=>ht,TkSwitch:()=>pt,TkTabGroup:()=>vt,TkTextarea:()=>gt,TkTextfield:()=>Z,TkTheme:()=>yt,TkTooltip:()=>xt,TkTopbar:()=>F});var c=s(161),h=s(429),d=s(291);var p=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let u=class extends c.LitElement{constructor(){super(...arguments),this.ripple=!1}static get styles(){return[c.css`
|
|
2
2
|
${(0,c.unsafeCSS)('*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:flex;position:relative;flex-direction:column;box-sizing:border-box}:host([hidden]){display:none}.ripple{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none}.ripple span{position:absolute;border-radius:50%;background-color:hsla(var(--on-primary), 0.5)}:host([align-content=start]){align-content:flex-start}:host([align-content=end]){align-content:flex-end}:host([align-content=stretch]){align-content:stretch}:host([align-content=center]){align-content:center}:host([align-content=around]){align-content:space-around}:host([align-content=between]){align-content:space-between}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=stretch]){align-items:stretch}:host([align-items=center]){align-items:center}:host([align-items=baseline]){align-items:baseline}:host([align-self=start]){align-self:flex-start}:host([align-self=end]){align-self:flex-end}:host([align-self=stretch]){align-self:stretch}:host([align-self=center]){align-self:center}:host([background=primary]){background-color:hsl(var(--primary))}:host([color=primary]){color:hsl(var(--primary))}:host([background=on-primary]){background-color:hsl(var(--on-primary))}:host([color=on-primary]){color:hsl(var(--on-primary))}:host([background=secondary]){background-color:hsl(var(--secondary))}:host([color=secondary]){color:hsl(var(--secondary))}:host([background=on-secondary]){background-color:hsl(var(--on-secondary))}:host([color=on-secondary]){color:hsl(var(--on-secondary))}:host([background=tertiary]){background-color:hsl(var(--tertiary))}:host([color=tertiary]){color:hsl(var(--tertiary))}:host([background=on-tertiary]){background-color:hsl(var(--on-tertiary))}:host([color=on-tertiary]){color:hsl(var(--on-tertiary))}:host([background=neutral]){background-color:hsl(var(--neutral))}:host([color=neutral]){color:hsl(var(--neutral))}:host([background=on-neutral]){background-color:hsl(var(--on-neutral))}:host([color=on-neutral]){color:hsl(var(--on-neutral))}:host([background=neutral-variant]){background-color:hsl(var(--neutral-variant))}:host([color=neutral-variant]){color:hsl(var(--neutral-variant))}:host([background=on-neutral-variant]){background-color:hsl(var(--on-neutral-variant))}:host([color=on-neutral-variant]){color:hsl(var(--on-neutral-variant))}:host([background=error]){background-color:hsl(var(--error))}:host([color=error]){color:hsl(var(--error))}:host([background=on-error]){background-color:hsl(var(--on-error))}:host([color=on-error]){color:hsl(var(--on-error))}:host([background=primary-container]){background-color:hsl(var(--primary-container))}:host([color=primary-container]){color:hsl(var(--primary-container))}:host([background=on-primary-container]){background-color:hsl(var(--on-primary-container))}:host([color=on-primary-container]){color:hsl(var(--on-primary-container))}:host([background=secondary-container]){background-color:hsl(var(--secondary-container))}:host([color=secondary-container]){color:hsl(var(--secondary-container))}:host([background=on-secondary-container]){background-color:hsl(var(--on-secondary-container))}:host([color=on-secondary-container]){color:hsl(var(--on-secondary-container))}:host([background=tertiary-container]){background-color:hsl(var(--tertiary-container))}:host([color=tertiary-container]){color:hsl(var(--tertiary-container))}:host([background=on-tertiary-container]){background-color:hsl(var(--on-tertiary-container))}:host([color=on-tertiary-container]){color:hsl(var(--on-tertiary-container))}:host([background=neutral-container]){background-color:hsl(var(--neutral-container))}:host([color=neutral-container]){color:hsl(var(--neutral-container))}:host([background=on-neutral-container]){background-color:hsl(var(--on-neutral-container))}:host([color=on-neutral-container]){color:hsl(var(--on-neutral-container))}:host([background=neutral-variant-container]){background-color:hsl(var(--neutral-variant-container))}:host([color=neutral-variant-container]){color:hsl(var(--neutral-variant-container))}:host([background=on-neutral-variant-container]){background-color:hsl(var(--on-neutral-variant-container))}:host([color=on-neutral-variant-container]){color:hsl(var(--on-neutral-variant-container))}:host([background=error-container]){background-color:hsl(var(--error-container))}:host([color=error-container]){color:hsl(var(--error-container))}:host([background=on-error-container]){background-color:hsl(var(--on-error-container))}:host([color=on-error-container]){color:hsl(var(--on-error-container))}:host([background=primary-0]){background-color:hsl(var(--primary-0))}:host([color=primary-0]){color:hsl(var(--primary-0))}:host([background=surface]){background-color:hsl(var(--surface))}:host([color=surface]){color:hsl(var(--surface))}:host([background=on-surface]){background-color:hsl(var(--on-surface))}:host([color=on-surface]){color:hsl(var(--on-surface))}:host([background=surface-dim]){background-color:hsl(var(--surface-dim))}:host([color=surface-dim]){color:hsl(var(--surface-dim))}:host([background=surface-bright]){background-color:hsl(var(--surface-bright))}:host([color=surface-bright]){color:hsl(var(--surface-bright))}:host([background=surface-container-lowest]){background-color:hsl(var(--surface-container-lowest))}:host([color=surface-container-lowest]){color:hsl(var(--surface-container-lowest))}:host([background=surface-container-low]){background-color:hsl(var(--surface-container-low))}:host([color=surface-container-low]){color:hsl(var(--surface-container-low))}:host([background=surface-container]){background-color:hsl(var(--surface-container))}:host([color=surface-container]){color:hsl(var(--surface-container))}:host([background=surface-container-high]){background-color:hsl(var(--surface-container-high))}:host([color=surface-container-high]){color:hsl(var(--surface-container-high))}:host([background=surface-container-highest]){background-color:hsl(var(--surface-container-highest))}:host([color=surface-container-highest]){color:hsl(var(--surface-container-highest))}:host([background=surface-variant]){background-color:hsl(var(--surface-variant))}:host([color=surface-variant]){color:hsl(var(--surface-variant))}:host([background=on-surface-variant]){background-color:hsl(var(--on-surface-variant))}:host([color=on-surface-variant]){color:hsl(var(--on-surface-variant))}:host([background=outline]){background-color:hsl(var(--outline))}:host([color=outline]){color:hsl(var(--outline))}:host([background=outline-variant]){background-color:hsl(var(--outline-variant))}:host([color=outline-variant]){color:hsl(var(--outline-variant))}:host([background=inverse-surface]){background-color:hsl(var(--inverse-surface))}:host([color=inverse-surface]){color:hsl(var(--inverse-surface))}:host([background=inverse-on-surface]){background-color:hsl(var(--inverse-on-surface))}:host([color=inverse-on-surface]){color:hsl(var(--inverse-on-surface))}:host([background=background]){background-color:hsl(var(--background))}:host([color=background]){color:hsl(var(--background))}:host([background=on-background]){background-color:hsl(var(--on-background))}:host([color=on-background]){color:hsl(var(--on-background))}:host([background=shadow]){background-color:hsl(var(--shadow))}:host([color=shadow]){color:hsl(var(--shadow))}:host([background=primary-10]){background-color:hsl(var(--primary-10))}:host([color=primary-10]){color:hsl(var(--primary-10))}:host([background=primary-20]){background-color:hsl(var(--primary-20))}:host([color=primary-20]){color:hsl(var(--primary-20))}:host([background=primary-30]){background-color:hsl(var(--primary-30))}:host([color=primary-30]){color:hsl(var(--primary-30))}:host([background=primary-40]){background-color:hsl(var(--primary-40))}:host([color=primary-40]){color:hsl(var(--primary-40))}:host([background=primary-50]){background-color:hsl(var(--primary-50))}:host([color=primary-50]){color:hsl(var(--primary-50))}:host([background=primary-60]){background-color:hsl(var(--primary-60))}:host([color=primary-60]){color:hsl(var(--primary-60))}:host([background=primary-70]){background-color:hsl(var(--primary-70))}:host([color=primary-70]){color:hsl(var(--primary-70))}:host([background=primary-80]){background-color:hsl(var(--primary-80))}:host([color=primary-80]){color:hsl(var(--primary-80))}:host([background=primary-90]){background-color:hsl(var(--primary-90))}:host([color=primary-90]){color:hsl(var(--primary-90))}:host([background=primary-95]){background-color:hsl(var(--primary-95))}:host([color=primary-95]){color:hsl(var(--primary-95))}:host([background=primary-99]){background-color:hsl(var(--primary-99))}:host([color=primary-99]){color:hsl(var(--primary-99))}:host([background=primary-100]){background-color:hsl(var(--primary-100))}:host([color=primary-100]){color:hsl(var(--primary-100))}:host([background=secondary-0]){background-color:hsl(var(--secondary-0))}:host([color=secondary-0]){color:hsl(var(--secondary-0))}:host([background=secondary-10]){background-color:hsl(var(--secondary-10))}:host([color=secondary-10]){color:hsl(var(--secondary-10))}:host([background=secondary-20]){background-color:hsl(var(--secondary-20))}:host([color=secondary-20]){color:hsl(var(--secondary-20))}:host([background=secondary-30]){background-color:hsl(var(--secondary-30))}:host([color=secondary-30]){color:hsl(var(--secondary-30))}:host([background=secondary-40]){background-color:hsl(var(--secondary-40))}:host([color=secondary-40]){color:hsl(var(--secondary-40))}:host([background=secondary-50]){background-color:hsl(var(--secondary-50))}:host([color=secondary-50]){color:hsl(var(--secondary-50))}:host([background=secondary-60]){background-color:hsl(var(--secondary-60))}:host([color=secondary-60]){color:hsl(var(--secondary-60))}:host([background=secondary-70]){background-color:hsl(var(--secondary-70))}:host([color=secondary-70]){color:hsl(var(--secondary-70))}:host([background=secondary-80]){background-color:hsl(var(--secondary-80))}:host([color=secondary-80]){color:hsl(var(--secondary-80))}:host([background=secondary-90]){background-color:hsl(var(--secondary-90))}:host([color=secondary-90]){color:hsl(var(--secondary-90))}:host([background=secondary-100]){background-color:hsl(var(--secondary-100))}:host([color=secondary-100]){color:hsl(var(--secondary-100))}:host([background=tertiary-0]){background-color:hsl(var(--tertiary-0))}:host([color=tertiary-0]){color:hsl(var(--tertiary-0))}:host([background=tertiary-10]){background-color:hsl(var(--tertiary-10))}:host([color=tertiary-10]){color:hsl(var(--tertiary-10))}:host([background=tertiary-20]){background-color:hsl(var(--tertiary-20))}:host([color=tertiary-20]){color:hsl(var(--tertiary-20))}:host([background=tertiary-30]){background-color:hsl(var(--tertiary-30))}:host([color=tertiary-30]){color:hsl(var(--tertiary-30))}:host([background=tertiary-40]){background-color:hsl(var(--tertiary-40))}:host([color=tertiary-40]){color:hsl(var(--tertiary-40))}:host([background=tertiary-50]){background-color:hsl(var(--tertiary-50))}:host([color=tertiary-50]){color:hsl(var(--tertiary-50))}:host([background=tertiary-60]){background-color:hsl(var(--tertiary-60))}:host([color=tertiary-60]){color:hsl(var(--tertiary-60))}:host([background=tertiary-70]){background-color:hsl(var(--tertiary-70))}:host([color=tertiary-70]){color:hsl(var(--tertiary-70))}:host([background=tertiary-80]){background-color:hsl(var(--tertiary-80))}:host([color=tertiary-80]){color:hsl(var(--tertiary-80))}:host([background=tertiary-90]){background-color:hsl(var(--tertiary-90))}:host([color=tertiary-90]){color:hsl(var(--tertiary-90))}:host([background=tertiary-100]){background-color:hsl(var(--tertiary-100))}:host([color=tertiary-100]){color:hsl(var(--tertiary-100))}:host([background=neutral-0]){background-color:hsl(var(--neutral-0))}:host([color=neutral-0]){color:hsl(var(--neutral-0))}:host([background=neutral-10]){background-color:hsl(var(--neutral-10))}:host([color=neutral-10]){color:hsl(var(--neutral-10))}:host([background=neutral-20]){background-color:hsl(var(--neutral-20))}:host([color=neutral-20]){color:hsl(var(--neutral-20))}:host([background=neutral-30]){background-color:hsl(var(--neutral-30))}:host([color=neutral-30]){color:hsl(var(--neutral-30))}:host([background=neutral-40]){background-color:hsl(var(--neutral-40))}:host([color=neutral-40]){color:hsl(var(--neutral-40))}:host([background=neutral-50]){background-color:hsl(var(--neutral-50))}:host([color=neutral-50]){color:hsl(var(--neutral-50))}:host([background=neutral-60]){background-color:hsl(var(--neutral-60))}:host([color=neutral-60]){color:hsl(var(--neutral-60))}:host([background=neutral-70]){background-color:hsl(var(--neutral-70))}:host([color=neutral-70]){color:hsl(var(--neutral-70))}:host([background=neutral-80]){background-color:hsl(var(--neutral-80))}:host([color=neutral-80]){color:hsl(var(--neutral-80))}:host([background=neutral-90]){background-color:hsl(var(--neutral-90))}:host([color=neutral-90]){color:hsl(var(--neutral-90))}:host([background=neutral-100]){background-color:hsl(var(--neutral-100))}:host([color=neutral-100]){color:hsl(var(--neutral-100))}:host([background=error-0]){background-color:hsl(var(--error-0))}:host([color=error-0]){color:hsl(var(--error-0))}:host([background=error-10]){background-color:hsl(var(--error-10))}:host([color=error-10]){color:hsl(var(--error-10))}:host([background=error-20]){background-color:hsl(var(--error-20))}:host([color=error-20]){color:hsl(var(--error-20))}:host([background=error-30]){background-color:hsl(var(--error-30))}:host([color=error-30]){color:hsl(var(--error-30))}:host([background=error-40]){background-color:hsl(var(--error-40))}:host([color=error-40]){color:hsl(var(--error-40))}:host([background=error-50]){background-color:hsl(var(--error-50))}:host([color=error-50]){color:hsl(var(--error-50))}:host([background=error-60]){background-color:hsl(var(--error-60))}:host([color=error-60]){color:hsl(var(--error-60))}:host([background=error-70]){background-color:hsl(var(--error-70))}:host([color=error-70]){color:hsl(var(--error-70))}:host([background=error-80]){background-color:hsl(var(--error-80))}:host([color=error-80]){color:hsl(var(--error-80))}:host([background=error-90]){background-color:hsl(var(--error-90))}:host([color=error-90]){color:hsl(var(--error-90))}:host([background=error-100]){background-color:hsl(var(--error-100))}:host([color=error-100]){color:hsl(var(--error-100))}:host([direction=column]){flex-direction:column}:host([direction=row]){flex-direction:row}:host([direction=row-reverse]){flex-direction:row-reverse}:host([direction=column-reverse]){flex-direction:column-reverse}:host([text=center]){text-align:center}:host([text=justify]){text-align:justify}:host([text=left]){text-align:left}:host([text=right]){text-align:right}:host([weight="100"]){font-weight:100}:host([weight="200"]){font-weight:200}:host([weight="300"]){font-weight:300}:host([weight="400"]){font-weight:400}:host([weight="500"]){font-weight:500}:host([weight="600"]){font-weight:600}:host([weight="700"]){font-weight:700}:host([weight="800"]){font-weight:800}:host([weight="900"]){font-weight:900}:host([weight=lighter]){font-weight:lighter}:host([weight=bold]){font-weight:bold}:host([weight=bolder]){font-weight:bolder}:host([direction=row]){flex-direction:row}:host([direction=row-reverse]){flex-direction:row}:host([elevation="1"]){box-shadow:var(--box-elevation, 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15))}:host([elevation="2"]){box-shadow:var(--box-elevation, 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15))}:host([elevation="3"]){box-shadow:var(--box-elevation, 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15))}:host([fill=horizontal]){width:100%}:host([fill=vertical]){height:100%}:host([fill=true]){width:100%;height:100%}:host([flex=grow]){flex:1 0}:host([flex=shrink]){flex:0 1}:host([flex=true]){flex:1 1}:host([flex=false]){flex:0 0}:host([gap=xsmall]) ::slotted(*),:host([gap=xsmall][direction=column]) ::slotted(*){margin:var(--spacing-xs, 0.25rem) 0}:host([gap=xsmall][direction=row]) ::slotted(*){margin:0 var(--spacing-xs, 0.25rem)}:host([margin=xsmall]){margin:var(--box-margin, var(--spacing-xs, 0.25rem))}:host([vmargin=xsmall]){margin-top:var(--box-margin, var(--spacing-xs, 0.25rem));margin-bottom:var(--box-margin, var(--spacing-xs, 0.25rem))}:host([hmargin=xsmall]){margin-left:var(--box-margin, var(--spacing-xs, 0.25rem));margin-right:var(--box-margin, var(--spacing-xs, 0.25rem))}:host([margin="xsmall auto"]){margin:var(--box-margin, var(--spacing-xs, 0.25rem)) auto}:host([margin="auto xsmall"]){margin:auto var(--box-margin, var(--spacing-xs, 0.25rem))}:host([padding=xsmall]){padding:var(--box-padding, var(--spacing-xs, 0.25rem))}:host([vpadding=xsmall]){padding-top:var(--box-padding, var(--spacing-xs, 0.25rem));padding-bottom:var(--box-padding, var(--spacing-xs, 0.25rem))}:host([hpadding=xsmall]){padding-left:var(--box-padding, var(--spacing-xs, 0.25rem));padding-right:var(--box-padding, var(--spacing-xs, 0.25rem))}:host([gap=small]) ::slotted(*),:host([gap=small][direction=column]) ::slotted(*){margin:var(--spacing-s, 0.5rem) 0}:host([gap=small][direction=row]) ::slotted(*){margin:0 var(--spacing-s, 0.5rem)}:host([margin=small]){margin:var(--box-margin, var(--spacing-s, 0.5rem))}:host([vmargin=small]){margin-top:var(--box-margin, var(--spacing-s, 0.5rem));margin-bottom:var(--box-margin, var(--spacing-s, 0.5rem))}:host([hmargin=small]){margin-left:var(--box-margin, var(--spacing-s, 0.5rem));margin-right:var(--box-margin, var(--spacing-s, 0.5rem))}:host([margin="small auto"]){margin:var(--box-margin, var(--spacing-s, 0.5rem)) auto}:host([margin="auto small"]){margin:auto var(--box-margin, var(--spacing-s, 0.5rem))}:host([padding=small]){padding:var(--box-padding, var(--spacing-s, 0.5rem))}:host([vpadding=small]){padding-top:var(--box-padding, var(--spacing-s, 0.5rem));padding-bottom:var(--box-padding, var(--spacing-s, 0.5rem))}:host([hpadding=small]){padding-left:var(--box-padding, var(--spacing-s, 0.5rem));padding-right:var(--box-padding, var(--spacing-s, 0.5rem))}:host([gap=medium]) ::slotted(*),:host([gap=medium][direction=column]) ::slotted(*){margin:var(--spacing-m, 1rem) 0}:host([gap=medium][direction=row]) ::slotted(*){margin:0 var(--spacing-m, 1rem)}:host([margin=medium]){margin:var(--box-margin, var(--spacing-m, 1rem))}:host([vmargin=medium]){margin-top:var(--box-margin, var(--spacing-m, 1rem));margin-bottom:var(--box-margin, var(--spacing-m, 1rem))}:host([hmargin=medium]){margin-left:var(--box-margin, var(--spacing-m, 1rem));margin-right:var(--box-margin, var(--spacing-m, 1rem))}:host([margin="medium auto"]){margin:var(--box-margin, var(--spacing-m, 1rem)) auto}:host([margin="auto medium"]){margin:auto var(--box-margin, var(--spacing-m, 1rem))}:host([padding=medium]){padding:var(--box-padding, var(--spacing-m, 1rem))}:host([vpadding=medium]){padding-top:var(--box-padding, var(--spacing-m, 1rem));padding-bottom:var(--box-padding, var(--spacing-m, 1rem))}:host([hpadding=medium]){padding-left:var(--box-padding, var(--spacing-m, 1rem));padding-right:var(--box-padding, var(--spacing-m, 1rem))}:host([gap=large]) ::slotted(*),:host([gap=large][direction=column]) ::slotted(*){margin:var(--spacing-l, 1.25rem) 0}:host([gap=large][direction=row]) ::slotted(*){margin:0 var(--spacing-l, 1.25rem)}:host([margin=large]){margin:var(--box-margin, var(--spacing-l, 1.25rem))}:host([vmargin=large]){margin-top:var(--box-margin, var(--spacing-l, 1.25rem));margin-bottom:var(--box-margin, var(--spacing-l, 1.25rem))}:host([hmargin=large]){margin-left:var(--box-margin, var(--spacing-l, 1.25rem));margin-right:var(--box-margin, var(--spacing-l, 1.25rem))}:host([margin="large auto"]){margin:var(--box-margin, var(--spacing-l, 1.25rem)) auto}:host([margin="auto large"]){margin:auto var(--box-margin, var(--spacing-l, 1.25rem))}:host([padding=large]){padding:var(--box-padding, var(--spacing-l, 1.25rem))}:host([vpadding=large]){padding-top:var(--box-padding, var(--spacing-l, 1.25rem));padding-bottom:var(--box-padding, var(--spacing-l, 1.25rem))}:host([hpadding=large]){padding-left:var(--box-padding, var(--spacing-l, 1.25rem));padding-right:var(--box-padding, var(--spacing-l, 1.25rem))}:host([gap=xlarge]) ::slotted(*),:host([gap=xlarge][direction=column]) ::slotted(*){margin:var(--spacing-xl, 2rem) 0}:host([gap=xlarge][direction=row]) ::slotted(*){margin:0 var(--spacing-xl, 2rem)}:host([margin=xlarge]){margin:var(--box-margin, var(--spacing-xl, 2rem))}:host([vmargin=xlarge]){margin-top:var(--box-margin, var(--spacing-xl, 2rem));margin-bottom:var(--box-margin, var(--spacing-xl, 2rem))}:host([hmargin=xlarge]){margin-left:var(--box-margin, var(--spacing-xl, 2rem));margin-right:var(--box-margin, var(--spacing-xl, 2rem))}:host([margin="xlarge auto"]){margin:var(--box-margin, var(--spacing-xl, 2rem)) auto}:host([margin="auto xlarge"]){margin:auto var(--box-margin, var(--spacing-xl, 2rem))}:host([padding=xlarge]){padding:var(--box-padding, var(--spacing-xl, 2rem))}:host([vpadding=xlarge]){padding-top:var(--box-padding, var(--spacing-xl, 2rem));padding-bottom:var(--box-padding, var(--spacing-xl, 2rem))}:host([hpadding=xlarge]){padding-left:var(--box-padding, var(--spacing-xl, 2rem));padding-right:var(--box-padding, var(--spacing-xl, 2rem))}:host([font=xsmall]),:host([size=xsmall]){font-size:var(--box-font-size, var(--font-size-xs, 0.625rem))}:host([font=small]),:host([size=small]){font-size:var(--box-font-size, var(--font-size-s, 0.875rem))}:host([font=medium]),:host([size=medium]){font-size:var(--box-font-size, var(--font-size-m, 1rem))}:host([font=large]),:host([size=large]){font-size:var(--box-font-size, var(--font-size-l, 1.25rem))}:host([font=xlarge]),:host([size=xlarge]){font-size:var(--box-font-size, var(--font-size-xl, 1.5rem))}:host([font=xxlarge]),:host([size=xxlarge]){font-size:var(--box-font-size, var(--font-size-xxl, 2.25rem))}:host([justify=start]){justify-content:flex-start}:host([justify=end]){justify-content:flex-end}:host([justify=stretch]){justify-content:stretch}:host([justify=baseline]){justify-content:baseline}:host([justify=center]){justify-content:center}:host([justify=around]){justify-content:space-around}:host([justify=between]){justify-content:space-between}:host([justify=evenly]){justify-content:space-evenly}:host([overflow=auto]){overflow:auto}:host([overflow=hidden]){overflow:hidden}:host([overflow=scroll]){overflow:scroll}:host([overflow=visible]){overflow:visible}:host([radius=none]){border-radius:var(--box-border-radius, 0)}:host([radius=small]){border-radius:var(--box-border-radius, var(--border-radius-small, 0.125rem))}:host([radius=medium]){border-radius:var(--box-border-radius, var(--border-radius-medium, 0.25rem))}:host([radius=large]){border-radius:var(--box-border-radius, var(--border-radius-large, 0.5rem))}:host([radius=xlarge]){border-radius:var(--box-border-radius, var(--border-radius-x-large, 1rem))}:host([radius=circle]){border-radius:var(--box-border-radius, var(--border-radius-circle, 50%))}:host([radius=pill]){border-radius:var(--box-border-radius, var(--border-radius-pill, 9999px))}:host([max-width=xxsmall]){max-width:var(--box-max-width, var(--size-xxs, 2rem))}:host([width=xxsmall]){width:var(--box-width, var(--size-xxs, 2rem))}:host([max-height=xxsmall]){max-height:var(--box-max-height, var(--size-xxs, 2rem))}:host([height=xxsmall]){height:var(--box-height, var(--size-xxs, 2rem))}:host([max-width=xsmall]){max-width:var(--box-max-width, var(--size-xs, 4rem))}:host([width=xsmall]){width:var(--box-width, var(--size-xs, 4rem))}:host([max-height=xsmall]){max-height:var(--box-max-height, var(--size-xs, 4rem))}:host([height=xsmall]){height:var(--box-height, var(--size-xs, 4rem))}:host([max-width=small]){max-width:var(--box-max-width, var(--size-s, 8rem))}:host([width=small]){width:var(--box-width, var(--size-s, 8rem))}:host([max-height=small]){max-height:var(--box-max-height, var(--size-s, 8rem))}:host([height=small]){height:var(--box-height, var(--size-s, 8rem))}:host([max-width=medium]){max-width:var(--box-max-width, var(--size-m, 16rem))}:host([width=medium]){width:var(--box-width, var(--size-m, 16rem))}:host([max-height=medium]){max-height:var(--box-max-height, var(--size-m, 16rem))}:host([height=medium]){height:var(--box-height, var(--size-m, 16rem))}:host([max-width=large]){max-width:var(--box-max-width, var(--size-l, 32rem))}:host([width=large]){width:var(--box-width, var(--size-l, 32rem))}:host([max-height=large]){max-height:var(--box-max-height, var(--size-l, 32rem))}:host([height=large]){height:var(--box-height, var(--size-l, 32rem))}:host([max-width=xlarge]){max-width:var(--box-max-width, var(--size-xl, 48rem))}:host([width=xlarge]){width:var(--box-width, var(--size-xl, 48rem))}:host([max-height=xlarge]){max-height:var(--box-max-height, var(--size-xl, 48rem))}:host([height=xlarge]){height:var(--box-height, var(--size-xl, 48rem))}:host([max-width=xxlarge]){max-width:var(--box-max-width, var(--size-xxl, 64rem))}:host([width=xxlarge]){width:var(--box-width, var(--size-xxl, 64rem))}:host([max-height=xxlarge]){max-height:var(--box-max-height, var(--size-xxl, 64rem))}:host([height=xxlarge]){height:var(--box-height, var(--size-xxl, 64rem))}:host([wrap=true]){flex-wrap:wrap}:host([wrap=reverse]){flex-wrap:wrap-reverse}')}
|
|
3
3
|
`]}render(){return c.html`
|
|
4
4
|
<slot></slot>
|
|
@@ -81,11 +81,28 @@
|
|
|
81
81
|
/>
|
|
82
82
|
`}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.onKeyDown.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.onKeyDown)}firstUpdated(){this.appendChild(this.$input)}onKeyDown(t){"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),t.stopPropagation(),this.click())}handleClick(){this.checked=!this.checked,setTimeout(()=>this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}};z.styles=c.css`
|
|
83
83
|
${(0,c.unsafeCSS)("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{display:inline-flex}:host .state{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:100%;outline:none;overflow:hidden}:host .checkbox{width:18px;height:18px;border:solid 2px hsl(var(--primary));transition:var(--checkbox-transition, background var(--transition-duration-fast, 0.12s) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)), border-color var(--transition-duration-fast, 0.12s) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)));position:relative;display:inline-flex;align-items:center;justify-content:center;outline:none;-webkit-user-select:none;user-select:none;margin:0 5px}:host .label{user-select:none}:host([checked]) .checkbox{background-color:hsl(var(--primary))}:host([checked]:not([indeterminate])) #checkmark-path,:host([indeterminate]) #indeterminate-path{stroke-dashoffset:0}:host(:focus) #checkmark-path,:host(:hover) #checkmark-path{will-change:stroke-dashoffset}#checkmark{padding:1px}#checkmark-path,#indeterminate-path{stroke-width:5px;stroke:hsl(var(--on-primary));stroke-dasharray:30;stroke-dashoffset:30;transition:var(--checkbox-checkmark-transition, stroke-dashoffset var(--transition-duration-medium, 0.18s) var(--transition-timing-function-deceleration-curve, cubic-bezier(0, 0, 0.2, 1)))}#checkmark-path{transition-delay:var(--checkbox-checkmark-path-delay, 50ms)}:host(:not([disabled])){cursor:pointer}:host(:focus) .state,:host(:hover) .state{background:hsla(var(--on-surface), 0.3)}:host([checked]:focus) .state,:host([checked]:hover) .state{background:hsla(var(--primary), 0.3)}:host([checked]:focus) .checked,:host([checked]:hover) .checked{background-color:hsl(var(--primary))}:host([disabled]){pointer-events:none}:host([disabled]) .checkbox{border-color:hsla(var(--on-surface), 0);background-color:hsla(var(--on-surface), 0.3)}:host([disabled]) #checkmark-path,:host([disabled]) #indeterminate-path{stroke:hsla(var(--on-surface-variant, 0.3))}:host([disabled]) .label{opacity:.6}")}
|
|
84
|
-
`,$([(0,h.property)({attribute:!0,type:String})],z.prototype,"name",void 0),$([(0,h.property)({attribute:!0,type:String,reflect:!0})],z.prototype,"value",void 0),$([(0,h.property)({attribute:!0,type:Boolean,reflect:!0})],z.prototype,"checked",void 0),$([(0,h.property)({type:Boolean})],z.prototype,"disabled",void 0),$([(0,h.query)("input")],z.prototype,"$input",void 0),z=$([(0,h.customElement)("tk-checkbox")],z);var S=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let j=class extends c.LitElement{render(){return c.html`
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
`,$([(0,h.property)({attribute:!0,type:String})],z.prototype,"name",void 0),$([(0,h.property)({attribute:!0,type:String,reflect:!0})],z.prototype,"value",void 0),$([(0,h.property)({attribute:!0,type:Boolean,reflect:!0})],z.prototype,"checked",void 0),$([(0,h.property)({type:Boolean})],z.prototype,"disabled",void 0),$([(0,h.query)("input")],z.prototype,"$input",void 0),z=$([(0,h.customElement)("tk-checkbox")],z);var S=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let j=class extends c.LitElement{constructor(){super(...arguments),this.disabled=!1,this.removable=!1}onRemove(){this.dispatchEvent(new CustomEvent("remove",{bubbles:!0,composed:!0}))}render(){return c.html`
|
|
85
|
+
<div class="chip ${this.disabled?"disabled":""}">
|
|
86
|
+
|
|
87
|
+
<!-- 3. LEADING ICON (optional) -->
|
|
88
|
+
<span class="leading">
|
|
89
|
+
<slot name="leading"></slot>
|
|
90
|
+
</span>
|
|
91
|
+
|
|
92
|
+
<!-- 2. LABEL TEXT -->
|
|
93
|
+
<span class="label">
|
|
94
|
+
<slot></slot>
|
|
95
|
+
</span>
|
|
96
|
+
|
|
97
|
+
<!-- 4. TRAILING ICON -->
|
|
98
|
+
<span class="trailing">
|
|
99
|
+
<slot name="trailing">
|
|
100
|
+
${this.removable?c.html`<button class="remove" @click=${this.onRemove}>✕</button>`:""}
|
|
101
|
+
</slot>
|
|
102
|
+
</span>
|
|
103
|
+
|
|
104
|
+
</div>
|
|
105
|
+
`}};j.styles=c.css`${(0,c.unsafeCSS)("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}.chip{display:inline-flex;align-items:center;border-radius:16px;padding:4px 12px;background:hsl(var(--surface-container-highest));border:1px solid hsl(var(--outline-variant));font-size:14px;height:32px;gap:8px;cursor:pointer}.chip.disabled{opacity:.4;pointer-events:none}.chip .leading{display:inline-flex;align-items:center}.chip .label{white-space:nowrap}.chip .trailing{display:inline-flex;align-items:center}.chip .trailing .remove{background:none;border:none;cursor:pointer;font-size:14px;opacity:.7}.chip .trailing .remove:hover{opacity:1}")}`,S([(0,h.property)({type:Boolean})],j.prototype,"disabled",void 0),S([(0,h.property)({type:Boolean})],j.prototype,"removable",void 0),j=S([(0,h.customElement)("tk-chip")],j);var E=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let C=class extends c.LitElement{constructor(){super(...arguments),this.modal=!1,this.open=!1,this.blurOverlay=!1}render(){return c.html`
|
|
89
106
|
${this.open?c.html`
|
|
90
107
|
<div class="overlay ${this.blurOverlay?"blur":""}" @click=${()=>this.modal?null:this.hide()}></div>
|
|
91
108
|
<div class="container">
|
|
@@ -122,7 +139,7 @@
|
|
|
122
139
|
`:c.html`
|
|
123
140
|
${(0,D.unsafeHTML)(this.svg)}
|
|
124
141
|
`}
|
|
125
|
-
`}updated(t){t.has("name")&&this.name&&this.loadIcon()}loadIcon(){return P(this,void 0,void 0,function*(){const t=this.library?document.querySelector(`tk-icons[library=${this.library}]`):document.querySelector("tk-icons");t&&(this.svg=yield fetch(t.resolve(this.name)).then(t=>t.blob().then(r=>({contentType:t.headers.get("Content-Type"),raw:r}))).then(t=>t.contentType&&/svg/.test(t.contentType)?t.raw.text():""))})}};L([(0,h.property)()],q.prototype,"name",void 0),L([(0,h.property)()],q.prototype,"library",void 0),L([(0,h.property)()],q.prototype,"path",void 0),L([(0,h.property)()],q.prototype,"svg",void 0),q=L([(0,h.customElement)("tk-icon")],q);var A=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let B=class extends c.LitElement{constructor(){super(...arguments),this.library="default"}firstUpdated(){window.document.body.appendChild(this)}};A([(0,h.property)({attribute:!1})],B.prototype,"resolve",void 0),A([(0,h.property)({reflect:!0})],B.prototype,"library",void 0),B=A([(0,h.customElement)("tk-icons")],B);var N=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let
|
|
142
|
+
`}updated(t){t.has("name")&&this.name&&this.loadIcon()}loadIcon(){return P(this,void 0,void 0,function*(){const t=this.library?document.querySelector(`tk-icons[library=${this.library}]`):document.querySelector("tk-icons");t&&(this.svg=yield fetch(t.resolve(this.name)).then(t=>t.blob().then(r=>({contentType:t.headers.get("Content-Type"),raw:r}))).then(t=>t.contentType&&/svg/.test(t.contentType)?t.raw.text():""))})}};L([(0,h.property)()],q.prototype,"name",void 0),L([(0,h.property)()],q.prototype,"library",void 0),L([(0,h.property)()],q.prototype,"path",void 0),L([(0,h.property)()],q.prototype,"svg",void 0),q=L([(0,h.customElement)("tk-icon")],q);var A=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let B=class extends c.LitElement{constructor(){super(...arguments),this.library="default"}firstUpdated(){window.document.body.appendChild(this)}};A([(0,h.property)({attribute:!1})],B.prototype,"resolve",void 0),A([(0,h.property)({reflect:!0})],B.prototype,"library",void 0),B=A([(0,h.customElement)("tk-icons")],B);var N=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let I=class extends u{static get styles(){return[...u.styles,c.css`
|
|
126
143
|
${(0,c.unsafeCSS)("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{height:56px;padding:0 24px 0 16px;border-radius:28px;display:flex;flex-direction:row;align-items:center;outline:none;overflow:hidden;position:relative;text-align:left;color:hsl(var(--on-surface-variant))}:host([clickable]),:host([href]){user-select:none}:host([clickable]:not([active]):not([disabled])),:host([href]:not([active]):not([disabled])){cursor:pointer}:host(:hover),:host(:focus){will-change:background,color;background-color:hsla(var(--on-surface), 0.08);color:hsl(var(--on-surface))}:host([active]){background-color:hsla(var(--secondary-container), 1);color:hsl(var(--on-secondary-container))}:host([active]:focus),:host([active]:hover){background-color:hsla(var(--secondary-container), 1);color:hsl(var(--on-secondary-container))}:host([disabled]){background:hsla(var(--surface-container-highest), 0.12);color:hsl(var(--on-surface-variant));opacity:.4;pointer-events:none}::slotted([slot=before]),::slotted([slot=after]){flex-shrink:0}::slotted([slot=before]){align-self:var(--list-item-left-align-self, center);margin:0 var(--spacing-m, 1rem) 0 0}::slotted([slot=after]){align-self:var(--list-item-left-align-self, center);margin:0 0 0 var(--spacing-m, 1rem)}#content{flex-grow:1;display:flex;flex-direction:column;max-width:100%}")}
|
|
127
144
|
`]}render(){return c.html`
|
|
128
145
|
<slot name="before" @click=${this.handleClick}></slot>
|
|
@@ -133,13 +150,13 @@
|
|
|
133
150
|
${this.href?c.html`
|
|
134
151
|
<a tabindex="-1" id="ahref" href="${this.href}" target=${(0,d.ifDefined)(this.target)} rel="noreferrer" aria-label=${this.ariaLabel}></a>
|
|
135
152
|
`:""}
|
|
136
|
-
`}constructor(){super(),this.href="",this.target=""}firstUpdated(){!this.ariaLabel&&this.innerText&&(this.ariaLabel=this.innerText)}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.onKeyDown.bind(this)),this.addEventListener("click",this.handleClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.onKeyDown)}onKeyDown(t){"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),t.stopPropagation(),this.click())}handleClick(t){const r=t.target;"BUTTON"!=r.tagName&&"TK-BUTTON"!=r.tagName&&"TK-SWITCH"!=r.tagName&&"TK-CHECKBOX"!=r.tagName&&this.href&&t.isTrusted&&(t.stopPropagation(),t.preventDefault(),this.$ahref.click())}};N([(0,h.property)({attribute:!0})],
|
|
153
|
+
`}constructor(){super(),this.href="",this.target=""}firstUpdated(){!this.ariaLabel&&this.innerText&&(this.ariaLabel=this.innerText)}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.onKeyDown.bind(this)),this.addEventListener("click",this.handleClick.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.onKeyDown)}onKeyDown(t){"Space"!==t.code&&"Enter"!==t.code||(t.preventDefault(),t.stopPropagation(),this.click())}handleClick(t){const r=t.target;"BUTTON"!=r.tagName&&"TK-BUTTON"!=r.tagName&&"TK-SWITCH"!=r.tagName&&"TK-CHECKBOX"!=r.tagName&&this.href&&t.isTrusted&&(t.stopPropagation(),t.preventDefault(),this.$ahref.click())}};N([(0,h.property)({attribute:!0})],I.prototype,"href",void 0),N([(0,h.property)({attribute:!0})],I.prototype,"target",void 0),N([(0,h.property)({attribute:"aria-label"})],I.prototype,"ariaLabel",void 0),N([(0,h.query)("#ahref")],I.prototype,"$ahref",void 0),I=N([(0,h.customElement)("tk-list-item")],I);var H=s(125);var K=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let M=class extends u{constructor(){super(...arguments),this.circle=!1,this.indeterminate=!1,this.percent=0}static get styles(){return[...u.styles,c.css`
|
|
137
154
|
${(0,c.unsafeCSS)('*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{--color: hsl(var(--primary));--background-color: var(--tk-loading-background-color, hsl(var(--surface-dim)))}:host([secondary]){--color: hsl(var(--secondary))}:host([error]){--color: hsl(var(--error))}.circle{display:inline-flex;animation:rotator 3s linear infinite;transform-origin:center;width:56px;height:56px}.circle .path{stroke-dasharray:265;stroke-dashoffset:0;transform-origin:center;stroke:var(--color);animation:dash 3s ease-in-out infinite}@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dashoffset:265}50%{stroke-dashoffset:65;transform:rotate(90deg)}100%{stroke-dashoffset:265;transform:rotate(360deg)}}:host([small]) .circle{width:20px;height:20px}:host([small]) .line{height:2px}:host([large]) .circle{width:96px;height:96px}:host([large]) .line{height:14px}.line{position:relative;background-color:var(--background-color);overflow:hidden;height:6px}.line .progress{background-color:var(--color);height:100%}.line .indeterminate{background-color:var(--color)}.line .indeterminate:before{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}.line .indeterminate:after{content:"";position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left,right;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation-delay:1.15s}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}')}
|
|
138
155
|
`]}render(){return c.html`
|
|
139
156
|
${this.circle?c.html`
|
|
140
157
|
<svg class="circle" viewBox="0 0 100 100">
|
|
141
158
|
<circle
|
|
142
|
-
class=${(0,
|
|
159
|
+
class=${(0,H.classMap)({indeterminate:this.indeterminate,path:!0})}
|
|
143
160
|
fill="none"
|
|
144
161
|
stroke-width="1em"
|
|
145
162
|
stroke-linecap="butt"
|
|
@@ -150,14 +167,14 @@
|
|
|
150
167
|
</svg>
|
|
151
168
|
`:c.html`
|
|
152
169
|
<div class="line">
|
|
153
|
-
<div class=${(0,
|
|
170
|
+
<div class=${(0,H.classMap)({progress:!0,indeterminate:this.indeterminate})} style="${`width:${this.percent}%;`}"></div>
|
|
154
171
|
</div>
|
|
155
172
|
`}
|
|
156
|
-
`}};
|
|
173
|
+
`}};K([(0,h.property)({attribute:!0,type:Boolean})],M.prototype,"circle",void 0),K([(0,h.property)({attribute:!0,type:Boolean})],M.prototype,"indeterminate",void 0),K([(0,h.property)({attribute:!0,type:Number})],M.prototype,"percent",void 0),M=K([(0,h.customElement)("tk-loading")],M);var U=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let V=class extends c.LitElement{render(){return c.html`
|
|
157
174
|
<slot></slot>
|
|
158
175
|
`}};V.styles=c.css`
|
|
159
176
|
${(0,c.unsafeCSS)("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host slot{display:flex;justify-content:space-between}")}
|
|
160
|
-
`,V=
|
|
177
|
+
`,V=U([(0,h.customElement)("tk-navigation-bar")],V);var X=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let Y=class extends c.LitElement{constructor(){super(...arguments),this.label="",this.iconPath="",this.activeIconPath="",this.active=!1}render(){return c.html`
|
|
161
178
|
<tk-box align-items="center">
|
|
162
179
|
<tk-box ripple overflow="hidden" tabindex="0" class="indicator">
|
|
163
180
|
<tk-icon path=${this.active&&this.activeIconPath?this.activeIconPath:this.iconPath}></tk-icon>
|
|
@@ -169,9 +186,9 @@
|
|
|
169
186
|
<span class="label">${this.label}</span>
|
|
170
187
|
`:""}
|
|
171
188
|
</tk-box>
|
|
172
|
-
`}};
|
|
189
|
+
`}};Y.styles=c.css`
|
|
173
190
|
${(0,c.unsafeCSS)("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{cursor:pointer}:host .indicator{position:relative;height:32px;width:64px;border-radius:16px;margin-bottom:4px;display:flex;justify-content:center;align-items:center;outline:none}:host .indicator tk-icon{width:24px;height:24px}:host .indicator .badge{display:flex;position:absolute;top:4px;left:35px}:host .label{font-size:12px;line-height:16px;margin-top:4px;font-weight:500}:host([active]){color:hsl(var(--on-secondary-container))}:host([active]) .indicator{background-color:hsl(var(--secondary-container))}:host(:hover){color:hsl(var(--on-surface-variant))}:host(:hover) .indicator{background-color:hsla(var(--on-surface-variant), 0.08)}:host(:focus){color:hsl(var(--on-surface-variant))}:host(:focus) .indicator{background-color:hsla(var(--on-surface-variant), 0.12)}:host([active]:hover){color:hsl(var(--on-surface))}:host([active]:hover) .indicator{background-color:hsla(var(--on-surface), 0.08)}:host([active]:focus){color:hsl(var(--on-surface))}:host([active]:focus) .indicator{background-color:hsl(var(--on-surface), 0.12)}")}
|
|
174
|
-
`,
|
|
191
|
+
`,X([(0,h.property)()],Y.prototype,"label",void 0),X([(0,h.property)()],Y.prototype,"iconPath",void 0),X([(0,h.property)()],Y.prototype,"activeIconPath",void 0),X([(0,h.property)({type:Boolean})],Y.prototype,"active",void 0),Y=X([(0,h.customElement)("tk-navigation-item")],Y);var Q=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let F=class extends u{static get styles(){return[...u.styles,c.css`
|
|
175
192
|
${(0,c.unsafeCSS)("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{color:hsl(var(--primary));background:hsl(var(--on-primary));justify-content:space-between;align-items:center;flex-direction:row}:host([fixed]){position:fixed;top:0;left:0;right:0;z-index:var(--navbar-z-index, 100)}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){display:flex;align-items:center;height:100%}#title,::slotted([slot=title]){margin:var(--nav-title-margin, 0 0 0 var(--spacing-l, 1.25rem))}")}
|
|
176
193
|
`]}render(){return c.html`
|
|
177
194
|
<div id="left">
|
|
@@ -181,7 +198,7 @@
|
|
|
181
198
|
<div id="right">
|
|
182
199
|
<slot name="right"></slot>
|
|
183
200
|
</div>
|
|
184
|
-
`}};F=Q([(0,h.customElement)("tk-topbar")],F);var
|
|
201
|
+
`}};F=Q([(0,h.customElement)("tk-topbar")],F);var G=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let Z=class extends c.LitElement{constructor(){super(...arguments),this._id=v(),this.type="text",this.required=!1,this.disabled=!1,this.readonly=!1}set value(t){this.$input?(this.$input.value=t,this.refreshAttributes()):this.initialValue=t}get value(){return null!=this.$input?this.$input.value:this.initialValue||""}render(){return c.html`
|
|
185
202
|
<div id="container">
|
|
186
203
|
<slot id="before" name="before"></slot>
|
|
187
204
|
<div id="wrapper">
|
|
@@ -211,9 +228,9 @@
|
|
|
211
228
|
</div>
|
|
212
229
|
<slot id="after" name="after"></slot>
|
|
213
230
|
</div>
|
|
214
|
-
`}handleChange(){this.refreshAttributes()}firstUpdated(){var t;this.$input=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("input"),this.appendChild(this.$input),this.initialValue&&(this.value=this.initialValue)}refreshAttributes(){this.$input.value?this.setAttribute("dirty",""):this.removeAttribute("dirty"),this.$input.checkValidity()?this.removeAttribute("invalid"):this.setAttribute("invalid","")}focus(){this.$input.focus()}};
|
|
231
|
+
`}handleChange(){this.refreshAttributes()}firstUpdated(){var t;this.$input=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("input"),this.appendChild(this.$input),this.initialValue&&(this.value=this.initialValue)}refreshAttributes(){this.$input.value?this.setAttribute("dirty",""):this.removeAttribute("dirty"),this.$input.checkValidity()?this.removeAttribute("invalid"):this.setAttribute("invalid","")}focus(){this.$input.focus()}};Z.styles=c.css`
|
|
215
232
|
${(0,c.unsafeCSS)("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host{transform:translateZ(0);display:block;outline:none}:host #container{background-color:hsla(var(--surface-container-highest), 0.5);color:hsl(var(--on-surface));border-radius:4px 4px 0 0;font-size:var(--input-font-size, 1rem);border-bottom:solid 1px hsl(var(--on-surface-variant));transition:var(--input-transition, border-color var(--transition-duration-medium, 0.18s) var(--transition-timing-function-ease, ease), background var(--transition-duration-medium, 0.18s) var(--transition-timing-function-ease, ease));position:relative;display:flex;align-items:center;overflow:hidden;padding:8px 16px 8px 16px;height:56px}:host #wrapper{position:relative;flex-grow:1}:host #label{color:hsl(var(--on-surface-variant));font-weight:400;line-height:64px;transition:var(--input-label-transition, top var(--transition-duration-fast, 0.12s) var(--transition-timing-function-linear, linear), font-size var(--transition-duration-fast, 0.12s) var(--transition-timing-function-linear, linear), transform var(--transition-duration-fast, 0.12s) var(--transition-timing-function-linear, linear));top:50%;transform:translateY(-50%);z-index:1;position:absolute;pointer-events:none;font-size:inherit;line-height:1;white-space:nowrap;-webkit-user-select:none;user-select:none}:host([disabled]){pointer-events:none;opacity:.38}:host(:hover) #container{background-color:hsla(var(--surface-container-highest), 0.5);color:hsl(var(--on-surface));border-radius:4px 4px 0 0;font-size:var(--input-font-size, 1rem);border-bottom:solid 1px hsl(var(--on-surface))}:host(:focus-within) #container{border-bottom:solid 2px hsl(var(--primary));background-color:hsla(var(--on-surface), 0.3);padding:8px 16px 7px 16px}:host([outlined]) #container{background-color:rgba(0,0,0,0);border:solid 1px hsl(var(--outline));border-radius:4px}:host([outlined]:focus-within) #container{border:solid 2px hsl(var(--primary));padding:7px 15px 7px 15px}:host(:focus-within) #label,:host([dirty]) #label,:host([type=color]) #label,:host([type=date]) #label,:host([type=file]) #label,:host([type=range]) #label{font-size:var(--input-label-font-size, 0.75rem);top:0;transform:translateY(0);color:hsl(var(--primary))}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){caret-color:hsl(var(--primary));padding:var(--input-padding-top-bottom, 0.5rem) var(--_input-padding-left-right);font-size:var(--input-font-size, 1rem);text-align:var(--input-text-align, inherit);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box;display:block;color:inherit;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;margin:0;background:rgba(0,0,0,0);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:16px}:host([invalid]){color:hsl(var(--error))}::slotted(input[type=color]){height:3.75rem;cursor:pointer}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color, hsl(var(--shadow)))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined, 0.75rem)}:host(:not([outlined]):not([filled])) ::slotted([slot=after]),:host([filled]) ::slotted([slot=before]),:host([outlined]) ::slotted([slot=before]){margin-left:var(--input-padding-left-right-outlined, 0.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined, 0.75rem)}")}
|
|
216
|
-
`,
|
|
233
|
+
`,G([(0,h.property)({type:String})],Z.prototype,"value",null),G([(0,h.property)({attribute:!0,type:String})],Z.prototype,"name",void 0),G([(0,h.property)({type:String})],Z.prototype,"list",void 0),G([(0,h.property)({type:String})],Z.prototype,"type",void 0),G([(0,h.property)({type:Boolean})],Z.prototype,"required",void 0),G([(0,h.property)({type:Boolean,reflect:!0})],Z.prototype,"disabled",void 0),G([(0,h.property)({type:Boolean})],Z.prototype,"readonly",void 0),G([(0,h.property)({type:String})],Z.prototype,"autocomplete",void 0),G([(0,h.property)({type:String})],Z.prototype,"autocapitalize",void 0),G([(0,h.property)({type:String})],Z.prototype,"pattern",void 0),G([(0,h.state)()],Z.prototype,"initialValue",void 0),G([(0,h.property)({type:String})],Z.prototype,"label",void 0),G([(0,h.property)({type:Number})],Z.prototype,"min",void 0),G([(0,h.property)({type:Number})],Z.prototype,"max",void 0),G([(0,h.property)({type:Number})],Z.prototype,"minLength",void 0),G([(0,h.property)({type:Number})],Z.prototype,"maxLength",void 0),G([(0,h.eventOptions)({passive:!0})],Z.prototype,"handleChange",null),Z=G([(0,h.customElement)("tk-textfield")],Z);var W,J,tt,rt=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};!function(t){t.show="show",t.force="force",t.confirm="confirm",t.input="input"}(J||(J={})),function(t){t.success="success",t.warning="warning",t.error="error",t.info="info",t.neutral="neutral"}(tt||(tt={}));let et=W=class extends u{static get styles(){return[...u.styles,c.css`
|
|
217
234
|
${(0,c.unsafeCSS)(":host{font-size:1.6rem;display:none;position:fixed;bottom:0;left:0;right:0;top:0;margin:0;z-index:var(--notie-z-index, 400)}:host .overlay{background-color:rgba(0,0,0,.5019607843);position:fixed;top:0;right:0;left:0;bottom:0}:host .container{position:fixed;right:0;left:0;bottom:0;height:fit-content;background-color:hsl(var(--primary));box-shadow:10px 10px 10px 10px var(--shadow);z-index:calc(var(--notie-z-index, 400) + 1);transform:translateY(100%);transition:all 150ms ease-in;color:hsl(var(--on-primary));text-align:center}:host .container.info{color:#fff;background-color:#4d82d6}:host .container.error{color:#fff;background-color:#e1715b}:host .container.warning{color:#fff;background-color:#d6a14d}:host .container.success{color:#fff;background-color:#57bf57}:host .text{padding:.5em}:host .input{--input-font-size: vars.$font-size-widescreen;background-color:var(--background, white);color:var(--foreground, black);text-align:center}:host .button{cursor:pointer;padding:.5em}:host .button.confirm,:host .button.force{background-color:#57bf57;color:#fff}:host .button.cancel{color:var(--on-error, white);background-color:var(--error, #e1715b)}@media screen and (max-width: 900px){:host{font-size:1.4rem}}:host([position=top]) .container{position:fixed;top:0;bottom:inherit;transform:translateY(-100%)}:host([open]) .container{transform:translateY(0)}")}
|
|
218
235
|
`]}render(){return c.html`
|
|
219
236
|
<div class="overlay" @click=${()=>this.type==J.force?null:this.hide(!1)}></div>
|
|
@@ -241,7 +258,7 @@
|
|
|
241
258
|
</tk-box>
|
|
242
259
|
`:""}
|
|
243
260
|
</tk-box>
|
|
244
|
-
`}show(){return new Promise(t=>{this.resolve=t,this.style.setProperty("display","flex"),setTimeout(()=>this.open=!0),this.dispatchEvent(new Event("did-show")),setTimeout(()=>{this.$input&&this.$input.focus()},100),this.type==J.show&&setTimeout(()=>this.hide(!1),this.delay)})}hide(t){t&&this.type===J.input&&(t=this.$input.value),t||this.type!==J.input||(t=null),this.$input&&(this.$input.value=""),this.$container.addEventListener("transitionend",()=>{this.dispatchEvent(new Event("did-hide")),this.resolve(t),this.persistent||this.remove()},{once:!0}),this.open=!1}constructor(t=""){super(),this.persistent=!0,this.open=!1,this.position="bottom",this.type=J.show,this.level=tt.info,this.delay=3e3,this.animationDelay=300,this.inputType="text",this.buttonText="OK",this.confirmText="OK",this.cancelText="CANCEL",this.text=t}static show(t){return this.getNotie(t,J.show).show()}static force(t){const r=this.getNotie(t,J.force);return t.buttonText&&(r.buttonText=t.buttonText),r.show()}static confirm(t){const r=this.getNotie(t,J.confirm);return t.confirmText&&(r.confirmText=t.confirmText),t.cancelText&&(r.cancelText=t.cancelText),r.show()}static input(t){const r=this.getNotie(t,J.input);return t.inputType&&(r.inputType=t.inputType),t.password&&(r.inputType="password"),t.confirmText&&(r.confirmText=t.confirmText),t.cancelText&&(r.cancelText=t.cancelText),r.show()}static getNotie(t,r){var e,o;const a=new
|
|
261
|
+
`}show(){return new Promise(t=>{this.resolve=t,this.style.setProperty("display","flex"),setTimeout(()=>this.open=!0),this.dispatchEvent(new Event("did-show")),setTimeout(()=>{this.$input&&this.$input.focus()},100),this.type==J.show&&setTimeout(()=>this.hide(!1),this.delay)})}hide(t){t&&this.type===J.input&&(t=this.$input.value),t||this.type!==J.input||(t=null),this.$input&&(this.$input.value=""),this.$container.addEventListener("transitionend",()=>{this.dispatchEvent(new Event("did-hide")),this.resolve(t),this.persistent||this.remove()},{once:!0}),this.open=!1}constructor(t=""){super(),this.persistent=!0,this.open=!1,this.position="bottom",this.type=J.show,this.level=tt.info,this.delay=3e3,this.animationDelay=300,this.inputType="text",this.buttonText="OK",this.confirmText="OK",this.cancelText="CANCEL",this.text=t}static show(t){return this.getNotie(t,J.show).show()}static force(t){const r=this.getNotie(t,J.force);return t.buttonText&&(r.buttonText=t.buttonText),r.show()}static confirm(t){const r=this.getNotie(t,J.confirm);return t.confirmText&&(r.confirmText=t.confirmText),t.cancelText&&(r.cancelText=t.cancelText),r.show()}static input(t){const r=this.getNotie(t,J.input);return t.inputType&&(r.inputType=t.inputType),t.password&&(r.inputType="password"),t.confirmText&&(r.confirmText=t.confirmText),t.cancelText&&(r.cancelText=t.cancelText),r.show()}static getNotie(t,r){var e,o;const a=new W(t.text);return a.persistent=!1,a.type=r,a.delay=null!==(e=t.delay)&&void 0!==e?e:999999999,t.level&&(a.level=t.level),t.template&&(a.template=t.template),t.position&&(a.position=t.position),t.background&&a.$container&&a.$container.setAttribute("background-color",t.background),t.color&&a.$container&&a.$container.setAttribute("color",t.color),t.container?null===(o=t.container.shadowRoot)||void 0===o||o.appendChild(a):window.document.body.appendChild(a),t.zIndex&&a.style.setProperty("z-index",t.zIndex.toString()),a}};rt([(0,h.state)()],et.prototype,"persistent",void 0),rt([(0,h.property)({type:Boolean,reflect:!0})],et.prototype,"open",void 0),rt([(0,h.property)({reflect:!0})],et.prototype,"position",void 0),rt([(0,h.state)()],et.prototype,"type",void 0),rt([(0,h.property)({type:String})],et.prototype,"level",void 0),rt([(0,h.property)({type:Number})],et.prototype,"delay",void 0),rt([(0,h.property)()],et.prototype,"text",void 0),rt([(0,h.property)()],et.prototype,"inputType",void 0),rt([(0,h.property)()],et.prototype,"buttonText",void 0),rt([(0,h.property)()],et.prototype,"confirmText",void 0),rt([(0,h.property)()],et.prototype,"cancelText",void 0),rt([(0,h.property)({type:Object})],et.prototype,"template",void 0),rt([(0,h.query)("tk-textfield")],et.prototype,"$input",void 0),rt([(0,h.query)(".container")],et.prototype,"$container",void 0),et=W=rt([(0,h.customElement)("tk-notie")],et);var ot=function(t,r,e,o){var a,i=arguments.length,n=i<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,e):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,r,e,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(n=(i<3?a(n):i>3?a(r,e,n):a(r,e))||n);return i>3&&n&&Object.defineProperty(r,e,n),n};let at=class extends c.LitElement{constructor(){super(...arguments),this._page="",this.selected="",this.handleScroll=!1,this.scrollHistory={}}set page(t){let r=this._page;if(this._page=t,r&&this.handleScroll){if(this.querySelector(`[page=${r}]`)){const t=document.scrollingElement||document.documentElement;this.scrollHistory[r]=t.scrollTop}}this.requestUpdate("page",r)}get page(){return this._page}render(){return c.html`
|
|
245
262
|
<slot></slot>
|
|
246
263
|
`}updated(t){t.has("page")&&this.querySelectorAll(":scope > *").forEach(t=>{var r;const e=null!==(r=t.getAttribute("page"))&&void 0!==r?r:"default",o=document.scrollingElement||document.documentElement;e==this.page?(t.removeAttribute("hidden"),""!=this.selected&&t.setAttribute(this.selected,""),this.handleScroll&&!t.hasAttribute("no-scroll")&&(o.scrollTop=this.scrollHistory[e]?this.scrollHistory[e]:0)):(t.setAttribute("hidden",""),""!=this.selected&&t.removeAttribute(this.selected))})}};at.styles=c.css`
|
|
247
264
|
${(0,c.unsafeCSS)("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}")}
|