@api-client/ui 0.0.10 → 0.0.12

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 (176) hide show
  1. package/.eslintrc +16 -1
  2. package/demo/elements/index.html +3 -0
  3. package/demo/elements/store/file-picker.html +15 -0
  4. package/demo/elements/store/file-picker.ts +134 -0
  5. package/demo/elements/store/index.html +19 -0
  6. package/demo/index.html +3 -0
  7. package/demo/layout/index.html +91 -0
  8. package/demo/layout/index.ts +182 -0
  9. package/demo/store/StorePlugin.js +1 -0
  10. package/dist/bindings/base/StoreBindings.d.ts +5 -0
  11. package/dist/bindings/base/StoreBindings.d.ts.map +1 -1
  12. package/dist/bindings/base/StoreBindings.js +15 -1
  13. package/dist/bindings/base/StoreBindings.js.map +1 -1
  14. package/dist/define/store/file-picker.d.ts +9 -0
  15. package/dist/define/store/file-picker.d.ts.map +1 -0
  16. package/dist/define/store/file-picker.js +10 -0
  17. package/dist/define/store/file-picker.js.map +1 -0
  18. package/dist/define/{files → store}/share-file.d.ts +1 -1
  19. package/dist/define/store/share-file.d.ts.map +1 -0
  20. package/dist/define/{files → store}/share-file.js +2 -2
  21. package/dist/define/store/share-file.js.map +1 -0
  22. package/dist/elements/layout/SplitItem.d.ts +1 -9
  23. package/dist/elements/layout/SplitItem.d.ts.map +1 -1
  24. package/dist/elements/layout/SplitItem.js +27 -20
  25. package/dist/elements/layout/SplitItem.js.map +1 -1
  26. package/dist/elements/layout/SplitLayout.d.ts +16 -14
  27. package/dist/elements/layout/SplitLayout.d.ts.map +1 -1
  28. package/dist/elements/layout/SplitLayout.js +47 -42
  29. package/dist/elements/layout/SplitLayout.js.map +1 -1
  30. package/dist/elements/layout/SplitPanel.d.ts +7 -2
  31. package/dist/elements/layout/SplitPanel.d.ts.map +1 -1
  32. package/dist/elements/layout/SplitPanel.js +130 -52
  33. package/dist/elements/layout/SplitPanel.js.map +1 -1
  34. package/dist/elements/layout/SplitView.d.ts.map +1 -1
  35. package/dist/elements/layout/SplitView.js +18 -14
  36. package/dist/elements/layout/SplitView.js.map +1 -1
  37. package/dist/elements/layout/type.d.ts +3 -3
  38. package/dist/elements/layout/type.d.ts.map +1 -1
  39. package/dist/elements/layout/type.js.map +1 -1
  40. package/dist/elements/store/FilePicker.element.d.ts +87 -0
  41. package/dist/elements/store/FilePicker.element.d.ts.map +1 -0
  42. package/dist/elements/store/FilePicker.element.js +263 -0
  43. package/dist/elements/store/FilePicker.element.js.map +1 -0
  44. package/dist/elements/store/FilePicker.styles.d.ts +3 -0
  45. package/dist/elements/store/FilePicker.styles.d.ts.map +1 -0
  46. package/dist/elements/store/FilePicker.styles.js +72 -0
  47. package/dist/elements/store/FilePicker.styles.js.map +1 -0
  48. package/dist/elements/store/FilesLib.d.ts +10 -0
  49. package/dist/elements/store/FilesLib.d.ts.map +1 -0
  50. package/dist/elements/store/FilesLib.js +38 -0
  51. package/dist/elements/store/FilesLib.js.map +1 -0
  52. package/dist/elements/{files/ShareFile.d.ts → store/ShareFile.element.d.ts} +1 -1
  53. package/dist/elements/store/ShareFile.element.d.ts.map +1 -0
  54. package/dist/elements/{files/ShareFile.js → store/ShareFile.element.js} +1 -1
  55. package/dist/elements/store/ShareFile.element.js.map +1 -0
  56. package/dist/elements/store/ShareFile.styles.d.ts.map +1 -0
  57. package/dist/elements/{files → store}/ShareFile.styles.js.map +1 -1
  58. package/dist/events/EventTypes.d.ts +1 -0
  59. package/dist/events/EventTypes.d.ts.map +1 -1
  60. package/dist/events/EventTypes.js +1 -0
  61. package/dist/events/EventTypes.js.map +1 -1
  62. package/dist/events/Events.d.ts +1 -0
  63. package/dist/events/Events.d.ts.map +1 -1
  64. package/dist/events/StoreEvents.d.ts +8 -1
  65. package/dist/events/StoreEvents.d.ts.map +1 -1
  66. package/dist/events/StoreEvents.js +19 -0
  67. package/dist/events/StoreEvents.js.map +1 -1
  68. package/dist/pages/ApplicationScreen.d.ts +1 -1
  69. package/dist/pages/ApplicationScreen.d.ts.map +1 -1
  70. package/dist/pages/ApplicationScreen.js +4 -2
  71. package/dist/pages/ApplicationScreen.js.map +1 -1
  72. package/dist/pages/api-client/ApiClient.screen.d.ts +0 -6
  73. package/dist/pages/api-client/ApiClient.screen.d.ts.map +1 -1
  74. package/dist/pages/api-client/ApiClient.screen.js +16 -29
  75. package/dist/pages/api-client/ApiClient.screen.js.map +1 -1
  76. package/dist/pages/api-client/Authenticate.screen.d.ts +1 -1
  77. package/dist/pages/api-client/Authenticate.screen.d.ts.map +1 -1
  78. package/dist/pages/api-client/Authenticate.screen.js +2 -2
  79. package/dist/pages/api-client/Authenticate.screen.js.map +1 -1
  80. package/dist/pages/api-client/pages/Files.page.d.ts +6 -35
  81. package/dist/pages/api-client/pages/Files.page.d.ts.map +1 -1
  82. package/dist/pages/api-client/pages/Files.page.js +32 -141
  83. package/dist/pages/api-client/pages/Files.page.js.map +1 -1
  84. package/dist/pages/api-client/pages/Shared.page.d.ts +1 -5
  85. package/dist/pages/api-client/pages/Shared.page.d.ts.map +1 -1
  86. package/dist/pages/api-client/pages/Shared.page.js +1 -40
  87. package/dist/pages/api-client/pages/Shared.page.js.map +1 -1
  88. package/dist/pages/demo/DemoPage.d.ts +7 -0
  89. package/dist/pages/demo/DemoPage.d.ts.map +1 -1
  90. package/dist/pages/demo/DemoPage.js +14 -0
  91. package/dist/pages/demo/DemoPage.js.map +1 -1
  92. package/dist/pages/http-project/HttpClientCommands.d.ts.map +1 -1
  93. package/dist/pages/http-project/HttpClientCommands.js +28 -12
  94. package/dist/pages/http-project/HttpClientCommands.js.map +1 -1
  95. package/dist/store/FileSystem.d.ts +90 -0
  96. package/dist/store/FileSystem.d.ts.map +1 -0
  97. package/dist/store/FileSystem.js +260 -0
  98. package/dist/store/FileSystem.js.map +1 -0
  99. package/dist/styles/global-styles.d.ts.map +1 -1
  100. package/dist/styles/global-styles.js +7 -0
  101. package/dist/styles/global-styles.js.map +1 -1
  102. package/dist/ui/icons/Icons.d.ts +2 -1
  103. package/dist/ui/icons/Icons.d.ts.map +1 -1
  104. package/dist/ui/icons/Icons.js +1 -0
  105. package/dist/ui/icons/Icons.js.map +1 -1
  106. package/dist/ui/list/UiDropdownList.d.ts +9 -1
  107. package/dist/ui/list/UiDropdownList.d.ts.map +1 -1
  108. package/dist/ui/list/UiDropdownList.js +39 -17
  109. package/dist/ui/list/UiDropdownList.js.map +1 -1
  110. package/dist/ui/list/UiList.d.ts +6 -1
  111. package/dist/ui/list/UiList.d.ts.map +1 -1
  112. package/dist/ui/list/UiList.js +24 -9
  113. package/dist/ui/list/UiList.js.map +1 -1
  114. package/dist/ui/table/DataTable.d.ts +4 -0
  115. package/dist/ui/table/DataTable.d.ts.map +1 -1
  116. package/dist/ui/table/DataTable.js +23 -1
  117. package/dist/ui/table/DataTable.js.map +1 -1
  118. package/package.json +2 -1
  119. package/src/bindings/base/StoreBindings.ts +16 -1
  120. package/src/define/store/file-picker.ts +12 -0
  121. package/src/define/{files → store}/share-file.ts +2 -2
  122. package/src/elements/layout/SplitItem.ts +29 -21
  123. package/src/elements/layout/SplitLayout.ts +53 -43
  124. package/src/elements/layout/SplitPanel.ts +140 -57
  125. package/src/elements/layout/SplitView.ts +18 -15
  126. package/src/elements/layout/type.ts +3 -4
  127. package/src/elements/store/FilePicker.element.ts +297 -0
  128. package/src/elements/store/FilePicker.styles.ts +72 -0
  129. package/src/elements/store/FilesLib.ts +32 -0
  130. package/src/events/EventTypes.ts +1 -0
  131. package/src/events/StoreEvents.ts +21 -1
  132. package/src/pages/ApplicationScreen.ts +5 -3
  133. package/src/pages/api-client/ApiClient.screen.ts +16 -31
  134. package/src/pages/api-client/Authenticate.screen.ts +2 -2
  135. package/src/pages/api-client/pages/Files.page.ts +37 -164
  136. package/src/pages/api-client/pages/Shared.page.ts +2 -40
  137. package/src/pages/demo/DemoPage.ts +17 -0
  138. package/src/pages/http-project/HttpClientCommands.ts +28 -12
  139. package/src/store/FileSystem.ts +325 -0
  140. package/src/styles/global-styles.ts +7 -0
  141. package/src/ui/icons/Icons.ts +2 -1
  142. package/src/ui/list/UiDropdownList.ts +44 -17
  143. package/src/ui/list/UiList.ts +26 -10
  144. package/src/ui/table/DataTable.ts +29 -3
  145. package/test/elements/layout/SplitItem.test.ts +76 -75
  146. package/test/elements/layout/SplitLayoutManager.test.ts +70 -69
  147. package/test/elements/layout/SplitPanel.test.ts +10 -7
  148. package/test/elements/store/FilePicker.test.ts +241 -0
  149. package/test/env.js +3 -0
  150. package/test/helpers/StoreHelper.ts +390 -0
  151. package/tsconfig.eslint.json +10 -0
  152. package/web-test-runner.config.mjs +51 -2
  153. package/dist/define/files/share-file.d.ts.map +0 -1
  154. package/dist/define/files/share-file.js.map +0 -1
  155. package/dist/define/layout/layout-panel.d.ts +0 -7
  156. package/dist/define/layout/layout-panel.d.ts.map +0 -1
  157. package/dist/define/layout/layout-panel.js +0 -3
  158. package/dist/define/layout/layout-panel.js.map +0 -1
  159. package/dist/elements/files/ShareFile.d.ts.map +0 -1
  160. package/dist/elements/files/ShareFile.js.map +0 -1
  161. package/dist/elements/files/ShareFile.styles.d.ts.map +0 -1
  162. package/dist/elements/layout/LayoutManager.d.ts +0 -327
  163. package/dist/elements/layout/LayoutManager.d.ts.map +0 -1
  164. package/dist/elements/layout/LayoutManager.js +0 -747
  165. package/dist/elements/layout/LayoutManager.js.map +0 -1
  166. package/dist/elements/layout/LayoutPanelElement.d.ts +0 -62
  167. package/dist/elements/layout/LayoutPanelElement.d.ts.map +0 -1
  168. package/dist/elements/layout/LayoutPanelElement.js +0 -628
  169. package/dist/elements/layout/LayoutPanelElement.js.map +0 -1
  170. package/src/define/layout/layout-panel.ts +0 -9
  171. package/src/elements/layout/LayoutManager.ts +0 -930
  172. package/src/elements/layout/LayoutPanelElement.ts +0 -651
  173. /package/dist/elements/{files → store}/ShareFile.styles.d.ts +0 -0
  174. /package/dist/elements/{files → store}/ShareFile.styles.js +0 -0
  175. /package/src/elements/{files/ShareFile.ts → store/ShareFile.element.ts} +0 -0
  176. /package/src/elements/{files → store}/ShareFile.styles.ts +0 -0
@@ -1,628 +0,0 @@
1
- import { __decorate } from "tslib";
2
- /* eslint-disable class-methods-use-this */
3
- import { LitElement, html, css } from 'lit';
4
- import { property, state, eventOptions } from 'lit/decorators.js';
5
- import { ifDefined } from 'lit/directives/if-defined.js';
6
- import { classMap } from 'lit/directives/class-map.js';
7
- import surfaceStyles from '../../styles/m3/surface.module.js';
8
- import '../../define/ui/ui-icon.js';
9
- export default class LayoutPanelElement extends LitElement {
10
- static get styles() {
11
- return [surfaceStyles, css `
12
- :host {
13
- display: flex;
14
- position: relative;
15
- flex-direction: column;
16
- /* border: 1px red solid; */
17
- }
18
-
19
- .content {
20
- display: flex;
21
- flex: 1;
22
- }
23
-
24
- :host([constrain]) .content {
25
- overflow: hidden;
26
- }
27
-
28
- :host([layout=horizontal]) .content {
29
- flex-direction: row;
30
- }
31
-
32
- :host([layout=vertical]) .content {
33
- flex-direction: column;
34
- }
35
-
36
- :host ::slotted(*) {
37
- flex: 1;
38
- /* width: 100%;
39
- height: 100%; */
40
- }
41
-
42
- .drag-region {
43
- position: absolute;
44
- background-color: rgba(0,0,0,0.12);
45
- }
46
-
47
- .drag-region.center {
48
- top: 0;
49
- bottom: 0;
50
- left: 0;
51
- right:0;
52
- }
53
-
54
- .drag-region.west {
55
- top: 0;
56
- bottom: 0;
57
- left: 0;
58
- right: 50%;
59
- }
60
-
61
- .drag-region.east {
62
- top: 0;
63
- bottom: 0;
64
- left: 50%;
65
- right: 0;
66
- }
67
-
68
- .drag-region.north {
69
- top: 0;
70
- left: 0;
71
- right: 0;
72
- bottom: 50%;
73
- }
74
-
75
- .drag-region.south {
76
- top: 50%;
77
- left: 0;
78
- right: 0;
79
- bottom: 0;
80
- }
81
-
82
- .layout-tabs {
83
- display: flex;
84
- align-items: center;
85
- background: var(--layout-tabs-background, var(--secondary-background-color));
86
- }
87
-
88
- .layout-tab {
89
- position: relative;
90
- display: inline-flex;
91
- align-items: center;
92
- flex: 1 1 200px;
93
- max-width: 200px;
94
- min-width: 40px;
95
- width: 200px;
96
- height: 100%;
97
- font-size: 0.94rem;
98
- padding: 0px 12px;
99
- border-radius: var(--md-sys-shape-corner-small-top);
100
- height: 40px;
101
- outline: none;
102
- justify-content: flex-start;
103
- text-transform: none;
104
- color: var(--md-sys-color-on-surface);
105
-
106
- font-family: var(--md-sys-typescale-body-medium-font-family-name);
107
- font-style: var(--md-sys-typescale-body-medium-font-family-style);
108
- font-weight: var(--md-sys-typescale-body-medium-font-weight);
109
- font-size: var(--md-sys-typescale-body-medium-font-size);
110
- letter-spacing: var(--md-sys-typescale-body-medium-tracking);
111
- line-height: var(--md-sys-typescale-body-medium-height);
112
- text-transform: var(--md-sys-typescale-body-medium-text-transform);
113
- text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
114
- }
115
-
116
- .tab-label {
117
- overflow: hidden;
118
- white-space: nowrap;
119
- text-overflow: ellipsis;
120
- }
121
-
122
- .is-dirty .tab-label {
123
- font-style: italic;
124
- }
125
-
126
- .is-dirty .tab-label::after {
127
- content: '*';
128
- user-select: none;
129
- }
130
-
131
- .layout-tab.selected {
132
- /* z-index: 2; */
133
- background: var(--layout-tab-select-background, var(--primary-background-color));
134
- }
135
-
136
- .layout-tab:not(.selected):hover::before {
137
- background-color: var(--md-sys-color-primary);
138
- opacity: var(--md-sys-state-hover-state-layer-opacity);
139
- position: absolute;
140
- inset: 0;
141
- content: '';
142
- border-radius: inherit;
143
- }
144
-
145
- .layout-tab:not(.selected):focus::before {
146
- background-color: var(--md-sys-color-primary);
147
- opacity: var(--md-sys-state-focus-state-layer-opacity);
148
- position: absolute;
149
- inset: 0;
150
- content: '';
151
- border-radius: inherit;
152
- }
153
-
154
- /* .layout-tab:focus {
155
- border-top-color: var(--primary-color);
156
- } */
157
-
158
- .tab-favicon {
159
- width: 16px;
160
- height: 16px;
161
- margin-right: 8px;
162
- }
163
-
164
- .close-icon {
165
- width: 16px;
166
- height: 16px;
167
- margin-left: auto;
168
- }
169
-
170
- .tab-divider {
171
- width: 1px;
172
- min-width: 1px;
173
- height: 20px;
174
- background-color: var(--md-sys-color-outline-variant);
175
- }
176
-
177
- .tab-divider.hidden {
178
- background-color: transparent;
179
- }
180
- `];
181
- }
182
- constructor() {
183
- super();
184
- /**
185
- * @attribute
186
- */
187
- this.layout = 'horizontal';
188
- /**
189
- * Whether dragging is occurring over the element
190
- */
191
- this.inDrag = false;
192
- /**
193
- * The region the drag is leaning to.
194
- */
195
- this.dragRegion = 'center';
196
- /**
197
- * When set it adds the `overflow` hidden on the container that holds the tab contents.
198
- * @attribute
199
- */
200
- this.constrain = false;
201
- this._dragEnterHandler = this._dragEnterHandler.bind(this);
202
- this._dragOverHandler = this._dragOverHandler.bind(this);
203
- this._dropHandler = this._dropHandler.bind(this);
204
- this._dragleaveHandler = this._dragleaveHandler.bind(this);
205
- this._dragendHandler = this._dragendHandler.bind(this);
206
- }
207
- connectedCallback() {
208
- super.connectedCallback();
209
- this.addEventListener('dragenter', this._dragEnterHandler);
210
- this.addEventListener('dragover', this._dragOverHandler);
211
- this.addEventListener('drop', this._dropHandler);
212
- document.body.addEventListener('dragleave', this._dragleaveHandler);
213
- document.body.addEventListener('dragend', this._dragendHandler);
214
- }
215
- disconnectedCallback() {
216
- super.disconnectedCallback();
217
- this.removeEventListener('dragenter', this._dragEnterHandler);
218
- this.removeEventListener('dragover', this._dragOverHandler);
219
- this.removeEventListener('drop', this._dropHandler);
220
- document.body.removeEventListener('dragleave', this._dragleaveHandler);
221
- document.body.removeEventListener('dragend', this._dragendHandler);
222
- }
223
- hasDropTypes(dt) {
224
- const { dragTypes } = this;
225
- if (!Array.isArray(dragTypes)) {
226
- return true;
227
- }
228
- const eventTypes = [...dt.types];
229
- const allowedTypes = dragTypes.map(i => i.toLowerCase());
230
- return !allowedTypes.some(type => !eventTypes.includes(type));
231
- }
232
- panelCanDrop(e) {
233
- if (e.defaultPrevented) {
234
- return false;
235
- }
236
- if (e.dataTransfer && !this.hasDropTypes(e.dataTransfer)) {
237
- return false;
238
- }
239
- const { panel } = this;
240
- if (!panel) {
241
- return true;
242
- }
243
- return panel.canDrop();
244
- }
245
- _dragEnterHandler(e) {
246
- const { dataTransfer } = e;
247
- if (!dataTransfer || !this.panelCanDrop(e)) {
248
- return;
249
- }
250
- e.preventDefault();
251
- e.stopPropagation();
252
- dataTransfer.dropEffect = 'copy';
253
- }
254
- _dragOverHandler(e) {
255
- const { dataTransfer } = e;
256
- if (!dataTransfer || !this.panelCanDrop(e)) {
257
- return;
258
- }
259
- e.preventDefault();
260
- e.stopPropagation();
261
- const region = this.getDropRegionFromEvent(e);
262
- if (!region) {
263
- this.inDrag = false;
264
- return;
265
- }
266
- dataTransfer.dropEffect = 'copy';
267
- this.inDrag = true;
268
- this.dragRegion = region;
269
- }
270
- _dropHandler(e) {
271
- const { dataTransfer } = e;
272
- if (!dataTransfer || !this.panelCanDrop(e)) {
273
- return;
274
- }
275
- e.preventDefault();
276
- e.stopPropagation();
277
- const kind = dataTransfer.getData('text/kind');
278
- const key = dataTransfer.getData('text/key');
279
- if (!kind || !key) {
280
- return;
281
- }
282
- this.inDrag = false;
283
- const { panel } = this;
284
- let dispatch = true;
285
- if (panel) {
286
- dispatch = panel.addItem({ key, kind, label: 'New tab' }, { region: this.dragRegion });
287
- }
288
- if (dispatch) {
289
- this.dispatchEvent(new CustomEvent('datadrop', {
290
- detail: { kind, key, region: this.dragRegion },
291
- composed: true,
292
- bubbles: true,
293
- cancelable: true,
294
- }));
295
- }
296
- this.requestUpdate();
297
- }
298
- _dragleaveHandler(e) {
299
- const elm = this.findLayout(e);
300
- if (!elm || elm !== this) {
301
- this.inDrag = false;
302
- this.dragRegion = 'center';
303
- }
304
- }
305
- _dragendHandler() {
306
- this.inDrag = false;
307
- this.dragRegion = 'center';
308
- }
309
- getDropRegionFromEvent(e) {
310
- const layout = this.findLayout(e);
311
- if (!layout) {
312
- return undefined;
313
- }
314
- return this.getDropRegion(layout, e);
315
- }
316
- getDropRegion(element, e) {
317
- const { pageX, pageY } = e;
318
- const rect = element.getBoundingClientRect();
319
- const quarterWidth = rect.width / 4;
320
- const quarterHeight = rect.height / 4;
321
- if (pageX < rect.left + quarterWidth) {
322
- return 'west';
323
- }
324
- if (pageX > rect.right - quarterWidth) {
325
- return 'east';
326
- }
327
- if (pageY < rect.top + quarterHeight) {
328
- return 'north';
329
- }
330
- if (pageY > rect.bottom - quarterHeight) {
331
- return 'south';
332
- }
333
- const withingCenterX = (pageX >= rect.left + quarterWidth) && (pageX <= rect.right - quarterWidth);
334
- const withingCenterY = (pageY >= rect.top + quarterHeight) && (pageY <= rect.bottom - quarterHeight);
335
- if (withingCenterX && withingCenterY) {
336
- return 'center';
337
- }
338
- return undefined;
339
- }
340
- findLayout(e) {
341
- const path = e.composedPath();
342
- while (path.length) {
343
- const node = path.shift();
344
- if (node.nodeType !== Node.ELEMENT_NODE) {
345
- continue;
346
- }
347
- if (node.localName === this.localName) {
348
- return node;
349
- }
350
- }
351
- return undefined;
352
- }
353
- async _tabSelectHandler(e) {
354
- if (!this.panel) {
355
- return;
356
- }
357
- const key = e.currentTarget.dataset.key;
358
- if (!key) {
359
- return;
360
- }
361
- if (this.panel.selected === key) {
362
- return;
363
- }
364
- this.panel.selected = key;
365
- this.panel.manager.changed();
366
- this.requestUpdate();
367
- await this.updateComplete;
368
- const child = this.querySelector(`[data-key="${key}"]`);
369
- if (child) {
370
- child.dispatchEvent(new Event('resize'));
371
- }
372
- }
373
- /**
374
- * Closes a panel with right pointer configuration
375
- */
376
- _tabPointerDownHandler(e) {
377
- // the configuration of a middle button click which is
378
- // equal to 3 fingers click on a track pad.
379
- if (e.button === 1 && e.buttons === 4) {
380
- e.preventDefault();
381
- e.stopPropagation();
382
- const key = e.target.dataset.key;
383
- this.closeTab(key);
384
- }
385
- }
386
- _tabCloseHandler(e) {
387
- const icon = e.target;
388
- const button = icon.parentElement;
389
- const key = button.dataset.key;
390
- if (key) {
391
- e.preventDefault();
392
- e.stopPropagation();
393
- this.closeTab(key);
394
- }
395
- }
396
- _tabTouchStartHandler(e) {
397
- if (e.targetTouches.length === 3) {
398
- e.preventDefault();
399
- e.stopPropagation();
400
- const key = e.target.dataset.key;
401
- this.closeTab(key);
402
- }
403
- }
404
- closeTab(key) {
405
- const { panel } = this;
406
- if (!panel) {
407
- return;
408
- }
409
- const item = panel.items.find(i => i.key === key);
410
- if (!item) {
411
- return;
412
- }
413
- if (item.persistent && item.pinned) {
414
- return;
415
- }
416
- panel.removeItem(key);
417
- this.requestUpdate();
418
- this.dispatchEvent(new CustomEvent('closetab', {
419
- bubbles: true,
420
- cancelable: true,
421
- composed: true,
422
- detail: key,
423
- }));
424
- }
425
- _tabKeydownHandler(e) {
426
- if (e.key === 'Enter') {
427
- this._tabSelectHandler(e);
428
- }
429
- }
430
- _tabDragStart(e) {
431
- const dt = e.dataTransfer;
432
- if (!dt || this.layoutId === undefined) {
433
- return;
434
- }
435
- dt.effectAllowed = 'copyMove';
436
- dt.dropEffect = 'move';
437
- const node = e.target;
438
- dt.setData('text/kind', node.dataset.kind);
439
- dt.setData('text/key', node.dataset.key);
440
- dt.setData('text/source', this.localName);
441
- dt.setData('layout/id', String(this.layoutId));
442
- }
443
- _tabsDragEnterHandler(e) {
444
- const dt = e.dataTransfer;
445
- if (!dt || !this.panelCanDrop(e)) {
446
- return;
447
- }
448
- e.stopPropagation();
449
- e.preventDefault();
450
- dt.effectAllowed = 'move';
451
- dt.dropEffect = 'move';
452
- }
453
- _tabsDragoverHandler(e) {
454
- const dt = e.dataTransfer;
455
- if (!dt || !this.panelCanDrop(e)) {
456
- return;
457
- }
458
- e.stopPropagation();
459
- e.preventDefault();
460
- dt.effectAllowed = 'move';
461
- dt.dropEffect = 'move';
462
- }
463
- _tabsDrop(e) {
464
- const dt = e.dataTransfer;
465
- if (!dt || !this.panelCanDrop(e) || this.layoutId === undefined) {
466
- return;
467
- }
468
- e.stopPropagation();
469
- e.preventDefault();
470
- const src = dt.getData('text/source');
471
- const key = dt.getData('text/key');
472
- const kind = dt.getData('text/kind');
473
- const lid = dt.getData('layout/id');
474
- const movingTab = src === this.localName;
475
- const overTab = this.findTab(e);
476
- const toIndex = overTab ? Number(overTab.dataset.index) : undefined;
477
- if (movingTab) {
478
- if (!lid) {
479
- return;
480
- }
481
- const srcPanel = Number(lid);
482
- if (Number.isNaN(srcPanel)) {
483
- return;
484
- }
485
- this.moveTab(srcPanel, this.layoutId, key, toIndex);
486
- }
487
- else {
488
- let dispatch = true;
489
- if (this.panel) {
490
- dispatch = this.panel.addItem({ key, kind, label: 'New tab' }, { index: toIndex });
491
- }
492
- if (dispatch) {
493
- this.dispatchEvent(new CustomEvent('datadrop', {
494
- detail: { kind, key, index: toIndex },
495
- composed: true,
496
- bubbles: true,
497
- cancelable: true,
498
- }));
499
- }
500
- this.requestUpdate();
501
- }
502
- }
503
- moveTab(fromLayout, toLayout, key, toIndex) {
504
- const { panel } = this;
505
- if (panel) {
506
- panel.manager.moveTab(fromLayout, toLayout, key, toIndex);
507
- }
508
- }
509
- findTab(e) {
510
- const path = e.composedPath();
511
- while (path.length) {
512
- const node = path.shift();
513
- if (node.nodeType !== Node.ELEMENT_NODE) {
514
- continue;
515
- }
516
- if (node.classList.contains('layout-tab')) {
517
- return node;
518
- }
519
- }
520
- return undefined;
521
- }
522
- render() {
523
- return html `
524
- ${this.dragRegionTemplate()}
525
- ${this.tabsTemplate()}
526
- <div class="content">
527
- <slot></slot>
528
- </div>
529
- `;
530
- }
531
- dragRegionTemplate() {
532
- const { inDrag, dragRegion } = this;
533
- if (!inDrag) {
534
- return '';
535
- }
536
- return html `
537
- <div class="drag-region ${dragRegion}"></div>
538
- `;
539
- }
540
- tabsTemplate() {
541
- const { panel } = this;
542
- if (!panel) {
543
- return '';
544
- }
545
- const items = panel.sortedItems();
546
- if (!items) {
547
- return '';
548
- }
549
- const size = items.length;
550
- return html `
551
- <div
552
- class="layout-tabs"
553
- role="tablist"
554
- @dragenter="${this._tabsDragEnterHandler}"
555
- @dragover="${this._tabsDragoverHandler}"
556
- @drop="${this._tabsDrop}"
557
- >
558
- ${items.map((tab, i) => this.tabTemplate(tab, i + 1 === size, items[i + 1]?.key))}
559
- </div>
560
- `;
561
- }
562
- tabTemplate(item, last, nextKey) {
563
- const { key, kind, label = '', index = 0, icon, isDirty = false, parent } = item;
564
- const { panel } = this;
565
- const selected = !!panel && panel.selected === key;
566
- const nextSelected = !!nextKey && !!panel && panel.selected === nextKey;
567
- const closable = !item.persistent && !item.pinned;
568
- const classes = {
569
- 'layout-tab': true,
570
- 'is-dirty': isDirty,
571
- selected,
572
- surface1: selected,
573
- };
574
- let title = label;
575
- if (isDirty) {
576
- title = 'Unsaved changes';
577
- }
578
- const dividerHidden = last || selected || nextSelected;
579
- return html `
580
- <div
581
- data-key="${key}"
582
- data-kind="${kind}"
583
- data-index="${index}"
584
- data-parent="${ifDefined(parent)}"
585
- data-dirty="${isDirty}"
586
- role="tab"
587
- class="${classMap(classes)}"
588
- draggable="true"
589
- @dragstart="${this._tabDragStart}"
590
- @click="${this._tabSelectHandler}"
591
- @pointerdown="${this._tabPointerDownHandler}"
592
- @touchstart="${this._tabTouchStartHandler}"
593
- @keydown="${this._tabKeydownHandler}"
594
- tabindex="0"
595
- >
596
- ${icon ? html `<ui-icon icon="${icon}" class="tab-favicon"></ui-icon>` : ''}
597
- <span class="tab-label" title="${title}">${label}</span>
598
- ${closable ? html `<ui-icon icon="close" class="close-icon" @click="${this._tabCloseHandler}"></ui-icon>` : ''}
599
- </div>
600
- <div class="tab-divider ${dividerHidden ? 'hidden' : ''}"></div>
601
- `;
602
- }
603
- }
604
- __decorate([
605
- property({ type: String, reflect: true })
606
- ], LayoutPanelElement.prototype, "layout", void 0);
607
- __decorate([
608
- property({ type: Number, reflect: true })
609
- ], LayoutPanelElement.prototype, "layoutId", void 0);
610
- __decorate([
611
- property({ type: Array })
612
- ], LayoutPanelElement.prototype, "dragTypes", void 0);
613
- __decorate([
614
- state()
615
- ], LayoutPanelElement.prototype, "inDrag", void 0);
616
- __decorate([
617
- state()
618
- ], LayoutPanelElement.prototype, "dragRegion", void 0);
619
- __decorate([
620
- property({ type: Object })
621
- ], LayoutPanelElement.prototype, "panel", void 0);
622
- __decorate([
623
- property({ type: Boolean, reflect: true })
624
- ], LayoutPanelElement.prototype, "constrain", void 0);
625
- __decorate([
626
- eventOptions({ passive: true })
627
- ], LayoutPanelElement.prototype, "_tabTouchStartHandler", null);
628
- //# sourceMappingURL=LayoutPanelElement.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LayoutPanelElement.js","sourceRoot":"","sources":["../../../src/elements/layout/LayoutPanelElement.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { LitElement, html, TemplateResult, CSSResult, css } from 'lit';\nimport { property, state, eventOptions } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n// eslint-disable-next-line import/no-cycle\nimport { LayoutPanel, DropRegion, ILayoutItem } from './LayoutManager.js';\nimport surfaceStyles from '../../styles/m3/surface.module.js';\nimport '../../define/ui/ui-icon.js';\n\nexport default class LayoutPanelElement extends LitElement {\n static override get styles(): CSSResult[] {\n return [surfaceStyles, css`\n :host {\n display: flex;\n position: relative;\n flex-direction: column;\n /* border: 1px red solid; */\n }\n\n .content {\n display: flex;\n flex: 1;\n }\n \n :host([constrain]) .content {\n overflow: hidden;\n }\n\n :host([layout=horizontal]) .content {\n flex-direction: row;\n }\n\n :host([layout=vertical]) .content {\n flex-direction: column;\n }\n\n :host ::slotted(*) {\n flex: 1;\n /* width: 100%;\n height: 100%; */\n }\n\n .drag-region {\n position: absolute;\n background-color: rgba(0,0,0,0.12);\n }\n\n .drag-region.center {\n top: 0;\n bottom: 0;\n left: 0;\n right:0;\n }\n\n .drag-region.west {\n top: 0;\n bottom: 0;\n left: 0;\n right: 50%;\n }\n\n .drag-region.east {\n top: 0;\n bottom: 0;\n left: 50%;\n right: 0;\n }\n\n .drag-region.north {\n top: 0;\n left: 0;\n right: 0;\n bottom: 50%;\n }\n\n .drag-region.south {\n top: 50%;\n left: 0;\n right: 0;\n bottom: 0;\n }\n\n .layout-tabs {\n display: flex;\n align-items: center;\n background: var(--layout-tabs-background, var(--secondary-background-color));\n }\n\n .layout-tab {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex: 1 1 200px;\n max-width: 200px;\n min-width: 40px;\n width: 200px;\n height: 100%;\n font-size: 0.94rem;\n padding: 0px 12px;\n border-radius: var(--md-sys-shape-corner-small-top);\n height: 40px; \n outline: none;\n justify-content: flex-start;\n text-transform: none;\n color: var(--md-sys-color-on-surface);\n\n font-family: var(--md-sys-typescale-body-medium-font-family-name);\n font-style: var(--md-sys-typescale-body-medium-font-family-style);\n font-weight: var(--md-sys-typescale-body-medium-font-weight);\n font-size: var(--md-sys-typescale-body-medium-font-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n text-transform: var(--md-sys-typescale-body-medium-text-transform);\n text-decoration: var(--md-sys-typescale-body-medium-text-decoration);\n }\n\n .tab-label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .is-dirty .tab-label {\n font-style: italic;\n }\n\n .is-dirty .tab-label::after {\n content: '*';\n user-select: none;\n }\n\n .layout-tab.selected {\n /* z-index: 2; */\n background: var(--layout-tab-select-background, var(--primary-background-color));\n }\n\n .layout-tab:not(.selected):hover::before {\n background-color: var(--md-sys-color-primary);\n opacity: var(--md-sys-state-hover-state-layer-opacity);\n position: absolute;\n inset: 0;\n content: '';\n border-radius: inherit;\n }\n\n .layout-tab:not(.selected):focus::before {\n background-color: var(--md-sys-color-primary);\n opacity: var(--md-sys-state-focus-state-layer-opacity);\n position: absolute;\n inset: 0;\n content: '';\n border-radius: inherit;\n }\n\n /* .layout-tab:focus {\n border-top-color: var(--primary-color);\n } */\n\n .tab-favicon {\n width: 16px;\n height: 16px;\n margin-right: 8px;\n }\n\n .close-icon {\n width: 16px;\n height: 16px;\n margin-left: auto;\n }\n\n .tab-divider {\n width: 1px;\n min-width: 1px;\n height: 20px;\n background-color: var(--md-sys-color-outline-variant);\n }\n\n .tab-divider.hidden {\n background-color: transparent;\n }\n `];\n }\n\n /**\n * @attribute\n */\n @property({ type: String, reflect: true }) layout: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * @attribute\n */\n @property({ type: Number, reflect: true }) layoutId?: number;\n\n @property({ type: Array }) dragTypes?: string[];\n\n /**\n * Whether dragging is occurring over the element\n */\n @state() protected inDrag = false;\n\n /**\n * The region the drag is leaning to.\n */\n @state() protected dragRegion?: DropRegion = 'center';\n\n @property({ type: Object }) panel?: LayoutPanel;\n\n /**\n * When set it adds the `overflow` hidden on the container that holds the tab contents.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) constrain = false;\n\n constructor() {\n super();\n this._dragEnterHandler = this._dragEnterHandler.bind(this);\n this._dragOverHandler = this._dragOverHandler.bind(this);\n this._dropHandler = this._dropHandler.bind(this);\n this._dragleaveHandler = this._dragleaveHandler.bind(this);\n this._dragendHandler = this._dragendHandler.bind(this);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('dragenter', this._dragEnterHandler);\n this.addEventListener('dragover', this._dragOverHandler);\n this.addEventListener('drop', this._dropHandler);\n document.body.addEventListener('dragleave', this._dragleaveHandler);\n document.body.addEventListener('dragend', this._dragendHandler);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('dragenter', this._dragEnterHandler);\n this.removeEventListener('dragover', this._dragOverHandler);\n this.removeEventListener('drop', this._dropHandler);\n document.body.removeEventListener('dragleave', this._dragleaveHandler);\n document.body.removeEventListener('dragend', this._dragendHandler);\n }\n\n protected hasDropTypes(dt: DataTransfer): boolean {\n const { dragTypes } = this;\n if (!Array.isArray(dragTypes)) {\n return true;\n }\n const eventTypes = [...dt.types];\n const allowedTypes = dragTypes.map(i => i.toLowerCase());\n return !allowedTypes.some(type => !eventTypes.includes(type));\n }\n\n protected panelCanDrop(e: DragEvent): boolean {\n if (e.defaultPrevented) {\n return false;\n }\n if (e.dataTransfer && !this.hasDropTypes(e.dataTransfer)) {\n return false;\n }\n const { panel } = this;\n if (!panel) {\n return true;\n }\n return panel.canDrop();\n }\n\n protected _dragEnterHandler(e: DragEvent): void {\n const { dataTransfer } = e;\n if (!dataTransfer || !this.panelCanDrop(e)) {\n return;\n }\n e.preventDefault();\n e.stopPropagation();\n dataTransfer.dropEffect = 'copy';\n }\n\n protected _dragOverHandler(e: DragEvent): void {\n const { dataTransfer } = e;\n if (!dataTransfer || !this.panelCanDrop(e)) {\n return;\n }\n e.preventDefault();\n e.stopPropagation();\n const region = this.getDropRegionFromEvent(e);\n if (!region) {\n this.inDrag = false;\n return;\n }\n dataTransfer.dropEffect = 'copy';\n this.inDrag = true;\n this.dragRegion = region;\n }\n\n protected _dropHandler(e: DragEvent): void {\n const { dataTransfer } = e;\n if (!dataTransfer || !this.panelCanDrop(e)) {\n return;\n }\n e.preventDefault();\n e.stopPropagation();\n const kind = dataTransfer.getData('text/kind');\n const key = dataTransfer.getData('text/key');\n if (!kind || !key) {\n return;\n }\n this.inDrag = false;\n const { panel } = this;\n let dispatch = true;\n if (panel) {\n dispatch = panel.addItem({ key, kind, label: 'New tab' }, { region: this.dragRegion });\n }\n if (dispatch) {\n this.dispatchEvent(new CustomEvent('datadrop', {\n detail: { kind, key, region: this.dragRegion },\n composed: true,\n bubbles: true,\n cancelable: true,\n }));\n }\n this.requestUpdate();\n }\n\n protected _dragleaveHandler(e: DragEvent): void {\n const elm = this.findLayout(e);\n if (!elm || elm !== this) {\n this.inDrag = false;\n this.dragRegion = 'center';\n }\n }\n\n protected _dragendHandler(): void {\n this.inDrag = false;\n this.dragRegion = 'center';\n }\n\n protected getDropRegionFromEvent(e: DragEvent): DropRegion | undefined {\n const layout = this.findLayout(e);\n if (!layout) {\n return undefined;\n }\n return this.getDropRegion(layout, e);\n }\n\n getDropRegion(element: HTMLElement, e: DragEvent): DropRegion | undefined {\n const { pageX, pageY } = e;\n const rect = element.getBoundingClientRect();\n const quarterWidth = rect.width / 4;\n const quarterHeight = rect.height / 4;\n if (pageX < rect.left + quarterWidth) {\n return 'west';\n }\n if (pageX > rect.right - quarterWidth) {\n return 'east';\n }\n if (pageY < rect.top + quarterHeight) {\n return 'north';\n }\n if (pageY > rect.bottom - quarterHeight) {\n return 'south';\n }\n const withingCenterX = (pageX >= rect.left + quarterWidth) && (pageX <= rect.right - quarterWidth);\n const withingCenterY = (pageY >= rect.top + quarterHeight) && (pageY <= rect.bottom - quarterHeight);\n if (withingCenterX && withingCenterY) {\n return 'center';\n }\n return undefined;\n }\n\n protected findLayout(e: Event): LayoutPanelElement | undefined {\n const path = e.composedPath();\n while (path.length) {\n const node = path.shift() as Element;\n if (node.nodeType !== Node.ELEMENT_NODE) {\n continue;\n }\n if (node.localName === this.localName) {\n return node as LayoutPanelElement;\n }\n }\n return undefined;\n }\n\n protected async _tabSelectHandler(e: Event): Promise<void> {\n if (!this.panel) {\n return;\n }\n const key = (e.currentTarget as HTMLElement).dataset.key as string;\n if (!key) {\n return;\n }\n if (this.panel.selected === key) {\n return;\n }\n this.panel.selected = key;\n this.panel.manager.changed();\n this.requestUpdate();\n await this.updateComplete;\n const child = this.querySelector(`[data-key=\"${key}\"]`);\n if (child) {\n child.dispatchEvent(new Event('resize'));\n }\n }\n\n /**\n * Closes a panel with right pointer configuration\n */\n protected _tabPointerDownHandler(e: PointerEvent): void {\n // the configuration of a middle button click which is \n // equal to 3 fingers click on a track pad.\n if (e.button === 1 && e.buttons === 4) {\n e.preventDefault();\n e.stopPropagation();\n const key = (e.target as HTMLElement).dataset.key as string;\n this.closeTab(key);\n }\n }\n\n protected _tabCloseHandler(e: Event): void {\n const icon = e.target as HTMLElement;\n const button = icon.parentElement as HTMLElement;\n const key = button.dataset.key as string;\n if (key) {\n e.preventDefault();\n e.stopPropagation();\n this.closeTab(key);\n }\n }\n\n @eventOptions({ passive: true })\n protected _tabTouchStartHandler(e: TouchEvent): void {\n if (e.targetTouches.length === 3) {\n e.preventDefault();\n e.stopPropagation();\n const key = (e.target as HTMLElement).dataset.key as string;\n this.closeTab(key);\n }\n }\n\n protected closeTab(key: string): void {\n const { panel } = this;\n if (!panel) {\n return;\n }\n const item = panel.items.find(i => i.key === key);\n if (!item) {\n return;\n }\n if (item.persistent && item.pinned) {\n return;\n }\n panel.removeItem(key);\n this.requestUpdate();\n this.dispatchEvent(new CustomEvent('closetab', {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: key,\n }));\n }\n\n protected _tabKeydownHandler(e: KeyboardEvent): void {\n if (e.key === 'Enter') {\n this._tabSelectHandler(e);\n }\n }\n\n protected _tabDragStart(e: DragEvent): void {\n const dt = e.dataTransfer;\n if (!dt || this.layoutId === undefined) {\n return;\n }\n \n dt.effectAllowed = 'copyMove';\n dt.dropEffect = 'move';\n const node = e.target as HTMLElement;\n dt.setData('text/kind', node.dataset.kind as string);\n dt.setData('text/key', node.dataset.key as string);\n dt.setData('text/source', this.localName);\n dt.setData('layout/id', String(this.layoutId));\n }\n\n protected _tabsDragEnterHandler(e: DragEvent): void {\n const dt = e.dataTransfer;\n if (!dt || !this.panelCanDrop(e)) {\n return;\n }\n e.stopPropagation();\n e.preventDefault();\n dt.effectAllowed = 'move';\n dt.dropEffect = 'move';\n }\n \n protected _tabsDragoverHandler(e: DragEvent): void {\n const dt = e.dataTransfer;\n if (!dt || !this.panelCanDrop(e)) {\n return;\n }\n e.stopPropagation();\n e.preventDefault();\n dt.effectAllowed = 'move';\n dt.dropEffect = 'move';\n }\n\n protected _tabsDrop(e: DragEvent): void {\n const dt = e.dataTransfer;\n if (!dt || !this.panelCanDrop(e) || this.layoutId === undefined) {\n return;\n }\n e.stopPropagation();\n e.preventDefault();\n const src = dt.getData('text/source');\n const key = dt.getData('text/key');\n const kind = dt.getData('text/kind');\n const lid = dt.getData('layout/id');\n const movingTab = src === this.localName;\n\n const overTab = this.findTab(e);\n const toIndex = overTab ? Number(overTab.dataset.index) : undefined;\n\n if (movingTab) {\n if (!lid) {\n return;\n }\n const srcPanel = Number(lid);\n if (Number.isNaN(srcPanel)) {\n return;\n }\n this.moveTab(srcPanel, this.layoutId, key, toIndex);\n } else {\n let dispatch = true;\n if (this.panel) {\n dispatch = this.panel.addItem({ key, kind, label: 'New tab' }, { index: toIndex });\n }\n if (dispatch) {\n this.dispatchEvent(new CustomEvent('datadrop', {\n detail: { kind, key, index: toIndex },\n composed: true,\n bubbles: true,\n cancelable: true,\n }));\n }\n this.requestUpdate();\n }\n }\n\n protected moveTab(fromLayout: number, toLayout: number, key: string, toIndex?: number): void {\n const { panel } = this;\n if (panel) {\n panel.manager.moveTab(fromLayout, toLayout, key, toIndex);\n }\n }\n\n protected findTab(e: Event): HTMLElement | undefined {\n const path = e.composedPath();\n while (path.length) {\n const node = path.shift() as Element;\n if (node.nodeType !== Node.ELEMENT_NODE) {\n continue;\n }\n if (node.classList.contains('layout-tab')) {\n return node as HTMLElement;\n }\n }\n return undefined;\n }\n\n override render(): TemplateResult {\n return html`\n ${this.dragRegionTemplate()}\n ${this.tabsTemplate()}\n <div class=\"content\">\n <slot></slot>\n </div>\n `;\n }\n\n protected dragRegionTemplate(): TemplateResult | string {\n const { inDrag, dragRegion } = this;\n if (!inDrag) {\n return '';\n }\n return html`\n <div class=\"drag-region ${dragRegion}\"></div>\n `;\n }\n\n protected tabsTemplate(): TemplateResult | string {\n const { panel } = this;\n if (!panel) {\n return '';\n }\n const items = panel.sortedItems();\n if (!items) {\n return '';\n }\n const size = items.length;\n return html`\n <div \n class=\"layout-tabs\" \n role=\"tablist\" \n @dragenter=\"${this._tabsDragEnterHandler}\" \n @dragover=\"${this._tabsDragoverHandler}\" \n @drop=\"${this._tabsDrop}\"\n >\n ${items.map((tab, i) => this.tabTemplate(tab, i + 1 === size, items[i + 1]?.key))}\n </div>\n `;\n }\n\n protected tabTemplate(item: ILayoutItem, last: boolean, nextKey?: string): TemplateResult {\n const { key, kind, label = '', index=0, icon, isDirty = false, parent } = item;\n const { panel } = this;\n const selected = !!panel && panel.selected === key;\n const nextSelected = !!nextKey && !!panel && panel.selected === nextKey;\n const closable = !item.persistent && !item.pinned;\n const classes = {\n 'layout-tab': true,\n 'is-dirty': isDirty,\n selected,\n surface1: selected,\n };\n let title = label;\n if (isDirty) {\n title = 'Unsaved changes';\n }\n\n const dividerHidden = last || selected || nextSelected;\n return html`\n <div \n data-key=\"${key}\" \n data-kind=\"${kind}\"\n data-index=\"${index}\"\n data-parent=\"${ifDefined(parent)}\"\n data-dirty=\"${isDirty}\"\n role=\"tab\"\n class=\"${classMap(classes)}\" \n draggable=\"true\"\n @dragstart=\"${this._tabDragStart}\"\n @click=\"${this._tabSelectHandler}\" \n @pointerdown=\"${this._tabPointerDownHandler}\"\n @touchstart=\"${this._tabTouchStartHandler}\"\n @keydown=\"${this._tabKeydownHandler}\"\n tabindex=\"0\"\n >\n ${icon ? html`<ui-icon icon=\"${icon}\" class=\"tab-favicon\"></ui-icon>` : ''}\n <span class=\"tab-label\" title=\"${title}\">${label}</span>\n ${closable ? html`<ui-icon icon=\"close\" class=\"close-icon\" @click=\"${this._tabCloseHandler}\"></ui-icon>` : ''}\n </div>\n <div class=\"tab-divider ${dividerHidden ? 'hidden' : ''}\"></div>\n `;\n }\n}\n"]}