@linzjs/windows 14.0.0 → 15.0.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/index.js +992 -1278
- package/dist/index.js.map +1 -1
- package/package.json +14 -15
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import React__default, { useRef, useEffect, useState, createContext, useContext, forwardRef, createRef, useLayoutEffect, useCallback, memo, useMemo, PureComponent, createElement, Fragment as Fragment$1 } from 'react';
|
|
3
3
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { LuiButton, LuiIcon, LuiMiniSpinner, LuiCheckboxInput, LuiFileInputBox } from '@linzjs/lui';
|
|
5
|
-
import
|
|
5
|
+
import ReactDOM, { createPortal, flushSync } from 'react-dom';
|
|
6
6
|
|
|
7
7
|
const VoidFn = () => {
|
|
8
8
|
};
|
|
@@ -42,43 +42,15 @@ const tabToSiblingElement = (direction) => {
|
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
44
|
|
|
45
|
-
function
|
|
46
|
-
if (ref === void 0) ref = {};
|
|
47
|
-
var insertAt = ref.insertAt;
|
|
48
|
-
if (typeof document === "undefined") {
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
var head = document.head || document.getElementsByTagName("head")[0];
|
|
52
|
-
var style = document.createElement("style");
|
|
53
|
-
style.type = "text/css";
|
|
54
|
-
if (insertAt === "top") {
|
|
55
|
-
if (head.firstChild) {
|
|
56
|
-
head.insertBefore(style, head.firstChild);
|
|
57
|
-
} else {
|
|
58
|
-
head.appendChild(style);
|
|
59
|
-
}
|
|
60
|
-
} else {
|
|
61
|
-
head.appendChild(style);
|
|
62
|
-
}
|
|
63
|
-
if (style.styleSheet) {
|
|
64
|
-
style.styleSheet.cssText = css;
|
|
65
|
-
} else {
|
|
66
|
-
style.appendChild(document.createTextNode(css));
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
var css_248z = ".WindowPanel-blue .WindowPanel-header,.WindowPanel-blue.WindowPanel-header{background:linear-gradient(270deg,#007198,#00425b 100%);color:#fff}.WindowPanel-blue .WindowPanel-header svg *,.WindowPanel-blue.WindowPanel-header svg *{fill:#fff}.WindowPanel-blue .LuiTab{color:#dcf5f0}.WindowPanel-blue .LuiTab.LuiTab--active{color:#73cdc8}.PopoutWindowContainer,.WindowPanel{color:#2a292c;font-family:Open Sans,system-ui,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:1.5}.LuiCheckboxInput--nomargin{margin:0}.panelDock>.panelDock-content:not(:empty)+.panelDock-empty{display:none}.WindowPanel-children{display:flex;flex:1;overflow:hidden;text-overflow:ellipsis}.WindowPanel-header{align-items:center;border-bottom:2px solid #eaeaea;color:#2a292c;display:flex;flex-direction:row;font-size:1em;font-weight:600;height:48px;justify-content:space-between;line-height:48px;overflow:hidden;padding:0 16px;user-select:none;white-space:nowrap}.WindowPanel-header .LuiTabsGroup{line-height:16px;margin-top:4px}.WindowPanel-header .LuiTabsGroup .LuiTab{min-width:0;padding-bottom:11px;padding-left:8px;padding-right:8px}.WindowPanel-header .LuiTabsGroup .LuiTab:not(.LuiTab--active):focus{padding-bottom:8px;padding-top:8px}.WindowPanel-header .LuiTabsGroup .LuiTab--active{padding-left:7px;padding-right:7px}.WindowPanel-header .LuiTabsGroup .LuiTab--active:after,.WindowPanel-header .LuiTabsGroup .LuiTab--active:focus:after{padding:0}.WindowPanel-header .lui-button+.lui-button,.WindowPanel-header a.lui-button+.lui-button{margin-left:0!important}.WindowPanel-footer{background-color:#fff;border-top:2px solid #eaeaea;display:flex;flex-direction:row;padding:12px;width:100%}.WindowPanel-footer .WindowPanel-footer-left{flex:1}.WindowPanel-footer:where(:not(:has(.WindowPanel-footer-left))){justify-content:right}.WindowPanel{background-color:#fff;border-radius:9px;box-shadow:0 1px 6px 0 rgba(0,0,0,.149),0 6px 10px 0 rgba(0,0,0,.251);box-sizing:border-box;display:flex;flex-direction:column}.WindowPanel .WindowPanel-header{border-radius:9px 9px 0 0}.WindowPanel .WindowPanel-footer{border-radius:0 0 9px 9px}.WindowPanel:where(:has(.WindowPanel-header)) .WindowPanel-content:where(:last-child){border-radius:0 0 9px 9px}.WindowPanel-divider-left,.WindowPanel-divider-right{background-color:#eaeaea;border-left:2px solid #eaeaea;height:19px;width:0}.WindowPanel-divider-left{margin-left:19px;margin-right:15px}.WindowPanel-divider-right{margin-left:8px;margin-right:8px}.WindowPanel-buttons,.WindowPanel-buttons a.lui-button,.WindowPanel-buttons button.lui-button{align-items:center;display:flex}.WindowPanel-buttons a.lui-button span.LuiIcon,.WindowPanel-buttons button.lui-button span.LuiIcon{margin-left:auto;margin-right:auto}.WindowPanel-header-title{align-items:center;display:flex;overflow:hidden;white-space:nowrap}.WindowPanel-header-title-icon{fill:#6b6966!important;margin-right:8px}.WindowPanel-content{display:flex;flex:1;flex-direction:column;overflow:auto}.RibbonMenuSeparator{background-color:#dad7d6;height:1px;margin:4px}.RibbonMenuOption{color:#2a292c;font-family:Open Sans,system-ui,sans-serif}.RibbonMenuOption path{fill:#6b6966}.RibbonMenuOption{align-items:center;background-color:initial;border:1px #0000;box-sizing:border-box;display:flex;font-size:16px;font-weight:400;gap:8px;line-height:24px;min-width:180px;outline:none;padding:6px 12px}.RibbonMenuOption:focus,.RibbonMenuOption:hover{background-color:#e2f3f7}.RibbonMenuOption:disabled{color:#989189}.RibbonMenuOption:disabled path{fill:#989189}.RibbonDemoContent{gap:12px;padding:20px 24px 24px 16px}.RibbonDemoSwitch{align-items:start;display:flex;flex-direction:row;gap:12px;padding:12px 0 0}.RibbonDemoSwitch div:first-child{display:flex}.RibbonDemoSwitch-textHeader{font-size:16px;font-weight:600;line-height:20px}.RibbonDemoSwitch-textDescription{color:#6b6966;font-size:14px;font-weight:400}.RibbonButton{box-sizing:border-box}.RibbonButton img{max-width:100%}.RibbonButton{fill:#007198;background-color:initial;border:2px solid #fff;border-radius:5px;color:#007198;height:40px;margin:2px;padding:4px;position:relative;width:40px}.RibbonButton:hover{background-color:#e2f3f7}.RibbonButton .RibbonButton-disabled,.RibbonButton:disabled{fill:#6b6966;background-color:#eaeaea;cursor:not-allowed}.RibbonButton .RibbonButton-disabled svg *,.RibbonButton:disabled svg *{fill:#6b6966}.RibbonButton span.LuiIcon{display:block;margin:auto}.RibbonButtonProcessing{align-items:center;display:flex;height:44px;justify-content:center;width:44px}.RibbonButtonSkeleton{line-height:1px;margin:0;padding:4px}.RibbonButtonSkeleton>div{border:2px solid #0000;margin:0;padding:0}.RibbonButton-selected,.RibbonButton:has(+:popover-open){background-color:#007198!important;box-shadow:inset 0 2px 4px #295c82;color:#fff!important;cursor:pointer}.RibbonButton-selected svg path,.RibbonButton:has(+:popover-open) svg path{fill:#fff!important;color:#fff!important}.RibbonButton-horizontalGroup,.RibbonButton-verticalGroup,.RibbonButtonContent{align-items:center;background-color:#fff;border-radius:5px;box-shadow:0 0 10px #0003;display:inline-flex;padding:0}.RibbonButton-separator{background-color:#eaeaea}.RibbonButton-verticalGroup{flex-direction:column}.RibbonButton-verticalGroup .RibbonButton-separator{height:2px;margin-bottom:1px;margin-top:1px;width:44px}.RibbonButton-horizontalGroup{flex-direction:row}.RibbonButton-horizontalGroup .RibbonButton-separator{height:44px;margin-left:1px;margin-right:1px;width:2px}.RibbonSliderMenu[popover]{background:#0000;border:0;inset:auto;margin:0;position:fixed}.RibbonSliderMenu:popover-open{display:flex;flex-direction:row}.RibbonSliderMenu-right,.RibbonSliderMenu-right-down{translate:2px -6px}.RibbonSliderMenu-left-center,.RibbonSliderMenu-right-center{translate:2px 20px}.RibbonSliderMenu-left,.RibbonSliderMenu-left-down{translate:-2px -6px}.RibbonSliderMenu-right-up{translate:2px 6px}.RibbonSliderMenu-left-up{translate:-2px 6px}.RibbonSliderMenu-up,.RibbonSliderMenu-up-right{translate:-6px -2px}.RibbonSliderMenu-down,.RibbonSliderMenu-down-right{translate:-6px 2px}.RibbonSliderMenu-down-left{translate:6px 2px}.CopyToClipboard{cursor:pointer}.windows_tooltip{box-sizing:border-box;cursor:pointer;position:relative}.windows_tooltip .windows_tooltiptext{background-color:#fff;box-shadow:0 2px 3px rgba(0,0,0,.251),0 0 3px rgba(0,0,0,.149);color:#2e3438;font-size:13px;left:calc(100% + 8px);line-height:18px;opacity:0;overflow:hidden;padding:4px 8px;pointer-events:none;position:absolute;text-align:left;transform:translateY(42%);transition:opacity .3s ease,width .3s ease;z-index:1}.windows_tooltip:hover .windows_tooltiptext{opacity:1;visibility:visible}dialog.LuiModalAsync,div.LuiModalAsync{color:#2a292c;font-family:Open Sans,system-ui,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:1.5}dialog.LuiModalAsync .LuiModalAsync-header h4,div.LuiModalAsync .LuiModalAsync-header h4{color:#017a76;font-family:Open Sans,system-ui,sans-serif;font-size:1.375rem;font-style:normal;font-weight:400;line-height:1.5;margin-bottom:0}dialog.LuiModalAsync::backdrop{background:#0000001a}dialog.LuiModalAsync,div.LuiModalAsync{border:none;border-radius:9px;box-shadow:0 2px 3px 0 rgba(0,0,0,.251),0 0 3px 0 rgba(0,0,0,.149);box-sizing:border-box;display:flex;flex-direction:column;gap:1.5rem;max-height:80vh;max-width:80vw;min-width:400px;padding:1.5rem}dialog.LuiModalAsync:focus-visible,div.LuiModalAsync:focus-visible{outline:none}dialog.LuiModalAsync .LuiModalAsync-header-icon,div.LuiModalAsync .LuiModalAsync-header-icon{fill:#3a7cdf}dialog.LuiModalAsync .LuiModalAsync-help-icon *,div.LuiModalAsync .LuiModalAsync-help-icon *{fill:#989189}dialog.LuiModalAsync.LuiModalPrefab-success .LuiModalAsync-header .LuiModalAsync-header-icon,div.LuiModalAsync.LuiModalPrefab-success .LuiModalAsync-header .LuiModalAsync-header-icon{fill:#0aa245}dialog.LuiModalAsync.LuiModalPrefab-success,div.LuiModalAsync.LuiModalPrefab-success{border-left:.5rem solid #0aa245}dialog.LuiModalAsync.LuiModalPrefab-info .LuiModalAsync-header .LuiModalAsync-header-icon,div.LuiModalAsync.LuiModalPrefab-info .LuiModalAsync-header .LuiModalAsync-header-icon{fill:#3a7cdf}dialog.LuiModalAsync.LuiModalPrefab-info,div.LuiModalAsync.LuiModalPrefab-info{border-left:0}dialog.LuiModalAsync.LuiModalPrefab-warning .LuiModalAsync-header .LuiModalAsync-header-icon,div.LuiModalAsync.LuiModalPrefab-warning .LuiModalAsync-header .LuiModalAsync-header-icon{fill:#ea6a2e}dialog.LuiModalAsync.LuiModalPrefab-warning,div.LuiModalAsync.LuiModalPrefab-warning{border-left:.5rem solid #ea6a2e}dialog.LuiModalAsync.LuiModalPrefab-error .LuiModalAsync-header .LuiModalAsync-header-icon,div.LuiModalAsync.LuiModalPrefab-error .LuiModalAsync-header .LuiModalAsync-header-icon{fill:#c00}dialog.LuiModalAsync.LuiModalPrefab-error,div.LuiModalAsync.LuiModalPrefab-error{border-left:.75rem solid #c00}dialog.LuiModalAsync.LuiModalPrefab-blocked .LuiModalAsync-header .LuiModalAsync-header-icon,div.LuiModalAsync.LuiModalPrefab-blocked .LuiModalAsync-header .LuiModalAsync-header-icon{fill:#6b6966}dialog.LuiModalAsync.LuiModalPrefab-blocked,dialog.LuiModalAsync.LuiModalPrefab-progress,div.LuiModalAsync.LuiModalPrefab-blocked,div.LuiModalAsync.LuiModalPrefab-progress{border-left:0}dialog.LuiModalAsync h4,div.LuiModalAsync h4{margin-top:0}dialog.LuiModalAsync .LuiModalAsync-ButtonGroup,div.LuiModalAsync .LuiModalAsync-ButtonGroup{display:flex}dialog.LuiModalAsync .LuiModalAsync-ButtonGroup button,div.LuiModalAsync .LuiModalAsync-ButtonGroup button{border-color:#0000;flex:1}dialog.LuiModalAsync .LuiModalAsync-header,div.LuiModalAsync .LuiModalAsync-header{align-items:center;display:flex;flex-direction:row;gap:.5rem}dialog.LuiModalAsync .LuiModalAsync-header h4,div.LuiModalAsync .LuiModalAsync-header h4{color:#2a292c;flex:1}dialog.LuiModalAsync .LuiModalAsync-main,div.LuiModalAsync .LuiModalAsync-main{display:flex;flex:1 1 auto;flex-direction:column;gap:1rem;overflow:hidden}dialog.LuiModalAsync .LuiModalAsync-content,div.LuiModalAsync .LuiModalAsync-content{flex:1;font-weight:400;overflow:auto}dialog.LuiModalAsync .lui-button:focus,div.LuiModalAsync .lui-button:focus{outline:.06rem solid #00425d}dialog.LuiModalPrefab-file{gap:.75rem;padding:1.5rem}dialog.LuiModalPrefab-file .LuiModalAsync-content{padding-bottom:.5rem}button{border:none;border-radius:3px;font-family:Open Sans,system-ui,sans-serif;font-size:1rem;font-style:normal;font-weight:700;line-height:24px;margin:0;padding:.4375rem 1rem;transition:background-color .3s,height .3s,border .3s,fill .3s}button i,button svg *{transition:color .3s,fill .3s}button:hover{cursor:pointer}a.lui-button{border:none;border-radius:3px;font-family:Open Sans,system-ui,sans-serif;font-size:1rem;font-style:normal;font-weight:700;line-height:24px;margin:0;padding:.4375rem 1rem;transition:background-color .3s,height .3s,border .3s,fill .3s}a.lui-button i,a.lui-button svg *{transition:color .3s,fill .3s}a.lui-button:hover{cursor:pointer}a.lui-button{display:inline-block;text-decoration:none}.lui-button,a.lui-button{text-align:center}.lui-button.lui-button-icon-right,a.lui-button.lui-button-icon-right{padding:.25rem .5rem .5rem .75rem}.lui-button.lui-button-icon-right .LuiIcon,a.lui-button.lui-button-icon-right .LuiIcon{margin:3px 0 -7px 11px}.lui-button.lui-button-icon-right i,a.lui-button.lui-button-icon-right i{margin:0 0 0 12px;position:relative;top:6px}.lui-button.lui-button-icon,a.lui-button.lui-button-icon{padding:.4375rem 1rem .4375rem .4375rem}.lui-button.lui-button-icon .LuiIcon,a.lui-button.lui-button-icon .LuiIcon{margin:0 8px -7px 0}.lui-button.lui-button-icon i,a.lui-button.lui-button-icon i{margin:0 12px 0 0;position:relative;top:6px}.lui-button-primary,a.lui-button-primary{background-color:#007198;border:1px solid #007198;color:#fff;font-weight:600;line-height:24px}.lui-button-primary i,.lui-button-primary svg *,a.lui-button-primary i,a.lui-button-primary svg *{fill:#fff;color:#fff}.lui-button-primary:visited,a.lui-button-primary:visited{color:#fff}.lui-button-primary:hover:where(:not([aria-busy])),a.lui-button-primary:hover:where(:not([aria-busy])){background-color:#005678;border:1px solid #005678;color:#fff;cursor:pointer}.lui-button-primary:hover:where(:not([aria-busy])) i,.lui-button-primary:hover:where(:not([aria-busy])) svg *,a.lui-button-primary:hover:where(:not([aria-busy])) i,a.lui-button-primary:hover:where(:not([aria-busy])) svg *{fill:#fff;color:#fff}.lui-button-primary:disabled:where(:not([aria-busy])),a.lui-button-primary:disabled:where(:not([aria-busy])){background:#eaeaea;border-color:#6b6966;color:#989189}.lui-button-primary:disabled:where(:not([aria-busy])) i,.lui-button-primary:disabled:where(:not([aria-busy])) svg *,a.lui-button-primary:disabled:where(:not([aria-busy])) i,a.lui-button-primary:disabled:where(:not([aria-busy])) svg *{fill:#6b6966;color:#6b6966}.lui-button-primary:disabled:where(:not([aria-busy])):hover,a.lui-button-primary:disabled:where(:not([aria-busy])):hover{cursor:not-allowed}.lui-button-primary[aria-busy]:hover,a.lui-button-primary[aria-busy]:hover{cursor:progress}.lui-button-primary[aria-busy]:not(:active),.lui-button-primary[aria-busy]:not(:active) i,.lui-button-primary[aria-busy]:not(:active) svg *,a.lui-button-primary[aria-busy]:not(:active),a.lui-button-primary[aria-busy]:not(:active) i,a.lui-button-primary[aria-busy]:not(:active) svg *{transition:none}.lui-button-primary:active:enabled,a.lui-button-primary:active:enabled{background-color:#00425d;border:1px solid #00425d;color:#ffffffe6;cursor:pointer}.lui-button-primary:active:enabled i,.lui-button-primary:active:enabled svg *,a.lui-button-primary:active:enabled i,a.lui-button-primary:active:enabled svg *{fill:#fff9;color:#fff9}.lui-button-secondary,a.lui-button-secondary{background-color:#fff;border:1px solid #007198;color:#007198;font-weight:600;line-height:24px}.lui-button-secondary i,.lui-button-secondary svg *,a.lui-button-secondary i,a.lui-button-secondary svg *{fill:#007198}.lui-button-secondary:visited,a.lui-button-secondary:visited{color:#007198}.lui-button-secondary:hover:where(:not([aria-busy])),a.lui-button-secondary:hover:where(:not([aria-busy])){background-color:#e2f3f7;border:1px solid #007198;color:#007198;cursor:pointer}.lui-button-secondary:hover:where(:not([aria-busy])) i,.lui-button-secondary:hover:where(:not([aria-busy])) svg *,a.lui-button-secondary:hover:where(:not([aria-busy])) i,a.lui-button-secondary:hover:where(:not([aria-busy])) svg *{fill:#007198;color:#007198}.lui-button-secondary:disabled:where(:not([aria-busy])),a.lui-button-secondary:disabled:where(:not([aria-busy])){background:#eaeaea;border-color:#6b6966;color:#989189}.lui-button-secondary:disabled:where(:not([aria-busy])) i,.lui-button-secondary:disabled:where(:not([aria-busy])) svg *,a.lui-button-secondary:disabled:where(:not([aria-busy])) i,a.lui-button-secondary:disabled:where(:not([aria-busy])) svg *{fill:#6b6966;color:#6b6966}.lui-button-secondary:disabled:where(:not([aria-busy])):hover,a.lui-button-secondary:disabled:where(:not([aria-busy])):hover{cursor:not-allowed}.lui-button-secondary[aria-busy]:hover,a.lui-button-secondary[aria-busy]:hover{cursor:progress}.lui-button-secondary[aria-busy]:not(:active),.lui-button-secondary[aria-busy]:not(:active) i,.lui-button-secondary[aria-busy]:not(:active) svg *,a.lui-button-secondary[aria-busy]:not(:active),a.lui-button-secondary[aria-busy]:not(:active) i,a.lui-button-secondary[aria-busy]:not(:active) svg *{transition:none}.lui-button-secondary:active:enabled,a.lui-button-secondary:active:enabled{background-color:#007198;border:1px solid #007198;color:#ffffffe6;cursor:pointer}.lui-button-secondary:active:enabled i,.lui-button-secondary:active:enabled svg *,a.lui-button-secondary:active:enabled i,a.lui-button-secondary:active:enabled svg *{fill:#fff9;color:#fff9}.lui-button-secondary.lui-button-danger:not(:disabled),a.lui-button-secondary.lui-button-danger:not(:disabled){color:#c00}.lui-button-secondary.lui-button-danger:where([aria-busy]),a.lui-button-secondary.lui-button-danger:where([aria-busy]){color:#c00}.lui-button-secondary.lui-button-danger:not(:disabled),.lui-button-secondary.lui-button-danger[aria-busy],a.lui-button-secondary.lui-button-danger:not(:disabled),a.lui-button-secondary.lui-button-danger[aria-busy]{background-color:#fff;border-color:#c00}.lui-button-secondary.lui-button-danger:not(:disabled) i,.lui-button-secondary.lui-button-danger:not(:disabled) svg *,.lui-button-secondary.lui-button-danger[aria-busy] i,.lui-button-secondary.lui-button-danger[aria-busy] svg *,a.lui-button-secondary.lui-button-danger:not(:disabled) i,a.lui-button-secondary.lui-button-danger:not(:disabled) svg *,a.lui-button-secondary.lui-button-danger[aria-busy] i,a.lui-button-secondary.lui-button-danger[aria-busy] svg *{fill:#c00;color:#c00}.lui-button-secondary.lui-button-danger:hover:enabled,a.lui-button-secondary.lui-button-danger:hover:enabled{background-color:#f5cccc;border-color:#c00;color:#c00}.lui-button-secondary.lui-button-danger:hover:enabled i,.lui-button-secondary.lui-button-danger:hover:enabled svg *,a.lui-button-secondary.lui-button-danger:hover:enabled i,a.lui-button-secondary.lui-button-danger:hover:enabled svg *{fill:#c00;color:#c00}.lui-button-secondary.lui-button-danger:active:enabled,a.lui-button-secondary.lui-button-danger:active:enabled{background-color:#c00;border-color:#c00;color:#f5cccce6}.lui-button-secondary.lui-button-danger:active:enabled i,.lui-button-secondary.lui-button-danger:active:enabled svg *,a.lui-button-secondary.lui-button-danger:active:enabled i,a.lui-button-secondary.lui-button-danger:active:enabled svg *{fill:#f5cccce6;color:#f5cccce6}.lui-button-secondary i,.lui-button-secondary svg *,a.lui-button-secondary i,a.lui-button-secondary svg *{color:#007198}.lui-button-secondary:hover:where(:not([aria-busy])) i,a.lui-button-secondary:hover:where(:not([aria-busy])) i{color:#007198}.lui-button-tertiary,a.lui-button-tertiary{background-color:initial;border:0 solid #0000;color:#007198;font-weight:600;line-height:22px}.lui-button-tertiary i,.lui-button-tertiary svg *,a.lui-button-tertiary i,a.lui-button-tertiary svg *{fill:#007198;color:#007198}.lui-button-tertiary:visited,a.lui-button-tertiary:visited{color:#007198}.lui-button-tertiary:hover:where(:not([aria-busy])),a.lui-button-tertiary:hover:where(:not([aria-busy])){background-color:#e2f3f7;border:1px solid #fff;color:#007198;cursor:pointer}.lui-button-tertiary:hover:where(:not([aria-busy])) i,.lui-button-tertiary:hover:where(:not([aria-busy])) svg *,a.lui-button-tertiary:hover:where(:not([aria-busy])) i,a.lui-button-tertiary:hover:where(:not([aria-busy])) svg *{fill:#007198;color:#007198}.lui-button-tertiary:disabled:where(:not([aria-busy])),a.lui-button-tertiary:disabled:where(:not([aria-busy])){background:#eaeaea;border-color:#6b6966}.lui-button-tertiary:disabled:where(:not([aria-busy])) i,.lui-button-tertiary:disabled:where(:not([aria-busy])) svg *,a.lui-button-tertiary:disabled:where(:not([aria-busy])) i,a.lui-button-tertiary:disabled:where(:not([aria-busy])) svg *{fill:#6b6966;color:#6b6966}.lui-button-tertiary[aria-busy]:hover,a.lui-button-tertiary[aria-busy]:hover{cursor:progress}.lui-button-tertiary[aria-busy]:not(:active),.lui-button-tertiary[aria-busy]:not(:active) i,.lui-button-tertiary[aria-busy]:not(:active) svg *,a.lui-button-tertiary[aria-busy]:not(:active),a.lui-button-tertiary[aria-busy]:not(:active) i,a.lui-button-tertiary[aria-busy]:not(:active) svg *{transition:none}.lui-button-tertiary:active:enabled,a.lui-button-tertiary:active:enabled{background-color:#007198;border:1px solid #fff;color:#ffffffe6;cursor:pointer}.lui-button-tertiary:active:enabled i,.lui-button-tertiary:active:enabled svg *,a.lui-button-tertiary:active:enabled i,a.lui-button-tertiary:active:enabled svg *{fill:#fff9;color:#fff9}.lui-button-tertiary.lui-button-danger:not(:disabled),a.lui-button-tertiary.lui-button-danger:not(:disabled){color:#c00}.lui-button-tertiary.lui-button-danger:where([aria-busy]),a.lui-button-tertiary.lui-button-danger:where([aria-busy]){color:#c00}.lui-button-tertiary.lui-button-danger:not(:disabled),.lui-button-tertiary.lui-button-danger[aria-busy],a.lui-button-tertiary.lui-button-danger:not(:disabled),a.lui-button-tertiary.lui-button-danger[aria-busy]{background-color:initial;border-color:#0000}.lui-button-tertiary.lui-button-danger:not(:disabled) i,.lui-button-tertiary.lui-button-danger:not(:disabled) svg *,.lui-button-tertiary.lui-button-danger[aria-busy] i,.lui-button-tertiary.lui-button-danger[aria-busy] svg *,a.lui-button-tertiary.lui-button-danger:not(:disabled) i,a.lui-button-tertiary.lui-button-danger:not(:disabled) svg *,a.lui-button-tertiary.lui-button-danger[aria-busy] i,a.lui-button-tertiary.lui-button-danger[aria-busy] svg *{fill:#c00;color:#c00}.lui-button-tertiary.lui-button-danger:hover:enabled,a.lui-button-tertiary.lui-button-danger:hover:enabled{background-color:#f5cccc;border-color:#f5cccc;color:#c00}.lui-button-tertiary.lui-button-danger:hover:enabled i,.lui-button-tertiary.lui-button-danger:hover:enabled svg *,a.lui-button-tertiary.lui-button-danger:hover:enabled i,a.lui-button-tertiary.lui-button-danger:hover:enabled svg *{fill:#c00;color:#c00}.lui-button-tertiary.lui-button-danger:active:enabled,a.lui-button-tertiary.lui-button-danger:active:enabled{background-color:#c00;border-color:#c00;color:#f5cccce6}.lui-button-tertiary.lui-button-danger:active:enabled i,.lui-button-tertiary.lui-button-danger:active:enabled svg *,a.lui-button-tertiary.lui-button-danger:active:enabled i,a.lui-button-tertiary.lui-button-danger:active:enabled svg *{fill:#f5cccce6;color:#f5cccce6}.lui-button-tertiary,a.lui-button-tertiary{border:none;font-family:Open Sans,system-ui,sans-serif;font-style:normal;font-weight:400;margin:2px}.lui-button-tertiary:hover:where(:not([aria-busy])),a.lui-button-tertiary:hover:where(:not([aria-busy])){border:none}.lui-button-tertiary:active:enabled:where(:not([aria-busy])),a.lui-button-tertiary:active:enabled:where(:not([aria-busy])){border:none}.lui-button-tertiary:disabled:where(:not([aria-busy])),a.lui-button-tertiary:disabled:where(:not([aria-busy])){background:none;border:none;color:#989189;text-decoration:none}.lui-button-tertiary:disabled:where(:not([aria-busy])):hover,a.lui-button-tertiary:disabled:where(:not([aria-busy])):hover{cursor:not-allowed}.lui-button-tertiary:disabled:where(:not([aria-busy])) i,.lui-button-tertiary:disabled:where(:not([aria-busy])) svg *,a.lui-button-tertiary:disabled:where(:not([aria-busy])) i,a.lui-button-tertiary:disabled:where(:not([aria-busy])) svg *{fill:#989189;color:#989189}.lui-button-success:not(:disabled),a.lui-button-success:not(:disabled){color:#fff}.lui-button-success:where([aria-busy]),a.lui-button-success:where([aria-busy]){color:#fff}.lui-button-success:not(:disabled),.lui-button-success[aria-busy],a.lui-button-success:not(:disabled),a.lui-button-success[aria-busy]{background-color:#0aa245;border-color:#0aa245}.lui-button-success:not(:disabled) i,.lui-button-success:not(:disabled) svg *,.lui-button-success[aria-busy] i,.lui-button-success[aria-busy] svg *,a.lui-button-success:not(:disabled) i,a.lui-button-success:not(:disabled) svg *,a.lui-button-success[aria-busy] i,a.lui-button-success[aria-busy] svg *{fill:#fff;color:#fff}.lui-button-success:hover:enabled,a.lui-button-success:hover:enabled{background-color:#107c3a;border-color:#107c3a;color:#fff}.lui-button-success:hover:enabled i,.lui-button-success:hover:enabled svg *,a.lui-button-success:hover:enabled i,a.lui-button-success:hover:enabled svg *{fill:#fff;color:#fff}.lui-button-success:active:enabled,a.lui-button-success:active:enabled{background-color:#094a22;border-color:#094a22;color:#ffffffe6}.lui-button-success:active:enabled i,.lui-button-success:active:enabled svg *,a.lui-button-success:active:enabled i,a.lui-button-success:active:enabled svg *{fill:#ffffffe6;color:#ffffffe6}.lui-button-error:not(:disabled),.lui-button.lui-button-primary.lui-button-danger:not(:disabled),a.lui-button-error:not(:disabled),a.lui-button.lui-button-primary.lui-button-danger:not(:disabled){color:#fff}.lui-button-error:where([aria-busy]),.lui-button.lui-button-primary.lui-button-danger:where([aria-busy]),a.lui-button-error:where([aria-busy]),a.lui-button.lui-button-primary.lui-button-danger:where([aria-busy]){color:#fff}.lui-button-error:not(:disabled),.lui-button-error[aria-busy],.lui-button.lui-button-primary.lui-button-danger:not(:disabled),.lui-button.lui-button-primary.lui-button-danger[aria-busy],a.lui-button-error:not(:disabled),a.lui-button-error[aria-busy],a.lui-button.lui-button-primary.lui-button-danger:not(:disabled),a.lui-button.lui-button-primary.lui-button-danger[aria-busy]{background-color:#c00;border-color:#c00}.lui-button-error:not(:disabled) i,.lui-button-error:not(:disabled) svg *,.lui-button-error[aria-busy] i,.lui-button-error[aria-busy] svg *,.lui-button.lui-button-primary.lui-button-danger:not(:disabled) i,.lui-button.lui-button-primary.lui-button-danger:not(:disabled) svg *,.lui-button.lui-button-primary.lui-button-danger[aria-busy] i,.lui-button.lui-button-primary.lui-button-danger[aria-busy] svg *,a.lui-button-error:not(:disabled) i,a.lui-button-error:not(:disabled) svg *,a.lui-button-error[aria-busy] i,a.lui-button-error[aria-busy] svg *,a.lui-button.lui-button-primary.lui-button-danger:not(:disabled) i,a.lui-button.lui-button-primary.lui-button-danger:not(:disabled) svg *,a.lui-button.lui-button-primary.lui-button-danger[aria-busy] i,a.lui-button.lui-button-primary.lui-button-danger[aria-busy] svg *{fill:#fff;color:#fff}.lui-button-error:hover:enabled,.lui-button.lui-button-primary.lui-button-danger:hover:enabled,a.lui-button-error:hover:enabled,a.lui-button.lui-button-primary.lui-button-danger:hover:enabled{background-color:#8f0000;border-color:#8f0000;color:#fff}.lui-button-error:hover:enabled i,.lui-button-error:hover:enabled svg *,.lui-button.lui-button-primary.lui-button-danger:hover:enabled i,.lui-button.lui-button-primary.lui-button-danger:hover:enabled svg *,a.lui-button-error:hover:enabled i,a.lui-button-error:hover:enabled svg *,a.lui-button.lui-button-primary.lui-button-danger:hover:enabled i,a.lui-button.lui-button-primary.lui-button-danger:hover:enabled svg *{fill:#fff;color:#fff}.lui-button-error:active:enabled,.lui-button.lui-button-primary.lui-button-danger:active:enabled,a.lui-button-error:active:enabled,a.lui-button.lui-button-primary.lui-button-danger:active:enabled{background-color:#5a0000;border-color:#5a0000;color:#ffffffe6}.lui-button-error:active:enabled i,.lui-button-error:active:enabled svg *,.lui-button.lui-button-primary.lui-button-danger:active:enabled i,.lui-button.lui-button-primary.lui-button-danger:active:enabled svg *,a.lui-button-error:active:enabled i,a.lui-button-error:active:enabled svg *,a.lui-button.lui-button-primary.lui-button-danger:active:enabled i,a.lui-button.lui-button-primary.lui-button-danger:active:enabled svg *{fill:#ffffffe6;color:#ffffffe6}.lui-button-error,.lui-button-success,a.lui-button-error,a.lui-button-success{font-weight:600;line-height:24px}.lui-button-reversed-no-bg,a.lui-button-reversed-no-bg{background-color:initial;border:1px solid #0000;color:#fff;font-weight:600;line-height:24px}.lui-button-reversed-no-bg i,.lui-button-reversed-no-bg svg *,a.lui-button-reversed-no-bg i,a.lui-button-reversed-no-bg svg *{fill:#fff;color:#fff}.lui-button-reversed-no-bg:visited,a.lui-button-reversed-no-bg:visited{color:#fff}.lui-button-reversed-no-bg:hover:where(:not([aria-busy])),a.lui-button-reversed-no-bg:hover:where(:not([aria-busy])){background-color:initial;border:1px solid #0000;color:#fffc;cursor:pointer}.lui-button-reversed-no-bg:hover:where(:not([aria-busy])) i,.lui-button-reversed-no-bg:hover:where(:not([aria-busy])) svg *,a.lui-button-reversed-no-bg:hover:where(:not([aria-busy])) i,a.lui-button-reversed-no-bg:hover:where(:not([aria-busy])) svg *{fill:#fffc;color:#fffc}.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])),a.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])){background:#eaeaea;border-color:#6b6966;color:#989189}.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])) i,.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])) svg *,a.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])) i,a.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])) svg *{fill:#6b6966;color:#6b6966}.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])):hover,a.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])):hover{cursor:not-allowed}.lui-button-reversed-no-bg[aria-busy]:hover,a.lui-button-reversed-no-bg[aria-busy]:hover{cursor:progress}.lui-button-reversed-no-bg[aria-busy]:not(:active),.lui-button-reversed-no-bg[aria-busy]:not(:active) i,.lui-button-reversed-no-bg[aria-busy]:not(:active) svg *,a.lui-button-reversed-no-bg[aria-busy]:not(:active),a.lui-button-reversed-no-bg[aria-busy]:not(:active) i,a.lui-button-reversed-no-bg[aria-busy]:not(:active) svg *{transition:none}.lui-button-reversed-no-bg:active:enabled,a.lui-button-reversed-no-bg:active:enabled{background-color:initial;border:1px solid #0000;color:#ffffffe6;cursor:pointer}.lui-button-reversed-no-bg:active:enabled i,.lui-button-reversed-no-bg:active:enabled svg *,a.lui-button-reversed-no-bg:active:enabled i,a.lui-button-reversed-no-bg:active:enabled svg *{fill:#fff9;color:#fff9}.lui-button-reversed-no-bg i,a.lui-button-reversed-no-bg i{font-size:2.5rem;top:13px!important}.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])),a.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])){background:none;border:0;color:#fff6}.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])) i,.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])) svg *,a.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])) i,a.lui-button-reversed-no-bg:disabled:where(:not([aria-busy])) svg *{fill:#fff6;color:#fff6}.lui-button-reversed-no-bg:disabled:hover,a.lui-button-reversed-no-bg:disabled:hover{cursor:not-allowed}.lui-button-text,a.lui-button-text{background-color:initial;border:0 solid #fff;color:#1f69c3;font-weight:600;line-height:24px}.lui-button-text i,.lui-button-text svg *,a.lui-button-text i,a.lui-button-text svg *{fill:#1f69c3;color:#1f69c3}.lui-button-text:visited,a.lui-button-text:visited{color:#1f69c3}.lui-button-text:hover:where(:not([aria-busy])),a.lui-button-text:hover:where(:not([aria-busy])){background-color:initial;border:1px;color:#00425d;cursor:pointer}.lui-button-text:hover:where(:not([aria-busy])) i,.lui-button-text:hover:where(:not([aria-busy])) svg *,a.lui-button-text:hover:where(:not([aria-busy])) i,a.lui-button-text:hover:where(:not([aria-busy])) svg *{fill:#00425d;color:#00425d}.lui-button-text:disabled:where(:not([aria-busy])),a.lui-button-text:disabled:where(:not([aria-busy])){background:#eaeaea;border-color:#6b6966}.lui-button-text:disabled:where(:not([aria-busy])) i,.lui-button-text:disabled:where(:not([aria-busy])) svg *,a.lui-button-text:disabled:where(:not([aria-busy])) i,a.lui-button-text:disabled:where(:not([aria-busy])) svg *{fill:#6b6966;color:#6b6966}.lui-button-text[aria-busy]:not(:active),.lui-button-text[aria-busy]:not(:active) i,.lui-button-text[aria-busy]:not(:active) svg *,a.lui-button-text[aria-busy]:not(:active),a.lui-button-text[aria-busy]:not(:active) i,a.lui-button-text[aria-busy]:not(:active) svg *{transition:none}.lui-button-text:active:enabled,a.lui-button-text:active:enabled{background-color:none;border:1px;color:#00425de6}.lui-button-text:active:enabled i,.lui-button-text:active:enabled svg *,a.lui-button-text:active:enabled i,a.lui-button-text:active:enabled svg *{fill:#00425d;color:#00425d}.lui-button-text.lui-button-danger:not(:disabled),a.lui-button-text.lui-button-danger:not(:disabled){color:#c00}.lui-button-text.lui-button-danger:where([aria-busy]),a.lui-button-text.lui-button-danger:where([aria-busy]){color:#c00}.lui-button-text.lui-button-danger:not(:disabled),.lui-button-text.lui-button-danger[aria-busy],a.lui-button-text.lui-button-danger:not(:disabled),a.lui-button-text.lui-button-danger[aria-busy]{background-color:initial;border-color:#c00}.lui-button-text.lui-button-danger:not(:disabled) i,.lui-button-text.lui-button-danger:not(:disabled) svg *,.lui-button-text.lui-button-danger[aria-busy] i,.lui-button-text.lui-button-danger[aria-busy] svg *,a.lui-button-text.lui-button-danger:not(:disabled) i,a.lui-button-text.lui-button-danger:not(:disabled) svg *,a.lui-button-text.lui-button-danger[aria-busy] i,a.lui-button-text.lui-button-danger[aria-busy] svg *{fill:#c00;color:#c00}.lui-button-text.lui-button-danger:hover:enabled,a.lui-button-text.lui-button-danger:hover:enabled{background-color:initial;border-color:#8f0000;color:#8f0000}.lui-button-text.lui-button-danger:hover:enabled i,.lui-button-text.lui-button-danger:hover:enabled svg *,a.lui-button-text.lui-button-danger:hover:enabled i,a.lui-button-text.lui-button-danger:hover:enabled svg *{fill:#8f0000;color:#8f0000}.lui-button-text.lui-button-danger:active:enabled,a.lui-button-text.lui-button-danger:active:enabled{background-color:initial;border-color:#5a0000;color:#5a0000e6}.lui-button-text.lui-button-danger:active:enabled i,.lui-button-text.lui-button-danger:active:enabled svg *,a.lui-button-text.lui-button-danger:active:enabled i,a.lui-button-text.lui-button-danger:active:enabled svg *{fill:#5a0000e6;color:#5a0000e6}.lui-button-text,a.lui-button-text{border-radius:0;font-family:Open Sans,system-ui,sans-serif;font-style:normal;font-weight:400;margin:0;padding:0;text-decoration:underline}.lui-button-text:active:enabled,a.lui-button-text:active:enabled{background-color:#fff;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;cursor:pointer}.lui-button-text:active:enabled i,.lui-button-text:active:enabled svg *,a.lui-button-text:active:enabled i,a.lui-button-text:active:enabled svg *{fill:#fff;color:#fff}.lui-button-text:disabled:where(:not([aria-busy])),a.lui-button-text:disabled:where(:not([aria-busy])){background:none;color:#989189;text-decoration:underline}.lui-button-text:disabled:where(:not([aria-busy])):hover,a.lui-button-text:disabled:where(:not([aria-busy])):hover{cursor:not-allowed}.lui-button-text:disabled:where(:not([aria-busy])) i,.lui-button-text:disabled:where(:not([aria-busy])) svg *,a.lui-button-text:disabled:where(:not([aria-busy])) i,a.lui-button-text:disabled:where(:not([aria-busy])) svg *{fill:#989189;color:#989189}.lui-button-text[aria-busy]:hover,a.lui-button-text[aria-busy]:hover{cursor:progress}.lui-button-plain-text,a.lui-button-plain-text{background-color:initial;border:0 solid #fff;font-weight:600;line-height:24px}.lui-button-plain-text i,.lui-button-plain-text svg *,a.lui-button-plain-text i,a.lui-button-plain-text svg *{fill:inherit;color:inherit}.lui-button-plain-text:visited,a.lui-button-plain-text:visited{color:inherit}.lui-button-plain-text.lui-button-danger:not(:disabled),a.lui-button-plain-text.lui-button-danger:not(:disabled){color:#c00}.lui-button-plain-text.lui-button-danger:where([aria-busy]),a.lui-button-plain-text.lui-button-danger:where([aria-busy]){color:#c00}.lui-button-plain-text.lui-button-danger:not(:disabled),.lui-button-plain-text.lui-button-danger[aria-busy],a.lui-button-plain-text.lui-button-danger:not(:disabled),a.lui-button-plain-text.lui-button-danger[aria-busy]{background-color:initial;border-color:#c00}.lui-button-plain-text.lui-button-danger:not(:disabled) i,.lui-button-plain-text.lui-button-danger:not(:disabled) svg *,.lui-button-plain-text.lui-button-danger[aria-busy] i,.lui-button-plain-text.lui-button-danger[aria-busy] svg *,a.lui-button-plain-text.lui-button-danger:not(:disabled) i,a.lui-button-plain-text.lui-button-danger:not(:disabled) svg *,a.lui-button-plain-text.lui-button-danger[aria-busy] i,a.lui-button-plain-text.lui-button-danger[aria-busy] svg *{fill:#c00;color:#c00}.lui-button-plain-text.lui-button-danger:hover:enabled,a.lui-button-plain-text.lui-button-danger:hover:enabled{background-color:initial;border-color:#c00;color:#c00}.lui-button-plain-text.lui-button-danger:hover:enabled i,.lui-button-plain-text.lui-button-danger:hover:enabled svg *,a.lui-button-plain-text.lui-button-danger:hover:enabled i,a.lui-button-plain-text.lui-button-danger:hover:enabled svg *{fill:#c00;color:#c00}.lui-button-plain-text.lui-button-danger:active:enabled,a.lui-button-plain-text.lui-button-danger:active:enabled{background-color:initial;border-color:#c00;color:#cc0000e6}.lui-button-plain-text.lui-button-danger:active:enabled i,.lui-button-plain-text.lui-button-danger:active:enabled svg *,a.lui-button-plain-text.lui-button-danger:active:enabled i,a.lui-button-plain-text.lui-button-danger:active:enabled svg *{fill:#cc0000e6;color:#cc0000e6}.lui-button-plain-text,a.lui-button-plain-text{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}.lui-button-plain-text i,.lui-button-plain-text svg *,a.lui-button-plain-text i,a.lui-button-plain-text svg *{fill:#6b6966;color:#6b6966}.lui-button-plain-text:disabled:where(:not([aria-busy])),a.lui-button-plain-text:disabled:where(:not([aria-busy])){background:none;border:0;color:#989189;text-decoration:none}.lui-button-plain-text:disabled:where(:not([aria-busy])):hover,a.lui-button-plain-text:disabled:where(:not([aria-busy])):hover{cursor:not-allowed}.lui-button-plain-text:disabled:where(:not([aria-busy])) i,.lui-button-plain-text:disabled:where(:not([aria-busy])) svg *,a.lui-button-plain-text:disabled:where(:not([aria-busy])) i,a.lui-button-plain-text:disabled:where(:not([aria-busy])) svg *{fill:#989189;color:#989189}.lui-button-plain-text[aria-busy]:hover,a.lui-button-plain-text[aria-busy]:hover{cursor:progress}.lui-button-icon-only,a.lui-button-icon-only{height:40px;padding:0;width:40px}.lui-button-icon-only .LuiIcon,a.lui-button-icon-only .LuiIcon{vertical-align:top}.lui-button-icon-only i,a.lui-button-icon-only i{margin:0 12px 0 0;position:relative;top:6px}.lui-button-icon-only-link,.lui-button-icon-only-rev,a.lui-button-icon-only-link,a.lui-button-icon-only-rev{background-color:initial;border:1px solid #0000;color:#007198;font-weight:600;line-height:24px}.lui-button-icon-only-link i,.lui-button-icon-only-link svg *,.lui-button-icon-only-rev i,.lui-button-icon-only-rev svg *,a.lui-button-icon-only-link i,a.lui-button-icon-only-link svg *,a.lui-button-icon-only-rev i,a.lui-button-icon-only-rev svg *{fill:#007198;color:#007198}.lui-button-icon-only-link:visited,.lui-button-icon-only-rev:visited,a.lui-button-icon-only-link:visited,a.lui-button-icon-only-rev:visited{color:#007198}.lui-button-icon-only-link:hover:where(:not([aria-busy])),.lui-button-icon-only-rev:hover:where(:not([aria-busy])),a.lui-button-icon-only-link:hover:where(:not([aria-busy])),a.lui-button-icon-only-rev:hover:where(:not([aria-busy])){background-color:initial;border:1px solid #0000;color:#005678;cursor:pointer}.lui-button-icon-only-link:hover:where(:not([aria-busy])) i,.lui-button-icon-only-link:hover:where(:not([aria-busy])) svg *,.lui-button-icon-only-rev:hover:where(:not([aria-busy])) i,.lui-button-icon-only-rev:hover:where(:not([aria-busy])) svg *,a.lui-button-icon-only-link:hover:where(:not([aria-busy])) i,a.lui-button-icon-only-link:hover:where(:not([aria-busy])) svg *,a.lui-button-icon-only-rev:hover:where(:not([aria-busy])) i,a.lui-button-icon-only-rev:hover:where(:not([aria-busy])) svg *{fill:#005678;color:#005678}.lui-button-icon-only-link:disabled:where(:not([aria-busy])),.lui-button-icon-only-rev:disabled:where(:not([aria-busy])),a.lui-button-icon-only-link:disabled:where(:not([aria-busy])),a.lui-button-icon-only-rev:disabled:where(:not([aria-busy])){background:#eaeaea;border-color:#6b6966;color:#989189}.lui-button-icon-only-link:disabled:where(:not([aria-busy])) i,.lui-button-icon-only-link:disabled:where(:not([aria-busy])) svg *,.lui-button-icon-only-rev:disabled:where(:not([aria-busy])) i,.lui-button-icon-only-rev:disabled:where(:not([aria-busy])) svg *,a.lui-button-icon-only-link:disabled:where(:not([aria-busy])) i,a.lui-button-icon-only-link:disabled:where(:not([aria-busy])) svg *,a.lui-button-icon-only-rev:disabled:where(:not([aria-busy])) i,a.lui-button-icon-only-rev:disabled:where(:not([aria-busy])) svg *{fill:#6b6966;color:#6b6966}.lui-button-icon-only-link:disabled:where(:not([aria-busy])):hover,.lui-button-icon-only-rev:disabled:where(:not([aria-busy])):hover,a.lui-button-icon-only-link:disabled:where(:not([aria-busy])):hover,a.lui-button-icon-only-rev:disabled:where(:not([aria-busy])):hover{cursor:not-allowed}.lui-button-icon-only-link[aria-busy]:hover,.lui-button-icon-only-rev[aria-busy]:hover,a.lui-button-icon-only-link[aria-busy]:hover,a.lui-button-icon-only-rev[aria-busy]:hover{cursor:progress}.lui-button-icon-only-link[aria-busy]:not(:active),.lui-button-icon-only-link[aria-busy]:not(:active) i,.lui-button-icon-only-link[aria-busy]:not(:active) svg *,.lui-button-icon-only-rev[aria-busy]:not(:active),.lui-button-icon-only-rev[aria-busy]:not(:active) i,.lui-button-icon-only-rev[aria-busy]:not(:active) svg *,a.lui-button-icon-only-link[aria-busy]:not(:active),a.lui-button-icon-only-link[aria-busy]:not(:active) i,a.lui-button-icon-only-link[aria-busy]:not(:active) svg *,a.lui-button-icon-only-rev[aria-busy]:not(:active),a.lui-button-icon-only-rev[aria-busy]:not(:active) i,a.lui-button-icon-only-rev[aria-busy]:not(:active) svg *{transition:none}.lui-button-icon-only-link:active:enabled,.lui-button-icon-only-rev:active:enabled,a.lui-button-icon-only-link:active:enabled,a.lui-button-icon-only-rev:active:enabled{background-color:initial;border:1px solid #0000;color:#1f69c3e6;cursor:pointer}.lui-button-icon-only-link:active:enabled i,.lui-button-icon-only-link:active:enabled svg *,.lui-button-icon-only-rev:active:enabled i,.lui-button-icon-only-rev:active:enabled svg *,a.lui-button-icon-only-link:active:enabled i,a.lui-button-icon-only-link:active:enabled svg *,a.lui-button-icon-only-rev:active:enabled i,a.lui-button-icon-only-rev:active:enabled svg *{fill:#1f69c3;color:#1f69c3}.lui-button-icon-only-link,.lui-button-icon-only-rev,a.lui-button-icon-only-link,a.lui-button-icon-only-rev{height:36px;line-height:44px;padding:0;width:36px}.lui-button-icon-only-link:disabled,.lui-button-icon-only-rev:disabled,a.lui-button-icon-only-link:disabled,a.lui-button-icon-only-rev:disabled{background-color:initial;border:0}.lui-button-icon-only-rev,.lui-button-icon-only-rev i,.lui-button-icon-only-rev svg *,a.lui-button-icon-only-rev,a.lui-button-icon-only-rev i,a.lui-button-icon-only-rev svg *{color:#fff}.lui-button-icon-only-rev:disabled:hover:where(:not([aria-busy])),.lui-button-icon-only-rev:disabled:where(:not([aria-busy])),a.lui-button-icon-only-rev:disabled:hover:where(:not([aria-busy])),a.lui-button-icon-only-rev:disabled:where(:not([aria-busy])){background-color:initial;border:0;color:#fff6}.lui-button-icon-only-rev:disabled:hover:where(:not([aria-busy])) i,.lui-button-icon-only-rev:disabled:hover:where(:not([aria-busy])) svg *,.lui-button-icon-only-rev:disabled:where(:not([aria-busy])) i,.lui-button-icon-only-rev:disabled:where(:not([aria-busy])) svg *,a.lui-button-icon-only-rev:disabled:hover:where(:not([aria-busy])) i,a.lui-button-icon-only-rev:disabled:hover:where(:not([aria-busy])) svg *,a.lui-button-icon-only-rev:disabled:where(:not([aria-busy])) i,a.lui-button-icon-only-rev:disabled:where(:not([aria-busy])) svg *{fill:#fff6;color:#fff6}.lui-button-icon-only-rev:hover:where(:not([aria-busy])) i,.lui-button-icon-only-rev:hover:where(:not([aria-busy])) svg *,a.lui-button-icon-only-rev:hover:where(:not([aria-busy])) i,a.lui-button-icon-only-rev:hover:where(:not([aria-busy])) svg *{fill:#73c8e1;color:#73c8e1}.lui-button-icon-only-link,a.lui-button-icon-only-link{color:#1f69c3}.lui-button[aria-busy],a.lui-button[aria-busy]{position:relative}.lui-button[aria-busy]:has(.lui-button-loading-spinner),a.lui-button[aria-busy]:has(.lui-button-loading-spinner){color:#0000}.lui-button[aria-busy]:has(.lui-button-loading-spinner)>:not(.lui-button-loading-spinner),a.lui-button[aria-busy]:has(.lui-button-loading-spinner)>:not(.lui-button-loading-spinner){visibility:hidden}.lui-button-loading-spinner,a.lui-button-loading-spinner{align-items:center;display:flex;inset:0;justify-content:center;position:absolute}.lui-button.lui-button-sm,a.lui-button.lui-button-sm{padding:.1875rem .5rem}.lui-button.lui-button-sm.lui-button-plain-text,.lui-button.lui-button-sm.lui-button-text,a.lui-button.lui-button-sm.lui-button-plain-text,a.lui-button.lui-button-sm.lui-button-text{padding:0}.lui-button.lui-button-sm.lui-button-icon,a.lui-button.lui-button-sm.lui-button-icon{padding:.125rem .5rem .125rem .25rem}.lui-button.lui-button-sm.lui-button-icon .LuiIcon,a.lui-button.lui-button-sm.lui-button-icon .LuiIcon{margin:1px 4px -5px 0}.lui-button.lui-button-sm.lui-button-icon i,a.lui-button.lui-button-sm.lui-button-icon i{margin:0 12px 0 0;position:relative;top:6px}.lui-button.lui-button-sm.lui-button-icon-only,a.lui-button.lui-button-sm.lui-button-icon-only{height:32px;padding:0;width:32px}.lui-button.lui-button-sm.lui-button-icon-only .LuiIcon,a.lui-button.lui-button-sm.lui-button-icon-only .LuiIcon{vertical-align:top}.lui-button.lui-button-sm.lui-button-icon-only i,a.lui-button.lui-button-sm.lui-button-icon-only i{margin:0 12px 0 0;position:relative;top:6px}.lui-button.lui-button-sm.lui-button-icon-right,a.lui-button.lui-button-sm.lui-button-icon-right{padding:.125rem .25rem .125rem .5rem}.lui-button.lui-button-sm.lui-button-icon-right .LuiIcon,a.lui-button.lui-button-sm.lui-button-icon-right .LuiIcon{margin:1px 0 -5px .25rem}.lui-button.lui-button-sm.lui-button-icon-right i,a.lui-button.lui-button-sm.lui-button-icon-right i{margin:0 0 0 12px;position:relative;top:6px}.lui-button.lui-button-sm.lui-button-reversed-no-bg .LuiIcon,.lui-button.lui-button-sm.lui-button-reversed-no-bg i,a.lui-button.lui-button-sm.lui-button-reversed-no-bg .LuiIcon,a.lui-button.lui-button-sm.lui-button-reversed-no-bg i{top:9px!important}.lui-button.lui-button-lg,a.lui-button.lui-button-lg{padding:.6875rem 1.125rem}.lui-button.lui-button-lg.lui-button-plain-text,.lui-button.lui-button-lg.lui-button-text,a.lui-button.lui-button-lg.lui-button-plain-text,a.lui-button.lui-button-lg.lui-button-text{padding:0}.lui-button.lui-button-lg.lui-button-icon,a.lui-button.lui-button-lg.lui-button-icon{padding:.6875rem 16px .6875rem .75rem}.lui-button.lui-button-lg.lui-button-icon i,a.lui-button.lui-button-lg.lui-button-icon i{margin:0 .5rem 0 0;position:relative;top:6px}.lui-button.lui-button-lg.lui-button-icon-only,a.lui-button.lui-button-lg.lui-button-icon-only{height:48px;padding:0;width:48px}.lui-button.lui-button-lg.lui-button-icon-only .LuiIcon,a.lui-button.lui-button-lg.lui-button-icon-only .LuiIcon{vertical-align:top}.lui-button.lui-button-lg.lui-button-icon-only i,a.lui-button.lui-button-lg.lui-button-icon-only i{margin:0 .5rem 0 0;position:relative;top:6px}.lui-button.lui-button-lg.lui-button-icon-right,a.lui-button.lui-button-lg.lui-button-icon-right{padding:.6875rem .75rem .6875rem 1rem}.lui-button.lui-button-lg.lui-button-icon-right .LuiIcon,a.lui-button.lui-button-lg.lui-button-icon-right .LuiIcon{margin:0 0 -.4375rem .5rem}.lui-button.lui-button-lg.lui-button-icon-right i,a.lui-button.lui-button-lg.lui-button-icon-right i{margin:0 0 0 .5rem;position:relative;top:6px}.lui-button+.lui-button,.lui-button+a.lui-button,a.lui-button+.lui-button,a.lui-button+a.lui-button{margin-left:.5rem}.lui-button-group{align-content:stretch;display:flex;flex-direction:row}.lui-button-group .lui-button-wrapper{flex:1 1 0}.lui-button-group .lui-button-wrapper:first-child button{border-bottom-left-radius:3px;border-left:1px solid #004b50;border-top-left-radius:3px}.lui-button-group .lui-button-wrapper:last-child button{border-bottom-right-radius:3px;border-top-right-radius:3px}.lui-button-group.lui-input-error{border-radius:4.5px}.lui-button-group-text-sizing{display:inline-block;font-size:0}.lui-button-group-text-sizing .lui-button-wrapper{float:left;width:auto}@media screen and (min-width:768px){.lui-button-group-text-sizing .lui-button-wrapper .lui-button{padding:0 .75rem}}@media screen and (min-width:1024px){.lui-button-group-text-sizing .lui-button-wrapper .lui-button{padding:0 2rem}}.lui-button-group .lui-button{background-color:#fff;border:1px solid #007198;border-left:none;border-radius:0;color:#004b50;width:100%}.lui-button-group .lui-button svg *{fill:#007198}.lui-button-group .lui-button.lui-button-active{background-color:#007198;-moz-box-shadow:inset 0 3px 6px #0006;-webkit-box-shadow:inset 0 3px 6px #0006;box-shadow:inset 0 3px 6px #0006;color:#fff;text-shadow:0 3px 6px #0006}.lui-button-group .lui-button.lui-button-active svg *{fill:#fff}.lui-button-group .lui-button.lui-button-active:disabled:where(:not([aria-busy])){background-color:#989189;color:#fff}.lui-button-group .lui-button.lui-button-active:disabled:where(:not([aria-busy])).lui-button-icon-only svg *{fill:#fff}.lui-button-group .lui-button:hover:where(:not([aria-busy])){background:#007198;color:#fff;cursor:pointer}.lui-button-group .lui-button:focus{outline:2px solid #004b50;position:relative}.lui-button-group .lui-button:disabled:where(:not([aria-busy])){background-color:#eaeaea;border:1px solid #6b6966;color:#989189}.lui-button-group .lui-button:disabled:where(:not([aria-busy])):disabled:hover{cursor:not-allowed}.lui-button-group .lui-button:disabled:where(:not([aria-busy])).lui-button-icon-only svg *{fill:#989189}.lui-button-group .lui-button.lui-button-icon-only{width:100%}.lui-button-group--radio{margin-top:1.5rem}.lui-button-group--radio .lui-radio-container{margin-top:.75rem}@media screen and (min-width:768px){.LuiDeprecatedForms .lui-button-group--radio{display:grid}.lui-button-group--radio{display:grid;font-size:0!important;grid-template-columns:repeat(24,1fr)}.lui-button-group--radio input{clip:rect(0 0 0 0)!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:0!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.lui-button-group--radio input:checked+label{background-color:#007198;box-shadow:inset 0 2px 3px #00000080;color:#fff;text-shadow:0 2px 3px #00000080}.LuiDeprecatedForms .lui-button-group--radio input:checked+label{color:#fff}.lui-button-group--radio input:checked:disabled+label,.lui-button-group--radio input:disabled:checked+label:hover{background-color:#989189;color:#fff}.LuiDeprecatedForms .lui-button-group--radio input:checked:disabled+label,.LuiDeprecatedForms .lui-button-group--radio input:disabled:checked+label:hover{color:#fff}.lui-button-group--radio input:focus:not([disabled])+label{background:#007198;color:#fff;cursor:pointer}.lui-button-group--radio input:disabled+label{border-color:#989189!important}.lui-button-group--radio input:disabled+label:hover{background-color:#fff;cursor:default}}.lui-button-group--radio label{margin-left:.5rem}@media screen and (min-width:768px){.lui-button-group--radio label{border:2px solid #007198;border-radius:0;border-right:none;color:#007198;display:inline-block;font-family:Open Sans,system-ui,sans-serif;font-weight:700!important;line-height:40px;margin:0;text-align:center;transition:background-color .3s,color .3s,height .3s,border .3s;width:100%}.lui-button-group--radio label:hover{background:#007198;color:#fff;cursor:pointer}}.LuiDeprecatedForms .radio-btn-group-pair{display:grid;font-size:0!important;grid-template-columns:repeat(24,1fr)}.LuiDeprecatedForms .radio-btn-group-pair input{clip:rect(0 0 0 0)!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:0!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.LuiDeprecatedForms .radio-btn-group-pair input:checked+label{background-color:#007198;box-shadow:inset 0 2px 3px #00000080;color:#fff;text-shadow:0 2px 3px #00000080}.LuiDeprecatedForms .radio-btn-group-pair input:focus+label{background:#007198;color:#fff;cursor:pointer}.LuiDeprecatedForms .radio-btn-group-pair label{border:2px solid #007198;border-radius:0;border-right:none;color:#007198;display:inline-block;font-family:Open Sans,system-ui,sans-serif;font-style:normal;font-weight:700;line-height:40px;margin:0;text-align:center;transition:background-color .3s,color .3s,height .3s,border .3s;width:100%}.LuiDeprecatedForms .radio-btn-group-pair label:hover{background:#007198;color:#fff;cursor:pointer}.LuiDeprecatedForms .radio-btn-group-pair .grid-cell-1{grid-column:span 12}.LuiDeprecatedForms .radio-btn-group-pair .grid-cell-1 label{border-radius:.5rem 0 0 .5rem}.LuiDeprecatedForms .radio-btn-group-pair .grid-cell-2{grid-column:span 12}.LuiDeprecatedForms .radio-btn-group-pair .grid-cell-2 label{border-radius:0 .5rem .5rem 0;border-right:2px solid #007198}@media screen and (min-width:768px){.LuiDeprecatedForms .radio-btn-group-pair .grid-cell-1,.LuiDeprecatedForms .radio-btn-group-pair .grid-cell-2{grid-column:span 6}}@media screen and (min-width:1024px){.LuiDeprecatedForms .radio-btn-group-pair .grid-cell-1,.LuiDeprecatedForms .radio-btn-group-pair .grid-cell-2{grid-column:span 5}}@media screen and (min-width:1280px){.LuiDeprecatedForms .radio-btn-group-pair .grid-cell-1,.LuiDeprecatedForms .radio-btn-group-pair .grid-cell-2{grid-column:span 4}}@media screen and (min-width:768px){.exampleOfGridForButtons .grid-cell-1{grid-column:span 3}.exampleOfGridForButtons .grid-cell-1 label{border-radius:.5rem 0 0 .5rem}.exampleOfGridForButtons .grid-cell-2{grid-column:span 5}.exampleOfGridForButtons .grid-cell-3,.exampleOfGridForButtons .grid-cell-4{grid-column:span 8}.exampleOfGridForButtons .grid-cell-4 label{border-radius:0 .5rem .5rem 0;border-right:2px solid #007198}}@media screen and (min-width:1024px){.exampleOfGridForButtons .grid-cell-1{grid-column:span 4}.exampleOfGridForButtons .grid-cell-2,.exampleOfGridForButtons .grid-cell-3,.exampleOfGridForButtons .grid-cell-4{grid-column:span 5}}@media screen and (min-width:1280px){.exampleOfGridForButtons .grid-cell-1{grid-column:span 3}.exampleOfGridForButtons .grid-cell-2,.exampleOfGridForButtons .grid-cell-3,.exampleOfGridForButtons .grid-cell-4{grid-column:span 4}}.linz-button-primary{background-color:#023d48;border:1px solid #023d48;color:#fff}.linz-button-primary:hover{background-color:#01818a;border-color:#01818a;cursor:pointer}.linz-button-secondary{border:1px solid #023d48;color:#023d48}.linz-button-secondary:hover{background-color:#01818a;border-color:#01818a;color:#fff;cursor:pointer}.linz-button-tertiary{background-color:#e1e44a;border:1px solid #e1e44a;color:#023d48}.linz-button-tertiary:hover{background-color:#cdcf59;border-color:#cdcf59;cursor:pointer}.lui-icon{display:inline-block;height:24px;width:24px}.lui-icon-lg{font-size:3rem;height:48px;width:48px}.lui-icon-maori-land{background-size:cover}:not[button] .lui-link-icon,:not[button] i[class^=material-icons]{color:#007198;transition:color .3s cubic-bezier(1,0,0,1)}:not[button] .lui-link-icon:hover,:not[button] i[class^=material-icons]:hover{color:#004b50;cursor:pointer}:not[button] .lui-link-icon:visited,:not[button] i[class^=material-icons]:visited{color:#00425d}:not[button] .lui-link-icon-disabled i{color:#989189}:not[button] .lui-link-icon-disabled i:hover{cursor:not-allowed}.lui-inactive-icon{color:#989189}.tippy-box{border-radius:0;box-shadow:0 2px 3px 0 rgba(0,0,0,.251),0 0 3px 0 rgba(0,0,0,.149);padding:.25rem .5rem;text-align:left}.tippy-box[data-theme*=-withDelay]{animation:fadeInToolTip 1.5s}.tippy-box .tippy-content{padding:0}.tippy-box .tippy-content,.tippy-box .tippy-content p{font-family:Open Sans,system-ui,sans-serif;font-size:.75rem;font-style:normal;font-weight:600}.tippy-box .tippy-content p{margin-top:1em}.tippy-box .tippy-content p:first-child{margin-top:0}@keyframes fadeInToolTip{0%{opacity:0}66%{opacity:0}to{opacity:1}}.tippy-box[data-theme*=default]{background:#fff}.tippy-box[data-theme*=default] .tippy-content{color:#2a292c}.tippy-box[data-theme*=info]{background:#00425d}.tippy-box[data-theme*=info] .tippy-content{color:#fff}.tippy-box[data-theme*=error]{background:#c00}.tippy-box[data-theme*=error] .tippy-content{color:#fff}.LuiCheckboxInput{box-sizing:border-box;margin-bottom:24px;position:relative}.LuiCheckboxInput-group{cursor:pointer;display:inline-block;line-height:28px;user-select:none}.LuiCheckboxInput-label{align-items:flex-start;display:flex;flex-direction:row;margin-bottom:0;padding:2px;position:relative}.LuiCheckboxInput--isDisabled .LuiCheckboxInput-label{color:#989189;cursor:not-allowed}.LuiCheckboxInput-input{height:.1px;opacity:0;overflow:hidden;position:absolute;width:.1px;z-index:-1}.LuiCheckboxInput-error{margin-top:2px;text-align:left}.LuiCheckboxInput-errorText{color:#c00}.LuiCheckboxInput-errorIcon{margin-left:2rem}.LuiCheckboxInput-mandatory{color:#c00;font-family:Open Sans,system-ui,sans-serif;font-size:.875rem;font-style:normal;font-weight:600;left:-12px;position:absolute;top:-4px}.LuiCheckboxInput-labelCheck{fill:#fff0;background-color:#fff;border:2px solid #007198;border-radius:3px;margin-right:.5rem;order:-1;transition:background-color .3s ease-in-out}.LuiCheckboxInput-labelCheck svg{left:-2px;position:relative;top:-2px}.LuiCheckboxInput--isChecked .LuiCheckboxInput-labelCheck,.LuiCheckboxInput-input:checked .LuiCheckboxInput-labelCheck{fill:#fff;background-color:#007198}.LuiCheckboxInput-input:focus-visible+span .LuiCheckboxInput-labelCheck{outline:3px solid #007198}.LuiCheckboxInput--hasError .LuiCheckboxInput-labelCheck{border-color:#c00}.LuiCheckboxInput--isChecked.LuiCheckboxInput--hasError .LuiCheckboxInput-labelCheck{background-color:#c00;border-color:#c00}.LuiCheckboxInput--isDisabled .LuiCheckboxInput-labelCheck,.LuiCheckboxInput-input:disabled+.LuiCheckboxInput-label .LuiCheckboxInput-labelCheck{background-color:#eaeaea;border-color:#989189}.LuiCheckboxInput--isChecked.LuiCheckboxInput--isDisabled .LuiCheckboxInput-labelCheck,.LuiCheckboxInput-input:checked:disabled+.LuiCheckboxInput-label .LuiCheckboxInput-labelCheck{background-color:#989189;border-color:#989189}.LuiCheckboxInput--inline{display:inline-block}.LuiCheckboxInput--inline:not(:last-child){margin-bottom:0;margin-right:24px}.LuiTab{align-items:center;background:#0000;border-radius:0;color:#2a292c;column-gap:.75rem;display:flex;font-family:Open Sans,system-ui,sans-serif;font-style:normal;font-weight:400;justify-content:center;min-width:10rem;position:relative}.LuiTab:focus{background-color:#00a59933}.LuiTabsGroup--justified .LuiTab{width:100%}.LuiTab--error:after,.LuiTab--warning:after{bottom:-1px;content:\"\";display:block;height:1px;left:0;position:absolute;right:0}.LuiTab--error:after{background-color:#c00}.LuiTab--warning:after{background-color:#ea6a2e}.LuiTab:disabled{background:#eaeaea;border-color:#6b6966;color:#989189;cursor:not-allowed}.LuiTab--active,.LuiTab--active:focus{background:#0000;font-family:Open Sans,system-ui,sans-serif;font-style:normal;font-weight:600;outline:none;position:relative}.LuiTab--active:after,.LuiTab--active:focus:after{background:linear-gradient(270deg,#73cdc8 1%,#00a599);border-top-left-radius:3px;border-top-right-radius:3px;bottom:-1px;box-sizing:border-box;content:\"\";display:block;height:4px;left:0;padding:0 32px;position:absolute;right:0;width:100%}.tabErrorIcon{fill:#c00}.tabWarningIcon{fill:#ea6a2e}.LuiTabsGroup{border-bottom:1px solid #beb9b4;display:flex}.LuiTabsGroup--justified{display:flex;justify-content:space-between}.LuiTabsPanel{display:none}.LuiTabsPanel--active{display:block;overflow:auto}.LuiIcon{display:inline-block;height:100%;width:100%}.LuiIcon>svg{display:block}.LuiIcon--xl{max-height:48px;max-width:48px}.LuiIcon--xl>svg{height:48px;width:48px}.LuiIcon--lg{max-height:32px;max-width:32px}.LuiIcon--lg>svg{height:32px;width:32px}.LuiIcon--md{max-height:24px;max-width:24px}.LuiIcon--md,.LuiIcon--md>svg{height:24px;width:24px}.LuiIcon--sm{max-height:16px;max-width:16px}.LuiIcon--sm>svg{height:16px;width:16px}.LuiIcon--xs{max-height:12px;max-width:12px}.LuiIcon--xs>svg{height:12px;width:12px}.LuiIcon--warning{fill:#ea6a2e}.LuiIcon--error{fill:#c00}.LuiIcon--success{fill:#0aa245}.LuiIcon--interactive{fill:#007198}.LuiIcon--disabled{fill:#989189}.LuiStatusSpinner p{margin-top:.5rem}.LuiLoadingSpinnerBase{left:50%;margin-left:-74px;margin-top:-74px;position:absolute;top:50%;z-index:1000}.LuiLoadingSpinner-SupportText-container{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.LuiLoadingSpinner-SupportText-container .LuiLoadingSpinner-SupportText{align-items:center;color:#007198;display:flex;flex-direction:column;font-family:Open Sans,system-ui,sans-serif;font-style:normal;font-weight:400;width:300px}.LuiLoadingSpinner-SupportText-container .LuiLoadingSpinner-SupportText .LuiLoadingSpinnerBase{display:inline-block;margin:0;position:static}.LuiLoadingSpinner-SupportText-container .LuiLoadingSpinner-SupportText p{font-family:Open Sans,system-ui,sans-serif;font-style:normal;font-weight:400}.LuiFileInputBox-upload{align-items:center;border-radius:5px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;outline:2px dashed #beb9b4;padding:24px;position:relative}.LuiFileInputBox-upload:hover{background:#eef1f5}.LuiFileInputBox-upload-input{cursor:pointer;display:block;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.LuiFileInputBox-upload-container{align-items:center;display:flex;flex-direction:column;gap:8px;justify-content:center;text-align:center}.LuiFileInputBox-upload-error{border-radius:5px;outline:2px dashed #c00}.LuiFileInputBox-upload-icon-success{fill:#0aa245;margin-left:auto;margin-right:auto;width:120px}.LuiFileInputBox-upload-icon-upload{fill:#007198;margin-left:auto;margin-right:auto;width:120px}.LuiFileInputBox-upload-icon-error{fill:#c00;margin-left:auto;margin-right:auto;width:168px}.LuiFileInputBox-upload-text{color:#2a292c;font-size:16px;line-height:24px;margin-top:0}.LuiFileInputBox-upload-text .LuiFileInputBox-upload-text-span{color:#3a7cdf;text-decoration-line:underline;text-decoration-skip-ink:auto;text-decoration-style:solid;text-decoration-thickness:7.5%;text-underline-offset:2.6px}.LuiFileInputBox-upload-text-no-padding{color:#6b6966;font-size:14px;padding:0}.LuiFileInputBox-upload-file-name{font-weight:600;margin-top:0;padding-bottom:12px}.LuiCheckboxInput.LuiCheckboxInput--nomargin{margin-bottom:0}*,:after,:before{box-sizing:inherit}";
|
|
71
|
-
styleInject(css_248z);
|
|
72
|
-
|
|
73
|
-
function r(e) {
|
|
45
|
+
function r$1(e) {
|
|
74
46
|
var t, f, n = "";
|
|
75
47
|
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
76
|
-
else if ("object" == typeof e) if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
48
|
+
else if ("object" == typeof e) if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (f = r$1(e[t])) && (n && (n += " "), n += f);
|
|
77
49
|
else for (t in e) e[t] && (n && (n += " "), n += t);
|
|
78
50
|
return n;
|
|
79
51
|
}
|
|
80
52
|
function clsx$1() {
|
|
81
|
-
for (var e, t, f = 0, n = ""; f < arguments.length; ) (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
53
|
+
for (var e, t, f = 0, n = ""; f < arguments.length; ) (e = arguments[f++]) && (t = r$1(e)) && (n && (n += " "), n += t);
|
|
82
54
|
return n;
|
|
83
55
|
}
|
|
84
56
|
|
|
@@ -250,7 +222,7 @@ function identity(value) {
|
|
|
250
222
|
}
|
|
251
223
|
|
|
252
224
|
var asyncTag = "[object AsyncFunction]", funcTag$2 = "[object Function]", genTag$1 = "[object GeneratorFunction]", proxyTag = "[object Proxy]";
|
|
253
|
-
function isFunction(value) {
|
|
225
|
+
function isFunction$1(value) {
|
|
254
226
|
if (!isObject(value)) {
|
|
255
227
|
return false;
|
|
256
228
|
}
|
|
@@ -296,7 +268,7 @@ function baseIsNative(value) {
|
|
|
296
268
|
if (!isObject(value) || isMasked(value)) {
|
|
297
269
|
return false;
|
|
298
270
|
}
|
|
299
|
-
var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
|
|
271
|
+
var pattern = isFunction$1(value) ? reIsNative : reIsHostCtor;
|
|
300
272
|
return pattern.test(toSource(value));
|
|
301
273
|
}
|
|
302
274
|
|
|
@@ -460,7 +432,7 @@ function isLength(value) {
|
|
|
460
432
|
}
|
|
461
433
|
|
|
462
434
|
function isArrayLike(value) {
|
|
463
|
-
return value != null && isLength(value.length) && !isFunction(value);
|
|
435
|
+
return value != null && isLength(value.length) && !isFunction$1(value);
|
|
464
436
|
}
|
|
465
437
|
|
|
466
438
|
function isIterateeCall(value, index, object) {
|
|
@@ -2357,10 +2329,6 @@ function getDefaultExportFromCjs (x) {
|
|
|
2357
2329
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
2358
2330
|
}
|
|
2359
2331
|
|
|
2360
|
-
var cjs = {exports: {}};
|
|
2361
|
-
|
|
2362
|
-
var Draggable$1 = {};
|
|
2363
|
-
|
|
2364
2332
|
var propTypes = {exports: {}};
|
|
2365
2333
|
|
|
2366
2334
|
var reactIs = {exports: {}};
|
|
@@ -3328,1251 +3296,997 @@ function requirePropTypes () {
|
|
|
3328
3296
|
return propTypes.exports;
|
|
3329
3297
|
}
|
|
3330
3298
|
|
|
3331
|
-
var
|
|
3299
|
+
var propTypesExports = /*@__PURE__*/ requirePropTypes();
|
|
3300
|
+
var PropTypes2 = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
|
|
3332
3301
|
|
|
3333
|
-
var
|
|
3302
|
+
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
3334
3303
|
|
|
3335
|
-
|
|
3336
|
-
|
|
3337
|
-
|
|
3338
|
-
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
|
|
3344
|
-
|
|
3345
|
-
|
|
3346
|
-
|
|
3347
|
-
|
|
3348
|
-
|
|
3349
|
-
|
|
3350
|
-
|
|
3351
|
-
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
|
|
3359
|
-
var
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
|
|
3368
|
-
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
|
|
3391
|
-
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
var
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
|
|
3411
|
-
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
|
|
3415
|
-
|
|
3416
|
-
|
|
3417
|
-
|
|
3418
|
-
|
|
3419
|
-
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3423
|
-
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
|
|
3427
|
-
|
|
3428
|
-
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3469
|
-
|
|
3470
|
-
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
|
|
3476
|
-
|
|
3477
|
-
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
|
-
|
|
3491
|
-
|
|
3492
|
-
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
|
|
3502
|
-
|
|
3503
|
-
|
|
3504
|
-
|
|
3505
|
-
|
|
3506
|
-
|
|
3507
|
-
|
|
3508
|
-
|
|
3509
|
-
|
|
3510
|
-
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
|
|
3523
|
-
|
|
3524
|
-
|
|
3525
|
-
|
|
3526
|
-
|
|
3527
|
-
|
|
3528
|
-
|
|
3529
|
-
|
|
3530
|
-
|
|
3531
|
-
|
|
3532
|
-
|
|
3533
|
-
|
|
3534
|
-
|
|
3535
|
-
|
|
3536
|
-
|
|
3537
|
-
|
|
3538
|
-
|
|
3539
|
-
|
|
3540
|
-
|
|
3541
|
-
|
|
3542
|
-
|
|
3543
|
-
|
|
3544
|
-
|
|
3545
|
-
|
|
3546
|
-
|
|
3547
|
-
|
|
3548
|
-
|
|
3549
|
-
|
|
3550
|
-
|
|
3551
|
-
|
|
3552
|
-
|
|
3553
|
-
|
|
3554
|
-
|
|
3555
|
-
|
|
3556
|
-
|
|
3557
|
-
|
|
3558
|
-
|
|
3559
|
-
|
|
3560
|
-
return width;
|
|
3561
|
-
}
|
|
3562
|
-
function offsetXYFromParent(evt, offsetParent, scale) {
|
|
3563
|
-
const isBody = offsetParent === offsetParent.ownerDocument.body;
|
|
3564
|
-
const offsetParentRect = isBody ? {
|
|
3565
|
-
left: 0,
|
|
3566
|
-
top: 0
|
|
3567
|
-
} : offsetParent.getBoundingClientRect();
|
|
3568
|
-
const x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale;
|
|
3569
|
-
const y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;
|
|
3570
|
-
return {
|
|
3571
|
-
x,
|
|
3572
|
-
y
|
|
3573
|
-
};
|
|
3574
|
-
}
|
|
3575
|
-
function createCSSTransform(controlPos, positionOffset) {
|
|
3576
|
-
const translation = getTranslation(controlPos, positionOffset, "px");
|
|
3577
|
-
return {
|
|
3578
|
-
[(0, _getPrefix.browserPrefixToKey)("transform", _getPrefix.default)]: translation
|
|
3579
|
-
};
|
|
3580
|
-
}
|
|
3581
|
-
function createSVGTransform(controlPos, positionOffset) {
|
|
3582
|
-
const translation = getTranslation(controlPos, positionOffset, "");
|
|
3583
|
-
return translation;
|
|
3584
|
-
}
|
|
3585
|
-
function getTranslation(_ref, positionOffset, unitSuffix) {
|
|
3586
|
-
let {
|
|
3587
|
-
x,
|
|
3588
|
-
y
|
|
3589
|
-
} = _ref;
|
|
3590
|
-
let translation = `translate(${x}${unitSuffix},${y}${unitSuffix})`;
|
|
3591
|
-
if (positionOffset) {
|
|
3592
|
-
const defaultX = `${typeof positionOffset.x === "string" ? positionOffset.x : positionOffset.x + unitSuffix}`;
|
|
3593
|
-
const defaultY = `${typeof positionOffset.y === "string" ? positionOffset.y : positionOffset.y + unitSuffix}`;
|
|
3594
|
-
translation = `translate(${defaultX}, ${defaultY})` + translation;
|
|
3595
|
-
}
|
|
3596
|
-
return translation;
|
|
3597
|
-
}
|
|
3598
|
-
function getTouch(e, identifier) {
|
|
3599
|
-
return e.targetTouches && (0, _shims.findInArray)(e.targetTouches, (t) => identifier === t.identifier) || e.changedTouches && (0, _shims.findInArray)(e.changedTouches, (t) => identifier === t.identifier);
|
|
3600
|
-
}
|
|
3601
|
-
function getTouchIdentifier(e) {
|
|
3602
|
-
if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
|
|
3603
|
-
if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
|
|
3604
|
-
}
|
|
3605
|
-
function addUserSelectStyles(doc) {
|
|
3606
|
-
if (!doc) return;
|
|
3607
|
-
let styleEl = doc.getElementById("react-draggable-style-el");
|
|
3608
|
-
if (!styleEl) {
|
|
3609
|
-
styleEl = doc.createElement("style");
|
|
3610
|
-
styleEl.type = "text/css";
|
|
3611
|
-
styleEl.id = "react-draggable-style-el";
|
|
3612
|
-
styleEl.innerHTML = ".react-draggable-transparent-selection *::-moz-selection {all: inherit;}\n";
|
|
3613
|
-
styleEl.innerHTML += ".react-draggable-transparent-selection *::selection {all: inherit;}\n";
|
|
3614
|
-
doc.getElementsByTagName("head")[0].appendChild(styleEl);
|
|
3615
|
-
}
|
|
3616
|
-
if (doc.body) addClassName(doc.body, "react-draggable-transparent-selection");
|
|
3617
|
-
}
|
|
3618
|
-
function scheduleRemoveUserSelectStyles(doc) {
|
|
3619
|
-
if (window.requestAnimationFrame) {
|
|
3620
|
-
window.requestAnimationFrame(() => {
|
|
3621
|
-
removeUserSelectStyles(doc);
|
|
3622
|
-
});
|
|
3623
|
-
} else {
|
|
3624
|
-
removeUserSelectStyles(doc);
|
|
3625
|
-
}
|
|
3626
|
-
}
|
|
3627
|
-
function removeUserSelectStyles(doc) {
|
|
3628
|
-
if (!doc) return;
|
|
3629
|
-
try {
|
|
3630
|
-
if (doc.body) removeClassName(doc.body, "react-draggable-transparent-selection");
|
|
3631
|
-
if (doc.selection) {
|
|
3632
|
-
doc.selection.empty();
|
|
3633
|
-
} else {
|
|
3634
|
-
const selection = (doc.defaultView || window).getSelection();
|
|
3635
|
-
if (selection && selection.type !== "Caret") {
|
|
3636
|
-
selection.removeAllRanges();
|
|
3637
|
-
}
|
|
3638
|
-
}
|
|
3639
|
-
} catch (e) {
|
|
3640
|
-
}
|
|
3641
|
-
}
|
|
3642
|
-
function addClassName(el, className) {
|
|
3643
|
-
if (el.classList) {
|
|
3644
|
-
el.classList.add(className);
|
|
3645
|
-
} else {
|
|
3646
|
-
if (!el.className.match(new RegExp(`(?:^|\\s)${className}(?!\\S)`))) {
|
|
3647
|
-
el.className += ` ${className}`;
|
|
3648
|
-
}
|
|
3649
|
-
}
|
|
3650
|
-
}
|
|
3651
|
-
function removeClassName(el, className) {
|
|
3652
|
-
if (el.classList) {
|
|
3653
|
-
el.classList.remove(className);
|
|
3654
|
-
} else {
|
|
3655
|
-
el.className = el.className.replace(new RegExp(`(?:^|\\s)${className}(?!\\S)`, "g"), "");
|
|
3656
|
-
}
|
|
3657
|
-
}
|
|
3658
|
-
return domFns;
|
|
3659
|
-
}
|
|
3660
|
-
|
|
3661
|
-
var positionFns = {};
|
|
3662
|
-
|
|
3663
|
-
var hasRequiredPositionFns;
|
|
3664
|
-
|
|
3665
|
-
function requirePositionFns () {
|
|
3666
|
-
if (hasRequiredPositionFns) return positionFns;
|
|
3667
|
-
hasRequiredPositionFns = 1;
|
|
3668
|
-
Object.defineProperty(positionFns, "__esModule", {
|
|
3669
|
-
value: true
|
|
3670
|
-
});
|
|
3671
|
-
positionFns.canDragX = canDragX;
|
|
3672
|
-
positionFns.canDragY = canDragY;
|
|
3673
|
-
positionFns.createCoreData = createCoreData;
|
|
3674
|
-
positionFns.createDraggableData = createDraggableData;
|
|
3675
|
-
positionFns.getBoundPosition = getBoundPosition;
|
|
3676
|
-
positionFns.getControlPosition = getControlPosition;
|
|
3677
|
-
positionFns.snapToGrid = snapToGrid;
|
|
3678
|
-
var _shims = requireShims();
|
|
3679
|
-
var _domFns = requireDomFns();
|
|
3680
|
-
function getBoundPosition(draggable, x, y) {
|
|
3681
|
-
if (!draggable.props.bounds) return [x, y];
|
|
3682
|
-
let {
|
|
3683
|
-
bounds
|
|
3684
|
-
} = draggable.props;
|
|
3685
|
-
bounds = typeof bounds === "string" ? bounds : cloneBounds(bounds);
|
|
3686
|
-
const node = findDOMNode(draggable);
|
|
3687
|
-
if (typeof bounds === "string") {
|
|
3688
|
-
const {
|
|
3689
|
-
ownerDocument
|
|
3690
|
-
} = node;
|
|
3691
|
-
const ownerWindow = ownerDocument.defaultView;
|
|
3692
|
-
let boundNode;
|
|
3693
|
-
if (bounds === "parent") {
|
|
3694
|
-
boundNode = node.parentNode;
|
|
3695
|
-
} else {
|
|
3696
|
-
const rootNode = node.getRootNode();
|
|
3697
|
-
boundNode = rootNode.querySelector(bounds);
|
|
3698
|
-
}
|
|
3699
|
-
if (!(boundNode instanceof ownerWindow.HTMLElement)) {
|
|
3700
|
-
throw new Error('Bounds selector "' + bounds + '" could not find an element.');
|
|
3701
|
-
}
|
|
3702
|
-
const boundNodeEl = boundNode;
|
|
3703
|
-
const nodeStyle = ownerWindow.getComputedStyle(node);
|
|
3704
|
-
const boundNodeStyle = ownerWindow.getComputedStyle(boundNodeEl);
|
|
3705
|
-
bounds = {
|
|
3706
|
-
left: -node.offsetLeft + (0, _shims.int)(boundNodeStyle.paddingLeft) + (0, _shims.int)(nodeStyle.marginLeft),
|
|
3707
|
-
top: -node.offsetTop + (0, _shims.int)(boundNodeStyle.paddingTop) + (0, _shims.int)(nodeStyle.marginTop),
|
|
3708
|
-
right: (0, _domFns.innerWidth)(boundNodeEl) - (0, _domFns.outerWidth)(node) - node.offsetLeft + (0, _shims.int)(boundNodeStyle.paddingRight) - (0, _shims.int)(nodeStyle.marginRight),
|
|
3709
|
-
bottom: (0, _domFns.innerHeight)(boundNodeEl) - (0, _domFns.outerHeight)(node) - node.offsetTop + (0, _shims.int)(boundNodeStyle.paddingBottom) - (0, _shims.int)(nodeStyle.marginBottom)
|
|
3710
|
-
};
|
|
3711
|
-
}
|
|
3712
|
-
if ((0, _shims.isNum)(bounds.right)) x = Math.min(x, bounds.right);
|
|
3713
|
-
if ((0, _shims.isNum)(bounds.bottom)) y = Math.min(y, bounds.bottom);
|
|
3714
|
-
if ((0, _shims.isNum)(bounds.left)) x = Math.max(x, bounds.left);
|
|
3715
|
-
if ((0, _shims.isNum)(bounds.top)) y = Math.max(y, bounds.top);
|
|
3716
|
-
return [x, y];
|
|
3717
|
-
}
|
|
3718
|
-
function snapToGrid(grid, pendingX, pendingY) {
|
|
3719
|
-
const x = Math.round(pendingX / grid[0]) * grid[0];
|
|
3720
|
-
const y = Math.round(pendingY / grid[1]) * grid[1];
|
|
3721
|
-
return [x, y];
|
|
3722
|
-
}
|
|
3723
|
-
function canDragX(draggable) {
|
|
3724
|
-
return draggable.props.axis === "both" || draggable.props.axis === "x";
|
|
3725
|
-
}
|
|
3726
|
-
function canDragY(draggable) {
|
|
3727
|
-
return draggable.props.axis === "both" || draggable.props.axis === "y";
|
|
3728
|
-
}
|
|
3729
|
-
function getControlPosition(e, touchIdentifier, draggableCore) {
|
|
3730
|
-
const touchObj = typeof touchIdentifier === "number" ? (0, _domFns.getTouch)(e, touchIdentifier) : null;
|
|
3731
|
-
if (typeof touchIdentifier === "number" && !touchObj) return null;
|
|
3732
|
-
const node = findDOMNode(draggableCore);
|
|
3733
|
-
const offsetParent = draggableCore.props.offsetParent || node.offsetParent || node.ownerDocument.body;
|
|
3734
|
-
return (0, _domFns.offsetXYFromParent)(touchObj || e, offsetParent, draggableCore.props.scale);
|
|
3735
|
-
}
|
|
3736
|
-
function createCoreData(draggable, x, y) {
|
|
3737
|
-
const isStart = !(0, _shims.isNum)(draggable.lastX);
|
|
3738
|
-
const node = findDOMNode(draggable);
|
|
3739
|
-
if (isStart) {
|
|
3740
|
-
return {
|
|
3741
|
-
node,
|
|
3742
|
-
deltaX: 0,
|
|
3743
|
-
deltaY: 0,
|
|
3744
|
-
lastX: x,
|
|
3745
|
-
lastY: y,
|
|
3746
|
-
x,
|
|
3747
|
-
y
|
|
3748
|
-
};
|
|
3749
|
-
} else {
|
|
3750
|
-
return {
|
|
3751
|
-
node,
|
|
3752
|
-
deltaX: x - draggable.lastX,
|
|
3753
|
-
deltaY: y - draggable.lastY,
|
|
3754
|
-
lastX: draggable.lastX,
|
|
3755
|
-
lastY: draggable.lastY,
|
|
3756
|
-
x,
|
|
3757
|
-
y
|
|
3758
|
-
};
|
|
3759
|
-
}
|
|
3760
|
-
}
|
|
3761
|
-
function createDraggableData(draggable, coreData) {
|
|
3762
|
-
const scale = draggable.props.scale;
|
|
3763
|
-
return {
|
|
3764
|
-
node: coreData.node,
|
|
3765
|
-
x: draggable.state.x + coreData.deltaX / scale,
|
|
3766
|
-
y: draggable.state.y + coreData.deltaY / scale,
|
|
3767
|
-
deltaX: coreData.deltaX / scale,
|
|
3768
|
-
deltaY: coreData.deltaY / scale,
|
|
3769
|
-
lastX: draggable.state.x,
|
|
3770
|
-
lastY: draggable.state.y
|
|
3771
|
-
};
|
|
3772
|
-
}
|
|
3773
|
-
function cloneBounds(bounds) {
|
|
3774
|
-
return {
|
|
3775
|
-
left: bounds.left,
|
|
3776
|
-
top: bounds.top,
|
|
3777
|
-
right: bounds.right,
|
|
3778
|
-
bottom: bounds.bottom
|
|
3779
|
-
};
|
|
3780
|
-
}
|
|
3781
|
-
function findDOMNode(draggable) {
|
|
3782
|
-
const node = draggable.findDOMNode();
|
|
3783
|
-
if (!node) {
|
|
3784
|
-
throw new Error("<DraggableCore>: Unmounted during event!");
|
|
3785
|
-
}
|
|
3786
|
-
return node;
|
|
3787
|
-
}
|
|
3788
|
-
return positionFns;
|
|
3304
|
+
// lib/Draggable.tsx
|
|
3305
|
+
|
|
3306
|
+
// lib/utils/shims.ts
|
|
3307
|
+
function findInArray(array, callback) {
|
|
3308
|
+
for (let i = 0, length = array.length; i < length; i++) {
|
|
3309
|
+
if (callback.apply(callback, [array[i], i, array])) return array[i];
|
|
3310
|
+
}
|
|
3311
|
+
}
|
|
3312
|
+
function isFunction(func) {
|
|
3313
|
+
return typeof func === "function" || Object.prototype.toString.call(func) === "[object Function]";
|
|
3314
|
+
}
|
|
3315
|
+
function isNum(num) {
|
|
3316
|
+
return typeof num === "number" && !isNaN(num);
|
|
3317
|
+
}
|
|
3318
|
+
function int(a) {
|
|
3319
|
+
return parseInt(a, 10);
|
|
3320
|
+
}
|
|
3321
|
+
function dontSetMe(props, propName, componentName) {
|
|
3322
|
+
if (props[propName]) {
|
|
3323
|
+
return new Error(`Invalid prop ${propName} passed to ${componentName} - do not set this, set it on the child.`);
|
|
3324
|
+
}
|
|
3325
|
+
}
|
|
3326
|
+
|
|
3327
|
+
// lib/utils/getPrefix.ts
|
|
3328
|
+
var prefixes = ["Moz", "Webkit", "O", "ms"];
|
|
3329
|
+
function getPrefix(prop = "transform") {
|
|
3330
|
+
var _a, _b;
|
|
3331
|
+
if (typeof window === "undefined") return "";
|
|
3332
|
+
const style = (_b = (_a = window.document) == null ? void 0 : _a.documentElement) == null ? void 0 : _b.style;
|
|
3333
|
+
if (!style) return "";
|
|
3334
|
+
if (prop in style) return "";
|
|
3335
|
+
for (let i = 0; i < prefixes.length; i++) {
|
|
3336
|
+
if (browserPrefixToKey(prop, prefixes[i]) in style) return prefixes[i];
|
|
3337
|
+
}
|
|
3338
|
+
return "";
|
|
3339
|
+
}
|
|
3340
|
+
function browserPrefixToKey(prop, prefix) {
|
|
3341
|
+
return prefix ? `${prefix}${kebabToTitleCase(prop)}` : prop;
|
|
3342
|
+
}
|
|
3343
|
+
function kebabToTitleCase(str) {
|
|
3344
|
+
let out = "";
|
|
3345
|
+
let shouldCapitalize = true;
|
|
3346
|
+
for (let i = 0; i < str.length; i++) {
|
|
3347
|
+
if (shouldCapitalize) {
|
|
3348
|
+
out += str[i].toUpperCase();
|
|
3349
|
+
shouldCapitalize = false;
|
|
3350
|
+
} else if (str[i] === "-") {
|
|
3351
|
+
shouldCapitalize = true;
|
|
3352
|
+
} else {
|
|
3353
|
+
out += str[i];
|
|
3354
|
+
}
|
|
3355
|
+
}
|
|
3356
|
+
return out;
|
|
3357
|
+
}
|
|
3358
|
+
var getPrefix_default = getPrefix();
|
|
3359
|
+
|
|
3360
|
+
// lib/utils/domFns.ts
|
|
3361
|
+
var matchesSelectorFunc = "";
|
|
3362
|
+
function matchesSelector(el, selector) {
|
|
3363
|
+
var _a;
|
|
3364
|
+
if (!matchesSelectorFunc) {
|
|
3365
|
+
matchesSelectorFunc = (_a = findInArray([
|
|
3366
|
+
"matches",
|
|
3367
|
+
"webkitMatchesSelector",
|
|
3368
|
+
"mozMatchesSelector",
|
|
3369
|
+
"msMatchesSelector",
|
|
3370
|
+
"oMatchesSelector"
|
|
3371
|
+
], function(method) {
|
|
3372
|
+
return isFunction(el[method]);
|
|
3373
|
+
})) != null ? _a : "";
|
|
3374
|
+
}
|
|
3375
|
+
const matchFn = el[matchesSelectorFunc];
|
|
3376
|
+
if (!isFunction(matchFn)) return false;
|
|
3377
|
+
return Boolean(matchFn.call(el, selector));
|
|
3378
|
+
}
|
|
3379
|
+
function matchesSelectorAndParentsTo(el, selector, baseNode) {
|
|
3380
|
+
let node = el;
|
|
3381
|
+
do {
|
|
3382
|
+
if (matchesSelector(node, selector)) return true;
|
|
3383
|
+
if (node === baseNode) return false;
|
|
3384
|
+
node = node.parentNode;
|
|
3385
|
+
} while (node);
|
|
3386
|
+
return false;
|
|
3387
|
+
}
|
|
3388
|
+
function addEvent(el, event, handler, inputOptions) {
|
|
3389
|
+
if (!el) return;
|
|
3390
|
+
const options = { capture: true, ...inputOptions };
|
|
3391
|
+
const listener = handler;
|
|
3392
|
+
if (el.addEventListener) {
|
|
3393
|
+
el.addEventListener(event, listener, options);
|
|
3394
|
+
} else if (el.attachEvent) {
|
|
3395
|
+
el.attachEvent("on" + event, listener);
|
|
3396
|
+
} else {
|
|
3397
|
+
el["on" + event] = listener;
|
|
3398
|
+
}
|
|
3399
|
+
}
|
|
3400
|
+
function removeEvent(el, event, handler, inputOptions) {
|
|
3401
|
+
if (!el) return;
|
|
3402
|
+
const options = { capture: true, ...inputOptions };
|
|
3403
|
+
const listener = handler;
|
|
3404
|
+
if (el.removeEventListener) {
|
|
3405
|
+
el.removeEventListener(event, listener, options);
|
|
3406
|
+
} else if (el.detachEvent) {
|
|
3407
|
+
el.detachEvent("on" + event, listener);
|
|
3408
|
+
} else {
|
|
3409
|
+
el["on" + event] = null;
|
|
3410
|
+
}
|
|
3411
|
+
}
|
|
3412
|
+
function outerHeight(node) {
|
|
3413
|
+
let height = node.clientHeight;
|
|
3414
|
+
const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
|
|
3415
|
+
height += int(computedStyle.borderTopWidth);
|
|
3416
|
+
height += int(computedStyle.borderBottomWidth);
|
|
3417
|
+
return height;
|
|
3418
|
+
}
|
|
3419
|
+
function outerWidth(node) {
|
|
3420
|
+
let width = node.clientWidth;
|
|
3421
|
+
const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
|
|
3422
|
+
width += int(computedStyle.borderLeftWidth);
|
|
3423
|
+
width += int(computedStyle.borderRightWidth);
|
|
3424
|
+
return width;
|
|
3425
|
+
}
|
|
3426
|
+
function innerHeight(node) {
|
|
3427
|
+
let height = node.clientHeight;
|
|
3428
|
+
const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
|
|
3429
|
+
height -= int(computedStyle.paddingTop);
|
|
3430
|
+
height -= int(computedStyle.paddingBottom);
|
|
3431
|
+
return height;
|
|
3432
|
+
}
|
|
3433
|
+
function innerWidth(node) {
|
|
3434
|
+
let width = node.clientWidth;
|
|
3435
|
+
const computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
|
|
3436
|
+
width -= int(computedStyle.paddingLeft);
|
|
3437
|
+
width -= int(computedStyle.paddingRight);
|
|
3438
|
+
return width;
|
|
3439
|
+
}
|
|
3440
|
+
function offsetXYFromParent(evt, offsetParent, scale) {
|
|
3441
|
+
const isBody = offsetParent === offsetParent.ownerDocument.body;
|
|
3442
|
+
const offsetParentRect = isBody ? { left: 0, top: 0 } : offsetParent.getBoundingClientRect();
|
|
3443
|
+
const x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale;
|
|
3444
|
+
const y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;
|
|
3445
|
+
return { x, y };
|
|
3446
|
+
}
|
|
3447
|
+
function createCSSTransform(controlPos, positionOffset) {
|
|
3448
|
+
const translation = getTranslation(controlPos, positionOffset, "px");
|
|
3449
|
+
return { [browserPrefixToKey("transform", getPrefix_default)]: translation };
|
|
3450
|
+
}
|
|
3451
|
+
function createSVGTransform(controlPos, positionOffset) {
|
|
3452
|
+
const translation = getTranslation(controlPos, positionOffset, "");
|
|
3453
|
+
return translation;
|
|
3454
|
+
}
|
|
3455
|
+
function getTranslation({ x, y }, positionOffset, unitSuffix) {
|
|
3456
|
+
let translation = `translate(${x}${unitSuffix},${y}${unitSuffix})`;
|
|
3457
|
+
if (positionOffset) {
|
|
3458
|
+
const defaultX = `${typeof positionOffset.x === "string" ? positionOffset.x : positionOffset.x + unitSuffix}`;
|
|
3459
|
+
const defaultY = `${typeof positionOffset.y === "string" ? positionOffset.y : positionOffset.y + unitSuffix}`;
|
|
3460
|
+
translation = `translate(${defaultX}, ${defaultY})` + translation;
|
|
3461
|
+
}
|
|
3462
|
+
return translation;
|
|
3463
|
+
}
|
|
3464
|
+
function getTouch(e, identifier) {
|
|
3465
|
+
return e.targetTouches && findInArray(e.targetTouches, (t) => identifier === t.identifier) || e.changedTouches && findInArray(e.changedTouches, (t) => identifier === t.identifier);
|
|
3466
|
+
}
|
|
3467
|
+
function getTouchIdentifier(e) {
|
|
3468
|
+
if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
|
|
3469
|
+
if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
|
|
3470
|
+
}
|
|
3471
|
+
function getDefaultNonce() {
|
|
3472
|
+
return typeof __webpack_nonce__ !== "undefined" ? __webpack_nonce__ : void 0;
|
|
3473
|
+
}
|
|
3474
|
+
function addUserSelectStyles(doc, nonce) {
|
|
3475
|
+
if (!doc) return;
|
|
3476
|
+
let styleEl = doc.getElementById("react-draggable-style-el");
|
|
3477
|
+
if (!styleEl) {
|
|
3478
|
+
styleEl = doc.createElement("style");
|
|
3479
|
+
styleEl.type = "text/css";
|
|
3480
|
+
styleEl.id = "react-draggable-style-el";
|
|
3481
|
+
const resolvedNonce = nonce != null ? nonce : getDefaultNonce();
|
|
3482
|
+
if (resolvedNonce) styleEl.setAttribute("nonce", resolvedNonce);
|
|
3483
|
+
styleEl.innerHTML = ".react-draggable-transparent-selection *::-moz-selection {all: inherit;}\n";
|
|
3484
|
+
styleEl.innerHTML += ".react-draggable-transparent-selection *::selection {all: inherit;}\n";
|
|
3485
|
+
doc.getElementsByTagName("head")[0].appendChild(styleEl);
|
|
3486
|
+
}
|
|
3487
|
+
if (doc.body) addClassName(doc.body, "react-draggable-transparent-selection");
|
|
3488
|
+
}
|
|
3489
|
+
function scheduleRemoveUserSelectStyles(doc) {
|
|
3490
|
+
if (window.requestAnimationFrame) {
|
|
3491
|
+
window.requestAnimationFrame(() => {
|
|
3492
|
+
removeUserSelectStyles(doc);
|
|
3493
|
+
});
|
|
3494
|
+
} else {
|
|
3495
|
+
removeUserSelectStyles(doc);
|
|
3496
|
+
}
|
|
3497
|
+
}
|
|
3498
|
+
function removeUserSelectStyles(doc) {
|
|
3499
|
+
if (!doc) return;
|
|
3500
|
+
try {
|
|
3501
|
+
if (doc.body) removeClassName(doc.body, "react-draggable-transparent-selection");
|
|
3502
|
+
const ieSelection = doc.selection;
|
|
3503
|
+
if (ieSelection) {
|
|
3504
|
+
ieSelection.empty();
|
|
3505
|
+
} else {
|
|
3506
|
+
const selection = (doc.defaultView || window).getSelection();
|
|
3507
|
+
if (selection && selection.type !== "Caret") {
|
|
3508
|
+
selection.removeAllRanges();
|
|
3509
|
+
}
|
|
3510
|
+
}
|
|
3511
|
+
} catch {
|
|
3512
|
+
}
|
|
3513
|
+
}
|
|
3514
|
+
function addClassName(el, className) {
|
|
3515
|
+
if (el.classList) {
|
|
3516
|
+
el.classList.add(className);
|
|
3517
|
+
} else {
|
|
3518
|
+
if (!el.className.match(new RegExp(`(?:^|\\s)${className}(?!\\S)`))) {
|
|
3519
|
+
el.className += ` ${className}`;
|
|
3520
|
+
}
|
|
3521
|
+
}
|
|
3522
|
+
}
|
|
3523
|
+
function removeClassName(el, className) {
|
|
3524
|
+
if (el.classList) {
|
|
3525
|
+
el.classList.remove(className);
|
|
3526
|
+
} else {
|
|
3527
|
+
el.className = el.className.replace(new RegExp(`(?:^|\\s)${className}(?!\\S)`, "g"), "");
|
|
3528
|
+
}
|
|
3789
3529
|
}
|
|
3790
3530
|
|
|
3791
|
-
|
|
3531
|
+
// lib/utils/positionFns.ts
|
|
3532
|
+
function getBoundPosition(draggable, x, y) {
|
|
3533
|
+
if (!draggable.props.bounds) return [x, y];
|
|
3534
|
+
let { bounds } = draggable.props;
|
|
3535
|
+
bounds = typeof bounds === "string" ? bounds : cloneBounds(bounds);
|
|
3536
|
+
const node = findDOMNode(draggable);
|
|
3537
|
+
if (typeof bounds === "string") {
|
|
3538
|
+
const { ownerDocument } = node;
|
|
3539
|
+
const ownerWindow = ownerDocument.defaultView;
|
|
3540
|
+
if (!ownerWindow) {
|
|
3541
|
+
throw new Error("Cannot resolve the owner window of the draggable node.");
|
|
3542
|
+
}
|
|
3543
|
+
let boundNode;
|
|
3544
|
+
if (bounds === "parent") {
|
|
3545
|
+
boundNode = node.parentNode;
|
|
3546
|
+
} else {
|
|
3547
|
+
const rootNode = node.getRootNode();
|
|
3548
|
+
boundNode = rootNode.querySelector(bounds);
|
|
3549
|
+
}
|
|
3550
|
+
if (!(boundNode instanceof ownerWindow.HTMLElement)) {
|
|
3551
|
+
throw new Error('Bounds selector "' + bounds + '" could not find an element.');
|
|
3552
|
+
}
|
|
3553
|
+
const boundNodeEl = boundNode;
|
|
3554
|
+
const nodeStyle = ownerWindow.getComputedStyle(node);
|
|
3555
|
+
const boundNodeStyle = ownerWindow.getComputedStyle(boundNodeEl);
|
|
3556
|
+
bounds = {
|
|
3557
|
+
left: -node.offsetLeft + int(boundNodeStyle.paddingLeft) + int(nodeStyle.marginLeft),
|
|
3558
|
+
top: -node.offsetTop + int(boundNodeStyle.paddingTop) + int(nodeStyle.marginTop),
|
|
3559
|
+
right: innerWidth(boundNodeEl) - outerWidth(node) - node.offsetLeft + int(boundNodeStyle.paddingRight) - int(nodeStyle.marginRight),
|
|
3560
|
+
bottom: innerHeight(boundNodeEl) - outerHeight(node) - node.offsetTop + int(boundNodeStyle.paddingBottom) - int(nodeStyle.marginBottom)
|
|
3561
|
+
};
|
|
3562
|
+
}
|
|
3563
|
+
if (isNum(bounds.right)) x = Math.min(x, bounds.right);
|
|
3564
|
+
if (isNum(bounds.bottom)) y = Math.min(y, bounds.bottom);
|
|
3565
|
+
if (isNum(bounds.left)) x = Math.max(x, bounds.left);
|
|
3566
|
+
if (isNum(bounds.top)) y = Math.max(y, bounds.top);
|
|
3567
|
+
return [x, y];
|
|
3568
|
+
}
|
|
3569
|
+
function snapToGrid(grid, pendingX, pendingY) {
|
|
3570
|
+
const x = Math.round(pendingX / grid[0]) * grid[0];
|
|
3571
|
+
const y = Math.round(pendingY / grid[1]) * grid[1];
|
|
3572
|
+
return [x, y];
|
|
3573
|
+
}
|
|
3574
|
+
function canDragX(draggable) {
|
|
3575
|
+
return draggable.props.axis === "both" || draggable.props.axis === "x";
|
|
3576
|
+
}
|
|
3577
|
+
function canDragY(draggable) {
|
|
3578
|
+
return draggable.props.axis === "both" || draggable.props.axis === "y";
|
|
3579
|
+
}
|
|
3580
|
+
function getControlPosition(e, touchIdentifier, draggableCore) {
|
|
3581
|
+
const touchObj = typeof touchIdentifier === "number" ? getTouch(e, touchIdentifier) : null;
|
|
3582
|
+
if (typeof touchIdentifier === "number" && !touchObj) return null;
|
|
3583
|
+
const node = findDOMNode(draggableCore);
|
|
3584
|
+
const offsetParent = draggableCore.props.offsetParent || node.offsetParent || node.ownerDocument.body;
|
|
3585
|
+
return offsetXYFromParent(touchObj || e, offsetParent, draggableCore.props.scale);
|
|
3586
|
+
}
|
|
3587
|
+
function createCoreData(draggable, x, y) {
|
|
3588
|
+
const isStart = !isNum(draggable.lastX);
|
|
3589
|
+
const node = findDOMNode(draggable);
|
|
3590
|
+
if (isStart) {
|
|
3591
|
+
return {
|
|
3592
|
+
node,
|
|
3593
|
+
deltaX: 0,
|
|
3594
|
+
deltaY: 0,
|
|
3595
|
+
lastX: x,
|
|
3596
|
+
lastY: y,
|
|
3597
|
+
x,
|
|
3598
|
+
y
|
|
3599
|
+
};
|
|
3600
|
+
} else {
|
|
3601
|
+
return {
|
|
3602
|
+
node,
|
|
3603
|
+
deltaX: x - draggable.lastX,
|
|
3604
|
+
deltaY: y - draggable.lastY,
|
|
3605
|
+
lastX: draggable.lastX,
|
|
3606
|
+
lastY: draggable.lastY,
|
|
3607
|
+
x,
|
|
3608
|
+
y
|
|
3609
|
+
};
|
|
3610
|
+
}
|
|
3611
|
+
}
|
|
3612
|
+
function createDraggableData(draggable, coreData) {
|
|
3613
|
+
const scale = draggable.props.scale;
|
|
3614
|
+
return {
|
|
3615
|
+
node: coreData.node,
|
|
3616
|
+
x: draggable.state.x + coreData.deltaX / scale,
|
|
3617
|
+
y: draggable.state.y + coreData.deltaY / scale,
|
|
3618
|
+
deltaX: coreData.deltaX / scale,
|
|
3619
|
+
deltaY: coreData.deltaY / scale,
|
|
3620
|
+
lastX: draggable.state.x,
|
|
3621
|
+
lastY: draggable.state.y
|
|
3622
|
+
};
|
|
3623
|
+
}
|
|
3624
|
+
function cloneBounds(bounds) {
|
|
3625
|
+
return {
|
|
3626
|
+
left: bounds.left,
|
|
3627
|
+
top: bounds.top,
|
|
3628
|
+
right: bounds.right,
|
|
3629
|
+
bottom: bounds.bottom
|
|
3630
|
+
};
|
|
3631
|
+
}
|
|
3632
|
+
function findDOMNode(draggable) {
|
|
3633
|
+
const node = draggable.findDOMNode();
|
|
3634
|
+
if (!node) {
|
|
3635
|
+
throw new Error("<DraggableCore>: Unmounted during event!");
|
|
3636
|
+
}
|
|
3637
|
+
return node;
|
|
3638
|
+
}
|
|
3792
3639
|
|
|
3793
|
-
|
|
3640
|
+
// lib/utils/log.ts
|
|
3641
|
+
var log = typeof process !== "undefined" && process.env.DRAGGABLE_DEBUG ? console.log.bind(console) : function noop() {
|
|
3642
|
+
};
|
|
3643
|
+
var log_default = log;
|
|
3644
|
+
|
|
3645
|
+
// lib/DraggableCore.tsx
|
|
3646
|
+
var eventsFor = {
|
|
3647
|
+
touch: {
|
|
3648
|
+
start: "touchstart",
|
|
3649
|
+
move: "touchmove",
|
|
3650
|
+
stop: "touchend"
|
|
3651
|
+
},
|
|
3652
|
+
mouse: {
|
|
3653
|
+
start: "mousedown",
|
|
3654
|
+
move: "mousemove",
|
|
3655
|
+
stop: "mouseup"
|
|
3656
|
+
}
|
|
3657
|
+
};
|
|
3658
|
+
var dragEventFor = eventsFor.mouse;
|
|
3659
|
+
var DraggableCore = class extends React.Component {
|
|
3660
|
+
constructor() {
|
|
3661
|
+
super(...arguments);
|
|
3662
|
+
this.dragging = false;
|
|
3663
|
+
// Used while dragging to determine deltas.
|
|
3664
|
+
this.lastX = NaN;
|
|
3665
|
+
this.lastY = NaN;
|
|
3666
|
+
this.touchIdentifier = null;
|
|
3667
|
+
this.mounted = false;
|
|
3668
|
+
this.handleDragStart = (e) => {
|
|
3669
|
+
this.props.onMouseDown(e);
|
|
3670
|
+
if (!this.props.allowAnyClick && (typeof e.button === "number" && e.button !== 0 || e.ctrlKey)) return false;
|
|
3671
|
+
const thisNode = this.findDOMNode();
|
|
3672
|
+
if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
|
|
3673
|
+
throw new Error("<DraggableCore> not mounted on DragStart!");
|
|
3674
|
+
}
|
|
3675
|
+
const { ownerDocument } = thisNode;
|
|
3676
|
+
if (this.props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || this.props.handle && !matchesSelectorAndParentsTo(e.target, this.props.handle, thisNode) || this.props.cancel && matchesSelectorAndParentsTo(e.target, this.props.cancel, thisNode)) {
|
|
3677
|
+
return;
|
|
3678
|
+
}
|
|
3679
|
+
if (e.type === "touchstart" && !this.props.allowMobileScroll) e.preventDefault();
|
|
3680
|
+
const touchIdentifier = getTouchIdentifier(e);
|
|
3681
|
+
this.touchIdentifier = touchIdentifier;
|
|
3682
|
+
const position = getControlPosition(e, touchIdentifier, this);
|
|
3683
|
+
if (position == null) return;
|
|
3684
|
+
const { x, y } = position;
|
|
3685
|
+
const coreEvent = createCoreData(this, x, y);
|
|
3686
|
+
log_default("DraggableCore: handleDragStart: %j", coreEvent);
|
|
3687
|
+
log_default("calling", this.props.onStart);
|
|
3688
|
+
const shouldUpdate = this.props.onStart(e, coreEvent);
|
|
3689
|
+
if (shouldUpdate === false || this.mounted === false) return;
|
|
3690
|
+
if (this.props.enableUserSelectHack) addUserSelectStyles(ownerDocument, this.props.nonce);
|
|
3691
|
+
this.dragging = true;
|
|
3692
|
+
this.lastX = x;
|
|
3693
|
+
this.lastY = y;
|
|
3694
|
+
addEvent(ownerDocument, dragEventFor.move, this.handleDrag);
|
|
3695
|
+
addEvent(ownerDocument, dragEventFor.stop, this.handleDragStop);
|
|
3696
|
+
};
|
|
3697
|
+
this.handleDrag = (e) => {
|
|
3698
|
+
const position = getControlPosition(e, this.touchIdentifier, this);
|
|
3699
|
+
if (position == null) return;
|
|
3700
|
+
let { x, y } = position;
|
|
3701
|
+
if (Array.isArray(this.props.grid)) {
|
|
3702
|
+
let deltaX = x - this.lastX, deltaY = y - this.lastY;
|
|
3703
|
+
[deltaX, deltaY] = snapToGrid(this.props.grid, deltaX, deltaY);
|
|
3704
|
+
if (!deltaX && !deltaY) return;
|
|
3705
|
+
x = this.lastX + deltaX;
|
|
3706
|
+
y = this.lastY + deltaY;
|
|
3707
|
+
}
|
|
3708
|
+
const coreEvent = createCoreData(this, x, y);
|
|
3709
|
+
log_default("DraggableCore: handleDrag: %j", coreEvent);
|
|
3710
|
+
const shouldUpdate = this.props.onDrag(e, coreEvent);
|
|
3711
|
+
if (shouldUpdate === false || this.mounted === false) {
|
|
3712
|
+
try {
|
|
3713
|
+
this.handleDragStop(new MouseEvent("mouseup"));
|
|
3714
|
+
} catch {
|
|
3715
|
+
const event = document.createEvent("MouseEvents");
|
|
3716
|
+
event.initMouseEvent("mouseup", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
|
3717
|
+
this.handleDragStop(event);
|
|
3718
|
+
}
|
|
3719
|
+
return;
|
|
3720
|
+
}
|
|
3721
|
+
this.lastX = x;
|
|
3722
|
+
this.lastY = y;
|
|
3723
|
+
};
|
|
3724
|
+
this.handleDragStop = (e) => {
|
|
3725
|
+
if (!this.dragging) return;
|
|
3726
|
+
const position = getControlPosition(e, this.touchIdentifier, this);
|
|
3727
|
+
if (position == null) return;
|
|
3728
|
+
let { x, y } = position;
|
|
3729
|
+
if (Array.isArray(this.props.grid)) {
|
|
3730
|
+
let deltaX = x - this.lastX || 0;
|
|
3731
|
+
let deltaY = y - this.lastY || 0;
|
|
3732
|
+
[deltaX, deltaY] = snapToGrid(this.props.grid, deltaX, deltaY);
|
|
3733
|
+
x = this.lastX + deltaX;
|
|
3734
|
+
y = this.lastY + deltaY;
|
|
3735
|
+
}
|
|
3736
|
+
const coreEvent = createCoreData(this, x, y);
|
|
3737
|
+
const shouldContinue = this.props.onStop(e, coreEvent);
|
|
3738
|
+
if (shouldContinue === false || this.mounted === false) return false;
|
|
3739
|
+
const thisNode = this.findDOMNode();
|
|
3740
|
+
if (thisNode) {
|
|
3741
|
+
if (this.props.enableUserSelectHack) scheduleRemoveUserSelectStyles(thisNode.ownerDocument);
|
|
3742
|
+
}
|
|
3743
|
+
log_default("DraggableCore: handleDragStop: %j", coreEvent);
|
|
3744
|
+
this.dragging = false;
|
|
3745
|
+
this.lastX = NaN;
|
|
3746
|
+
this.lastY = NaN;
|
|
3747
|
+
if (thisNode) {
|
|
3748
|
+
log_default("DraggableCore: Removing handlers");
|
|
3749
|
+
removeEvent(thisNode.ownerDocument, dragEventFor.move, this.handleDrag);
|
|
3750
|
+
removeEvent(thisNode.ownerDocument, dragEventFor.stop, this.handleDragStop);
|
|
3751
|
+
}
|
|
3752
|
+
};
|
|
3753
|
+
this.onMouseDown = (e) => {
|
|
3754
|
+
dragEventFor = eventsFor.mouse;
|
|
3755
|
+
return this.handleDragStart(e);
|
|
3756
|
+
};
|
|
3757
|
+
this.onMouseUp = (e) => {
|
|
3758
|
+
dragEventFor = eventsFor.mouse;
|
|
3759
|
+
return this.handleDragStop(e);
|
|
3760
|
+
};
|
|
3761
|
+
// Same as onMouseDown (start drag), but now consider this a touch device.
|
|
3762
|
+
this.onTouchStart = (e) => {
|
|
3763
|
+
dragEventFor = eventsFor.touch;
|
|
3764
|
+
return this.handleDragStart(e);
|
|
3765
|
+
};
|
|
3766
|
+
this.onTouchEnd = (e) => {
|
|
3767
|
+
dragEventFor = eventsFor.touch;
|
|
3768
|
+
return this.handleDragStop(e);
|
|
3769
|
+
};
|
|
3770
|
+
}
|
|
3771
|
+
componentDidMount() {
|
|
3772
|
+
this.mounted = true;
|
|
3773
|
+
const thisNode = this.findDOMNode();
|
|
3774
|
+
if (thisNode) {
|
|
3775
|
+
addEvent(thisNode, eventsFor.touch.start, this.onTouchStart, { passive: false });
|
|
3776
|
+
}
|
|
3777
|
+
}
|
|
3778
|
+
componentWillUnmount() {
|
|
3779
|
+
this.mounted = false;
|
|
3780
|
+
const thisNode = this.findDOMNode();
|
|
3781
|
+
if (thisNode) {
|
|
3782
|
+
const { ownerDocument } = thisNode;
|
|
3783
|
+
removeEvent(ownerDocument, eventsFor.mouse.move, this.handleDrag);
|
|
3784
|
+
removeEvent(ownerDocument, eventsFor.touch.move, this.handleDrag);
|
|
3785
|
+
removeEvent(ownerDocument, eventsFor.mouse.stop, this.handleDragStop);
|
|
3786
|
+
removeEvent(ownerDocument, eventsFor.touch.stop, this.handleDragStop);
|
|
3787
|
+
removeEvent(thisNode, eventsFor.touch.start, this.onTouchStart, { passive: false });
|
|
3788
|
+
if (this.props.enableUserSelectHack) scheduleRemoveUserSelectStyles(ownerDocument);
|
|
3789
|
+
}
|
|
3790
|
+
}
|
|
3791
|
+
// React 19 removed ReactDOM.findDOMNode, so nodeRef is now required.
|
|
3792
|
+
// For backward compatibility with React 18 and earlier, we still support findDOMNode if available.
|
|
3793
|
+
findDOMNode() {
|
|
3794
|
+
var _a;
|
|
3795
|
+
if ((_a = this.props) == null ? void 0 : _a.nodeRef) {
|
|
3796
|
+
return this.props.nodeRef.current;
|
|
3797
|
+
}
|
|
3798
|
+
const legacyReactDOM = ReactDOM;
|
|
3799
|
+
if (typeof legacyReactDOM.findDOMNode === "function") {
|
|
3800
|
+
return legacyReactDOM.findDOMNode(this);
|
|
3801
|
+
}
|
|
3802
|
+
log_default(
|
|
3803
|
+
"react-draggable: ReactDOM.findDOMNode is not available in React 19+. You must provide a nodeRef prop. See: https://github.com/react-grid-layout/react-draggable#noderef"
|
|
3804
|
+
);
|
|
3805
|
+
return null;
|
|
3806
|
+
}
|
|
3807
|
+
render() {
|
|
3808
|
+
return React.cloneElement(React.Children.only(this.props.children), {
|
|
3809
|
+
// Note: mouseMove handler is attached to document so it will still function
|
|
3810
|
+
// when the user drags quickly and leaves the bounds of the element.
|
|
3811
|
+
onMouseDown: this.onMouseDown,
|
|
3812
|
+
onMouseUp: this.onMouseUp,
|
|
3813
|
+
// onTouchStart is added on `componentDidMount` so they can be added with
|
|
3814
|
+
// {passive: false}, which allows it to cancel. See
|
|
3815
|
+
// https://developers.google.com/web/updates/2017/01/scrolling-intervention
|
|
3816
|
+
onTouchEnd: this.onTouchEnd
|
|
3817
|
+
});
|
|
3818
|
+
}
|
|
3819
|
+
};
|
|
3820
|
+
DraggableCore.displayName = "DraggableCore";
|
|
3821
|
+
// Both the annotation and the `?` are load-bearing:
|
|
3822
|
+
// - The index-signature annotation stops tsc from inferring the
|
|
3823
|
+
// PropTypes.Requireable<...> types and emitting `import PropTypes from
|
|
3824
|
+
// 'prop-types'` into the generated public .d.ts, which would force consumers
|
|
3825
|
+
// to install @types/prop-types (the v4.5.0 hand-written typings had none).
|
|
3826
|
+
// - The `?` keeps `propTypes` from being a *required* member of the public
|
|
3827
|
+
// type. React <= 18's JSX LibraryManagedAttributes only consults a
|
|
3828
|
+
// component's `propTypes` when it is required (`C extends {propTypes: ...}`);
|
|
3829
|
+
// when it does, this index-signature `propTypes` makes `defaultProps` stop
|
|
3830
|
+
// marking props optional, so consumers are forced to pass every prop.
|
|
3831
|
+
// Optional dodges that branch; React 19 ignores `propTypes` entirely. The
|
|
3832
|
+
// typings/tsconfig.react18.json check guards against a regression here.
|
|
3833
|
+
// Do not remove. See lib/Draggable.tsx for the same guard.
|
|
3834
|
+
DraggableCore.propTypes = {
|
|
3835
|
+
/**
|
|
3836
|
+
* `allowAnyClick` allows dragging using any mouse button.
|
|
3837
|
+
* By default, we only accept the left button.
|
|
3838
|
+
*
|
|
3839
|
+
* Defaults to `false`.
|
|
3840
|
+
*/
|
|
3841
|
+
allowAnyClick: PropTypes2.bool,
|
|
3842
|
+
/**
|
|
3843
|
+
* `allowMobileScroll` turns off cancellation of the 'touchstart' event
|
|
3844
|
+
* on mobile devices. Only enable this if you are having trouble with click
|
|
3845
|
+
* events. Prefer using 'handle' / 'cancel' instead.
|
|
3846
|
+
*
|
|
3847
|
+
* Defaults to `false`.
|
|
3848
|
+
*/
|
|
3849
|
+
allowMobileScroll: PropTypes2.bool,
|
|
3850
|
+
children: PropTypes2.node.isRequired,
|
|
3851
|
+
/**
|
|
3852
|
+
* `disabled`, if true, stops the <Draggable> from dragging. All handlers,
|
|
3853
|
+
* with the exception of `onMouseDown`, will not fire.
|
|
3854
|
+
*/
|
|
3855
|
+
disabled: PropTypes2.bool,
|
|
3856
|
+
/**
|
|
3857
|
+
* By default, we add 'user-select:none' attributes to the document body
|
|
3858
|
+
* to prevent ugly text selection during drag. If this is causing problems
|
|
3859
|
+
* for your app, set this to `false`.
|
|
3860
|
+
*/
|
|
3861
|
+
enableUserSelectHack: PropTypes2.bool,
|
|
3862
|
+
/**
|
|
3863
|
+
* `offsetParent`, if set, uses the passed DOM node to compute drag offsets
|
|
3864
|
+
* instead of using the parent node.
|
|
3865
|
+
*/
|
|
3866
|
+
offsetParent: function(props, propName) {
|
|
3867
|
+
if (props[propName] && props[propName].nodeType !== 1) {
|
|
3868
|
+
throw new Error("Draggable's offsetParent must be a DOM Node.");
|
|
3869
|
+
}
|
|
3870
|
+
},
|
|
3871
|
+
/**
|
|
3872
|
+
* `grid` specifies the x and y that dragging should snap to.
|
|
3873
|
+
*/
|
|
3874
|
+
grid: PropTypes2.arrayOf(PropTypes2.number),
|
|
3875
|
+
/**
|
|
3876
|
+
* `handle` specifies a selector to be used as the handle that initiates drag.
|
|
3877
|
+
*
|
|
3878
|
+
* Example:
|
|
3879
|
+
*
|
|
3880
|
+
* ```jsx
|
|
3881
|
+
* let App = React.createClass({
|
|
3882
|
+
* render: function () {
|
|
3883
|
+
* return (
|
|
3884
|
+
* <Draggable handle=".handle">
|
|
3885
|
+
* <div>
|
|
3886
|
+
* <div className="handle">Click me to drag</div>
|
|
3887
|
+
* <div>This is some other content</div>
|
|
3888
|
+
* </div>
|
|
3889
|
+
* </Draggable>
|
|
3890
|
+
* );
|
|
3891
|
+
* }
|
|
3892
|
+
* });
|
|
3893
|
+
* ```
|
|
3894
|
+
*/
|
|
3895
|
+
handle: PropTypes2.string,
|
|
3896
|
+
/**
|
|
3897
|
+
* `cancel` specifies a selector to be used to prevent drag initialization.
|
|
3898
|
+
*
|
|
3899
|
+
* Example:
|
|
3900
|
+
*
|
|
3901
|
+
* ```jsx
|
|
3902
|
+
* let App = React.createClass({
|
|
3903
|
+
* render: function () {
|
|
3904
|
+
* return(
|
|
3905
|
+
* <Draggable cancel=".cancel">
|
|
3906
|
+
* <div>
|
|
3907
|
+
* <div className="cancel">You can't drag from here</div>
|
|
3908
|
+
* <div>Dragging here works fine</div>
|
|
3909
|
+
* </div>
|
|
3910
|
+
* </Draggable>
|
|
3911
|
+
* );
|
|
3912
|
+
* }
|
|
3913
|
+
* });
|
|
3914
|
+
* ```
|
|
3915
|
+
*/
|
|
3916
|
+
cancel: PropTypes2.string,
|
|
3917
|
+
/* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
|
|
3918
|
+
* Unfortunately, in order for <Draggable> to work properly, we need raw access
|
|
3919
|
+
* to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
|
|
3920
|
+
* as in this example:
|
|
3921
|
+
*
|
|
3922
|
+
* function MyComponent() {
|
|
3923
|
+
* const nodeRef = React.useRef(null);
|
|
3924
|
+
* return (
|
|
3925
|
+
* <Draggable nodeRef={nodeRef}>
|
|
3926
|
+
* <div ref={nodeRef}>Example Target</div>
|
|
3927
|
+
* </Draggable>
|
|
3928
|
+
* );
|
|
3929
|
+
* }
|
|
3930
|
+
*
|
|
3931
|
+
* This can be used for arbitrarily nested components, so long as the ref ends up
|
|
3932
|
+
* pointing to the actual child DOM node and not a custom component.
|
|
3933
|
+
*/
|
|
3934
|
+
nodeRef: PropTypes2.object,
|
|
3935
|
+
/**
|
|
3936
|
+
* `nonce` is applied to the dynamically-injected <style> element used by the
|
|
3937
|
+
* user-select hack, so it isn't blocked under a strict Content Security
|
|
3938
|
+
* Policy (`style-src` without `'unsafe-inline'`). If omitted, webpack's
|
|
3939
|
+
* `__webpack_nonce__` global is used when available.
|
|
3940
|
+
*/
|
|
3941
|
+
nonce: PropTypes2.string,
|
|
3942
|
+
/**
|
|
3943
|
+
* Called when dragging starts.
|
|
3944
|
+
* If this function returns the boolean false, dragging will be canceled.
|
|
3945
|
+
*/
|
|
3946
|
+
onStart: PropTypes2.func,
|
|
3947
|
+
/**
|
|
3948
|
+
* Called while dragging.
|
|
3949
|
+
* If this function returns the boolean false, dragging will be canceled.
|
|
3950
|
+
*/
|
|
3951
|
+
onDrag: PropTypes2.func,
|
|
3952
|
+
/**
|
|
3953
|
+
* Called when dragging stops.
|
|
3954
|
+
* If this function returns the boolean false, the drag will remain active.
|
|
3955
|
+
*/
|
|
3956
|
+
onStop: PropTypes2.func,
|
|
3957
|
+
/**
|
|
3958
|
+
* A workaround option which can be passed if onMouseDown needs to be accessed,
|
|
3959
|
+
* since it'll always be blocked (as there is internal use of onMouseDown)
|
|
3960
|
+
*/
|
|
3961
|
+
onMouseDown: PropTypes2.func,
|
|
3962
|
+
/**
|
|
3963
|
+
* `scale`, if set, applies scaling while dragging an element
|
|
3964
|
+
*/
|
|
3965
|
+
scale: PropTypes2.number,
|
|
3966
|
+
/**
|
|
3967
|
+
* These properties should be defined on the child, not here.
|
|
3968
|
+
*/
|
|
3969
|
+
className: dontSetMe,
|
|
3970
|
+
style: dontSetMe,
|
|
3971
|
+
transform: dontSetMe
|
|
3972
|
+
};
|
|
3973
|
+
// Typed as the full `DraggableCoreProps` (not just the default-provided subset)
|
|
3974
|
+
// so React's JSX LibraryManagedAttributes treats EVERY prop as optional for
|
|
3975
|
+
// consumers, matching the historical hand-written typings. At runtime only the
|
|
3976
|
+
// default-able props are actually populated.
|
|
3977
|
+
DraggableCore.defaultProps = {
|
|
3978
|
+
allowAnyClick: false,
|
|
3979
|
+
// by default only accept left click
|
|
3980
|
+
allowMobileScroll: false,
|
|
3981
|
+
disabled: false,
|
|
3982
|
+
enableUserSelectHack: true,
|
|
3983
|
+
onStart: function() {
|
|
3984
|
+
},
|
|
3985
|
+
onDrag: function() {
|
|
3986
|
+
},
|
|
3987
|
+
onStop: function() {
|
|
3988
|
+
},
|
|
3989
|
+
onMouseDown: function() {
|
|
3990
|
+
},
|
|
3991
|
+
scale: 1
|
|
3992
|
+
};
|
|
3794
3993
|
|
|
3795
|
-
|
|
3994
|
+
// lib/Draggable.tsx
|
|
3995
|
+
var Draggable = class extends React.Component {
|
|
3996
|
+
constructor(props) {
|
|
3997
|
+
super(props);
|
|
3998
|
+
this.onDragStart = (e, coreData) => {
|
|
3999
|
+
log_default("Draggable: onDragStart: %j", coreData);
|
|
4000
|
+
const shouldStart = this.props.onStart(e, createDraggableData(this, coreData));
|
|
4001
|
+
if (shouldStart === false) return false;
|
|
4002
|
+
this.setState({ dragging: true, dragged: true });
|
|
4003
|
+
};
|
|
4004
|
+
this.onDrag = (e, coreData) => {
|
|
4005
|
+
if (!this.state.dragging) return false;
|
|
4006
|
+
log_default("Draggable: onDrag: %j", coreData);
|
|
4007
|
+
const uiData = createDraggableData(this, coreData);
|
|
4008
|
+
const newState = {
|
|
4009
|
+
x: uiData.x,
|
|
4010
|
+
y: uiData.y,
|
|
4011
|
+
slackX: 0,
|
|
4012
|
+
slackY: 0
|
|
4013
|
+
};
|
|
4014
|
+
if (this.props.bounds) {
|
|
4015
|
+
const { x, y } = newState;
|
|
4016
|
+
newState.x += this.state.slackX;
|
|
4017
|
+
newState.y += this.state.slackY;
|
|
4018
|
+
const [newStateX, newStateY] = getBoundPosition(this, newState.x, newState.y);
|
|
4019
|
+
newState.x = newStateX;
|
|
4020
|
+
newState.y = newStateY;
|
|
4021
|
+
newState.slackX = this.state.slackX + (x - newState.x);
|
|
4022
|
+
newState.slackY = this.state.slackY + (y - newState.y);
|
|
4023
|
+
uiData.x = newState.x;
|
|
4024
|
+
uiData.y = newState.y;
|
|
4025
|
+
uiData.deltaX = newState.x - this.state.x;
|
|
4026
|
+
uiData.deltaY = newState.y - this.state.y;
|
|
4027
|
+
}
|
|
4028
|
+
const shouldUpdate = this.props.onDrag(e, uiData);
|
|
4029
|
+
if (shouldUpdate === false) return false;
|
|
4030
|
+
this.setState(newState);
|
|
4031
|
+
};
|
|
4032
|
+
this.onDragStop = (e, coreData) => {
|
|
4033
|
+
if (!this.state.dragging) return false;
|
|
4034
|
+
const shouldContinue = this.props.onStop(e, createDraggableData(this, coreData));
|
|
4035
|
+
if (shouldContinue === false) return false;
|
|
4036
|
+
log_default("Draggable: onDragStop: %j", coreData);
|
|
4037
|
+
const newState = {
|
|
4038
|
+
dragging: false,
|
|
4039
|
+
slackX: 0,
|
|
4040
|
+
slackY: 0
|
|
4041
|
+
};
|
|
4042
|
+
const controlled = Boolean(this.props.position);
|
|
4043
|
+
if (controlled) {
|
|
4044
|
+
const { x, y } = this.props.position;
|
|
4045
|
+
newState.x = x;
|
|
4046
|
+
newState.y = y;
|
|
4047
|
+
}
|
|
4048
|
+
this.setState(newState);
|
|
4049
|
+
};
|
|
4050
|
+
this.state = {
|
|
4051
|
+
// Whether or not we are currently dragging.
|
|
4052
|
+
dragging: false,
|
|
4053
|
+
// Whether or not we have been dragged before.
|
|
4054
|
+
dragged: false,
|
|
4055
|
+
// Current transform x and y.
|
|
4056
|
+
x: props.position ? props.position.x : props.defaultPosition.x,
|
|
4057
|
+
y: props.position ? props.position.y : props.defaultPosition.y,
|
|
4058
|
+
prevPropsPosition: { ...props.position },
|
|
4059
|
+
// Used for compensating for out-of-bounds drags
|
|
4060
|
+
slackX: 0,
|
|
4061
|
+
slackY: 0,
|
|
4062
|
+
// Can only determine if SVG after mounting
|
|
4063
|
+
isElementSVG: false
|
|
4064
|
+
};
|
|
4065
|
+
if (props.position && !(props.onDrag || props.onStop)) {
|
|
4066
|
+
console.warn("A `position` was applied to this <Draggable>, without drag handlers. This will make this component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the `position` of this element.");
|
|
4067
|
+
}
|
|
4068
|
+
}
|
|
4069
|
+
// React 16.3+
|
|
4070
|
+
// Arity (props, state)
|
|
4071
|
+
static getDerivedStateFromProps({ position }, { prevPropsPosition }) {
|
|
4072
|
+
if (position && (!prevPropsPosition || position.x !== prevPropsPosition.x || position.y !== prevPropsPosition.y)) {
|
|
4073
|
+
log_default("Draggable: getDerivedStateFromProps %j", { position, prevPropsPosition });
|
|
4074
|
+
return {
|
|
4075
|
+
x: position.x,
|
|
4076
|
+
y: position.y,
|
|
4077
|
+
prevPropsPosition: { ...position }
|
|
4078
|
+
};
|
|
4079
|
+
}
|
|
4080
|
+
return null;
|
|
4081
|
+
}
|
|
4082
|
+
componentDidMount() {
|
|
4083
|
+
if (typeof window.SVGElement !== "undefined" && this.findDOMNode() instanceof window.SVGElement) {
|
|
4084
|
+
this.setState({ isElementSVG: true });
|
|
4085
|
+
}
|
|
4086
|
+
}
|
|
4087
|
+
componentWillUnmount() {
|
|
4088
|
+
if (this.state.dragging) {
|
|
4089
|
+
this.setState({ dragging: false });
|
|
4090
|
+
}
|
|
4091
|
+
}
|
|
4092
|
+
// React 19 removed ReactDOM.findDOMNode, so nodeRef is now required.
|
|
4093
|
+
// For backward compatibility with React 18 and earlier, we still support findDOMNode if available.
|
|
4094
|
+
findDOMNode() {
|
|
4095
|
+
var _a;
|
|
4096
|
+
if ((_a = this.props) == null ? void 0 : _a.nodeRef) {
|
|
4097
|
+
return this.props.nodeRef.current;
|
|
4098
|
+
}
|
|
4099
|
+
const legacyReactDOM = ReactDOM;
|
|
4100
|
+
if (typeof legacyReactDOM.findDOMNode === "function") {
|
|
4101
|
+
return legacyReactDOM.findDOMNode(this);
|
|
4102
|
+
}
|
|
4103
|
+
return null;
|
|
4104
|
+
}
|
|
4105
|
+
render() {
|
|
4106
|
+
const {
|
|
4107
|
+
axis,
|
|
4108
|
+
bounds,
|
|
4109
|
+
children,
|
|
4110
|
+
defaultPosition,
|
|
4111
|
+
defaultClassName,
|
|
4112
|
+
defaultClassNameDragging,
|
|
4113
|
+
defaultClassNameDragged,
|
|
4114
|
+
position,
|
|
4115
|
+
positionOffset,
|
|
4116
|
+
scale,
|
|
4117
|
+
...draggableCoreProps
|
|
4118
|
+
} = this.props;
|
|
4119
|
+
let style = {};
|
|
4120
|
+
let svgTransform = null;
|
|
4121
|
+
const controlled = Boolean(position);
|
|
4122
|
+
const draggable = !controlled || this.state.dragging;
|
|
4123
|
+
const validPosition = position || defaultPosition;
|
|
4124
|
+
const transformOpts = {
|
|
4125
|
+
// Set left if horizontal drag is enabled
|
|
4126
|
+
x: canDragX(this) && draggable ? this.state.x : validPosition.x,
|
|
4127
|
+
// Set top if vertical drag is enabled
|
|
4128
|
+
y: canDragY(this) && draggable ? this.state.y : validPosition.y
|
|
4129
|
+
};
|
|
4130
|
+
if (this.state.isElementSVG) {
|
|
4131
|
+
svgTransform = createSVGTransform(transformOpts, positionOffset);
|
|
4132
|
+
} else {
|
|
4133
|
+
style = createCSSTransform(transformOpts, positionOffset);
|
|
4134
|
+
}
|
|
4135
|
+
const onlyChild = React.Children.only(children);
|
|
4136
|
+
const className = clsx(onlyChild.props.className || "", defaultClassName, {
|
|
4137
|
+
[defaultClassNameDragging]: this.state.dragging,
|
|
4138
|
+
[defaultClassNameDragged]: this.state.dragged
|
|
4139
|
+
});
|
|
4140
|
+
return /* @__PURE__ */ React.createElement(DraggableCore, { ...draggableCoreProps, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop }, React.cloneElement(onlyChild, {
|
|
4141
|
+
className,
|
|
4142
|
+
style: { ...onlyChild.props.style, ...style },
|
|
4143
|
+
transform: svgTransform
|
|
4144
|
+
}));
|
|
4145
|
+
}
|
|
4146
|
+
};
|
|
4147
|
+
Draggable.displayName = "Draggable";
|
|
4148
|
+
// Both the annotation and the `?` are load-bearing:
|
|
4149
|
+
// - The index-signature annotation stops tsc from inferring the
|
|
4150
|
+
// PropTypes.Requireable<...> types and emitting `import PropTypes from
|
|
4151
|
+
// 'prop-types'` into the generated public .d.ts, which would force consumers
|
|
4152
|
+
// to install @types/prop-types (the v4.5.0 hand-written typings had none).
|
|
4153
|
+
// - The `?` keeps `propTypes` from being a *required* member of the public
|
|
4154
|
+
// type. React <= 18's JSX LibraryManagedAttributes only consults a
|
|
4155
|
+
// component's `propTypes` when it is required (`C extends {propTypes: ...}`);
|
|
4156
|
+
// when it does, this index-signature `propTypes` makes `defaultProps` stop
|
|
4157
|
+
// marking props optional, so consumers are forced to pass every prop.
|
|
4158
|
+
// Optional dodges that branch; React 19 ignores `propTypes` entirely. The
|
|
4159
|
+
// typings/tsconfig.react18.json check guards against a regression here.
|
|
4160
|
+
// Do not remove. See lib/DraggableCore.tsx for the same guard.
|
|
4161
|
+
Draggable.propTypes = {
|
|
4162
|
+
// Accepts all props <DraggableCore> accepts.
|
|
4163
|
+
...DraggableCore.propTypes,
|
|
4164
|
+
/**
|
|
4165
|
+
* `axis` determines which axis the draggable can move.
|
|
4166
|
+
*
|
|
4167
|
+
* Note that all callbacks will still return data as normal. This only
|
|
4168
|
+
* controls flushing to the DOM.
|
|
4169
|
+
*
|
|
4170
|
+
* 'both' allows movement horizontally and vertically.
|
|
4171
|
+
* 'x' limits movement to horizontal axis.
|
|
4172
|
+
* 'y' limits movement to vertical axis.
|
|
4173
|
+
* 'none' limits all movement.
|
|
4174
|
+
*
|
|
4175
|
+
* Defaults to 'both'.
|
|
4176
|
+
*/
|
|
4177
|
+
axis: PropTypes2.oneOf(["both", "x", "y", "none"]),
|
|
4178
|
+
/**
|
|
4179
|
+
* `bounds` determines the range of movement available to the element.
|
|
4180
|
+
* Available values are:
|
|
4181
|
+
*
|
|
4182
|
+
* 'parent' restricts movement within the Draggable's parent node.
|
|
4183
|
+
*
|
|
4184
|
+
* Alternatively, pass an object with the following properties, all of which are optional:
|
|
4185
|
+
*
|
|
4186
|
+
* {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
|
|
4187
|
+
*
|
|
4188
|
+
* All values are in px.
|
|
4189
|
+
*
|
|
4190
|
+
* Example:
|
|
4191
|
+
*
|
|
4192
|
+
* ```jsx
|
|
4193
|
+
* let App = React.createClass({
|
|
4194
|
+
* render: function () {
|
|
4195
|
+
* return (
|
|
4196
|
+
* <Draggable bounds={{right: 300, bottom: 300}}>
|
|
4197
|
+
* <div>Content</div>
|
|
4198
|
+
* </Draggable>
|
|
4199
|
+
* );
|
|
4200
|
+
* }
|
|
4201
|
+
* });
|
|
4202
|
+
* ```
|
|
4203
|
+
*/
|
|
4204
|
+
bounds: PropTypes2.oneOfType([
|
|
4205
|
+
PropTypes2.shape({
|
|
4206
|
+
left: PropTypes2.number,
|
|
4207
|
+
right: PropTypes2.number,
|
|
4208
|
+
top: PropTypes2.number,
|
|
4209
|
+
bottom: PropTypes2.number
|
|
4210
|
+
}),
|
|
4211
|
+
PropTypes2.string,
|
|
4212
|
+
PropTypes2.oneOf([false])
|
|
4213
|
+
]),
|
|
4214
|
+
defaultClassName: PropTypes2.string,
|
|
4215
|
+
defaultClassNameDragging: PropTypes2.string,
|
|
4216
|
+
defaultClassNameDragged: PropTypes2.string,
|
|
4217
|
+
/**
|
|
4218
|
+
* `defaultPosition` specifies the x and y that the dragged item should start at
|
|
4219
|
+
*
|
|
4220
|
+
* Example:
|
|
4221
|
+
*
|
|
4222
|
+
* ```jsx
|
|
4223
|
+
* let App = React.createClass({
|
|
4224
|
+
* render: function () {
|
|
4225
|
+
* return (
|
|
4226
|
+
* <Draggable defaultPosition={{x: 25, y: 25}}>
|
|
4227
|
+
* <div>I start with transformX: 25px and transformY: 25px;</div>
|
|
4228
|
+
* </Draggable>
|
|
4229
|
+
* );
|
|
4230
|
+
* }
|
|
4231
|
+
* });
|
|
4232
|
+
* ```
|
|
4233
|
+
*/
|
|
4234
|
+
defaultPosition: PropTypes2.shape({
|
|
4235
|
+
x: PropTypes2.number,
|
|
4236
|
+
y: PropTypes2.number
|
|
4237
|
+
}),
|
|
4238
|
+
positionOffset: PropTypes2.shape({
|
|
4239
|
+
x: PropTypes2.oneOfType([PropTypes2.number, PropTypes2.string]),
|
|
4240
|
+
y: PropTypes2.oneOfType([PropTypes2.number, PropTypes2.string])
|
|
4241
|
+
}),
|
|
4242
|
+
/**
|
|
4243
|
+
* `position`, if present, defines the current position of the element.
|
|
4244
|
+
*
|
|
4245
|
+
* This is similar to how form elements in React work - if no `position` is supplied, the component
|
|
4246
|
+
* is uncontrolled.
|
|
4247
|
+
*
|
|
4248
|
+
* Example:
|
|
4249
|
+
*
|
|
4250
|
+
* ```jsx
|
|
4251
|
+
* let App = React.createClass({
|
|
4252
|
+
* render: function () {
|
|
4253
|
+
* return (
|
|
4254
|
+
* <Draggable position={{x: 25, y: 25}}>
|
|
4255
|
+
* <div>I start with transformX: 25px and transformY: 25px;</div>
|
|
4256
|
+
* </Draggable>
|
|
4257
|
+
* );
|
|
4258
|
+
* }
|
|
4259
|
+
* });
|
|
4260
|
+
* ```
|
|
4261
|
+
*/
|
|
4262
|
+
position: PropTypes2.shape({
|
|
4263
|
+
x: PropTypes2.number,
|
|
4264
|
+
y: PropTypes2.number
|
|
4265
|
+
}),
|
|
4266
|
+
/**
|
|
4267
|
+
* These properties should be defined on the child, not here.
|
|
4268
|
+
*/
|
|
4269
|
+
className: dontSetMe,
|
|
4270
|
+
style: dontSetMe,
|
|
4271
|
+
transform: dontSetMe
|
|
4272
|
+
};
|
|
4273
|
+
// Typed as the full `DraggableProps` (not just the default-provided subset) so
|
|
4274
|
+
// React's JSX LibraryManagedAttributes treats EVERY prop as optional for
|
|
4275
|
+
// consumers, matching the historical hand-written typings. At runtime only the
|
|
4276
|
+
// default-able props are actually populated.
|
|
4277
|
+
Draggable.defaultProps = {
|
|
4278
|
+
...DraggableCore.defaultProps,
|
|
4279
|
+
axis: "both",
|
|
4280
|
+
bounds: false,
|
|
4281
|
+
defaultClassName: "react-draggable",
|
|
4282
|
+
defaultClassNameDragging: "react-draggable-dragging",
|
|
4283
|
+
defaultClassNameDragged: "react-draggable-dragged",
|
|
4284
|
+
defaultPosition: { x: 0, y: 0 },
|
|
4285
|
+
scale: 1
|
|
4286
|
+
};
|
|
3796
4287
|
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
hasRequiredLog = 1;
|
|
3800
|
-
Object.defineProperty(log, "__esModule", {
|
|
3801
|
-
value: true
|
|
3802
|
-
});
|
|
3803
|
-
log.default = log$1;
|
|
3804
|
-
function log$1() {
|
|
3805
|
-
}
|
|
3806
|
-
return log;
|
|
3807
|
-
}
|
|
3808
|
-
|
|
3809
|
-
var hasRequiredDraggableCore;
|
|
3810
|
-
|
|
3811
|
-
function requireDraggableCore () {
|
|
3812
|
-
if (hasRequiredDraggableCore) return DraggableCore;
|
|
3813
|
-
hasRequiredDraggableCore = 1;
|
|
3814
|
-
Object.defineProperty(DraggableCore, "__esModule", {
|
|
3815
|
-
value: true
|
|
3816
|
-
});
|
|
3817
|
-
DraggableCore.default = void 0;
|
|
3818
|
-
var React = _interopRequireWildcard(React__default);
|
|
3819
|
-
var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
|
|
3820
|
-
var _reactDom = _interopRequireDefault(require$$2);
|
|
3821
|
-
var _domFns = requireDomFns();
|
|
3822
|
-
var _positionFns = requirePositionFns();
|
|
3823
|
-
var _shims = requireShims();
|
|
3824
|
-
var _log = _interopRequireDefault(requireLog());
|
|
3825
|
-
function _interopRequireDefault(e) {
|
|
3826
|
-
return e && e.__esModule ? e : { default: e };
|
|
3827
|
-
}
|
|
3828
|
-
function _interopRequireWildcard(e, t) {
|
|
3829
|
-
if ("function" == typeof WeakMap) var r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap();
|
|
3830
|
-
return (_interopRequireWildcard = function(e2, t2) {
|
|
3831
|
-
if (!t2 && e2 && e2.__esModule) return e2;
|
|
3832
|
-
var o, i, f = { __proto__: null, default: e2 };
|
|
3833
|
-
if (null === e2 || "object" != typeof e2 && "function" != typeof e2) return f;
|
|
3834
|
-
if (o = t2 ? n : r) {
|
|
3835
|
-
if (o.has(e2)) return o.get(e2);
|
|
3836
|
-
o.set(e2, f);
|
|
3837
|
-
}
|
|
3838
|
-
for (const t3 in e2) "default" !== t3 && {}.hasOwnProperty.call(e2, t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e2, t3)) && (i.get || i.set) ? o(f, t3, i) : f[t3] = e2[t3]);
|
|
3839
|
-
return f;
|
|
3840
|
-
})(e, t);
|
|
3841
|
-
}
|
|
3842
|
-
function _defineProperty(e, r, t) {
|
|
3843
|
-
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
|
|
3844
|
-
}
|
|
3845
|
-
function _toPropertyKey(t) {
|
|
3846
|
-
var i = _toPrimitive(t, "string");
|
|
3847
|
-
return "symbol" == typeof i ? i : i + "";
|
|
3848
|
-
}
|
|
3849
|
-
function _toPrimitive(t, r) {
|
|
3850
|
-
if ("object" != typeof t || !t) return t;
|
|
3851
|
-
var e = t[Symbol.toPrimitive];
|
|
3852
|
-
if (void 0 !== e) {
|
|
3853
|
-
var i = e.call(t, r);
|
|
3854
|
-
if ("object" != typeof i) return i;
|
|
3855
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
3856
|
-
}
|
|
3857
|
-
return ("string" === r ? String : Number)(t);
|
|
3858
|
-
}
|
|
3859
|
-
const eventsFor = {
|
|
3860
|
-
touch: {
|
|
3861
|
-
start: "touchstart",
|
|
3862
|
-
move: "touchmove",
|
|
3863
|
-
stop: "touchend"
|
|
3864
|
-
},
|
|
3865
|
-
mouse: {
|
|
3866
|
-
start: "mousedown",
|
|
3867
|
-
move: "mousemove",
|
|
3868
|
-
stop: "mouseup"
|
|
3869
|
-
}
|
|
3870
|
-
};
|
|
3871
|
-
let dragEventFor = eventsFor.mouse;
|
|
3872
|
-
let DraggableCore$1 = class DraggableCore extends React.Component {
|
|
3873
|
-
constructor() {
|
|
3874
|
-
super(...arguments);
|
|
3875
|
-
_defineProperty(this, "dragging", false);
|
|
3876
|
-
_defineProperty(this, "lastX", NaN);
|
|
3877
|
-
_defineProperty(this, "lastY", NaN);
|
|
3878
|
-
_defineProperty(this, "touchIdentifier", null);
|
|
3879
|
-
_defineProperty(this, "mounted", false);
|
|
3880
|
-
_defineProperty(this, "handleDragStart", (e) => {
|
|
3881
|
-
this.props.onMouseDown(e);
|
|
3882
|
-
if (!this.props.allowAnyClick && typeof e.button === "number" && e.button !== 0) return false;
|
|
3883
|
-
const thisNode = this.findDOMNode();
|
|
3884
|
-
if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
|
|
3885
|
-
throw new Error("<DraggableCore> not mounted on DragStart!");
|
|
3886
|
-
}
|
|
3887
|
-
const {
|
|
3888
|
-
ownerDocument
|
|
3889
|
-
} = thisNode;
|
|
3890
|
-
if (this.props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || this.props.handle && !(0, _domFns.matchesSelectorAndParentsTo)(e.target, this.props.handle, thisNode) || this.props.cancel && (0, _domFns.matchesSelectorAndParentsTo)(e.target, this.props.cancel, thisNode)) {
|
|
3891
|
-
return;
|
|
3892
|
-
}
|
|
3893
|
-
if (e.type === "touchstart" && !this.props.allowMobileScroll) e.preventDefault();
|
|
3894
|
-
const touchIdentifier = (0, _domFns.getTouchIdentifier)(e);
|
|
3895
|
-
this.touchIdentifier = touchIdentifier;
|
|
3896
|
-
const position = (0, _positionFns.getControlPosition)(e, touchIdentifier, this);
|
|
3897
|
-
if (position == null) return;
|
|
3898
|
-
const {
|
|
3899
|
-
x,
|
|
3900
|
-
y
|
|
3901
|
-
} = position;
|
|
3902
|
-
const coreEvent = (0, _positionFns.createCoreData)(this, x, y);
|
|
3903
|
-
(0, _log.default)("DraggableCore: handleDragStart: %j", coreEvent);
|
|
3904
|
-
(0, _log.default)("calling", this.props.onStart);
|
|
3905
|
-
const shouldUpdate = this.props.onStart(e, coreEvent);
|
|
3906
|
-
if (shouldUpdate === false || this.mounted === false) return;
|
|
3907
|
-
if (this.props.enableUserSelectHack) (0, _domFns.addUserSelectStyles)(ownerDocument);
|
|
3908
|
-
this.dragging = true;
|
|
3909
|
-
this.lastX = x;
|
|
3910
|
-
this.lastY = y;
|
|
3911
|
-
(0, _domFns.addEvent)(ownerDocument, dragEventFor.move, this.handleDrag);
|
|
3912
|
-
(0, _domFns.addEvent)(ownerDocument, dragEventFor.stop, this.handleDragStop);
|
|
3913
|
-
});
|
|
3914
|
-
_defineProperty(this, "handleDrag", (e) => {
|
|
3915
|
-
const position = (0, _positionFns.getControlPosition)(e, this.touchIdentifier, this);
|
|
3916
|
-
if (position == null) return;
|
|
3917
|
-
let {
|
|
3918
|
-
x,
|
|
3919
|
-
y
|
|
3920
|
-
} = position;
|
|
3921
|
-
if (Array.isArray(this.props.grid)) {
|
|
3922
|
-
let deltaX = x - this.lastX, deltaY = y - this.lastY;
|
|
3923
|
-
[deltaX, deltaY] = (0, _positionFns.snapToGrid)(this.props.grid, deltaX, deltaY);
|
|
3924
|
-
if (!deltaX && !deltaY) return;
|
|
3925
|
-
x = this.lastX + deltaX, y = this.lastY + deltaY;
|
|
3926
|
-
}
|
|
3927
|
-
const coreEvent = (0, _positionFns.createCoreData)(this, x, y);
|
|
3928
|
-
(0, _log.default)("DraggableCore: handleDrag: %j", coreEvent);
|
|
3929
|
-
const shouldUpdate = this.props.onDrag(e, coreEvent);
|
|
3930
|
-
if (shouldUpdate === false || this.mounted === false) {
|
|
3931
|
-
try {
|
|
3932
|
-
this.handleDragStop(new MouseEvent("mouseup"));
|
|
3933
|
-
} catch (err) {
|
|
3934
|
-
const event = document.createEvent("MouseEvents");
|
|
3935
|
-
event.initMouseEvent("mouseup", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
|
3936
|
-
this.handleDragStop(event);
|
|
3937
|
-
}
|
|
3938
|
-
return;
|
|
3939
|
-
}
|
|
3940
|
-
this.lastX = x;
|
|
3941
|
-
this.lastY = y;
|
|
3942
|
-
});
|
|
3943
|
-
_defineProperty(this, "handleDragStop", (e) => {
|
|
3944
|
-
if (!this.dragging) return;
|
|
3945
|
-
const position = (0, _positionFns.getControlPosition)(e, this.touchIdentifier, this);
|
|
3946
|
-
if (position == null) return;
|
|
3947
|
-
let {
|
|
3948
|
-
x,
|
|
3949
|
-
y
|
|
3950
|
-
} = position;
|
|
3951
|
-
if (Array.isArray(this.props.grid)) {
|
|
3952
|
-
let deltaX = x - this.lastX || 0;
|
|
3953
|
-
let deltaY = y - this.lastY || 0;
|
|
3954
|
-
[deltaX, deltaY] = (0, _positionFns.snapToGrid)(this.props.grid, deltaX, deltaY);
|
|
3955
|
-
x = this.lastX + deltaX, y = this.lastY + deltaY;
|
|
3956
|
-
}
|
|
3957
|
-
const coreEvent = (0, _positionFns.createCoreData)(this, x, y);
|
|
3958
|
-
const shouldContinue = this.props.onStop(e, coreEvent);
|
|
3959
|
-
if (shouldContinue === false || this.mounted === false) return false;
|
|
3960
|
-
const thisNode = this.findDOMNode();
|
|
3961
|
-
if (thisNode) {
|
|
3962
|
-
if (this.props.enableUserSelectHack) (0, _domFns.scheduleRemoveUserSelectStyles)(thisNode.ownerDocument);
|
|
3963
|
-
}
|
|
3964
|
-
(0, _log.default)("DraggableCore: handleDragStop: %j", coreEvent);
|
|
3965
|
-
this.dragging = false;
|
|
3966
|
-
this.lastX = NaN;
|
|
3967
|
-
this.lastY = NaN;
|
|
3968
|
-
if (thisNode) {
|
|
3969
|
-
(0, _log.default)("DraggableCore: Removing handlers");
|
|
3970
|
-
(0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.move, this.handleDrag);
|
|
3971
|
-
(0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.stop, this.handleDragStop);
|
|
3972
|
-
}
|
|
3973
|
-
});
|
|
3974
|
-
_defineProperty(this, "onMouseDown", (e) => {
|
|
3975
|
-
dragEventFor = eventsFor.mouse;
|
|
3976
|
-
return this.handleDragStart(e);
|
|
3977
|
-
});
|
|
3978
|
-
_defineProperty(this, "onMouseUp", (e) => {
|
|
3979
|
-
dragEventFor = eventsFor.mouse;
|
|
3980
|
-
return this.handleDragStop(e);
|
|
3981
|
-
});
|
|
3982
|
-
_defineProperty(this, "onTouchStart", (e) => {
|
|
3983
|
-
dragEventFor = eventsFor.touch;
|
|
3984
|
-
return this.handleDragStart(e);
|
|
3985
|
-
});
|
|
3986
|
-
_defineProperty(this, "onTouchEnd", (e) => {
|
|
3987
|
-
dragEventFor = eventsFor.touch;
|
|
3988
|
-
return this.handleDragStop(e);
|
|
3989
|
-
});
|
|
3990
|
-
}
|
|
3991
|
-
componentDidMount() {
|
|
3992
|
-
this.mounted = true;
|
|
3993
|
-
const thisNode = this.findDOMNode();
|
|
3994
|
-
if (thisNode) {
|
|
3995
|
-
(0, _domFns.addEvent)(thisNode, eventsFor.touch.start, this.onTouchStart, {
|
|
3996
|
-
passive: false
|
|
3997
|
-
});
|
|
3998
|
-
}
|
|
3999
|
-
}
|
|
4000
|
-
componentWillUnmount() {
|
|
4001
|
-
this.mounted = false;
|
|
4002
|
-
const thisNode = this.findDOMNode();
|
|
4003
|
-
if (thisNode) {
|
|
4004
|
-
const {
|
|
4005
|
-
ownerDocument
|
|
4006
|
-
} = thisNode;
|
|
4007
|
-
(0, _domFns.removeEvent)(ownerDocument, eventsFor.mouse.move, this.handleDrag);
|
|
4008
|
-
(0, _domFns.removeEvent)(ownerDocument, eventsFor.touch.move, this.handleDrag);
|
|
4009
|
-
(0, _domFns.removeEvent)(ownerDocument, eventsFor.mouse.stop, this.handleDragStop);
|
|
4010
|
-
(0, _domFns.removeEvent)(ownerDocument, eventsFor.touch.stop, this.handleDragStop);
|
|
4011
|
-
(0, _domFns.removeEvent)(thisNode, eventsFor.touch.start, this.onTouchStart, {
|
|
4012
|
-
passive: false
|
|
4013
|
-
});
|
|
4014
|
-
if (this.props.enableUserSelectHack) (0, _domFns.scheduleRemoveUserSelectStyles)(ownerDocument);
|
|
4015
|
-
}
|
|
4016
|
-
}
|
|
4017
|
-
// React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
|
|
4018
|
-
// the underlying DOM node ourselves. See the README for more information.
|
|
4019
|
-
findDOMNode() {
|
|
4020
|
-
return this.props?.nodeRef ? this.props?.nodeRef?.current : _reactDom.default.findDOMNode(this);
|
|
4021
|
-
}
|
|
4022
|
-
render() {
|
|
4023
|
-
return /* @__PURE__ */ React.cloneElement(React.Children.only(this.props.children), {
|
|
4024
|
-
// Note: mouseMove handler is attached to document so it will still function
|
|
4025
|
-
// when the user drags quickly and leaves the bounds of the element.
|
|
4026
|
-
onMouseDown: this.onMouseDown,
|
|
4027
|
-
onMouseUp: this.onMouseUp,
|
|
4028
|
-
// onTouchStart is added on `componentDidMount` so they can be added with
|
|
4029
|
-
// {passive: false}, which allows it to cancel. See
|
|
4030
|
-
// https://developers.google.com/web/updates/2017/01/scrolling-intervention
|
|
4031
|
-
onTouchEnd: this.onTouchEnd
|
|
4032
|
-
});
|
|
4033
|
-
}
|
|
4034
|
-
};
|
|
4035
|
-
DraggableCore.default = DraggableCore$1;
|
|
4036
|
-
_defineProperty(DraggableCore$1, "displayName", "DraggableCore");
|
|
4037
|
-
_defineProperty(DraggableCore$1, "propTypes", {
|
|
4038
|
-
/**
|
|
4039
|
-
* `allowAnyClick` allows dragging using any mouse button.
|
|
4040
|
-
* By default, we only accept the left button.
|
|
4041
|
-
*
|
|
4042
|
-
* Defaults to `false`.
|
|
4043
|
-
*/
|
|
4044
|
-
allowAnyClick: _propTypes.default.bool,
|
|
4045
|
-
/**
|
|
4046
|
-
* `allowMobileScroll` turns off cancellation of the 'touchstart' event
|
|
4047
|
-
* on mobile devices. Only enable this if you are having trouble with click
|
|
4048
|
-
* events. Prefer using 'handle' / 'cancel' instead.
|
|
4049
|
-
*
|
|
4050
|
-
* Defaults to `false`.
|
|
4051
|
-
*/
|
|
4052
|
-
allowMobileScroll: _propTypes.default.bool,
|
|
4053
|
-
children: _propTypes.default.node.isRequired,
|
|
4054
|
-
/**
|
|
4055
|
-
* `disabled`, if true, stops the <Draggable> from dragging. All handlers,
|
|
4056
|
-
* with the exception of `onMouseDown`, will not fire.
|
|
4057
|
-
*/
|
|
4058
|
-
disabled: _propTypes.default.bool,
|
|
4059
|
-
/**
|
|
4060
|
-
* By default, we add 'user-select:none' attributes to the document body
|
|
4061
|
-
* to prevent ugly text selection during drag. If this is causing problems
|
|
4062
|
-
* for your app, set this to `false`.
|
|
4063
|
-
*/
|
|
4064
|
-
enableUserSelectHack: _propTypes.default.bool,
|
|
4065
|
-
/**
|
|
4066
|
-
* `offsetParent`, if set, uses the passed DOM node to compute drag offsets
|
|
4067
|
-
* instead of using the parent node.
|
|
4068
|
-
*/
|
|
4069
|
-
offsetParent: function(props, propName) {
|
|
4070
|
-
if (props[propName] && props[propName].nodeType !== 1) {
|
|
4071
|
-
throw new Error("Draggable's offsetParent must be a DOM Node.");
|
|
4072
|
-
}
|
|
4073
|
-
},
|
|
4074
|
-
/**
|
|
4075
|
-
* `grid` specifies the x and y that dragging should snap to.
|
|
4076
|
-
*/
|
|
4077
|
-
grid: _propTypes.default.arrayOf(_propTypes.default.number),
|
|
4078
|
-
/**
|
|
4079
|
-
* `handle` specifies a selector to be used as the handle that initiates drag.
|
|
4080
|
-
*
|
|
4081
|
-
* Example:
|
|
4082
|
-
*
|
|
4083
|
-
* ```jsx
|
|
4084
|
-
* let App = React.createClass({
|
|
4085
|
-
* render: function () {
|
|
4086
|
-
* return (
|
|
4087
|
-
* <Draggable handle=".handle">
|
|
4088
|
-
* <div>
|
|
4089
|
-
* <div className="handle">Click me to drag</div>
|
|
4090
|
-
* <div>This is some other content</div>
|
|
4091
|
-
* </div>
|
|
4092
|
-
* </Draggable>
|
|
4093
|
-
* );
|
|
4094
|
-
* }
|
|
4095
|
-
* });
|
|
4096
|
-
* ```
|
|
4097
|
-
*/
|
|
4098
|
-
handle: _propTypes.default.string,
|
|
4099
|
-
/**
|
|
4100
|
-
* `cancel` specifies a selector to be used to prevent drag initialization.
|
|
4101
|
-
*
|
|
4102
|
-
* Example:
|
|
4103
|
-
*
|
|
4104
|
-
* ```jsx
|
|
4105
|
-
* let App = React.createClass({
|
|
4106
|
-
* render: function () {
|
|
4107
|
-
* return(
|
|
4108
|
-
* <Draggable cancel=".cancel">
|
|
4109
|
-
* <div>
|
|
4110
|
-
* <div className="cancel">You can't drag from here</div>
|
|
4111
|
-
* <div>Dragging here works fine</div>
|
|
4112
|
-
* </div>
|
|
4113
|
-
* </Draggable>
|
|
4114
|
-
* );
|
|
4115
|
-
* }
|
|
4116
|
-
* });
|
|
4117
|
-
* ```
|
|
4118
|
-
*/
|
|
4119
|
-
cancel: _propTypes.default.string,
|
|
4120
|
-
/* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
|
|
4121
|
-
* Unfortunately, in order for <Draggable> to work properly, we need raw access
|
|
4122
|
-
* to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
|
|
4123
|
-
* as in this example:
|
|
4124
|
-
*
|
|
4125
|
-
* function MyComponent() {
|
|
4126
|
-
* const nodeRef = React.useRef(null);
|
|
4127
|
-
* return (
|
|
4128
|
-
* <Draggable nodeRef={nodeRef}>
|
|
4129
|
-
* <div ref={nodeRef}>Example Target</div>
|
|
4130
|
-
* </Draggable>
|
|
4131
|
-
* );
|
|
4132
|
-
* }
|
|
4133
|
-
*
|
|
4134
|
-
* This can be used for arbitrarily nested components, so long as the ref ends up
|
|
4135
|
-
* pointing to the actual child DOM node and not a custom component.
|
|
4136
|
-
*/
|
|
4137
|
-
nodeRef: _propTypes.default.object,
|
|
4138
|
-
/**
|
|
4139
|
-
* Called when dragging starts.
|
|
4140
|
-
* If this function returns the boolean false, dragging will be canceled.
|
|
4141
|
-
*/
|
|
4142
|
-
onStart: _propTypes.default.func,
|
|
4143
|
-
/**
|
|
4144
|
-
* Called while dragging.
|
|
4145
|
-
* If this function returns the boolean false, dragging will be canceled.
|
|
4146
|
-
*/
|
|
4147
|
-
onDrag: _propTypes.default.func,
|
|
4148
|
-
/**
|
|
4149
|
-
* Called when dragging stops.
|
|
4150
|
-
* If this function returns the boolean false, the drag will remain active.
|
|
4151
|
-
*/
|
|
4152
|
-
onStop: _propTypes.default.func,
|
|
4153
|
-
/**
|
|
4154
|
-
* A workaround option which can be passed if onMouseDown needs to be accessed,
|
|
4155
|
-
* since it'll always be blocked (as there is internal use of onMouseDown)
|
|
4156
|
-
*/
|
|
4157
|
-
onMouseDown: _propTypes.default.func,
|
|
4158
|
-
/**
|
|
4159
|
-
* `scale`, if set, applies scaling while dragging an element
|
|
4160
|
-
*/
|
|
4161
|
-
scale: _propTypes.default.number,
|
|
4162
|
-
/**
|
|
4163
|
-
* These properties should be defined on the child, not here.
|
|
4164
|
-
*/
|
|
4165
|
-
className: _shims.dontSetMe,
|
|
4166
|
-
style: _shims.dontSetMe,
|
|
4167
|
-
transform: _shims.dontSetMe
|
|
4168
|
-
});
|
|
4169
|
-
_defineProperty(DraggableCore$1, "defaultProps", {
|
|
4170
|
-
allowAnyClick: false,
|
|
4171
|
-
// by default only accept left click
|
|
4172
|
-
allowMobileScroll: false,
|
|
4173
|
-
disabled: false,
|
|
4174
|
-
enableUserSelectHack: true,
|
|
4175
|
-
onStart: function() {
|
|
4176
|
-
},
|
|
4177
|
-
onDrag: function() {
|
|
4178
|
-
},
|
|
4179
|
-
onStop: function() {
|
|
4180
|
-
},
|
|
4181
|
-
onMouseDown: function() {
|
|
4182
|
-
},
|
|
4183
|
-
scale: 1
|
|
4184
|
-
});
|
|
4185
|
-
return DraggableCore;
|
|
4186
|
-
}
|
|
4187
|
-
|
|
4188
|
-
var hasRequiredDraggable;
|
|
4189
|
-
|
|
4190
|
-
function requireDraggable () {
|
|
4191
|
-
if (hasRequiredDraggable) return Draggable$1;
|
|
4192
|
-
hasRequiredDraggable = 1;
|
|
4193
|
-
(function (exports) {
|
|
4194
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4195
|
-
value: true
|
|
4196
|
-
});
|
|
4197
|
-
Object.defineProperty(exports, "DraggableCore", {
|
|
4198
|
-
enumerable: true,
|
|
4199
|
-
get: function() {
|
|
4200
|
-
return _DraggableCore.default;
|
|
4201
|
-
}
|
|
4202
|
-
});
|
|
4203
|
-
exports.default = void 0;
|
|
4204
|
-
var React = _interopRequireWildcard(React__default);
|
|
4205
|
-
var _propTypes = _interopRequireDefault(/*@__PURE__*/ requirePropTypes());
|
|
4206
|
-
var _reactDom = _interopRequireDefault(require$$2);
|
|
4207
|
-
var _clsx = requireClsx();
|
|
4208
|
-
var _domFns = requireDomFns();
|
|
4209
|
-
var _positionFns = requirePositionFns();
|
|
4210
|
-
var _shims = requireShims();
|
|
4211
|
-
var _DraggableCore = _interopRequireDefault(requireDraggableCore());
|
|
4212
|
-
var _log = _interopRequireDefault(requireLog());
|
|
4213
|
-
function _interopRequireDefault(e) {
|
|
4214
|
-
return e && e.__esModule ? e : { default: e };
|
|
4215
|
-
}
|
|
4216
|
-
function _interopRequireWildcard(e, t) {
|
|
4217
|
-
if ("function" == typeof WeakMap) var r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap();
|
|
4218
|
-
return (_interopRequireWildcard = function(e2, t2) {
|
|
4219
|
-
if (!t2 && e2 && e2.__esModule) return e2;
|
|
4220
|
-
var o, i, f = { __proto__: null, default: e2 };
|
|
4221
|
-
if (null === e2 || "object" != typeof e2 && "function" != typeof e2) return f;
|
|
4222
|
-
if (o = t2 ? n : r) {
|
|
4223
|
-
if (o.has(e2)) return o.get(e2);
|
|
4224
|
-
o.set(e2, f);
|
|
4225
|
-
}
|
|
4226
|
-
for (const t3 in e2) "default" !== t3 && {}.hasOwnProperty.call(e2, t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e2, t3)) && (i.get || i.set) ? o(f, t3, i) : f[t3] = e2[t3]);
|
|
4227
|
-
return f;
|
|
4228
|
-
})(e, t);
|
|
4229
|
-
}
|
|
4230
|
-
function _extends() {
|
|
4231
|
-
return _extends = Object.assign ? Object.assign.bind() : function(n) {
|
|
4232
|
-
for (var e = 1; e < arguments.length; e++) {
|
|
4233
|
-
var t = arguments[e];
|
|
4234
|
-
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
4235
|
-
}
|
|
4236
|
-
return n;
|
|
4237
|
-
}, _extends.apply(null, arguments);
|
|
4238
|
-
}
|
|
4239
|
-
function _defineProperty(e, r, t) {
|
|
4240
|
-
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
|
|
4241
|
-
}
|
|
4242
|
-
function _toPropertyKey(t) {
|
|
4243
|
-
var i = _toPrimitive(t, "string");
|
|
4244
|
-
return "symbol" == typeof i ? i : i + "";
|
|
4245
|
-
}
|
|
4246
|
-
function _toPrimitive(t, r) {
|
|
4247
|
-
if ("object" != typeof t || !t) return t;
|
|
4248
|
-
var e = t[Symbol.toPrimitive];
|
|
4249
|
-
if (void 0 !== e) {
|
|
4250
|
-
var i = e.call(t, r);
|
|
4251
|
-
if ("object" != typeof i) return i;
|
|
4252
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
4253
|
-
}
|
|
4254
|
-
return ("string" === r ? String : Number)(t);
|
|
4255
|
-
}
|
|
4256
|
-
class Draggable extends React.Component {
|
|
4257
|
-
// React 16.3+
|
|
4258
|
-
// Arity (props, state)
|
|
4259
|
-
static getDerivedStateFromProps(_ref, _ref2) {
|
|
4260
|
-
let {
|
|
4261
|
-
position
|
|
4262
|
-
} = _ref;
|
|
4263
|
-
let {
|
|
4264
|
-
prevPropsPosition
|
|
4265
|
-
} = _ref2;
|
|
4266
|
-
if (position && (!prevPropsPosition || position.x !== prevPropsPosition.x || position.y !== prevPropsPosition.y)) {
|
|
4267
|
-
(0, _log.default)("Draggable: getDerivedStateFromProps %j", {
|
|
4268
|
-
position,
|
|
4269
|
-
prevPropsPosition
|
|
4270
|
-
});
|
|
4271
|
-
return {
|
|
4272
|
-
x: position.x,
|
|
4273
|
-
y: position.y,
|
|
4274
|
-
prevPropsPosition: {
|
|
4275
|
-
...position
|
|
4276
|
-
}
|
|
4277
|
-
};
|
|
4278
|
-
}
|
|
4279
|
-
return null;
|
|
4280
|
-
}
|
|
4281
|
-
constructor(props) {
|
|
4282
|
-
super(props);
|
|
4283
|
-
_defineProperty(this, "onDragStart", (e, coreData) => {
|
|
4284
|
-
(0, _log.default)("Draggable: onDragStart: %j", coreData);
|
|
4285
|
-
const shouldStart = this.props.onStart(e, (0, _positionFns.createDraggableData)(this, coreData));
|
|
4286
|
-
if (shouldStart === false) return false;
|
|
4287
|
-
this.setState({
|
|
4288
|
-
dragging: true,
|
|
4289
|
-
dragged: true
|
|
4290
|
-
});
|
|
4291
|
-
});
|
|
4292
|
-
_defineProperty(this, "onDrag", (e, coreData) => {
|
|
4293
|
-
if (!this.state.dragging) return false;
|
|
4294
|
-
(0, _log.default)("Draggable: onDrag: %j", coreData);
|
|
4295
|
-
const uiData = (0, _positionFns.createDraggableData)(this, coreData);
|
|
4296
|
-
const newState = {
|
|
4297
|
-
x: uiData.x,
|
|
4298
|
-
y: uiData.y,
|
|
4299
|
-
slackX: 0,
|
|
4300
|
-
slackY: 0
|
|
4301
|
-
};
|
|
4302
|
-
if (this.props.bounds) {
|
|
4303
|
-
const {
|
|
4304
|
-
x,
|
|
4305
|
-
y
|
|
4306
|
-
} = newState;
|
|
4307
|
-
newState.x += this.state.slackX;
|
|
4308
|
-
newState.y += this.state.slackY;
|
|
4309
|
-
const [newStateX, newStateY] = (0, _positionFns.getBoundPosition)(this, newState.x, newState.y);
|
|
4310
|
-
newState.x = newStateX;
|
|
4311
|
-
newState.y = newStateY;
|
|
4312
|
-
newState.slackX = this.state.slackX + (x - newState.x);
|
|
4313
|
-
newState.slackY = this.state.slackY + (y - newState.y);
|
|
4314
|
-
uiData.x = newState.x;
|
|
4315
|
-
uiData.y = newState.y;
|
|
4316
|
-
uiData.deltaX = newState.x - this.state.x;
|
|
4317
|
-
uiData.deltaY = newState.y - this.state.y;
|
|
4318
|
-
}
|
|
4319
|
-
const shouldUpdate = this.props.onDrag(e, uiData);
|
|
4320
|
-
if (shouldUpdate === false) return false;
|
|
4321
|
-
this.setState(newState);
|
|
4322
|
-
});
|
|
4323
|
-
_defineProperty(this, "onDragStop", (e, coreData) => {
|
|
4324
|
-
if (!this.state.dragging) return false;
|
|
4325
|
-
const shouldContinue = this.props.onStop(e, (0, _positionFns.createDraggableData)(this, coreData));
|
|
4326
|
-
if (shouldContinue === false) return false;
|
|
4327
|
-
(0, _log.default)("Draggable: onDragStop: %j", coreData);
|
|
4328
|
-
const newState = {
|
|
4329
|
-
dragging: false,
|
|
4330
|
-
slackX: 0,
|
|
4331
|
-
slackY: 0
|
|
4332
|
-
};
|
|
4333
|
-
const controlled = Boolean(this.props.position);
|
|
4334
|
-
if (controlled) {
|
|
4335
|
-
const {
|
|
4336
|
-
x,
|
|
4337
|
-
y
|
|
4338
|
-
} = this.props.position;
|
|
4339
|
-
newState.x = x;
|
|
4340
|
-
newState.y = y;
|
|
4341
|
-
}
|
|
4342
|
-
this.setState(newState);
|
|
4343
|
-
});
|
|
4344
|
-
this.state = {
|
|
4345
|
-
// Whether or not we are currently dragging.
|
|
4346
|
-
dragging: false,
|
|
4347
|
-
// Whether or not we have been dragged before.
|
|
4348
|
-
dragged: false,
|
|
4349
|
-
// Current transform x and y.
|
|
4350
|
-
x: props.position ? props.position.x : props.defaultPosition.x,
|
|
4351
|
-
y: props.position ? props.position.y : props.defaultPosition.y,
|
|
4352
|
-
prevPropsPosition: {
|
|
4353
|
-
...props.position
|
|
4354
|
-
},
|
|
4355
|
-
// Used for compensating for out-of-bounds drags
|
|
4356
|
-
slackX: 0,
|
|
4357
|
-
slackY: 0,
|
|
4358
|
-
// Can only determine if SVG after mounting
|
|
4359
|
-
isElementSVG: false
|
|
4360
|
-
};
|
|
4361
|
-
if (props.position && !(props.onDrag || props.onStop)) {
|
|
4362
|
-
console.warn("A `position` was applied to this <Draggable>, without drag handlers. This will make this component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the `position` of this element.");
|
|
4363
|
-
}
|
|
4364
|
-
}
|
|
4365
|
-
componentDidMount() {
|
|
4366
|
-
if (typeof window.SVGElement !== "undefined" && this.findDOMNode() instanceof window.SVGElement) {
|
|
4367
|
-
this.setState({
|
|
4368
|
-
isElementSVG: true
|
|
4369
|
-
});
|
|
4370
|
-
}
|
|
4371
|
-
}
|
|
4372
|
-
componentWillUnmount() {
|
|
4373
|
-
if (this.state.dragging) {
|
|
4374
|
-
this.setState({
|
|
4375
|
-
dragging: false
|
|
4376
|
-
});
|
|
4377
|
-
}
|
|
4378
|
-
}
|
|
4379
|
-
// React Strict Mode compatibility: if `nodeRef` is passed, we will use it instead of trying to find
|
|
4380
|
-
// the underlying DOM node ourselves. See the README for more information.
|
|
4381
|
-
findDOMNode() {
|
|
4382
|
-
return this.props?.nodeRef?.current ?? _reactDom.default.findDOMNode(this);
|
|
4383
|
-
}
|
|
4384
|
-
render() {
|
|
4385
|
-
const {
|
|
4386
|
-
axis,
|
|
4387
|
-
bounds,
|
|
4388
|
-
children,
|
|
4389
|
-
defaultPosition,
|
|
4390
|
-
defaultClassName,
|
|
4391
|
-
defaultClassNameDragging,
|
|
4392
|
-
defaultClassNameDragged,
|
|
4393
|
-
position,
|
|
4394
|
-
positionOffset,
|
|
4395
|
-
scale,
|
|
4396
|
-
...draggableCoreProps
|
|
4397
|
-
} = this.props;
|
|
4398
|
-
let style = {};
|
|
4399
|
-
let svgTransform = null;
|
|
4400
|
-
const controlled = Boolean(position);
|
|
4401
|
-
const draggable = !controlled || this.state.dragging;
|
|
4402
|
-
const validPosition = position || defaultPosition;
|
|
4403
|
-
const transformOpts = {
|
|
4404
|
-
// Set left if horizontal drag is enabled
|
|
4405
|
-
x: (0, _positionFns.canDragX)(this) && draggable ? this.state.x : validPosition.x,
|
|
4406
|
-
// Set top if vertical drag is enabled
|
|
4407
|
-
y: (0, _positionFns.canDragY)(this) && draggable ? this.state.y : validPosition.y
|
|
4408
|
-
};
|
|
4409
|
-
if (this.state.isElementSVG) {
|
|
4410
|
-
svgTransform = (0, _domFns.createSVGTransform)(transformOpts, positionOffset);
|
|
4411
|
-
} else {
|
|
4412
|
-
style = (0, _domFns.createCSSTransform)(transformOpts, positionOffset);
|
|
4413
|
-
}
|
|
4414
|
-
const className = (0, _clsx.clsx)(children.props.className || "", defaultClassName, {
|
|
4415
|
-
[defaultClassNameDragging]: this.state.dragging,
|
|
4416
|
-
[defaultClassNameDragged]: this.state.dragged
|
|
4417
|
-
});
|
|
4418
|
-
return /* @__PURE__ */ React.createElement(_DraggableCore.default, _extends({}, draggableCoreProps, {
|
|
4419
|
-
onStart: this.onDragStart,
|
|
4420
|
-
onDrag: this.onDrag,
|
|
4421
|
-
onStop: this.onDragStop
|
|
4422
|
-
}), /* @__PURE__ */ React.cloneElement(React.Children.only(children), {
|
|
4423
|
-
className,
|
|
4424
|
-
style: {
|
|
4425
|
-
...children.props.style,
|
|
4426
|
-
...style
|
|
4427
|
-
},
|
|
4428
|
-
transform: svgTransform
|
|
4429
|
-
}));
|
|
4430
|
-
}
|
|
4431
|
-
}
|
|
4432
|
-
exports.default = Draggable;
|
|
4433
|
-
_defineProperty(Draggable, "displayName", "Draggable");
|
|
4434
|
-
_defineProperty(Draggable, "propTypes", {
|
|
4435
|
-
// Accepts all props <DraggableCore> accepts.
|
|
4436
|
-
..._DraggableCore.default.propTypes,
|
|
4437
|
-
/**
|
|
4438
|
-
* `axis` determines which axis the draggable can move.
|
|
4439
|
-
*
|
|
4440
|
-
* Note that all callbacks will still return data as normal. This only
|
|
4441
|
-
* controls flushing to the DOM.
|
|
4442
|
-
*
|
|
4443
|
-
* 'both' allows movement horizontally and vertically.
|
|
4444
|
-
* 'x' limits movement to horizontal axis.
|
|
4445
|
-
* 'y' limits movement to vertical axis.
|
|
4446
|
-
* 'none' limits all movement.
|
|
4447
|
-
*
|
|
4448
|
-
* Defaults to 'both'.
|
|
4449
|
-
*/
|
|
4450
|
-
axis: _propTypes.default.oneOf(["both", "x", "y", "none"]),
|
|
4451
|
-
/**
|
|
4452
|
-
* `bounds` determines the range of movement available to the element.
|
|
4453
|
-
* Available values are:
|
|
4454
|
-
*
|
|
4455
|
-
* 'parent' restricts movement within the Draggable's parent node.
|
|
4456
|
-
*
|
|
4457
|
-
* Alternatively, pass an object with the following properties, all of which are optional:
|
|
4458
|
-
*
|
|
4459
|
-
* {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
|
|
4460
|
-
*
|
|
4461
|
-
* All values are in px.
|
|
4462
|
-
*
|
|
4463
|
-
* Example:
|
|
4464
|
-
*
|
|
4465
|
-
* ```jsx
|
|
4466
|
-
* let App = React.createClass({
|
|
4467
|
-
* render: function () {
|
|
4468
|
-
* return (
|
|
4469
|
-
* <Draggable bounds={{right: 300, bottom: 300}}>
|
|
4470
|
-
* <div>Content</div>
|
|
4471
|
-
* </Draggable>
|
|
4472
|
-
* );
|
|
4473
|
-
* }
|
|
4474
|
-
* });
|
|
4475
|
-
* ```
|
|
4476
|
-
*/
|
|
4477
|
-
bounds: _propTypes.default.oneOfType([_propTypes.default.shape({
|
|
4478
|
-
left: _propTypes.default.number,
|
|
4479
|
-
right: _propTypes.default.number,
|
|
4480
|
-
top: _propTypes.default.number,
|
|
4481
|
-
bottom: _propTypes.default.number
|
|
4482
|
-
}), _propTypes.default.string, _propTypes.default.oneOf([false])]),
|
|
4483
|
-
defaultClassName: _propTypes.default.string,
|
|
4484
|
-
defaultClassNameDragging: _propTypes.default.string,
|
|
4485
|
-
defaultClassNameDragged: _propTypes.default.string,
|
|
4486
|
-
/**
|
|
4487
|
-
* `defaultPosition` specifies the x and y that the dragged item should start at
|
|
4488
|
-
*
|
|
4489
|
-
* Example:
|
|
4490
|
-
*
|
|
4491
|
-
* ```jsx
|
|
4492
|
-
* let App = React.createClass({
|
|
4493
|
-
* render: function () {
|
|
4494
|
-
* return (
|
|
4495
|
-
* <Draggable defaultPosition={{x: 25, y: 25}}>
|
|
4496
|
-
* <div>I start with transformX: 25px and transformY: 25px;</div>
|
|
4497
|
-
* </Draggable>
|
|
4498
|
-
* );
|
|
4499
|
-
* }
|
|
4500
|
-
* });
|
|
4501
|
-
* ```
|
|
4502
|
-
*/
|
|
4503
|
-
defaultPosition: _propTypes.default.shape({
|
|
4504
|
-
x: _propTypes.default.number,
|
|
4505
|
-
y: _propTypes.default.number
|
|
4506
|
-
}),
|
|
4507
|
-
positionOffset: _propTypes.default.shape({
|
|
4508
|
-
x: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
4509
|
-
y: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
|
|
4510
|
-
}),
|
|
4511
|
-
/**
|
|
4512
|
-
* `position`, if present, defines the current position of the element.
|
|
4513
|
-
*
|
|
4514
|
-
* This is similar to how form elements in React work - if no `position` is supplied, the component
|
|
4515
|
-
* is uncontrolled.
|
|
4516
|
-
*
|
|
4517
|
-
* Example:
|
|
4518
|
-
*
|
|
4519
|
-
* ```jsx
|
|
4520
|
-
* let App = React.createClass({
|
|
4521
|
-
* render: function () {
|
|
4522
|
-
* return (
|
|
4523
|
-
* <Draggable position={{x: 25, y: 25}}>
|
|
4524
|
-
* <div>I start with transformX: 25px and transformY: 25px;</div>
|
|
4525
|
-
* </Draggable>
|
|
4526
|
-
* );
|
|
4527
|
-
* }
|
|
4528
|
-
* });
|
|
4529
|
-
* ```
|
|
4530
|
-
*/
|
|
4531
|
-
position: _propTypes.default.shape({
|
|
4532
|
-
x: _propTypes.default.number,
|
|
4533
|
-
y: _propTypes.default.number
|
|
4534
|
-
}),
|
|
4535
|
-
/**
|
|
4536
|
-
* These properties should be defined on the child, not here.
|
|
4537
|
-
*/
|
|
4538
|
-
className: _shims.dontSetMe,
|
|
4539
|
-
style: _shims.dontSetMe,
|
|
4540
|
-
transform: _shims.dontSetMe
|
|
4541
|
-
});
|
|
4542
|
-
_defineProperty(Draggable, "defaultProps", {
|
|
4543
|
-
..._DraggableCore.default.defaultProps,
|
|
4544
|
-
axis: "both",
|
|
4545
|
-
bounds: false,
|
|
4546
|
-
defaultClassName: "react-draggable",
|
|
4547
|
-
defaultClassNameDragging: "react-draggable-dragging",
|
|
4548
|
-
defaultClassNameDragged: "react-draggable-dragged",
|
|
4549
|
-
defaultPosition: {
|
|
4550
|
-
x: 0,
|
|
4551
|
-
y: 0
|
|
4552
|
-
},
|
|
4553
|
-
scale: 1
|
|
4554
|
-
});
|
|
4555
|
-
} (Draggable$1));
|
|
4556
|
-
return Draggable$1;
|
|
4557
|
-
}
|
|
4558
|
-
|
|
4559
|
-
var hasRequiredCjs;
|
|
4560
|
-
|
|
4561
|
-
function requireCjs () {
|
|
4562
|
-
if (hasRequiredCjs) return cjs.exports;
|
|
4563
|
-
hasRequiredCjs = 1;
|
|
4564
|
-
const {
|
|
4565
|
-
default: Draggable,
|
|
4566
|
-
DraggableCore
|
|
4567
|
-
} = requireDraggable();
|
|
4568
|
-
cjs.exports = Draggable;
|
|
4569
|
-
cjs.exports.default = Draggable;
|
|
4570
|
-
cjs.exports.DraggableCore = DraggableCore;
|
|
4571
|
-
return cjs.exports;
|
|
4572
|
-
}
|
|
4573
|
-
|
|
4574
|
-
var cjsExports = requireCjs();
|
|
4575
|
-
var Draggable = /*@__PURE__*/getDefaultExportFromCjs(cjsExports);
|
|
4288
|
+
// lib/cjs.ts
|
|
4289
|
+
var cjs_default = Draggable;
|
|
4576
4290
|
|
|
4577
4291
|
var __assign$2 = function() {
|
|
4578
4292
|
__assign$2 = Object.assign || function(t) {
|
|
@@ -5786,7 +5500,7 @@ var Rnd = (
|
|
|
5786
5500
|
var pos = this.state.resizing ? void 0 : draggablePosition;
|
|
5787
5501
|
var dragAxisOrUndefined = this.state.resizing ? "both" : dragAxis;
|
|
5788
5502
|
return createElement(
|
|
5789
|
-
|
|
5503
|
+
cjs_default,
|
|
5790
5504
|
{
|
|
5791
5505
|
ref: function(c) {
|
|
5792
5506
|
if (!c)
|