tinkiet 0.9.12 → 0.10.0

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