@genesislcap/foundation-ui 14.439.2 → 14.441.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +1770 -1202
- package/dist/dts/dialog/dialog.d.ts +22 -0
- package/dist/dts/dialog/dialog.d.ts.map +1 -1
- package/dist/dts/dialog/dialog.styles.d.ts.map +1 -1
- package/dist/dts/modal/modal.d.ts +0 -19
- package/dist/dts/modal/modal.d.ts.map +1 -1
- package/dist/dts/modal/modal.styles.d.ts.map +1 -1
- package/dist/dts/react.d.ts +9 -9
- package/dist/esm/dialog/dialog.js +114 -0
- package/dist/esm/dialog/dialog.styles.js +4 -0
- package/dist/esm/modal/modal.js +0 -116
- package/dist/esm/modal/modal.styles.js +0 -4
- package/dist/react.cjs +6 -6
- package/dist/react.mjs +5 -5
- package/package.json +19 -19
|
@@ -23,6 +23,11 @@ export declare abstract class DialogElement extends FoundationElement {
|
|
|
23
23
|
* Whether or not the dialog is resizable
|
|
24
24
|
*/
|
|
25
25
|
resizable: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Whether or not the dialog is draggable by its top region
|
|
28
|
+
*/
|
|
29
|
+
draggable: boolean;
|
|
30
|
+
draggableChanged(_oldValue: boolean, newValue: boolean): void;
|
|
26
31
|
/**
|
|
27
32
|
* Minimum width for the dialog
|
|
28
33
|
*/
|
|
@@ -65,6 +70,14 @@ export declare abstract class DialogElement extends FoundationElement {
|
|
|
65
70
|
private originalMargin;
|
|
66
71
|
private isMaximized;
|
|
67
72
|
private hasBeenResized;
|
|
73
|
+
private isDragging;
|
|
74
|
+
private dragOffsetX;
|
|
75
|
+
private dragOffsetY;
|
|
76
|
+
private dragDialogWidth;
|
|
77
|
+
private dragDialogHeight;
|
|
78
|
+
private onMouseDownBound;
|
|
79
|
+
private onMouseMoveBound;
|
|
80
|
+
private onMouseUpBound;
|
|
68
81
|
connectedCallback(): void;
|
|
69
82
|
disconnectedCallback(): void;
|
|
70
83
|
private setupResizeHandlers;
|
|
@@ -107,6 +120,15 @@ export declare abstract class DialogElement extends FoundationElement {
|
|
|
107
120
|
* @public
|
|
108
121
|
*/
|
|
109
122
|
resetSize(): void;
|
|
123
|
+
private attachDragMouseDown;
|
|
124
|
+
private detachDragMouseDown;
|
|
125
|
+
private isEventTargetInDraggableTarget;
|
|
126
|
+
private isInsideTopSlot;
|
|
127
|
+
private onMouseDown;
|
|
128
|
+
private onMouseMove;
|
|
129
|
+
private onMouseUp;
|
|
130
|
+
private removeDraggableEventListeners;
|
|
131
|
+
private resetDraggableStyle;
|
|
110
132
|
}
|
|
111
133
|
/**
|
|
112
134
|
* @tagname %%prefix%%-dialog
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAC;AAE9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK/D,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAWjE,eAAO,MAAM,6BAA6B,EAAE,cAG3C,CAAC;AAEF,eAAO,MAAM,mBAAmB,IAAK,CAAC;AAEtC,8BAAsB,aAAc,SAAQ,iBAAiB;IAC3D;;;OAGG;IACH,WAAW,EAAG,iBAAiB,CAAC;IAChC,UAAU,EAAG,WAAW,CAAC;IACzB,cAAc,EAAG,eAAe,CAAC;IACrB,YAAY,EAAG,qBAAqB,CAAC;IACjD,mBAAmB;IAIU,IAAI,EAAE,UAAU,CAAa;IAEpD,QAAQ,EAAE,cAAc,CAAY;IAE1C;;OAEG;IACsD,aAAa,EAAE,OAAO,CAAQ;IAEvF;;OAEG;IACgD,SAAS,EAAE,OAAO,CAAS;IAE9E;;OAEG;IAC+B,QAAQ,EAAE,MAAM,CAAa;IAE/D;;OAEG;IACgC,SAAS,EAAE,MAAM,CAAc;IAElE;;OAEG;IACmC,YAAY,CAAC,EAAE,MAAM,CAAC;IAE5D;;OAEG;IACoC,aAAa,CAAC,EAAE,MAAM,CAAC;IAE9D;;OAEG;IACS,cAAc,EAAE,MAAM,IAAI,CAAC;IAEvC;;OAEG;IACS,eAAe,EAAE,MAAM,IAAI,CAAC;IAGxC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,mBAAmB,CAAgB;IAC3C,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,aAAa,CAAa;IAGlC,OAAO,CAAC,aAAa,CAAc;IACnC,OAAO,CAAC,cAAc,CAAc;IACpC,OAAO,CAAC,gBAAgB,CAAc;IACtC,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,cAAc,CAAc;IAGxB,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,cAAc,CAAkB;
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,EAAE,
|
|
1
|
+
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,EAAE,aAiRpC,CAAC"}
|
|
@@ -5,26 +5,7 @@ export declare const defaultModalConfig: {};
|
|
|
5
5
|
* @tagname %%prefix%%-modal
|
|
6
6
|
*/
|
|
7
7
|
export declare class Modal extends DialogElement {
|
|
8
|
-
private isDragging;
|
|
9
|
-
private offsetX;
|
|
10
|
-
private offsetY;
|
|
11
|
-
private modalWidth;
|
|
12
|
-
private modalHeight;
|
|
13
|
-
private onMouseDownBound;
|
|
14
|
-
private onMouseMoveBound;
|
|
15
|
-
private onMouseUpBound;
|
|
16
|
-
draggable: boolean;
|
|
17
|
-
draggableChanged(ignore: any, newValue: boolean): void;
|
|
18
8
|
show(): void;
|
|
19
|
-
connectedCallback(): void;
|
|
20
|
-
disconnectedCallback(): void;
|
|
21
|
-
onCloseCallback: () => void;
|
|
22
|
-
private isEventTargetInDraggableTarget;
|
|
23
|
-
private isInsideTopSlot;
|
|
24
|
-
private onMouseDown;
|
|
25
|
-
private onMouseMove;
|
|
26
|
-
private onMouseUp;
|
|
27
|
-
private removeDraggableEventListeners;
|
|
28
9
|
}
|
|
29
10
|
/**
|
|
30
11
|
* The Foundation Modal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAK1C,eAAO,MAAM,4BAA4B,EAAE,cAG1C,CAAC;AAEF,eAAO,MAAM,kBAAkB,IAAK,CAAC;AAErC;;GAEG;AACH,qBAAa,KAAM,SAAQ,aAAa;IACtC,IAAI,IAAI,IAAI;CAIb;AAED;;;;;;GAMG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;gBAM1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.styles.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAI7D,eAAO,MAAM,qBAAqB,EAAE,
|
|
1
|
+
{"version":3,"file":"modal.styles.d.ts","sourceRoot":"","sources":["../../../src/modal/modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAI7D,eAAO,MAAM,qBAAqB,EAAE,aAEnC,CAAC"}
|
package/dist/dts/react.d.ts
CHANGED
|
@@ -120,15 +120,6 @@ interface HTMLWCProps extends React.AriaAttributes {
|
|
|
120
120
|
onInput?(e: Event): void;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
export declare const Accordion: React.ForwardRefExoticComponent<
|
|
124
|
-
React.PropsWithChildren<
|
|
125
|
-
Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
|
|
126
|
-
HTMLWCProps & {
|
|
127
|
-
}
|
|
128
|
-
> & React.RefAttributes<AccordionWC>
|
|
129
|
-
>;
|
|
130
|
-
export type AccordionRef = AccordionWC;
|
|
131
|
-
|
|
132
123
|
export declare const AccordionItem: React.ForwardRefExoticComponent<
|
|
133
124
|
React.PropsWithChildren<
|
|
134
125
|
Omit<PublicOf<AccordionItemWC>, 'children' | 'style'> &
|
|
@@ -158,6 +149,15 @@ export declare const AiCriteriaSearch: React.ForwardRefExoticComponent<
|
|
|
158
149
|
>;
|
|
159
150
|
export type AiCriteriaSearchRef = AiCriteriaSearchWC;
|
|
160
151
|
|
|
152
|
+
export declare const Accordion: React.ForwardRefExoticComponent<
|
|
153
|
+
React.PropsWithChildren<
|
|
154
|
+
Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
|
|
155
|
+
HTMLWCProps & {
|
|
156
|
+
}
|
|
157
|
+
> & React.RefAttributes<AccordionWC>
|
|
158
|
+
>;
|
|
159
|
+
export type AccordionRef = AccordionWC;
|
|
160
|
+
|
|
161
161
|
export declare const AiIndicator: React.ForwardRefExoticComponent<
|
|
162
162
|
React.PropsWithChildren<
|
|
163
163
|
Omit<PublicOf<AiIndicatorWC>, 'children' | 'style'> &
|
|
@@ -29,6 +29,10 @@ export class DialogElement extends FoundationElement {
|
|
|
29
29
|
* Whether or not the dialog is resizable
|
|
30
30
|
*/
|
|
31
31
|
this.resizable = false;
|
|
32
|
+
/**
|
|
33
|
+
* Whether or not the dialog is draggable by its top region
|
|
34
|
+
*/
|
|
35
|
+
this.draggable = false;
|
|
32
36
|
/**
|
|
33
37
|
* Minimum width for the dialog
|
|
34
38
|
*/
|
|
@@ -58,17 +62,36 @@ export class DialogElement extends FoundationElement {
|
|
|
58
62
|
// Maximize state tracking
|
|
59
63
|
this.isMaximized = false;
|
|
60
64
|
this.hasBeenResized = false;
|
|
65
|
+
// Drag state
|
|
66
|
+
this.isDragging = false;
|
|
67
|
+
this.dragOffsetX = 0;
|
|
68
|
+
this.dragOffsetY = 0;
|
|
69
|
+
this.dragDialogWidth = 0;
|
|
70
|
+
this.dragDialogHeight = 0;
|
|
71
|
+
this.onMouseDownBound = null;
|
|
72
|
+
this.onMouseMoveBound = null;
|
|
73
|
+
this.onMouseUpBound = null;
|
|
61
74
|
}
|
|
62
75
|
notificationChanged() {
|
|
63
76
|
if (this.notification)
|
|
64
77
|
this.showCloseIcon = false;
|
|
65
78
|
}
|
|
79
|
+
draggableChanged(_oldValue, newValue) {
|
|
80
|
+
if (newValue) {
|
|
81
|
+
this.attachDragMouseDown();
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
this.detachDragMouseDown();
|
|
85
|
+
this.removeDraggableEventListeners();
|
|
86
|
+
}
|
|
87
|
+
}
|
|
66
88
|
connectedCallback() {
|
|
67
89
|
super.connectedCallback();
|
|
68
90
|
if (!window['HTMLDialogElement']) {
|
|
69
91
|
dialogPolyfill.registerDialog(this.mainElement);
|
|
70
92
|
}
|
|
71
93
|
this.mainElement.addEventListener('close', () => {
|
|
94
|
+
this.resetDraggableStyle();
|
|
72
95
|
if (this.onCloseCallback)
|
|
73
96
|
this.onCloseCallback();
|
|
74
97
|
this.$emit('close');
|
|
@@ -78,10 +101,13 @@ export class DialogElement extends FoundationElement {
|
|
|
78
101
|
}
|
|
79
102
|
// Set up resize handlers
|
|
80
103
|
this.setupResizeHandlers();
|
|
104
|
+
this.attachDragMouseDown();
|
|
81
105
|
}
|
|
82
106
|
disconnectedCallback() {
|
|
83
107
|
super.disconnectedCallback();
|
|
84
108
|
this.removeResizeHandlers();
|
|
109
|
+
this.detachDragMouseDown();
|
|
110
|
+
this.removeDraggableEventListeners();
|
|
85
111
|
}
|
|
86
112
|
setupResizeHandlers() {
|
|
87
113
|
if (!this.resizable)
|
|
@@ -471,6 +497,91 @@ export class DialogElement extends FoundationElement {
|
|
|
471
497
|
height: this.mainElement.offsetHeight,
|
|
472
498
|
});
|
|
473
499
|
}
|
|
500
|
+
attachDragMouseDown() {
|
|
501
|
+
if (!this.draggable || !this.mainElement)
|
|
502
|
+
return;
|
|
503
|
+
if (!this.onMouseDownBound) {
|
|
504
|
+
this.onMouseDownBound = this.onMouseDown.bind(this);
|
|
505
|
+
}
|
|
506
|
+
// removeEventListener before addEventListener so we never attach twice when
|
|
507
|
+
// both draggableChanged (pre-render) and connectedCallback (post-render) run.
|
|
508
|
+
this.mainElement.removeEventListener('mousedown', this.onMouseDownBound);
|
|
509
|
+
this.mainElement.addEventListener('mousedown', this.onMouseDownBound);
|
|
510
|
+
}
|
|
511
|
+
detachDragMouseDown() {
|
|
512
|
+
if (!this.onMouseDownBound || !this.mainElement)
|
|
513
|
+
return;
|
|
514
|
+
this.mainElement.removeEventListener('mousedown', this.onMouseDownBound);
|
|
515
|
+
this.onMouseDownBound = null;
|
|
516
|
+
}
|
|
517
|
+
isEventTargetInDraggableTarget(event) {
|
|
518
|
+
var _a;
|
|
519
|
+
return (((_a = this.topElement) === null || _a === void 0 ? void 0 : _a.contains(event.target)) || this.isInsideTopSlot(event.target));
|
|
520
|
+
}
|
|
521
|
+
isInsideTopSlot(target) {
|
|
522
|
+
if (!this.topElementSlot)
|
|
523
|
+
return false;
|
|
524
|
+
const assignedNodes = this.topElementSlot.assignedNodes();
|
|
525
|
+
return assignedNodes.some((node) => node === target || node.contains(target));
|
|
526
|
+
}
|
|
527
|
+
onMouseDown(event) {
|
|
528
|
+
if (!this.topElement || !this.isEventTargetInDraggableTarget(event) || this.isDragging)
|
|
529
|
+
return;
|
|
530
|
+
this.isDragging = true;
|
|
531
|
+
const rect = this.mainElement.getBoundingClientRect();
|
|
532
|
+
this.dragOffsetX = event.clientX - rect.left;
|
|
533
|
+
this.dragOffsetY = event.clientY - rect.top;
|
|
534
|
+
// Store the dialog's width and height to minimize calls to getBoundingClientRect
|
|
535
|
+
this.dragDialogWidth = rect.width;
|
|
536
|
+
this.dragDialogHeight = rect.height;
|
|
537
|
+
this.onMouseMoveBound = this.onMouseMove.bind(this);
|
|
538
|
+
this.onMouseUpBound = this.onMouseUp.bind(this);
|
|
539
|
+
document.addEventListener('mousemove', this.onMouseMoveBound);
|
|
540
|
+
document.addEventListener('mouseup', this.onMouseUpBound);
|
|
541
|
+
}
|
|
542
|
+
onMouseMove(event) {
|
|
543
|
+
if (!this.isDragging || !this.mainElement)
|
|
544
|
+
return;
|
|
545
|
+
const viewportWidth = window.innerWidth;
|
|
546
|
+
const viewportHeight = window.innerHeight;
|
|
547
|
+
let newLeft = event.clientX - this.dragOffsetX;
|
|
548
|
+
let newTop = event.clientY - this.dragOffsetY;
|
|
549
|
+
// Ensure dialog stays within screen boundaries
|
|
550
|
+
newLeft = Math.max(0, Math.min(viewportWidth - this.dragDialogWidth, newLeft));
|
|
551
|
+
newTop = Math.max(0, Math.min(viewportHeight - this.dragDialogHeight, newTop));
|
|
552
|
+
requestAnimationFrame(() => {
|
|
553
|
+
Object.assign(this.mainElement.style, {
|
|
554
|
+
position: 'absolute',
|
|
555
|
+
left: `${newLeft}px`,
|
|
556
|
+
top: `${newTop}px`,
|
|
557
|
+
margin: '0',
|
|
558
|
+
});
|
|
559
|
+
});
|
|
560
|
+
}
|
|
561
|
+
onMouseUp() {
|
|
562
|
+
this.isDragging = false;
|
|
563
|
+
this.removeDraggableEventListeners();
|
|
564
|
+
}
|
|
565
|
+
removeDraggableEventListeners() {
|
|
566
|
+
if (this.onMouseMoveBound) {
|
|
567
|
+
document.removeEventListener('mousemove', this.onMouseMoveBound);
|
|
568
|
+
this.onMouseMoveBound = null;
|
|
569
|
+
}
|
|
570
|
+
if (this.onMouseUpBound) {
|
|
571
|
+
document.removeEventListener('mouseup', this.onMouseUpBound);
|
|
572
|
+
this.onMouseUpBound = null;
|
|
573
|
+
}
|
|
574
|
+
}
|
|
575
|
+
resetDraggableStyle() {
|
|
576
|
+
if (!this.draggable || !(this.mainElement instanceof HTMLElement))
|
|
577
|
+
return;
|
|
578
|
+
Object.assign(this.mainElement.style, {
|
|
579
|
+
position: '',
|
|
580
|
+
left: '',
|
|
581
|
+
top: '',
|
|
582
|
+
margin: '',
|
|
583
|
+
});
|
|
584
|
+
}
|
|
474
585
|
}
|
|
475
586
|
__decorate([
|
|
476
587
|
observable
|
|
@@ -487,6 +598,9 @@ __decorate([
|
|
|
487
598
|
__decorate([
|
|
488
599
|
attr({ mode: 'boolean', attribute: 'resizable' })
|
|
489
600
|
], DialogElement.prototype, "resizable", void 0);
|
|
601
|
+
__decorate([
|
|
602
|
+
attr({ mode: 'boolean' })
|
|
603
|
+
], DialogElement.prototype, "draggable", void 0);
|
|
490
604
|
__decorate([
|
|
491
605
|
attr({ attribute: 'min-width' })
|
|
492
606
|
], DialogElement.prototype, "minWidth", void 0);
|
package/dist/esm/modal/modal.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { attr } from '@microsoft/fast-element';
|
|
3
1
|
import { DialogElement } from '../dialog';
|
|
4
2
|
import { foundationModalStyles as styles } from './modal.styles';
|
|
5
3
|
import { foundationModalTemplate as template } from './modal.template';
|
|
@@ -13,126 +11,12 @@ export const defaultModalConfig = {};
|
|
|
13
11
|
* @tagname %%prefix%%-modal
|
|
14
12
|
*/
|
|
15
13
|
export class Modal extends DialogElement {
|
|
16
|
-
constructor() {
|
|
17
|
-
super(...arguments);
|
|
18
|
-
this.isDragging = false;
|
|
19
|
-
this.offsetX = 0;
|
|
20
|
-
this.offsetY = 0;
|
|
21
|
-
this.modalWidth = 0;
|
|
22
|
-
this.modalHeight = 0;
|
|
23
|
-
this.onMouseDownBound = null;
|
|
24
|
-
this.onMouseMoveBound = null;
|
|
25
|
-
this.onMouseUpBound = null;
|
|
26
|
-
this.draggable = false;
|
|
27
|
-
this.onCloseCallback = () => {
|
|
28
|
-
if (this.draggable && this.mainElement instanceof HTMLElement) {
|
|
29
|
-
Object.assign(this.mainElement.style, {
|
|
30
|
-
position: '',
|
|
31
|
-
left: '',
|
|
32
|
-
top: '',
|
|
33
|
-
margin: '',
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
draggableChanged(ignore, newValue) {
|
|
39
|
-
var _a, _b;
|
|
40
|
-
if (newValue) {
|
|
41
|
-
this.onMouseDownBound = this.onMouseDown.bind(this);
|
|
42
|
-
(_a = this.mainElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mousedown', this.onMouseDownBound);
|
|
43
|
-
}
|
|
44
|
-
else {
|
|
45
|
-
if (this.onMouseDownBound) {
|
|
46
|
-
(_b = this.mainElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.onMouseDownBound);
|
|
47
|
-
this.onMouseDownBound = null;
|
|
48
|
-
}
|
|
49
|
-
this.removeDraggableEventListeners();
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
14
|
show() {
|
|
53
15
|
var _a, _b;
|
|
54
16
|
(_a = this.onShowCallback) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
55
17
|
(_b = this.mainElement) === null || _b === void 0 ? void 0 : _b.showModal();
|
|
56
18
|
}
|
|
57
|
-
connectedCallback() {
|
|
58
|
-
var _a;
|
|
59
|
-
super.connectedCallback();
|
|
60
|
-
if (this.draggable) {
|
|
61
|
-
this.onMouseDownBound = this.onMouseDown.bind(this);
|
|
62
|
-
(_a = this.mainElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mousedown', this.onMouseDownBound);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
disconnectedCallback() {
|
|
66
|
-
var _a;
|
|
67
|
-
super.disconnectedCallback();
|
|
68
|
-
this.removeDraggableEventListeners();
|
|
69
|
-
if (this.onMouseDownBound) {
|
|
70
|
-
(_a = this.mainElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', this.onMouseDownBound);
|
|
71
|
-
this.onMouseDownBound = null;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
isEventTargetInDraggableTarget(event) {
|
|
75
|
-
var _a;
|
|
76
|
-
return (((_a = this.topElement) === null || _a === void 0 ? void 0 : _a.contains(event.target)) || this.isInsideTopSlot(event.target));
|
|
77
|
-
}
|
|
78
|
-
isInsideTopSlot(target) {
|
|
79
|
-
if (!this.topElementSlot)
|
|
80
|
-
return false;
|
|
81
|
-
const assignedNodes = this.topElementSlot.assignedNodes();
|
|
82
|
-
return assignedNodes.some((node) => node === target || node.contains(target));
|
|
83
|
-
}
|
|
84
|
-
onMouseDown(event) {
|
|
85
|
-
if (!this.topElement || !this.isEventTargetInDraggableTarget(event) || this.isDragging)
|
|
86
|
-
return;
|
|
87
|
-
this.isDragging = true;
|
|
88
|
-
const rect = this.mainElement.getBoundingClientRect();
|
|
89
|
-
this.offsetX = event.clientX - rect.left;
|
|
90
|
-
this.offsetY = event.clientY - rect.top;
|
|
91
|
-
// Store the modal’s width and height to minimize calls to getBoundingClientRect
|
|
92
|
-
this.modalWidth = rect.width;
|
|
93
|
-
this.modalHeight = rect.height;
|
|
94
|
-
this.onMouseMoveBound = this.onMouseMove.bind(this);
|
|
95
|
-
this.onMouseUpBound = this.onMouseUp.bind(this);
|
|
96
|
-
document.addEventListener('mousemove', this.onMouseMoveBound);
|
|
97
|
-
document.addEventListener('mouseup', this.onMouseUpBound);
|
|
98
|
-
}
|
|
99
|
-
onMouseMove(event) {
|
|
100
|
-
if (!this.isDragging || !this.mainElement)
|
|
101
|
-
return;
|
|
102
|
-
const viewportWidth = window.innerWidth;
|
|
103
|
-
const viewportHeight = window.innerHeight;
|
|
104
|
-
let newLeft = event.clientX - this.offsetX;
|
|
105
|
-
let newTop = event.clientY - this.offsetY;
|
|
106
|
-
// Ensure modal stays within screen boundaries
|
|
107
|
-
newLeft = Math.max(0, Math.min(viewportWidth - this.modalWidth, newLeft));
|
|
108
|
-
newTop = Math.max(0, Math.min(viewportHeight - this.modalHeight, newTop));
|
|
109
|
-
requestAnimationFrame(() => {
|
|
110
|
-
Object.assign(this.mainElement.style, {
|
|
111
|
-
position: 'absolute',
|
|
112
|
-
left: `${newLeft}px`,
|
|
113
|
-
top: `${newTop}px`,
|
|
114
|
-
margin: '0',
|
|
115
|
-
});
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
onMouseUp() {
|
|
119
|
-
this.isDragging = false;
|
|
120
|
-
this.removeDraggableEventListeners();
|
|
121
|
-
}
|
|
122
|
-
removeDraggableEventListeners() {
|
|
123
|
-
if (this.onMouseMoveBound) {
|
|
124
|
-
document.removeEventListener('mousemove', this.onMouseMoveBound);
|
|
125
|
-
this.onMouseMoveBound = null;
|
|
126
|
-
}
|
|
127
|
-
if (this.onMouseUpBound) {
|
|
128
|
-
document.removeEventListener('mouseup', this.onMouseUpBound);
|
|
129
|
-
this.onMouseUpBound = null;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
19
|
}
|
|
133
|
-
__decorate([
|
|
134
|
-
attr({ mode: 'boolean' })
|
|
135
|
-
], Modal.prototype, "draggable", void 0);
|
|
136
20
|
/**
|
|
137
21
|
* The Foundation Modal
|
|
138
22
|
*
|
package/dist/react.cjs
CHANGED
|
@@ -102,11 +102,6 @@ function _mergeRefs(...refs) {
|
|
|
102
102
|
};
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
const Accordion = React.forwardRef(function Accordion(props, ref) {
|
|
106
|
-
const { children, ...rest } = props;
|
|
107
|
-
return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
|
|
108
|
-
});
|
|
109
|
-
|
|
110
105
|
const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
|
|
111
106
|
const { children, ...rest } = props;
|
|
112
107
|
return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
|
|
@@ -139,6 +134,11 @@ const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref)
|
|
|
139
134
|
return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
|
|
140
135
|
});
|
|
141
136
|
|
|
137
|
+
const Accordion = React.forwardRef(function Accordion(props, ref) {
|
|
138
|
+
const { children, ...rest } = props;
|
|
139
|
+
return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
|
|
140
|
+
});
|
|
141
|
+
|
|
142
142
|
const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
|
|
143
143
|
const { children, ...rest } = props;
|
|
144
144
|
return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
|
|
@@ -877,10 +877,10 @@ const UrlInput = React.forwardRef(function UrlInput(props, ref) {
|
|
|
877
877
|
});
|
|
878
878
|
|
|
879
879
|
module.exports = {
|
|
880
|
-
Accordion,
|
|
881
880
|
AccordionItem,
|
|
882
881
|
ActionsMenu,
|
|
883
882
|
AiCriteriaSearch,
|
|
883
|
+
Accordion,
|
|
884
884
|
AiIndicator,
|
|
885
885
|
Anchor,
|
|
886
886
|
AnchoredRegion,
|
package/dist/react.mjs
CHANGED
|
@@ -100,11 +100,6 @@ function _mergeRefs(...refs) {
|
|
|
100
100
|
};
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
export const Accordion = React.forwardRef(function Accordion(props, ref) {
|
|
104
|
-
const { children, ...rest } = props;
|
|
105
|
-
return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
|
|
106
|
-
});
|
|
107
|
-
|
|
108
103
|
export const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
|
|
109
104
|
const { children, ...rest } = props;
|
|
110
105
|
return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
|
|
@@ -137,6 +132,11 @@ export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props
|
|
|
137
132
|
return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
|
|
138
133
|
});
|
|
139
134
|
|
|
135
|
+
export const Accordion = React.forwardRef(function Accordion(props, ref) {
|
|
136
|
+
const { children, ...rest } = props;
|
|
137
|
+
return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
|
|
138
|
+
});
|
|
139
|
+
|
|
140
140
|
export const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
|
|
141
141
|
const { children, ...rest } = props;
|
|
142
142
|
return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-ui",
|
|
3
3
|
"description": "Genesis Foundation UI",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.441.0",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -85,13 +85,13 @@
|
|
|
85
85
|
}
|
|
86
86
|
},
|
|
87
87
|
"devDependencies": {
|
|
88
|
-
"@genesislcap/foundation-testing": "14.
|
|
89
|
-
"@genesislcap/genx": "14.
|
|
90
|
-
"@genesislcap/rollup-builder": "14.
|
|
91
|
-
"@genesislcap/ts-builder": "14.
|
|
92
|
-
"@genesislcap/uvu-playwright-builder": "14.
|
|
93
|
-
"@genesislcap/vite-builder": "14.
|
|
94
|
-
"@genesislcap/webpack-builder": "14.
|
|
88
|
+
"@genesislcap/foundation-testing": "14.441.0",
|
|
89
|
+
"@genesislcap/genx": "14.441.0",
|
|
90
|
+
"@genesislcap/rollup-builder": "14.441.0",
|
|
91
|
+
"@genesislcap/ts-builder": "14.441.0",
|
|
92
|
+
"@genesislcap/uvu-playwright-builder": "14.441.0",
|
|
93
|
+
"@genesislcap/vite-builder": "14.441.0",
|
|
94
|
+
"@genesislcap/webpack-builder": "14.441.0",
|
|
95
95
|
"copyfiles": "^2.4.1"
|
|
96
96
|
},
|
|
97
97
|
"dependencies": {
|
|
@@ -100,16 +100,16 @@
|
|
|
100
100
|
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
|
101
101
|
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
|
102
102
|
"@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
|
|
103
|
-
"@genesislcap/expression-builder": "14.
|
|
104
|
-
"@genesislcap/foundation-ai": "14.
|
|
105
|
-
"@genesislcap/foundation-comms": "14.
|
|
106
|
-
"@genesislcap/foundation-criteria": "14.
|
|
107
|
-
"@genesislcap/foundation-errors": "14.
|
|
108
|
-
"@genesislcap/foundation-events": "14.
|
|
109
|
-
"@genesislcap/foundation-logger": "14.
|
|
110
|
-
"@genesislcap/foundation-notifications": "14.
|
|
111
|
-
"@genesislcap/foundation-user": "14.
|
|
112
|
-
"@genesislcap/foundation-utils": "14.
|
|
103
|
+
"@genesislcap/expression-builder": "14.441.0",
|
|
104
|
+
"@genesislcap/foundation-ai": "14.441.0",
|
|
105
|
+
"@genesislcap/foundation-comms": "14.441.0",
|
|
106
|
+
"@genesislcap/foundation-criteria": "14.441.0",
|
|
107
|
+
"@genesislcap/foundation-errors": "14.441.0",
|
|
108
|
+
"@genesislcap/foundation-events": "14.441.0",
|
|
109
|
+
"@genesislcap/foundation-logger": "14.441.0",
|
|
110
|
+
"@genesislcap/foundation-notifications": "14.441.0",
|
|
111
|
+
"@genesislcap/foundation-user": "14.441.0",
|
|
112
|
+
"@genesislcap/foundation-utils": "14.441.0",
|
|
113
113
|
"@microsoft/fast-colors": "5.3.1",
|
|
114
114
|
"@microsoft/fast-components": "2.30.6",
|
|
115
115
|
"@microsoft/fast-element": "1.14.0",
|
|
@@ -142,5 +142,5 @@
|
|
|
142
142
|
"require": "./dist/react.cjs"
|
|
143
143
|
}
|
|
144
144
|
},
|
|
145
|
-
"gitHead": "
|
|
145
|
+
"gitHead": "7aa35983955df48854be7f8e1ea6d56eff71c3b5"
|
|
146
146
|
}
|