ku4web-components 6.4.85 → 6.4.87

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 (194) hide show
  1. package/dist/cjs/ku4-carousel-controls.cjs.entry.js +2 -2
  2. package/dist/cjs/ku4-carousel-slide.cjs.entry.js +1 -1
  3. package/dist/cjs/ku4-carousel.cjs.entry.js +3 -3
  4. package/dist/cjs/ku4-col.cjs.entry.js +1 -1
  5. package/dist/cjs/ku4-drawer.cjs.entry.js +1 -1
  6. package/dist/cjs/ku4-feature.cjs.entry.js +2 -2
  7. package/dist/cjs/ku4-focus-trap.cjs.entry.js +26 -26
  8. package/dist/cjs/ku4-form.cjs.entry.js +3 -3
  9. package/dist/cjs/ku4-grid.cjs.entry.js +1 -1
  10. package/dist/cjs/ku4-label.cjs.entry.js +2 -2
  11. package/dist/cjs/ku4-mask.cjs.entry.js +3 -3
  12. package/dist/cjs/ku4-modal.cjs.entry.js +9 -4
  13. package/dist/cjs/ku4-panel.cjs.entry.js +1 -1
  14. package/dist/cjs/ku4-preview.cjs.entry.js +14 -43
  15. package/dist/cjs/ku4-tab-list.cjs.entry.js +4 -4
  16. package/dist/cjs/ku4-tab-panel.cjs.entry.js +3 -3
  17. package/dist/cjs/ku4-tab.cjs.entry.js +3 -3
  18. package/dist/cjs/ku4-table.cjs.entry.js +1 -1
  19. package/dist/cjs/ku4-tooltip.cjs.entry.js +2 -2
  20. package/dist/cjs/ku4-validation.cjs.entry.js +2 -2
  21. package/dist/cjs/ku4web-components.cjs.js +7 -102
  22. package/dist/cjs/loader.cjs.js +2 -18
  23. package/dist/esm/ku4-carousel-controls.entry.js +2 -2
  24. package/dist/esm/ku4-carousel-slide.entry.js +1 -1
  25. package/dist/esm/ku4-carousel.entry.js +3 -3
  26. package/dist/esm/ku4-col.entry.js +1 -1
  27. package/dist/esm/ku4-drawer.entry.js +1 -1
  28. package/dist/esm/ku4-feature.entry.js +2 -2
  29. package/dist/esm/ku4-focus-trap.entry.js +3 -3
  30. package/dist/esm/ku4-form.entry.js +3 -3
  31. package/dist/esm/ku4-grid.entry.js +1 -1
  32. package/dist/esm/ku4-label.entry.js +2 -2
  33. package/dist/esm/ku4-mask.entry.js +3 -3
  34. package/dist/esm/ku4-modal.entry.js +9 -4
  35. package/dist/esm/ku4-panel.entry.js +1 -1
  36. package/dist/esm/ku4-preview.entry.js +5 -34
  37. package/dist/esm/ku4-tab-list.entry.js +4 -4
  38. package/dist/esm/ku4-tab-panel.entry.js +3 -3
  39. package/dist/esm/ku4-tab.entry.js +3 -3
  40. package/dist/esm/ku4-table.entry.js +1 -1
  41. package/dist/esm/ku4-tooltip.entry.js +2 -2
  42. package/dist/esm/ku4-validation.entry.js +2 -2
  43. package/dist/esm/ku4web-components.js +7 -102
  44. package/dist/esm/loader.js +2 -18
  45. package/dist/esm-es5/ku4-mask.entry.js +1 -1
  46. package/dist/esm-es5/ku4-modal.entry.js +1 -1
  47. package/dist/esm-es5/ku4web-components.js +1 -1
  48. package/dist/esm-es5/loader.js +1 -1
  49. package/dist/index.js +1 -1
  50. package/dist/ku4web-components/index.esm.js +0 -1
  51. package/dist/ku4web-components/ku4web-components.css +1 -299
  52. package/dist/ku4web-components/ku4web-components.esm.js +1 -129
  53. package/dist/ku4web-components/ku4web-components.js +1 -1
  54. package/dist/ku4web-components/p-479f3ff2.entry.js +1 -0
  55. package/dist/ku4web-components/{p-5a60b1d4.system.entry.js → p-cf860f7a.system.entry.js} +1 -1
  56. package/dist/ku4web-components/p-d66b1c43.system.js +1 -1
  57. package/dist/ku4web-components/p-eace33d2.system.entry.js +1 -0
  58. package/dist/ku4web-components/p-f6b9d36e.entry.js +1 -0
  59. package/dist/types/components/ku4-modal/ku4-modal.d.ts +5 -0
  60. package/dist/types/components.d.ts +10 -2
  61. package/package.json +1 -1
  62. package/dist/cjs/app-globals-3a1e7e63.js +0 -5
  63. package/dist/cjs/css-shim-af499675.js +0 -6
  64. package/dist/cjs/dom-0e8e7262.js +0 -75
  65. package/dist/cjs/index-31267995.js +0 -3093
  66. package/dist/cjs/index-517c4086.js +0 -14
  67. package/dist/cjs/index-d6fca091.js +0 -10
  68. package/dist/cjs/uid-8ec2f63e.js +0 -11
  69. package/dist/collection/capabilities/a11y/aria.js +0 -26
  70. package/dist/collection/capabilities/angular/index.js +0 -24
  71. package/dist/collection/capabilities/decorators/deprecated.js +0 -20
  72. package/dist/collection/capabilities/decorators/index.js +0 -3
  73. package/dist/collection/capabilities/decorators/memoize.js +0 -7
  74. package/dist/collection/capabilities/dom/isFocusable.js +0 -7
  75. package/dist/collection/capabilities/dom/queryFocusable.js +0 -2
  76. package/dist/collection/capabilities/identity/uid.js +0 -6
  77. package/dist/collection/capabilities/mask/index.js +0 -5
  78. package/dist/collection/capabilities/mask/patterns/date.js +0 -40
  79. package/dist/collection/capabilities/mask/patterns/index.js +0 -7
  80. package/dist/collection/capabilities/react/index.js +0 -25
  81. package/dist/collection/capabilities/testing/html.js +0 -14
  82. package/dist/collection/capabilities/testing/styles.js +0 -14
  83. package/dist/collection/capabilities/vue/index.js +0 -28
  84. package/dist/collection/capabilities/vue3/index.js +0 -26
  85. package/dist/collection/collection-manifest.json +0 -31
  86. package/dist/collection/components/ku4-carousel/ku4-carousel.css +0 -221
  87. package/dist/collection/components/ku4-carousel/ku4-carousel.js +0 -369
  88. package/dist/collection/components/ku4-carousel-controls/ku4-carousel-controls.css +0 -32
  89. package/dist/collection/components/ku4-carousel-controls/ku4-carousel-controls.js +0 -112
  90. package/dist/collection/components/ku4-carousel-slide/ku4-carousel-slide.css +0 -3
  91. package/dist/collection/components/ku4-carousel-slide/ku4-carousel-slide.js +0 -159
  92. package/dist/collection/components/ku4-col/ku4-col.css +0 -601
  93. package/dist/collection/components/ku4-col/ku4-col.js +0 -288
  94. package/dist/collection/components/ku4-drawer/ku4-drawer.css +0 -56
  95. package/dist/collection/components/ku4-drawer/ku4-drawer.js +0 -163
  96. package/dist/collection/components/ku4-feature/ku4-feature.js +0 -70
  97. package/dist/collection/components/ku4-focus-trap/ku4-focus-trap.css +0 -3
  98. package/dist/collection/components/ku4-focus-trap/ku4-focus-trap.js +0 -441
  99. package/dist/collection/components/ku4-form/ku4-form.js +0 -225
  100. package/dist/collection/components/ku4-grid/ku4-grid.css +0 -751
  101. package/dist/collection/components/ku4-grid/ku4-grid.js +0 -408
  102. package/dist/collection/components/ku4-label/ku4-label.css +0 -36
  103. package/dist/collection/components/ku4-label/ku4-label.js +0 -115
  104. package/dist/collection/components/ku4-mask/ku4-mask.css +0 -3
  105. package/dist/collection/components/ku4-mask/ku4-mask.js +0 -458
  106. package/dist/collection/components/ku4-modal/ku4-modal.css +0 -85
  107. package/dist/collection/components/ku4-modal/ku4-modal.js +0 -208
  108. package/dist/collection/components/ku4-panel/ku4-panel.css +0 -14
  109. package/dist/collection/components/ku4-panel/ku4-panel.js +0 -119
  110. package/dist/collection/components/ku4-preview/ku4-preview.css +0 -23
  111. package/dist/collection/components/ku4-preview/ku4-preview.js +0 -266
  112. package/dist/collection/components/ku4-tab/ku4-tab.css +0 -82
  113. package/dist/collection/components/ku4-tab/ku4-tab.js +0 -191
  114. package/dist/collection/components/ku4-tab-list/ku4-tab-list.css +0 -6
  115. package/dist/collection/components/ku4-tab-list/ku4-tab-list.js +0 -118
  116. package/dist/collection/components/ku4-tab-panel/ku4-tab-panel.css +0 -26
  117. package/dist/collection/components/ku4-tab-panel/ku4-tab-panel.js +0 -166
  118. package/dist/collection/components/ku4-table/ku4-table.css +0 -116
  119. package/dist/collection/components/ku4-table/ku4-table.js +0 -120
  120. package/dist/collection/components/ku4-tooltip/ku4-tooltip.css +0 -56
  121. package/dist/collection/components/ku4-tooltip/ku4-tooltip.js +0 -274
  122. package/dist/collection/components/ku4-validation/ku4-validation.css +0 -19
  123. package/dist/collection/components/ku4-validation/ku4-validation.js +0 -364
  124. package/dist/collection/components/ku4-validation/validate.js +0 -14
  125. package/dist/collection/index.js +0 -1
  126. package/dist/collection/security.js +0 -27
  127. package/dist/esm/app-globals-0f993ce5.js +0 -3
  128. package/dist/esm/css-shim-5697df59.js +0 -4
  129. package/dist/esm/dom-1d32cb7b.js +0 -73
  130. package/dist/esm/index-135dacad.js +0 -3
  131. package/dist/esm/index-52b04dce.js +0 -3057
  132. package/dist/esm/index-f13d1b41.js +0 -3
  133. package/dist/esm/uid-a7ff854d.js +0 -9
  134. package/dist/ku4web-components/app-globals-0f993ce5.js +0 -3
  135. package/dist/ku4web-components/app-globals-497eb362.system.js +0 -1
  136. package/dist/ku4web-components/css-shim-2eb8ce1f.system.js +0 -1
  137. package/dist/ku4web-components/css-shim-5697df59.js +0 -4
  138. package/dist/ku4web-components/dom-1d32cb7b.js +0 -73
  139. package/dist/ku4web-components/dom-e6a9d306.system.js +0 -21
  140. package/dist/ku4web-components/index-135dacad.js +0 -3
  141. package/dist/ku4web-components/index-4036ffa2.system.js +0 -1
  142. package/dist/ku4web-components/index-52b04dce.js +0 -3057
  143. package/dist/ku4web-components/index-9bb2580f.system.js +0 -1
  144. package/dist/ku4web-components/index-dcd9a8a7.system.js +0 -1
  145. package/dist/ku4web-components/index-f13d1b41.js +0 -3
  146. package/dist/ku4web-components/index.system.js +0 -1
  147. package/dist/ku4web-components/ku4-carousel-controls.entry.js +0 -89
  148. package/dist/ku4web-components/ku4-carousel-controls.system.entry.js +0 -1
  149. package/dist/ku4web-components/ku4-carousel-slide.entry.js +0 -47
  150. package/dist/ku4web-components/ku4-carousel-slide.system.entry.js +0 -1
  151. package/dist/ku4web-components/ku4-carousel.entry.js +0 -175
  152. package/dist/ku4web-components/ku4-carousel.system.entry.js +0 -1
  153. package/dist/ku4web-components/ku4-col.entry.js +0 -75
  154. package/dist/ku4web-components/ku4-col.system.entry.js +0 -1
  155. package/dist/ku4web-components/ku4-drawer.entry.js +0 -35
  156. package/dist/ku4web-components/ku4-drawer.system.entry.js +0 -1
  157. package/dist/ku4web-components/ku4-feature.entry.js +0 -29
  158. package/dist/ku4web-components/ku4-feature.system.entry.js +0 -1
  159. package/dist/ku4web-components/ku4-focus-trap.entry.js +0 -323
  160. package/dist/ku4web-components/ku4-focus-trap.system.entry.js +0 -1
  161. package/dist/ku4web-components/ku4-form.entry.js +0 -112
  162. package/dist/ku4web-components/ku4-form.system.entry.js +0 -1
  163. package/dist/ku4web-components/ku4-grid.entry.js +0 -108
  164. package/dist/ku4web-components/ku4-grid.system.entry.js +0 -1
  165. package/dist/ku4web-components/ku4-label.entry.js +0 -70
  166. package/dist/ku4web-components/ku4-label.system.entry.js +0 -1
  167. package/dist/ku4web-components/ku4-mask.entry.js +0 -342
  168. package/dist/ku4web-components/ku4-mask.system.entry.js +0 -1
  169. package/dist/ku4web-components/ku4-modal.entry.js +0 -75
  170. package/dist/ku4web-components/ku4-modal.system.entry.js +0 -1
  171. package/dist/ku4web-components/ku4-panel.entry.js +0 -49
  172. package/dist/ku4web-components/ku4-panel.system.entry.js +0 -1
  173. package/dist/ku4web-components/ku4-preview.entry.js +0 -128
  174. package/dist/ku4web-components/ku4-preview.system.entry.js +0 -1
  175. package/dist/ku4web-components/ku4-tab-list.entry.js +0 -76
  176. package/dist/ku4web-components/ku4-tab-list.system.entry.js +0 -1
  177. package/dist/ku4web-components/ku4-tab-panel.entry.js +0 -72
  178. package/dist/ku4web-components/ku4-tab-panel.system.entry.js +0 -1
  179. package/dist/ku4web-components/ku4-tab.entry.js +0 -63
  180. package/dist/ku4web-components/ku4-tab.system.entry.js +0 -1
  181. package/dist/ku4web-components/ku4-table.entry.js +0 -79
  182. package/dist/ku4web-components/ku4-table.system.entry.js +0 -1
  183. package/dist/ku4web-components/ku4-tooltip.entry.js +0 -120
  184. package/dist/ku4web-components/ku4-tooltip.system.entry.js +0 -1
  185. package/dist/ku4web-components/ku4-validation.entry.js +0 -162
  186. package/dist/ku4web-components/ku4-validation.system.entry.js +0 -1
  187. package/dist/ku4web-components/ku4web-components.system.js +0 -1
  188. package/dist/ku4web-components/p-138904dc.system.entry.js +0 -1
  189. package/dist/ku4web-components/p-dd0d306b.entry.js +0 -1
  190. package/dist/ku4web-components/p-ef0b529f.entry.js +0 -1
  191. package/dist/ku4web-components/shadow-css-6a0a96e7.system.js +0 -13
  192. package/dist/ku4web-components/shadow-css-dfa0587f.js +0 -388
  193. package/dist/ku4web-components/uid-3373ce49.system.js +0 -1
  194. package/dist/ku4web-components/uid-a7ff854d.js +0 -9
@@ -1,191 +0,0 @@
1
- import { Component, Element, Host, Prop, State, Method, Listen, Event, h, } from '@stencil/core';
2
- import uid from '../../capabilities/identity/uid';
3
- /**
4
- * @description ku4-tab
5
- */
6
- export class Ku4Tab {
7
- constructor() {
8
- /**
9
- * Active when true
10
- */
11
- this.selected = false;
12
- }
13
- handleClick(e) {
14
- this.tabClick.emit(e);
15
- }
16
- handleKeyUp(e) {
17
- this.tabKeyUp.emit(e);
18
- }
19
- /**
20
- * Set this tab as selected.
21
- */
22
- async select() {
23
- this.selected = true;
24
- this.panel.select();
25
- this.host.focus();
26
- }
27
- /**
28
- * Unset this tab as selected
29
- */
30
- async deselect() {
31
- this.selected = false;
32
- this.panel.deselect();
33
- }
34
- /**
35
- * Connect this tab to a panel
36
- * @param {HTMLElement} panel - The target ku4-tab-panel HTMLElement
37
- */
38
- async connect(panel) {
39
- panel.connect(this);
40
- }
41
- get id() {
42
- return this.host.id || uid();
43
- }
44
- /**
45
- * @param {Ku4TabPanel} panel - panel to assign to this tab
46
- * @internal
47
- */
48
- $assignPanel(panel) {
49
- this.panel = panel;
50
- }
51
- render() {
52
- const { selected, panel } = this;
53
- return (h(Host, { id: this.host.id || uid(), role: "tab", type: "button", tabIndex: selected ? 0 : -1, "aria-controls": panel && panel.id, "aria-selected": selected ? 'true' : 'false' },
54
- h("slot", null)));
55
- }
56
- static get is() { return "ku4-tab"; }
57
- static get encapsulation() { return "shadow"; }
58
- static get originalStyleUrls() { return {
59
- "$": ["ku4-tab.scss"]
60
- }; }
61
- static get styleUrls() { return {
62
- "$": ["ku4-tab.css"]
63
- }; }
64
- static get properties() { return {
65
- "selected": {
66
- "type": "boolean",
67
- "mutable": true,
68
- "complexType": {
69
- "original": "boolean",
70
- "resolved": "boolean",
71
- "references": {}
72
- },
73
- "required": false,
74
- "optional": false,
75
- "docs": {
76
- "tags": [],
77
- "text": "Active when true"
78
- },
79
- "attribute": "selected",
80
- "reflect": true,
81
- "defaultValue": "false"
82
- }
83
- }; }
84
- static get states() { return {
85
- "panel": {}
86
- }; }
87
- static get events() { return [{
88
- "method": "tabClick",
89
- "name": "ku4TabClick",
90
- "bubbles": true,
91
- "cancelable": true,
92
- "composed": true,
93
- "docs": {
94
- "tags": [],
95
- "text": "Event fired when this tab is clicked."
96
- },
97
- "complexType": {
98
- "original": "any",
99
- "resolved": "any",
100
- "references": {}
101
- }
102
- }, {
103
- "method": "tabKeyUp",
104
- "name": "ku4TabKeyup",
105
- "bubbles": true,
106
- "cancelable": true,
107
- "composed": true,
108
- "docs": {
109
- "tags": [],
110
- "text": "Event fired when this tab is keyup."
111
- },
112
- "complexType": {
113
- "original": "any",
114
- "resolved": "any",
115
- "references": {}
116
- }
117
- }]; }
118
- static get methods() { return {
119
- "select": {
120
- "complexType": {
121
- "signature": "() => Promise<void>",
122
- "parameters": [],
123
- "references": {
124
- "Promise": {
125
- "location": "global"
126
- }
127
- },
128
- "return": "Promise<void>"
129
- },
130
- "docs": {
131
- "text": "Set this tab as selected.",
132
- "tags": []
133
- }
134
- },
135
- "deselect": {
136
- "complexType": {
137
- "signature": "() => Promise<void>",
138
- "parameters": [],
139
- "references": {
140
- "Promise": {
141
- "location": "global"
142
- }
143
- },
144
- "return": "Promise<void>"
145
- },
146
- "docs": {
147
- "text": "Unset this tab as selected",
148
- "tags": []
149
- }
150
- },
151
- "connect": {
152
- "complexType": {
153
- "signature": "(panel: any) => Promise<void>",
154
- "parameters": [{
155
- "tags": [{
156
- "name": "param",
157
- "text": "panel - The target ku4-tab-panel HTMLElement"
158
- }],
159
- "text": "- The target ku4-tab-panel HTMLElement"
160
- }],
161
- "references": {
162
- "Promise": {
163
- "location": "global"
164
- }
165
- },
166
- "return": "Promise<void>"
167
- },
168
- "docs": {
169
- "text": "Connect this tab to a panel",
170
- "tags": [{
171
- "name": "param",
172
- "text": "panel - The target ku4-tab-panel HTMLElement"
173
- }]
174
- }
175
- }
176
- }; }
177
- static get elementRef() { return "host"; }
178
- static get listeners() { return [{
179
- "name": "click",
180
- "method": "handleClick",
181
- "target": undefined,
182
- "capture": false,
183
- "passive": false
184
- }, {
185
- "name": "keyup",
186
- "method": "handleKeyUp",
187
- "target": undefined,
188
- "capture": false,
189
- "passive": false
190
- }]; }
191
- }
@@ -1,6 +0,0 @@
1
- :host {
2
- position: relative;
3
- display: flex;
4
- flex-direction: row;
5
- flex-wrap: wrap;
6
- }
@@ -1,118 +0,0 @@
1
- import { Component, Host, Element, Listen, Method, h } from '@stencil/core';
2
- import { Key } from 'ku4es-ui-kernel';
3
- import uid from '../../capabilities/identity/uid';
4
- /**
5
- * @description ku4-tab-list
6
- */
7
- export class Ku4TabList {
8
- handleTabClick({ target }) {
9
- this.tabs.includes(target) && this.open(target);
10
- }
11
- handleTabKeyUp({ target, detail: e }) {
12
- if (!(this.tabs.includes(target))) {
13
- return;
14
- }
15
- if (Key.left.didFire(e)) {
16
- this.open(this.previous(target));
17
- }
18
- if (Key.right.didFire(e)) {
19
- this.open(this.next(target));
20
- }
21
- }
22
- /**
23
- * Open a ku4-tab in this ku4-tab-list.
24
- * @param {Ku4Tab} tab - ku4-tab target to open.
25
- */
26
- async open(tab) {
27
- return this.reset().select(tab);
28
- }
29
- select(tab) {
30
- tab.select();
31
- return this;
32
- }
33
- deselect(tab) {
34
- tab.deselect();
35
- return this;
36
- }
37
- reset() {
38
- this.tabs.forEach(tab => this.deselect(tab));
39
- return this;
40
- }
41
- previous(tab) {
42
- const { tabs, tabs: { length } } = this;
43
- const index = tabs.indexOf(tab) - 1;
44
- return tabs[index > -1 ? index : length - 1];
45
- }
46
- next(tab) {
47
- const { tabs, tabs: { length } } = this;
48
- const index = tabs.indexOf(tab) + 1;
49
- return tabs[index < length ? index : 0];
50
- }
51
- componentDidRender() {
52
- const tabs = [];
53
- const panels = [];
54
- [].slice.call(this.host.children).forEach((child) => {
55
- if (child.tagName === 'KU4-TAB') {
56
- tabs.push(child);
57
- }
58
- if (child.tagName === 'KU4-TAB-PANEL') {
59
- panels.push(child);
60
- }
61
- });
62
- this.tabs = tabs;
63
- this.tabs.forEach((tab, index) => tab.connect(panels[index]));
64
- }
65
- render() {
66
- return (h(Host, { id: this.host.id || uid(), role: "tablist", "aria-owns": this.host.id || uid() },
67
- h("slot", null)));
68
- }
69
- static get is() { return "ku4-tab-list"; }
70
- static get encapsulation() { return "shadow"; }
71
- static get originalStyleUrls() { return {
72
- "$": ["ku4-tab-list.scss"]
73
- }; }
74
- static get styleUrls() { return {
75
- "$": ["ku4-tab-list.css"]
76
- }; }
77
- static get methods() { return {
78
- "open": {
79
- "complexType": {
80
- "signature": "(tab: any) => Promise<this>",
81
- "parameters": [{
82
- "tags": [{
83
- "name": "param",
84
- "text": "tab - ku4-tab target to open."
85
- }],
86
- "text": "- ku4-tab target to open."
87
- }],
88
- "references": {
89
- "Promise": {
90
- "location": "global"
91
- }
92
- },
93
- "return": "Promise<this>"
94
- },
95
- "docs": {
96
- "text": "Open a ku4-tab in this ku4-tab-list.",
97
- "tags": [{
98
- "name": "param",
99
- "text": "tab - ku4-tab target to open."
100
- }]
101
- }
102
- }
103
- }; }
104
- static get elementRef() { return "host"; }
105
- static get listeners() { return [{
106
- "name": "ku4TabClick",
107
- "method": "handleTabClick",
108
- "target": undefined,
109
- "capture": false,
110
- "passive": false
111
- }, {
112
- "name": "ku4TabKeyup",
113
- "method": "handleTabKeyUp",
114
- "target": undefined,
115
- "capture": false,
116
- "passive": false
117
- }]; }
118
- }
@@ -1,26 +0,0 @@
1
- :host {
2
- -webkit-backface-visibility: hidden;
3
- display: block;
4
- width: 100%;
5
- height: auto;
6
- max-height: 0;
7
- transition: max-height 0.4s, padding 0.6s;
8
- overflow: auto;
9
- }
10
-
11
- @media only screen and (min-width: 768px) {
12
- :host {
13
- display: none;
14
- border-top: 1px solid #ccc;
15
- border-bottom: 1px solid #ccc;
16
- max-height: initial !important;
17
- transition: none;
18
- order: 2;
19
- }
20
-
21
- :host([selected]) {
22
- display: block;
23
- max-height: initial !important;
24
- transition: none;
25
- }
26
- }
@@ -1,166 +0,0 @@
1
- import { Component, Element, Host, Prop, State, Method, h, Listen } from '@stencil/core';
2
- import uid from '../../capabilities/identity/uid';
3
- /**
4
- * @description ku4-tab-panel
5
- */
6
- export class Ku4TabPanel {
7
- constructor() {
8
- /**
9
- * Set true to display panel
10
- */
11
- this.selected = false;
12
- this.maxHeight = this.selected ? 'none' : '0px';
13
- }
14
- handleTransitionEnd() {
15
- this.maxHeight = this.selected ? 'none' : '0px';
16
- }
17
- /**
18
- * Set this panel as selected.
19
- */
20
- async select() {
21
- if (this.selected) {
22
- return;
23
- }
24
- this.selected = true;
25
- if (this.hasTransition) {
26
- this.maxHeight = `${this.host.scrollHeight}px`;
27
- }
28
- else {
29
- this.handleTransitionEnd();
30
- }
31
- }
32
- /**
33
- * Unset this panel as selected.
34
- */
35
- async deselect() {
36
- if (!this.selected) {
37
- return;
38
- }
39
- this.selected = false;
40
- this.host.style.maxHeight = `${this.host.scrollHeight}px`;
41
- if (this.hasTransition) {
42
- this.maxHeight = '0px';
43
- }
44
- else {
45
- this.handleTransitionEnd();
46
- }
47
- }
48
- /**
49
- * Connect this panel to a tab.
50
- * @param {Ku4Tab} tab - Tab to connect to this panel
51
- */
52
- async connect(tab) {
53
- tab.$assignPanel(this);
54
- this.tab = tab;
55
- }
56
- get hasTransition() {
57
- const transition = window
58
- .getComputedStyle(this.host)
59
- .getPropertyValue('transition');
60
- return !/none/.test(transition);
61
- }
62
- render() {
63
- const { selected, tab, maxHeight } = this;
64
- return (h(Host, { role: "tabpanel", id: this.host.id || uid(), "aria-hidden": selected ? 'false' : 'true', "aria-labelledby": tab && tab.id, tabIndex: selected ? 0 : -1, style: { maxHeight } },
65
- h("slot", null)));
66
- }
67
- static get is() { return "ku4-tab-panel"; }
68
- static get encapsulation() { return "shadow"; }
69
- static get originalStyleUrls() { return {
70
- "$": ["ku4-tab-panel.scss"]
71
- }; }
72
- static get styleUrls() { return {
73
- "$": ["ku4-tab-panel.css"]
74
- }; }
75
- static get properties() { return {
76
- "selected": {
77
- "type": "boolean",
78
- "mutable": true,
79
- "complexType": {
80
- "original": "boolean",
81
- "resolved": "boolean",
82
- "references": {}
83
- },
84
- "required": false,
85
- "optional": false,
86
- "docs": {
87
- "tags": [],
88
- "text": "Set true to display panel"
89
- },
90
- "attribute": "selected",
91
- "reflect": true,
92
- "defaultValue": "false"
93
- }
94
- }; }
95
- static get states() { return {
96
- "maxHeight": {},
97
- "tab": {}
98
- }; }
99
- static get methods() { return {
100
- "select": {
101
- "complexType": {
102
- "signature": "() => Promise<void>",
103
- "parameters": [],
104
- "references": {
105
- "Promise": {
106
- "location": "global"
107
- }
108
- },
109
- "return": "Promise<void>"
110
- },
111
- "docs": {
112
- "text": "Set this panel as selected.",
113
- "tags": []
114
- }
115
- },
116
- "deselect": {
117
- "complexType": {
118
- "signature": "() => Promise<void>",
119
- "parameters": [],
120
- "references": {
121
- "Promise": {
122
- "location": "global"
123
- }
124
- },
125
- "return": "Promise<void>"
126
- },
127
- "docs": {
128
- "text": "Unset this panel as selected.",
129
- "tags": []
130
- }
131
- },
132
- "connect": {
133
- "complexType": {
134
- "signature": "(tab: any) => Promise<void>",
135
- "parameters": [{
136
- "tags": [{
137
- "name": "param",
138
- "text": "tab - Tab to connect to this panel"
139
- }],
140
- "text": "- Tab to connect to this panel"
141
- }],
142
- "references": {
143
- "Promise": {
144
- "location": "global"
145
- }
146
- },
147
- "return": "Promise<void>"
148
- },
149
- "docs": {
150
- "text": "Connect this panel to a tab.",
151
- "tags": [{
152
- "name": "param",
153
- "text": "tab - Tab to connect to this panel"
154
- }]
155
- }
156
- }
157
- }; }
158
- static get elementRef() { return "host"; }
159
- static get listeners() { return [{
160
- "name": "transitionend",
161
- "method": "handleTransitionEnd",
162
- "target": undefined,
163
- "capture": false,
164
- "passive": false
165
- }]; }
166
- }
@@ -1,116 +0,0 @@
1
- ku4-table {
2
- position: relative;
3
- display: block;
4
- }
5
- @media only screen and (min-width: 1px) and (max-width: 767px) {
6
- @supports (display: contents) {
7
- ku4-table[stack-xs=column] table {
8
- display: flex;
9
- flex-direction: column;
10
- }
11
- ku4-table[stack-xs=column] thead,
12
- ku4-table[stack-xs=column] tbody,
13
- ku4-table[stack-xs=column] tfoot,
14
- ku4-table[stack-xs=column] tr {
15
- display: contents;
16
- }
17
- ku4-table[stack-xs=column] thead .ku4-head-header {
18
- display: none;
19
- }
20
- ku4-table[stack-xs=column] tbody th,
21
- ku4-table[stack-xs=column] tfoot th {
22
- position: absolute;
23
- display: block;
24
- width: 0;
25
- height: 0;
26
- margin: 0;
27
- padding: 0;
28
- line-height: 0;
29
- font-size: 0;
30
- }
31
- ku4-table[stack-xs=column] tbody td,
32
- ku4-table[stack-xs=column] tfoot td {
33
- display: flex;
34
- }
35
- ku4-table[stack-xs=column] tbody td:before,
36
- ku4-table[stack-xs=column] tfoot td:before {
37
- content: attr(data-ku4-row-header);
38
- }
39
- }
40
- ku4-table[stack-xs=row] table {
41
- display: flex;
42
- flex-direction: column;
43
- }
44
- ku4-table[stack-xs=row] thead th,
45
- ku4-table[stack-xs=row] thead td {
46
- display: none;
47
- }
48
- ku4-table[stack-xs=row] thead,
49
- ku4-table[stack-xs=row] tbody,
50
- ku4-table[stack-xs=row] tfoot,
51
- ku4-table[stack-xs=row] tr,
52
- ku4-table[stack-xs=row] th,
53
- ku4-table[stack-xs=row] td {
54
- display: block;
55
- }
56
- ku4-table[stack-xs=row] tbody td:before,
57
- ku4-table[stack-xs=row] tfoot td:before {
58
- content: attr(data-ku4-column-header);
59
- }
60
- }
61
- @media only screen and (min-width: 768px) and (max-width: 991px) {
62
- @supports (display: contents) {
63
- ku4-table[stack-sm=column] table {
64
- display: flex;
65
- flex-direction: column;
66
- }
67
- ku4-table[stack-sm=column] thead,
68
- ku4-table[stack-sm=column] tbody,
69
- ku4-table[stack-sm=column] tfoot,
70
- ku4-table[stack-sm=column] tr {
71
- display: contents;
72
- }
73
- ku4-table[stack-sm=column] thead .ku4-head-header {
74
- display: none;
75
- }
76
- ku4-table[stack-sm=column] tbody th,
77
- ku4-table[stack-sm=column] tfoot th {
78
- position: absolute;
79
- display: block;
80
- width: 0;
81
- height: 0;
82
- margin: 0;
83
- padding: 0;
84
- line-height: 0;
85
- font-size: 0;
86
- }
87
- ku4-table[stack-sm=column] tbody td,
88
- ku4-table[stack-sm=column] tfoot td {
89
- display: flex;
90
- }
91
- ku4-table[stack-sm=column] tbody td:before,
92
- ku4-table[stack-sm=column] tfoot td:before {
93
- content: attr(data-ku4-row-header);
94
- }
95
- }
96
- ku4-table[stack-sm=row] table {
97
- display: flex;
98
- flex-direction: column;
99
- }
100
- ku4-table[stack-sm=row] thead th,
101
- ku4-table[stack-sm=row] thead td {
102
- display: none;
103
- }
104
- ku4-table[stack-sm=row] thead,
105
- ku4-table[stack-sm=row] tbody,
106
- ku4-table[stack-sm=row] tfoot,
107
- ku4-table[stack-sm=row] tr,
108
- ku4-table[stack-sm=row] th,
109
- ku4-table[stack-sm=row] td {
110
- display: block;
111
- }
112
- ku4-table[stack-sm=row] tbody td:before,
113
- ku4-table[stack-sm=row] tfoot td:before {
114
- content: attr(data-ku4-column-header);
115
- }
116
- }