@limetech/lime-elements 40.12.3 → 40.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/drag-to-reorder-BP5YkPuu.js +3092 -0
  3. package/dist/cjs/lime-elements.cjs.js +1 -1
  4. package/dist/cjs/{limel-scroller.cjs.entry.js → limel-drag-handle_2.cjs.entry.js} +38 -0
  5. package/dist/cjs/limel-file-viewer.cjs.entry.js +64 -55
  6. package/dist/cjs/limel-form.cjs.entry.js +539 -3171
  7. package/dist/cjs/limel-tab-bar.cjs.entry.js +120 -16
  8. package/dist/cjs/limel-tab-panel.cjs.entry.js +7 -1
  9. package/dist/cjs/loader.cjs.js +1 -1
  10. package/dist/collection/components/form/form.css +59 -0
  11. package/dist/collection/components/form/form.js +49 -2
  12. package/dist/collection/components/form/show-field.js +116 -0
  13. package/dist/collection/components/form/templates/array-field-collapsible-item.js +1 -0
  14. package/dist/collection/components/form/templates/array-field-item.js +5 -0
  15. package/dist/collection/components/form/templates/array-field.js +20 -158
  16. package/dist/collection/components/form/templates/field.js +17 -0
  17. package/dist/collection/components/tab-bar/tab-bar.css +68 -22
  18. package/dist/collection/components/tab-bar/tab-bar.js +131 -4
  19. package/dist/collection/components/tab-bar/tabs.js +23 -0
  20. package/dist/collection/components/tab-panel/tab-panel.js +54 -1
  21. package/dist/collection/util/drag-to-reorder.js +116 -0
  22. package/dist/esm/{_baseForOwn-D5j7fHlv.js → _baseForOwn-vKFWmmaS.js} +1 -1
  23. package/dist/esm/{_baseIsEqual-CyF4P8uM.js → _baseIsEqual-B_JRErB0.js} +1 -1
  24. package/dist/esm/{_baseIteratee-CpbczHY1.js → _baseIteratee-CVz7aes3.js} +1 -1
  25. package/dist/esm/{_baseSet-Cw2IE6ZF.js → _baseSet-BUAq8NGm.js} +1 -1
  26. package/dist/esm/{cloneDeep-DAbOtbs8.js → cloneDeep-Bcll-3f8.js} +1 -1
  27. package/dist/esm/drag-to-reorder-BXmXIwCa.js +3086 -0
  28. package/dist/esm/{isEqual-CE83yS8T.js → isEqual-C-pK6AAU.js} +1 -1
  29. package/dist/esm/lime-elements.js +1 -1
  30. package/dist/esm/limel-chip-set.entry.js +2 -2
  31. package/dist/esm/limel-dialog.entry.js +2 -2
  32. package/dist/esm/{limel-scroller.entry.js → limel-drag-handle_2.entry.js} +38 -1
  33. package/dist/esm/limel-file-dropzone_2.entry.js +3 -3
  34. package/dist/esm/limel-file-viewer.entry.js +64 -55
  35. package/dist/esm/limel-form.entry.js +536 -3168
  36. package/dist/esm/limel-prosemirror-adapter.entry.js +3 -3
  37. package/dist/esm/limel-tab-bar.entry.js +117 -13
  38. package/dist/esm/limel-tab-panel.entry.js +7 -1
  39. package/dist/esm/limel-table.entry.js +4 -4
  40. package/dist/esm/loader.js +1 -1
  41. package/dist/lime-elements/lime-elements.esm.js +1 -1
  42. package/dist/lime-elements/{p-35bc5ed2.entry.js → p-13f2afc9.entry.js} +1 -1
  43. package/dist/lime-elements/p-3b6d4934.entry.js +1 -0
  44. package/dist/lime-elements/p-67767276.entry.js +1 -0
  45. package/dist/lime-elements/{p-fb15f608.entry.js → p-6d65ee35.entry.js} +1 -1
  46. package/dist/lime-elements/p-714ab66d.entry.js +16 -0
  47. package/dist/lime-elements/{p-ff4a8b89.entry.js → p-7ae71c13.entry.js} +1 -1
  48. package/dist/lime-elements/p-BAqAt5It.js +1 -0
  49. package/dist/lime-elements/p-Cu9Ji1iJ.js +1 -0
  50. package/dist/lime-elements/{p-BY5NjPj8.js → p-D9Ezd43A.js} +1 -1
  51. package/dist/lime-elements/{p-nVemxylR.js → p-DFu1q54T.js} +1 -1
  52. package/dist/lime-elements/p-DdnBHYb-.js +7 -0
  53. package/dist/lime-elements/{p-B6-3WXAv.js → p-DeIIlp6m.js} +1 -1
  54. package/dist/lime-elements/p-Dq0uNStc.js +1 -0
  55. package/dist/lime-elements/p-b5bb124f.entry.js +1 -0
  56. package/dist/lime-elements/{p-9168793f.entry.js → p-bd58c761.entry.js} +1 -1
  57. package/dist/lime-elements/{p-458c131f.entry.js → p-c7e34502.entry.js} +1 -1
  58. package/dist/lime-elements/p-fb526a05.entry.js +1 -0
  59. package/dist/types/components/form/form.d.ts +15 -0
  60. package/dist/types/components/form/show-field.d.ts +9 -0
  61. package/dist/types/components/form/templates/array-context.d.ts +4 -0
  62. package/dist/types/components/form/templates/array-field-collapsible-item.d.ts +5 -0
  63. package/dist/types/components/form/templates/array-field.d.ts +3 -13
  64. package/dist/types/components/form/templates/field.d.ts +1 -0
  65. package/dist/types/components/form/templates/object-field.d.ts +2 -2
  66. package/dist/types/components/tab-bar/tab-bar.d.ts +25 -0
  67. package/dist/types/components/tab-bar/tab.types.d.ts +18 -0
  68. package/dist/types/components/tab-bar/tabs.d.ts +12 -1
  69. package/dist/types/components/tab-panel/tab-panel.d.ts +18 -1
  70. package/dist/types/components.d.ts +80 -2
  71. package/dist/types/util/drag-to-reorder.d.ts +65 -0
  72. package/package.json +4 -4
  73. package/dist/cjs/isArrayLikeObject-U2Ddbw4n.js +0 -326
  74. package/dist/cjs/limel-drag-handle.cjs.entry.js +0 -42
  75. package/dist/esm/isArrayLikeObject-CJB8HbtH.js +0 -321
  76. package/dist/esm/limel-drag-handle.entry.js +0 -40
  77. package/dist/lime-elements/p-49eb2f64.entry.js +0 -13
  78. package/dist/lime-elements/p-646731b6.entry.js +0 -1
  79. package/dist/lime-elements/p-8d567e42.entry.js +0 -1
  80. package/dist/lime-elements/p-BQeIv4aA.js +0 -1
  81. package/dist/lime-elements/p-COdirXg1.js +0 -1
  82. package/dist/lime-elements/p-ORUNaKm-.js +0 -1
  83. package/dist/lime-elements/p-a5246373.entry.js +0 -1
  84. package/dist/lime-elements/p-b609552e.entry.js +0 -1
  85. package/dist/lime-elements/p-bf849dc9.entry.js +0 -1
  86. package/dist/lime-elements/p-pk5KIdKH.js +0 -1
@@ -1,8 +1,9 @@
1
1
  import { h, } from "@stencil/core";
2
2
  import { isEqual, difference } from "lodash-es";
3
- import { setActiveTab } from "./tabs";
3
+ import { getTabReorder, setActiveTab } from "./tabs";
4
4
  import { getIconColor, getIconName } from "../icon/get-icon-props";
5
5
  import { findNavigationTarget, findTabStop, isNavigationKey, NO_NAVIGATION_TARGET, } from "../../util/keyboard-navigation";
6
+ import { DragToReorder } from "../../util/drag-to-reorder";
6
7
  /**
7
8
  * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.
8
9
  * :::warning
@@ -13,6 +14,7 @@ import { findNavigationTarget, findTabStop, isNavigationKey, NO_NAVIGATION_TARGE
13
14
  * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device. A vertical tab bar does the same, upwards and downwards.
14
15
  * The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
15
16
  * The left and right arrow keys move to the previous and the next tab, and select it. In a vertical tab bar, the up and down arrow keys do that instead. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
17
+ * Set `allowTabReorder` to let the user drag the tabs into the order they want. Every tab then gets a drag handle, and the tab bar emits `reorderTab` when the user drops a tab in a new place. The tab bar does not change `tabs` itself, so the component that uses it decides the new order, and can save it for the user. A tab that the component does not move, stays where it was. The tabs can be reordered with a mouse and a touch screen, but not yet with the keyboard.
16
18
  * :::tip Other things to consider
17
19
  * Never divide the content of a tab using a nested tab bar.
18
20
  * Never place two tab bars within the same screen.
@@ -26,6 +28,8 @@ import { findNavigationTarget, findTabStop, isNavigationKey, NO_NAVIGATION_TARGE
26
28
  * @exampleComponent limel-example-tab-bar-with-equal-tab-width
27
29
  * @exampleComponent limel-example-tab-bar-vertical
28
30
  * @exampleComponent limel-example-tab-bar-tab-width
31
+ * @exampleComponent limel-example-tab-bar-reorder
32
+ * @exampleComponent limel-example-tab-bar-reorder-vertical
29
33
  */
30
34
  export class TabBar {
31
35
  constructor() {
@@ -38,8 +42,24 @@ export class TabBar {
38
42
  * to, or in a column, next to it.
39
43
  */
40
44
  this.orientation = 'horizontal';
45
+ /**
46
+ * Set to `true` to let the user reorder the tabs by dragging them. Listen
47
+ * for `reorderTab` and give the tab bar the tabs in their new order.
48
+ */
49
+ this.allowTabReorder = false;
41
50
  this.hasLoaded = false;
42
51
  this.isLaidOutAgain = false;
52
+ this.renderedTabs = [];
53
+ this.handleReorder = (event) => {
54
+ const reorder = getTabReorder(this.tabs, event);
55
+ if (!reorder) {
56
+ return;
57
+ }
58
+ const ids = this.tabs.map(({ id }) => id);
59
+ ids.splice(reorder.toIndex, 0, ...ids.splice(reorder.fromIndex, 1));
60
+ this.tabIdsAfterReorder = ids;
61
+ this.reorderTab.emit(reorder);
62
+ };
43
63
  this.handleKeyDown = this.handleKeyDown.bind(this);
44
64
  }
45
65
  async connectedCallback() {
@@ -49,20 +69,39 @@ export class TabBar {
49
69
  return;
50
70
  }
51
71
  this.revealedTabId = undefined;
72
+ this.setUpReordering();
52
73
  await this.revealActiveTab('auto');
53
74
  }
75
+ disconnectedCallback() {
76
+ var _a;
77
+ (_a = this.dragToReorder) === null || _a === void 0 ? void 0 : _a.teardown();
78
+ }
54
79
  componentDidLoad() {
55
80
  this.hasLoaded = true;
56
81
  this.triggerIconColorWarning();
57
82
  }
83
+ componentWillRender() {
84
+ var _a;
85
+ const index = this.getTabElements().indexOf(this.host.shadowRoot.activeElement);
86
+ this.tabWithFocus =
87
+ index === -1
88
+ ? undefined
89
+ : {
90
+ id: (_a = this.renderedTabs[index]) === null || _a === void 0 ? void 0 : _a.id,
91
+ button: this.getTabElements()[index],
92
+ };
93
+ }
58
94
  async componentDidRender() {
95
+ this.restoreFocus();
96
+ this.renderedTabs = this.tabs;
97
+ this.setUpReordering();
59
98
  const isLaidOutAgain = this.isLaidOutAgain;
60
99
  this.isLaidOutAgain = false;
61
100
  await this.revealActiveTab(!this.hasLoaded || isLaidOutAgain ? 'auto' : undefined, isLaidOutAgain);
62
101
  }
63
102
  render() {
64
103
  const tabStop = findTabStop(this.tabs, this.tabs.findIndex((tab) => tab.active), this.getNavigationOptions());
65
- return (h("div", { key: 'f4a760e69615d4d4d87ad3e176d109dbcdf2ea34', role: "tablist", "aria-orientation": this.getOrientation(), onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: 'f3ff8810cf0a248c13aa2d9840c80c6f6270df68', orientation: this.getOrientation() }, this.tabs.map((tab, index) => this.renderTab(tab, index, index === tabStop)))));
104
+ return (h("div", { key: 'a6fea42551095401324faac28bad996dd4137428', role: "tablist", "aria-orientation": this.getOrientation(), onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: '956d8b890785071eacb66478e4f6af8bbc467a93', orientation: this.getOrientation() }, this.tabs.map((tab, index) => this.renderTabOrMovableTab(tab, index, index === tabStop)))));
66
105
  }
67
106
  tabsChanged(newTabs = [], oldTabs = []) {
68
107
  const newIds = newTabs.map((tab) => tab.id);
@@ -70,6 +109,11 @@ export class TabBar {
70
109
  if (isEqual(newIds, oldIds)) {
71
110
  return;
72
111
  }
112
+ const idsAfterReorder = this.tabIdsAfterReorder;
113
+ this.tabIdsAfterReorder = undefined;
114
+ if (isEqual(newIds, idsAfterReorder)) {
115
+ return;
116
+ }
73
117
  this.revealedTabId = undefined;
74
118
  }
75
119
  orientationChanged() {
@@ -82,11 +126,41 @@ export class TabBar {
82
126
  getNavigationOptions() {
83
127
  return { orientation: this.getOrientation(), wrap: true };
84
128
  }
129
+ restoreFocus() {
130
+ var _a;
131
+ const tabWithFocus = this.tabWithFocus;
132
+ this.tabWithFocus = undefined;
133
+ if (!tabWithFocus || tabWithFocus.button.isConnected) {
134
+ return;
135
+ }
136
+ const index = this.tabs.findIndex((tab) => tab.id === tabWithFocus.id);
137
+ (_a = this.getTabElements()[index]) === null || _a === void 0 ? void 0 : _a.focus();
138
+ }
85
139
  getTabElements() {
86
140
  return [
87
141
  ...this.host.shadowRoot.querySelectorAll('button[role="tab"]'),
88
142
  ];
89
143
  }
144
+ canReorderTabs() {
145
+ return this.allowTabReorder && this.tabs.length > 1;
146
+ }
147
+ setUpReordering() {
148
+ var _a, _b;
149
+ if (!this.canReorderTabs()) {
150
+ (_a = this.dragToReorder) === null || _a === void 0 ? void 0 : _a.teardown();
151
+ return;
152
+ }
153
+ const scroller = this.host.shadowRoot.querySelector('limel-scroller');
154
+ if (!scroller) {
155
+ return;
156
+ }
157
+ (_b = this.dragToReorder) !== null && _b !== void 0 ? _b : (this.dragToReorder = new DragToReorder({
158
+ draggable: '[data-reorder-id]',
159
+ revertDrop: true,
160
+ onReorder: this.handleReorder,
161
+ }));
162
+ this.dragToReorder.setup(scroller, this.getOrientation());
163
+ }
90
164
  /**
91
165
  * A tab that is activated by the user receives focus, and the scroller
92
166
  * reveals what receives focus. This is for a tab that becomes active
@@ -122,8 +196,11 @@ export class TabBar {
122
196
  if (!isNavigationKey(event, options)) {
123
197
  return;
124
198
  }
125
- event.preventDefault();
126
199
  const current = this.getTabElements().indexOf(event.target);
200
+ if (current === -1) {
201
+ return;
202
+ }
203
+ event.preventDefault();
127
204
  this.activateTab(findNavigationTarget(this.tabs, event.key, current, options));
128
205
  }
129
206
  activateTab(index) {
@@ -158,8 +235,16 @@ export class TabBar {
158
235
  }
159
236
  return (h("limel-icon", { name: name, style: style, size: "small", "aria-hidden": "true" }));
160
237
  }
238
+ renderTabOrMovableTab(tab, index, isTabStop) {
239
+ if (!this.canReorderTabs()) {
240
+ return this.renderTab(tab, index, isTabStop);
241
+ }
242
+ return (h("div", { key: tab.id, role: "presentation", "data-reorder-id": tab.id }, this.renderTab(tab, index, isTabStop), h("limel-drag-handle", { "aria-hidden": "true", dragDirection: this.getOrientation(), tooltipOpenDirection: this.getOrientation() === 'vertical'
243
+ ? 'right'
244
+ : 'bottom' })));
245
+ }
161
246
  renderTab(tab, index, isTabStop) {
162
- return (h("button", { role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: isTabStop ? 0 : -1, onClick: () => this.activateTab(index) }, h("span", { class: "content" }, this.renderIcon(tab), h("span", { class: "text" }, tab.text), tab.badge ? h("limel-badge", { label: tab.badge }) : '')));
247
+ return (h("button", { key: tab.id, role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: isTabStop ? 0 : -1, onClick: () => this.activateTab(index) }, h("span", { class: "content" }, this.renderIcon(tab), h("span", { class: "text" }, tab.text), tab.badge ? h("limel-badge", { label: tab.badge }) : '')));
163
248
  }
164
249
  triggerIconColorWarning() {
165
250
  if (this.tabs.some((tab) => tab.iconColor)) {
@@ -224,6 +309,26 @@ export class TabBar {
224
309
  "reflect": true,
225
310
  "attribute": "orientation",
226
311
  "defaultValue": "'horizontal'"
312
+ },
313
+ "allowTabReorder": {
314
+ "type": "boolean",
315
+ "mutable": false,
316
+ "complexType": {
317
+ "original": "boolean",
318
+ "resolved": "boolean",
319
+ "references": {}
320
+ },
321
+ "required": false,
322
+ "optional": false,
323
+ "docs": {
324
+ "tags": [],
325
+ "text": "Set to `true` to let the user reorder the tabs by dragging them. Listen\nfor `reorderTab` and give the tab bar the tabs in their new order."
326
+ },
327
+ "getter": false,
328
+ "setter": false,
329
+ "reflect": true,
330
+ "attribute": "allow-tab-reorder",
331
+ "defaultValue": "false"
227
332
  }
228
333
  };
229
334
  }
@@ -250,6 +355,28 @@ export class TabBar {
250
355
  }
251
356
  }
252
357
  }
358
+ }, {
359
+ "method": "reorderTab",
360
+ "name": "reorderTab",
361
+ "bubbles": true,
362
+ "cancelable": true,
363
+ "composed": true,
364
+ "docs": {
365
+ "tags": [],
366
+ "text": "Emitted when the user has dragged a tab to a new place. The tab bar does\nnot change `tabs` itself. The tab stays where it was until `tabs` is set\nto the tabs in their new order."
367
+ },
368
+ "complexType": {
369
+ "original": "TabReorderEvent",
370
+ "resolved": "TabReorderEvent",
371
+ "references": {
372
+ "TabReorderEvent": {
373
+ "location": "import",
374
+ "path": "./tab.types",
375
+ "id": "src/components/tab-bar/tab.types.ts::TabReorderEvent",
376
+ "referenceLocation": "TabReorderEvent"
377
+ }
378
+ }
379
+ }
253
380
  }];
254
381
  }
255
382
  static get elementRef() { return "host"; }
@@ -1,3 +1,4 @@
1
+ import { isEqual } from "lodash-es";
1
2
  /**
2
3
  * Set a tabs `active` state to true in a list of tabs. The previous tab with
3
4
  * `active` set to true will have it set to `false` instead.
@@ -15,3 +16,25 @@ export function setActiveTab(tabs, index) {
15
16
  result[index] = Object.assign(Object.assign({}, tabs[index]), { active: true });
16
17
  return result;
17
18
  }
19
+ /**
20
+ * Describe a move that the user has made, in the tabs that the user made it in.
21
+ *
22
+ * @param tabs - the tabs of the tab bar now
23
+ * @param reorder - the move, as the list of tabs that the user dragged reported
24
+ * it
25
+ * @returns the move, or `undefined` when `tabs` are not the tabs that the user
26
+ * began to drag, since the move would point to another tab then
27
+ */
28
+ export function getTabReorder(tabs, reorder) {
29
+ const { order, fromIndex, toIndex } = reorder;
30
+ const isATab = (index) => index >= 0 && index < tabs.length;
31
+ if (!isATab(fromIndex) || !isATab(toIndex)) {
32
+ return undefined;
33
+ }
34
+ const orderBeforeTheMove = [...order];
35
+ orderBeforeTheMove.splice(fromIndex, 0, ...orderBeforeTheMove.splice(toIndex, 1));
36
+ if (!isEqual(orderBeforeTheMove, tabs.map(({ id }) => String(id)))) {
37
+ return undefined;
38
+ }
39
+ return { tab: tabs[fromIndex], fromIndex, toIndex };
40
+ }
@@ -15,10 +15,16 @@ import { dispatchResizeEvent } from "../../util/dispatch-resize-event";
15
15
  * The slotted components can also emit the `changeTab` event to update anything
16
16
  * inside the actual tab, e.g. to change the icon, color or badge.
17
17
  *
18
+ * Set `allowTabReorder` to let the user reorder the tabs by dragging them. The
19
+ * panel does not change `tabs` itself. Listen for `reorderTab`, and give the
20
+ * panel the tabs in their new order. The tabs can be reordered with a mouse
21
+ * and a touch screen, but not yet with the keyboard.
22
+ *
18
23
  * @slot - Content to put inside the `limel-tab-panel`. Each slotted element
19
24
  * must have the `id` attribute equal to the id of the tab it belongs to.
20
25
  * @exampleComponent limel-example-tab-panel-basic
21
26
  * @exampleComponent limel-example-tab-panel-vertical
27
+ * @exampleComponent limel-example-tab-panel-reorder
22
28
  */
23
29
  export class TabPanel {
24
30
  constructor() {
@@ -31,6 +37,11 @@ export class TabPanel {
31
37
  * column, to the left of it.
32
38
  */
33
39
  this.orientation = 'horizontal';
40
+ /**
41
+ * Set to `true` to let the user reorder the tabs by dragging them. Listen
42
+ * for `reorderTab` and give the panel the tabs in their new order.
43
+ */
44
+ this.allowTabReorder = false;
34
45
  this.slotElements = [];
35
46
  this.handleChangeTabs = this.handleChangeTabs.bind(this);
36
47
  this.setSlotElements = this.setSlotElements.bind(this);
@@ -64,7 +75,7 @@ export class TabPanel {
64
75
  }
65
76
  }
66
77
  render() {
67
- return (h(Host, { key: '69b4a7ee8bbe366dd3a001e2d63a96c1680660c1', onChangeTab: this.handleChangeTabs }, h("div", { key: '5844651fd25248b2767127f6ca6ab5f02f03c347', class: "tab-panel" }, h("limel-tab-bar", { key: '0ef45e1bead572d950148b0e4f8b53c8d9f567ce', tabs: this.tabs, orientation: this.orientation }), h("div", { key: 'a8b336877c2bc9b1ebda32fd726d76be3957bbf3', class: "tab-content" }, h("slot", { key: '97e10533292738d2b4d0914eb9922cac0b396bb6' })))));
78
+ return (h(Host, { key: '3f70176f334708cbe3c0629ed5b00ea26676b187', onChangeTab: this.handleChangeTabs }, h("div", { key: '49d629465a2df872df90a8534aba05db1d1eab6d', class: "tab-panel" }, h("limel-tab-bar", { key: 'c6c7392edaaf36de925bee5851ff24c64cf639a3', tabs: this.tabs, orientation: this.orientation, allowTabReorder: this.allowTabReorder }), h("div", { key: '2f1e5eb59c3ae94fa0dc92a6fe3ba4dec50dd5be', class: "tab-content" }, h("slot", { key: '7441131f62ff758351e44c33c50b4a499e05351c' })))));
68
79
  }
69
80
  setSlotElements() {
70
81
  const slot = this.getSlot();
@@ -165,6 +176,26 @@ export class TabPanel {
165
176
  "reflect": true,
166
177
  "attribute": "orientation",
167
178
  "defaultValue": "'horizontal'"
179
+ },
180
+ "allowTabReorder": {
181
+ "type": "boolean",
182
+ "mutable": false,
183
+ "complexType": {
184
+ "original": "boolean",
185
+ "resolved": "boolean",
186
+ "references": {}
187
+ },
188
+ "required": false,
189
+ "optional": false,
190
+ "docs": {
191
+ "tags": [],
192
+ "text": "Set to `true` to let the user reorder the tabs by dragging them. Listen\nfor `reorderTab` and give the panel the tabs in their new order."
193
+ },
194
+ "getter": false,
195
+ "setter": false,
196
+ "reflect": true,
197
+ "attribute": "allow-tab-reorder",
198
+ "defaultValue": "false"
168
199
  }
169
200
  };
170
201
  }
@@ -191,6 +222,28 @@ export class TabPanel {
191
222
  }
192
223
  }
193
224
  }
225
+ }, {
226
+ "method": "reorderTab",
227
+ "name": "reorderTab",
228
+ "bubbles": true,
229
+ "cancelable": true,
230
+ "composed": true,
231
+ "docs": {
232
+ "tags": [],
233
+ "text": "Emitted when the user has dragged a tab to a new place. The panel does\nnot change `tabs` itself. The tab stays where it was until `tabs` is set\nto the tabs in their new order."
234
+ },
235
+ "complexType": {
236
+ "original": "TabReorderEvent",
237
+ "resolved": "TabReorderEvent",
238
+ "references": {
239
+ "TabReorderEvent": {
240
+ "location": "import",
241
+ "path": "../tab-bar/tab.types",
242
+ "id": "src/components/tab-bar/tab.types.ts::TabReorderEvent",
243
+ "referenceLocation": "TabReorderEvent"
244
+ }
245
+ }
246
+ }
194
247
  }];
195
248
  }
196
249
  static get elementRef() { return "host"; }
@@ -0,0 +1,116 @@
1
+ import Sortable from "sortablejs";
2
+ const DRAG_HANDLE_SELECTOR = '[data-drag-handle]';
3
+ const DRAGGING_CONTAINER_CLASS = 'has-an-item-which-is-being-dragged';
4
+ const ELEVATED_ITEM_CLASS = 'is-elevated';
5
+ const ELEVATION_DURATION_MS = 1000;
6
+ const TOUCH_DRAG_DELAY_MS = 200;
7
+ const ANIMATION_DURATION_MS = 150;
8
+ /**
9
+ * Lets the user reorder the children of a list with a drag handle.
10
+ *
11
+ * Every child of the list has a `data-reorder-id`, and the drag starts from
12
+ * an element with the `data-drag-handle` attribute inside a child.
13
+ */
14
+ export class DragToReorder {
15
+ constructor(options) {
16
+ this.options = options;
17
+ this.orderBeforeDrag = [];
18
+ this.handleStart = (event) => {
19
+ var _a, _b;
20
+ this.orderBeforeDrag = this.readOrder();
21
+ this.nextSiblingBeforeDrag = (_a = event.item.nextElementSibling) !== null && _a !== void 0 ? _a : undefined;
22
+ (_b = this.container) === null || _b === void 0 ? void 0 : _b.classList.add(DRAGGING_CONTAINER_CLASS);
23
+ this.elevate(event.item);
24
+ };
25
+ this.handleEnd = (event) => {
26
+ var _a;
27
+ (_a = this.container) === null || _a === void 0 ? void 0 : _a.classList.remove(DRAGGING_CONTAINER_CLASS);
28
+ this.keepElevatedBriefly(event.item);
29
+ const order = this.readOrder();
30
+ const id = event.item.dataset.reorderId;
31
+ const fromIndex = this.orderBeforeDrag.indexOf(id);
32
+ const toIndex = order.indexOf(id);
33
+ const nextSibling = this.nextSiblingBeforeDrag;
34
+ this.orderBeforeDrag = [];
35
+ this.nextSiblingBeforeDrag = undefined;
36
+ if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
37
+ return;
38
+ }
39
+ if (this.options.revertDrop) {
40
+ this.putBack(event.item, nextSibling);
41
+ }
42
+ this.options.onReorder({ order, fromIndex, toIndex });
43
+ };
44
+ }
45
+ /**
46
+ * @param container - the list
47
+ * @param direction - the way the children are laid out. Leave it out to
48
+ * let SortableJS find out. Setting up the same list again without it keeps
49
+ * the direction that the list has.
50
+ */
51
+ setup(container, direction) {
52
+ if (this.getDraggableItems(container).length < 2) {
53
+ this.teardown();
54
+ return;
55
+ }
56
+ if (this.sortable && this.container === container) {
57
+ this.changeDirection(direction);
58
+ return;
59
+ }
60
+ this.teardown();
61
+ this.container = container;
62
+ this.direction = direction;
63
+ this.sortable = Sortable.create(container, Object.assign(Object.assign({ animation: ANIMATION_DURATION_MS, handle: DRAG_HANDLE_SELECTOR, draggable: this.options.draggable, delay: TOUCH_DRAG_DELAY_MS, delayOnTouchOnly: true }, (direction && { direction: direction })), { onStart: this.handleStart, onEnd: this.handleEnd }));
64
+ }
65
+ teardown() {
66
+ var _a, _b;
67
+ (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
68
+ this.sortable = undefined;
69
+ this.removeElevation();
70
+ (_b = this.container) === null || _b === void 0 ? void 0 : _b.classList.remove(DRAGGING_CONTAINER_CLASS);
71
+ this.container = undefined;
72
+ this.direction = undefined;
73
+ this.orderBeforeDrag = [];
74
+ this.nextSiblingBeforeDrag = undefined;
75
+ }
76
+ putBack(item, nextSibling) {
77
+ const isStillInList = (nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.parentNode) === this.container;
78
+ this.container.insertBefore(item, isStillInList ? nextSibling : null);
79
+ }
80
+ changeDirection(direction) {
81
+ if (!direction || direction === this.direction) {
82
+ return;
83
+ }
84
+ this.direction = direction;
85
+ this.sortable.option('direction', direction);
86
+ }
87
+ getDraggableItems(container) {
88
+ return [...container.children].filter((child) => child.matches(this.options.draggable));
89
+ }
90
+ readOrder() {
91
+ var _a, _b;
92
+ const children = [...((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : [])];
93
+ return children
94
+ .filter((child) => {
95
+ return (child instanceof HTMLElement &&
96
+ child.dataset.reorderId !== undefined);
97
+ })
98
+ .map((child) => child.dataset.reorderId);
99
+ }
100
+ elevate(item) {
101
+ this.removeElevation();
102
+ item.classList.add(ELEVATED_ITEM_CLASS);
103
+ this.elevatedItem = item;
104
+ }
105
+ keepElevatedBriefly(item) {
106
+ this.elevate(item);
107
+ this.elevationTimeout = setTimeout(() => this.removeElevation(), ELEVATION_DURATION_MS);
108
+ }
109
+ removeElevation() {
110
+ var _a;
111
+ clearTimeout(this.elevationTimeout);
112
+ this.elevationTimeout = undefined;
113
+ (_a = this.elevatedItem) === null || _a === void 0 ? void 0 : _a.classList.remove(ELEVATED_ITEM_CLASS);
114
+ this.elevatedItem = undefined;
115
+ }
116
+ }
@@ -1,4 +1,4 @@
1
- import { k as keys } from './_baseIsEqual-CyF4P8uM.js';
1
+ import { k as keys } from './_baseIsEqual-B_JRErB0.js';
2
2
 
3
3
  /**
4
4
  * Creates a base function for methods like `_.forIn` and `_.forOwn`.
@@ -1203,4 +1203,4 @@ function baseIsEqual(value, other, bitmask, customizer, stack) {
1203
1203
  return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack);
1204
1204
  }
1205
1205
 
1206
- export { MapCache as M, SetCache as S, Uint8Array as U, Stack as a, baseIsEqual as b, cacheHas as c, arrayPush as d, arrayLikeKeys as e, stubArray as f, getAllKeys as g, getSymbols as h, baseGetAllKeys as i, keys as k, setToArray as s };
1206
+ export { MapCache as M, SetCache as S, Uint8Array as U, arrayPush as a, baseIsEqual as b, cacheHas as c, Stack as d, arrayLikeKeys as e, stubArray as f, getAllKeys as g, getSymbols as h, baseGetAllKeys as i, keys as k, setToArray as s };
@@ -1,4 +1,4 @@
1
- import { M as MapCache, a as Stack, b as baseIsEqual, k as keys } from './_baseIsEqual-CyF4P8uM.js';
1
+ import { M as MapCache, d as Stack, b as baseIsEqual, k as keys } from './_baseIsEqual-B_JRErB0.js';
2
2
  import { S as Symbol, i as isObject } from './isObject-BJQylLSL.js';
3
3
  import { i as isArray } from './isArray-B8VKuhvH.js';
4
4
  import { i as isSymbol } from './isSymbol-ClAke5ga.js';
@@ -1,5 +1,5 @@
1
1
  import { a as assignValue } from './_assignValue-CEFvyZxO.js';
2
- import { c as castPath, a as toKey } from './_baseIteratee-CpbczHY1.js';
2
+ import { c as castPath, a as toKey } from './_baseIteratee-CVz7aes3.js';
3
3
  import { i as isIndex } from './_isIndex-B--C3qwe.js';
4
4
  import { i as isObject } from './isObject-BJQylLSL.js';
5
5
 
@@ -1,4 +1,4 @@
1
- import { U as Uint8Array, a as Stack, g as getAllKeys } from './_baseIsEqual-CyF4P8uM.js';
1
+ import { U as Uint8Array, d as Stack, g as getAllKeys } from './_baseIsEqual-B_JRErB0.js';
2
2
  import { a as assignValue } from './_assignValue-CEFvyZxO.js';
3
3
  import { d as isPrototype, g as getTag, e as baseUnary, n as nodeUtil, a as isBuffer } from './_getTag-BiAaLWvH.js';
4
4
  import { i as isObject, S as Symbol } from './isObject-BJQylLSL.js';