tinkiet 0.7.4 → 0.7.6

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