@vertexvis/ui 0.1.2-canary.1 → 0.1.2-canary.2
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/cjs/index.cjs.js +3 -3
- package/dist/cjs/{menu-d1ecf43b.js → menu-25f83cd7.js} +13 -3
- package/dist/cjs/{resizable-e4248256.js → resizable-c0a69532.js} +22 -4
- package/dist/cjs/vertex-menu.cjs.entry.js +1 -1
- package/dist/cjs/vertex-resizable.cjs.entry.js +2 -1
- package/dist/collection/components/menu/menu.js +13 -3
- package/dist/collection/components/resizable/resizable.js +23 -5
- package/dist/components/components.esm.js +1 -1
- package/dist/components/index.esm.js +1 -1
- package/dist/components/menu.js +13 -3
- package/dist/components/p-1b85c1d1.entry.js +1 -0
- package/dist/components/p-95358d00.entry.js +1 -0
- package/dist/components/p-c9a967d9.js +1 -0
- package/dist/components/p-ee5c8bd3.js +1 -0
- package/dist/components/vertex-resizable.js +23 -5
- package/dist/esm/index.js +3 -3
- package/dist/esm/{menu-daa7f9c9.js → menu-b8ff7d6a.js} +13 -3
- package/dist/esm/{resizable-a147709b.js → resizable-833336bf.js} +23 -5
- package/dist/esm/vertex-menu.entry.js +1 -1
- package/dist/esm/vertex-resizable.entry.js +2 -1
- package/dist/types/components/menu/menu.d.ts +2 -0
- package/dist/types/components/resizable/resizable.d.ts +1 -0
- package/package.json +2 -2
- package/dist/components/p-0517ca62.entry.js +0 -1
- package/dist/components/p-6ec189d2.js +0 -1
- package/dist/components/p-7b75e004.js +0 -1
- package/dist/components/p-ea4a2f74.entry.js +0 -1
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -25,13 +25,13 @@ const helpTooltip = require('./help-tooltip-f72eccc7.js');
|
|
|
25
25
|
const icon = require('./icon-dce835e0.js');
|
|
26
26
|
const iconButton = require('./icon-button-8c4a9cd6.js');
|
|
27
27
|
const logoLoading = require('./logo-loading-4d49fedf.js');
|
|
28
|
-
const menu = require('./menu-
|
|
28
|
+
const menu = require('./menu-25f83cd7.js');
|
|
29
29
|
const menuDivider = require('./menu-divider-5bdebe5d.js');
|
|
30
30
|
const menuItem = require('./menu-item-d213fd4d.js');
|
|
31
31
|
const popover = require('./popover-942209b8.js');
|
|
32
32
|
const radio = require('./radio-bff991d2.js');
|
|
33
33
|
const radioGroup = require('./radio-group-d628f631.js');
|
|
34
|
-
const resizable = require('./resizable-
|
|
34
|
+
const resizable = require('./resizable-c0a69532.js');
|
|
35
35
|
const resultList = require('./result-list-241ffe8d.js');
|
|
36
36
|
const searchBar = require('./search-bar-2e7ee35a.js');
|
|
37
37
|
const select = require('./select-2b2bdb97.js');
|
|
@@ -48,9 +48,9 @@ require('./slots-fb5ac359.js');
|
|
|
48
48
|
require('./index-e1b40fa6.js');
|
|
49
49
|
require('./icon-helper-c076290f.js');
|
|
50
50
|
require('./lib-1bd1e383.js');
|
|
51
|
+
require('./dom-a2c535e3.js');
|
|
51
52
|
require('./templates-e7b3ffbb.js');
|
|
52
53
|
require('./tslib.es6-838fd860.js');
|
|
53
|
-
require('./dom-a2c535e3.js');
|
|
54
54
|
|
|
55
55
|
|
|
56
56
|
|
|
@@ -28,6 +28,9 @@ const Menu = class {
|
|
|
28
28
|
disconnectedCallback() {
|
|
29
29
|
this.removeEventListeners();
|
|
30
30
|
}
|
|
31
|
+
connectedCallback() {
|
|
32
|
+
this.addEventListeners();
|
|
33
|
+
}
|
|
31
34
|
render() {
|
|
32
35
|
return (index.h("vertex-popover", Object.assign({ ref: (element) => {
|
|
33
36
|
this.popoverRef = element;
|
|
@@ -43,12 +46,19 @@ const Menu = class {
|
|
|
43
46
|
}) }, index.h("slot", { name: "header" }), index.h("slot", null))));
|
|
44
47
|
}
|
|
45
48
|
addEventListeners() {
|
|
46
|
-
var _a;
|
|
47
|
-
(_a = this.
|
|
49
|
+
var _a, _b;
|
|
50
|
+
(_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
51
|
+
(_b = this.popoverRef) === null || _b === void 0 ? void 0 : _b.addEventListener('dismissed', this.handlePopoverDismiss);
|
|
52
|
+
this.listenerDisposable = {
|
|
53
|
+
dispose: () => {
|
|
54
|
+
var _a;
|
|
55
|
+
(_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('dismissed', this.handlePopoverDismiss);
|
|
56
|
+
},
|
|
57
|
+
};
|
|
48
58
|
}
|
|
49
59
|
removeEventListeners() {
|
|
50
60
|
var _a;
|
|
51
|
-
(_a = this.
|
|
61
|
+
(_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
52
62
|
}
|
|
53
63
|
handlePopoverDismiss() {
|
|
54
64
|
this.open = false;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index-6a92256c.js');
|
|
4
4
|
const index$1 = require('./index-e1b40fa6.js');
|
|
5
|
+
const dom = require('./dom-a2c535e3.js');
|
|
5
6
|
|
|
6
7
|
const resizableCss = ":host{--hover-shadow-color:var(--vertex-ui-blue-500);--vertical-handle-size:1rem;--vertical-handle-offset:-0.9rem;--horizontal-handle-size:1rem;--horizontal-handle-offset:-0.9rem;--side-direction-handle-z-index:var(--vertex-ui-popover-layer);--corner-handle-z-index:var(--vertex-ui-context-menu-layer)}:host(:not([dimensions-computed=\"\"])){position:absolute;display:none}.container{position:relative;height:100%;width:100%}.container.hidden{position:absolute;visibility:hidden}.shadow{pointer-events:none;position:absolute;width:100%;height:100%;z-index:var(--vertex-ui-popover-layer)}.shadow.hovered-location-left{box-shadow:inset 1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-right{box-shadow:inset -1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-top{box-shadow:inset 0 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom{box-shadow:inset 0 -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-left{box-shadow:inset 1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-right{box-shadow:inset -1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-left{box-shadow:inset 1px 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-right{box-shadow:inset -1px 1px 0 var(--hover-shadow-color)}.handle{position:absolute;visibility:hidden;z-index:var(--side-direction-handle-z-index)}.corner-handle{z-index:var(--corner-handle-z-index)}.left-handle.horizontal-direction-left,.left-handle.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.right-handle.horizontal-direction-right,.right-handle.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.bottom-handle.vertical-direction-bottom,.bottom-handle.vertical-direction-both{visibility:visible;left:0;bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.top-handle.vertical-direction-top,.top-handle.vertical-direction-both{visibility:visible;left:0;top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.bottom-right-handle.vertical-direction-bottom.horizontal-direction-right,.bottom-right-handle.vertical-direction-both.horizontal-direction-right,.bottom-right-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}.bottom-left-handle.vertical-direction-bottom.horizontal-direction-left,.bottom-left-handle.vertical-direction-both.horizontal-direction-left,.bottom-left-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-right-handle.vertical-direction-top.horizontal-direction-right,.top-right-handle.vertical-direction-both.horizontal-direction-right,.top-right-handle.vertical-direction-top.horizontal-direction-both,.top-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-left-handle.vertical-direction-top.horizontal-direction-left,.top-left-handle.vertical-direction-both.horizontal-direction-left,.top-left-handle.vertical-direction-top.horizontal-direction-both,.top-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}";
|
|
7
8
|
|
|
@@ -40,7 +41,9 @@ const Resizable = class {
|
|
|
40
41
|
this.handleDragLeft = this.handleDragLeft.bind(this);
|
|
41
42
|
this.handleDragRight = this.handleDragRight.bind(this);
|
|
42
43
|
this.handleWindowPointerUp = this.handleWindowPointerUp.bind(this);
|
|
44
|
+
this.updateDimensions = this.updateDimensions.bind(this);
|
|
43
45
|
this.recomputeDimensions = this.recomputeDimensions.bind(this);
|
|
46
|
+
this.computeDimensions = this.computeDimensions.bind(this);
|
|
44
47
|
this.mutationObserver = new MutationObserver(this.recomputeDimensions);
|
|
45
48
|
this.resizeObserver = new ResizeObserver(this.recomputeDimensions);
|
|
46
49
|
}
|
|
@@ -65,6 +68,21 @@ const Resizable = class {
|
|
|
65
68
|
this.mutationObserver.disconnect();
|
|
66
69
|
this.resizeObserver.disconnect();
|
|
67
70
|
}
|
|
71
|
+
connectedCallback() {
|
|
72
|
+
this.computeDimensions();
|
|
73
|
+
window.addEventListener('resize', this.recomputeDimensions);
|
|
74
|
+
this.mutationObserver.observe(this.hostElement, {
|
|
75
|
+
attributes: true,
|
|
76
|
+
attributeFilter: ['class'],
|
|
77
|
+
});
|
|
78
|
+
if (this.parentSelector != null) {
|
|
79
|
+
const parent = document.querySelector(this.parentSelector);
|
|
80
|
+
if (parent != null) {
|
|
81
|
+
this.resizeObserver.observe(parent);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
this.resizeObserver.observe(this.hostElement);
|
|
85
|
+
}
|
|
68
86
|
render() {
|
|
69
87
|
const width = this.width < 0 || this.horizontalDirection === 'none'
|
|
70
88
|
? '100%'
|
|
@@ -143,7 +161,7 @@ const Resizable = class {
|
|
|
143
161
|
: 0;
|
|
144
162
|
}
|
|
145
163
|
computeDimensions() {
|
|
146
|
-
|
|
164
|
+
dom.readDOM(() => {
|
|
147
165
|
var _a;
|
|
148
166
|
const slotted = this.getSlottedElement();
|
|
149
167
|
if (typeof window !== 'undefined' && slotted != null) {
|
|
@@ -171,7 +189,7 @@ const Resizable = class {
|
|
|
171
189
|
}
|
|
172
190
|
this.resizeTimeout = setTimeout(() => {
|
|
173
191
|
this.resizeTimeout = undefined;
|
|
174
|
-
|
|
192
|
+
dom.readDOM(() => {
|
|
175
193
|
var _a;
|
|
176
194
|
const slotted = this.getSlottedElement();
|
|
177
195
|
if (typeof window !== 'undefined' && slotted != null) {
|
|
@@ -374,12 +392,12 @@ const Resizable = class {
|
|
|
374
392
|
return 0;
|
|
375
393
|
}
|
|
376
394
|
emitResizeStart(location) {
|
|
377
|
-
|
|
395
|
+
dom.readDOM(() => {
|
|
378
396
|
this.resizeStart.emit(this.computeResizeEventDetails(location));
|
|
379
397
|
});
|
|
380
398
|
}
|
|
381
399
|
emitResizeEnd(location) {
|
|
382
|
-
|
|
400
|
+
dom.readDOM(() => {
|
|
383
401
|
this.resizeEnd.emit(this.computeResizeEventDetails(location));
|
|
384
402
|
});
|
|
385
403
|
}
|
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const resizable = require('./resizable-
|
|
5
|
+
const resizable = require('./resizable-c0a69532.js');
|
|
6
6
|
require('./index-6a92256c.js');
|
|
7
7
|
require('./index-e1b40fa6.js');
|
|
8
|
+
require('./dom-a2c535e3.js');
|
|
8
9
|
|
|
9
10
|
|
|
10
11
|
|
|
@@ -21,6 +21,9 @@ export class Menu {
|
|
|
21
21
|
disconnectedCallback() {
|
|
22
22
|
this.removeEventListeners();
|
|
23
23
|
}
|
|
24
|
+
connectedCallback() {
|
|
25
|
+
this.addEventListeners();
|
|
26
|
+
}
|
|
24
27
|
render() {
|
|
25
28
|
return (h("vertex-popover", Object.assign({ ref: (element) => {
|
|
26
29
|
this.popoverRef = element;
|
|
@@ -36,12 +39,19 @@ export class Menu {
|
|
|
36
39
|
}) }, h("slot", { name: "header" }), h("slot", null))));
|
|
37
40
|
}
|
|
38
41
|
addEventListeners() {
|
|
39
|
-
var _a;
|
|
40
|
-
(_a = this.
|
|
42
|
+
var _a, _b;
|
|
43
|
+
(_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
44
|
+
(_b = this.popoverRef) === null || _b === void 0 ? void 0 : _b.addEventListener('dismissed', this.handlePopoverDismiss);
|
|
45
|
+
this.listenerDisposable = {
|
|
46
|
+
dispose: () => {
|
|
47
|
+
var _a;
|
|
48
|
+
(_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('dismissed', this.handlePopoverDismiss);
|
|
49
|
+
},
|
|
50
|
+
};
|
|
41
51
|
}
|
|
42
52
|
removeEventListeners() {
|
|
43
53
|
var _a;
|
|
44
|
-
(_a = this.
|
|
54
|
+
(_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
45
55
|
}
|
|
46
56
|
handlePopoverDismiss() {
|
|
47
57
|
this.open = false;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { h, Host,
|
|
1
|
+
import { h, Host, } from '@stencil/core';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
+
import { readDOM } from '../../util/components/dom';
|
|
3
4
|
const WINDOW_RESIZE_DEBOUNCE_THRESHOLD = 200;
|
|
4
5
|
export class Resizable {
|
|
5
6
|
constructor() {
|
|
@@ -32,7 +33,9 @@ export class Resizable {
|
|
|
32
33
|
this.handleDragLeft = this.handleDragLeft.bind(this);
|
|
33
34
|
this.handleDragRight = this.handleDragRight.bind(this);
|
|
34
35
|
this.handleWindowPointerUp = this.handleWindowPointerUp.bind(this);
|
|
36
|
+
this.updateDimensions = this.updateDimensions.bind(this);
|
|
35
37
|
this.recomputeDimensions = this.recomputeDimensions.bind(this);
|
|
38
|
+
this.computeDimensions = this.computeDimensions.bind(this);
|
|
36
39
|
this.mutationObserver = new MutationObserver(this.recomputeDimensions);
|
|
37
40
|
this.resizeObserver = new ResizeObserver(this.recomputeDimensions);
|
|
38
41
|
}
|
|
@@ -57,6 +60,21 @@ export class Resizable {
|
|
|
57
60
|
this.mutationObserver.disconnect();
|
|
58
61
|
this.resizeObserver.disconnect();
|
|
59
62
|
}
|
|
63
|
+
connectedCallback() {
|
|
64
|
+
this.computeDimensions();
|
|
65
|
+
window.addEventListener('resize', this.recomputeDimensions);
|
|
66
|
+
this.mutationObserver.observe(this.hostElement, {
|
|
67
|
+
attributes: true,
|
|
68
|
+
attributeFilter: ['class'],
|
|
69
|
+
});
|
|
70
|
+
if (this.parentSelector != null) {
|
|
71
|
+
const parent = document.querySelector(this.parentSelector);
|
|
72
|
+
if (parent != null) {
|
|
73
|
+
this.resizeObserver.observe(parent);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
this.resizeObserver.observe(this.hostElement);
|
|
77
|
+
}
|
|
60
78
|
render() {
|
|
61
79
|
const width = this.width < 0 || this.horizontalDirection === 'none'
|
|
62
80
|
? '100%'
|
|
@@ -135,7 +153,7 @@ export class Resizable {
|
|
|
135
153
|
: 0;
|
|
136
154
|
}
|
|
137
155
|
computeDimensions() {
|
|
138
|
-
|
|
156
|
+
readDOM(() => {
|
|
139
157
|
var _a;
|
|
140
158
|
const slotted = this.getSlottedElement();
|
|
141
159
|
if (typeof window !== 'undefined' && slotted != null) {
|
|
@@ -163,7 +181,7 @@ export class Resizable {
|
|
|
163
181
|
}
|
|
164
182
|
this.resizeTimeout = setTimeout(() => {
|
|
165
183
|
this.resizeTimeout = undefined;
|
|
166
|
-
|
|
184
|
+
readDOM(() => {
|
|
167
185
|
var _a;
|
|
168
186
|
const slotted = this.getSlottedElement();
|
|
169
187
|
if (typeof window !== 'undefined' && slotted != null) {
|
|
@@ -366,12 +384,12 @@ export class Resizable {
|
|
|
366
384
|
return 0;
|
|
367
385
|
}
|
|
368
386
|
emitResizeStart(location) {
|
|
369
|
-
|
|
387
|
+
readDOM(() => {
|
|
370
388
|
this.resizeStart.emit(this.computeResizeEventDetails(location));
|
|
371
389
|
});
|
|
372
390
|
}
|
|
373
391
|
emitResizeEnd(location) {
|
|
374
|
-
|
|
392
|
+
readDOM(() => {
|
|
375
393
|
this.resizeEnd.emit(this.computeResizeEventDetails(location));
|
|
376
394
|
});
|
|
377
395
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d as e,N as t,w as a,p as o,a as r,b as i}from"./p-6834631c.js";export{s as setNonce}from"./p-6834631c.js";(()=>{const i=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t)),n={};return n.resourcesUrl=new URL(".",new URL(i.getAttribute("data-resources-url")||i.src,a.location.href)).href,((o,i)=>{const n=`__sc_import_${t.replace(/\s|-/g,"_")}`;try{a[n]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const l=new Map;a[n]=t=>{var c;const s=new URL(t,o).href;let p=l.get(s);if(!p){const t=e.createElement("script");t.type="module",t.crossOrigin=i.crossOrigin,t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${n}.m = m;`],{type:"application/javascript"}));const o=null!==(c=r.t)&&void 0!==c?c:function(e){var t,a,o;return null!==(o=null===(a=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===a?void 0:a.getAttribute("content"))&&void 0!==o?o:void 0}(e);null!=o&&t.setAttribute("nonce",o),p=new Promise((e=>{t.onload=()=>{e(a[n].m),t.remove()}})),l.set(s,p),e.head.appendChild(t)}return p}}})(n.resourcesUrl,i),a.customElements?o(n):__sc_import_components("./p-c3ec6642.js").then((()=>n))})().then((e=>i([["p-24c72960",[[6,"vertex-click-to-edit-textfield",{placeholder:[1],fontSize:[1,"font-size"],disabled:[516],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],value:[1032],autoFocus:[4,"auto-focus"],editing:[1540],hasError:[4,"has-error"]}]]],["p-226e83a6",[[1,"vertex-collapsible",{label:[1],open:[1540]}]]],["p-b22ed1dd",[[1,"vertex-banner",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-e35057b5",[[1,"vertex-dialog",{open:[1540],fullscreen:[4],resizable:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],maxWidth:[32],maxHeight:[32],isResizing:[32]},[[4,"keydown","keyDownListener"]]]]],["p-e7336466",[[1,"vertex-draggable-popover",{position:[1],boundarySelector:[1,"boundary-selector"],boundaryPadding:[2,"boundary-padding"],anchorPosition:[32],lastPosition:[32],dragging:[32]}]]],["p-e3d0c2d1",[[1,"vertex-dropdown-menu",{animated:[4],placement:[1],open:[32]}]]],["p-fe7e7a74",[[1,"vertex-help-tooltip",{animated:[4],placement:[1],open:[32]}]]],["p-6a49c365",[[6,"vertex-search-bar",{variant:[1],disabled:[4],triggerCharacter:[1,"trigger-character"],breakCharacters:[16],resultItems:[16],placement:[1],value:[1],placeholder:[1],replacements:[1040],replacementUriType:[1,"replacement-uri-type"],cursorPosition:[32],displayedElements:[32],hasTriggered:[32]}]]],["p-1d08dd79",[[1,"vertex-select",{value:[513],placeholder:[513],disabled:[516],animated:[4],hideSelected:[4,"hide-selected"],resizeObserverFactory:[16],open:[32],position:[32],displayValue:[32]}]]],["p-01d4be1d",[[1,"vertex-slider",{min:[2],max:[2],valueLabelDisplay:[1,"value-label-display"],step:[8],size:[1],value:[1026],disabled:[4]}]]],["p-756c9977",[[1,"vertex-toast",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-d2d75bcf",[[1,"vertex-color-circle-picker",{colors:[1],supplementalColors:[1,"supplemental-colors"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],selected:[1537],direction:[1]}]]],["p-70c6c194",[[1,"vertex-color-picker",{value:[1537],size:[513],variant:[513],expand:[513],disabled:[4]}]]],["p-53515813",[[1,"vertex-toggle",{variant:[1],disabled:[4],checked:[1540]}]]],["p-bca6275a",[[1,"vertex-avatar",{firstName:[1,"first-name"],lastName:[1,"last-name"],value:[1],active:[4],variant:[1]}]]],["p-91123ff6",[[1,"vertex-avatar-group"]]],["p-0b4406fa",[[1,"vertex-badge",{badgeText:[1,"badge-text"],badgeColor:[1,"badge-color"]}]]],["p-f6f2bc86",[[1,"vertex-button",{type:[1],color:[1],variant:[1],size:[1],expand:[1],href:[1],target:[1],disabled:[516]}]]],["p-6d4f055b",[[1,"vertex-card",{mode:[1]}]]],["p-211c1186",[[1,"vertex-card-group",{selected:[516],hovered:[516],expanded:[516]}]]],["p-d7c0c287",[[1,"vertex-chip",{variant:[1],color:[1]}]]],["p-a2018217",[[1,"vertex-logo-loading"]]],["p-cc2e3192",[[1,"vertex-menu-divider"]]],["p-573b8ec6",[[1,"vertex-menu-item",{disabled:[516]}]]],["p-33400eed",[[2,"vertex-radio",{disabled:[516],value:[513],label:[513],name:[513],checked:[516]}]]],["p-8b85ea4a",[[1,"vertex-radio-group",{name:[513],value:[1537]}]]],["p-
|
|
1
|
+
import{d as e,N as t,w as a,p as o,a as r,b as i}from"./p-6834631c.js";export{s as setNonce}from"./p-6834631c.js";(()=>{const i=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t)),n={};return n.resourcesUrl=new URL(".",new URL(i.getAttribute("data-resources-url")||i.src,a.location.href)).href,((o,i)=>{const n=`__sc_import_${t.replace(/\s|-/g,"_")}`;try{a[n]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const l=new Map;a[n]=t=>{var c;const s=new URL(t,o).href;let p=l.get(s);if(!p){const t=e.createElement("script");t.type="module",t.crossOrigin=i.crossOrigin,t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${n}.m = m;`],{type:"application/javascript"}));const o=null!==(c=r.t)&&void 0!==c?c:function(e){var t,a,o;return null!==(o=null===(a=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===a?void 0:a.getAttribute("content"))&&void 0!==o?o:void 0}(e);null!=o&&t.setAttribute("nonce",o),p=new Promise((e=>{t.onload=()=>{e(a[n].m),t.remove()}})),l.set(s,p),e.head.appendChild(t)}return p}}})(n.resourcesUrl,i),a.customElements?o(n):__sc_import_components("./p-c3ec6642.js").then((()=>n))})().then((e=>i([["p-24c72960",[[6,"vertex-click-to-edit-textfield",{placeholder:[1],fontSize:[1,"font-size"],disabled:[516],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],value:[1032],autoFocus:[4,"auto-focus"],editing:[1540],hasError:[4,"has-error"]}]]],["p-226e83a6",[[1,"vertex-collapsible",{label:[1],open:[1540]}]]],["p-b22ed1dd",[[1,"vertex-banner",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-e35057b5",[[1,"vertex-dialog",{open:[1540],fullscreen:[4],resizable:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],maxWidth:[32],maxHeight:[32],isResizing:[32]},[[4,"keydown","keyDownListener"]]]]],["p-e7336466",[[1,"vertex-draggable-popover",{position:[1],boundarySelector:[1,"boundary-selector"],boundaryPadding:[2,"boundary-padding"],anchorPosition:[32],lastPosition:[32],dragging:[32]}]]],["p-e3d0c2d1",[[1,"vertex-dropdown-menu",{animated:[4],placement:[1],open:[32]}]]],["p-fe7e7a74",[[1,"vertex-help-tooltip",{animated:[4],placement:[1],open:[32]}]]],["p-6a49c365",[[6,"vertex-search-bar",{variant:[1],disabled:[4],triggerCharacter:[1,"trigger-character"],breakCharacters:[16],resultItems:[16],placement:[1],value:[1],placeholder:[1],replacements:[1040],replacementUriType:[1,"replacement-uri-type"],cursorPosition:[32],displayedElements:[32],hasTriggered:[32]}]]],["p-1d08dd79",[[1,"vertex-select",{value:[513],placeholder:[513],disabled:[516],animated:[4],hideSelected:[4,"hide-selected"],resizeObserverFactory:[16],open:[32],position:[32],displayValue:[32]}]]],["p-01d4be1d",[[1,"vertex-slider",{min:[2],max:[2],valueLabelDisplay:[1,"value-label-display"],step:[8],size:[1],value:[1026],disabled:[4]}]]],["p-756c9977",[[1,"vertex-toast",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-d2d75bcf",[[1,"vertex-color-circle-picker",{colors:[1],supplementalColors:[1,"supplemental-colors"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],selected:[1537],direction:[1]}]]],["p-70c6c194",[[1,"vertex-color-picker",{value:[1537],size:[513],variant:[513],expand:[513],disabled:[4]}]]],["p-53515813",[[1,"vertex-toggle",{variant:[1],disabled:[4],checked:[1540]}]]],["p-bca6275a",[[1,"vertex-avatar",{firstName:[1,"first-name"],lastName:[1,"last-name"],value:[1],active:[4],variant:[1]}]]],["p-91123ff6",[[1,"vertex-avatar-group"]]],["p-0b4406fa",[[1,"vertex-badge",{badgeText:[1,"badge-text"],badgeColor:[1,"badge-color"]}]]],["p-f6f2bc86",[[1,"vertex-button",{type:[1],color:[1],variant:[1],size:[1],expand:[1],href:[1],target:[1],disabled:[516]}]]],["p-6d4f055b",[[1,"vertex-card",{mode:[1]}]]],["p-211c1186",[[1,"vertex-card-group",{selected:[516],hovered:[516],expanded:[516]}]]],["p-d7c0c287",[[1,"vertex-chip",{variant:[1],color:[1]}]]],["p-a2018217",[[1,"vertex-logo-loading"]]],["p-cc2e3192",[[1,"vertex-menu-divider"]]],["p-573b8ec6",[[1,"vertex-menu-item",{disabled:[516]}]]],["p-33400eed",[[2,"vertex-radio",{disabled:[516],value:[513],label:[513],name:[513],checked:[516]}]]],["p-8b85ea4a",[[1,"vertex-radio-group",{name:[513],value:[1537]}]]],["p-95358d00",[[1,"vertex-resizable",{horizontalDirection:[1,"horizontal-direction"],verticalDirection:[1,"vertical-direction"],initialHorizontalScale:[2,"initial-horizontal-scale"],initialVerticalScale:[2,"initial-vertical-scale"],initializeWithOffset:[4,"initialize-with-offset"],parentSelector:[1,"parent-selector"],verticalSiblingSelector:[1,"vertical-sibling-selector"],horizontalSiblingSelector:[1,"horizontal-sibling-selector"],contentSelector:[1,"content-selector"],position:[1],dimensionsComputed:[1540,"dimensions-computed"],width:[32],minWidth:[32],maxWidth:[32],height:[32],minHeight:[32],maxHeight:[32],left:[32],top:[32],hoveredLocation:[32],dragStartLocation:[32],updateDimensions:[64]}]]],["p-69375605",[[1,"vertex-spinner",{color:[1],size:[1]}]]],["p-2ae8175d",[[1,"vertex-tab",{label:[1],active:[4]}]]],["p-8d83dfff",[[1,"vertex-tabs",{active:[1025],labels:[32],activeBounds:[32],activeButtonEl:[32]}]]],["p-80c989fa",[[1,"vertex-expandable",{expanded:[1540],expanding:[1540],collapsing:[1540],controlled:[516],expandType:[513,"expand-type"],animated:[4],contentScrollHeight:[32]}]]],["p-ee496965",[[1,"vertex-result-list",{items:[16],itemsJson:[1,"items"],viewportStartIndex:[1026,"viewport-start-index"],viewportEndIndex:[1026,"viewport-end-index"],resultHeight:[1026,"result-height"],overScanCount:[2,"over-scan-count"],placement:[1],position:[1],open:[4],listHeight:[32],parsedResults:[32],scrollTop:[32],lastStartIndex:[32],lastFocusedIndex:[32],stateMap:[32]}]]],["p-9c384f6c",[[1,"vertex-auto-resize-textarea",{textareaSelector:[1,"textarea-selector"],initialValue:[1,"initial-value"],minRows:[514,"min-rows"],maxRows:[514,"max-rows"],textValue:[32]}]]],["p-406e73da",[[6,"vertex-textfield",{type:[1],name:[1],variant:[1],fontSize:[1,"font-size"],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],placeholder:[1],autoFocus:[4,"auto-focus"],autoComplete:[1,"auto-complete"],autoCorrect:[1,"auto-correct"],value:[1032],disabled:[516],hasError:[4,"has-error"],updateInput:[64],blurInput:[64],getInputValue:[64],selectAll:[64]}]]],["p-606596de",[[1,"vertex-popover",{open:[1540],placement:[1],position:[1025],anchorBounds:[16],backdrop:[4],animated:[4],anchorSelector:[1,"anchor-selector"],boundarySelector:[1,"boundary-selector"],resizeBehavior:[1,"resize-behavior"],overflowBehavior:[16],flipBehavior:[16],offsetBehavior:[2,"offset-behavior"],updateOnResize:[4,"update-on-resize"],resizeObserverFactory:[16],opened:[32],computedPlacement:[32]}]]],["p-3b794014",[[1,"vertex-tooltip",{content:[1],disabled:[4],placement:[1],delay:[2],animated:[4],open:[32]}]]],["p-8bbc344d",[[1,"vertex-color-swatch",{variant:[513],size:[513],color:[513],supplementalColor:[513,"supplemental-color"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],lightened:[1537],darkened:[1537]}]]],["p-1b85c1d1",[[1,"vertex-menu",{animated:[4],open:[1540],placement:[1],fallbackPlacements:[16],backdrop:[4],position:[1040],popoverProps:[16]}]]],["p-91644b85",[[1,"vertex-icon",{name:[1],size:[1]}]]],["p-ef75393c",[[1,"vertex-icon-button",{iconName:[1,"icon-name"],disabled:[516],variant:[1],iconColor:[1,"icon-color"],iconSize:[1,"icon-size"]}]]]],e)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AutoResizeTextArea}from"./p-bec53c3a.js";export{A as Avatar}from"./p-c2c076f1.js";export{A as AvatarGroup}from"./p-81cb4da4.js";export{B as Badge}from"./p-29d7697f.js";export{B as Banner}from"./p-b74799f7.js";export{B as Button}from"./p-1e645c1f.js";export{C as Card}from"./p-a3c04bbd.js";export{C as CardGroup}from"./p-ff4a1c3a.js";export{C as Chip}from"./p-a6614625.js";export{C as ClickToEditTextField}from"./p-0e628c05.js";export{C as Collapsible}from"./p-8fe0084d.js";export{C as ColorCirclePicker}from"./p-b9dab446.js";export{C as ColorPicker}from"./p-e5ce8d66.js";export{C as ColorSwatch}from"./p-d539f530.js";export{C as ContextMenu}from"./p-f2bc7ec5.js";export{D as Dialog}from"./p-0d4a0d61.js";export{D as DraggablePopover}from"./p-41a7564c.js";export{D as DropdownMenu}from"./p-39133bc7.js";export{E as Expandable}from"./p-6a640a2c.js";export{H as HelpTooltip}from"./p-2cff3285.js";export{I as Icon}from"./p-c7a13d00.js";export{I as IconButton}from"./p-a399434b.js";export{L as LogoLoading}from"./p-817bf6ff.js";export{M as Menu}from"./p-
|
|
1
|
+
export{A as AutoResizeTextArea}from"./p-bec53c3a.js";export{A as Avatar}from"./p-c2c076f1.js";export{A as AvatarGroup}from"./p-81cb4da4.js";export{B as Badge}from"./p-29d7697f.js";export{B as Banner}from"./p-b74799f7.js";export{B as Button}from"./p-1e645c1f.js";export{C as Card}from"./p-a3c04bbd.js";export{C as CardGroup}from"./p-ff4a1c3a.js";export{C as Chip}from"./p-a6614625.js";export{C as ClickToEditTextField}from"./p-0e628c05.js";export{C as Collapsible}from"./p-8fe0084d.js";export{C as ColorCirclePicker}from"./p-b9dab446.js";export{C as ColorPicker}from"./p-e5ce8d66.js";export{C as ColorSwatch}from"./p-d539f530.js";export{C as ContextMenu}from"./p-f2bc7ec5.js";export{D as Dialog}from"./p-0d4a0d61.js";export{D as DraggablePopover}from"./p-41a7564c.js";export{D as DropdownMenu}from"./p-39133bc7.js";export{E as Expandable}from"./p-6a640a2c.js";export{H as HelpTooltip}from"./p-2cff3285.js";export{I as Icon}from"./p-c7a13d00.js";export{I as IconButton}from"./p-a399434b.js";export{L as LogoLoading}from"./p-817bf6ff.js";export{M as Menu}from"./p-ee5c8bd3.js";export{M as MenuDivider}from"./p-c939fa4e.js";export{M as MenuItem}from"./p-988058f9.js";export{P as Popover}from"./p-c2706288.js";export{R as Radio}from"./p-36c853c4.js";export{R as RadioGroup}from"./p-f693e6f8.js";export{R as Resizable}from"./p-c9a967d9.js";export{R as ResultList}from"./p-6b862967.js";export{S as SearchBar}from"./p-6b6c2260.js";export{S as Select}from"./p-4327deea.js";export{S as Slider}from"./p-18ed73e9.js";export{S as Spinner}from"./p-09ba50c3.js";export{T as Tab}from"./p-96f55673.js";export{T as Tabs}from"./p-48629bf1.js";export{T as TextField}from"./p-43b1b3f9.js";export{T as Toast}from"./p-3dd08a0f.js";export{T as Toggle}from"./p-59fb829f.js";export{T as Tooltip}from"./p-5fb1724f.js";import"./p-6834631c.js";import"./p-b2c7b113.js";import"./p-fe062eb0.js";import"./p-721ca850.js";import"./p-3438c441.js";import"./p-65f9817e.js";import"./p-1356f525.js";import"./p-59032668.js";
|
package/dist/components/menu.js
CHANGED
|
@@ -29,6 +29,9 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
29
29
|
disconnectedCallback() {
|
|
30
30
|
this.removeEventListeners();
|
|
31
31
|
}
|
|
32
|
+
connectedCallback() {
|
|
33
|
+
this.addEventListeners();
|
|
34
|
+
}
|
|
32
35
|
render() {
|
|
33
36
|
return (h("vertex-popover", Object.assign({ ref: (element) => {
|
|
34
37
|
this.popoverRef = element;
|
|
@@ -44,12 +47,19 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
44
47
|
}) }, h("slot", { name: "header" }), h("slot", null))));
|
|
45
48
|
}
|
|
46
49
|
addEventListeners() {
|
|
47
|
-
var _a;
|
|
48
|
-
(_a = this.
|
|
50
|
+
var _a, _b;
|
|
51
|
+
(_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
52
|
+
(_b = this.popoverRef) === null || _b === void 0 ? void 0 : _b.addEventListener('dismissed', this.handlePopoverDismiss);
|
|
53
|
+
this.listenerDisposable = {
|
|
54
|
+
dispose: () => {
|
|
55
|
+
var _a;
|
|
56
|
+
(_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('dismissed', this.handlePopoverDismiss);
|
|
57
|
+
},
|
|
58
|
+
};
|
|
49
59
|
}
|
|
50
60
|
removeEventListeners() {
|
|
51
61
|
var _a;
|
|
52
|
-
(_a = this.
|
|
62
|
+
(_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
53
63
|
}
|
|
54
64
|
handlePopoverDismiss() {
|
|
55
65
|
this.open = false;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{M as vertex_menu}from"./p-ee5c8bd3.js";import"./p-6834631c.js";import"./p-fe062eb0.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{R as vertex_resizable}from"./p-c9a967d9.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-65f9817e.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,e as i,h as o,H as h,g as e}from"./p-6834631c.js";import{c as s}from"./p-fe062eb0.js";import{r as n}from"./p-65f9817e.js";const r=class{constructor(o){t(this,o),this.resizeStart=i(this,"resizeStart",7),this.resizeEnd=i(this,"resizeEnd",7),this.containerTop=0,this.containerLeft=0,this.horizontalDirection="both",this.verticalDirection="both",this.initialHorizontalScale=void 0,this.initialVerticalScale=void 0,this.initializeWithOffset=!1,this.parentSelector=void 0,this.verticalSiblingSelector=void 0,this.horizontalSiblingSelector=void 0,this.contentSelector=void 0,this.position="relative",this.dimensionsComputed=!1,this.width=-1,this.minWidth=void 0,this.maxWidth=void 0,this.height=-1,this.minHeight=void 0,this.maxHeight=void 0,this.left=0,this.top=0,this.hoveredLocation=void 0,this.dragStartLocation=void 0,this.handleDrag=this.handleDrag.bind(this),this.handleDragBottom=this.handleDragBottom.bind(this),this.handleDragTop=this.handleDragTop.bind(this),this.handleDragLeft=this.handleDragLeft.bind(this),this.handleDragRight=this.handleDragRight.bind(this),this.handleWindowPointerUp=this.handleWindowPointerUp.bind(this),this.updateDimensions=this.updateDimensions.bind(this),this.recomputeDimensions=this.recomputeDimensions.bind(this),this.computeDimensions=this.computeDimensions.bind(this),this.mutationObserver=new MutationObserver(this.recomputeDimensions),this.resizeObserver=new ResizeObserver(this.recomputeDimensions)}componentDidLoad(){if(this.computeDimensions(),window.addEventListener("resize",this.recomputeDimensions),this.mutationObserver.observe(this.hostElement,{attributes:!0,attributeFilter:["class"]}),null!=this.parentSelector){const t=document.querySelector(this.parentSelector);null!=t&&this.resizeObserver.observe(t)}this.resizeObserver.observe(this.hostElement)}disconnectedCallback(){this.dimensionsComputed=!1,window.removeEventListener("resize",this.recomputeDimensions),this.mutationObserver.disconnect(),this.resizeObserver.disconnect()}connectedCallback(){if(this.computeDimensions(),window.addEventListener("resize",this.recomputeDimensions),this.mutationObserver.observe(this.hostElement,{attributes:!0,attributeFilter:["class"]}),null!=this.parentSelector){const t=document.querySelector(this.parentSelector);null!=t&&this.resizeObserver.observe(t)}this.resizeObserver.observe(this.hostElement)}render(){return o(h,{style:{width:this.width<0||"none"===this.horizontalDirection?"100%":`${this.width}px`,height:this.height<0||"none"===this.verticalDirection?"100%":`${this.height}px`,left:"relative"===this.position?`${this.left}px`:void 0,top:"relative"===this.position?`${this.top}px`:void 0}},o("div",{class:s("container",{hidden:this.width<=0&&this.height<=0})},o("div",{class:s("shadow",`hovered-location-${this.dragStartLocation||this.hoveredLocation}`)}),o("div",{class:s("handle","left-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"left"),onPointerEnter:()=>this.handlePointerEnter("left"),onPointerLeave:()=>this.handlePointerLeave("left")}),o("div",{class:s("handle","right-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"right"),onPointerEnter:()=>this.handlePointerEnter("right"),onPointerLeave:()=>this.handlePointerLeave("right")}),o("div",{class:s("handle","top-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"top"),onPointerEnter:()=>this.handlePointerEnter("top"),onPointerLeave:()=>this.handlePointerLeave("top")}),o("div",{class:s("handle","bottom-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"bottom"),onPointerEnter:()=>this.handlePointerEnter("bottom"),onPointerLeave:()=>this.handlePointerLeave("bottom")}),o("div",{class:s("handle","bottom-right-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"bottom-right"),onPointerEnter:()=>this.handlePointerEnter("bottom-right"),onPointerLeave:()=>this.handlePointerLeave("bottom-right")}),o("div",{class:s("handle","bottom-left-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"bottom-left"),onPointerEnter:()=>this.handlePointerEnter("bottom-left"),onPointerLeave:()=>this.handlePointerLeave("bottom-left")}),o("div",{class:s("handle","top-right-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"top-right"),onPointerEnter:()=>this.handlePointerEnter("top-right"),onPointerLeave:()=>this.handlePointerLeave("top-right")}),o("div",{class:s("handle","top-left-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"top-left"),onPointerEnter:()=>this.handlePointerEnter("top-left"),onPointerLeave:()=>this.handlePointerLeave("top-left")}),o("slot",null)))}async updateDimensions(t,i=!1){var o,h;const{host:e,slotted:s,parent:n,minWidth:r,maxWidth:l,minHeight:a,maxHeight:d}=t,v=this.fromComputedStyle(l,(null==n?void 0:n.width)||e.width||s.width);this.maxWidth=null!=v?v-this.getSiblingMinWidth((null==n?void 0:n.width)||e.width||s.width):void 0,this.minWidth=this.fromComputedStyle(r,(null==n?void 0:n.width)||e.width||s.width);const c=this.fromComputedStyle(d,(null==n?void 0:n.height)||e.height||s.height);if(this.maxHeight=null!=c?c-this.getSiblingMinHeight((null==n?void 0:n.height)||e.height||s.height):void 0,this.minHeight=this.fromComputedStyle(a,(null==n?void 0:n.height)||e.height||s.height),!i||this.height<=0){const t=null!=this.maxHeight&&null!=this.initialVerticalScale?this.maxHeight*this.initialVerticalScale:this.minHeight;this.width=(null!=this.maxWidth&&null!=this.initialHorizontalScale?this.maxWidth*this.initialHorizontalScale:this.minWidth)||s.width||this.width,this.height=t||s.height||this.height}else this.height=this.toBoundedValue(this.height,this.minHeight||0,this.maxHeight),this.width=this.toBoundedValue(this.width,this.minWidth||0,this.maxWidth);this.containerTop=null!==(o=null==n?void 0:n.top)&&void 0!==o?o:e.top,this.containerLeft=null!==(h=null==n?void 0:n.left)&&void 0!==h?h:e.left,this.top=null!=c&&this.initializeWithOffset&&"absolute"!==this.position?c-this.height:0,this.left=null!=v&&this.initializeWithOffset&&"absolute"!==this.position?v-this.width:0}computeDimensions(){n((()=>{var t;const i=this.getSlottedElement();if("undefined"!=typeof window&&null!=i){const o=window.getComputedStyle(this.hostElement);this.updateDimensions({host:this.hostElement.getBoundingClientRect(),slotted:i.getBoundingClientRect(),parent:null!=this.parentSelector?null===(t=document.querySelector(this.parentSelector))||void 0===t?void 0:t.getBoundingClientRect():void 0,minWidth:o.minWidth,maxWidth:o.maxWidth,minHeight:o.minHeight,maxHeight:o.maxHeight}),this.dimensionsComputed=!0}}))}recomputeDimensions(){null!=this.resizeTimeout&&(clearTimeout(this.resizeTimeout),this.resizeTimeout=void 0),this.resizeTimeout=setTimeout((()=>{this.resizeTimeout=void 0,n((()=>{var t;const i=this.getSlottedElement();if("undefined"!=typeof window&&null!=i){const o=window.getComputedStyle(this.hostElement);this.updateDimensions({host:this.hostElement.getBoundingClientRect(),slotted:i.getBoundingClientRect(),parent:null!=this.parentSelector?null===(t=document.querySelector(this.parentSelector))||void 0===t?void 0:t.getBoundingClientRect():void 0,minWidth:o.minWidth,maxWidth:o.maxWidth,minHeight:o.minHeight,maxHeight:o.maxHeight},!0)}}))}),200)}handlePointerEnter(t){this.hoveredLocation=t}handlePointerLeave(t){t===this.hoveredLocation&&(this.hoveredLocation=void 0)}handlePointerDown(t,i){this.setStartPosition(t,i),this.emitResizeStart(i),window.addEventListener("pointermove",this.handleDrag),window.addEventListener("pointerup",this.handleWindowPointerUp)}handleDrag(t){if(null!=this.lastPointerPosition){const i={x:this.lastPointerPosition.x-t.clientX,y:this.lastPointerPosition.y-t.clientY};switch(this.lastPointerPosition={x:t.clientX,y:t.clientY},this.dragStartLocation){case"bottom":this.ifValidDragBottom(t,i,this.handleDragBottom);break;case"top":this.ifValidDragTop(t,i,this.handleDragTop);break;case"right":this.ifValidDragRight(t,i,this.handleDragRight);break;case"left":this.ifValidDragLeft(t,i,this.handleDragLeft);break;case"bottom-right":this.ifValidDragBottom(t,i,this.handleDragBottom),this.ifValidDragRight(t,i,this.handleDragRight);break;case"bottom-left":this.ifValidDragBottom(t,i,this.handleDragBottom),this.ifValidDragLeft(t,i,this.handleDragLeft);break;case"top-right":this.ifValidDragTop(t,i,this.handleDragTop),this.ifValidDragRight(t,i,this.handleDragRight);break;case"top-left":this.ifValidDragTop(t,i,this.handleDragTop),this.ifValidDragLeft(t,i,this.handleDragLeft)}}}handleWindowPointerUp(){null!=this.dragStartLocation&&this.emitResizeEnd(this.dragStartLocation),this.lastPointerPosition=void 0,this.dragStartLocation=void 0,window.removeEventListener("pointermove",this.handleDrag),window.removeEventListener("pointerup",this.handleWindowPointerUp)}ifValidDragTop(t,i,o){(i.y<0?t.clientY-this.containerTop>this.top:t.clientY-this.containerTop<=this.top)&&o(i)}ifValidDragBottom(t,i,o){(i.y>0?t.clientY<this.top+this.containerTop+this.height:t.clientY>=this.top+this.containerTop+this.height)&&o(i)}ifValidDragLeft(t,i,o){(i.x<0?t.clientX-this.containerLeft>this.left:t.clientX-this.containerLeft<=this.left)&&o(i)}ifValidDragRight(t,i,o){(i.x>0?t.clientX<this.left+this.containerLeft+this.width:t.clientX>=this.left+this.containerLeft+this.width)&&o(i)}handleDragTop(t){const i=this.height;this.height=this.toBoundedValue(this.height+t.y,this.minHeight||0,this.maxHeight),this.top-=this.height-i}handleDragBottom(t){this.height=this.toBoundedValue(this.height-t.y,this.minHeight||0,this.maxHeight)}handleDragLeft(t){const i=this.width;this.width=this.toBoundedValue(this.width+t.x,this.minWidth||0,this.maxWidth),this.left-=this.width-i}handleDragRight(t){this.width=this.toBoundedValue(this.width-t.x,this.minWidth||0,this.maxWidth)}setStartPosition(t,i){t.stopPropagation(),t.preventDefault(),this.lastPointerPosition={x:t.clientX,y:t.clientY},this.dragStartLocation=i}getSlottedElement(){var t,i,o;if(null!=this.contentSelector)return(null===(t=this.hostElement.shadowRoot)||void 0===t?void 0:t.querySelector(this.contentSelector))||this.hostElement.querySelector(this.contentSelector)||void 0;{const t=(null===(i=this.hostElement.shadowRoot)||void 0===i?void 0:i.querySelector("slot"))||void 0;if(null===(o=null==t?void 0:t.assignedElements)||void 0===o?void 0:o.call(t).length)return null==t?void 0:t.assignedElements()[0]}}getMinBounds(){return{x:null!=this.minWidth?this.width-this.minWidth:this.width,y:null!=this.minHeight?this.height-this.minHeight:this.height}}fromComputedStyle(t,i){const o=parseFloat(t);return isNaN(o)||o<=0?void 0:t.includes("%")?o/100*i:o}toBoundedValue(t,i,o){return Math.max(Math.min(t,null!=o?o:t),i)}getSiblingMinWidth(t){var i;const o=null!=this.horizontalSiblingSelector?document.querySelector(this.horizontalSiblingSelector):void 0;if("undefined"!=typeof window&&o){const h=window.getComputedStyle(o);return null!==(i=this.fromComputedStyle(h.minWidth,t))&&void 0!==i?i:0}return 0}getSiblingMinHeight(t){var i;const o=null!=this.verticalSiblingSelector?document.querySelector(this.verticalSiblingSelector):void 0;if("undefined"!=typeof window&&o){const h=window.getComputedStyle(o);return null!==(i=this.fromComputedStyle(h.minHeight,t))&&void 0!==i?i:0}return 0}emitResizeStart(t){n((()=>{this.resizeStart.emit(this.computeResizeEventDetails(t))}))}emitResizeEnd(t){n((()=>{this.resizeEnd.emit(this.computeResizeEventDetails(t))}))}computeResizeEventDetails(t){var i,o,h,e,s;const n=null!=this.parentSelector?null===(i=document.querySelector(this.parentSelector))||void 0===i?void 0:i.getBoundingClientRect():void 0;return{location:t,width:this.width,height:this.height,widthPercentage:this.width/(null!==(h=null!==(o=this.maxWidth)&&void 0!==o?o:null==n?void 0:n.width)&&void 0!==h?h:window.innerWidth),heightPercentage:this.height/(null!==(s=null!==(e=this.maxHeight)&&void 0!==e?e:null==n?void 0:n.height)&&void 0!==s?s:window.innerHeight)}}get hostElement(){return e(this)}};r.style=':host{--hover-shadow-color:var(--vertex-ui-blue-500);--vertical-handle-size:1rem;--vertical-handle-offset:-0.9rem;--horizontal-handle-size:1rem;--horizontal-handle-offset:-0.9rem;--side-direction-handle-z-index:var(--vertex-ui-popover-layer);--corner-handle-z-index:var(--vertex-ui-context-menu-layer)}:host(:not([dimensions-computed=""])){position:absolute;display:none}.container{position:relative;height:100%;width:100%}.container.hidden{position:absolute;visibility:hidden}.shadow{pointer-events:none;position:absolute;width:100%;height:100%;z-index:var(--vertex-ui-popover-layer)}.shadow.hovered-location-left{box-shadow:inset 1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-right{box-shadow:inset -1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-top{box-shadow:inset 0 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom{box-shadow:inset 0 -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-left{box-shadow:inset 1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-right{box-shadow:inset -1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-left{box-shadow:inset 1px 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-right{box-shadow:inset -1px 1px 0 var(--hover-shadow-color)}.handle{position:absolute;visibility:hidden;z-index:var(--side-direction-handle-z-index)}.corner-handle{z-index:var(--corner-handle-z-index)}.left-handle.horizontal-direction-left,.left-handle.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.right-handle.horizontal-direction-right,.right-handle.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.bottom-handle.vertical-direction-bottom,.bottom-handle.vertical-direction-both{visibility:visible;left:0;bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.top-handle.vertical-direction-top,.top-handle.vertical-direction-both{visibility:visible;left:0;top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.bottom-right-handle.vertical-direction-bottom.horizontal-direction-right,.bottom-right-handle.vertical-direction-both.horizontal-direction-right,.bottom-right-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}.bottom-left-handle.vertical-direction-bottom.horizontal-direction-left,.bottom-left-handle.vertical-direction-both.horizontal-direction-left,.bottom-left-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-right-handle.vertical-direction-top.horizontal-direction-right,.top-right-handle.vertical-direction-both.horizontal-direction-right,.top-right-handle.vertical-direction-top.horizontal-direction-both,.top-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-left-handle.vertical-direction-top.horizontal-direction-left,.top-left-handle.vertical-direction-both.horizontal-direction-left,.top-left-handle.vertical-direction-top.horizontal-direction-both,.top-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}';export{r as R}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as i,e as s,h as t,g as e}from"./p-6834631c.js";import{c as o}from"./p-fe062eb0.js";const r=class{constructor(t){i(this,t),this.menuClosed=s(this,"menuClosed",7),this.animated=!0,this.open=!1,this.placement=void 0,this.fallbackPlacements=void 0,this.backdrop=!0,this.position=void 0,this.popoverProps=void 0,this.handlePopoverDismiss=this.handlePopoverDismiss.bind(this)}componentDidLoad(){var i;this.addEventListeners(),this.headerSlot=(null===(i=this.hostElement.shadowRoot)||void 0===i?void 0:i.querySelector('slot[name="header"]'))||void 0}disconnectedCallback(){this.removeEventListeners()}connectedCallback(){this.addEventListeners()}render(){return t("vertex-popover",Object.assign({ref:i=>{this.popoverRef=i},open:this.open,animated:this.animated,position:this.position,placement:this.placement,backdrop:this.backdrop,flipBehavior:null!=this.fallbackPlacements?{fallbackPlacements:this.fallbackPlacements}:void 0},this.popoverProps),null==this.position&&t("div",{slot:"anchor"},t("slot",{name:"anchor"})),t("div",{onClick:()=>{this.open=!1,this.menuClosed.emit()},class:o("root",{"has-header":null!=this.headerSlot})},t("slot",{name:"header"}),t("slot",null)))}addEventListeners(){var i,s;null===(i=this.listenerDisposable)||void 0===i||i.dispose(),null===(s=this.popoverRef)||void 0===s||s.addEventListener("dismissed",this.handlePopoverDismiss),this.listenerDisposable={dispose:()=>{var i;null===(i=this.popoverRef)||void 0===i||i.removeEventListener("dismissed",this.handlePopoverDismiss)}}}removeEventListeners(){var i;null===(i=this.listenerDisposable)||void 0===i||i.dispose()}handlePopoverDismiss(){this.open=!1,this.menuClosed.emit()}get hostElement(){return e(this)}};r.style=":host{--background-color:var(--vertex-ui-white);--menu-padding:0.19em 0}.root{padding:var(--menu-padding);border:1px solid var(--vertex-ui-neutral-400);border-radius:0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);background-color:var(--background-color);z-index:var(--vertex-ui-context-menu-layer)}.has-header{padding-top:0}";export{r as M}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h, Host
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as classnames } from './index2.js';
|
|
3
|
+
import { r as readDOM } from './dom.js';
|
|
3
4
|
|
|
4
5
|
const resizableCss = ":host{--hover-shadow-color:var(--vertex-ui-blue-500);--vertical-handle-size:1rem;--vertical-handle-offset:-0.9rem;--horizontal-handle-size:1rem;--horizontal-handle-offset:-0.9rem;--side-direction-handle-z-index:var(--vertex-ui-popover-layer);--corner-handle-z-index:var(--vertex-ui-context-menu-layer)}:host(:not([dimensions-computed=\"\"])){position:absolute;display:none}.container{position:relative;height:100%;width:100%}.container.hidden{position:absolute;visibility:hidden}.shadow{pointer-events:none;position:absolute;width:100%;height:100%;z-index:var(--vertex-ui-popover-layer)}.shadow.hovered-location-left{box-shadow:inset 1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-right{box-shadow:inset -1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-top{box-shadow:inset 0 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom{box-shadow:inset 0 -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-left{box-shadow:inset 1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-right{box-shadow:inset -1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-left{box-shadow:inset 1px 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-right{box-shadow:inset -1px 1px 0 var(--hover-shadow-color)}.handle{position:absolute;visibility:hidden;z-index:var(--side-direction-handle-z-index)}.corner-handle{z-index:var(--corner-handle-z-index)}.left-handle.horizontal-direction-left,.left-handle.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.right-handle.horizontal-direction-right,.right-handle.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.bottom-handle.vertical-direction-bottom,.bottom-handle.vertical-direction-both{visibility:visible;left:0;bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.top-handle.vertical-direction-top,.top-handle.vertical-direction-both{visibility:visible;left:0;top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.bottom-right-handle.vertical-direction-bottom.horizontal-direction-right,.bottom-right-handle.vertical-direction-both.horizontal-direction-right,.bottom-right-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}.bottom-left-handle.vertical-direction-bottom.horizontal-direction-left,.bottom-left-handle.vertical-direction-both.horizontal-direction-left,.bottom-left-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-right-handle.vertical-direction-top.horizontal-direction-right,.top-right-handle.vertical-direction-both.horizontal-direction-right,.top-right-handle.vertical-direction-top.horizontal-direction-both,.top-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-left-handle.vertical-direction-top.horizontal-direction-left,.top-left-handle.vertical-direction-both.horizontal-direction-left,.top-left-handle.vertical-direction-top.horizontal-direction-both,.top-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}";
|
|
5
6
|
|
|
@@ -40,7 +41,9 @@ const Resizable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
40
41
|
this.handleDragLeft = this.handleDragLeft.bind(this);
|
|
41
42
|
this.handleDragRight = this.handleDragRight.bind(this);
|
|
42
43
|
this.handleWindowPointerUp = this.handleWindowPointerUp.bind(this);
|
|
44
|
+
this.updateDimensions = this.updateDimensions.bind(this);
|
|
43
45
|
this.recomputeDimensions = this.recomputeDimensions.bind(this);
|
|
46
|
+
this.computeDimensions = this.computeDimensions.bind(this);
|
|
44
47
|
this.mutationObserver = new MutationObserver(this.recomputeDimensions);
|
|
45
48
|
this.resizeObserver = new ResizeObserver(this.recomputeDimensions);
|
|
46
49
|
}
|
|
@@ -65,6 +68,21 @@ const Resizable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
65
68
|
this.mutationObserver.disconnect();
|
|
66
69
|
this.resizeObserver.disconnect();
|
|
67
70
|
}
|
|
71
|
+
connectedCallback() {
|
|
72
|
+
this.computeDimensions();
|
|
73
|
+
window.addEventListener('resize', this.recomputeDimensions);
|
|
74
|
+
this.mutationObserver.observe(this.hostElement, {
|
|
75
|
+
attributes: true,
|
|
76
|
+
attributeFilter: ['class'],
|
|
77
|
+
});
|
|
78
|
+
if (this.parentSelector != null) {
|
|
79
|
+
const parent = document.querySelector(this.parentSelector);
|
|
80
|
+
if (parent != null) {
|
|
81
|
+
this.resizeObserver.observe(parent);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
this.resizeObserver.observe(this.hostElement);
|
|
85
|
+
}
|
|
68
86
|
render() {
|
|
69
87
|
const width = this.width < 0 || this.horizontalDirection === 'none'
|
|
70
88
|
? '100%'
|
|
@@ -143,7 +161,7 @@ const Resizable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
143
161
|
: 0;
|
|
144
162
|
}
|
|
145
163
|
computeDimensions() {
|
|
146
|
-
|
|
164
|
+
readDOM(() => {
|
|
147
165
|
var _a;
|
|
148
166
|
const slotted = this.getSlottedElement();
|
|
149
167
|
if (typeof window !== 'undefined' && slotted != null) {
|
|
@@ -171,7 +189,7 @@ const Resizable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
171
189
|
}
|
|
172
190
|
this.resizeTimeout = setTimeout(() => {
|
|
173
191
|
this.resizeTimeout = undefined;
|
|
174
|
-
|
|
192
|
+
readDOM(() => {
|
|
175
193
|
var _a;
|
|
176
194
|
const slotted = this.getSlottedElement();
|
|
177
195
|
if (typeof window !== 'undefined' && slotted != null) {
|
|
@@ -374,12 +392,12 @@ const Resizable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
374
392
|
return 0;
|
|
375
393
|
}
|
|
376
394
|
emitResizeStart(location) {
|
|
377
|
-
|
|
395
|
+
readDOM(() => {
|
|
378
396
|
this.resizeStart.emit(this.computeResizeEventDetails(location));
|
|
379
397
|
});
|
|
380
398
|
}
|
|
381
399
|
emitResizeEnd(location) {
|
|
382
|
-
|
|
400
|
+
readDOM(() => {
|
|
383
401
|
this.resizeEnd.emit(this.computeResizeEventDetails(location));
|
|
384
402
|
});
|
|
385
403
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -21,13 +21,13 @@ export { H as HelpTooltip } from './help-tooltip-c2f0d996.js';
|
|
|
21
21
|
export { I as Icon } from './icon-a74a8129.js';
|
|
22
22
|
export { I as IconButton } from './icon-button-33aa27cb.js';
|
|
23
23
|
export { L as LogoLoading } from './logo-loading-3c7fa23d.js';
|
|
24
|
-
export { M as Menu } from './menu-
|
|
24
|
+
export { M as Menu } from './menu-b8ff7d6a.js';
|
|
25
25
|
export { M as MenuDivider } from './menu-divider-87c888cb.js';
|
|
26
26
|
export { M as MenuItem } from './menu-item-c33aa9dd.js';
|
|
27
27
|
export { P as Popover } from './popover-6e806354.js';
|
|
28
28
|
export { R as Radio } from './radio-39c11ba4.js';
|
|
29
29
|
export { R as RadioGroup } from './radio-group-7c35d2f0.js';
|
|
30
|
-
export { R as Resizable } from './resizable-
|
|
30
|
+
export { R as Resizable } from './resizable-833336bf.js';
|
|
31
31
|
export { R as ResultList } from './result-list-16c6afbd.js';
|
|
32
32
|
export { S as SearchBar } from './search-bar-8d18626e.js';
|
|
33
33
|
export { S as Select } from './select-78aeff96.js';
|
|
@@ -44,6 +44,6 @@ import './slots-fbb5afb3.js';
|
|
|
44
44
|
import './index-9c609209.js';
|
|
45
45
|
import './icon-helper-2f57104b.js';
|
|
46
46
|
import './lib-73fbca8b.js';
|
|
47
|
+
import './dom-9d0f7bf4.js';
|
|
47
48
|
import './templates-797420bf.js';
|
|
48
49
|
import './tslib.es6-99cd0de8.js';
|
|
49
|
-
import './dom-9d0f7bf4.js';
|
|
@@ -26,6 +26,9 @@ const Menu = class {
|
|
|
26
26
|
disconnectedCallback() {
|
|
27
27
|
this.removeEventListeners();
|
|
28
28
|
}
|
|
29
|
+
connectedCallback() {
|
|
30
|
+
this.addEventListeners();
|
|
31
|
+
}
|
|
29
32
|
render() {
|
|
30
33
|
return (h("vertex-popover", Object.assign({ ref: (element) => {
|
|
31
34
|
this.popoverRef = element;
|
|
@@ -41,12 +44,19 @@ const Menu = class {
|
|
|
41
44
|
}) }, h("slot", { name: "header" }), h("slot", null))));
|
|
42
45
|
}
|
|
43
46
|
addEventListeners() {
|
|
44
|
-
var _a;
|
|
45
|
-
(_a = this.
|
|
47
|
+
var _a, _b;
|
|
48
|
+
(_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
49
|
+
(_b = this.popoverRef) === null || _b === void 0 ? void 0 : _b.addEventListener('dismissed', this.handlePopoverDismiss);
|
|
50
|
+
this.listenerDisposable = {
|
|
51
|
+
dispose: () => {
|
|
52
|
+
var _a;
|
|
53
|
+
(_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('dismissed', this.handlePopoverDismiss);
|
|
54
|
+
},
|
|
55
|
+
};
|
|
46
56
|
}
|
|
47
57
|
removeEventListeners() {
|
|
48
58
|
var _a;
|
|
49
|
-
(_a = this.
|
|
59
|
+
(_a = this.listenerDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
|
|
50
60
|
}
|
|
51
61
|
handlePopoverDismiss() {
|
|
52
62
|
this.open = false;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { r as registerInstance, e as createEvent, h, H as Host,
|
|
1
|
+
import { r as registerInstance, e as createEvent, h, H as Host, g as getElement } from './index-72f28b71.js';
|
|
2
2
|
import { c as classnames } from './index-9c609209.js';
|
|
3
|
+
import { r as readDOM } from './dom-9d0f7bf4.js';
|
|
3
4
|
|
|
4
5
|
const resizableCss = ":host{--hover-shadow-color:var(--vertex-ui-blue-500);--vertical-handle-size:1rem;--vertical-handle-offset:-0.9rem;--horizontal-handle-size:1rem;--horizontal-handle-offset:-0.9rem;--side-direction-handle-z-index:var(--vertex-ui-popover-layer);--corner-handle-z-index:var(--vertex-ui-context-menu-layer)}:host(:not([dimensions-computed=\"\"])){position:absolute;display:none}.container{position:relative;height:100%;width:100%}.container.hidden{position:absolute;visibility:hidden}.shadow{pointer-events:none;position:absolute;width:100%;height:100%;z-index:var(--vertex-ui-popover-layer)}.shadow.hovered-location-left{box-shadow:inset 1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-right{box-shadow:inset -1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-top{box-shadow:inset 0 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom{box-shadow:inset 0 -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-left{box-shadow:inset 1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-right{box-shadow:inset -1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-left{box-shadow:inset 1px 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-right{box-shadow:inset -1px 1px 0 var(--hover-shadow-color)}.handle{position:absolute;visibility:hidden;z-index:var(--side-direction-handle-z-index)}.corner-handle{z-index:var(--corner-handle-z-index)}.left-handle.horizontal-direction-left,.left-handle.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.right-handle.horizontal-direction-right,.right-handle.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.bottom-handle.vertical-direction-bottom,.bottom-handle.vertical-direction-both{visibility:visible;left:0;bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.top-handle.vertical-direction-top,.top-handle.vertical-direction-both{visibility:visible;left:0;top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.bottom-right-handle.vertical-direction-bottom.horizontal-direction-right,.bottom-right-handle.vertical-direction-both.horizontal-direction-right,.bottom-right-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}.bottom-left-handle.vertical-direction-bottom.horizontal-direction-left,.bottom-left-handle.vertical-direction-both.horizontal-direction-left,.bottom-left-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-right-handle.vertical-direction-top.horizontal-direction-right,.top-right-handle.vertical-direction-both.horizontal-direction-right,.top-right-handle.vertical-direction-top.horizontal-direction-both,.top-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-left-handle.vertical-direction-top.horizontal-direction-left,.top-left-handle.vertical-direction-both.horizontal-direction-left,.top-left-handle.vertical-direction-top.horizontal-direction-both,.top-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}";
|
|
5
6
|
|
|
@@ -38,7 +39,9 @@ const Resizable = class {
|
|
|
38
39
|
this.handleDragLeft = this.handleDragLeft.bind(this);
|
|
39
40
|
this.handleDragRight = this.handleDragRight.bind(this);
|
|
40
41
|
this.handleWindowPointerUp = this.handleWindowPointerUp.bind(this);
|
|
42
|
+
this.updateDimensions = this.updateDimensions.bind(this);
|
|
41
43
|
this.recomputeDimensions = this.recomputeDimensions.bind(this);
|
|
44
|
+
this.computeDimensions = this.computeDimensions.bind(this);
|
|
42
45
|
this.mutationObserver = new MutationObserver(this.recomputeDimensions);
|
|
43
46
|
this.resizeObserver = new ResizeObserver(this.recomputeDimensions);
|
|
44
47
|
}
|
|
@@ -63,6 +66,21 @@ const Resizable = class {
|
|
|
63
66
|
this.mutationObserver.disconnect();
|
|
64
67
|
this.resizeObserver.disconnect();
|
|
65
68
|
}
|
|
69
|
+
connectedCallback() {
|
|
70
|
+
this.computeDimensions();
|
|
71
|
+
window.addEventListener('resize', this.recomputeDimensions);
|
|
72
|
+
this.mutationObserver.observe(this.hostElement, {
|
|
73
|
+
attributes: true,
|
|
74
|
+
attributeFilter: ['class'],
|
|
75
|
+
});
|
|
76
|
+
if (this.parentSelector != null) {
|
|
77
|
+
const parent = document.querySelector(this.parentSelector);
|
|
78
|
+
if (parent != null) {
|
|
79
|
+
this.resizeObserver.observe(parent);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
this.resizeObserver.observe(this.hostElement);
|
|
83
|
+
}
|
|
66
84
|
render() {
|
|
67
85
|
const width = this.width < 0 || this.horizontalDirection === 'none'
|
|
68
86
|
? '100%'
|
|
@@ -141,7 +159,7 @@ const Resizable = class {
|
|
|
141
159
|
: 0;
|
|
142
160
|
}
|
|
143
161
|
computeDimensions() {
|
|
144
|
-
|
|
162
|
+
readDOM(() => {
|
|
145
163
|
var _a;
|
|
146
164
|
const slotted = this.getSlottedElement();
|
|
147
165
|
if (typeof window !== 'undefined' && slotted != null) {
|
|
@@ -169,7 +187,7 @@ const Resizable = class {
|
|
|
169
187
|
}
|
|
170
188
|
this.resizeTimeout = setTimeout(() => {
|
|
171
189
|
this.resizeTimeout = undefined;
|
|
172
|
-
|
|
190
|
+
readDOM(() => {
|
|
173
191
|
var _a;
|
|
174
192
|
const slotted = this.getSlottedElement();
|
|
175
193
|
if (typeof window !== 'undefined' && slotted != null) {
|
|
@@ -372,12 +390,12 @@ const Resizable = class {
|
|
|
372
390
|
return 0;
|
|
373
391
|
}
|
|
374
392
|
emitResizeStart(location) {
|
|
375
|
-
|
|
393
|
+
readDOM(() => {
|
|
376
394
|
this.resizeStart.emit(this.computeResizeEventDetails(location));
|
|
377
395
|
});
|
|
378
396
|
}
|
|
379
397
|
emitResizeEnd(location) {
|
|
380
|
-
|
|
398
|
+
readDOM(() => {
|
|
381
399
|
this.resizeEnd.emit(this.computeResizeEventDetails(location));
|
|
382
400
|
});
|
|
383
401
|
}
|
|
@@ -41,9 +41,11 @@ export declare class Menu {
|
|
|
41
41
|
private hostElement;
|
|
42
42
|
private popoverRef?;
|
|
43
43
|
private headerSlot?;
|
|
44
|
+
private listenerDisposable?;
|
|
44
45
|
constructor();
|
|
45
46
|
componentDidLoad(): void;
|
|
46
47
|
disconnectedCallback(): void;
|
|
48
|
+
connectedCallback(): void;
|
|
47
49
|
render(): h.JSX.IntrinsicElements;
|
|
48
50
|
private addEventListeners;
|
|
49
51
|
private removeEventListeners;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vertexvis/ui",
|
|
3
|
-
"version": "0.1.2-canary.
|
|
3
|
+
"version": "0.1.2-canary.2",
|
|
4
4
|
"description": "The Vertex UI component library.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"@vertexvis/utils": "^0.23.2",
|
|
88
88
|
"fast-deep-equal": "^3.1.3"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "90a063b058db9bfdb5707a0b3789c556fdc83598"
|
|
91
91
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{M as vertex_menu}from"./p-7b75e004.js";import"./p-6834631c.js";import"./p-fe062eb0.js";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,e as i,h as o,H as h,c as e,g as s}from"./p-6834631c.js";import{c as n}from"./p-fe062eb0.js";const r=class{constructor(o){t(this,o),this.resizeStart=i(this,"resizeStart",7),this.resizeEnd=i(this,"resizeEnd",7),this.containerTop=0,this.containerLeft=0,this.horizontalDirection="both",this.verticalDirection="both",this.initialHorizontalScale=void 0,this.initialVerticalScale=void 0,this.initializeWithOffset=!1,this.parentSelector=void 0,this.verticalSiblingSelector=void 0,this.horizontalSiblingSelector=void 0,this.contentSelector=void 0,this.position="relative",this.dimensionsComputed=!1,this.width=-1,this.minWidth=void 0,this.maxWidth=void 0,this.height=-1,this.minHeight=void 0,this.maxHeight=void 0,this.left=0,this.top=0,this.hoveredLocation=void 0,this.dragStartLocation=void 0,this.handleDrag=this.handleDrag.bind(this),this.handleDragBottom=this.handleDragBottom.bind(this),this.handleDragTop=this.handleDragTop.bind(this),this.handleDragLeft=this.handleDragLeft.bind(this),this.handleDragRight=this.handleDragRight.bind(this),this.handleWindowPointerUp=this.handleWindowPointerUp.bind(this),this.recomputeDimensions=this.recomputeDimensions.bind(this),this.mutationObserver=new MutationObserver(this.recomputeDimensions),this.resizeObserver=new ResizeObserver(this.recomputeDimensions)}componentDidLoad(){if(this.computeDimensions(),window.addEventListener("resize",this.recomputeDimensions),this.mutationObserver.observe(this.hostElement,{attributes:!0,attributeFilter:["class"]}),null!=this.parentSelector){const t=document.querySelector(this.parentSelector);null!=t&&this.resizeObserver.observe(t)}this.resizeObserver.observe(this.hostElement)}disconnectedCallback(){this.dimensionsComputed=!1,window.removeEventListener("resize",this.recomputeDimensions),this.mutationObserver.disconnect(),this.resizeObserver.disconnect()}render(){return o(h,{style:{width:this.width<0||"none"===this.horizontalDirection?"100%":`${this.width}px`,height:this.height<0||"none"===this.verticalDirection?"100%":`${this.height}px`,left:"relative"===this.position?`${this.left}px`:void 0,top:"relative"===this.position?`${this.top}px`:void 0}},o("div",{class:n("container",{hidden:this.width<=0&&this.height<=0})},o("div",{class:n("shadow",`hovered-location-${this.dragStartLocation||this.hoveredLocation}`)}),o("div",{class:n("handle","left-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"left"),onPointerEnter:()=>this.handlePointerEnter("left"),onPointerLeave:()=>this.handlePointerLeave("left")}),o("div",{class:n("handle","right-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"right"),onPointerEnter:()=>this.handlePointerEnter("right"),onPointerLeave:()=>this.handlePointerLeave("right")}),o("div",{class:n("handle","top-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"top"),onPointerEnter:()=>this.handlePointerEnter("top"),onPointerLeave:()=>this.handlePointerLeave("top")}),o("div",{class:n("handle","bottom-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"bottom"),onPointerEnter:()=>this.handlePointerEnter("bottom"),onPointerLeave:()=>this.handlePointerLeave("bottom")}),o("div",{class:n("handle","bottom-right-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"bottom-right"),onPointerEnter:()=>this.handlePointerEnter("bottom-right"),onPointerLeave:()=>this.handlePointerLeave("bottom-right")}),o("div",{class:n("handle","bottom-left-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"bottom-left"),onPointerEnter:()=>this.handlePointerEnter("bottom-left"),onPointerLeave:()=>this.handlePointerLeave("bottom-left")}),o("div",{class:n("handle","top-right-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"top-right"),onPointerEnter:()=>this.handlePointerEnter("top-right"),onPointerLeave:()=>this.handlePointerLeave("top-right")}),o("div",{class:n("handle","top-left-handle",`horizontal-direction-${this.horizontalDirection}`,`vertical-direction-${this.verticalDirection}`),onPointerDown:t=>this.handlePointerDown(t,"top-left"),onPointerEnter:()=>this.handlePointerEnter("top-left"),onPointerLeave:()=>this.handlePointerLeave("top-left")}),o("slot",null)))}async updateDimensions(t,i=!1){var o,h;const{host:e,slotted:s,parent:n,minWidth:r,maxWidth:l,minHeight:a,maxHeight:d}=t,v=this.fromComputedStyle(l,(null==n?void 0:n.width)||e.width||s.width);this.maxWidth=null!=v?v-this.getSiblingMinWidth((null==n?void 0:n.width)||e.width||s.width):void 0,this.minWidth=this.fromComputedStyle(r,(null==n?void 0:n.width)||e.width||s.width);const c=this.fromComputedStyle(d,(null==n?void 0:n.height)||e.height||s.height);if(this.maxHeight=null!=c?c-this.getSiblingMinHeight((null==n?void 0:n.height)||e.height||s.height):void 0,this.minHeight=this.fromComputedStyle(a,(null==n?void 0:n.height)||e.height||s.height),!i||this.height<=0){const t=null!=this.maxHeight&&null!=this.initialVerticalScale?this.maxHeight*this.initialVerticalScale:this.minHeight;this.width=(null!=this.maxWidth&&null!=this.initialHorizontalScale?this.maxWidth*this.initialHorizontalScale:this.minWidth)||s.width||this.width,this.height=t||s.height||this.height}else this.height=this.toBoundedValue(this.height,this.minHeight||0,this.maxHeight),this.width=this.toBoundedValue(this.width,this.minWidth||0,this.maxWidth);this.containerTop=null!==(o=null==n?void 0:n.top)&&void 0!==o?o:e.top,this.containerLeft=null!==(h=null==n?void 0:n.left)&&void 0!==h?h:e.left,this.top=null!=c&&this.initializeWithOffset&&"absolute"!==this.position?c-this.height:0,this.left=null!=v&&this.initializeWithOffset&&"absolute"!==this.position?v-this.width:0}computeDimensions(){e((()=>{var t;const i=this.getSlottedElement();if("undefined"!=typeof window&&null!=i){const o=window.getComputedStyle(this.hostElement);this.updateDimensions({host:this.hostElement.getBoundingClientRect(),slotted:i.getBoundingClientRect(),parent:null!=this.parentSelector?null===(t=document.querySelector(this.parentSelector))||void 0===t?void 0:t.getBoundingClientRect():void 0,minWidth:o.minWidth,maxWidth:o.maxWidth,minHeight:o.minHeight,maxHeight:o.maxHeight}),this.dimensionsComputed=!0}}))}recomputeDimensions(){null!=this.resizeTimeout&&(clearTimeout(this.resizeTimeout),this.resizeTimeout=void 0),this.resizeTimeout=setTimeout((()=>{this.resizeTimeout=void 0,e((()=>{var t;const i=this.getSlottedElement();if("undefined"!=typeof window&&null!=i){const o=window.getComputedStyle(this.hostElement);this.updateDimensions({host:this.hostElement.getBoundingClientRect(),slotted:i.getBoundingClientRect(),parent:null!=this.parentSelector?null===(t=document.querySelector(this.parentSelector))||void 0===t?void 0:t.getBoundingClientRect():void 0,minWidth:o.minWidth,maxWidth:o.maxWidth,minHeight:o.minHeight,maxHeight:o.maxHeight},!0)}}))}),200)}handlePointerEnter(t){this.hoveredLocation=t}handlePointerLeave(t){t===this.hoveredLocation&&(this.hoveredLocation=void 0)}handlePointerDown(t,i){this.setStartPosition(t,i),this.emitResizeStart(i),window.addEventListener("pointermove",this.handleDrag),window.addEventListener("pointerup",this.handleWindowPointerUp)}handleDrag(t){if(null!=this.lastPointerPosition){const i={x:this.lastPointerPosition.x-t.clientX,y:this.lastPointerPosition.y-t.clientY};switch(this.lastPointerPosition={x:t.clientX,y:t.clientY},this.dragStartLocation){case"bottom":this.ifValidDragBottom(t,i,this.handleDragBottom);break;case"top":this.ifValidDragTop(t,i,this.handleDragTop);break;case"right":this.ifValidDragRight(t,i,this.handleDragRight);break;case"left":this.ifValidDragLeft(t,i,this.handleDragLeft);break;case"bottom-right":this.ifValidDragBottom(t,i,this.handleDragBottom),this.ifValidDragRight(t,i,this.handleDragRight);break;case"bottom-left":this.ifValidDragBottom(t,i,this.handleDragBottom),this.ifValidDragLeft(t,i,this.handleDragLeft);break;case"top-right":this.ifValidDragTop(t,i,this.handleDragTop),this.ifValidDragRight(t,i,this.handleDragRight);break;case"top-left":this.ifValidDragTop(t,i,this.handleDragTop),this.ifValidDragLeft(t,i,this.handleDragLeft)}}}handleWindowPointerUp(){null!=this.dragStartLocation&&this.emitResizeEnd(this.dragStartLocation),this.lastPointerPosition=void 0,this.dragStartLocation=void 0,window.removeEventListener("pointermove",this.handleDrag),window.removeEventListener("pointerup",this.handleWindowPointerUp)}ifValidDragTop(t,i,o){(i.y<0?t.clientY-this.containerTop>this.top:t.clientY-this.containerTop<=this.top)&&o(i)}ifValidDragBottom(t,i,o){(i.y>0?t.clientY<this.top+this.containerTop+this.height:t.clientY>=this.top+this.containerTop+this.height)&&o(i)}ifValidDragLeft(t,i,o){(i.x<0?t.clientX-this.containerLeft>this.left:t.clientX-this.containerLeft<=this.left)&&o(i)}ifValidDragRight(t,i,o){(i.x>0?t.clientX<this.left+this.containerLeft+this.width:t.clientX>=this.left+this.containerLeft+this.width)&&o(i)}handleDragTop(t){const i=this.height;this.height=this.toBoundedValue(this.height+t.y,this.minHeight||0,this.maxHeight),this.top-=this.height-i}handleDragBottom(t){this.height=this.toBoundedValue(this.height-t.y,this.minHeight||0,this.maxHeight)}handleDragLeft(t){const i=this.width;this.width=this.toBoundedValue(this.width+t.x,this.minWidth||0,this.maxWidth),this.left-=this.width-i}handleDragRight(t){this.width=this.toBoundedValue(this.width-t.x,this.minWidth||0,this.maxWidth)}setStartPosition(t,i){t.stopPropagation(),t.preventDefault(),this.lastPointerPosition={x:t.clientX,y:t.clientY},this.dragStartLocation=i}getSlottedElement(){var t,i,o;if(null!=this.contentSelector)return(null===(t=this.hostElement.shadowRoot)||void 0===t?void 0:t.querySelector(this.contentSelector))||this.hostElement.querySelector(this.contentSelector)||void 0;{const t=(null===(i=this.hostElement.shadowRoot)||void 0===i?void 0:i.querySelector("slot"))||void 0;if(null===(o=null==t?void 0:t.assignedElements)||void 0===o?void 0:o.call(t).length)return null==t?void 0:t.assignedElements()[0]}}getMinBounds(){return{x:null!=this.minWidth?this.width-this.minWidth:this.width,y:null!=this.minHeight?this.height-this.minHeight:this.height}}fromComputedStyle(t,i){const o=parseFloat(t);return isNaN(o)||o<=0?void 0:t.includes("%")?o/100*i:o}toBoundedValue(t,i,o){return Math.max(Math.min(t,null!=o?o:t),i)}getSiblingMinWidth(t){var i;const o=null!=this.horizontalSiblingSelector?document.querySelector(this.horizontalSiblingSelector):void 0;if("undefined"!=typeof window&&o){const h=window.getComputedStyle(o);return null!==(i=this.fromComputedStyle(h.minWidth,t))&&void 0!==i?i:0}return 0}getSiblingMinHeight(t){var i;const o=null!=this.verticalSiblingSelector?document.querySelector(this.verticalSiblingSelector):void 0;if("undefined"!=typeof window&&o){const h=window.getComputedStyle(o);return null!==(i=this.fromComputedStyle(h.minHeight,t))&&void 0!==i?i:0}return 0}emitResizeStart(t){e((()=>{this.resizeStart.emit(this.computeResizeEventDetails(t))}))}emitResizeEnd(t){e((()=>{this.resizeEnd.emit(this.computeResizeEventDetails(t))}))}computeResizeEventDetails(t){var i,o,h,e,s;const n=null!=this.parentSelector?null===(i=document.querySelector(this.parentSelector))||void 0===i?void 0:i.getBoundingClientRect():void 0;return{location:t,width:this.width,height:this.height,widthPercentage:this.width/(null!==(h=null!==(o=this.maxWidth)&&void 0!==o?o:null==n?void 0:n.width)&&void 0!==h?h:window.innerWidth),heightPercentage:this.height/(null!==(s=null!==(e=this.maxHeight)&&void 0!==e?e:null==n?void 0:n.height)&&void 0!==s?s:window.innerHeight)}}get hostElement(){return s(this)}};r.style=':host{--hover-shadow-color:var(--vertex-ui-blue-500);--vertical-handle-size:1rem;--vertical-handle-offset:-0.9rem;--horizontal-handle-size:1rem;--horizontal-handle-offset:-0.9rem;--side-direction-handle-z-index:var(--vertex-ui-popover-layer);--corner-handle-z-index:var(--vertex-ui-context-menu-layer)}:host(:not([dimensions-computed=""])){position:absolute;display:none}.container{position:relative;height:100%;width:100%}.container.hidden{position:absolute;visibility:hidden}.shadow{pointer-events:none;position:absolute;width:100%;height:100%;z-index:var(--vertex-ui-popover-layer)}.shadow.hovered-location-left{box-shadow:inset 1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-right{box-shadow:inset -1px 0 0 var(--hover-shadow-color)}.shadow.hovered-location-top{box-shadow:inset 0 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom{box-shadow:inset 0 -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-left{box-shadow:inset 1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-bottom-right{box-shadow:inset -1px -1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-left{box-shadow:inset 1px 1px 0 var(--hover-shadow-color)}.shadow.hovered-location-top-right{box-shadow:inset -1px 1px 0 var(--hover-shadow-color)}.handle{position:absolute;visibility:hidden;z-index:var(--side-direction-handle-z-index)}.corner-handle{z-index:var(--corner-handle-z-index)}.left-handle.horizontal-direction-left,.left-handle.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.right-handle.horizontal-direction-right,.right-handle.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:0;height:100%;width:var(--horizontal-handle-size);cursor:col-resize}.bottom-handle.vertical-direction-bottom,.bottom-handle.vertical-direction-both{visibility:visible;left:0;bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.top-handle.vertical-direction-top,.top-handle.vertical-direction-both{visibility:visible;left:0;top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:100%;cursor:row-resize}.bottom-right-handle.vertical-direction-bottom.horizontal-direction-right,.bottom-right-handle.vertical-direction-both.horizontal-direction-right,.bottom-right-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}.bottom-left-handle.vertical-direction-bottom.horizontal-direction-left,.bottom-left-handle.vertical-direction-both.horizontal-direction-left,.bottom-left-handle.vertical-direction-bottom.horizontal-direction-both,.bottom-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);bottom:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-right-handle.vertical-direction-top.horizontal-direction-right,.top-right-handle.vertical-direction-both.horizontal-direction-right,.top-right-handle.vertical-direction-top.horizontal-direction-both,.top-right-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;right:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nesw-resize}.top-left-handle.vertical-direction-top.horizontal-direction-left,.top-left-handle.vertical-direction-both.horizontal-direction-left,.top-left-handle.vertical-direction-top.horizontal-direction-both,.top-left-handle.vertical-direction-both.horizontal-direction-both{visibility:visible;left:var(--horizontal-handle-offset);top:var(--vertical-handle-offset);height:var(--vertical-handle-size);width:var(--horizontal-handle-size);cursor:nwse-resize}';export{r as R}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as s,e as i,h as t,g as e}from"./p-6834631c.js";import{c as o}from"./p-fe062eb0.js";const r=class{constructor(t){s(this,t),this.menuClosed=i(this,"menuClosed",7),this.animated=!0,this.open=!1,this.placement=void 0,this.fallbackPlacements=void 0,this.backdrop=!0,this.position=void 0,this.popoverProps=void 0,this.handlePopoverDismiss=this.handlePopoverDismiss.bind(this)}componentDidLoad(){var s;this.addEventListeners(),this.headerSlot=(null===(s=this.hostElement.shadowRoot)||void 0===s?void 0:s.querySelector('slot[name="header"]'))||void 0}disconnectedCallback(){this.removeEventListeners()}render(){return t("vertex-popover",Object.assign({ref:s=>{this.popoverRef=s},open:this.open,animated:this.animated,position:this.position,placement:this.placement,backdrop:this.backdrop,flipBehavior:null!=this.fallbackPlacements?{fallbackPlacements:this.fallbackPlacements}:void 0},this.popoverProps),null==this.position&&t("div",{slot:"anchor"},t("slot",{name:"anchor"})),t("div",{onClick:()=>{this.open=!1,this.menuClosed.emit()},class:o("root",{"has-header":null!=this.headerSlot})},t("slot",{name:"header"}),t("slot",null)))}addEventListeners(){var s;null===(s=this.popoverRef)||void 0===s||s.addEventListener("dismissed",this.handlePopoverDismiss)}removeEventListeners(){var s;null===(s=this.popoverRef)||void 0===s||s.removeEventListener("dismissed",this.handlePopoverDismiss)}handlePopoverDismiss(){this.open=!1,this.menuClosed.emit()}get hostElement(){return e(this)}};r.style=":host{--background-color:var(--vertex-ui-white);--menu-padding:0.19em 0}.root{padding:var(--menu-padding);border:1px solid var(--vertex-ui-neutral-400);border-radius:0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);background-color:var(--background-color);z-index:var(--vertex-ui-context-menu-layer)}.has-header{padding-top:0}";export{r as M}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{R as vertex_resizable}from"./p-6ec189d2.js";import"./p-6834631c.js";import"./p-fe062eb0.js";
|