@tylertech/forge 3.9.0 → 3.9.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 +8 -6
- package/dist/lib.js +7 -7
- package/dist/lib.js.map +3 -3
- package/esm/color-picker/color-picker-core.js +4 -3
- package/esm/color-picker/color-picker-gradient-slider.d.ts +1 -1
- package/esm/color-picker/color-picker-gradient-slider.js +19 -30
- package/esm/list-dropdown/list-dropdown-utils.js +1 -1
- package/esm/menu/menu.js +2 -2
- package/esm/split-view/split-view-panel/split-view-panel.js +1 -1
- package/esm/tooltip/tooltip-adapter.d.ts +7 -0
- package/esm/tooltip/tooltip-adapter.js +10 -0
- package/esm/tooltip/tooltip-constants.d.ts +1 -0
- package/esm/tooltip/tooltip-constants.js +2 -1
- package/esm/tooltip/tooltip-core.js +3 -0
- package/package.json +1 -1
|
@@ -142,7 +142,7 @@ export class ColorPickerCore {
|
|
|
142
142
|
_render() {
|
|
143
143
|
this._setGradientColor();
|
|
144
144
|
this._adapter.setPreviewColor(formatRgba(this._rgba));
|
|
145
|
-
this._adapter.setHexInputValue(
|
|
145
|
+
this._adapter.setHexInputValue(formatHex(this._hex, this._allowOpacity));
|
|
146
146
|
this._adapter.setRgbaInputValue(this._rgba);
|
|
147
147
|
this._adapter.setHsvaInputValue(this._hsva);
|
|
148
148
|
this._adapter.updateA11y(this._hsva.h, Math.round(this._hsva.a * 100));
|
|
@@ -165,11 +165,12 @@ export class ColorPickerCore {
|
|
|
165
165
|
}
|
|
166
166
|
set value(value) {
|
|
167
167
|
if (this._value !== value) {
|
|
168
|
-
this._value = value
|
|
168
|
+
this._value = value ?? DEFAULT_COLOR;
|
|
169
169
|
if (!isValidHex(this._value)) {
|
|
170
170
|
throw new Error('Invalid hex value provided.');
|
|
171
171
|
}
|
|
172
|
-
this.
|
|
172
|
+
this._value = this._value.replace(/^#/, ''); // Normalize hex value by removing leading hash
|
|
173
|
+
this._hex = this._value;
|
|
173
174
|
this._setColorFromHex();
|
|
174
175
|
this._adapter.setHostAttribute(COLOR_PICKER_CONSTANTS.attributes.VALUE, this._value);
|
|
175
176
|
}
|
|
@@ -13,7 +13,7 @@ export declare class ColorPickerGradientSlider {
|
|
|
13
13
|
private _downListener;
|
|
14
14
|
private _moveListener;
|
|
15
15
|
private _upListener;
|
|
16
|
-
constructor(_rootElement: HTMLElement, _changeListener: (
|
|
16
|
+
constructor(_rootElement: HTMLElement, _changeListener: (saturation: number, value: number) => void);
|
|
17
17
|
destroy(): void;
|
|
18
18
|
setValue(saturation: number, value: number): void;
|
|
19
19
|
private _initialize;
|
|
@@ -9,6 +9,8 @@ export class ColorPickerGradientSlider {
|
|
|
9
9
|
constructor(_rootElement, _changeListener) {
|
|
10
10
|
this._rootElement = _rootElement;
|
|
11
11
|
this._changeListener = _changeListener;
|
|
12
|
+
this._xPercent = 0;
|
|
13
|
+
this._yPercent = 0;
|
|
12
14
|
this._keydownListener = evt => this._onKeydown(evt);
|
|
13
15
|
this._downListener = evt => this._onDown(evt);
|
|
14
16
|
this._moveListener = evt => this._onMove(evt);
|
|
@@ -19,12 +21,9 @@ export class ColorPickerGradientSlider {
|
|
|
19
21
|
this._unlisten();
|
|
20
22
|
}
|
|
21
23
|
setValue(saturation, value) {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
this._yPercent = bounds.height - Math.round(bounds.height * (value / 100));
|
|
26
|
-
this._setThumbPosition(this._xPercent, this._yPercent);
|
|
27
|
-
});
|
|
24
|
+
this._xPercent = Math.max(0, Math.min(100, saturation));
|
|
25
|
+
this._yPercent = Math.max(0, Math.min(100, 100 - value));
|
|
26
|
+
this._setThumbPosition(this._xPercent, this._yPercent);
|
|
28
27
|
}
|
|
29
28
|
_initialize() {
|
|
30
29
|
this._thumbElement = this._rootElement.querySelector(COLOR_PICKER_CONSTANTS.selectors.GRADIENT_THUMB);
|
|
@@ -51,42 +50,30 @@ export class ColorPickerGradientSlider {
|
|
|
51
50
|
const isArrowUpKey = evt.key === 'ArrowUp' || evt.keyCode === 38;
|
|
52
51
|
const isArrowRightKey = evt.key === 'ArrowRight' || evt.keyCode === 39;
|
|
53
52
|
const isArrowDownKey = evt.key === 'ArrowDown' || evt.keyCode === 40;
|
|
54
|
-
const
|
|
53
|
+
const stepSize = 1; // 1% steps
|
|
55
54
|
if (isArrowDownKey) {
|
|
56
55
|
evt.preventDefault();
|
|
57
|
-
this._yPercent
|
|
56
|
+
this._yPercent = Math.min(100, this._yPercent + stepSize);
|
|
58
57
|
}
|
|
59
58
|
else if (isArrowUpKey) {
|
|
60
59
|
evt.preventDefault();
|
|
61
|
-
this._yPercent
|
|
60
|
+
this._yPercent = Math.max(0, this._yPercent - stepSize);
|
|
62
61
|
}
|
|
63
62
|
else if (isArrowLeftKey) {
|
|
64
63
|
evt.preventDefault();
|
|
65
|
-
this._xPercent
|
|
64
|
+
this._xPercent = Math.max(0, this._xPercent - stepSize);
|
|
66
65
|
}
|
|
67
66
|
else if (isArrowRightKey) {
|
|
68
67
|
evt.preventDefault();
|
|
69
|
-
this._xPercent
|
|
68
|
+
this._xPercent = Math.min(100, this._xPercent + stepSize);
|
|
70
69
|
}
|
|
71
70
|
else if (isEnterKey) {
|
|
72
71
|
evt.preventDefault();
|
|
73
|
-
// TODO
|
|
72
|
+
// TODO: Select the current color
|
|
74
73
|
}
|
|
75
74
|
else {
|
|
76
75
|
return;
|
|
77
76
|
}
|
|
78
|
-
if (this._xPercent > bounds.width) {
|
|
79
|
-
this._xPercent = bounds.width;
|
|
80
|
-
}
|
|
81
|
-
else if (this._xPercent < 0) {
|
|
82
|
-
this._xPercent = 0;
|
|
83
|
-
}
|
|
84
|
-
if (this._yPercent > bounds.height) {
|
|
85
|
-
this._yPercent = bounds.height;
|
|
86
|
-
}
|
|
87
|
-
else if (this._yPercent < 0) {
|
|
88
|
-
this._yPercent = 0;
|
|
89
|
-
}
|
|
90
77
|
this._setThumbPosition(this._xPercent, this._yPercent);
|
|
91
78
|
this._notify();
|
|
92
79
|
}
|
|
@@ -115,21 +102,23 @@ export class ColorPickerGradientSlider {
|
|
|
115
102
|
const x = isMouseEvent ? evt.clientX : evt.changedTouches[0].clientX;
|
|
116
103
|
const y = isMouseEvent ? evt.clientY : evt.changedTouches[0].clientY;
|
|
117
104
|
const coords = this._calculateSliderPercent(x, y);
|
|
118
|
-
this.
|
|
119
|
-
this.
|
|
120
|
-
this.
|
|
105
|
+
this._xPercent = Math.max(0, Math.min(100, (coords.x / coords.width) * 100));
|
|
106
|
+
this._yPercent = Math.max(0, Math.min(100, (coords.y / coords.height) * 100));
|
|
107
|
+
this._setThumbPosition(this._xPercent, this._yPercent);
|
|
121
108
|
this._notify();
|
|
122
109
|
}
|
|
123
110
|
_calculateSliderPercent(absX, absY) {
|
|
124
111
|
return relativeCoords(absX, absY, this._rootElement);
|
|
125
112
|
}
|
|
126
113
|
_setThumbPosition(xPercent, yPercent) {
|
|
127
|
-
this._thumbElement.style.left = `${xPercent}
|
|
128
|
-
this._thumbElement.style.top = `${yPercent}
|
|
114
|
+
this._thumbElement.style.left = `${xPercent}%`;
|
|
115
|
+
this._thumbElement.style.top = `${yPercent}%`;
|
|
129
116
|
}
|
|
130
117
|
_notify() {
|
|
131
118
|
if (typeof this._changeListener === 'function') {
|
|
132
|
-
this.
|
|
119
|
+
const saturation = this._xPercent;
|
|
120
|
+
const value = 100 - this._yPercent;
|
|
121
|
+
this._changeListener(saturation, value);
|
|
133
122
|
}
|
|
134
123
|
}
|
|
135
124
|
}
|
|
@@ -285,7 +285,7 @@ export function createListItems(config, listElement, options, startIndex = 0, re
|
|
|
285
285
|
if (!option.disabled && typeof config.cascadingElementFactory === 'function' && Array.isArray(option.options) && option.options.length) {
|
|
286
286
|
// Create the trailing indicator icon to show that a child menu exists for this option.
|
|
287
287
|
const optionIconElement = document.createElement('forge-icon');
|
|
288
|
-
optionIconElement.name = '
|
|
288
|
+
optionIconElement.name = 'arrow_right_alt';
|
|
289
289
|
optionIconElement.slot = 'trailing';
|
|
290
290
|
listItemElement.appendChild(optionIconElement);
|
|
291
291
|
const nonDividerOptions = flatOptions.filter(o => !o.divider);
|
package/esm/menu/menu.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { __decorate } from "tslib";
|
|
7
7
|
import { attachShadowTemplate, coerceBoolean, customElement, ensureChild, coreProperty, isDefined } from '@tylertech/forge-core';
|
|
8
|
-
import {
|
|
8
|
+
import { tylIconArrowRightAlt } from '@tylertech/tyler-icons';
|
|
9
9
|
import { IconRegistry } from '../icon';
|
|
10
10
|
import { ListComponent } from '../list';
|
|
11
11
|
import { ListDropdownAware } from '../list-dropdown/list-dropdown-aware';
|
|
@@ -43,7 +43,7 @@ let MenuComponent = class MenuComponent extends ListDropdownAware {
|
|
|
43
43
|
}
|
|
44
44
|
constructor() {
|
|
45
45
|
super();
|
|
46
|
-
IconRegistry.define(
|
|
46
|
+
IconRegistry.define(tylIconArrowRightAlt);
|
|
47
47
|
this._core = new MenuCore(new MenuAdapter(this));
|
|
48
48
|
attachShadowTemplate(this, template, styles);
|
|
49
49
|
}
|
|
@@ -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:ujzdjfx;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujzdjfx{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:ujzdjg1;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujzdjg1{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:ujzdjgi;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 ujzdjgi{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:ujzdjgn;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 ujzdjgn{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:ujzdjhj;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujzdjhj{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:ujzdjhm;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujzdjhm{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:ujzdjhx;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 ujzdjhx{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:ujzdjir;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 ujzdjir{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
|
*
|
|
@@ -8,6 +8,7 @@ import { ITooltipComponent } from './tooltip';
|
|
|
8
8
|
export interface ITooltipAdapter extends IBaseAdapter<ITooltipComponent> {
|
|
9
9
|
readonly hostElement: ITooltipComponent;
|
|
10
10
|
readonly anchorElement: HTMLElement | null;
|
|
11
|
+
readonly hasContent: boolean;
|
|
11
12
|
syncAria(): void;
|
|
12
13
|
detachAria(): void;
|
|
13
14
|
setAnchorElement(element: HTMLElement | null): void;
|
|
@@ -22,10 +23,16 @@ export interface ITooltipAdapter extends IBaseAdapter<ITooltipComponent> {
|
|
|
22
23
|
export declare class TooltipAdapter extends BaseAdapter<ITooltipComponent> implements ITooltipAdapter {
|
|
23
24
|
private _contentElement;
|
|
24
25
|
private _arrowElement;
|
|
26
|
+
private _defaultSlotElement;
|
|
25
27
|
private _anchorElement;
|
|
26
28
|
private _overlayElement;
|
|
27
29
|
constructor(component: ITooltipComponent);
|
|
28
30
|
get anchorElement(): HTMLElement | null;
|
|
31
|
+
/**
|
|
32
|
+
* Tooltips are considered to have content if the default slot has assigned nodes that
|
|
33
|
+
* are either elements, or text nodes with non-whitespace content.
|
|
34
|
+
*/
|
|
35
|
+
get hasContent(): boolean;
|
|
29
36
|
syncAria(): void;
|
|
30
37
|
detachAria(): void;
|
|
31
38
|
setAnchorElement(element: HTMLElement | null): void;
|
|
@@ -16,10 +16,20 @@ export class TooltipAdapter extends BaseAdapter {
|
|
|
16
16
|
this._overlayElement = null;
|
|
17
17
|
this._contentElement = getShadowElement(this._component, TOOLTIP_CONSTANTS.selectors.CONTENT);
|
|
18
18
|
this._arrowElement = getShadowElement(this._component, TOOLTIP_CONSTANTS.selectors.ARROW);
|
|
19
|
+
this._defaultSlotElement = getShadowElement(this._component, TOOLTIP_CONSTANTS.selectors.DEFAULT_SLOT);
|
|
19
20
|
}
|
|
20
21
|
get anchorElement() {
|
|
21
22
|
return this._anchorElement;
|
|
22
23
|
}
|
|
24
|
+
/**
|
|
25
|
+
* Tooltips are considered to have content if the default slot has assigned nodes that
|
|
26
|
+
* are either elements, or text nodes with non-whitespace content.
|
|
27
|
+
*/
|
|
28
|
+
get hasContent() {
|
|
29
|
+
return this._defaultSlotElement
|
|
30
|
+
.assignedNodes({ flatten: true })
|
|
31
|
+
.some(node => node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
|
|
32
|
+
}
|
|
23
33
|
syncAria() {
|
|
24
34
|
const role = this._component.type === 'description' ? 'tooltip' : null;
|
|
25
35
|
this._component[setDefaultAria]({ role });
|
|
@@ -96,6 +96,9 @@ export class TooltipCore extends WithLongpressListener(Object) {
|
|
|
96
96
|
triggerTypes.forEach(triggerType => triggerRemovers[triggerType]());
|
|
97
97
|
}
|
|
98
98
|
_show() {
|
|
99
|
+
if (!this._adapter.hasContent) {
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
99
102
|
this._open = true;
|
|
100
103
|
this._adapter.show();
|
|
101
104
|
DismissibleStack.instance.add(this._adapter.hostElement);
|