@tylertech/forge 3.8.1 → 3.8.2-dev.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.
- package/README.md +23 -0
- package/custom-elements.json +8218 -8218
- package/dist/lib.js +6 -6
- package/dist/lib.js.map +3 -3
- package/dist/vscode.css-custom-data.json +943 -943
- package/dist/vscode.html-custom-data.json +571 -571
- package/esm/date-picker/base/base-date-picker-adapter.js +3 -0
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/esm/tabs/tab-bar/tab-bar-core.d.ts +0 -1
- package/esm/tabs/tab-bar/tab-bar-core.js +30 -27
- package/package.json +2 -2
|
@@ -173,6 +173,9 @@ export class BaseDatePickerAdapter extends BaseAdapter {
|
|
|
173
173
|
return;
|
|
174
174
|
}
|
|
175
175
|
const iconButtonElement = this._createToggleElement();
|
|
176
|
+
// if (textField.density === 'extra-small') {
|
|
177
|
+
// iconButtonElement.density = 'small';
|
|
178
|
+
// }
|
|
176
179
|
textField.appendChild(iconButtonElement);
|
|
177
180
|
this._toggleElement = iconButtonElement;
|
|
178
181
|
}
|
|
@@ -13,7 +13,7 @@ import { SplitViewPanelCore } from './split-view-panel-core';
|
|
|
13
13
|
import { SplitViewPanelAdapter } from './split-view-panel-adapter';
|
|
14
14
|
import { IconComponent, IconRegistry } from '../../icon';
|
|
15
15
|
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>';
|
|
16
|
-
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:
|
|
16
|
+
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:uez234f;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez234f{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:uez234v;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez234v{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:uez235n;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 uez235n{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:uez236i;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 uez236i{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:uez236l;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez236l{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:uez237k;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez237k{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:uez237p;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 uez237p{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:uez2389;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 uez2389{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}';
|
|
17
17
|
import { StateLayerComponent } from '../../state-layer';
|
|
18
18
|
import { FocusIndicatorComponent } from '../../focus-indicator';
|
|
19
19
|
/**
|
|
@@ -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);
|
|
@@ -38,7 +37,7 @@ export class TabBarCore {
|
|
|
38
37
|
this._adapter.initializeScrollObserver(this._scrollListener);
|
|
39
38
|
this._updateScrollState();
|
|
40
39
|
}
|
|
41
|
-
this.
|
|
40
|
+
this._syncTabState();
|
|
42
41
|
this._isInitialized = true;
|
|
43
42
|
}
|
|
44
43
|
destroy() {
|
|
@@ -47,7 +46,6 @@ export class TabBarCore {
|
|
|
47
46
|
this._isInitialized = false;
|
|
48
47
|
}
|
|
49
48
|
async _onTabsChanged() {
|
|
50
|
-
this._tabs = this._adapter.getTabs();
|
|
51
49
|
this._syncTabState();
|
|
52
50
|
if (this._scrollButtons) {
|
|
53
51
|
this._detectScrollableStatus();
|
|
@@ -65,24 +63,25 @@ export class TabBarCore {
|
|
|
65
63
|
}
|
|
66
64
|
evt.preventDefault();
|
|
67
65
|
let index = -1;
|
|
66
|
+
const tabs = this._adapter.getTabs();
|
|
68
67
|
if (evt.key === 'Home') {
|
|
69
68
|
// Locate the first non-disabled tab
|
|
70
|
-
index =
|
|
69
|
+
index = tabs.findIndex(tab => !tab.disabled);
|
|
71
70
|
}
|
|
72
71
|
else if (evt.key === 'End') {
|
|
73
72
|
// Locate the last non-disabled tab
|
|
74
|
-
index =
|
|
73
|
+
index = tabs.reduceRight((acc, tab, i) => (!tab.disabled && acc === -1 ? i : acc), -1);
|
|
75
74
|
}
|
|
76
75
|
else {
|
|
77
76
|
// Locate the next or previous tab based on the key that was pressed
|
|
78
|
-
const currentIndex =
|
|
77
|
+
const currentIndex = tabs.findIndex(tab => tab.matches(':focus'));
|
|
79
78
|
const isPrevKey = evt.key === 'ArrowLeft' || evt.key === 'ArrowUp';
|
|
80
79
|
const calcIndex = (startIndex) => {
|
|
81
80
|
index = startIndex + (isPrevKey ? -1 : 1);
|
|
82
|
-
index = index < 0 ?
|
|
81
|
+
index = index < 0 ? tabs.length - 1 : index % tabs.length;
|
|
83
82
|
// Try to recurse until we find a non-disabled tab (unless all tabs are disabled already)
|
|
84
|
-
const isAllTabsDisabled =
|
|
85
|
-
if (!isAllTabsDisabled &&
|
|
83
|
+
const isAllTabsDisabled = tabs.every(tab => tab.disabled);
|
|
84
|
+
if (!isAllTabsDisabled && tabs[index]?.disabled) {
|
|
86
85
|
calcIndex(index);
|
|
87
86
|
}
|
|
88
87
|
};
|
|
@@ -92,23 +91,24 @@ export class TabBarCore {
|
|
|
92
91
|
return;
|
|
93
92
|
}
|
|
94
93
|
if (this._autoActivate) {
|
|
95
|
-
this._selectTab({ tab:
|
|
94
|
+
this._selectTab({ tab: tabs[index], focusTab: true });
|
|
96
95
|
}
|
|
97
96
|
else {
|
|
98
|
-
|
|
99
|
-
await this._adapter.tryScrollTabIntoView(
|
|
97
|
+
tabs[index].focus({ preventScroll: true, focusVisible: true });
|
|
98
|
+
await this._adapter.tryScrollTabIntoView(tabs[index]);
|
|
100
99
|
}
|
|
101
100
|
}
|
|
102
101
|
async _selectTab({ tab, emitEvent = true, focusTab = false }) {
|
|
103
102
|
if (!tab || tab.disabled) {
|
|
104
103
|
return;
|
|
105
104
|
}
|
|
106
|
-
const
|
|
105
|
+
const tabs = this._adapter.getTabs();
|
|
106
|
+
const currentSelectedTab = tabs.find(t => t.selected);
|
|
107
107
|
if (currentSelectedTab === tab) {
|
|
108
108
|
return;
|
|
109
109
|
}
|
|
110
110
|
if (emitEvent) {
|
|
111
|
-
const index =
|
|
111
|
+
const index = tabs.indexOf(tab);
|
|
112
112
|
const event = new CustomEvent(TAB_BAR_CONSTANTS.events.CHANGE, {
|
|
113
113
|
detail: { index },
|
|
114
114
|
bubbles: true,
|
|
@@ -132,7 +132,7 @@ export class TabBarCore {
|
|
|
132
132
|
if (currentSelectedTab) {
|
|
133
133
|
currentSelectedTab.selected = false;
|
|
134
134
|
}
|
|
135
|
-
this._activeTab =
|
|
135
|
+
this._activeTab = tabs.indexOf(tab);
|
|
136
136
|
}
|
|
137
137
|
/**
|
|
138
138
|
* Ensures that all tabs have the correct state based on the tab bar state.
|
|
@@ -140,13 +140,14 @@ export class TabBarCore {
|
|
|
140
140
|
* This is called whenever a child tab is added to the DOM.
|
|
141
141
|
*/
|
|
142
142
|
_syncTabState() {
|
|
143
|
-
this.
|
|
143
|
+
const tabs = this._adapter.getTabs();
|
|
144
|
+
tabs.forEach((tab, index) => {
|
|
144
145
|
tab.selected = index === this._activeTab;
|
|
145
|
-
if (this._disabled)
|
|
146
|
+
if (this._disabled) {
|
|
146
147
|
tab.disabled = this._disabled;
|
|
148
|
+
}
|
|
147
149
|
tab.vertical = this._vertical;
|
|
148
150
|
tab.stacked = this._stacked;
|
|
149
|
-
tab.secondary = this._secondary;
|
|
150
151
|
tab.inverted = this._inverted;
|
|
151
152
|
});
|
|
152
153
|
}
|
|
@@ -199,10 +200,11 @@ export class TabBarCore {
|
|
|
199
200
|
}
|
|
200
201
|
// We batch the tab scrolling into a single animation frame to unnecessarily scrolling for each tab
|
|
201
202
|
this._tabScrollAnimationFrame = window.requestAnimationFrame(() => {
|
|
203
|
+
const tabs = this._adapter.getTabs();
|
|
202
204
|
this._tabScrollAnimationFrame = undefined;
|
|
203
205
|
if (this._adapter.isScrollable()) {
|
|
204
|
-
if (typeof this._activeTab === 'number' && this._activeTab >= 0 &&
|
|
205
|
-
this._adapter.tryScrollTabIntoView(
|
|
206
|
+
if (typeof this._activeTab === 'number' && this._activeTab >= 0 && tabs[this._activeTab]) {
|
|
207
|
+
this._adapter.tryScrollTabIntoView(tabs[this._activeTab]);
|
|
206
208
|
}
|
|
207
209
|
}
|
|
208
210
|
});
|
|
@@ -214,7 +216,7 @@ export class TabBarCore {
|
|
|
214
216
|
value = Boolean(value);
|
|
215
217
|
if (this._disabled !== value) {
|
|
216
218
|
this._disabled = value;
|
|
217
|
-
this.
|
|
219
|
+
this._adapter.getTabs().forEach(tab => (tab.disabled = this._disabled));
|
|
218
220
|
this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.DISABLED, this._disabled);
|
|
219
221
|
}
|
|
220
222
|
}
|
|
@@ -224,13 +226,14 @@ export class TabBarCore {
|
|
|
224
226
|
set activeTab(value) {
|
|
225
227
|
if (this._activeTab !== value) {
|
|
226
228
|
this._activeTab = value ?? undefined;
|
|
229
|
+
const tabs = this._adapter.getTabs();
|
|
227
230
|
if (typeof this._activeTab === 'number') {
|
|
228
|
-
const newSelectedTab =
|
|
231
|
+
const newSelectedTab = tabs[this._activeTab];
|
|
229
232
|
this._selectTab({ tab: newSelectedTab, emitEvent: false, focusTab: false });
|
|
230
233
|
this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, String(this._activeTab));
|
|
231
234
|
}
|
|
232
235
|
else {
|
|
233
|
-
|
|
236
|
+
tabs.forEach(tab => (tab.selected = false));
|
|
234
237
|
this._adapter.removeHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB);
|
|
235
238
|
}
|
|
236
239
|
}
|
|
@@ -245,7 +248,7 @@ export class TabBarCore {
|
|
|
245
248
|
if (this._isInitialized) {
|
|
246
249
|
this._adapter.setVertical(this._vertical);
|
|
247
250
|
}
|
|
248
|
-
this.
|
|
251
|
+
this._adapter.getTabs().forEach(tab => (tab.vertical = this._vertical));
|
|
249
252
|
if (this._scrollButtonsVisible) {
|
|
250
253
|
this._adapter.updateScrollButtonIcons(this._vertical);
|
|
251
254
|
}
|
|
@@ -269,7 +272,7 @@ export class TabBarCore {
|
|
|
269
272
|
value = Boolean(value);
|
|
270
273
|
if (this._stacked !== value) {
|
|
271
274
|
this._stacked = value;
|
|
272
|
-
this.
|
|
275
|
+
this._adapter.getTabs().forEach(tab => (tab.stacked = this._stacked));
|
|
273
276
|
this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.STACKED, this._stacked);
|
|
274
277
|
}
|
|
275
278
|
}
|
|
@@ -280,7 +283,7 @@ export class TabBarCore {
|
|
|
280
283
|
value = Boolean(value);
|
|
281
284
|
if (this._secondary !== value) {
|
|
282
285
|
this._secondary = value;
|
|
283
|
-
this.
|
|
286
|
+
this._adapter.getTabs().forEach(tab => (tab.secondary = this._secondary));
|
|
284
287
|
this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.SECONDARY, this._secondary);
|
|
285
288
|
}
|
|
286
289
|
}
|
|
@@ -291,7 +294,7 @@ export class TabBarCore {
|
|
|
291
294
|
value = Boolean(value);
|
|
292
295
|
if (this._inverted !== value) {
|
|
293
296
|
this._inverted = value;
|
|
294
|
-
this.
|
|
297
|
+
this._adapter.getTabs().forEach(tab => (tab.inverted = this._inverted));
|
|
295
298
|
this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.INVERTED, this._inverted);
|
|
296
299
|
}
|
|
297
300
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tylertech/forge",
|
|
3
3
|
"description": "Tyler Forge™ Web Components library",
|
|
4
|
-
"version": "3.8.
|
|
4
|
+
"version": "3.8.2-dev.0",
|
|
5
5
|
"author": "Tyler Technologies, Inc.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"repository": {
|
|
@@ -21,4 +21,4 @@
|
|
|
21
21
|
"tslib": "^2.8.1"
|
|
22
22
|
},
|
|
23
23
|
"customElements": "custom-elements.json"
|
|
24
|
-
}
|
|
24
|
+
}
|