@tylertech/forge 3.10.3 → 3.10.4
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.
|
@@ -14,7 +14,7 @@ import { IconComponent, IconRegistry } from '../../icon';
|
|
|
14
14
|
import { StateLayerComponent } from '../../state-layer';
|
|
15
15
|
import { FocusIndicatorComponent } from '../../focus-indicator';
|
|
16
16
|
const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
|
|
17
|
-
const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:
|
|
17
|
+
const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:uqqok2l;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uqqok2l{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:uqqok3h;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uqqok3h{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uqqok46;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uqqok46{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:uqqok4t;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uqqok4t{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:uqqok5m;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uqqok5m{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uqqok6i;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uqqok6i{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uqqok6t;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uqqok6t{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uqqok7f;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uqqok7f{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
|
|
18
18
|
/**
|
|
19
19
|
* @tag forge-split-view-panel
|
|
20
20
|
*
|
|
@@ -29,7 +29,6 @@ export declare class TabBarCore implements ITabBarCore {
|
|
|
29
29
|
private _inverted;
|
|
30
30
|
private _autoActivate;
|
|
31
31
|
private _scrollButtons;
|
|
32
|
-
private _tabs;
|
|
33
32
|
private _scrollButtonsVisible;
|
|
34
33
|
private _tabScrollAnimationFrame;
|
|
35
34
|
private _tabsChangedListener;
|
|
@@ -42,6 +41,7 @@ export declare class TabBarCore implements ITabBarCore {
|
|
|
42
41
|
constructor(_adapter: ITabBarAdapter);
|
|
43
42
|
initialize(): void;
|
|
44
43
|
destroy(): void;
|
|
44
|
+
private _getTabs;
|
|
45
45
|
private _onTabsChanged;
|
|
46
46
|
private _onTabSelected;
|
|
47
47
|
private _onKeydown;
|
|
@@ -18,7 +18,6 @@ export class TabBarCore {
|
|
|
18
18
|
this._inverted = false;
|
|
19
19
|
this._autoActivate = false;
|
|
20
20
|
this._scrollButtons = false;
|
|
21
|
-
this._tabs = [];
|
|
22
21
|
this._scrollButtonsVisible = false;
|
|
23
22
|
this._tabsChangedListener = () => this._onTabsChanged();
|
|
24
23
|
this._tabSelectedListener = (evt) => this._onTabSelected(evt);
|
|
@@ -46,8 +45,10 @@ export class TabBarCore {
|
|
|
46
45
|
this._adapter.destroyScrollObserver(this._scrollListener);
|
|
47
46
|
this._isInitialized = false;
|
|
48
47
|
}
|
|
48
|
+
_getTabs() {
|
|
49
|
+
return this._adapter.getTabs();
|
|
50
|
+
}
|
|
49
51
|
async _onTabsChanged() {
|
|
50
|
-
this._tabs = this._adapter.getTabs();
|
|
51
52
|
this._syncTabState();
|
|
52
53
|
if (this._scrollButtons) {
|
|
53
54
|
this._detectScrollableStatus();
|
|
@@ -65,24 +66,25 @@ export class TabBarCore {
|
|
|
65
66
|
}
|
|
66
67
|
evt.preventDefault();
|
|
67
68
|
let index = -1;
|
|
69
|
+
const tabs = this._getTabs();
|
|
68
70
|
if (evt.key === 'Home') {
|
|
69
71
|
// Locate the first non-disabled tab
|
|
70
|
-
index =
|
|
72
|
+
index = tabs.findIndex(tab => !tab.disabled);
|
|
71
73
|
}
|
|
72
74
|
else if (evt.key === 'End') {
|
|
73
75
|
// Locate the last non-disabled tab
|
|
74
|
-
index =
|
|
76
|
+
index = tabs.reduceRight((acc, tab, i) => (!tab.disabled && acc === -1 ? i : acc), -1);
|
|
75
77
|
}
|
|
76
78
|
else {
|
|
77
79
|
// Locate the next or previous tab based on the key that was pressed
|
|
78
|
-
const currentIndex =
|
|
80
|
+
const currentIndex = tabs.findIndex(tab => tab.matches(':focus'));
|
|
79
81
|
const isPrevKey = evt.key === 'ArrowLeft' || evt.key === 'ArrowUp';
|
|
80
82
|
const calcIndex = (startIndex) => {
|
|
81
83
|
index = startIndex + (isPrevKey ? -1 : 1);
|
|
82
|
-
index = index < 0 ?
|
|
84
|
+
index = index < 0 ? tabs.length - 1 : index % tabs.length;
|
|
83
85
|
// Try to recurse until we find a non-disabled tab (unless all tabs are disabled already)
|
|
84
|
-
const isAllTabsDisabled =
|
|
85
|
-
if (!isAllTabsDisabled &&
|
|
86
|
+
const isAllTabsDisabled = tabs.every(tab => tab.disabled);
|
|
87
|
+
if (!isAllTabsDisabled && tabs[index]?.disabled) {
|
|
86
88
|
calcIndex(index);
|
|
87
89
|
}
|
|
88
90
|
};
|
|
@@ -92,23 +94,24 @@ export class TabBarCore {
|
|
|
92
94
|
return;
|
|
93
95
|
}
|
|
94
96
|
if (this._autoActivate) {
|
|
95
|
-
this._selectTab({ tab:
|
|
97
|
+
this._selectTab({ tab: tabs[index], focusTab: true });
|
|
96
98
|
}
|
|
97
99
|
else {
|
|
98
|
-
|
|
99
|
-
await this._adapter.tryScrollTabIntoView(
|
|
100
|
+
tabs[index].focus({ preventScroll: true, focusVisible: true });
|
|
101
|
+
await this._adapter.tryScrollTabIntoView(tabs[index]);
|
|
100
102
|
}
|
|
101
103
|
}
|
|
102
104
|
async _selectTab({ tab, emitEvent = true, focusTab = false }) {
|
|
103
105
|
if (!tab || tab.disabled) {
|
|
104
106
|
return;
|
|
105
107
|
}
|
|
106
|
-
const
|
|
108
|
+
const tabs = this._getTabs();
|
|
109
|
+
const currentSelectedTab = tabs.find(t => t.selected);
|
|
107
110
|
if (currentSelectedTab === tab) {
|
|
108
111
|
return;
|
|
109
112
|
}
|
|
110
113
|
if (emitEvent) {
|
|
111
|
-
const index =
|
|
114
|
+
const index = tabs.indexOf(tab);
|
|
112
115
|
const event = new CustomEvent(TAB_BAR_CONSTANTS.events.CHANGE, {
|
|
113
116
|
detail: { index },
|
|
114
117
|
bubbles: true,
|
|
@@ -132,7 +135,7 @@ export class TabBarCore {
|
|
|
132
135
|
if (currentSelectedTab) {
|
|
133
136
|
currentSelectedTab.selected = false;
|
|
134
137
|
}
|
|
135
|
-
this._activeTab =
|
|
138
|
+
this._activeTab = tabs.indexOf(tab);
|
|
136
139
|
}
|
|
137
140
|
/**
|
|
138
141
|
* Ensures that all tabs have the correct state based on the tab bar state.
|
|
@@ -140,7 +143,7 @@ export class TabBarCore {
|
|
|
140
143
|
* This is called whenever a child tab is added to the DOM.
|
|
141
144
|
*/
|
|
142
145
|
_syncTabState() {
|
|
143
|
-
this.
|
|
146
|
+
this._getTabs().forEach((tab, index) => {
|
|
144
147
|
tab.selected = index === this._activeTab;
|
|
145
148
|
if (this._disabled) {
|
|
146
149
|
tab.disabled = this._disabled;
|
|
@@ -202,8 +205,9 @@ export class TabBarCore {
|
|
|
202
205
|
this._tabScrollAnimationFrame = window.requestAnimationFrame(() => {
|
|
203
206
|
this._tabScrollAnimationFrame = undefined;
|
|
204
207
|
if (this._adapter.isScrollable()) {
|
|
205
|
-
|
|
206
|
-
|
|
208
|
+
const tabs = this._getTabs();
|
|
209
|
+
if (typeof this._activeTab === 'number' && this._activeTab >= 0 && tabs[this._activeTab]) {
|
|
210
|
+
this._adapter.tryScrollTabIntoView(tabs[this._activeTab]);
|
|
207
211
|
}
|
|
208
212
|
}
|
|
209
213
|
});
|
|
@@ -215,7 +219,7 @@ export class TabBarCore {
|
|
|
215
219
|
value = Boolean(value);
|
|
216
220
|
if (this._disabled !== value) {
|
|
217
221
|
this._disabled = value;
|
|
218
|
-
this.
|
|
222
|
+
this._getTabs().forEach(tab => (tab.disabled = this._disabled));
|
|
219
223
|
this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.DISABLED, this._disabled);
|
|
220
224
|
}
|
|
221
225
|
}
|
|
@@ -225,13 +229,14 @@ export class TabBarCore {
|
|
|
225
229
|
set activeTab(value) {
|
|
226
230
|
if (this._activeTab !== value) {
|
|
227
231
|
this._activeTab = value ?? undefined;
|
|
232
|
+
const tabs = this._getTabs();
|
|
228
233
|
if (typeof this._activeTab === 'number') {
|
|
229
|
-
const newSelectedTab =
|
|
234
|
+
const newSelectedTab = tabs[this._activeTab];
|
|
230
235
|
this._selectTab({ tab: newSelectedTab, emitEvent: false, focusTab: false });
|
|
231
236
|
this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, String(this._activeTab));
|
|
232
237
|
}
|
|
233
238
|
else {
|
|
234
|
-
|
|
239
|
+
tabs.forEach(tab => (tab.selected = false));
|
|
235
240
|
this._adapter.removeHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB);
|
|
236
241
|
}
|
|
237
242
|
}
|
|
@@ -246,7 +251,7 @@ export class TabBarCore {
|
|
|
246
251
|
if (this._isInitialized) {
|
|
247
252
|
this._adapter.setVertical(this._vertical);
|
|
248
253
|
}
|
|
249
|
-
this.
|
|
254
|
+
this._getTabs().forEach(tab => (tab.vertical = this._vertical));
|
|
250
255
|
if (this._scrollButtonsVisible) {
|
|
251
256
|
this._adapter.updateScrollButtonIcons(this._vertical);
|
|
252
257
|
}
|
|
@@ -270,7 +275,7 @@ export class TabBarCore {
|
|
|
270
275
|
value = Boolean(value);
|
|
271
276
|
if (this._stacked !== value) {
|
|
272
277
|
this._stacked = value;
|
|
273
|
-
this.
|
|
278
|
+
this._getTabs().forEach(tab => (tab.stacked = this._stacked));
|
|
274
279
|
this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.STACKED, this._stacked);
|
|
275
280
|
}
|
|
276
281
|
}
|
|
@@ -281,7 +286,7 @@ export class TabBarCore {
|
|
|
281
286
|
value = Boolean(value);
|
|
282
287
|
if (this._secondary !== value) {
|
|
283
288
|
this._secondary = value;
|
|
284
|
-
this.
|
|
289
|
+
this._getTabs().forEach(tab => (tab.secondary = this._secondary));
|
|
285
290
|
this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.SECONDARY, this._secondary);
|
|
286
291
|
}
|
|
287
292
|
}
|
|
@@ -292,7 +297,7 @@ export class TabBarCore {
|
|
|
292
297
|
value = Boolean(value);
|
|
293
298
|
if (this._inverted !== value) {
|
|
294
299
|
this._inverted = value;
|
|
295
|
-
this.
|
|
300
|
+
this._getTabs().forEach(tab => (tab.inverted = this._inverted));
|
|
296
301
|
this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.INVERTED, this._inverted);
|
|
297
302
|
}
|
|
298
303
|
}
|