@ews-admin/global-design-system 1.17.1 → 1.18.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.
Files changed (31) hide show
  1. package/dist/components/DropdownMultiSelect/DropdownMultiSelect.d.ts +1 -1
  2. package/dist/components/DropdownMultiSelect/DropdownMultiSelect.d.ts.map +1 -1
  3. package/dist/components/ImageCropModal/ImageCropModal.d.ts +28 -0
  4. package/dist/components/ImageCropModal/ImageCropModal.d.ts.map +1 -0
  5. package/dist/components/ImageCropModal/cropImage.d.ts +3 -0
  6. package/dist/components/ImageCropModal/cropImage.d.ts.map +1 -0
  7. package/dist/components/ImageCropModal/index.d.ts +3 -0
  8. package/dist/components/ImageCropModal/index.d.ts.map +1 -0
  9. package/dist/components/Logo/Logo.d.ts +1 -1
  10. package/dist/components/Logo/Logo.d.ts.map +1 -1
  11. package/dist/components/Modal/Modal.d.ts +1 -1
  12. package/dist/components/Modal/Modal.d.ts.map +1 -1
  13. package/dist/components/MultiSearchAutocomplete/MultiSearchAutocomplete.d.ts +1 -1
  14. package/dist/components/MultiSearchAutocomplete/MultiSearchAutocomplete.d.ts.map +1 -1
  15. package/dist/components/RegionSelect/RegionSelect.d.ts +2 -1
  16. package/dist/components/RegionSelect/RegionSelect.d.ts.map +1 -1
  17. package/dist/components/SearchAutocomplete/SearchAutocomplete.d.ts +2 -1
  18. package/dist/components/SearchAutocomplete/SearchAutocomplete.d.ts.map +1 -1
  19. package/dist/index.css +1 -1
  20. package/dist/index.d.ts +69 -42
  21. package/dist/index.d.ts.map +1 -1
  22. package/dist/index.esm.css +1 -1
  23. package/dist/index.esm.js +1393 -12
  24. package/dist/index.esm.js.map +1 -1
  25. package/dist/index.js +1410 -10
  26. package/dist/index.js.map +1 -1
  27. package/package.json +3 -2
  28. package/src/components/ImageCropModal/ImageCropModal.tsx +110 -0
  29. package/src/components/ImageCropModal/cropImage.ts +48 -0
  30. package/src/components/ImageCropModal/index.ts +2 -0
  31. package/src/index.ts +3 -0
package/dist/index.js CHANGED
@@ -4,6 +4,25 @@ var jsxRuntime = require('react/jsx-runtime');
4
4
  var React = require('react');
5
5
  var reactHookForm = require('react-hook-form');
6
6
 
7
+ function _interopNamespaceDefault(e) {
8
+ var n = Object.create(null);
9
+ if (e) {
10
+ Object.keys(e).forEach(function (k) {
11
+ if (k !== 'default') {
12
+ var d = Object.getOwnPropertyDescriptor(e, k);
13
+ Object.defineProperty(n, k, d.get ? d : {
14
+ enumerable: true,
15
+ get: function () { return e[k]; }
16
+ });
17
+ }
18
+ });
19
+ }
20
+ n.default = e;
21
+ return Object.freeze(n);
22
+ }
23
+
24
+ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
25
+
7
26
  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}
8
27
 
9
28
  const LOCAL_PORTS = {
@@ -11783,7 +11802,7 @@ const __iconNode$fN = [
11783
11802
  ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
11784
11803
  ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }]
11785
11804
  ];
11786
- const File = createLucideIcon("file", __iconNode$fN);
11805
+ const File$1 = createLucideIcon("file", __iconNode$fN);
11787
11806
 
11788
11807
  /**
11789
11808
  * @license lucide-react v0.544.0 - ISC
@@ -15460,7 +15479,7 @@ const __iconNode$cX = [
15460
15479
  ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
15461
15480
  ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
15462
15481
  ];
15463
- const Image = createLucideIcon("image", __iconNode$cX);
15482
+ const Image$1 = createLucideIcon("image", __iconNode$cX);
15464
15483
 
15465
15484
  /**
15466
15485
  * @license lucide-react v0.544.0 - ISC
@@ -31497,7 +31516,7 @@ var index = /*#__PURE__*/Object.freeze({
31497
31516
  Fence: Fence,
31498
31517
  FerrisWheel: FerrisWheel,
31499
31518
  Figma: Figma,
31500
- File: File,
31519
+ File: File$1,
31501
31520
  FileArchive: FileArchive,
31502
31521
  FileAudio: FileAudio,
31503
31522
  FileAudio2: FileAudio2,
@@ -31730,7 +31749,7 @@ var index = /*#__PURE__*/Object.freeze({
31730
31749
  IceCreamCone: IceCreamCone,
31731
31750
  IdCard: IdCard,
31732
31751
  IdCardLanyard: IdCardLanyard,
31733
- Image: Image,
31752
+ Image: Image$1,
31734
31753
  ImageDown: ImageDown,
31735
31754
  ImageMinus: ImageMinus,
31736
31755
  ImageOff: ImageOff,
@@ -33359,6 +33378,1386 @@ const ProfileImageUpload = ({ imageUrl, altText, readOnly = false, size = "lg",
33359
33378
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "inline-flex flex-col items-center", children: [jsxRuntime.jsxs("div", { className: "relative", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsxRuntime.jsx("img", { src: imageUrl, alt: altText, className: cn("rounded-full border-4 border-white object-cover", SIZE_CLASSES[size]) }), jsxRuntime.jsx("div", { className: cn("absolute bottom-0 right-0 rounded-full border-4 border-white bg-green-400", INDICATOR_CLASSES[size]) }), jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, accept: acceptAttr, className: "hidden", onChange: handleFileChange }), isHovered && !readOnly && !isLoading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: handleEditClick, className: "absolute left-0 top-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-ews-primary transition-colors hover:bg-ews-secondary", "aria-label": "Edit profile image", children: jsxRuntime.jsx(Pencil, { className: "h-4 w-4 text-white" }) }), showDeleteButton && (jsxRuntime.jsx("button", { type: "button", onClick: () => setShowConfirm(true), className: "absolute left-0 top-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-red-600 transition-colors hover:bg-red-700", "aria-label": "Delete profile image", children: jsxRuntime.jsx(Trash, { className: "h-4 w-4 text-white" }) }))] }))] }), jsxRuntime.jsx(UploadProgressBar, { progress: uploadProgress, isLoading: isLoading }), aspectRatioHint && (jsxRuntime.jsxs("p", { className: "mt-1 text-xs text-gray-400", children: ["Ratio: ", aspectRatioHint] }))] }), jsxRuntime.jsx(Modal, { isOpen: showConfirm, onClose: () => setShowConfirm(false), title: deleteConfirmTitle, variant: "error", size: "sm", primaryAction: deleteConfirmLabel, secondaryAction: cancelLabel, onPrimaryAction: handleConfirmDelete, onSecondaryAction: () => setShowConfirm(false), children: jsxRuntime.jsx("p", { children: deleteConfirmMessage }) })] }));
33360
33379
  };
33361
33380
 
33381
+ function getDefaultExportFromCjs (x) {
33382
+ return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
33383
+ }
33384
+
33385
+ /**
33386
+ * Copyright 2004-present Facebook. All Rights Reserved.
33387
+ *
33388
+ * @providesModule UserAgent_DEPRECATED
33389
+ */
33390
+
33391
+ /**
33392
+ * Provides entirely client-side User Agent and OS detection. You should prefer
33393
+ * the non-deprecated UserAgent module when possible, which exposes our
33394
+ * authoritative server-side PHP-based detection to the client.
33395
+ *
33396
+ * Usage is straightforward:
33397
+ *
33398
+ * if (UserAgent_DEPRECATED.ie()) {
33399
+ * // IE
33400
+ * }
33401
+ *
33402
+ * You can also do version checks:
33403
+ *
33404
+ * if (UserAgent_DEPRECATED.ie() >= 7) {
33405
+ * // IE7 or better
33406
+ * }
33407
+ *
33408
+ * The browser functions will return NaN if the browser does not match, so
33409
+ * you can also do version compares the other way:
33410
+ *
33411
+ * if (UserAgent_DEPRECATED.ie() < 7) {
33412
+ * // IE6 or worse
33413
+ * }
33414
+ *
33415
+ * Note that the version is a float and may include a minor version number,
33416
+ * so you should always use range operators to perform comparisons, not
33417
+ * strict equality.
33418
+ *
33419
+ * **Note:** You should **strongly** prefer capability detection to browser
33420
+ * version detection where it's reasonable:
33421
+ *
33422
+ * http://www.quirksmode.org/js/support.html
33423
+ *
33424
+ * Further, we have a large number of mature wrapper functions and classes
33425
+ * which abstract away many browser irregularities. Check the documentation,
33426
+ * grep for things, or ask on javascript@lists.facebook.com before writing yet
33427
+ * another copy of "event || window.event".
33428
+ *
33429
+ */
33430
+
33431
+ var _populated = false;
33432
+
33433
+ // Browsers
33434
+ var _ie, _firefox, _opera, _webkit, _chrome;
33435
+
33436
+ // Actual IE browser for compatibility mode
33437
+ var _ie_real_version;
33438
+
33439
+ // Platforms
33440
+ var _osx, _windows, _linux, _android;
33441
+
33442
+ // Architectures
33443
+ var _win64;
33444
+
33445
+ // Devices
33446
+ var _iphone, _ipad, _native;
33447
+
33448
+ var _mobile;
33449
+
33450
+ function _populate() {
33451
+ if (_populated) {
33452
+ return;
33453
+ }
33454
+
33455
+ _populated = true;
33456
+
33457
+ // To work around buggy JS libraries that can't handle multi-digit
33458
+ // version numbers, Opera 10's user agent string claims it's Opera
33459
+ // 9, then later includes a Version/X.Y field:
33460
+ //
33461
+ // Opera/9.80 (foo) Presto/2.2.15 Version/10.10
33462
+ var uas = navigator.userAgent;
33463
+ var agent = /(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(uas);
33464
+ var os = /(Mac OS X)|(Windows)|(Linux)/.exec(uas);
33465
+
33466
+ _iphone = /\b(iPhone|iP[ao]d)/.exec(uas);
33467
+ _ipad = /\b(iP[ao]d)/.exec(uas);
33468
+ _android = /Android/i.exec(uas);
33469
+ _native = /FBAN\/\w+;/i.exec(uas);
33470
+ _mobile = /Mobile/i.exec(uas);
33471
+
33472
+ // Note that the IE team blog would have you believe you should be checking
33473
+ // for 'Win64; x64'. But MSDN then reveals that you can actually be coming
33474
+ // from either x64 or ia64; so ultimately, you should just check for Win64
33475
+ // as in indicator of whether you're in 64-bit IE. 32-bit IE on 64-bit
33476
+ // Windows will send 'WOW64' instead.
33477
+ _win64 = !!(/Win64/.exec(uas));
33478
+
33479
+ if (agent) {
33480
+ _ie = agent[1] ? parseFloat(agent[1]) : (
33481
+ agent[5] ? parseFloat(agent[5]) : NaN);
33482
+ // IE compatibility mode
33483
+ if (_ie && document && document.documentMode) {
33484
+ _ie = document.documentMode;
33485
+ }
33486
+ // grab the "true" ie version from the trident token if available
33487
+ var trident = /(?:Trident\/(\d+.\d+))/.exec(uas);
33488
+ _ie_real_version = trident ? parseFloat(trident[1]) + 4 : _ie;
33489
+
33490
+ _firefox = agent[2] ? parseFloat(agent[2]) : NaN;
33491
+ _opera = agent[3] ? parseFloat(agent[3]) : NaN;
33492
+ _webkit = agent[4] ? parseFloat(agent[4]) : NaN;
33493
+ if (_webkit) {
33494
+ // We do not add the regexp to the above test, because it will always
33495
+ // match 'safari' only since 'AppleWebKit' appears before 'Chrome' in
33496
+ // the userAgent string.
33497
+ agent = /(?:Chrome\/(\d+\.\d+))/.exec(uas);
33498
+ _chrome = agent && agent[1] ? parseFloat(agent[1]) : NaN;
33499
+ } else {
33500
+ _chrome = NaN;
33501
+ }
33502
+ } else {
33503
+ _ie = _firefox = _opera = _chrome = _webkit = NaN;
33504
+ }
33505
+
33506
+ if (os) {
33507
+ if (os[1]) {
33508
+ // Detect OS X version. If no version number matches, set _osx to true.
33509
+ // Version examples: 10, 10_6_1, 10.7
33510
+ // Parses version number as a float, taking only first two sets of
33511
+ // digits. If only one set of digits is found, returns just the major
33512
+ // version number.
33513
+ var ver = /(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(uas);
33514
+
33515
+ _osx = ver ? parseFloat(ver[1].replace('_', '.')) : true;
33516
+ } else {
33517
+ _osx = false;
33518
+ }
33519
+ _windows = !!os[2];
33520
+ _linux = !!os[3];
33521
+ } else {
33522
+ _osx = _windows = _linux = false;
33523
+ }
33524
+ }
33525
+
33526
+ var UserAgent_DEPRECATED$1 = {
33527
+
33528
+ /**
33529
+ * Check if the UA is Internet Explorer.
33530
+ *
33531
+ *
33532
+ * @return float|NaN Version number (if match) or NaN.
33533
+ */
33534
+ ie: function() {
33535
+ return _populate() || _ie;
33536
+ },
33537
+
33538
+ /**
33539
+ * Check if we're in Internet Explorer compatibility mode.
33540
+ *
33541
+ * @return bool true if in compatibility mode, false if
33542
+ * not compatibility mode or not ie
33543
+ */
33544
+ ieCompatibilityMode: function() {
33545
+ return _populate() || (_ie_real_version > _ie);
33546
+ },
33547
+
33548
+
33549
+ /**
33550
+ * Whether the browser is 64-bit IE. Really, this is kind of weak sauce; we
33551
+ * only need this because Skype can't handle 64-bit IE yet. We need to remove
33552
+ * this when we don't need it -- tracked by #601957.
33553
+ */
33554
+ ie64: function() {
33555
+ return UserAgent_DEPRECATED$1.ie() && _win64;
33556
+ },
33557
+
33558
+ /**
33559
+ * Check if the UA is Firefox.
33560
+ *
33561
+ *
33562
+ * @return float|NaN Version number (if match) or NaN.
33563
+ */
33564
+ firefox: function() {
33565
+ return _populate() || _firefox;
33566
+ },
33567
+
33568
+
33569
+ /**
33570
+ * Check if the UA is Opera.
33571
+ *
33572
+ *
33573
+ * @return float|NaN Version number (if match) or NaN.
33574
+ */
33575
+ opera: function() {
33576
+ return _populate() || _opera;
33577
+ },
33578
+
33579
+
33580
+ /**
33581
+ * Check if the UA is WebKit.
33582
+ *
33583
+ *
33584
+ * @return float|NaN Version number (if match) or NaN.
33585
+ */
33586
+ webkit: function() {
33587
+ return _populate() || _webkit;
33588
+ },
33589
+
33590
+ /**
33591
+ * For Push
33592
+ * WILL BE REMOVED VERY SOON. Use UserAgent_DEPRECATED.webkit
33593
+ */
33594
+ safari: function() {
33595
+ return UserAgent_DEPRECATED$1.webkit();
33596
+ },
33597
+
33598
+ /**
33599
+ * Check if the UA is a Chrome browser.
33600
+ *
33601
+ *
33602
+ * @return float|NaN Version number (if match) or NaN.
33603
+ */
33604
+ chrome : function() {
33605
+ return _populate() || _chrome;
33606
+ },
33607
+
33608
+
33609
+ /**
33610
+ * Check if the user is running Windows.
33611
+ *
33612
+ * @return bool `true' if the user's OS is Windows.
33613
+ */
33614
+ windows: function() {
33615
+ return _populate() || _windows;
33616
+ },
33617
+
33618
+
33619
+ /**
33620
+ * Check if the user is running Mac OS X.
33621
+ *
33622
+ * @return float|bool Returns a float if a version number is detected,
33623
+ * otherwise true/false.
33624
+ */
33625
+ osx: function() {
33626
+ return _populate() || _osx;
33627
+ },
33628
+
33629
+ /**
33630
+ * Check if the user is running Linux.
33631
+ *
33632
+ * @return bool `true' if the user's OS is some flavor of Linux.
33633
+ */
33634
+ linux: function() {
33635
+ return _populate() || _linux;
33636
+ },
33637
+
33638
+ /**
33639
+ * Check if the user is running on an iPhone or iPod platform.
33640
+ *
33641
+ * @return bool `true' if the user is running some flavor of the
33642
+ * iPhone OS.
33643
+ */
33644
+ iphone: function() {
33645
+ return _populate() || _iphone;
33646
+ },
33647
+
33648
+ mobile: function() {
33649
+ return _populate() || (_iphone || _ipad || _android || _mobile);
33650
+ },
33651
+
33652
+ nativeApp: function() {
33653
+ // webviews inside of the native apps
33654
+ return _populate() || _native;
33655
+ },
33656
+
33657
+ android: function() {
33658
+ return _populate() || _android;
33659
+ },
33660
+
33661
+ ipad: function() {
33662
+ return _populate() || _ipad;
33663
+ }
33664
+ };
33665
+
33666
+ var UserAgent_DEPRECATED_1 = UserAgent_DEPRECATED$1;
33667
+
33668
+ /**
33669
+ * Copyright (c) 2015, Facebook, Inc.
33670
+ * All rights reserved.
33671
+ *
33672
+ * This source code is licensed under the BSD-style license found in the
33673
+ * LICENSE file in the root directory of this source tree. An additional grant
33674
+ * of patent rights can be found in the PATENTS file in the same directory.
33675
+ *
33676
+ * @providesModule ExecutionEnvironment
33677
+ */
33678
+
33679
+ var canUseDOM = !!(
33680
+ typeof window !== 'undefined' &&
33681
+ window.document &&
33682
+ window.document.createElement
33683
+ );
33684
+
33685
+ /**
33686
+ * Simple, lightweight module assisting with the detection and context of
33687
+ * Worker. Helps avoid circular dependencies and allows code to reason about
33688
+ * whether or not they are in a Worker, even if they never include the main
33689
+ * `ReactWorker` dependency.
33690
+ */
33691
+ var ExecutionEnvironment$1 = {
33692
+
33693
+ canUseDOM: canUseDOM};
33694
+
33695
+ var ExecutionEnvironment_1 = ExecutionEnvironment$1;
33696
+
33697
+ /**
33698
+ * Copyright 2013-2015, Facebook, Inc.
33699
+ * All rights reserved.
33700
+ *
33701
+ * This source code is licensed under the BSD-style license found in the
33702
+ * LICENSE file in the root directory of this source tree. An additional grant
33703
+ * of patent rights can be found in the PATENTS file in the same directory.
33704
+ *
33705
+ * @providesModule isEventSupported
33706
+ */
33707
+
33708
+ var ExecutionEnvironment = ExecutionEnvironment_1;
33709
+
33710
+ var useHasFeature;
33711
+ if (ExecutionEnvironment.canUseDOM) {
33712
+ useHasFeature =
33713
+ document.implementation &&
33714
+ document.implementation.hasFeature &&
33715
+ // always returns true in newer browsers as per the standard.
33716
+ // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
33717
+ document.implementation.hasFeature('', '') !== true;
33718
+ }
33719
+
33720
+ /**
33721
+ * Checks if an event is supported in the current execution environment.
33722
+ *
33723
+ * NOTE: This will not work correctly for non-generic events such as `change`,
33724
+ * `reset`, `load`, `error`, and `select`.
33725
+ *
33726
+ * Borrows from Modernizr.
33727
+ *
33728
+ * @param {string} eventNameSuffix Event name, e.g. "click".
33729
+ * @param {?boolean} capture Check if the capture phase is supported.
33730
+ * @return {boolean} True if the event is supported.
33731
+ * @internal
33732
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
33733
+ */
33734
+ function isEventSupported$1(eventNameSuffix, capture) {
33735
+ if (!ExecutionEnvironment.canUseDOM ||
33736
+ capture && !('addEventListener' in document)) {
33737
+ return false;
33738
+ }
33739
+
33740
+ var eventName = 'on' + eventNameSuffix;
33741
+ var isSupported = eventName in document;
33742
+
33743
+ if (!isSupported) {
33744
+ var element = document.createElement('div');
33745
+ element.setAttribute(eventName, 'return;');
33746
+ isSupported = typeof element[eventName] === 'function';
33747
+ }
33748
+
33749
+ if (!isSupported && useHasFeature && eventNameSuffix === 'wheel') {
33750
+ // This is the only way to test support for the `wheel` event in IE9+.
33751
+ isSupported = document.implementation.hasFeature('Events.wheel', '3.0');
33752
+ }
33753
+
33754
+ return isSupported;
33755
+ }
33756
+
33757
+ var isEventSupported_1 = isEventSupported$1;
33758
+
33759
+ /**
33760
+ * Copyright (c) 2015, Facebook, Inc.
33761
+ * All rights reserved.
33762
+ *
33763
+ * This source code is licensed under the BSD-style license found in the
33764
+ * LICENSE file in the root directory of this source tree. An additional grant
33765
+ * of patent rights can be found in the PATENTS file in the same directory.
33766
+ *
33767
+ * @providesModule normalizeWheel
33768
+ * @typechecks
33769
+ */
33770
+
33771
+ var UserAgent_DEPRECATED = UserAgent_DEPRECATED_1;
33772
+
33773
+ var isEventSupported = isEventSupported_1;
33774
+
33775
+
33776
+ // Reasonable defaults
33777
+ var PIXEL_STEP = 10;
33778
+ var LINE_HEIGHT = 40;
33779
+ var PAGE_HEIGHT = 800;
33780
+
33781
+ /**
33782
+ * Mouse wheel (and 2-finger trackpad) support on the web sucks. It is
33783
+ * complicated, thus this doc is long and (hopefully) detailed enough to answer
33784
+ * your questions.
33785
+ *
33786
+ * If you need to react to the mouse wheel in a predictable way, this code is
33787
+ * like your bestest friend. * hugs *
33788
+ *
33789
+ * As of today, there are 4 DOM event types you can listen to:
33790
+ *
33791
+ * 'wheel' -- Chrome(31+), FF(17+), IE(9+)
33792
+ * 'mousewheel' -- Chrome, IE(6+), Opera, Safari
33793
+ * 'MozMousePixelScroll' -- FF(3.5 only!) (2010-2013) -- don't bother!
33794
+ * 'DOMMouseScroll' -- FF(0.9.7+) since 2003
33795
+ *
33796
+ * So what to do? The is the best:
33797
+ *
33798
+ * normalizeWheel.getEventType();
33799
+ *
33800
+ * In your event callback, use this code to get sane interpretation of the
33801
+ * deltas. This code will return an object with properties:
33802
+ *
33803
+ * spinX -- normalized spin speed (use for zoom) - x plane
33804
+ * spinY -- " - y plane
33805
+ * pixelX -- normalized distance (to pixels) - x plane
33806
+ * pixelY -- " - y plane
33807
+ *
33808
+ * Wheel values are provided by the browser assuming you are using the wheel to
33809
+ * scroll a web page by a number of lines or pixels (or pages). Values can vary
33810
+ * significantly on different platforms and browsers, forgetting that you can
33811
+ * scroll at different speeds. Some devices (like trackpads) emit more events
33812
+ * at smaller increments with fine granularity, and some emit massive jumps with
33813
+ * linear speed or acceleration.
33814
+ *
33815
+ * This code does its best to normalize the deltas for you:
33816
+ *
33817
+ * - spin is trying to normalize how far the wheel was spun (or trackpad
33818
+ * dragged). This is super useful for zoom support where you want to
33819
+ * throw away the chunky scroll steps on the PC and make those equal to
33820
+ * the slow and smooth tiny steps on the Mac. Key data: This code tries to
33821
+ * resolve a single slow step on a wheel to 1.
33822
+ *
33823
+ * - pixel is normalizing the desired scroll delta in pixel units. You'll
33824
+ * get the crazy differences between browsers, but at least it'll be in
33825
+ * pixels!
33826
+ *
33827
+ * - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT. This
33828
+ * should translate to positive value zooming IN, negative zooming OUT.
33829
+ * This matches the newer 'wheel' event.
33830
+ *
33831
+ * Why are there spinX, spinY (or pixels)?
33832
+ *
33833
+ * - spinX is a 2-finger side drag on the trackpad, and a shift + wheel turn
33834
+ * with a mouse. It results in side-scrolling in the browser by default.
33835
+ *
33836
+ * - spinY is what you expect -- it's the classic axis of a mouse wheel.
33837
+ *
33838
+ * - I dropped spinZ/pixelZ. It is supported by the DOM 3 'wheel' event and
33839
+ * probably is by browsers in conjunction with fancy 3D controllers .. but
33840
+ * you know.
33841
+ *
33842
+ * Implementation info:
33843
+ *
33844
+ * Examples of 'wheel' event if you scroll slowly (down) by one step with an
33845
+ * average mouse:
33846
+ *
33847
+ * OS X + Chrome (mouse) - 4 pixel delta (wheelDelta -120)
33848
+ * OS X + Safari (mouse) - N/A pixel delta (wheelDelta -12)
33849
+ * OS X + Firefox (mouse) - 0.1 line delta (wheelDelta N/A)
33850
+ * Win8 + Chrome (mouse) - 100 pixel delta (wheelDelta -120)
33851
+ * Win8 + Firefox (mouse) - 3 line delta (wheelDelta -120)
33852
+ *
33853
+ * On the trackpad:
33854
+ *
33855
+ * OS X + Chrome (trackpad) - 2 pixel delta (wheelDelta -6)
33856
+ * OS X + Firefox (trackpad) - 1 pixel delta (wheelDelta N/A)
33857
+ *
33858
+ * On other/older browsers.. it's more complicated as there can be multiple and
33859
+ * also missing delta values.
33860
+ *
33861
+ * The 'wheel' event is more standard:
33862
+ *
33863
+ * http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents
33864
+ *
33865
+ * The basics is that it includes a unit, deltaMode (pixels, lines, pages), and
33866
+ * deltaX, deltaY and deltaZ. Some browsers provide other values to maintain
33867
+ * backward compatibility with older events. Those other values help us
33868
+ * better normalize spin speed. Example of what the browsers provide:
33869
+ *
33870
+ * | event.wheelDelta | event.detail
33871
+ * ------------------+------------------+--------------
33872
+ * Safari v5/OS X | -120 | 0
33873
+ * Safari v5/Win7 | -120 | 0
33874
+ * Chrome v17/OS X | -120 | 0
33875
+ * Chrome v17/Win7 | -120 | 0
33876
+ * IE9/Win7 | -120 | undefined
33877
+ * Firefox v4/OS X | undefined | 1
33878
+ * Firefox v4/Win7 | undefined | 3
33879
+ *
33880
+ */
33881
+ function normalizeWheel$2(/*object*/ event) /*object*/ {
33882
+ var sX = 0, sY = 0, // spinX, spinY
33883
+ pX = 0, pY = 0; // pixelX, pixelY
33884
+
33885
+ // Legacy
33886
+ if ('detail' in event) { sY = event.detail; }
33887
+ if ('wheelDelta' in event) { sY = -event.wheelDelta / 120; }
33888
+ if ('wheelDeltaY' in event) { sY = -event.wheelDeltaY / 120; }
33889
+ if ('wheelDeltaX' in event) { sX = -event.wheelDeltaX / 120; }
33890
+
33891
+ // side scrolling on FF with DOMMouseScroll
33892
+ if ( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
33893
+ sX = sY;
33894
+ sY = 0;
33895
+ }
33896
+
33897
+ pX = sX * PIXEL_STEP;
33898
+ pY = sY * PIXEL_STEP;
33899
+
33900
+ if ('deltaY' in event) { pY = event.deltaY; }
33901
+ if ('deltaX' in event) { pX = event.deltaX; }
33902
+
33903
+ if ((pX || pY) && event.deltaMode) {
33904
+ if (event.deltaMode == 1) { // delta in LINE units
33905
+ pX *= LINE_HEIGHT;
33906
+ pY *= LINE_HEIGHT;
33907
+ } else { // delta in PAGE units
33908
+ pX *= PAGE_HEIGHT;
33909
+ pY *= PAGE_HEIGHT;
33910
+ }
33911
+ }
33912
+
33913
+ // Fall-back if spin cannot be determined
33914
+ if (pX && !sX) { sX = (pX < 1) ? -1 : 1; }
33915
+ if (pY && !sY) { sY = (pY < 1) ? -1 : 1; }
33916
+
33917
+ return { spinX : sX,
33918
+ spinY : sY,
33919
+ pixelX : pX,
33920
+ pixelY : pY };
33921
+ }
33922
+
33923
+
33924
+ /**
33925
+ * The best combination if you prefer spinX + spinY normalization. It favors
33926
+ * the older DOMMouseScroll for Firefox, as FF does not include wheelDelta with
33927
+ * 'wheel' event, making spin speed determination impossible.
33928
+ */
33929
+ normalizeWheel$2.getEventType = function() /*string*/ {
33930
+ return (UserAgent_DEPRECATED.firefox())
33931
+ ? 'DOMMouseScroll'
33932
+ : (isEventSupported('wheel'))
33933
+ ? 'wheel'
33934
+ : 'mousewheel';
33935
+ };
33936
+
33937
+ var normalizeWheel_1 = normalizeWheel$2;
33938
+
33939
+ var normalizeWheel = normalizeWheel_1;
33940
+
33941
+ var normalizeWheel$1 = /*@__PURE__*/getDefaultExportFromCjs(normalizeWheel);
33942
+
33943
+ //#region \0@oxc-project+runtime@0.134.0/helpers/esm/typeof.js
33944
+ function _typeof(o) {
33945
+ "@babel/helpers - typeof";
33946
+ return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
33947
+ return typeof o;
33948
+ } : function(o) {
33949
+ return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
33950
+ }, _typeof(o);
33951
+ }
33952
+ //#endregion
33953
+ //#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPrimitive.js
33954
+ function toPrimitive(t, r) {
33955
+ if ("object" != _typeof(t) || !t) return t;
33956
+ var e = t[Symbol.toPrimitive];
33957
+ if (void 0 !== e) {
33958
+ var i = e.call(t, r);
33959
+ if ("object" != _typeof(i)) return i;
33960
+ throw new TypeError("@@toPrimitive must return a primitive value.");
33961
+ }
33962
+ return ("string" === r ? String : Number)(t);
33963
+ }
33964
+ //#endregion
33965
+ //#region \0@oxc-project+runtime@0.134.0/helpers/esm/toPropertyKey.js
33966
+ function toPropertyKey(t) {
33967
+ var i = toPrimitive(t, "string");
33968
+ return "symbol" == _typeof(i) ? i : i + "";
33969
+ }
33970
+ //#endregion
33971
+ //#region \0@oxc-project+runtime@0.134.0/helpers/esm/defineProperty.js
33972
+ function _defineProperty(e, r, t) {
33973
+ return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
33974
+ value: t,
33975
+ enumerable: true,
33976
+ configurable: true,
33977
+ writable: true
33978
+ }) : e[r] = t, e;
33979
+ }
33980
+ //#endregion
33981
+ //#region \0@oxc-project+runtime@0.134.0/helpers/esm/objectSpread2.js
33982
+ function ownKeys(e, r) {
33983
+ var t = Object.keys(e);
33984
+ if (Object.getOwnPropertySymbols) {
33985
+ var o = Object.getOwnPropertySymbols(e);
33986
+ r && (o = o.filter(function(r) {
33987
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
33988
+ })), t.push.apply(t, o);
33989
+ }
33990
+ return t;
33991
+ }
33992
+ function _objectSpread2(e) {
33993
+ for (var r = 1; r < arguments.length; r++) {
33994
+ var t = null != arguments[r] ? arguments[r] : {};
33995
+ r % 2 ? ownKeys(Object(t), true).forEach(function(r) {
33996
+ _defineProperty(e, r, t[r]);
33997
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
33998
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
33999
+ });
34000
+ }
34001
+ return e;
34002
+ }
34003
+ //#endregion
34004
+ //#region src/helpers.ts
34005
+ /**
34006
+ * Compute the dimension of the crop area based on media size,
34007
+ * aspect ratio and optionally rotation
34008
+ */
34009
+ function getCropSize(mediaWidth, mediaHeight, containerWidth, containerHeight, aspect, rotation = 0) {
34010
+ const { width, height } = rotateSize(mediaWidth, mediaHeight, rotation);
34011
+ const fittingWidth = Math.min(width, containerWidth);
34012
+ const fittingHeight = Math.min(height, containerHeight);
34013
+ if (fittingWidth > fittingHeight * aspect) return {
34014
+ width: fittingHeight * aspect,
34015
+ height: fittingHeight
34016
+ };
34017
+ return {
34018
+ width: fittingWidth,
34019
+ height: fittingWidth / aspect
34020
+ };
34021
+ }
34022
+ /**
34023
+ * Compute media zoom.
34024
+ * We fit the media into the container with "max-width: 100%; max-height: 100%;"
34025
+ */
34026
+ function getMediaZoom(mediaSize) {
34027
+ return mediaSize.width > mediaSize.height ? mediaSize.width / mediaSize.naturalWidth : mediaSize.height / mediaSize.naturalHeight;
34028
+ }
34029
+ /**
34030
+ * Ensure a new media position stays in the crop area.
34031
+ */
34032
+ function restrictPosition(position, mediaSize, cropSize, zoom, rotation = 0) {
34033
+ const { width, height } = rotateSize(mediaSize.width, mediaSize.height, rotation);
34034
+ return {
34035
+ x: restrictPositionCoord(position.x, width, cropSize.width, zoom),
34036
+ y: restrictPositionCoord(position.y, height, cropSize.height, zoom)
34037
+ };
34038
+ }
34039
+ function restrictPositionCoord(position, mediaSize, cropSize, zoom) {
34040
+ const maxPosition = Math.abs(mediaSize * zoom / 2 - cropSize / 2);
34041
+ return clamp(position, -maxPosition, maxPosition);
34042
+ }
34043
+ function getDistanceBetweenPoints(pointA, pointB) {
34044
+ return Math.sqrt(Math.pow(pointA.y - pointB.y, 2) + Math.pow(pointA.x - pointB.x, 2));
34045
+ }
34046
+ function getRotationBetweenPoints(pointA, pointB) {
34047
+ return Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x) * 180 / Math.PI;
34048
+ }
34049
+ /**
34050
+ * Compute the output cropped area of the media in percentages and pixels.
34051
+ * x/y are the top-left coordinates on the src media
34052
+ */
34053
+ function computeCroppedArea(crop, mediaSize, cropSize, aspect, zoom, rotation = 0, restrictPosition = true) {
34054
+ const limitAreaFn = restrictPosition ? limitArea : noOp;
34055
+ const mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
34056
+ const mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
34057
+ const croppedAreaPercentages = {
34058
+ x: limitAreaFn(100, ((mediaBBoxSize.width - cropSize.width / zoom) / 2 - crop.x / zoom) / mediaBBoxSize.width * 100),
34059
+ y: limitAreaFn(100, ((mediaBBoxSize.height - cropSize.height / zoom) / 2 - crop.y / zoom) / mediaBBoxSize.height * 100),
34060
+ width: limitAreaFn(100, cropSize.width / mediaBBoxSize.width * 100 / zoom),
34061
+ height: limitAreaFn(100, cropSize.height / mediaBBoxSize.height * 100 / zoom)
34062
+ };
34063
+ const widthInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.width, croppedAreaPercentages.width * mediaNaturalBBoxSize.width / 100));
34064
+ const heightInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.height, croppedAreaPercentages.height * mediaNaturalBBoxSize.height / 100));
34065
+ const sizePixels = mediaNaturalBBoxSize.width >= mediaNaturalBBoxSize.height * aspect ? {
34066
+ width: Math.round(heightInPixels * aspect),
34067
+ height: heightInPixels
34068
+ } : {
34069
+ width: widthInPixels,
34070
+ height: Math.round(widthInPixels / aspect)
34071
+ };
34072
+ return {
34073
+ croppedAreaPercentages,
34074
+ croppedAreaPixels: _objectSpread2(_objectSpread2({}, sizePixels), {}, {
34075
+ x: Math.round(limitAreaFn(mediaNaturalBBoxSize.width - sizePixels.width, croppedAreaPercentages.x * mediaNaturalBBoxSize.width / 100)),
34076
+ y: Math.round(limitAreaFn(mediaNaturalBBoxSize.height - sizePixels.height, croppedAreaPercentages.y * mediaNaturalBBoxSize.height / 100))
34077
+ })
34078
+ };
34079
+ }
34080
+ /**
34081
+ * Ensure the returned value is between 0 and max
34082
+ */
34083
+ function limitArea(max, value) {
34084
+ return Math.min(max, Math.max(0, value));
34085
+ }
34086
+ function noOp(_max, value) {
34087
+ return value;
34088
+ }
34089
+ /**
34090
+ * Compute crop and zoom from the croppedAreaPercentages.
34091
+ */
34092
+ function getInitialCropFromCroppedAreaPercentages(croppedAreaPercentages, mediaSize, rotation, cropSize, minZoom, maxZoom) {
34093
+ const mediaBBoxSize = rotateSize(mediaSize.width, mediaSize.height, rotation);
34094
+ const zoom = clamp(cropSize.width / mediaBBoxSize.width * (100 / croppedAreaPercentages.width), minZoom, maxZoom);
34095
+ return {
34096
+ crop: {
34097
+ x: zoom * mediaBBoxSize.width / 2 - cropSize.width / 2 - mediaBBoxSize.width * zoom * (croppedAreaPercentages.x / 100),
34098
+ y: zoom * mediaBBoxSize.height / 2 - cropSize.height / 2 - mediaBBoxSize.height * zoom * (croppedAreaPercentages.y / 100)
34099
+ },
34100
+ zoom
34101
+ };
34102
+ }
34103
+ /**
34104
+ * Compute zoom from the croppedAreaPixels
34105
+ */
34106
+ function getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize) {
34107
+ const mediaZoom = getMediaZoom(mediaSize);
34108
+ return cropSize.height > cropSize.width ? cropSize.height / (croppedAreaPixels.height * mediaZoom) : cropSize.width / (croppedAreaPixels.width * mediaZoom);
34109
+ }
34110
+ /**
34111
+ * Compute crop and zoom from the croppedAreaPixels
34112
+ */
34113
+ function getInitialCropFromCroppedAreaPixels(croppedAreaPixels, mediaSize, rotation = 0, cropSize, minZoom, maxZoom) {
34114
+ const mediaNaturalBBoxSize = rotateSize(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
34115
+ const zoom = clamp(getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize), minZoom, maxZoom);
34116
+ const cropZoom = cropSize.height > cropSize.width ? cropSize.height / croppedAreaPixels.height : cropSize.width / croppedAreaPixels.width;
34117
+ return {
34118
+ crop: {
34119
+ x: ((mediaNaturalBBoxSize.width - croppedAreaPixels.width) / 2 - croppedAreaPixels.x) * cropZoom,
34120
+ y: ((mediaNaturalBBoxSize.height - croppedAreaPixels.height) / 2 - croppedAreaPixels.y) * cropZoom
34121
+ },
34122
+ zoom
34123
+ };
34124
+ }
34125
+ /**
34126
+ * Return the point that is the center of point a and b
34127
+ */
34128
+ function getCenter(a, b) {
34129
+ return {
34130
+ x: (b.x + a.x) / 2,
34131
+ y: (b.y + a.y) / 2
34132
+ };
34133
+ }
34134
+ function getRadianAngle(degreeValue) {
34135
+ return degreeValue * Math.PI / 180;
34136
+ }
34137
+ /**
34138
+ * Returns the new bounding area of a rotated rectangle.
34139
+ */
34140
+ function rotateSize(width, height, rotation) {
34141
+ const rotRad = getRadianAngle(rotation);
34142
+ return {
34143
+ width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
34144
+ height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
34145
+ };
34146
+ }
34147
+ /**
34148
+ * Clamp value between min and max
34149
+ */
34150
+ function clamp(value, min, max) {
34151
+ return Math.min(Math.max(value, min), max);
34152
+ }
34153
+ /**
34154
+ * Combine multiple class names into a single string.
34155
+ */
34156
+ function classNames(...args) {
34157
+ return args.filter((value) => {
34158
+ if (typeof value === "string" && value.length > 0) return true;
34159
+ return false;
34160
+ }).join(" ").trim();
34161
+ }
34162
+ //#endregion
34163
+ //#region src/styles.css?raw
34164
+ var styles_default = ".reactEasyCrop_Container {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n user-select: none;\n touch-action: none;\n cursor: move;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.reactEasyCrop_Image,\n.reactEasyCrop_Video {\n will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */\n max-width: unset; /* prevent global img/video reset rules from constraining the cropper media */\n}\n\n.reactEasyCrop_Contain {\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n}\n.reactEasyCrop_Cover_Horizontal {\n width: 100%;\n height: auto;\n}\n.reactEasyCrop_Cover_Vertical {\n width: auto;\n height: 100%;\n}\n\n.reactEasyCrop_CropArea {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n border: 1px solid rgba(255, 255, 255, 0.5);\n box-sizing: border-box;\n box-shadow: 0 0 0 9999em;\n color: rgba(0, 0, 0, 0.5);\n overflow: hidden;\n}\n\n.reactEasyCrop_CropAreaRound {\n border-radius: 50%;\n}\n\n.reactEasyCrop_CropAreaGrid::before {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 0;\n bottom: 0;\n left: 33.33%;\n right: 33.33%;\n border-top: 0;\n border-bottom: 0;\n}\n\n.reactEasyCrop_CropAreaGrid::after {\n content: ' ';\n box-sizing: border-box;\n position: absolute;\n border: 1px solid rgba(255, 255, 255, 0.5);\n top: 33.33%;\n bottom: 33.33%;\n left: 0;\n right: 0;\n border-left: 0;\n border-right: 0;\n}\n";
34165
+ //#endregion
34166
+ //#region src/Cropper.tsx
34167
+ const MIN_ZOOM = 1;
34168
+ const MAX_ZOOM = 3;
34169
+ const KEYBOARD_STEP = 1;
34170
+ var Cropper$1 = class Cropper extends React__namespace.Component {
34171
+ constructor(..._args) {
34172
+ super(..._args);
34173
+ this.cropperRef = React__namespace.createRef();
34174
+ this.imageRef = React__namespace.createRef();
34175
+ this.videoRef = React__namespace.createRef();
34176
+ this.containerPosition = {
34177
+ x: 0,
34178
+ y: 0
34179
+ };
34180
+ this.containerRef = null;
34181
+ this.styleRef = null;
34182
+ this.containerRect = null;
34183
+ this.mediaSize = {
34184
+ width: 0,
34185
+ height: 0,
34186
+ naturalWidth: 0,
34187
+ naturalHeight: 0
34188
+ };
34189
+ this.dragStartPosition = {
34190
+ x: 0,
34191
+ y: 0
34192
+ };
34193
+ this.dragStartCrop = {
34194
+ x: 0,
34195
+ y: 0
34196
+ };
34197
+ this.gestureZoomStart = 0;
34198
+ this.gestureRotationStart = 0;
34199
+ this.isTouching = false;
34200
+ this.lastPinchDistance = 0;
34201
+ this.lastPinchRotation = 0;
34202
+ this.rafDragTimeout = null;
34203
+ this.rafPinchTimeout = null;
34204
+ this.wheelTimer = null;
34205
+ this.currentDoc = typeof document !== "undefined" ? document : null;
34206
+ this.currentWindow = typeof window !== "undefined" ? window : null;
34207
+ this.resizeObserver = null;
34208
+ this.previousCropSize = null;
34209
+ this.isInitialized = false;
34210
+ this.state = {
34211
+ cropSize: null,
34212
+ hasWheelJustStarted: false,
34213
+ mediaObjectFit: void 0
34214
+ };
34215
+ this.initResizeObserver = () => {
34216
+ if (typeof window.ResizeObserver === "undefined" || !this.containerRef) return;
34217
+ let isFirstResize = true;
34218
+ this.resizeObserver = new window.ResizeObserver((entries) => {
34219
+ if (isFirstResize) {
34220
+ isFirstResize = false;
34221
+ return;
34222
+ }
34223
+ this.computeSizes();
34224
+ });
34225
+ this.resizeObserver.observe(this.containerRef);
34226
+ };
34227
+ this.preventZoomSafari = (e) => e.preventDefault();
34228
+ this.cleanEvents = () => {
34229
+ if (!this.currentDoc) return;
34230
+ this.currentDoc.removeEventListener("mousemove", this.onMouseMove);
34231
+ this.currentDoc.removeEventListener("mouseup", this.onDragStopped);
34232
+ this.currentDoc.removeEventListener("touchmove", this.onTouchMove);
34233
+ this.currentDoc.removeEventListener("touchend", this.onDragStopped);
34234
+ this.currentDoc.removeEventListener("gesturechange", this.onGestureChange);
34235
+ this.currentDoc.removeEventListener("gestureend", this.onGestureEnd);
34236
+ this.currentDoc.removeEventListener("scroll", this.onScroll);
34237
+ };
34238
+ this.clearScrollEvent = () => {
34239
+ if (this.containerRef) this.containerRef.removeEventListener("wheel", this.onWheel);
34240
+ if (this.wheelTimer) clearTimeout(this.wheelTimer);
34241
+ };
34242
+ this.onMediaLoad = () => {
34243
+ const cropSize = this.computeSizes();
34244
+ if (cropSize) {
34245
+ this.previousCropSize = cropSize;
34246
+ this.emitCropData();
34247
+ this.setInitialCrop(cropSize);
34248
+ this.isInitialized = true;
34249
+ }
34250
+ if (this.props.onMediaLoaded) this.props.onMediaLoaded(this.mediaSize);
34251
+ };
34252
+ this.setInitialCrop = (cropSize) => {
34253
+ if (this.props.initialCroppedAreaPercentages) {
34254
+ const { crop, zoom } = getInitialCropFromCroppedAreaPercentages(this.props.initialCroppedAreaPercentages, this.mediaSize, this.props.rotation, cropSize, this.props.minZoom, this.props.maxZoom);
34255
+ this.props.onCropChange(crop);
34256
+ this.props.onZoomChange && this.props.onZoomChange(zoom);
34257
+ } else if (this.props.initialCroppedAreaPixels) {
34258
+ const { crop, zoom } = getInitialCropFromCroppedAreaPixels(this.props.initialCroppedAreaPixels, this.mediaSize, this.props.rotation, cropSize, this.props.minZoom, this.props.maxZoom);
34259
+ this.props.onCropChange(crop);
34260
+ this.props.onZoomChange && this.props.onZoomChange(zoom);
34261
+ }
34262
+ };
34263
+ this.computeSizes = () => {
34264
+ const mediaRef = this.imageRef.current || this.videoRef.current;
34265
+ if (mediaRef && this.containerRef) {
34266
+ var _this$imageRef$curren, _this$videoRef$curren, _this$imageRef$curren2, _this$videoRef$curren2, _this$state$cropSize, _this$state$cropSize2;
34267
+ this.containerRect = this.containerRef.getBoundingClientRect();
34268
+ this.saveContainerPosition();
34269
+ const containerAspect = this.containerRect.width / this.containerRect.height;
34270
+ const naturalWidth = ((_this$imageRef$curren = this.imageRef.current) === null || _this$imageRef$curren === void 0 ? void 0 : _this$imageRef$curren.naturalWidth) || ((_this$videoRef$curren = this.videoRef.current) === null || _this$videoRef$curren === void 0 ? void 0 : _this$videoRef$curren.videoWidth) || 0;
34271
+ const naturalHeight = ((_this$imageRef$curren2 = this.imageRef.current) === null || _this$imageRef$curren2 === void 0 ? void 0 : _this$imageRef$curren2.naturalHeight) || ((_this$videoRef$curren2 = this.videoRef.current) === null || _this$videoRef$curren2 === void 0 ? void 0 : _this$videoRef$curren2.videoHeight) || 0;
34272
+ const isMediaScaledDown = mediaRef.offsetWidth < naturalWidth || mediaRef.offsetHeight < naturalHeight;
34273
+ const mediaAspect = naturalWidth / naturalHeight;
34274
+ let renderedMediaSize;
34275
+ if (isMediaScaledDown) switch (this.state.mediaObjectFit) {
34276
+ default:
34277
+ case "contain":
34278
+ renderedMediaSize = containerAspect > mediaAspect ? {
34279
+ width: this.containerRect.height * mediaAspect,
34280
+ height: this.containerRect.height
34281
+ } : {
34282
+ width: this.containerRect.width,
34283
+ height: this.containerRect.width / mediaAspect
34284
+ };
34285
+ break;
34286
+ case "horizontal-cover":
34287
+ renderedMediaSize = {
34288
+ width: this.containerRect.width,
34289
+ height: this.containerRect.width / mediaAspect
34290
+ };
34291
+ break;
34292
+ case "vertical-cover":
34293
+ renderedMediaSize = {
34294
+ width: this.containerRect.height * mediaAspect,
34295
+ height: this.containerRect.height
34296
+ };
34297
+ break;
34298
+ }
34299
+ else renderedMediaSize = {
34300
+ width: mediaRef.offsetWidth,
34301
+ height: mediaRef.offsetHeight
34302
+ };
34303
+ this.mediaSize = _objectSpread2(_objectSpread2({}, renderedMediaSize), {}, {
34304
+ naturalWidth,
34305
+ naturalHeight
34306
+ });
34307
+ if (this.props.setMediaSize) this.props.setMediaSize(this.mediaSize);
34308
+ const cropSize = this.props.cropSize ? this.props.cropSize : getCropSize(this.mediaSize.width, this.mediaSize.height, this.containerRect.width, this.containerRect.height, this.props.aspect, this.props.rotation);
34309
+ if (((_this$state$cropSize = this.state.cropSize) === null || _this$state$cropSize === void 0 ? void 0 : _this$state$cropSize.height) !== cropSize.height || ((_this$state$cropSize2 = this.state.cropSize) === null || _this$state$cropSize2 === void 0 ? void 0 : _this$state$cropSize2.width) !== cropSize.width) this.props.onCropSizeChange && this.props.onCropSizeChange(cropSize);
34310
+ this.setState({ cropSize }, this.recomputeCropPosition);
34311
+ if (this.props.setCropSize) this.props.setCropSize(cropSize);
34312
+ return cropSize;
34313
+ }
34314
+ };
34315
+ this.saveContainerPosition = () => {
34316
+ if (this.containerRef) {
34317
+ const bounds = this.containerRef.getBoundingClientRect();
34318
+ this.containerPosition = {
34319
+ x: bounds.left,
34320
+ y: bounds.top
34321
+ };
34322
+ }
34323
+ };
34324
+ this.onMouseDown = (e) => {
34325
+ if (!this.currentDoc) return;
34326
+ e.preventDefault();
34327
+ this.currentDoc.addEventListener("mousemove", this.onMouseMove);
34328
+ this.currentDoc.addEventListener("mouseup", this.onDragStopped);
34329
+ this.saveContainerPosition();
34330
+ this.onDragStart(Cropper.getMousePoint(e));
34331
+ };
34332
+ this.onMouseMove = (e) => this.onDrag(Cropper.getMousePoint(e));
34333
+ this.onScroll = (e) => {
34334
+ if (!this.currentDoc) return;
34335
+ e.preventDefault();
34336
+ this.saveContainerPosition();
34337
+ };
34338
+ this.onTouchStart = (e) => {
34339
+ if (!this.currentDoc) return;
34340
+ this.isTouching = true;
34341
+ if (this.props.onTouchRequest && !this.props.onTouchRequest(e)) return;
34342
+ this.currentDoc.addEventListener("touchmove", this.onTouchMove, { passive: false });
34343
+ this.currentDoc.addEventListener("touchend", this.onDragStopped);
34344
+ this.saveContainerPosition();
34345
+ if (e.touches.length === 2) this.onPinchStart(e);
34346
+ else if (e.touches.length === 1) this.onDragStart(Cropper.getTouchPoint(e.touches[0]));
34347
+ };
34348
+ this.onTouchMove = (e) => {
34349
+ e.preventDefault();
34350
+ if (e.touches.length === 2) this.onPinchMove(e);
34351
+ else if (e.touches.length === 1) this.onDrag(Cropper.getTouchPoint(e.touches[0]));
34352
+ };
34353
+ this.onGestureStart = (e) => {
34354
+ if (!this.currentDoc) return;
34355
+ e.preventDefault();
34356
+ this.currentDoc.addEventListener("gesturechange", this.onGestureChange);
34357
+ this.currentDoc.addEventListener("gestureend", this.onGestureEnd);
34358
+ this.gestureZoomStart = this.props.zoom;
34359
+ this.gestureRotationStart = this.props.rotation;
34360
+ };
34361
+ this.onGestureChange = (e) => {
34362
+ e.preventDefault();
34363
+ if (this.isTouching) return;
34364
+ const point = Cropper.getMousePoint(e);
34365
+ const newZoom = this.gestureZoomStart - 1 + e.scale;
34366
+ this.setNewZoom(newZoom, point, { shouldUpdatePosition: true });
34367
+ if (this.props.onRotationChange) {
34368
+ const newRotation = this.gestureRotationStart + e.rotation;
34369
+ this.props.onRotationChange(newRotation);
34370
+ }
34371
+ };
34372
+ this.onGestureEnd = (e) => {
34373
+ this.cleanEvents();
34374
+ };
34375
+ this.onDragStart = ({ x, y }) => {
34376
+ var _this$props$onInterac, _this$props;
34377
+ this.dragStartPosition = {
34378
+ x,
34379
+ y
34380
+ };
34381
+ this.dragStartCrop = _objectSpread2({}, this.props.crop);
34382
+ (_this$props$onInterac = (_this$props = this.props).onInteractionStart) === null || _this$props$onInterac === void 0 || _this$props$onInterac.call(_this$props);
34383
+ };
34384
+ this.onDrag = ({ x, y }) => {
34385
+ if (!this.currentWindow) return;
34386
+ if (this.rafDragTimeout) this.currentWindow.cancelAnimationFrame(this.rafDragTimeout);
34387
+ this.rafDragTimeout = this.currentWindow.requestAnimationFrame(() => {
34388
+ if (!this.state.cropSize) return;
34389
+ if (x === void 0 || y === void 0) return;
34390
+ const offsetX = x - this.dragStartPosition.x;
34391
+ const offsetY = y - this.dragStartPosition.y;
34392
+ const requestedPosition = {
34393
+ x: this.dragStartCrop.x + offsetX,
34394
+ y: this.dragStartCrop.y + offsetY
34395
+ };
34396
+ const newPosition = this.props.restrictPosition ? restrictPosition(requestedPosition, this.mediaSize, this.state.cropSize, this.props.zoom, this.props.rotation) : requestedPosition;
34397
+ this.props.onCropChange(newPosition);
34398
+ });
34399
+ };
34400
+ this.onDragStopped = () => {
34401
+ var _this$props$onInterac2, _this$props2;
34402
+ this.isTouching = false;
34403
+ this.cleanEvents();
34404
+ this.emitCropData();
34405
+ (_this$props$onInterac2 = (_this$props2 = this.props).onInteractionEnd) === null || _this$props$onInterac2 === void 0 || _this$props$onInterac2.call(_this$props2);
34406
+ };
34407
+ this.onWheel = (e) => {
34408
+ if (!this.currentWindow) return;
34409
+ if (this.props.onWheelRequest && !this.props.onWheelRequest(e)) return;
34410
+ e.preventDefault();
34411
+ const point = Cropper.getMousePoint(e);
34412
+ const { pixelY } = normalizeWheel$1(e);
34413
+ const newZoom = this.props.zoom - pixelY * this.props.zoomSpeed / 200;
34414
+ this.setNewZoom(newZoom, point, { shouldUpdatePosition: true });
34415
+ if (!this.state.hasWheelJustStarted) this.setState({ hasWheelJustStarted: true }, () => {
34416
+ var _this$props$onInterac3, _this$props3;
34417
+ return (_this$props$onInterac3 = (_this$props3 = this.props).onInteractionStart) === null || _this$props$onInterac3 === void 0 ? void 0 : _this$props$onInterac3.call(_this$props3);
34418
+ });
34419
+ if (this.wheelTimer) clearTimeout(this.wheelTimer);
34420
+ this.wheelTimer = this.currentWindow.setTimeout(() => this.setState({ hasWheelJustStarted: false }, () => {
34421
+ var _this$props$onInterac4, _this$props4;
34422
+ return (_this$props$onInterac4 = (_this$props4 = this.props).onInteractionEnd) === null || _this$props$onInterac4 === void 0 ? void 0 : _this$props$onInterac4.call(_this$props4);
34423
+ }), 250);
34424
+ };
34425
+ this.getPointOnContainer = ({ x, y }, containerTopLeft) => {
34426
+ if (!this.containerRect) throw new Error("The Cropper is not mounted");
34427
+ return {
34428
+ x: this.containerRect.width / 2 - (x - containerTopLeft.x),
34429
+ y: this.containerRect.height / 2 - (y - containerTopLeft.y)
34430
+ };
34431
+ };
34432
+ this.getPointOnMedia = ({ x, y }) => {
34433
+ const { crop, zoom } = this.props;
34434
+ return {
34435
+ x: (x + crop.x) / zoom,
34436
+ y: (y + crop.y) / zoom
34437
+ };
34438
+ };
34439
+ this.setNewZoom = (zoom, point, { shouldUpdatePosition = true } = {}) => {
34440
+ if (!this.state.cropSize || !this.props.onZoomChange) return;
34441
+ const newZoom = clamp(zoom, this.props.minZoom, this.props.maxZoom);
34442
+ if (shouldUpdatePosition) {
34443
+ const zoomPoint = this.getPointOnContainer(point, this.containerPosition);
34444
+ const zoomTarget = this.getPointOnMedia(zoomPoint);
34445
+ const requestedPosition = {
34446
+ x: zoomTarget.x * newZoom - zoomPoint.x,
34447
+ y: zoomTarget.y * newZoom - zoomPoint.y
34448
+ };
34449
+ const newPosition = this.props.restrictPosition ? restrictPosition(requestedPosition, this.mediaSize, this.state.cropSize, newZoom, this.props.rotation) : requestedPosition;
34450
+ this.props.onCropChange(newPosition);
34451
+ }
34452
+ this.props.onZoomChange(newZoom);
34453
+ };
34454
+ this.getCropData = () => {
34455
+ if (!this.state.cropSize) return null;
34456
+ return computeCroppedArea(this.props.restrictPosition ? restrictPosition(this.props.crop, this.mediaSize, this.state.cropSize, this.props.zoom, this.props.rotation) : this.props.crop, this.mediaSize, this.state.cropSize, this.getAspect(), this.props.zoom, this.props.rotation, this.props.restrictPosition);
34457
+ };
34458
+ this.emitCropData = () => {
34459
+ const cropData = this.getCropData();
34460
+ if (!cropData) return;
34461
+ const { croppedAreaPercentages, croppedAreaPixels } = cropData;
34462
+ if (this.props.onCropComplete) this.props.onCropComplete(croppedAreaPercentages, croppedAreaPixels);
34463
+ if (this.props.onCropAreaChange) this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
34464
+ };
34465
+ this.emitCropAreaChange = () => {
34466
+ const cropData = this.getCropData();
34467
+ if (!cropData) return;
34468
+ const { croppedAreaPercentages, croppedAreaPixels } = cropData;
34469
+ if (this.props.onCropAreaChange) this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
34470
+ };
34471
+ this.recomputeCropPosition = () => {
34472
+ var _this$previousCropSiz, _this$previousCropSiz2;
34473
+ if (!this.state.cropSize) return;
34474
+ let adjustedCrop = this.props.crop;
34475
+ if (this.isInitialized && ((_this$previousCropSiz = this.previousCropSize) === null || _this$previousCropSiz === void 0 ? void 0 : _this$previousCropSiz.width) && ((_this$previousCropSiz2 = this.previousCropSize) === null || _this$previousCropSiz2 === void 0 ? void 0 : _this$previousCropSiz2.height)) {
34476
+ if (Math.abs(this.previousCropSize.width - this.state.cropSize.width) > 1e-6 || Math.abs(this.previousCropSize.height - this.state.cropSize.height) > 1e-6) {
34477
+ const scaleX = this.state.cropSize.width / this.previousCropSize.width;
34478
+ const scaleY = this.state.cropSize.height / this.previousCropSize.height;
34479
+ adjustedCrop = {
34480
+ x: this.props.crop.x * scaleX,
34481
+ y: this.props.crop.y * scaleY
34482
+ };
34483
+ }
34484
+ }
34485
+ const newPosition = this.props.restrictPosition ? restrictPosition(adjustedCrop, this.mediaSize, this.state.cropSize, this.props.zoom, this.props.rotation) : adjustedCrop;
34486
+ this.previousCropSize = this.state.cropSize;
34487
+ this.props.onCropChange(newPosition);
34488
+ this.emitCropData();
34489
+ };
34490
+ this.onKeyDown = (event) => {
34491
+ const { crop, onCropChange, keyboardStep, zoom, rotation } = this.props;
34492
+ let step = keyboardStep;
34493
+ if (!this.state.cropSize) return;
34494
+ if (event.shiftKey) step *= .2;
34495
+ let newCrop = _objectSpread2({}, crop);
34496
+ switch (event.key) {
34497
+ case "ArrowUp":
34498
+ newCrop.y -= step;
34499
+ event.preventDefault();
34500
+ break;
34501
+ case "ArrowDown":
34502
+ newCrop.y += step;
34503
+ event.preventDefault();
34504
+ break;
34505
+ case "ArrowLeft":
34506
+ newCrop.x -= step;
34507
+ event.preventDefault();
34508
+ break;
34509
+ case "ArrowRight":
34510
+ newCrop.x += step;
34511
+ event.preventDefault();
34512
+ break;
34513
+ default: return;
34514
+ }
34515
+ if (this.props.restrictPosition) newCrop = restrictPosition(newCrop, this.mediaSize, this.state.cropSize, zoom, rotation);
34516
+ if (!event.repeat) {
34517
+ var _this$props$onInterac5, _this$props5;
34518
+ (_this$props$onInterac5 = (_this$props5 = this.props).onInteractionStart) === null || _this$props$onInterac5 === void 0 || _this$props$onInterac5.call(_this$props5);
34519
+ }
34520
+ onCropChange(newCrop);
34521
+ };
34522
+ this.onKeyUp = (event) => {
34523
+ var _this$props$onInterac6, _this$props6;
34524
+ switch (event.key) {
34525
+ case "ArrowUp":
34526
+ case "ArrowDown":
34527
+ case "ArrowLeft":
34528
+ case "ArrowRight":
34529
+ event.preventDefault();
34530
+ break;
34531
+ default: return;
34532
+ }
34533
+ this.emitCropData();
34534
+ (_this$props$onInterac6 = (_this$props6 = this.props).onInteractionEnd) === null || _this$props$onInterac6 === void 0 || _this$props$onInterac6.call(_this$props6);
34535
+ };
34536
+ }
34537
+ componentDidMount() {
34538
+ if (!this.currentDoc || !this.currentWindow) return;
34539
+ if (this.containerRef) {
34540
+ if (this.containerRef.ownerDocument) this.currentDoc = this.containerRef.ownerDocument;
34541
+ if (this.currentDoc.defaultView) this.currentWindow = this.currentDoc.defaultView;
34542
+ this.initResizeObserver();
34543
+ if (typeof window.ResizeObserver === "undefined") this.currentWindow.addEventListener("resize", this.computeSizes);
34544
+ this.props.zoomWithScroll && this.containerRef.addEventListener("wheel", this.onWheel, { passive: false });
34545
+ this.containerRef.addEventListener("gesturestart", this.onGestureStart);
34546
+ }
34547
+ this.currentDoc.addEventListener("scroll", this.onScroll);
34548
+ if (!this.props.disableAutomaticStylesInjection) {
34549
+ this.styleRef = this.currentDoc.createElement("style");
34550
+ this.styleRef.setAttribute("type", "text/css");
34551
+ if (this.props.nonce) this.styleRef.setAttribute("nonce", this.props.nonce);
34552
+ this.styleRef.innerHTML = styles_default;
34553
+ this.currentDoc.head.appendChild(this.styleRef);
34554
+ }
34555
+ if (this.imageRef.current && this.imageRef.current.complete) this.onMediaLoad();
34556
+ if (this.props.setImageRef) this.props.setImageRef(this.imageRef);
34557
+ if (this.props.setVideoRef) this.props.setVideoRef(this.videoRef);
34558
+ if (this.props.setCropperRef) this.props.setCropperRef(this.cropperRef);
34559
+ }
34560
+ componentWillUnmount() {
34561
+ var _this$resizeObserver;
34562
+ if (!this.currentDoc || !this.currentWindow) return;
34563
+ if (typeof window.ResizeObserver === "undefined") this.currentWindow.removeEventListener("resize", this.computeSizes);
34564
+ (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
34565
+ if (this.containerRef) this.containerRef.removeEventListener("gesturestart", this.preventZoomSafari);
34566
+ if (this.styleRef) {
34567
+ var _this$styleRef$parent;
34568
+ (_this$styleRef$parent = this.styleRef.parentNode) === null || _this$styleRef$parent === void 0 || _this$styleRef$parent.removeChild(this.styleRef);
34569
+ }
34570
+ this.cleanEvents();
34571
+ this.props.zoomWithScroll && this.clearScrollEvent();
34572
+ }
34573
+ componentDidUpdate(prevProps) {
34574
+ var _prevProps$cropSize, _this$props$cropSize, _prevProps$cropSize2, _this$props$cropSize2, _prevProps$crop, _this$props$crop, _prevProps$crop2, _this$props$crop2;
34575
+ if (prevProps.rotation !== this.props.rotation) {
34576
+ this.computeSizes();
34577
+ this.recomputeCropPosition();
34578
+ } else if (prevProps.aspect !== this.props.aspect) this.computeSizes();
34579
+ else if (prevProps.objectFit !== this.props.objectFit) this.computeSizes();
34580
+ else if (prevProps.zoom !== this.props.zoom) this.recomputeCropPosition();
34581
+ else if (((_prevProps$cropSize = prevProps.cropSize) === null || _prevProps$cropSize === void 0 ? void 0 : _prevProps$cropSize.height) !== ((_this$props$cropSize = this.props.cropSize) === null || _this$props$cropSize === void 0 ? void 0 : _this$props$cropSize.height) || ((_prevProps$cropSize2 = prevProps.cropSize) === null || _prevProps$cropSize2 === void 0 ? void 0 : _prevProps$cropSize2.width) !== ((_this$props$cropSize2 = this.props.cropSize) === null || _this$props$cropSize2 === void 0 ? void 0 : _this$props$cropSize2.width)) this.computeSizes();
34582
+ else if (((_prevProps$crop = prevProps.crop) === null || _prevProps$crop === void 0 ? void 0 : _prevProps$crop.x) !== ((_this$props$crop = this.props.crop) === null || _this$props$crop === void 0 ? void 0 : _this$props$crop.x) || ((_prevProps$crop2 = prevProps.crop) === null || _prevProps$crop2 === void 0 ? void 0 : _prevProps$crop2.y) !== ((_this$props$crop2 = this.props.crop) === null || _this$props$crop2 === void 0 ? void 0 : _this$props$crop2.y)) this.emitCropAreaChange();
34583
+ if (prevProps.zoomWithScroll !== this.props.zoomWithScroll && this.containerRef) this.props.zoomWithScroll ? this.containerRef.addEventListener("wheel", this.onWheel, { passive: false }) : this.clearScrollEvent();
34584
+ if (prevProps.video !== this.props.video) {
34585
+ var _this$videoRef$curren3;
34586
+ (_this$videoRef$curren3 = this.videoRef.current) === null || _this$videoRef$curren3 === void 0 || _this$videoRef$curren3.load();
34587
+ }
34588
+ const objectFit = this.getObjectFit();
34589
+ if (objectFit !== this.state.mediaObjectFit) this.setState({ mediaObjectFit: objectFit }, this.computeSizes);
34590
+ }
34591
+ getAspect() {
34592
+ const { cropSize, aspect } = this.props;
34593
+ if (cropSize) return cropSize.width / cropSize.height;
34594
+ return aspect;
34595
+ }
34596
+ getObjectFit() {
34597
+ if (this.props.objectFit === "cover") {
34598
+ if ((this.imageRef.current || this.videoRef.current) && this.containerRef) {
34599
+ var _this$imageRef$curren3, _this$videoRef$curren4, _this$imageRef$curren4, _this$videoRef$curren5;
34600
+ this.containerRect = this.containerRef.getBoundingClientRect();
34601
+ const containerAspect = this.containerRect.width / this.containerRect.height;
34602
+ return (((_this$imageRef$curren3 = this.imageRef.current) === null || _this$imageRef$curren3 === void 0 ? void 0 : _this$imageRef$curren3.naturalWidth) || ((_this$videoRef$curren4 = this.videoRef.current) === null || _this$videoRef$curren4 === void 0 ? void 0 : _this$videoRef$curren4.videoWidth) || 0) / (((_this$imageRef$curren4 = this.imageRef.current) === null || _this$imageRef$curren4 === void 0 ? void 0 : _this$imageRef$curren4.naturalHeight) || ((_this$videoRef$curren5 = this.videoRef.current) === null || _this$videoRef$curren5 === void 0 ? void 0 : _this$videoRef$curren5.videoHeight) || 0) < containerAspect ? "horizontal-cover" : "vertical-cover";
34603
+ }
34604
+ return "horizontal-cover";
34605
+ }
34606
+ return this.props.objectFit;
34607
+ }
34608
+ onPinchStart(e) {
34609
+ const pointA = Cropper.getTouchPoint(e.touches[0]);
34610
+ const pointB = Cropper.getTouchPoint(e.touches[1]);
34611
+ this.lastPinchDistance = getDistanceBetweenPoints(pointA, pointB);
34612
+ this.lastPinchRotation = getRotationBetweenPoints(pointA, pointB);
34613
+ this.onDragStart(getCenter(pointA, pointB));
34614
+ }
34615
+ onPinchMove(e) {
34616
+ if (!this.currentDoc || !this.currentWindow) return;
34617
+ const pointA = Cropper.getTouchPoint(e.touches[0]);
34618
+ const pointB = Cropper.getTouchPoint(e.touches[1]);
34619
+ const center = getCenter(pointA, pointB);
34620
+ this.onDrag(center);
34621
+ if (this.rafPinchTimeout) this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout);
34622
+ this.rafPinchTimeout = this.currentWindow.requestAnimationFrame(() => {
34623
+ const distance = getDistanceBetweenPoints(pointA, pointB);
34624
+ const newZoom = this.props.zoom * (distance / this.lastPinchDistance);
34625
+ this.setNewZoom(newZoom, center, { shouldUpdatePosition: false });
34626
+ this.lastPinchDistance = distance;
34627
+ const rotation = getRotationBetweenPoints(pointA, pointB);
34628
+ const newRotation = this.props.rotation + (rotation - this.lastPinchRotation);
34629
+ this.props.onRotationChange && this.props.onRotationChange(newRotation);
34630
+ this.lastPinchRotation = rotation;
34631
+ });
34632
+ }
34633
+ render() {
34634
+ var _this$state$mediaObje;
34635
+ const { image, video, mediaProps, cropperProps, transform, crop: { x, y }, rotation, zoom, cropShape, showGrid, roundCropAreaPixels, style: { containerStyle, cropAreaStyle, mediaStyle }, classes: { containerClassName, cropAreaClassName, mediaClassName } } = this.props;
34636
+ const objectFit = (_this$state$mediaObje = this.state.mediaObjectFit) !== null && _this$state$mediaObje !== void 0 ? _this$state$mediaObje : this.getObjectFit();
34637
+ return /* @__PURE__ */ React__namespace.createElement("div", {
34638
+ onMouseDown: this.onMouseDown,
34639
+ onTouchStart: this.onTouchStart,
34640
+ ref: (el) => this.containerRef = el,
34641
+ "data-testid": "container",
34642
+ style: containerStyle,
34643
+ className: classNames("reactEasyCrop_Container", containerClassName)
34644
+ }, image ? /* @__PURE__ */ React__namespace.createElement("img", _objectSpread2(_objectSpread2({
34645
+ alt: "",
34646
+ className: classNames("reactEasyCrop_Image", objectFit === "contain" && "reactEasyCrop_Contain", objectFit === "horizontal-cover" && "reactEasyCrop_Cover_Horizontal", objectFit === "vertical-cover" && "reactEasyCrop_Cover_Vertical", mediaClassName)
34647
+ }, mediaProps), {}, {
34648
+ src: image,
34649
+ ref: this.imageRef,
34650
+ style: _objectSpread2(_objectSpread2({}, mediaStyle), {}, { transform: transform || `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${zoom})` }),
34651
+ onLoad: this.onMediaLoad
34652
+ })) : video && /* @__PURE__ */ React__namespace.createElement("video", _objectSpread2(_objectSpread2({
34653
+ autoPlay: true,
34654
+ playsInline: true,
34655
+ loop: true,
34656
+ muted: true,
34657
+ className: classNames("reactEasyCrop_Video", objectFit === "contain" && "reactEasyCrop_Contain", objectFit === "horizontal-cover" && "reactEasyCrop_Cover_Horizontal", objectFit === "vertical-cover" && "reactEasyCrop_Cover_Vertical", mediaClassName)
34658
+ }, mediaProps), {}, {
34659
+ ref: this.videoRef,
34660
+ onLoadedMetadata: this.onMediaLoad,
34661
+ style: _objectSpread2(_objectSpread2({}, mediaStyle), {}, { transform: transform || `translate(${x}px, ${y}px) rotate(${rotation}deg) scale(${zoom})` }),
34662
+ controls: false
34663
+ }), (Array.isArray(video) ? video : [{ src: video }]).map((item) => /* @__PURE__ */ React__namespace.createElement("source", _objectSpread2({ key: item.src }, item)))), this.state.cropSize && /* @__PURE__ */ React__namespace.createElement("div", _objectSpread2({
34664
+ ref: this.cropperRef,
34665
+ style: _objectSpread2(_objectSpread2({}, cropAreaStyle), {}, {
34666
+ width: roundCropAreaPixels ? Math.round(this.state.cropSize.width) : this.state.cropSize.width,
34667
+ height: roundCropAreaPixels ? Math.round(this.state.cropSize.height) : this.state.cropSize.height
34668
+ }),
34669
+ tabIndex: 0,
34670
+ onKeyDown: this.onKeyDown,
34671
+ onKeyUp: this.onKeyUp,
34672
+ "data-testid": "cropper",
34673
+ className: classNames("reactEasyCrop_CropArea", cropShape === "round" && "reactEasyCrop_CropAreaRound", showGrid && "reactEasyCrop_CropAreaGrid", cropAreaClassName)
34674
+ }, cropperProps)));
34675
+ }
34676
+ };
34677
+ Cropper$1.defaultProps = {
34678
+ zoom: 1,
34679
+ rotation: 0,
34680
+ aspect: 4 / 3,
34681
+ maxZoom: MAX_ZOOM,
34682
+ minZoom: MIN_ZOOM,
34683
+ cropShape: "rect",
34684
+ objectFit: "contain",
34685
+ showGrid: true,
34686
+ style: {},
34687
+ classes: {},
34688
+ mediaProps: {},
34689
+ cropperProps: {},
34690
+ zoomSpeed: 1,
34691
+ restrictPosition: true,
34692
+ zoomWithScroll: true,
34693
+ keyboardStep: KEYBOARD_STEP
34694
+ };
34695
+ Cropper$1.getMousePoint = (e) => ({
34696
+ x: Number(e.clientX),
34697
+ y: Number(e.clientY)
34698
+ });
34699
+ Cropper$1.getTouchPoint = (touch) => ({
34700
+ x: Number(touch.clientX),
34701
+ y: Number(touch.clientY)
34702
+ });
34703
+ //#endregion
34704
+ //#region src/index.ts
34705
+ var src_default = Cropper$1;
34706
+
34707
+ async function getCroppedFile(imageSrc, pixelCrop, originalFileName) {
34708
+ const image = await loadImage(imageSrc);
34709
+ const canvas = document.createElement("canvas");
34710
+ canvas.width = pixelCrop.width;
34711
+ canvas.height = pixelCrop.height;
34712
+ const ctx = canvas.getContext("2d");
34713
+ if (!ctx)
34714
+ throw new Error("Could not get 2d canvas context");
34715
+ ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
34716
+ return new Promise((resolve, reject) => {
34717
+ canvas.toBlob((blob) => {
34718
+ if (!blob) {
34719
+ reject(new Error("canvas.toBlob produced no output"));
34720
+ return;
34721
+ }
34722
+ const ext = originalFileName.substring(originalFileName.lastIndexOf(".")) || ".jpg";
34723
+ resolve(new File([blob], `cropped${ext}`, { type: "image/jpeg" }));
34724
+ }, "image/jpeg");
34725
+ });
34726
+ }
34727
+ function loadImage(src) {
34728
+ return new Promise((resolve, reject) => {
34729
+ const img = new Image();
34730
+ img.addEventListener("load", () => resolve(img));
34731
+ img.addEventListener("error", reject);
34732
+ img.src = src;
34733
+ });
34734
+ }
34735
+
34736
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
34737
+ const Cropper = src_default;
34738
+ const ImageCropModal = ({ isOpen, imageSrc, originalFileName, aspectRatio = 1, onClose, onCropComplete, title = "Crop image", confirmLabel = "Crop & Upload", cancelLabel = "Cancel", zoomLabel = "Zoom", }) => {
34739
+ const [crop, setCrop] = React.useState({ x: 0, y: 0 });
34740
+ const [zoom, setZoom] = React.useState(1);
34741
+ const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);
34742
+ const [isCropping, setIsCropping] = React.useState(false);
34743
+ const handleCropComplete = React.useCallback((_, pixels) => {
34744
+ setCroppedAreaPixels(pixels);
34745
+ }, []);
34746
+ const handleConfirm = async () => {
34747
+ if (!croppedAreaPixels)
34748
+ return;
34749
+ setIsCropping(true);
34750
+ try {
34751
+ const file = await getCroppedFile(imageSrc, croppedAreaPixels, originalFileName);
34752
+ onCropComplete(file);
34753
+ }
34754
+ finally {
34755
+ setIsCropping(false);
34756
+ }
34757
+ };
34758
+ return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onClose: onClose, title: title, size: "lg", primaryAction: confirmLabel, secondaryAction: cancelLabel, onPrimaryAction: handleConfirm, onSecondaryAction: onClose, isLoading: isCropping, closeOnOverlayClick: false, children: [jsxRuntime.jsx("div", { className: "relative h-80 w-full bg-gray-900", children: jsxRuntime.jsx(Cropper, { image: imageSrc, crop: crop, zoom: zoom, aspect: aspectRatio, onCropChange: setCrop, onZoomChange: setZoom, onCropComplete: handleCropComplete }) }), jsxRuntime.jsxs("div", { className: "mt-4 px-1", children: [jsxRuntime.jsx("label", { className: "mb-1 block text-sm text-gray-500", children: zoomLabel }), jsxRuntime.jsx("input", { type: "range", min: 1, max: 3, step: 0.05, value: zoom, onChange: (e) => setZoom(Number(e.target.value)), className: "w-full accent-ews-primary" })] })] }));
34759
+ };
34760
+
33362
34761
  const DropdownMultiSelect = ({ options, name, control, placeholder = "Select options", searchPlaceholder = "Search...", onChange, value: controlledValue, defaultValue, onValidate, disabled = false, error, label, className, }) => {
33363
34762
  const [isOpen, setIsOpen] = React.useState(false);
33364
34763
  const [searchTerm, setSearchTerm] = React.useState("");
@@ -35076,7 +36475,7 @@ exports.FerrisWheel = FerrisWheel;
35076
36475
  exports.FerrisWheelIcon = FerrisWheel;
35077
36476
  exports.Figma = Figma;
35078
36477
  exports.FigmaIcon = Figma;
35079
- exports.File = File;
36478
+ exports.File = File$1;
35080
36479
  exports.FileArchive = FileArchive;
35081
36480
  exports.FileArchiveIcon = FileArchive;
35082
36481
  exports.FileAudio = FileAudio;
@@ -35129,7 +36528,7 @@ exports.FileEdit = FilePen;
35129
36528
  exports.FileEditIcon = FilePen;
35130
36529
  exports.FileHeart = FileHeart;
35131
36530
  exports.FileHeartIcon = FileHeart;
35132
- exports.FileIcon = File;
36531
+ exports.FileIcon = File$1;
35133
36532
  exports.FileImage = FileImage;
35134
36533
  exports.FileImageIcon = FileImage;
35135
36534
  exports.FileInput = FileInput;
@@ -35615,10 +37014,11 @@ exports.IdCard = IdCard;
35615
37014
  exports.IdCardIcon = IdCard;
35616
37015
  exports.IdCardLanyard = IdCardLanyard;
35617
37016
  exports.IdCardLanyardIcon = IdCardLanyard;
35618
- exports.Image = Image;
37017
+ exports.Image = Image$1;
37018
+ exports.ImageCropModal = ImageCropModal;
35619
37019
  exports.ImageDown = ImageDown;
35620
37020
  exports.ImageDownIcon = ImageDown;
35621
- exports.ImageIcon = Image;
37021
+ exports.ImageIcon = Image$1;
35622
37022
  exports.ImageMinus = ImageMinus;
35623
37023
  exports.ImageMinusIcon = ImageMinus;
35624
37024
  exports.ImageOff = ImageOff;
@@ -36497,7 +37897,7 @@ exports.LucideFeather = Feather;
36497
37897
  exports.LucideFence = Fence;
36498
37898
  exports.LucideFerrisWheel = FerrisWheel;
36499
37899
  exports.LucideFigma = Figma;
36500
- exports.LucideFile = File;
37900
+ exports.LucideFile = File$1;
36501
37901
  exports.LucideFileArchive = FileArchive;
36502
37902
  exports.LucideFileAudio = FileAudio;
36503
37903
  exports.LucideFileAudio2 = FileAudio2;
@@ -36766,7 +38166,7 @@ exports.LucideIceCreamBowl = IceCreamBowl;
36766
38166
  exports.LucideIceCreamCone = IceCreamCone;
36767
38167
  exports.LucideIdCard = IdCard;
36768
38168
  exports.LucideIdCardLanyard = IdCardLanyard;
36769
- exports.LucideImage = Image;
38169
+ exports.LucideImage = Image$1;
36770
38170
  exports.LucideImageDown = ImageDown;
36771
38171
  exports.LucideImageMinus = ImageMinus;
36772
38172
  exports.LucideImageOff = ImageOff;