tinkiet 0.9.14 → 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/accordion/accordion.d.ts +3 -4
- package/accordion/index.d.ts +1 -1
- package/accordion/index.js +491 -1
- package/badge/badge.d.ts +2 -3
- package/badge/index.d.ts +1 -1
- package/badge/index.js +134 -1
- package/box/box.d.ts +3 -3
- package/box/focusable-box.d.ts +2 -3
- package/box/index.d.ts +1 -1
- package/box/index.js +289 -1
- package/button/button.d.ts +3 -4
- package/button/index.d.ts +1 -1
- package/button/index.js +502 -1
- package/checkbox/checkbox.d.ts +3 -3
- package/checkbox/index.d.ts +1 -1
- package/checkbox/index.js +450 -1
- package/chip/chip.d.ts +17 -3
- package/chip/index.d.ts +1 -1
- package/chip/index.js +168 -1
- package/dialog/dialog.d.ts +2 -3
- package/dialog/index.d.ts +1 -1
- package/dialog/index.js +162 -1
- package/drawer/drawer.d.ts +2 -3
- package/drawer/index.d.ts +1 -1
- package/drawer/index.js +272 -1
- package/form/form.d.ts +1 -2
- package/form/index.d.ts +1 -1
- package/form/index.js +149 -1
- package/icon/icon.d.ts +3 -4
- package/icon/icons.d.ts +1 -2
- package/icon/index.d.ts +2 -2
- package/icon/index.js +457 -2
- package/index.d.ts +52 -26
- package/index.js +3727 -52
- package/list-item/index.d.ts +1 -1
- package/list-item/index.js +414 -1
- package/list-item/list-item.d.ts +3 -4
- package/loading/index.d.ts +1 -1
- package/loading/index.js +389 -1
- package/loading/loading.d.ts +3 -4
- package/navigation/index.d.ts +2 -2
- package/navigation/index.js +201 -2
- package/navigation/navigation-bar.d.ts +2 -3
- package/navigation/navigation-item.d.ts +2 -3
- package/notie/index.d.ts +1 -1
- package/notie/index.js +744 -1
- package/notie/notie.d.ts +12 -11
- package/package.json +3 -4
- package/pages/index.d.ts +1 -1
- package/pages/index.js +178 -1
- package/pages/pages.d.ts +2 -3
- package/radio/index.d.ts +1 -1
- package/radio/index.js +466 -1
- package/radio/radio.d.ts +3 -3
- package/select/index.d.ts +1 -1
- package/select/index.js +493 -1
- package/select/select.d.ts +3 -3
- package/slider/index.d.ts +1 -1
- package/slider/index.js +274 -1
- package/slider/slider.d.ts +2 -3
- package/snackbar/index.d.ts +1 -0
- package/snackbar/snackbar.d.ts +34 -0
- package/switch/index.d.ts +1 -1
- package/switch/index.js +462 -1
- package/switch/switch.d.ts +3 -3
- package/tab-group/index.d.ts +1 -1
- package/tab-group/index.js +182 -1
- package/tab-group/tab-group.d.ts +2 -3
- package/tab-group/tab-item.d.ts +7 -0
- package/textarea/index.d.ts +1 -1
- package/textarea/index.js +272 -1
- package/textarea/textarea.d.ts +2 -3
- package/textfield/index.d.ts +1 -1
- package/textfield/index.js +278 -1
- package/textfield/textfield.d.ts +2 -3
- package/theme/index.d.ts +1 -1
- package/theme/index.js +240 -1
- package/theme/theme.d.ts +2 -3
- package/tooltip/index.d.ts +1 -1
- package/tooltip/index.js +136 -1
- package/tooltip/tooltip.d.ts +2 -3
- package/topbar/index.d.ts +1 -1
- package/topbar/index.js +358 -1
- package/topbar/topbar.d.ts +3 -4
- package/umd/tinkiet.min.js +437 -1
- package/utils/aria.d.ts +11 -0
- package/utils/unique.d.ts +1 -2
- package/accordion/accordion.js +0 -94
- package/accordion/accordion.scss.js +0 -4
- package/badge/badge.js +0 -31
- package/badge/badge.scss.js +0 -4
- package/box/box.js +0 -186
- package/box/box.scss.js +0 -4
- package/box/focusable-box.js +0 -30
- package/button/button.js +0 -141
- package/button/button.scss.js +0 -4
- package/checkbox/checkbox.js +0 -89
- package/checkbox/checkbox.scss.js +0 -4
- package/chip/chip.js +0 -20
- package/chip/chip.scss.js +0 -4
- package/dialog/dialog.js +0 -59
- package/dialog/dialog.scss.js +0 -4
- package/drawer/drawer.js +0 -168
- package/drawer/drawer.scss.js +0 -4
- package/form/form.js +0 -54
- package/icon/icon.js +0 -77
- package/icon/icon.scss.js +0 -4
- package/icon/icons.js +0 -24
- package/index.d.ts.map +0 -1
- package/list-item/list-item.js +0 -86
- package/list-item/list-item.scss.js +0 -4
- package/loading/loading.js +0 -61
- package/loading/loading.scss.js +0 -4
- package/navigation/navigation-bar.js +0 -20
- package/navigation/navigation-bar.scss.js +0 -4
- package/navigation/navigation-item.js +0 -51
- package/navigation/navigation-item.scss.js +0 -4
- package/notie/notie.js +0 -201
- package/notie/notie.scss.js +0 -4
- package/pages/pages.js +0 -75
- package/pages/pages.scss.js +0 -4
- package/radio/radio.js +0 -105
- package/radio/radio.scss.js +0 -4
- package/select/select.js +0 -132
- package/select/select.scss.js +0 -4
- package/slider/slider.js +0 -135
- package/slider/slider.scss.js +0 -4
- package/switch/switch.js +0 -101
- package/switch/switch.scss.js +0 -4
- package/tab-group/tab-group.js +0 -79
- package/tab-group/tab-group.scss.js +0 -4
- package/textarea/textarea.js +0 -133
- package/textarea/textarea.scss.js +0 -4
- package/textfield/textfield.js +0 -138
- package/textfield/textfield.scss.js +0 -4
- package/theme/theme.js +0 -137
- package/theme/theme.scss.js +0 -4
- package/tooltip/tooltip.js +0 -33
- package/tooltip/tooltip.scss.js +0 -4
- package/topbar/topbar.js +0 -33
- package/topbar/topbar.scss.js +0 -4
- package/umd/tinkiet.min.d.ts +0 -660
- package/umd/tinkiet.min.d.ts.map +0 -1
- package/utils/unique.js +0 -12
package/accordion/accordion.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { TkFocusableBox } from "../box/focusable-box
|
|
2
|
-
declare class TkAccordion extends TkFocusableBox {
|
|
1
|
+
import { TkFocusableBox } from "../box/focusable-box";
|
|
2
|
+
export declare class TkAccordion extends TkFocusableBox {
|
|
3
3
|
static get styles(): import("lit").CSSResult[];
|
|
4
4
|
name: string;
|
|
5
5
|
checked: boolean;
|
|
6
6
|
rippleHeader: boolean;
|
|
7
7
|
protected $input: HTMLInputElement;
|
|
8
|
-
render(): import("lit
|
|
8
|
+
render(): import("lit").TemplateResult<1>;
|
|
9
9
|
firstUpdated(): void;
|
|
10
10
|
protected onKeyDown(e: KeyboardEvent): void;
|
|
11
11
|
protected handleClick(): void;
|
|
@@ -15,4 +15,3 @@ declare global {
|
|
|
15
15
|
"tk-accordion": TkAccordion;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
export { TkAccordion };
|
package/accordion/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "./accordion
|
|
1
|
+
export * from "./accordion";
|
package/accordion/index.js
CHANGED
|
@@ -1 +1,491 @@
|
|
|
1
|
-
|
|
1
|
+
import * as __WEBPACK_EXTERNAL_MODULE_lit__ from "lit";
|
|
2
|
+
import * as __WEBPACK_EXTERNAL_MODULE_lit_directives_if_defined_js_76c6050d__ from "lit/directives/if-defined.js";
|
|
3
|
+
import * as __WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__ from "lit/decorators.js";
|
|
4
|
+
/******/ var __webpack_modules__ = ({
|
|
5
|
+
|
|
6
|
+
/***/ 2418:
|
|
7
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
// EXPORTS
|
|
11
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
12
|
+
u: () => (/* binding */ TkAccordion)
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
// EXTERNAL MODULE: external "lit"
|
|
16
|
+
var external_lit_ = __webpack_require__(2927);
|
|
17
|
+
// EXTERNAL MODULE: external "lit/decorators.js"
|
|
18
|
+
var decorators_js_ = __webpack_require__(8899);
|
|
19
|
+
// EXTERNAL MODULE: external "lit/directives/if-defined.js"
|
|
20
|
+
var if_defined_js_ = __webpack_require__(3517);
|
|
21
|
+
// EXTERNAL MODULE: ./tinkiet/box/index.ts
|
|
22
|
+
var box = __webpack_require__(3433);
|
|
23
|
+
// EXTERNAL MODULE: ./tinkiet/utils/unique.ts
|
|
24
|
+
var unique = __webpack_require__(3770);
|
|
25
|
+
// EXTERNAL MODULE: ./tinkiet/box/box.ts + 1 modules
|
|
26
|
+
var box_box = __webpack_require__(2788);
|
|
27
|
+
;// ./tinkiet/box/focusable-box.ts
|
|
28
|
+
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
29
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
30
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
31
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
32
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
class TkFocusableBox extends box_box/* TkBox */.P {
|
|
38
|
+
constructor() {
|
|
39
|
+
super(...arguments);
|
|
40
|
+
/**
|
|
41
|
+
* Element random id
|
|
42
|
+
*/
|
|
43
|
+
this._id = (0,unique/* uniqueID */.z)();
|
|
44
|
+
/**
|
|
45
|
+
* disabled atribute
|
|
46
|
+
*/
|
|
47
|
+
this.disabled = false;
|
|
48
|
+
}
|
|
49
|
+
updated(props) {
|
|
50
|
+
this.tabIndex = this.disabled ? -1 : 0;
|
|
51
|
+
super.updated(props);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
__decorate([
|
|
55
|
+
(0,decorators_js_.property)({ type: Boolean })
|
|
56
|
+
], TkFocusableBox.prototype, "_id", void 0);
|
|
57
|
+
__decorate([
|
|
58
|
+
(0,decorators_js_.property)({ type: Boolean })
|
|
59
|
+
], TkFocusableBox.prototype, "disabled", void 0);
|
|
60
|
+
|
|
61
|
+
;// ./tinkiet/accordion/accordion.scss
|
|
62
|
+
/* harmony default export */ const accordion = ("*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}:host .header{color:hsl(var(--on-surface));background-color:hsl(var(--surface-container-lowest));padding:16px;border:solid 2px hsl(var(--outline))}:host .header>*{margin:0 10px}:host .header{cursor:pointer}:host .header:after{transition:transform .3s;content:\"▼\";display:inline-block;font-size:12px}:host .header .before{width:fit-content}:host .header .header-content{flex:1}:host .content{width:95%;margin:0 auto;height:0;opacity:0;visibility:hidden;transition:all .2s}:host h3,:host h5{margin:0}:host([checked]) .header{background-color:hsl(var(--primary));color:hsl(var(--on-primary))}:host([checked]) .header:after{transform:rotate(180deg)}:host([checked]) .content{height:auto;opacity:1;visibility:visible;transition:all .3s,opacity .7s}:host([pill]) .header{border-radius:9999px}");
|
|
63
|
+
;// ./tinkiet/accordion/accordion.ts
|
|
64
|
+
var accordion_decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
65
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
66
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
67
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
68
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
let TkAccordion = class TkAccordion extends TkFocusableBox {
|
|
77
|
+
constructor() {
|
|
78
|
+
super(...arguments);
|
|
79
|
+
this.checked = false;
|
|
80
|
+
this.rippleHeader = false;
|
|
81
|
+
}
|
|
82
|
+
static get styles() {
|
|
83
|
+
return [
|
|
84
|
+
...box/* TkBox */.P.styles,
|
|
85
|
+
(0,external_lit_.css) `
|
|
86
|
+
${(0,external_lit_.unsafeCSS)(accordion)}
|
|
87
|
+
`
|
|
88
|
+
];
|
|
89
|
+
}
|
|
90
|
+
render() {
|
|
91
|
+
return (0,external_lit_.html) `
|
|
92
|
+
<tk-box margin="small">
|
|
93
|
+
<tk-box
|
|
94
|
+
@click=${this.handleClick.bind(this)}
|
|
95
|
+
?ripple=${this.rippleHeader}
|
|
96
|
+
class="header"
|
|
97
|
+
direction="row"
|
|
98
|
+
align-items="center"
|
|
99
|
+
>
|
|
100
|
+
<tk-box class="before">
|
|
101
|
+
<slot name="before"></slot>
|
|
102
|
+
</tk-box>
|
|
103
|
+
<tk-box class="header-content">
|
|
104
|
+
<h3 class="title"><slot name="title"></slot></h3>
|
|
105
|
+
<h5><slot name="description"></slot></h5>
|
|
106
|
+
</tk-box>
|
|
107
|
+
</tk-box>
|
|
108
|
+
<tk-box class="content">
|
|
109
|
+
<slot></slot>
|
|
110
|
+
</tk-box>
|
|
111
|
+
</tk-box>
|
|
112
|
+
<input
|
|
113
|
+
id=${this.id}
|
|
114
|
+
slot="none"
|
|
115
|
+
style="display: none;"
|
|
116
|
+
type="radio"
|
|
117
|
+
?checked="${this.checked}"
|
|
118
|
+
?disabled="${this.disabled}"
|
|
119
|
+
name="${(0,if_defined_js_.ifDefined)(this.name)}"
|
|
120
|
+
aria-hidden="true"
|
|
121
|
+
tabindex="-1"
|
|
122
|
+
/>
|
|
123
|
+
`;
|
|
124
|
+
}
|
|
125
|
+
firstUpdated() {
|
|
126
|
+
this.appendChild(this.$input);
|
|
127
|
+
}
|
|
128
|
+
onKeyDown(e) {
|
|
129
|
+
if (e.code === "Space" || e.code === "Enter") {
|
|
130
|
+
e.preventDefault();
|
|
131
|
+
e.stopPropagation();
|
|
132
|
+
this.click();
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
handleClick() {
|
|
136
|
+
this.checked = !this.checked;
|
|
137
|
+
if (this.checked && this.name)
|
|
138
|
+
this.getRootNode()
|
|
139
|
+
.querySelectorAll(`tk-accordion[name="${this.name}"]`)
|
|
140
|
+
.forEach(el => (el != this ? (el.checked = false) : null));
|
|
141
|
+
this.dispatchEvent(new Event("change"));
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
accordion_decorate([
|
|
145
|
+
(0,decorators_js_.property)({ attribute: true, type: String })
|
|
146
|
+
], TkAccordion.prototype, "name", void 0);
|
|
147
|
+
accordion_decorate([
|
|
148
|
+
(0,decorators_js_.property)({ attribute: true, type: Boolean, reflect: true })
|
|
149
|
+
], TkAccordion.prototype, "checked", void 0);
|
|
150
|
+
accordion_decorate([
|
|
151
|
+
(0,decorators_js_.property)({ attribute: "ripple-header", type: Boolean })
|
|
152
|
+
], TkAccordion.prototype, "rippleHeader", void 0);
|
|
153
|
+
accordion_decorate([
|
|
154
|
+
(0,decorators_js_.query)("input")
|
|
155
|
+
], TkAccordion.prototype, "$input", void 0);
|
|
156
|
+
TkAccordion = accordion_decorate([
|
|
157
|
+
(0,decorators_js_.customElement)("tk-accordion")
|
|
158
|
+
], TkAccordion);
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
/***/ }),
|
|
163
|
+
|
|
164
|
+
/***/ 2788:
|
|
165
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
// EXPORTS
|
|
169
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
170
|
+
P: () => (/* binding */ TkBox)
|
|
171
|
+
});
|
|
172
|
+
|
|
173
|
+
// EXTERNAL MODULE: external "lit"
|
|
174
|
+
var external_lit_ = __webpack_require__(2927);
|
|
175
|
+
// EXTERNAL MODULE: external "lit/decorators.js"
|
|
176
|
+
var decorators_js_ = __webpack_require__(8899);
|
|
177
|
+
;// ./tinkiet/box/box.scss
|
|
178
|
+
/* harmony default export */ const box = ("*{-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}");
|
|
179
|
+
;// ./tinkiet/box/box.ts
|
|
180
|
+
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
181
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
182
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
183
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
184
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
const colors = (/* unused pure expression or super */ null && ([
|
|
190
|
+
"primary-lighter",
|
|
191
|
+
"primary-light",
|
|
192
|
+
"primary",
|
|
193
|
+
"primary-dark",
|
|
194
|
+
"primary-darker",
|
|
195
|
+
"on-primary-lighter",
|
|
196
|
+
"on-primary-light",
|
|
197
|
+
"on-primary",
|
|
198
|
+
"on-primary-dark",
|
|
199
|
+
"on-primary-darker",
|
|
200
|
+
"accent-lighter",
|
|
201
|
+
"accent-light",
|
|
202
|
+
"accent",
|
|
203
|
+
"accent-dark",
|
|
204
|
+
"accent-darker",
|
|
205
|
+
"on-accent-lighter",
|
|
206
|
+
"on-accent-light",
|
|
207
|
+
"on-accent",
|
|
208
|
+
"on-accent-dark",
|
|
209
|
+
"on-accent-darker",
|
|
210
|
+
"error-lighter",
|
|
211
|
+
"error-light",
|
|
212
|
+
"error",
|
|
213
|
+
"error-dark",
|
|
214
|
+
"error-darker",
|
|
215
|
+
"on-error-lighter",
|
|
216
|
+
"on-error-light",
|
|
217
|
+
"on-error",
|
|
218
|
+
"on-error-dark",
|
|
219
|
+
"on-error-darker",
|
|
220
|
+
"shade-lighter",
|
|
221
|
+
"shade-light",
|
|
222
|
+
"shade",
|
|
223
|
+
"shade-dark",
|
|
224
|
+
"shade-darker",
|
|
225
|
+
"on-shade-lighter",
|
|
226
|
+
"on-shade-light",
|
|
227
|
+
"on-shade",
|
|
228
|
+
"on-shade-dark",
|
|
229
|
+
"on-shade-darker"
|
|
230
|
+
]));
|
|
231
|
+
/**
|
|
232
|
+
* A container that lays out its contents in one direction
|
|
233
|
+
*
|
|
234
|
+
* @attr {"none" | "small" | "medium" | "large" | "xlarge" | "circle" | "pill" } radius - border radius
|
|
235
|
+
* @attr {"around" | "between" | "center" | "end" | "start" | "stretch"} align-content - How to align the contents when there is extra space in the cross axis.
|
|
236
|
+
* @attr [align-content="stretch"]
|
|
237
|
+
* @attr {"baseline" | "center" | "end" | "start" | "stretch"} align-items - How to align the contents along the cross axis.
|
|
238
|
+
* @attr {"center" | "end" | "start" | "stretch"} align-self - How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
|
|
239
|
+
* @attr {"row" | "column"} direction - The orientation to layout the child components in.
|
|
240
|
+
* @attr [direction="column"]
|
|
241
|
+
* @attr {1|2|3} elevation - Elevated height above the underlying context, indicated via a drop shadow.
|
|
242
|
+
* @attr {"horizontal" | "vertical" | "true" | "false"} fill - Whether the width and/or height should fill the container.
|
|
243
|
+
* @attr {"grow" | "shrink" | "true" | "false"} flex - flex-grow and/or flex-shrink
|
|
244
|
+
* @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} gap - The amount of spacing between child elements. This should not be used in conjunction with 'wrap' as the gap elements will not wrap gracefully. If a child is a Fragment, Box will not add a gap between the children of the Fragment.
|
|
245
|
+
* @attr {"around" | "between" | "center" | "end" | "evenly" | "start" | "stretch"} justify - How to align the contents along the main axis.
|
|
246
|
+
* @attr [justify="stretch"]
|
|
247
|
+
* @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} margin - The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
|
|
248
|
+
* @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} vmargin - The amount of vertical margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
|
|
249
|
+
* @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} hmargin - The amount of horizontal margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
|
|
250
|
+
* @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} padding - The amount of padding around the box contents. An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side of the box.
|
|
251
|
+
* @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} vpadding - The amount of vertical padding around the box contents. An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side of the box.
|
|
252
|
+
* @attr {"xsmall" | "small" | "medium" | "large" | "xlarge"} hpadding - The amount of horizontal padding around the box contents. An object can be specified to distinguish horizontal padding, vertical padding, and padding on a particular side of the box.
|
|
253
|
+
* @attr {"center" | "justify" | "left" | "right"} text - Text align
|
|
254
|
+
* @attr {"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"} width - A fixed width.
|
|
255
|
+
* @attr {"xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge"} height - A fixed height.
|
|
256
|
+
* @attr {"auto" | "hidden" | "scroll" | "visible"} overflow - box overflow.
|
|
257
|
+
* @attr { "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "lighter" | "bold" | "bolder"} weight - Font weight.
|
|
258
|
+
* @attr {"true" | "false" | "reverse"} wrap - Whether children can wrap if they can't all fit.
|
|
259
|
+
* @attr [wrap="false"]
|
|
260
|
+
*/
|
|
261
|
+
let TkBox = class TkBox extends external_lit_.LitElement {
|
|
262
|
+
constructor() {
|
|
263
|
+
super(...arguments);
|
|
264
|
+
/**
|
|
265
|
+
* Activate ripple
|
|
266
|
+
*/
|
|
267
|
+
this.ripple = false;
|
|
268
|
+
}
|
|
269
|
+
static get styles() {
|
|
270
|
+
return [
|
|
271
|
+
(0,external_lit_.css) `
|
|
272
|
+
${(0,external_lit_.unsafeCSS)(box)}
|
|
273
|
+
`
|
|
274
|
+
];
|
|
275
|
+
}
|
|
276
|
+
render() {
|
|
277
|
+
return (0,external_lit_.html) `
|
|
278
|
+
<slot></slot>
|
|
279
|
+
`;
|
|
280
|
+
}
|
|
281
|
+
connectedCallback() {
|
|
282
|
+
if (this.ripple) {
|
|
283
|
+
this.addEventListener("mousedown", this.showRipple.bind(this), { passive: true });
|
|
284
|
+
this.addEventListener("mouseup", this.hideRipple.bind(this), { passive: true });
|
|
285
|
+
}
|
|
286
|
+
super.connectedCallback();
|
|
287
|
+
}
|
|
288
|
+
disconnectedCallback() {
|
|
289
|
+
this.removeEventListener("mousedown", this.showRipple);
|
|
290
|
+
this.addEventListener("mouseup", this.hideRipple);
|
|
291
|
+
super.disconnectedCallback();
|
|
292
|
+
}
|
|
293
|
+
updated(props) {
|
|
294
|
+
// if (props.has("background") && ![...colors, "background", "foreground"].includes(this.background as string))
|
|
295
|
+
// this.style.setProperty("background-color", this.background.toString());
|
|
296
|
+
// if (props.has("color") && ![...colors, "background", "foreground"].includes(this.color as string))
|
|
297
|
+
// this.style.setProperty("color", this.color.toString());
|
|
298
|
+
super.updated(props);
|
|
299
|
+
}
|
|
300
|
+
showRipple(event) {
|
|
301
|
+
const x = event.clientX;
|
|
302
|
+
const y = event.clientY;
|
|
303
|
+
const { offsetWidth, offsetHeight } = this;
|
|
304
|
+
const container = document.createElement("span");
|
|
305
|
+
container.classList.add("ripple", "open");
|
|
306
|
+
const element = document.createElement("span");
|
|
307
|
+
container.appendChild(element);
|
|
308
|
+
this.shadowRoot.appendChild(container);
|
|
309
|
+
const rect = this.getBoundingClientRect();
|
|
310
|
+
const diameter = Math.max(offsetWidth, offsetWidth) * 2;
|
|
311
|
+
element.style.width = element.style.height = diameter + "px";
|
|
312
|
+
element.style.left = x - rect.left - diameter / 2 + "px";
|
|
313
|
+
element.style.top = y - rect.top - diameter / 2 + "px";
|
|
314
|
+
const inAnimation = element.animate({
|
|
315
|
+
transform: [`scale(0)`, `scale(1)`]
|
|
316
|
+
}, {
|
|
317
|
+
easing: "ease-out",
|
|
318
|
+
fill: "both",
|
|
319
|
+
duration: 500
|
|
320
|
+
});
|
|
321
|
+
inAnimation.onfinish = () => {
|
|
322
|
+
container.classList.remove("open");
|
|
323
|
+
const outAnimation = element.animate({
|
|
324
|
+
opacity: ["0.5", "0"]
|
|
325
|
+
}, {
|
|
326
|
+
easing: "ease-in",
|
|
327
|
+
fill: "both",
|
|
328
|
+
duration: 300
|
|
329
|
+
});
|
|
330
|
+
outAnimation.onfinish = () => {
|
|
331
|
+
requestAnimationFrame(() => {
|
|
332
|
+
container.remove();
|
|
333
|
+
});
|
|
334
|
+
};
|
|
335
|
+
};
|
|
336
|
+
}
|
|
337
|
+
hideRipple(event) {
|
|
338
|
+
var _a;
|
|
339
|
+
(_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
|
|
340
|
+
const element = container.querySelector("span");
|
|
341
|
+
const outAnimation = element.animate({
|
|
342
|
+
opacity: ["0.5", "0"]
|
|
343
|
+
}, {
|
|
344
|
+
easing: "ease-out",
|
|
345
|
+
fill: "both",
|
|
346
|
+
duration: 300
|
|
347
|
+
});
|
|
348
|
+
outAnimation.onfinish = () => {
|
|
349
|
+
requestAnimationFrame(() => {
|
|
350
|
+
container.remove();
|
|
351
|
+
});
|
|
352
|
+
};
|
|
353
|
+
});
|
|
354
|
+
}
|
|
355
|
+
};
|
|
356
|
+
__decorate([
|
|
357
|
+
(0,decorators_js_.property)({ type: Boolean })
|
|
358
|
+
], TkBox.prototype, "ripple", void 0);
|
|
359
|
+
__decorate([
|
|
360
|
+
(0,decorators_js_.property)()
|
|
361
|
+
], TkBox.prototype, "background", void 0);
|
|
362
|
+
__decorate([
|
|
363
|
+
(0,decorators_js_.property)()
|
|
364
|
+
], TkBox.prototype, "color", void 0);
|
|
365
|
+
TkBox = __decorate([
|
|
366
|
+
(0,decorators_js_.customElement)("tk-box")
|
|
367
|
+
], TkBox);
|
|
368
|
+
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
/***/ }),
|
|
372
|
+
|
|
373
|
+
/***/ 2927:
|
|
374
|
+
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
|
|
375
|
+
|
|
376
|
+
var x = (y) => {
|
|
377
|
+
var x = {}; __webpack_require__.d(x, y); return x
|
|
378
|
+
}
|
|
379
|
+
var y = (x) => (() => (x))
|
|
380
|
+
module.exports = x({ ["LitElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.LitElement), ["css"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.css), ["html"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.html), ["unsafeCSS"]: () => (__WEBPACK_EXTERNAL_MODULE_lit__.unsafeCSS) });
|
|
381
|
+
|
|
382
|
+
/***/ }),
|
|
383
|
+
|
|
384
|
+
/***/ 3433:
|
|
385
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
386
|
+
|
|
387
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
388
|
+
/* harmony export */ P: () => (/* reexport safe */ _box__WEBPACK_IMPORTED_MODULE_0__.P)
|
|
389
|
+
/* harmony export */ });
|
|
390
|
+
/* harmony import */ var _box__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2788);
|
|
391
|
+
|
|
392
|
+
|
|
393
|
+
|
|
394
|
+
/***/ }),
|
|
395
|
+
|
|
396
|
+
/***/ 3517:
|
|
397
|
+
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
|
|
398
|
+
|
|
399
|
+
var x = (y) => {
|
|
400
|
+
var x = {}; __webpack_require__.d(x, y); return x
|
|
401
|
+
}
|
|
402
|
+
var y = (x) => (() => (x))
|
|
403
|
+
module.exports = x({ ["ifDefined"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_directives_if_defined_js_76c6050d__.ifDefined) });
|
|
404
|
+
|
|
405
|
+
/***/ }),
|
|
406
|
+
|
|
407
|
+
/***/ 3770:
|
|
408
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
409
|
+
|
|
410
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
411
|
+
/* harmony export */ z: () => (/* binding */ uniqueID)
|
|
412
|
+
/* harmony export */ });
|
|
413
|
+
/**
|
|
414
|
+
* Returns a unique ID.
|
|
415
|
+
* @param {number} length
|
|
416
|
+
* @returns {string}
|
|
417
|
+
*/
|
|
418
|
+
function uniqueID(length = 10) {
|
|
419
|
+
return `_${Math.random()
|
|
420
|
+
.toString(36)
|
|
421
|
+
.substr(2, length)}`;
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
|
|
425
|
+
/***/ }),
|
|
426
|
+
|
|
427
|
+
/***/ 8899:
|
|
428
|
+
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
|
|
429
|
+
|
|
430
|
+
var x = (y) => {
|
|
431
|
+
var x = {}; __webpack_require__.d(x, y); return x
|
|
432
|
+
}
|
|
433
|
+
var y = (x) => (() => (x))
|
|
434
|
+
module.exports = x({ ["customElement"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.customElement), ["property"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.property), ["query"]: () => (__WEBPACK_EXTERNAL_MODULE_lit_decorators_js_226d44c5__.query) });
|
|
435
|
+
|
|
436
|
+
/***/ })
|
|
437
|
+
|
|
438
|
+
/******/ });
|
|
439
|
+
/************************************************************************/
|
|
440
|
+
/******/ // The module cache
|
|
441
|
+
/******/ var __webpack_module_cache__ = {};
|
|
442
|
+
/******/
|
|
443
|
+
/******/ // The require function
|
|
444
|
+
/******/ function __webpack_require__(moduleId) {
|
|
445
|
+
/******/ // Check if module is in cache
|
|
446
|
+
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
447
|
+
/******/ if (cachedModule !== undefined) {
|
|
448
|
+
/******/ return cachedModule.exports;
|
|
449
|
+
/******/ }
|
|
450
|
+
/******/ // Create a new module (and put it into the cache)
|
|
451
|
+
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
452
|
+
/******/ // no module.id needed
|
|
453
|
+
/******/ // no module.loaded needed
|
|
454
|
+
/******/ exports: {}
|
|
455
|
+
/******/ };
|
|
456
|
+
/******/
|
|
457
|
+
/******/ // Execute the module function
|
|
458
|
+
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
459
|
+
/******/
|
|
460
|
+
/******/ // Return the exports of the module
|
|
461
|
+
/******/ return module.exports;
|
|
462
|
+
/******/ }
|
|
463
|
+
/******/
|
|
464
|
+
/************************************************************************/
|
|
465
|
+
/******/ /* webpack/runtime/define property getters */
|
|
466
|
+
/******/ (() => {
|
|
467
|
+
/******/ // define getter functions for harmony exports
|
|
468
|
+
/******/ __webpack_require__.d = (exports, definition) => {
|
|
469
|
+
/******/ for(var key in definition) {
|
|
470
|
+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
471
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
472
|
+
/******/ }
|
|
473
|
+
/******/ }
|
|
474
|
+
/******/ };
|
|
475
|
+
/******/ })();
|
|
476
|
+
/******/
|
|
477
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
478
|
+
/******/ (() => {
|
|
479
|
+
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
480
|
+
/******/ })();
|
|
481
|
+
/******/
|
|
482
|
+
/************************************************************************/
|
|
483
|
+
var __webpack_exports__ = {};
|
|
484
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
485
|
+
/* harmony export */ u: () => (/* reexport safe */ _accordion__WEBPACK_IMPORTED_MODULE_0__.u)
|
|
486
|
+
/* harmony export */ });
|
|
487
|
+
/* harmony import */ var _accordion__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2418);
|
|
488
|
+
|
|
489
|
+
|
|
490
|
+
const __webpack_exports__TkAccordion = __webpack_exports__.u;
|
|
491
|
+
export { __webpack_exports__TkAccordion as TkAccordion };
|
package/badge/badge.d.ts
CHANGED
|
@@ -4,14 +4,13 @@ import { LitElement } from "lit";
|
|
|
4
4
|
* @cssprop --tk-badge-color - Color of widget default to --primary
|
|
5
5
|
* @cssprop --tk-badge-text-color - Text color of widget to --on-primary
|
|
6
6
|
*/
|
|
7
|
-
declare class TkBadge extends LitElement {
|
|
7
|
+
export declare class TkBadge extends LitElement {
|
|
8
8
|
static get styles(): import("lit").CSSResult;
|
|
9
9
|
label: string;
|
|
10
|
-
render(): import("lit
|
|
10
|
+
render(): import("lit").TemplateResult<1>;
|
|
11
11
|
}
|
|
12
12
|
declare global {
|
|
13
13
|
interface HTMLElementTagNameMap {
|
|
14
14
|
"tk-badge": TkBadge;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
export { TkBadge };
|
package/badge/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from "./badge
|
|
1
|
+
export * from "./badge";
|