tinkiet 0.7.2 → 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.
Files changed (126) hide show
  1. package/package.json +1 -1
  2. package/umd/tinkiet.min.d.ts.map +1 -1
  3. package/umd/tinkiet.min.js +1 -1
  4. package/tinkiet/accordion/accordion.d.ts +0 -18
  5. package/tinkiet/accordion/accordion.js +0 -94
  6. package/tinkiet/accordion/accordion.scss.js +0 -4
  7. package/tinkiet/accordion/index.d.ts +0 -1
  8. package/tinkiet/accordion/index.js +0 -1
  9. package/tinkiet/badge/badge.d.ts +0 -15
  10. package/tinkiet/badge/badge.js +0 -27
  11. package/tinkiet/badge/badge.scss.js +0 -4
  12. package/tinkiet/badge/index.d.ts +0 -1
  13. package/tinkiet/badge/index.js +0 -1
  14. package/tinkiet/box/box.d.ts +0 -56
  15. package/tinkiet/box/box.js +0 -182
  16. package/tinkiet/box/box.scss.js +0 -4
  17. package/tinkiet/box/focusable-box.d.ts +0 -13
  18. package/tinkiet/box/focusable-box.js +0 -30
  19. package/tinkiet/box/index.d.ts +0 -1
  20. package/tinkiet/box/index.js +0 -1
  21. package/tinkiet/button/button.d.ts +0 -39
  22. package/tinkiet/button/button.js +0 -125
  23. package/tinkiet/button/button.scss.js +0 -4
  24. package/tinkiet/button/index.d.ts +0 -1
  25. package/tinkiet/button/index.js +0 -1
  26. package/tinkiet/checkbox/checkbox.d.ts +0 -21
  27. package/tinkiet/checkbox/checkbox.js +0 -83
  28. package/tinkiet/checkbox/checkbox.scss.js +0 -4
  29. package/tinkiet/checkbox/index.d.ts +0 -1
  30. package/tinkiet/checkbox/index.js +0 -1
  31. package/tinkiet/dialog/dialog.d.ts +0 -18
  32. package/tinkiet/dialog/dialog.js +0 -58
  33. package/tinkiet/dialog/dialog.scss.js +0 -4
  34. package/tinkiet/dialog/index.d.ts +0 -1
  35. package/tinkiet/dialog/index.js +0 -1
  36. package/tinkiet/drawer/drawer.d.ts +0 -29
  37. package/tinkiet/drawer/drawer.js +0 -152
  38. package/tinkiet/drawer/drawer.scss.js +0 -4
  39. package/tinkiet/drawer/index.d.ts +0 -1
  40. package/tinkiet/drawer/index.js +0 -1
  41. package/tinkiet/form/form.d.ts +0 -15
  42. package/tinkiet/form/form.js +0 -57
  43. package/tinkiet/form/index.d.ts +0 -1
  44. package/tinkiet/form/index.js +0 -1
  45. package/tinkiet/icon/icon.d.ts +0 -17
  46. package/tinkiet/icon/icon.js +0 -75
  47. package/tinkiet/icon/icon.scss.js +0 -4
  48. package/tinkiet/icon/icons.d.ts +0 -7
  49. package/tinkiet/icon/icons.js +0 -24
  50. package/tinkiet/icon/index.d.ts +0 -2
  51. package/tinkiet/icon/index.js +0 -2
  52. package/tinkiet/index.d.ts +0 -24
  53. package/tinkiet/index.d.ts.map +0 -1
  54. package/tinkiet/index.js +0 -47
  55. package/tinkiet/list-item/index.d.ts +0 -1
  56. package/tinkiet/list-item/index.js +0 -1
  57. package/tinkiet/list-item/list-item.d.ts +0 -20
  58. package/tinkiet/list-item/list-item.js +0 -72
  59. package/tinkiet/list-item/list-item.scss.js +0 -4
  60. package/tinkiet/loading/index.d.ts +0 -1
  61. package/tinkiet/loading/index.js +0 -1
  62. package/tinkiet/loading/loading.d.ts +0 -14
  63. package/tinkiet/loading/loading.js +0 -64
  64. package/tinkiet/loading/loading.scss.js +0 -4
  65. package/tinkiet/navbar/index.d.ts +0 -1
  66. package/tinkiet/navbar/index.js +0 -1
  67. package/tinkiet/navbar/navbar.d.ts +0 -11
  68. package/tinkiet/navbar/navbar.js +0 -33
  69. package/tinkiet/navbar/navbar.scss.js +0 -4
  70. package/tinkiet/notie/index.d.ts +0 -1
  71. package/tinkiet/notie/index.js +0 -1
  72. package/tinkiet/notie/notie.d.ts +0 -69
  73. package/tinkiet/notie/notie.js +0 -193
  74. package/tinkiet/notie/notie.scss.js +0 -4
  75. package/tinkiet/pages/index.d.ts +0 -1
  76. package/tinkiet/pages/index.js +0 -1
  77. package/tinkiet/pages/pages.d.ts +0 -18
  78. package/tinkiet/pages/pages.js +0 -75
  79. package/tinkiet/pages/pages.scss.js +0 -4
  80. package/tinkiet/radio/index.d.ts +0 -1
  81. package/tinkiet/radio/index.js +0 -1
  82. package/tinkiet/radio/radio.d.ts +0 -24
  83. package/tinkiet/radio/radio.js +0 -98
  84. package/tinkiet/radio/radio.scss.js +0 -4
  85. package/tinkiet/select/index.d.ts +0 -1
  86. package/tinkiet/select/index.js +0 -1
  87. package/tinkiet/select/select.d.ts +0 -32
  88. package/tinkiet/select/select.js +0 -132
  89. package/tinkiet/select/select.scss.js +0 -4
  90. package/tinkiet/slider/index.d.ts +0 -1
  91. package/tinkiet/slider/index.js +0 -1
  92. package/tinkiet/slider/slider.d.ts +0 -30
  93. package/tinkiet/slider/slider.js +0 -135
  94. package/tinkiet/slider/slider.scss.js +0 -4
  95. package/tinkiet/switch/index.d.ts +0 -1
  96. package/tinkiet/switch/index.js +0 -1
  97. package/tinkiet/switch/switch.d.ts +0 -24
  98. package/tinkiet/switch/switch.js +0 -99
  99. package/tinkiet/switch/switch.scss.js +0 -4
  100. package/tinkiet/tab-group/index.d.ts +0 -1
  101. package/tinkiet/tab-group/index.js +0 -1
  102. package/tinkiet/tab-group/tab-group.d.ts +0 -21
  103. package/tinkiet/tab-group/tab-group.js +0 -97
  104. package/tinkiet/tab-group/tab-group.scss.js +0 -4
  105. package/tinkiet/tag/index.d.ts +0 -1
  106. package/tinkiet/tag/index.js +0 -1
  107. package/tinkiet/tag/tag.d.ts +0 -11
  108. package/tinkiet/tag/tag.js +0 -20
  109. package/tinkiet/tag/tag.scss.js +0 -4
  110. package/tinkiet/textarea/index.d.ts +0 -1
  111. package/tinkiet/textarea/index.js +0 -1
  112. package/tinkiet/textarea/textarea.d.ts +0 -33
  113. package/tinkiet/textarea/textarea.js +0 -133
  114. package/tinkiet/textarea/textarea.scss.js +0 -4
  115. package/tinkiet/textfield/index.d.ts +0 -1
  116. package/tinkiet/textfield/index.js +0 -1
  117. package/tinkiet/textfield/textfield.d.ts +0 -34
  118. package/tinkiet/textfield/textfield.js +0 -136
  119. package/tinkiet/textfield/textfield.scss.js +0 -4
  120. package/tinkiet/theme/index.d.ts +0 -1
  121. package/tinkiet/theme/index.js +0 -1
  122. package/tinkiet/theme/theme.d.ts +0 -33
  123. package/tinkiet/theme/theme.js +0 -187
  124. package/tinkiet/theme/theme.scss.js +0 -4
  125. package/tinkiet/utils/unique.d.ts +0 -7
  126. package/tinkiet/utils/unique.js +0 -12
@@ -1,133 +0,0 @@
1
- import { __decorate } from 'tslib';
2
- import { LitElement, html, css, unsafeCSS } from 'lit';
3
- import { property, state, eventOptions, 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 './textarea.scss.js';
7
-
8
- let TkTextarea = class TkTextarea extends LitElement {
9
- constructor() {
10
- super(...arguments);
11
- this._id = uniqueID();
12
- this.type = "text";
13
- this.required = false;
14
- this.disabled = false;
15
- this.readonly = false;
16
- this.rows = 1;
17
- }
18
- set value(value) {
19
- if (!this.$input) {
20
- this.initialValue = value;
21
- }
22
- else {
23
- this.$input.value = value;
24
- this.refreshAttributes();
25
- }
26
- }
27
- get value() {
28
- return this.$input != null ? this.$input.value : this.initialValue || "";
29
- }
30
- render() {
31
- return html `
32
- <div id="container">
33
- <slot id="before" name="before"></slot>
34
- <div id="wrapper">
35
- <div id="label">${this.label}</div>
36
- <slot id="slot"></slot>
37
- <textarea
38
- id=${this._id}
39
- @keydown=${this.handleChange.bind(this)}
40
- @input=${this.handleChange.bind(this)}
41
- @focusout=${this.handleChange.bind(this)}
42
- ?required="${this.required}"
43
- ?disabled="${this.disabled}"
44
- ?readonly="${this.readonly}"
45
- aria-label="${ifDefined(this.label)}"
46
- name="${ifDefined(this.name)}"
47
- pattern="${ifDefined(this.pattern)}"
48
- autocomplete="${ifDefined(this.autocomplete)}"
49
- autocapitalize="${ifDefined(this.autocapitalize)}"
50
- minlength="${ifDefined(this.minLength)}"
51
- maxlength="${ifDefined(this.maxLength)}"
52
- rows="${this.rows}"
53
- tabindex="${this.disabled ? -1 : 0}"
54
- ></textarea>
55
- </div>
56
- <slot id="after" name="after"></slot>
57
- </div>
58
- `;
59
- }
60
- handleChange() {
61
- this.refreshAttributes();
62
- }
63
- firstUpdated() {
64
- var _a;
65
- this.$input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("textarea");
66
- this.appendChild(this.$input);
67
- if (this.initialValue)
68
- this.value = this.initialValue;
69
- }
70
- refreshAttributes() {
71
- this.$input.value ? this.setAttribute("dirty", "") : this.removeAttribute("dirty");
72
- this.$input.checkValidity() ? this.removeAttribute("invalid") : this.setAttribute("invalid", "");
73
- }
74
- focus() {
75
- this.$input.focus();
76
- }
77
- };
78
- TkTextarea.styles = css `
79
- ${unsafeCSS(css_248z)}
80
- `;
81
- __decorate([
82
- property({ type: String })
83
- ], TkTextarea.prototype, "value", null);
84
- __decorate([
85
- property({ attribute: true, type: String })
86
- ], TkTextarea.prototype, "name", void 0);
87
- __decorate([
88
- property({ type: String })
89
- ], TkTextarea.prototype, "list", void 0);
90
- __decorate([
91
- property({ type: String })
92
- ], TkTextarea.prototype, "type", void 0);
93
- __decorate([
94
- property({ type: Boolean })
95
- ], TkTextarea.prototype, "required", void 0);
96
- __decorate([
97
- property({ type: Boolean })
98
- ], TkTextarea.prototype, "disabled", void 0);
99
- __decorate([
100
- property({ type: Boolean })
101
- ], TkTextarea.prototype, "readonly", void 0);
102
- __decorate([
103
- property({ type: String })
104
- ], TkTextarea.prototype, "autocomplete", void 0);
105
- __decorate([
106
- property({ type: String })
107
- ], TkTextarea.prototype, "autocapitalize", void 0);
108
- __decorate([
109
- property({ type: String })
110
- ], TkTextarea.prototype, "pattern", void 0);
111
- __decorate([
112
- state()
113
- ], TkTextarea.prototype, "initialValue", void 0);
114
- __decorate([
115
- property({ type: String })
116
- ], TkTextarea.prototype, "label", void 0);
117
- __decorate([
118
- property({ type: Number })
119
- ], TkTextarea.prototype, "minLength", void 0);
120
- __decorate([
121
- property({ type: Number })
122
- ], TkTextarea.prototype, "maxLength", void 0);
123
- __decorate([
124
- property({ type: Number })
125
- ], TkTextarea.prototype, "rows", void 0);
126
- __decorate([
127
- eventOptions({ passive: true })
128
- ], TkTextarea.prototype, "handleChange", null);
129
- TkTextarea = __decorate([
130
- customElement("tk-textarea")
131
- ], TkTextarea);
132
-
133
- export { TkTextarea };
@@ -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)}#wrapper ::slotted(textarea){font-family:inherit;height:var(--textarea-height,var(--_textarea-height));max-height:var(--textarea-max-height);min-height:var(--textarea-min-height,var(--textarea-height,var(--_textarea-height)));resize:var(--textarea-resize,none)}:host(:focus) ::slotted(textarea),:host(:hover) ::slotted(textarea){will-change:height}";
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)}#wrapper ::slotted(textarea){font-family:inherit;height:var(--textarea-height,var(--_textarea-height));max-height:var(--textarea-max-height);min-height:var(--textarea-min-height,var(--textarea-height,var(--_textarea-height)));resize:var(--textarea-resize,none)}:host(:focus) ::slotted(textarea),:host(:hover) ::slotted(textarea){will-change:height}";
3
-
4
- export { css_248z as default, stylesheet };
@@ -1 +0,0 @@
1
- export * from "./textfield";
@@ -1 +0,0 @@
1
- export { TkTextfield } from './textfield.js';
@@ -1,34 +0,0 @@
1
- import { LitElement } from "lit";
2
- declare class TkTextfield 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" | "search";
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
- min: number;
19
- max: number;
20
- minLength: number;
21
- maxLength: number;
22
- private $input;
23
- render(): import("lit-html").TemplateResult<1>;
24
- private handleChange;
25
- firstUpdated(): void;
26
- private refreshAttributes;
27
- focus(): void;
28
- }
29
- declare global {
30
- interface HTMLElementTagNameMap {
31
- "tk-textfield": TkTextfield;
32
- }
33
- }
34
- export { TkTextfield };
@@ -1,136 +0,0 @@
1
- import { __decorate } from 'tslib';
2
- import { property, state, eventOptions, customElement } from 'lit/decorators.js';
3
- import { LitElement, html, css, unsafeCSS } from 'lit';
4
- import { ifDefined } from 'lit/directives/if-defined.js';
5
- import { uniqueID } from '../utils/unique.js';
6
- import css_248z from './textfield.scss.js';
7
-
8
- let TkTextfield = class TkTextfield extends LitElement {
9
- constructor() {
10
- super(...arguments);
11
- this._id = uniqueID();
12
- this.type = "text";
13
- this.required = false;
14
- this.disabled = false;
15
- this.readonly = false;
16
- }
17
- set value(value) {
18
- if (!this.$input) {
19
- this.initialValue = value;
20
- }
21
- else {
22
- this.$input.value = value;
23
- this.refreshAttributes();
24
- }
25
- }
26
- get value() {
27
- return this.$input != null ? this.$input.value : this.initialValue || "";
28
- }
29
- render() {
30
- return html `<div id="container">
31
- <slot id="before" name="before"></slot>
32
- <div id="wrapper">
33
- <div id="label">${this.label}</div>
34
- <slot id="slot"></slot>
35
- <input
36
- id=${this._id}
37
- @keydown=${this.handleChange.bind(this)}
38
- @input=${this.handleChange.bind(this)}
39
- @focusout=${this.handleChange.bind(this)}
40
- ?required="${this.required}"
41
- ?disabled="${this.disabled}"
42
- ?readonly="${this.readonly}"
43
- autocomplete="${ifDefined(this.autocomplete)}"
44
- autocapitalize="${ifDefined(this.autocapitalize)}"
45
- aria-label="${ifDefined(this.label)}"
46
- type="${ifDefined(this.type)}"
47
- name="${ifDefined(this.name)}"
48
- list="${ifDefined(this.list)}"
49
- pattern="${ifDefined(this.pattern)}"
50
- minlength="${ifDefined(this.minLength)}"
51
- maxlength="${ifDefined(this.maxLength)}"
52
- min="${ifDefined(this.min)}"
53
- max="${ifDefined(this.max)}"
54
- tabindex="${this.disabled ? -1 : 0}"
55
- />
56
- </div>
57
- <slot id="after" name="after"></slot>
58
- </div> `;
59
- }
60
- handleChange() {
61
- this.refreshAttributes();
62
- }
63
- firstUpdated() {
64
- var _a;
65
- this.$input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("input");
66
- this.appendChild(this.$input);
67
- if (this.initialValue)
68
- this.value = this.initialValue;
69
- }
70
- refreshAttributes() {
71
- this.$input.value ? this.setAttribute("dirty", "") : this.removeAttribute("dirty");
72
- this.$input.checkValidity() ? this.removeAttribute("invalid") : this.setAttribute("invalid", "");
73
- }
74
- focus() {
75
- this.$input.focus();
76
- }
77
- };
78
- TkTextfield.styles = css `
79
- ${unsafeCSS(css_248z)}
80
- `;
81
- __decorate([
82
- property({ type: String })
83
- ], TkTextfield.prototype, "value", null);
84
- __decorate([
85
- property({ attribute: true, type: String })
86
- ], TkTextfield.prototype, "name", void 0);
87
- __decorate([
88
- property({ type: String })
89
- ], TkTextfield.prototype, "list", void 0);
90
- __decorate([
91
- property({ type: String })
92
- ], TkTextfield.prototype, "type", void 0);
93
- __decorate([
94
- property({ type: Boolean })
95
- ], TkTextfield.prototype, "required", void 0);
96
- __decorate([
97
- property({ type: Boolean })
98
- ], TkTextfield.prototype, "disabled", void 0);
99
- __decorate([
100
- property({ type: Boolean })
101
- ], TkTextfield.prototype, "readonly", void 0);
102
- __decorate([
103
- property({ type: String })
104
- ], TkTextfield.prototype, "autocomplete", void 0);
105
- __decorate([
106
- property({ type: String })
107
- ], TkTextfield.prototype, "autocapitalize", void 0);
108
- __decorate([
109
- property({ type: String })
110
- ], TkTextfield.prototype, "pattern", void 0);
111
- __decorate([
112
- state()
113
- ], TkTextfield.prototype, "initialValue", void 0);
114
- __decorate([
115
- property({ type: String })
116
- ], TkTextfield.prototype, "label", void 0);
117
- __decorate([
118
- property({ type: Number })
119
- ], TkTextfield.prototype, "min", void 0);
120
- __decorate([
121
- property({ type: Number })
122
- ], TkTextfield.prototype, "max", void 0);
123
- __decorate([
124
- property({ type: Number })
125
- ], TkTextfield.prototype, "minLength", void 0);
126
- __decorate([
127
- property({ type: Number })
128
- ], TkTextfield.prototype, "maxLength", void 0);
129
- __decorate([
130
- eventOptions({ passive: true })
131
- ], TkTextfield.prototype, "handleChange", null);
132
- TkTextfield = __decorate([
133
- customElement("tk-textfield")
134
- ], TkTextfield);
135
-
136
- export { TkTextfield };
@@ -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)}";
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)}";
3
-
4
- export { css_248z as default, stylesheet };
@@ -1 +0,0 @@
1
- export * from "./theme";
@@ -1 +0,0 @@
1
- export { TkTheme } from './theme.js';
@@ -1,33 +0,0 @@
1
- import { LitElement } from "lit";
2
- declare class TkTheme extends LitElement {
3
- static styles: import("lit").CSSResult;
4
- primary: string;
5
- onPrimary: string;
6
- accent: string;
7
- onAccent: string;
8
- shade: string;
9
- onShade: string;
10
- error: string;
11
- onError: string;
12
- foreground: string;
13
- background: string;
14
- forceBody: boolean;
15
- inverted: boolean;
16
- render(): import("lit-html").TemplateResult<1>;
17
- updated(): void;
18
- connectedCallback(): void;
19
- disconnectedCallback(): void;
20
- private setTheme;
21
- private setThemeFontSize;
22
- turnThemeToInverted(): void;
23
- turnThemeToNonInverted(): void;
24
- private hexToHSL;
25
- private setThemeColor;
26
- private setBodyStyle;
27
- }
28
- declare global {
29
- interface HTMLElementTagNameMap {
30
- "tk-theme": TkTheme;
31
- }
32
- }
33
- export { TkTheme };
@@ -1,187 +0,0 @@
1
- import { __decorate } from 'tslib';
2
- import { LitElement, html, css, unsafeCSS } from 'lit';
3
- import { property, customElement } from 'lit/decorators.js';
4
- import css_248z from './theme.scss.js';
5
-
6
- let TkTheme = class TkTheme extends LitElement {
7
- constructor() {
8
- super(...arguments);
9
- this.primary = "#8970bf";
10
- this.onPrimary = "#FFFFFF";
11
- this.accent = "#E69A8D";
12
- this.onAccent = "#FFFFFF";
13
- this.shade = "#AAAAAA";
14
- this.onShade = "#FFFFFF";
15
- this.error = "#F44336";
16
- this.onError = "#FFFFFF";
17
- this.foreground = "#FFFFFF";
18
- this.background = "#000";
19
- this.forceBody = false;
20
- this.inverted = false;
21
- }
22
- render() {
23
- return html `
24
- <slot></slot>
25
- `;
26
- }
27
- updated() {
28
- this.setThemeColor();
29
- }
30
- connectedCallback() {
31
- super.connectedCallback();
32
- this.addEventListener("turn-theme-to-inverted", () => this.turnThemeToInverted(), { passive: true });
33
- this.addEventListener("turn-theme-to-non-inverted", () => this.turnThemeToNonInverted(), { passive: true });
34
- this.addEventListener("set-theme", this.setTheme);
35
- this.addEventListener("set-theme-font-size", this.setThemeFontSize);
36
- }
37
- disconnectedCallback() {
38
- this.removeEventListener("turn-theme-to-inverted", this.turnThemeToInverted);
39
- this.removeEventListener("turn-theme-to-non-inverted", this.turnThemeToNonInverted);
40
- this.removeEventListener("set-theme", this.setTheme);
41
- this.removeEventListener("set-theme-font-size", this.setThemeFontSize);
42
- super.disconnectedCallback();
43
- }
44
- setTheme(e) {
45
- const ev = e;
46
- this.background = ev.detail.background ? ev.detail.background : this.background;
47
- this.foreground = ev.detail.foreground ? ev.detail.foreground : this.foreground;
48
- this.primary = ev.detail.primary ? ev.detail.primary : this.primary;
49
- this.onPrimary = ev.detail.onPrimary ? ev.detail.onPrimary : this.onPrimary;
50
- this.accent = ev.detail.accent ? ev.detail.accent : this.accent;
51
- this.onAccent = ev.detail.onAccent ? ev.detail.onAccent : this.onAccent;
52
- }
53
- setThemeFontSize(e) {
54
- const ev = e;
55
- this.style.setProperty("--font-size", ev.detail);
56
- }
57
- turnThemeToInverted() {
58
- this.inverted = true;
59
- this.forceBody && this.setBodyStyle();
60
- }
61
- turnThemeToNonInverted() {
62
- this.inverted = false;
63
- this.forceBody && this.setBodyStyle();
64
- }
65
- hexToHSL(hex) {
66
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
67
- if (result == null)
68
- return ["0", "0%", "0%"];
69
- const [, rHex, gHex, bHex] = result;
70
- const radix = 16;
71
- const r = parseInt(rHex, radix) / 255;
72
- const g = parseInt(gHex, radix) / 255;
73
- const b = parseInt(bHex, radix) / 255;
74
- const max = Math.max(r, g, b), min = Math.min(r, g, b);
75
- let h = 0, s = 0, l = (max + min) / 2;
76
- if (max != min) {
77
- const d = max - min;
78
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
79
- switch (max) {
80
- case r:
81
- h = (g - b) / d + (g < b ? 6 : 0);
82
- break;
83
- case g:
84
- h = (b - r) / d + 2;
85
- break;
86
- case b:
87
- h = (r - g) / d + 4;
88
- break;
89
- }
90
- h /= 6;
91
- }
92
- return [(h * 360).toString(), (s * 100).toString() + "%", (l * 100).toString() + "%"];
93
- }
94
- setThemeColor() {
95
- const primary_hsl = this.hexToHSL(this.primary);
96
- this.style.setProperty("--primary-h", primary_hsl[0]);
97
- this.style.setProperty("--primary-s", primary_hsl[1]);
98
- this.style.setProperty("--primary-l", primary_hsl[2]);
99
- const on_primary_hsl = this.hexToHSL(this.onPrimary);
100
- this.style.setProperty("--on-primary-h", on_primary_hsl[0]);
101
- this.style.setProperty("--on-primary-s", on_primary_hsl[1]);
102
- this.style.setProperty("--on-primary-l", on_primary_hsl[2]);
103
- const accent_hsl = this.hexToHSL(this.accent);
104
- this.style.setProperty("--accent-h", accent_hsl[0]);
105
- this.style.setProperty("--accent-s", accent_hsl[1]);
106
- this.style.setProperty("--accent-l", accent_hsl[2]);
107
- const on_accent_hsl = this.hexToHSL(this.onAccent);
108
- this.style.setProperty("--on-accent-h", on_accent_hsl[0]);
109
- this.style.setProperty("--on-accent-s", on_accent_hsl[1]);
110
- this.style.setProperty("--on-accent-l", on_accent_hsl[2]);
111
- const shade_hsl = this.hexToHSL(this.shade);
112
- this.style.setProperty("--shade-h", shade_hsl[0]);
113
- this.style.setProperty("--shade-s", shade_hsl[1]);
114
- this.style.setProperty("--shade-l", shade_hsl[2]);
115
- const on_shade_hsl = this.hexToHSL(this.onShade);
116
- this.style.setProperty("--on-shade-h", on_shade_hsl[0]);
117
- this.style.setProperty("--on-shade-s", on_shade_hsl[1]);
118
- this.style.setProperty("--on-shade-l", on_shade_hsl[2]);
119
- const error_hsl = this.hexToHSL(this.error);
120
- this.style.setProperty("--error-h", error_hsl[0]);
121
- this.style.setProperty("--error-s", error_hsl[1]);
122
- this.style.setProperty("--error-l", error_hsl[2]);
123
- const on_error_hsl = this.hexToHSL(this.onError);
124
- this.style.setProperty("--on-error-h", on_error_hsl[0]);
125
- this.style.setProperty("--on-error-s", on_error_hsl[1]);
126
- this.style.setProperty("--on-error-l", on_error_hsl[2]);
127
- const foreground = this.hexToHSL(this.foreground);
128
- this.style.setProperty("--theme-foreground", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
129
- const background = this.hexToHSL(this.background);
130
- this.style.setProperty("--theme-background", `hsl(${background[0]},${background[1]},${background[2]})`);
131
- this.forceBody && this.setBodyStyle();
132
- }
133
- setBodyStyle() {
134
- let foreground = this.hexToHSL(this.foreground);
135
- let background = this.hexToHSL(this.background);
136
- if (this.inverted) {
137
- foreground = this.hexToHSL(this.background);
138
- background = this.hexToHSL(this.foreground);
139
- }
140
- document.body.style.setProperty("background", `hsl(${background[0]},${background[1]},${background[2]})`);
141
- document.body.style.setProperty("color", `hsl(${foreground[0]},${foreground[1]},${foreground[2]})`);
142
- }
143
- };
144
- TkTheme.styles = css `
145
- ${unsafeCSS(css_248z)}
146
- `;
147
- __decorate([
148
- property()
149
- ], TkTheme.prototype, "primary", void 0);
150
- __decorate([
151
- property({ attribute: "on-primary" })
152
- ], TkTheme.prototype, "onPrimary", void 0);
153
- __decorate([
154
- property()
155
- ], TkTheme.prototype, "accent", void 0);
156
- __decorate([
157
- property({ attribute: "on-accent" })
158
- ], TkTheme.prototype, "onAccent", void 0);
159
- __decorate([
160
- property()
161
- ], TkTheme.prototype, "shade", void 0);
162
- __decorate([
163
- property()
164
- ], TkTheme.prototype, "onShade", void 0);
165
- __decorate([
166
- property()
167
- ], TkTheme.prototype, "error", void 0);
168
- __decorate([
169
- property()
170
- ], TkTheme.prototype, "onError", void 0);
171
- __decorate([
172
- property()
173
- ], TkTheme.prototype, "foreground", void 0);
174
- __decorate([
175
- property()
176
- ], TkTheme.prototype, "background", void 0);
177
- __decorate([
178
- property({ type: Boolean, attribute: "force-body", reflect: true })
179
- ], TkTheme.prototype, "forceBody", void 0);
180
- __decorate([
181
- property({ type: Boolean, attribute: true, reflect: true })
182
- ], TkTheme.prototype, "inverted", void 0);
183
- TkTheme = __decorate([
184
- customElement("tk-theme")
185
- ], TkTheme);
186
-
187
- export { TkTheme };
@@ -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{--background:var(--theme-background);--foreground:var(--theme-foreground);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--shadow-lighter:#0000001a;--shadow-light:#00000026;--shadow:#0003;--shadow-dark:#0006;--shadow-darker:#0009;background-color:var(--background);color:var(--foreground);font-family:var(--font-family,Roboto,sans-serif);font-size:var(--font-size,1rem)}:host([inverted]){--background:var(--theme-foreground);--foreground:var(--theme-background);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--shadow-lighter:#ffffff1a;--shadow-light:#ffffff26;--shadow:#fff3;--shadow-dark:#fff6;--shadow-darker:#fff9}";
2
- var stylesheet="*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box}:host{--background:var(--theme-background);--foreground:var(--theme-foreground);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--shadow-lighter:#0000001a;--shadow-light:#00000026;--shadow:#0003;--shadow-dark:#0006;--shadow-darker:#0009;background-color:var(--background);color:var(--foreground);font-family:var(--font-family,Roboto,sans-serif);font-size:var(--font-size,1rem)}:host([inverted]){--background:var(--theme-foreground);--foreground:var(--theme-background);--primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.7));--primary-light:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*0.85));--primary:hsl(var(--primary-h),var(--primary-s),var(--primary-l));--primary-dark:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.15));--primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l)*1.3));--on-primary-lighter:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.7));--on-primary-light:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*0.85));--on-primary:hsl(var(--on-primary-h),var(--on-primary-s),var(--on-primary-l));--on-primary-dark:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.15));--on-primary-darker:hsl(var(--on-primary-h),var(--on-primary-s),calc(var(--on-primary-l)*1.3));--accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.7));--accent-light:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*0.85));--accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l));--accent-dark:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.15));--accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l)*1.3));--on-accent-lighter:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.7));--on-accent-light:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*0.85));--on-accent:hsl(var(--on-accent-h),var(--on-accent-s),var(--on-accent-l));--on-accent-dark:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.15));--on-accent-darker:hsl(var(--on-accent-h),var(--on-accent-s),calc(var(--on-accent-l)*1.3));--shade-lighter:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.7));--shade-light:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*0.85));--shade:hsl(var(--shade-h),var(--shade-s),var(--shade-l));--shade-dark:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.15));--shade-darker:hsl(var(--shade-h),var(--shade-s),calc(var(--shade-l)*1.3));--on-shade-lighter:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.7));--on-shade-light:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*0.85));--on-shade:hsl(var(--on-shade-h),var(--on-shade-s),var(--on-shade-l));--on-shade-dark:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.15));--on-shade-darker:hsl(var(--on-shade-h),var(--on-shade-s),calc(var(--on-shade-l)*1.3));--error-lighter:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.7));--error-light:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*0.85));--error:hsl(var(--error-h),var(--error-s),var(--error-l));--error-dark:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.15));--error-darker:hsl(var(--error-h),var(--error-s),calc(var(--error-l)*1.3));--on-error-lighter:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.7));--on-error-light:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*0.85));--on-error:hsl(var(--on-error-h),var(--on-error-s),var(--on-error-l));--on-error-dark:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.15));--on-error-darker:hsl(var(--on-error-h),var(--on-error-s),calc(var(--on-error-l)*1.3));--shadow-lighter:#ffffff1a;--shadow-light:#ffffff26;--shadow:#fff3;--shadow-dark:#fff6;--shadow-darker:#fff9}";
3
-
4
- export { css_248z as default, stylesheet };
@@ -1,7 +0,0 @@
1
- /**
2
- * Returns a unique ID.
3
- * @param {number} length
4
- * @returns {string}
5
- */
6
- declare function uniqueID(length?: number): string;
7
- export { uniqueID };
@@ -1,12 +0,0 @@
1
- /**
2
- * Returns a unique ID.
3
- * @param {number} length
4
- * @returns {string}
5
- */
6
- function uniqueID(length = 10) {
7
- return `_${Math.random()
8
- .toString(36)
9
- .substr(2, length)}`;
10
- }
11
-
12
- export { uniqueID };