@tylertech/forge 3.6.0 → 3.6.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/dist/lib.js +6 -6
- package/dist/lib.js.map +3 -3
- package/esm/autocomplete/autocomplete-adapter.js +2 -2
- package/esm/dialog/dialog-adapter.d.ts +1 -1
- package/esm/dialog/dialog-adapter.js +21 -7
- package/esm/dialog/dialog-constants.d.ts +1 -1
- package/esm/dialog/dialog-constants.js +1 -1
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright Tyler Technologies, Inc.
|
|
4
4
|
* License: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { getActiveElement, toggleAttribute } from '@tylertech/forge-core';
|
|
6
|
+
import { deepQuerySelectorAll, getActiveElement, toggleAttribute } from '@tylertech/forge-core';
|
|
7
7
|
import { CHIP_FIELD_CONSTANTS } from '../chip-field';
|
|
8
8
|
import { BaseAdapter } from '../core/base/base-adapter';
|
|
9
9
|
import { setAriaControls, tryCreateAriaControlsPlaceholder } from '../core/utils/utils';
|
|
@@ -24,7 +24,7 @@ export class AutocompleteAdapter extends BaseAdapter {
|
|
|
24
24
|
return this._inputElement;
|
|
25
25
|
}
|
|
26
26
|
setInputElement() {
|
|
27
|
-
const inputElements = this._component
|
|
27
|
+
const inputElements = deepQuerySelectorAll(this._component, AUTOCOMPLETE_CONSTANTS.selectors.INPUT, false);
|
|
28
28
|
if (inputElements.length) {
|
|
29
29
|
this._inputElement = inputElements[0];
|
|
30
30
|
}
|
|
@@ -65,5 +65,5 @@ export declare class DialogAdapter extends BaseAdapter<IDialogComponent> impleme
|
|
|
65
65
|
removeFullscreenListener(listener: (value: boolean) => void): void;
|
|
66
66
|
setAccessibleLabel(label: string): void;
|
|
67
67
|
setAccessibleDescription(description: string): void;
|
|
68
|
-
private
|
|
68
|
+
private _createOrUpdateVisuallyHiddenElement;
|
|
69
69
|
}
|
|
@@ -150,31 +150,45 @@ export class DialogAdapter extends BaseAdapter {
|
|
|
150
150
|
}
|
|
151
151
|
setAccessibleLabel(label) {
|
|
152
152
|
if (label?.trim()) {
|
|
153
|
-
this._accessibleLabelElement = this.
|
|
153
|
+
this._accessibleLabelElement = this._createOrUpdateVisuallyHiddenElement(DIALOG_CONSTANTS.attributes.ARIA_LABEL_ID, label);
|
|
154
|
+
if (this._accessibleLabelElement.isConnected) {
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
154
157
|
this._dialogElement.appendChild(this._accessibleLabelElement);
|
|
155
158
|
this._dialogElement.setAttribute('aria-labelledby', this._accessibleLabelElement.id);
|
|
156
159
|
}
|
|
157
|
-
else {
|
|
160
|
+
else if (this._accessibleLabelElement?.isConnected) {
|
|
158
161
|
this._dialogElement.removeAttribute('aria-labelledby');
|
|
159
162
|
this._accessibleLabelElement?.remove();
|
|
163
|
+
this._accessibleLabelElement = undefined;
|
|
160
164
|
}
|
|
161
165
|
}
|
|
162
166
|
setAccessibleDescription(description) {
|
|
163
167
|
if (description?.trim()) {
|
|
164
|
-
this._accessibleDescriptionElement = this.
|
|
168
|
+
this._accessibleDescriptionElement = this._createOrUpdateVisuallyHiddenElement(DIALOG_CONSTANTS.attributes.ARIA_DESCRIPTION_ID, description);
|
|
169
|
+
if (this._accessibleDescriptionElement.isConnected) {
|
|
170
|
+
return;
|
|
171
|
+
}
|
|
165
172
|
this._dialogElement.appendChild(this._accessibleDescriptionElement);
|
|
166
173
|
this._dialogElement.setAttribute('aria-describedby', this._accessibleDescriptionElement.id);
|
|
167
174
|
}
|
|
168
|
-
else {
|
|
175
|
+
else if (this._accessibleDescriptionElement?.isConnected) {
|
|
169
176
|
this._dialogElement.removeAttribute('aria-describedby');
|
|
170
177
|
this._accessibleDescriptionElement?.remove();
|
|
178
|
+
this._accessibleDescriptionElement = undefined;
|
|
171
179
|
}
|
|
172
180
|
}
|
|
173
|
-
|
|
174
|
-
const
|
|
181
|
+
_createOrUpdateVisuallyHiddenElement(id, text) {
|
|
182
|
+
const content = text.trim();
|
|
183
|
+
let element = this._dialogElement.querySelector(`#${id}`);
|
|
184
|
+
if (element) {
|
|
185
|
+
element.textContent = content;
|
|
186
|
+
return element;
|
|
187
|
+
}
|
|
188
|
+
element = document.createElement('div');
|
|
175
189
|
element.classList.add('visually-hidden');
|
|
176
190
|
element.id = id;
|
|
177
|
-
element.textContent =
|
|
191
|
+
element.textContent = content;
|
|
178
192
|
return element;
|
|
179
193
|
}
|
|
180
194
|
}
|
|
@@ -27,7 +27,7 @@ const observedAttributes = {
|
|
|
27
27
|
const attributes = {
|
|
28
28
|
...observedAttributes,
|
|
29
29
|
ARIA_LABEL_ID: 'forge-dialog-label',
|
|
30
|
-
|
|
30
|
+
ARIA_DESCRIPTION_ID: 'forge-dialog-description'
|
|
31
31
|
};
|
|
32
32
|
const classes = {
|
|
33
33
|
MOVED: 'moved',
|
|
@@ -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:uku04wx;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uku04wx{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:uku04xl;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uku04xl{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:uku04yg;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 uku04yg{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:uku04yp;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 uku04yp{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:uku04zn;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uku04zn{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:uku0502;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uku0502{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:uku050h;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 uku050h{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:uku050u;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 uku050u{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
|
/**
|