@tylertech/forge 3.8.0 → 3.8.1
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/custom-elements.json +33 -3
- package/dist/lib.js +9 -9
- package/dist/lib.js.map +3 -3
- package/dist/vscode.html-custom-data.json +1 -1
- package/esm/core/utils/event-utils.d.ts +7 -0
- package/esm/core/utils/event-utils.js +11 -0
- package/esm/dialog/dialog-constants.d.ts +1 -1
- package/esm/expansion-panel/expansion-panel-core.js +1 -1
- package/esm/list/list-item/list-item-core.js +4 -3
- package/esm/paginator/paginator.d.ts +8 -0
- package/esm/paginator/paginator.js +8 -0
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/package.json +1 -1
|
@@ -1548,7 +1548,7 @@
|
|
|
1548
1548
|
},
|
|
1549
1549
|
{
|
|
1550
1550
|
"name": "forge-paginator",
|
|
1551
|
-
"description": "\n---\n\n\n### **Events:**\n - **forge-paginator-change** - Dispatched when the paginator state changes.\n\n### **Methods:**\n - **focus(options: _FocusOptions_): _void_** - Sets focus to the first focusable element within the paginator.",
|
|
1551
|
+
"description": "\n---\n\n\n### **Events:**\n - **forge-paginator-change** - Dispatched when the paginator state changes.\n\n### **Methods:**\n - **focus(options: _FocusOptions_): _void_** - Sets focus to the first focusable element within the paginator.\n\n### **Slots:**\n - **label** - Overrides the label text when in the default variant.\n- **range-label** - Overrides the default range label with a custom label when in the default variant.\n- **alternative-range-label** - Overrides the default range label with a custom label when in the `alternative` variant.\n- **first-page-tooltip** - Overrides the default tooltip for the first page button.\n- **last-page-tooltip** - Overrides the default tooltip for the last page button.\n- **previous-page-tooltip** - Overrides the default tooltip for the previous page button.\n- **next-page-tooltip** - Overrides the default tooltip for the next page button.",
|
|
1552
1552
|
"attributes": [
|
|
1553
1553
|
{
|
|
1554
1554
|
"name": "page-index",
|
|
@@ -11,3 +11,10 @@
|
|
|
11
11
|
*/
|
|
12
12
|
export declare function proxyShadowScrollEvent(shadowEl: Node, proxyEl: Node): () => void;
|
|
13
13
|
export declare function eventIncludesArrowKey(evt: KeyboardEvent): boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Returns the composed path of an event stopping at the given element.
|
|
16
|
+
* @param fromElement The element to start the composed path from.
|
|
17
|
+
* @param evt The event to get the composed path from.
|
|
18
|
+
* @returns An array of elements in the composed path starting from the given element.
|
|
19
|
+
*/
|
|
20
|
+
export declare function composedPathFrom(fromElement: HTMLElement, evt: Event): HTMLElement[];
|
|
@@ -17,3 +17,14 @@ export function proxyShadowScrollEvent(shadowEl, proxyEl) {
|
|
|
17
17
|
export function eventIncludesArrowKey(evt) {
|
|
18
18
|
return evt.key === 'ArrowLeft' || evt.key === 'ArrowRight' || evt.key === 'ArrowUp' || evt.key === 'ArrowDown';
|
|
19
19
|
}
|
|
20
|
+
/**
|
|
21
|
+
* Returns the composed path of an event stopping at the given element.
|
|
22
|
+
* @param fromElement The element to start the composed path from.
|
|
23
|
+
* @param evt The event to get the composed path from.
|
|
24
|
+
* @returns An array of elements in the composed path starting from the given element.
|
|
25
|
+
*/
|
|
26
|
+
export function composedPathFrom(fromElement, evt) {
|
|
27
|
+
const composedElements = evt.composedPath().filter((el) => el.nodeType === Node.ELEMENT_NODE);
|
|
28
|
+
const startIndex = composedElements.indexOf(fromElement);
|
|
29
|
+
return startIndex >= 0 ? composedElements.slice(0, startIndex) : [];
|
|
30
|
+
}
|
|
@@ -92,7 +92,7 @@ export interface IDialogBeforeCloseEventData {
|
|
|
92
92
|
}
|
|
93
93
|
export type DialogMode = 'modal' | 'inline-modal' | 'nonmodal';
|
|
94
94
|
export type DialogType = 'dialog' | 'alertdialog';
|
|
95
|
-
export type DialogAnimationType = 'none' | 'zoom' | 'fade' | 'slide'
|
|
95
|
+
export type DialogAnimationType = 'none' | 'zoom' | 'fade' | 'slide';
|
|
96
96
|
export type DialogPositionStrategy = 'viewport' | 'container';
|
|
97
97
|
export type DialogPlacement = 'custom' | 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
|
98
98
|
export type DialogSizeStrategy = 'content' | 'container-inline' | 'container-block';
|
|
@@ -140,8 +140,8 @@ export class ExpansionPanelCore {
|
|
|
140
140
|
if (this._trigger !== value) {
|
|
141
141
|
this._clearTrigger();
|
|
142
142
|
this._trigger = value;
|
|
143
|
-
this._adapter.setTriggerElementById(this._trigger);
|
|
144
143
|
if (this._adapter.isConnected) {
|
|
144
|
+
this._adapter.setTriggerElementById(this._trigger);
|
|
145
145
|
this._syncTrigger();
|
|
146
146
|
}
|
|
147
147
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
+
import { composedPathFrom } from '../../core/utils/event-utils';
|
|
6
7
|
import { LIST_ITEM_CONSTANTS } from './list-item-constants';
|
|
7
8
|
export class ListItemCore {
|
|
8
9
|
constructor(_adapter) {
|
|
@@ -34,14 +35,14 @@ export class ListItemCore {
|
|
|
34
35
|
this._adapter.destroy();
|
|
35
36
|
}
|
|
36
37
|
_onMousedown(evt) {
|
|
37
|
-
const composedElements =
|
|
38
|
+
const composedElements = composedPathFrom(this._adapter.hostElement, evt);
|
|
38
39
|
const fromInteractiveElement = composedElements.some(el => el === this._adapter.interactiveElement);
|
|
39
40
|
if (this._focusPropagation === 'off' || !fromInteractiveElement) {
|
|
40
41
|
evt.preventDefault();
|
|
41
42
|
}
|
|
42
43
|
}
|
|
43
44
|
_onKeydown(evt) {
|
|
44
|
-
const composedElements =
|
|
45
|
+
const composedElements = composedPathFrom(this._adapter.hostElement, evt);
|
|
45
46
|
const isFromStartEndSlot = composedElements.some((el) => el.matches(LIST_ITEM_CONSTANTS.selectors.SLOTTED_START_END));
|
|
46
47
|
if (evt.key === 'Enter' || evt.key === ' ') {
|
|
47
48
|
evt.stopPropagation();
|
|
@@ -61,7 +62,7 @@ export class ListItemCore {
|
|
|
61
62
|
}
|
|
62
63
|
}
|
|
63
64
|
_onClick(evt) {
|
|
64
|
-
const composedElements =
|
|
65
|
+
const composedElements = composedPathFrom(this._adapter.hostElement, evt);
|
|
65
66
|
// Ignore clicks from elements that should not trigger selection
|
|
66
67
|
const fromIgnoredElement = composedElements.some(el => el.matches(LIST_ITEM_CONSTANTS.selectors.IGNORE));
|
|
67
68
|
if (fromIgnoredElement) {
|
|
@@ -29,6 +29,14 @@ declare global {
|
|
|
29
29
|
/**
|
|
30
30
|
* @tag forge-paginator
|
|
31
31
|
*
|
|
32
|
+
* @slot label - Overrides the label text when in the default variant.
|
|
33
|
+
* @slot range-label - Overrides the default range label with a custom label when in the default variant.
|
|
34
|
+
* @slot alternative-range-label - Overrides the default range label with a custom label when in the `alternative` variant.
|
|
35
|
+
* @slot first-page-tooltip - Overrides the default tooltip for the first page button.
|
|
36
|
+
* @slot last-page-tooltip - Overrides the default tooltip for the last page button.
|
|
37
|
+
* @slot previous-page-tooltip - Overrides the default tooltip for the previous page button.
|
|
38
|
+
* @slot next-page-tooltip - Overrides the default tooltip for the next page button.
|
|
39
|
+
*
|
|
32
40
|
* @event {CustomEvent<IPaginatorChangeEventData>} forge-paginator-change - Dispatched when the paginator state changes.
|
|
33
41
|
*/
|
|
34
42
|
export declare class PaginatorComponent extends BaseComponent implements IPaginatorComponent {
|
|
@@ -19,6 +19,14 @@ const styles = ':host{display:block}:host([hidden]){display:none}.forge-paginato
|
|
|
19
19
|
/**
|
|
20
20
|
* @tag forge-paginator
|
|
21
21
|
*
|
|
22
|
+
* @slot label - Overrides the label text when in the default variant.
|
|
23
|
+
* @slot range-label - Overrides the default range label with a custom label when in the default variant.
|
|
24
|
+
* @slot alternative-range-label - Overrides the default range label with a custom label when in the `alternative` variant.
|
|
25
|
+
* @slot first-page-tooltip - Overrides the default tooltip for the first page button.
|
|
26
|
+
* @slot last-page-tooltip - Overrides the default tooltip for the last page button.
|
|
27
|
+
* @slot previous-page-tooltip - Overrides the default tooltip for the previous page button.
|
|
28
|
+
* @slot next-page-tooltip - Overrides the default tooltip for the next page button.
|
|
29
|
+
*
|
|
22
30
|
* @event {CustomEvent<IPaginatorChangeEventData>} forge-paginator-change - Dispatched when the paginator state changes.
|
|
23
31
|
*/
|
|
24
32
|
let PaginatorComponent = class PaginatorComponent extends BaseComponent {
|
|
@@ -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:ujev5to;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujev5to{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:ujev5ul;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujev5ul{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:ujev5vf;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 ujev5vf{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:ujev5w9;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 ujev5w9{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:ujev5ww;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujev5ww{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:ujev5xv;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujev5xv{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:ujev5yq;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 ujev5yq{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:ujev5z5;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 ujev5z5{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
|
/**
|