tinkiet 0.7.4 → 0.7.6
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/package.json +1 -1
- package/umd/tinkiet.min.js +1 -1
- package/accordion/accordion.d.ts +0 -18
- package/accordion/accordion.js +0 -94
- package/accordion/accordion.scss.js +0 -4
- package/accordion/index.d.ts +0 -1
- package/accordion/index.js +0 -1
- package/badge/badge.d.ts +0 -15
- package/badge/badge.js +0 -27
- package/badge/badge.scss.js +0 -4
- package/badge/index.d.ts +0 -1
- package/badge/index.js +0 -1
- package/box/box.d.ts +0 -56
- package/box/box.js +0 -182
- package/box/box.scss.js +0 -4
- package/box/focusable-box.d.ts +0 -13
- package/box/focusable-box.js +0 -30
- package/box/index.d.ts +0 -1
- package/box/index.js +0 -1
- package/button/button.d.ts +0 -39
- package/button/button.js +0 -125
- package/button/button.scss.js +0 -4
- package/button/index.d.ts +0 -1
- package/button/index.js +0 -1
- package/checkbox/checkbox.d.ts +0 -21
- package/checkbox/checkbox.js +0 -83
- package/checkbox/checkbox.scss.js +0 -4
- package/checkbox/index.d.ts +0 -1
- package/checkbox/index.js +0 -1
- package/dialog/dialog.d.ts +0 -18
- package/dialog/dialog.js +0 -58
- package/dialog/dialog.scss.js +0 -4
- package/dialog/index.d.ts +0 -1
- package/dialog/index.js +0 -1
- package/drawer/drawer.d.ts +0 -29
- package/drawer/drawer.js +0 -152
- package/drawer/drawer.scss.js +0 -4
- package/drawer/index.d.ts +0 -1
- package/drawer/index.js +0 -1
- package/form/form.d.ts +0 -15
- package/form/form.js +0 -57
- package/form/index.d.ts +0 -1
- package/form/index.js +0 -1
- package/icon/icon.d.ts +0 -17
- package/icon/icon.js +0 -75
- package/icon/icon.scss.js +0 -4
- package/icon/icons.d.ts +0 -7
- package/icon/icons.js +0 -24
- package/icon/index.d.ts +0 -2
- package/icon/index.js +0 -2
- package/index.d.ts +0 -24
- package/index.d.ts.map +0 -1
- package/index.js +0 -47
- package/list-item/index.d.ts +0 -1
- package/list-item/index.js +0 -1
- package/list-item/list-item.d.ts +0 -20
- package/list-item/list-item.js +0 -72
- package/list-item/list-item.scss.js +0 -4
- package/loading/index.d.ts +0 -1
- package/loading/index.js +0 -1
- package/loading/loading.d.ts +0 -14
- package/loading/loading.js +0 -64
- package/loading/loading.scss.js +0 -4
- package/navbar/index.d.ts +0 -1
- package/navbar/index.js +0 -1
- package/navbar/navbar.d.ts +0 -11
- package/navbar/navbar.js +0 -33
- package/navbar/navbar.scss.js +0 -4
- package/notie/index.d.ts +0 -1
- package/notie/index.js +0 -1
- package/notie/notie.d.ts +0 -69
- package/notie/notie.js +0 -193
- package/notie/notie.scss.js +0 -4
- package/pages/index.d.ts +0 -1
- package/pages/index.js +0 -1
- package/pages/pages.d.ts +0 -18
- package/pages/pages.js +0 -75
- package/pages/pages.scss.js +0 -4
- package/radio/index.d.ts +0 -1
- package/radio/index.js +0 -1
- package/radio/radio.d.ts +0 -24
- package/radio/radio.js +0 -98
- package/radio/radio.scss.js +0 -4
- package/select/index.d.ts +0 -1
- package/select/index.js +0 -1
- package/select/select.d.ts +0 -32
- package/select/select.js +0 -132
- package/select/select.scss.js +0 -4
- package/slider/index.d.ts +0 -1
- package/slider/index.js +0 -1
- package/slider/slider.d.ts +0 -30
- package/slider/slider.js +0 -135
- package/slider/slider.scss.js +0 -4
- package/switch/index.d.ts +0 -1
- package/switch/index.js +0 -1
- package/switch/switch.d.ts +0 -24
- package/switch/switch.js +0 -99
- package/switch/switch.scss.js +0 -4
- package/tab-group/index.d.ts +0 -1
- package/tab-group/index.js +0 -1
- package/tab-group/tab-group.d.ts +0 -21
- package/tab-group/tab-group.js +0 -97
- package/tab-group/tab-group.scss.js +0 -4
- package/tag/index.d.ts +0 -1
- package/tag/index.js +0 -1
- package/tag/tag.d.ts +0 -11
- package/tag/tag.js +0 -20
- package/tag/tag.scss.js +0 -4
- package/textarea/index.d.ts +0 -1
- package/textarea/index.js +0 -1
- package/textarea/textarea.d.ts +0 -33
- package/textarea/textarea.js +0 -133
- package/textarea/textarea.scss.js +0 -4
- package/textfield/index.d.ts +0 -1
- package/textfield/index.js +0 -1
- package/textfield/textfield.d.ts +0 -34
- package/textfield/textfield.js +0 -136
- package/textfield/textfield.scss.js +0 -4
- package/theme/index.d.ts +0 -1
- package/theme/index.js +0 -1
- package/theme/theme.d.ts +0 -33
- package/theme/theme.js +0 -187
- package/theme/theme.scss.js +0 -4
- package/utils/unique.d.ts +0 -7
- package/utils/unique.js +0 -12
package/slider/slider.d.ts
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
declare class TkSlider extends LitElement {
|
|
3
|
-
static styles: import("lit").CSSResult;
|
|
4
|
-
private _id;
|
|
5
|
-
name: string;
|
|
6
|
-
list: string;
|
|
7
|
-
required: boolean;
|
|
8
|
-
disabled: boolean;
|
|
9
|
-
readonly: boolean;
|
|
10
|
-
autocomplete: "on" | "off";
|
|
11
|
-
thumbLabel: boolean;
|
|
12
|
-
thumbLabelPersist: boolean;
|
|
13
|
-
label: string;
|
|
14
|
-
min: number;
|
|
15
|
-
value: number;
|
|
16
|
-
max: number;
|
|
17
|
-
step: number;
|
|
18
|
-
private $slider;
|
|
19
|
-
private $input;
|
|
20
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
21
|
-
private handleChange;
|
|
22
|
-
firstUpdated(): void;
|
|
23
|
-
updated(): void;
|
|
24
|
-
}
|
|
25
|
-
declare global {
|
|
26
|
-
interface HTMLElementTagNameMap {
|
|
27
|
-
"tk-slider": TkSlider;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
export { TkSlider };
|
package/slider/slider.js
DELETED
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
import { __decorate } from 'tslib';
|
|
2
|
-
import { LitElement, html, css, unsafeCSS } from 'lit';
|
|
3
|
-
import { property, query, customElement } from 'lit/decorators.js';
|
|
4
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
-
import { uniqueID } from '../utils/unique.js';
|
|
6
|
-
import css_248z from './slider.scss.js';
|
|
7
|
-
|
|
8
|
-
let TkSlider = class TkSlider extends LitElement {
|
|
9
|
-
constructor() {
|
|
10
|
-
super(...arguments);
|
|
11
|
-
this._id = uniqueID();
|
|
12
|
-
this.required = false;
|
|
13
|
-
this.disabled = false;
|
|
14
|
-
this.readonly = false;
|
|
15
|
-
this.thumbLabel = false;
|
|
16
|
-
this.thumbLabelPersist = false;
|
|
17
|
-
this.min = 0;
|
|
18
|
-
this.value = this.min;
|
|
19
|
-
this.max = 100;
|
|
20
|
-
}
|
|
21
|
-
render() {
|
|
22
|
-
return html `
|
|
23
|
-
<div id="container">
|
|
24
|
-
<slot id="before" name="before"></slot>
|
|
25
|
-
<div id="wrapper">
|
|
26
|
-
<div id="label">${this.label}</div>
|
|
27
|
-
<div id="slot-wrapper">
|
|
28
|
-
<input
|
|
29
|
-
@input="${this.handleChange.bind(this)}"
|
|
30
|
-
id="slider"
|
|
31
|
-
type="range"
|
|
32
|
-
.value="${this.value.toString()}"
|
|
33
|
-
?required="${this.required}"
|
|
34
|
-
?disabled="${this.disabled}"
|
|
35
|
-
?readonly="${this.readonly}"
|
|
36
|
-
aria-label="${ifDefined(this.label)}"
|
|
37
|
-
name="${ifDefined(this.name)}"
|
|
38
|
-
autocomplete="${ifDefined(this.autocomplete)}"
|
|
39
|
-
min="${ifDefined(this.min)}"
|
|
40
|
-
max="${ifDefined(this.max)}"
|
|
41
|
-
step="${ifDefined(this.step)}"
|
|
42
|
-
tabindex="0"
|
|
43
|
-
/>
|
|
44
|
-
${this.thumbLabel || this.thumbLabelPersist
|
|
45
|
-
? html `
|
|
46
|
-
<div id="thumb-container">
|
|
47
|
-
<div id="thumb-label"><slot name="thumb-label">${this.value}</slot></div>
|
|
48
|
-
</div>
|
|
49
|
-
`
|
|
50
|
-
: ''}
|
|
51
|
-
</div>
|
|
52
|
-
<input
|
|
53
|
-
id=${this._id}
|
|
54
|
-
class="hidden-input"
|
|
55
|
-
type="hidden"
|
|
56
|
-
value="${this.value.toString()}"
|
|
57
|
-
?required="${this.required}"
|
|
58
|
-
?disabled="${this.disabled}"
|
|
59
|
-
?readonly="${this.readonly}"
|
|
60
|
-
aria-label="${ifDefined(this.label)}"
|
|
61
|
-
name="${ifDefined(this.name)}"
|
|
62
|
-
/>
|
|
63
|
-
</div>
|
|
64
|
-
<slot id="after" name="after"></slot>
|
|
65
|
-
</div>
|
|
66
|
-
`;
|
|
67
|
-
}
|
|
68
|
-
handleChange(e) {
|
|
69
|
-
e.target.checkValidity() ? this.removeAttribute("invalid") : this.setAttribute("invalid", "");
|
|
70
|
-
this.value = e.target.value.toString();
|
|
71
|
-
setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
|
|
72
|
-
}
|
|
73
|
-
firstUpdated() {
|
|
74
|
-
this.appendChild(this.$input);
|
|
75
|
-
this.setAttribute("dirty", "");
|
|
76
|
-
}
|
|
77
|
-
updated() {
|
|
78
|
-
requestAnimationFrame(() => {
|
|
79
|
-
this.style.setProperty("--_perc", ((Number(this.value) - this.min) / (this.max - this.min)).toString());
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
TkSlider.styles = css `
|
|
84
|
-
${unsafeCSS(css_248z)}
|
|
85
|
-
`;
|
|
86
|
-
__decorate([
|
|
87
|
-
property({ attribute: true, type: String })
|
|
88
|
-
], TkSlider.prototype, "name", void 0);
|
|
89
|
-
__decorate([
|
|
90
|
-
property({ type: String })
|
|
91
|
-
], TkSlider.prototype, "list", void 0);
|
|
92
|
-
__decorate([
|
|
93
|
-
property({ type: Boolean })
|
|
94
|
-
], TkSlider.prototype, "required", void 0);
|
|
95
|
-
__decorate([
|
|
96
|
-
property({ type: Boolean })
|
|
97
|
-
], TkSlider.prototype, "disabled", void 0);
|
|
98
|
-
__decorate([
|
|
99
|
-
property({ type: Boolean })
|
|
100
|
-
], TkSlider.prototype, "readonly", void 0);
|
|
101
|
-
__decorate([
|
|
102
|
-
property({ type: String })
|
|
103
|
-
], TkSlider.prototype, "autocomplete", void 0);
|
|
104
|
-
__decorate([
|
|
105
|
-
property({ type: Boolean, attribute: "thumblabel" })
|
|
106
|
-
], TkSlider.prototype, "thumbLabel", void 0);
|
|
107
|
-
__decorate([
|
|
108
|
-
property({ type: Boolean, attribute: "thumblabel-persist" })
|
|
109
|
-
], TkSlider.prototype, "thumbLabelPersist", void 0);
|
|
110
|
-
__decorate([
|
|
111
|
-
property({ type: String })
|
|
112
|
-
], TkSlider.prototype, "label", void 0);
|
|
113
|
-
__decorate([
|
|
114
|
-
property({ type: Number })
|
|
115
|
-
], TkSlider.prototype, "min", void 0);
|
|
116
|
-
__decorate([
|
|
117
|
-
property({ type: Number, reflect: true })
|
|
118
|
-
], TkSlider.prototype, "value", void 0);
|
|
119
|
-
__decorate([
|
|
120
|
-
property({ type: Number })
|
|
121
|
-
], TkSlider.prototype, "max", void 0);
|
|
122
|
-
__decorate([
|
|
123
|
-
property({ type: Number })
|
|
124
|
-
], TkSlider.prototype, "step", void 0);
|
|
125
|
-
__decorate([
|
|
126
|
-
query("#slider")
|
|
127
|
-
], TkSlider.prototype, "$slider", void 0);
|
|
128
|
-
__decorate([
|
|
129
|
-
query(".hidden-input")
|
|
130
|
-
], TkSlider.prototype, "$input", void 0);
|
|
131
|
-
TkSlider = __decorate([
|
|
132
|
-
customElement("tk-slider")
|
|
133
|
-
], TkSlider);
|
|
134
|
-
|
|
135
|
-
export { TkSlider };
|
package/slider/slider.scss.js
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}: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,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.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,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-track-bg-active:var(--slider-bg-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_slider-thumb-bg:var(--slider-thumb-bg,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));--_slider-thumb-border:var(--slider-thumb-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_slider-track-bg-active:var(--slider-bg-active-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-thumb-border:var(--slider-thumb-bg,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}";
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_input-state-color:var(--input-state-color-inactive,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-padding-left-right:var(--input-padding-left-right,0);--_input-bg:var(--input-bg,#0000);--_input-border-radius:0;--_input-color:var(--input-color,var(--foreground,#454545));--_input-label-color:var(--input-label-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-border-style:var(--input-border-style,solid);display:block;outline:none;transform:translateZ(0)}:host([disabled]){--_input-state-color:var(--input-state-color-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_input-label-color:var(--input-label-color-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_input-color:var(--input-color-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_input-border-style:var(--input-border-style-disabled,dashed);pointer-events:none}#container{align-items:center;background:var(--_input-bg);border-bottom:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color);border-radius:var(--_input-border-radius);color:var(--_input-color);display:flex;font-size:var(--input-font-size,1rem);overflow:hidden;position:relative;transition:var(--input-transition,border-color var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease),background var(--transition-duration-medium,.18s) var(--transition-timing-function-ease,ease))}#wrapper{flex-grow:1;position:relative}#label{color:var(--_input-label-color);font-size:inherit;left:var(--_input-padding-left-right);line-height:1;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:var(--input-label-transition,top var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),font-size var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-linear,linear));-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}:host(:hover){--_input-state-color:var(--input-state-color-hover,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([filled]),:host([outlined]){--_input-padding-left-right:var(--input-padding-left-right-outlined,0.75rem)}:host([filled]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem 0.5rem 0 0);--_input-bg:var(--input-bg,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))))}:host([filled]:hover){--_input-bg:var(--input-bg-filled-hover,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))))}:host([outlined]){--_input-border-radius:var(--input-border-radius-outlined,0.5rem)}:host([outlined]) #container{border:var(--input-border-width,.0625rem) var(--_input-border-style) var(--_input-state-color)}:host(:focus-within){--_input-state-color:var(--input-state-color-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}: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,.75rem);top:var(--input-padding-top-bottom,.5rem);transform:translateY(0)}#slot-wrapper,::slotted(input),::slotted(select),::slotted(textarea){-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:var(--_input-color);-webkit-overflow-scrolling:touch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;caret-color:var(--_input-color-state);color:inherit;display:block;font-size:var(--input-font-size,1rem);margin:0;outline:none;padding:var(--input-padding-top-bottom,.5rem) var(--_input-padding-left-right);position:relative;text-align:var(--input-text-align,inherit);width:100%}:host([label]) #slot-wrapper,:host([label]) ::slotted(input),:host([label]) ::slotted(select),:host([label]) ::slotted(textarea){padding-top:calc(var(--input-label-space, .875rem) + var(--input-padding-top-bottom, .5rem))}:host([invalid]){--_input-state-color:var(--input-state-color-invalid,var(--error,hsl(var(--error-h,4.10526),var(--error-s,89.6226%),var(--error-l,58.4314%))))}::slotted(input[type=color]){cursor:pointer;height:3.75rem}::slotted([slot=after]),::slotted([slot=before]){color:var(--input-before-after-color,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host(:not([outlined]):not([filled])) ::slotted([slot=before]){margin-right:var(--input-padding-left-right-outlined,.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,.75rem)}:host([filled]) ::slotted([slot=after]),:host([outlined]) ::slotted([slot=after]){margin-right:var(--input-padding-left-right-outlined,.75rem)}:host{--_perc:0;--_slider-track-bg:var(--slider-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-track-bg-active:var(--slider-bg-active,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));--_slider-thumb-bg:var(--slider-thumb-bg,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));--_slider-thumb-border:var(--slider-thumb-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([disabled]){--_slider-track-bg:var(--slider-bg-disabled,var(--shade-lighter,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.3))));--_slider-track-bg-active:var(--slider-bg-active-disabled,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))));--_slider-thumb-bg:var(--slider-thumb-bg-disabled,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_slider-thumb-border:var(--slider-thumb-bg,var(--shade,hsl(var(--shade-h,0),var(--shade-s,0%),var(--shade-l,66.6667%))))}:host([thumblabel-persist]) #container,:host([thumblabel]) #container{padding-top:33px}#container{border:none;overflow:visible}#slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(90deg,var(--_slider-track-bg-active) 0,var(--_slider-track-bg-active) calc(var(--_perc)*100%),var(--_slider-track-bg) calc(var(--_perc)*100%),var(--_slider-track-bg));border:none;border-radius:0;box-sizing:border-box;cursor:grab;height:var(--slider-height,.3125rem);margin:0;outline:none;top:calc(var(--slider-height, .3125rem)*-1/2)}#slider,#thumb-container{position:relative;width:100%}#thumb-label{--_thumb-label-transform-y:0.625rem;-webkit-text-fill-color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));align-items:center;border-radius:var(--slider-thumb-label-border-radius,100%);bottom:calc(100% + var(--slider-thumb-size, .75rem) + var(--slider-height, .3125rem) + var(--slider-thumb-space, .75rem));color:var(--slider-thumb-label-color,var(--on-primary,hsl(var(--on-primary-h,0),var(--on-primary-s,0%),var(--on-primary-l,100%))));display:flex;font-size:var(--slider-thumb-label-font-size,.75rem);height:var(--slider-thumb-label-size,1.875rem);justify-content:center;left:calc(var(--_perc)*100% - var(--slider-thumb-size, 1.2rem)*var(--_perc));opacity:0;pointer-events:none;text-overflow:ellipsis;transform:translate(calc(-50% + var(--slider-thumb-size, 1.2rem)/2),var(--_thumb-label-transform-y));transition:var(--slider-thumb-label-transition,opacity var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-label-size,1.875rem)}#thumb-label,#thumb-label:before{background:var(--slider-thumb-label-bg,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))));position:absolute}#thumb-label:before{border-radius:0 50% 50% 50%;content:\"\";height:100%;left:0;top:0;transform:rotate(225deg);width:100%;z-index:-1}#slider:focus+#thumb-container #thumb-label,:host([thumblabel-persist]) #thumb-label,:host:focus #thumb-label{--_thumb-label-transform-y:0;opacity:1}#slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:4px solid var(--_slider-thumb-border);border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-webkit-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background:var(--_slider-thumb-bg);border:none;border-radius:var(--slider-thumb-border-radius,100%);box-shadow:0 0 0 0 var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));cursor:grab;height:var(--slider-thumb-size,1.2rem);position:relative;-moz-transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));transition:var(--slider-thumb-transition,transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--slider-thumb-size,1.2rem)}#slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}#slider:focus::-moz-range-thumb{box-shadow:0 0 0 var(--slider-thumb-focus-ring-size,.75rem) var(--slider-thumb-focus-ring-bg,rgba(0,0,0,.082));transform:var(--slider-thumb-transform-focus,scale(1.2))}";
|
|
3
|
-
|
|
4
|
-
export { css_248z as default, stylesheet };
|
package/switch/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./switch";
|
package/switch/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { TkSwitch } from './switch.js';
|
package/switch/switch.d.ts
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
declare class TkSwitch extends LitElement {
|
|
3
|
-
static styles: import("lit").CSSResult;
|
|
4
|
-
private _id;
|
|
5
|
-
name: string;
|
|
6
|
-
checked: boolean;
|
|
7
|
-
required: boolean;
|
|
8
|
-
disabled: boolean;
|
|
9
|
-
readonly: boolean;
|
|
10
|
-
value: string;
|
|
11
|
-
private $input;
|
|
12
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
13
|
-
connectedCallback(): void;
|
|
14
|
-
disconnectedCallback(): void;
|
|
15
|
-
firstUpdated(): void;
|
|
16
|
-
protected onKeyDown(e: KeyboardEvent): void;
|
|
17
|
-
protected handleClick(): void;
|
|
18
|
-
}
|
|
19
|
-
declare global {
|
|
20
|
-
interface HTMLElementTagNameMap {
|
|
21
|
-
"tk-switch": TkSwitch;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
export { TkSwitch };
|
package/switch/switch.js
DELETED
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import { __decorate } from 'tslib';
|
|
2
|
-
import { LitElement, html, css, unsafeCSS } from 'lit';
|
|
3
|
-
import { property, query, customElement } from 'lit/decorators.js';
|
|
4
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
-
import '../box/index.js';
|
|
6
|
-
import { uniqueID } from '../utils/unique.js';
|
|
7
|
-
import css_248z from './switch.scss.js';
|
|
8
|
-
|
|
9
|
-
let TkSwitch = class TkSwitch extends LitElement {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments);
|
|
12
|
-
this._id = uniqueID();
|
|
13
|
-
this.checked = false;
|
|
14
|
-
this.required = false;
|
|
15
|
-
this.disabled = false;
|
|
16
|
-
this.readonly = false;
|
|
17
|
-
}
|
|
18
|
-
render() {
|
|
19
|
-
return html `
|
|
20
|
-
<tk-box direction="row" align-items="center">
|
|
21
|
-
<span class="switch">
|
|
22
|
-
<span id="knob"></span>
|
|
23
|
-
</span>
|
|
24
|
-
<span class="label"><slot></slot></span>
|
|
25
|
-
</tk-box>
|
|
26
|
-
<input
|
|
27
|
-
id=${this._id}
|
|
28
|
-
slot="none"
|
|
29
|
-
style="display: none;"
|
|
30
|
-
type="radio"
|
|
31
|
-
?checked="${this.checked}"
|
|
32
|
-
?required="${this.required}"
|
|
33
|
-
?disabled="${this.disabled}"
|
|
34
|
-
?readonly="${this.readonly}"
|
|
35
|
-
value="${ifDefined(this.value)}"
|
|
36
|
-
name="${ifDefined(this.name)}"
|
|
37
|
-
aria-hidden="true"
|
|
38
|
-
tabindex="-1"
|
|
39
|
-
/>
|
|
40
|
-
`;
|
|
41
|
-
}
|
|
42
|
-
connectedCallback() {
|
|
43
|
-
super.connectedCallback();
|
|
44
|
-
this.addEventListener("click", this.handleClick.bind(this));
|
|
45
|
-
this.addEventListener("keydown", this.onKeyDown.bind(this));
|
|
46
|
-
}
|
|
47
|
-
disconnectedCallback() {
|
|
48
|
-
super.disconnectedCallback();
|
|
49
|
-
this.removeEventListener("click", this.handleClick);
|
|
50
|
-
this.removeEventListener("keydown", this.onKeyDown);
|
|
51
|
-
}
|
|
52
|
-
firstUpdated() {
|
|
53
|
-
this.appendChild(this.$input);
|
|
54
|
-
}
|
|
55
|
-
onKeyDown(e) {
|
|
56
|
-
if (e.code === "Space" || e.code === "Enter") {
|
|
57
|
-
e.preventDefault();
|
|
58
|
-
e.stopPropagation();
|
|
59
|
-
this.click();
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
handleClick() {
|
|
63
|
-
this.checked = !this.checked;
|
|
64
|
-
if (this.checked && this.name)
|
|
65
|
-
this.getRootNode()
|
|
66
|
-
.querySelectorAll(`tk-radio[name="${this.name}"]`)
|
|
67
|
-
.forEach(el => (el != this ? (el.checked = false) : null));
|
|
68
|
-
setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
|
|
69
|
-
}
|
|
70
|
-
};
|
|
71
|
-
TkSwitch.styles = css `
|
|
72
|
-
${unsafeCSS(css_248z)}
|
|
73
|
-
`;
|
|
74
|
-
__decorate([
|
|
75
|
-
property({ attribute: true, type: String })
|
|
76
|
-
], TkSwitch.prototype, "name", void 0);
|
|
77
|
-
__decorate([
|
|
78
|
-
property({ attribute: true, type: Boolean, reflect: true })
|
|
79
|
-
], TkSwitch.prototype, "checked", void 0);
|
|
80
|
-
__decorate([
|
|
81
|
-
property({ type: Boolean })
|
|
82
|
-
], TkSwitch.prototype, "required", void 0);
|
|
83
|
-
__decorate([
|
|
84
|
-
property({ type: Boolean })
|
|
85
|
-
], TkSwitch.prototype, "disabled", void 0);
|
|
86
|
-
__decorate([
|
|
87
|
-
property({ type: Boolean })
|
|
88
|
-
], TkSwitch.prototype, "readonly", void 0);
|
|
89
|
-
__decorate([
|
|
90
|
-
property({ type: String, reflect: true })
|
|
91
|
-
], TkSwitch.prototype, "value", void 0);
|
|
92
|
-
__decorate([
|
|
93
|
-
query("input")
|
|
94
|
-
], TkSwitch.prototype, "$input", void 0);
|
|
95
|
-
TkSwitch = __decorate([
|
|
96
|
-
customElement("tk-switch")
|
|
97
|
-
], TkSwitch);
|
|
98
|
-
|
|
99
|
-
export { TkSwitch };
|
package/switch/switch.scss.js
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_switch-bg:var(--switch-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_switch-color:var(--switch-color,var(--background,#f7f7f7))}:host .switch{align-items:center;background:var(--_switch-bg);border-radius:var(--switch-border-radius,.75rem);color:var(--_switch-color);display:inline-flex;height:var(--switch-height,.875rem);outline:none;position:relative;transition:var(--switch-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:var(--switch-width,2.125rem)}:host .switch #knob{background:currentColor;border-radius:var(--switch-knob-border-radius,100%);box-shadow:var(--switch-knob-elevation,var(--elevation-3,0 4px 8px var(--shadow)));height:var(--switch-knob-size,1.25rem);position:absolute;transition:var(--switch-knob-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--switch-knob-size,1.25rem)}:host .label{font-size:1.1em;margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]){--_switch-bg:var(--switch-bg-checked,var(--primary-lighter,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.3))));--_switch-color:var(--switch-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]) .switch #knob{transform:translateX(calc(var(--switch-width, 2.125rem) - 100%))}:host(:focus),:host(:hover){will-change:background-color}:host([disabled]){--_switch-bg:var(--switch-bg-disabled,hsl(var(--shade-200,var(--shade-hue,200),var(--shade-saturation,4%),var(--shade-lightness,85%))));--_switch-color:var(\n \t--switch-color-disabled,hsl(var(--shade-300,var(--shade-hue,200),var(--shade-saturation,4%),var(--shade-lightness,75%)))\n );pointer-events:none}:host([disabled][checked]){--_switch-bg:var(\n \t--switch-bg-disabled-checked,hsla(var(--primary-400,var(--primary-hue,224),var(--primary-saturation,42%),var(--primary-lightness,52%)),0.1)\n );--_switch-color:var(\n \t--switch-color-disabled-checked,hsla(var(--primary-400,var(--primary-hue,224),var(--primary-saturation,42%),var(--primary-lightness,52%)),0.4)\n )}";
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--_switch-bg:var(--switch-bg,var(--shade-light,hsl(var(--shade-h,0),var(--shade-s,0%),calc(var(--shade-l, 66.6667%)*1.15))));--_switch-color:var(--switch-color,var(--background,#f7f7f7))}:host .switch{align-items:center;background:var(--_switch-bg);border-radius:var(--switch-border-radius,.75rem);color:var(--_switch-color);display:inline-flex;height:var(--switch-height,.875rem);outline:none;position:relative;transition:var(--switch-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));-webkit-user-select:none;user-select:none;width:var(--switch-width,2.125rem)}:host .switch #knob{background:currentColor;border-radius:var(--switch-knob-border-radius,100%);box-shadow:var(--switch-knob-elevation,var(--elevation-3,0 4px 8px var(--shadow)));height:var(--switch-knob-size,1.25rem);position:absolute;transition:var(--switch-knob-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));width:var(--switch-knob-size,1.25rem)}:host .label{font-size:1.1em;margin-left:10px}:host(:not([disabled])){cursor:pointer}:host([checked]){--_switch-bg:var(--switch-bg-checked,var(--primary-lighter,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),calc(var(--primary-l, 59.4118%)*1.3))));--_switch-color:var(--switch-color-checked,var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%))))}:host([checked]) .switch #knob{transform:translateX(calc(var(--switch-width, 2.125rem) - 100%))}:host(:focus),:host(:hover){will-change:background-color}:host([disabled]){--_switch-bg:var(--switch-bg-disabled,hsl(var(--shade-200,var(--shade-hue,200),var(--shade-saturation,4%),var(--shade-lightness,85%))));--_switch-color:var(\n \t--switch-color-disabled,hsl(var(--shade-300,var(--shade-hue,200),var(--shade-saturation,4%),var(--shade-lightness,75%)))\n );pointer-events:none}:host([disabled][checked]){--_switch-bg:var(\n \t--switch-bg-disabled-checked,hsla(var(--primary-400,var(--primary-hue,224),var(--primary-saturation,42%),var(--primary-lightness,52%)),0.1)\n );--_switch-color:var(\n \t--switch-color-disabled-checked,hsla(var(--primary-400,var(--primary-hue,224),var(--primary-saturation,42%),var(--primary-lightness,52%)),0.4)\n )}";
|
|
3
|
-
|
|
4
|
-
export { css_248z as default, stylesheet };
|
package/tab-group/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./tab-group";
|
package/tab-group/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { TkTabGroup } from './tab-group.js';
|
package/tab-group/tab-group.d.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
declare class TkTabGroup extends LitElement {
|
|
3
|
-
static styles: import("lit").CSSResult;
|
|
4
|
-
circle: boolean;
|
|
5
|
-
observe: string;
|
|
6
|
-
selected: string;
|
|
7
|
-
private $underline;
|
|
8
|
-
private $circle;
|
|
9
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
10
|
-
constructor();
|
|
11
|
-
firstUpdated(): void;
|
|
12
|
-
updated(props: any): void;
|
|
13
|
-
protected clickOnTab(tab: HTMLElement): void;
|
|
14
|
-
protected updateUnderline(): void;
|
|
15
|
-
}
|
|
16
|
-
declare global {
|
|
17
|
-
interface HTMLElementTagNameMap {
|
|
18
|
-
"tk-tab-group": TkTabGroup;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
export { TkTabGroup };
|
package/tab-group/tab-group.js
DELETED
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { __decorate } from 'tslib';
|
|
2
|
-
import { LitElement, html, css, unsafeCSS } from 'lit';
|
|
3
|
-
import { property, query, customElement } from 'lit/decorators.js';
|
|
4
|
-
import css_248z from './tab-group.scss.js';
|
|
5
|
-
|
|
6
|
-
let TkTabGroup = class TkTabGroup extends LitElement {
|
|
7
|
-
render() {
|
|
8
|
-
return html `
|
|
9
|
-
<div class="tabs">
|
|
10
|
-
<slot @click=${(e) => this.clickOnTab(e.target)} @slotchange=${() => this.updateUnderline()}></slot>
|
|
11
|
-
</div>
|
|
12
|
-
${this.circle
|
|
13
|
-
? html `
|
|
14
|
-
<div class="circle"></div>
|
|
15
|
-
`
|
|
16
|
-
: html `
|
|
17
|
-
<div class="underline"></div>
|
|
18
|
-
`}
|
|
19
|
-
`;
|
|
20
|
-
}
|
|
21
|
-
constructor() {
|
|
22
|
-
super();
|
|
23
|
-
this.circle = false;
|
|
24
|
-
this.observe = "";
|
|
25
|
-
this.selected = "";
|
|
26
|
-
}
|
|
27
|
-
firstUpdated() {
|
|
28
|
-
if (IntersectionObserver) {
|
|
29
|
-
const observer = new IntersectionObserver(this.updateUnderline.bind(this));
|
|
30
|
-
observer.observe(this);
|
|
31
|
-
}
|
|
32
|
-
else {
|
|
33
|
-
this.updateUnderline.bind(this);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
updated(props) {
|
|
37
|
-
var _a, _b;
|
|
38
|
-
if (props.has("selected")) {
|
|
39
|
-
this.querySelectorAll("*").forEach(node => node.removeAttribute("selected"));
|
|
40
|
-
(_a = this.querySelector(`[tab="${this.selected}"]`)) === null || _a === void 0 ? void 0 : _a.setAttribute("selected", "");
|
|
41
|
-
}
|
|
42
|
-
if (props.has("observe")) {
|
|
43
|
-
(_b = this.querySelector(`[tab="${this.selected}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
|
|
44
|
-
this.updateUnderline();
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
clickOnTab(tab) {
|
|
48
|
-
this.querySelectorAll("*").forEach(node => node.removeAttribute("selected"));
|
|
49
|
-
tab.setAttribute("selected", "");
|
|
50
|
-
this.updateUnderline();
|
|
51
|
-
this.dispatchEvent(new CustomEvent("change", { detail: tab.getAttribute("tab"), composed: true, bubbles: true }));
|
|
52
|
-
}
|
|
53
|
-
updateUnderline() {
|
|
54
|
-
const selected = this.querySelector("[selected]");
|
|
55
|
-
if (selected) {
|
|
56
|
-
setTimeout(() => {
|
|
57
|
-
if (this.circle) {
|
|
58
|
-
this.$circle.style.transform = `translate(${selected.offsetLeft + selected.clientWidth / 2 - this.$circle.clientWidth / 2}px, -${this.$circle.clientWidth / 2}px)`;
|
|
59
|
-
}
|
|
60
|
-
else {
|
|
61
|
-
this.$underline.style.width = selected.clientWidth + "px";
|
|
62
|
-
this.$underline.style.transform = `translateX(${selected.offsetLeft}px)`;
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
// else {
|
|
67
|
-
// if (this.circle) {
|
|
68
|
-
// this.$circle.style.transform = `translate(-100px, -${this.$circle.clientWidth / 2}px)`;
|
|
69
|
-
// } else {
|
|
70
|
-
// this.$underline.style.width = "0";
|
|
71
|
-
// }
|
|
72
|
-
// }
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
TkTabGroup.styles = css `
|
|
76
|
-
${unsafeCSS(css_248z)}
|
|
77
|
-
`;
|
|
78
|
-
__decorate([
|
|
79
|
-
property({ attribute: true, type: Boolean })
|
|
80
|
-
], TkTabGroup.prototype, "circle", void 0);
|
|
81
|
-
__decorate([
|
|
82
|
-
property({ attribute: true, type: String })
|
|
83
|
-
], TkTabGroup.prototype, "observe", void 0);
|
|
84
|
-
__decorate([
|
|
85
|
-
property({ attribute: true, type: String })
|
|
86
|
-
], TkTabGroup.prototype, "selected", void 0);
|
|
87
|
-
__decorate([
|
|
88
|
-
query(".underline")
|
|
89
|
-
], TkTabGroup.prototype, "$underline", void 0);
|
|
90
|
-
__decorate([
|
|
91
|
-
query(".circle")
|
|
92
|
-
], TkTabGroup.prototype, "$circle", void 0);
|
|
93
|
-
TkTabGroup = __decorate([
|
|
94
|
-
customElement("tk-tab-group")
|
|
95
|
-
], TkTabGroup);
|
|
96
|
-
|
|
97
|
-
export { TkTabGroup };
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));display:inline-block;overflow:hidden;overflow-x:scroll;position:relative}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid var(--shade-lighter)}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0}.circle,.underline{background-color:var(--color)}.circle{border-radius:var(--border-radius-circle,50%);height:8px;transition:transform .3s ease;width:8px}";
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary,hsl(var(--primary-h,258.987),var(--primary-s,38.1643%),var(--primary-l,59.4118%)));display:inline-block;overflow:hidden;overflow-x:scroll;position:relative}:host([accent]){--color:var(--accent,hsl(var(--accent-h,8.76404),var(--accent-s,64.0288%),var(--accent-l,72.7451%)))}.tabs{display:flex}:host(:not([circle])) .tabs{border-bottom:2px solid var(--shade-lighter)}.underline{height:2px;margin-top:-2px;transition:transform .2s ease;width:0}.circle,.underline{background-color:var(--color)}.circle{border-radius:var(--border-radius-circle,50%);height:8px;transition:transform .3s ease;width:8px}";
|
|
3
|
-
|
|
4
|
-
export { css_248z as default, stylesheet };
|
package/tag/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./tag";
|
package/tag/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { TkTag } from './tag.js';
|
package/tag/tag.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
declare class TkTag extends LitElement {
|
|
3
|
-
static styles: import("lit").CSSResult;
|
|
4
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
5
|
-
}
|
|
6
|
-
declare global {
|
|
7
|
-
interface HTMLElementTagNameMap {
|
|
8
|
-
"tk-tag": TkTag;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
export { TkTag };
|
package/tag/tag.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { __decorate } from 'tslib';
|
|
2
|
-
import { LitElement, html, css, unsafeCSS } from 'lit';
|
|
3
|
-
import { customElement } from 'lit/decorators.js';
|
|
4
|
-
import css_248z from './tag.scss.js';
|
|
5
|
-
|
|
6
|
-
let TkTag = class TkTag extends LitElement {
|
|
7
|
-
render() {
|
|
8
|
-
return html `
|
|
9
|
-
<div class="tag"><slot></slot></div>
|
|
10
|
-
`;
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
TkTag.styles = css `
|
|
14
|
-
${unsafeCSS(css_248z)}
|
|
15
|
-
`;
|
|
16
|
-
TkTag = __decorate([
|
|
17
|
-
customElement("tk-tag")
|
|
18
|
-
], TkTag);
|
|
19
|
-
|
|
20
|
-
export { TkTag };
|
package/tag/tag.scss.js
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary);--text:var(--on-primary);background:var(--color);box-sizing:border-box;color:var(--text);display:flex;flex-grow:1;height:var(--navbar-height,48px);justify-content:space-between;padding:var(--navbar-padding,var(--spacing-s,.5rem));position:relative;transition:var(--nav-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));z-index:var(--navbar-z-index,100)}:host([inverted]){--color:var(--on-primary);--text:var(--primary)}:host([fixed]){left:0;position:fixed;top:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation,var(--elevation-5,0 12px 24px var(--shadow)))}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-size:var(--nav-title-font-size,var(--font-size-l,1.25rem));font-weight:var(--nav-title-font-weight,var(--font-weight-regular,500));margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
|
|
2
|
-
var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--color:var(--primary);--text:var(--on-primary);background:var(--color);box-sizing:border-box;color:var(--text);display:flex;flex-grow:1;height:var(--navbar-height,48px);justify-content:space-between;padding:var(--navbar-padding,var(--spacing-s,.5rem));position:relative;transition:var(--nav-transition,background var(--transition-duration-fast,.12s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),transform var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)),box-shadow var(--transition-duration-medium,.18s) var(--transition-timing-function-deceleration-curve,cubic-bezier(0,0,.2,1)));z-index:var(--navbar-z-index,100)}:host([inverted]){--color:var(--on-primary);--text:var(--primary)}:host([fixed]){left:0;position:fixed;top:0;width:100%}:host([shadow]){box-shadow:var(--nav-elevation,var(--elevation-5,0 12px 24px var(--shadow)))}#left,#right,#title,::slotted([slot=left]),::slotted([slot=right]),::slotted([slot=title]){align-items:center;display:flex;height:100%}#title,::slotted([slot=title]){font-size:var(--nav-title-font-size,var(--font-size-l,1.25rem));font-weight:var(--nav-title-font-weight,var(--font-weight-regular,500));margin:var(--nav-title-margin,0 0 0 var(--spacing-l,1.25rem))}";
|
|
3
|
-
|
|
4
|
-
export { css_248z as default, stylesheet };
|
package/textarea/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./textarea";
|
package/textarea/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { TkTextarea } from './textarea.js';
|
package/textarea/textarea.d.ts
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
declare class TkTextarea extends LitElement {
|
|
3
|
-
static styles: import("lit").CSSResult;
|
|
4
|
-
private _id;
|
|
5
|
-
set value(value: string);
|
|
6
|
-
get value(): string;
|
|
7
|
-
name: string;
|
|
8
|
-
list: string;
|
|
9
|
-
type: "email" | "number" | "password" | "text";
|
|
10
|
-
required: boolean;
|
|
11
|
-
disabled: boolean;
|
|
12
|
-
readonly: boolean;
|
|
13
|
-
autocomplete: "on" | "off";
|
|
14
|
-
autocapitalize: "off" | "none" | "on" | "sentences" | "words" | "characters";
|
|
15
|
-
pattern: string;
|
|
16
|
-
initialValue: string;
|
|
17
|
-
label: string;
|
|
18
|
-
minLength: number;
|
|
19
|
-
maxLength: number;
|
|
20
|
-
rows: number;
|
|
21
|
-
private $input;
|
|
22
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
23
|
-
private handleChange;
|
|
24
|
-
firstUpdated(): void;
|
|
25
|
-
private refreshAttributes;
|
|
26
|
-
focus(): void;
|
|
27
|
-
}
|
|
28
|
-
declare global {
|
|
29
|
-
interface HTMLElementTagNameMap {
|
|
30
|
-
"tk-textarea": TkTextarea;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
export { TkTextarea };
|