@oneblink/apps-react 8.12.0-beta.9 → 8.12.0

package/dist/styles/camera.scss

@@ -109,6 +109,17 @@
 }
 
 .ob-cropper__container {
+  //
+  // Third Party
+  //
+  --rc-drag-handle-size: 12px;
+  --rc-drag-handle-mobile-size: 24px;
+  --rc-drag-handle-bg-colour: rgba(0, 0, 0, 0.2);
+  --rc-drag-bar-size: 6px; // The invisible grip size of the crop selection edges
+  --rc-border-color: rgba(255, 255, 255, 0.7);
+  --rc-focus-color: #0088ff;
+  @import 'react-image-crop/src/ReactCrop.scss';
+
   width: 100%;
   height: 100%;
   display: flex;

package/dist/styles.css

@@ -8204,11 +8204,255 @@ button on-loading {
 }
 
 .ob-cropper__container {
+  --rc-drag-handle-size: 12px;
+  --rc-drag-handle-mobile-size: 24px;
+  --rc-drag-handle-bg-colour: rgba(0, 0, 0, 0.2);
+  --rc-drag-bar-size: 6px;
+  --rc-border-color: rgba(255, 255, 255, 0.7);
+  --rc-focus-color: #0088ff;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
+@keyframes marching-ants {
+  0% {
+    background-position: 0 0, 0 100%, 0 0, 100% 0;
+  }
+  100% {
+    background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px;
+  }
+}
+.ob-cropper__container :root {
+  --rc-drag-handle-size: 12px;
+  --rc-drag-handle-mobile-size: 24px;
+  --rc-drag-handle-bg-colour: rgba(0, 0, 0, 0.2);
+  --rc-drag-bar-size: 6px;
+  --rc-border-color: rgba(255, 255, 255, 0.7);
+  --rc-focus-color: #0088ff;
+}
+.ob-cropper__container .ReactCrop {
+  position: relative;
+  display: inline-block;
+  cursor: crosshair;
+  max-width: 100%;
+}
+.ob-cropper__container .ReactCrop *, .ob-cropper__container .ReactCrop *::before, .ob-cropper__container .ReactCrop *::after {
+  box-sizing: border-box;
+}
+.ob-cropper__container .ReactCrop--disabled, .ob-cropper__container .ReactCrop--locked {
+  cursor: inherit;
+}
+.ob-cropper__container .ReactCrop__child-wrapper {
+  overflow: hidden;
+  max-height: inherit;
+}
+.ob-cropper__container .ReactCrop__child-wrapper > img, .ob-cropper__container .ReactCrop__child-wrapper > video {
+  display: block;
+  max-width: 100%;
+  max-height: inherit;
+}
+.ob-cropper__container .ReactCrop:not(.ob-cropper__container .ReactCrop--disabled) .ob-cropper__container .ReactCrop__child-wrapper > img, .ob-cropper__container .ReactCrop:not(.ob-cropper__container .ReactCrop--disabled) .ob-cropper__container .ReactCrop__child-wrapper > video {
+  touch-action: none;
+}
+.ob-cropper__container .ReactCrop:not(.ob-cropper__container .ReactCrop--disabled) .ob-cropper__container .ReactCrop__crop-selection {
+  touch-action: none;
+}
+.ob-cropper__container .ReactCrop__crop-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  width: calc(100% + 0.5px);
+  height: calc(100% + 0.5px);
+}
+.ob-cropper__container .ReactCrop__crop-selection {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate3d(0, 0, 0);
+  cursor: move;
+}
+.ReactCrop--disabled .ob-cropper__container .ReactCrop__crop-selection {
+  cursor: inherit;
+}
+.ReactCrop--circular-crop .ob-cropper__container .ReactCrop__crop-selection {
+  border-radius: 50%;
+}
+.ReactCrop--circular-crop .ob-cropper__container .ReactCrop__crop-selection::after {
+  pointer-events: none;
+  content: "";
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  bottom: -1px;
+  left: -1px;
+  border: 1px solid var(--rc-border-color);
+  opacity: 0.3;
+}
+.ReactCrop--no-animate .ob-cropper__container .ReactCrop__crop-selection {
+  outline: 1px dashed white;
+}
+.ob-cropper__container .ReactCrop__crop-selection:not(.ReactCrop--no-animate .ob-cropper__container .ReactCrop__crop-selection) {
+  animation: marching-ants 1s;
+  background-image: linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%);
+  background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px;
+  background-position: 0 0, 0 100%, 0 0, 100% 0;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  color: #fff;
+  animation-play-state: running;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.ob-cropper__container .ReactCrop__crop-selection:focus {
+  outline: 2px solid var(--rc-focus-color);
+  outline-offset: -1px;
+}
+.ob-cropper__container .ReactCrop--invisible-crop .ob-cropper__container .ReactCrop__crop-mask, .ob-cropper__container .ReactCrop--invisible-crop .ob-cropper__container .ReactCrop__crop-selection {
+  display: none;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-vt::before, .ob-cropper__container .ReactCrop__rule-of-thirds-vt::after, .ob-cropper__container .ReactCrop__rule-of-thirds-hz::before, .ob-cropper__container .ReactCrop__rule-of-thirds-hz::after {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: rgba(255, 255, 255, 0.4);
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-vt::before, .ob-cropper__container .ReactCrop__rule-of-thirds-vt::after {
+  width: 1px;
+  height: 100%;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-vt::before {
+  left: 33.3333%;
+  left: 33.3333333333%;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-vt::after {
+  left: 66.6666%;
+  left: 66.6666666667%;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-hz::before, .ob-cropper__container .ReactCrop__rule-of-thirds-hz::after {
+  width: 100%;
+  height: 1px;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-hz::before {
+  top: 33.3333%;
+  top: 33.3333333333%;
+}
+.ob-cropper__container .ReactCrop__rule-of-thirds-hz::after {
+  top: 66.6666%;
+  top: 66.6666666667%;
+}
+.ob-cropper__container .ReactCrop__drag-handle {
+  position: absolute;
+  width: var(--rc-drag-handle-size);
+  height: var(--rc-drag-handle-size);
+  background-color: var(--rc-drag-handle-bg-colour);
+  border: 1px solid var(--rc-border-color);
+}
+.ob-cropper__container .ReactCrop__drag-handle:focus {
+  background: var(--rc-focus-color);
+}
+.ob-cropper__container .ReactCrop .ord-nw {
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+  cursor: nw-resize;
+}
+.ob-cropper__container .ReactCrop .ord-n {
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  cursor: n-resize;
+}
+.ob-cropper__container .ReactCrop .ord-ne {
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  cursor: ne-resize;
+}
+.ob-cropper__container .ReactCrop .ord-e {
+  top: 50%;
+  right: 0;
+  transform: translate(50%, -50%);
+  cursor: e-resize;
+}
+.ob-cropper__container .ReactCrop .ord-se {
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+  cursor: se-resize;
+}
+.ob-cropper__container .ReactCrop .ord-s {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%);
+  cursor: s-resize;
+}
+.ob-cropper__container .ReactCrop .ord-sw {
+  bottom: 0;
+  left: 0;
+  transform: translate(-50%, 50%);
+  cursor: sw-resize;
+}
+.ob-cropper__container .ReactCrop .ord-w {
+  top: 50%;
+  left: 0;
+  transform: translate(-50%, -50%);
+  cursor: w-resize;
+}
+.ob-cropper__container .ReactCrop__disabled .ob-cropper__container .ReactCrop__drag-handle {
+  cursor: inherit;
+}
+.ob-cropper__container .ReactCrop__drag-bar {
+  position: absolute;
+}
+.ob-cropper__container .ReactCrop__drag-bar.ord-n {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--rc-drag-bar-size);
+  transform: translateY(-50%);
+}
+.ob-cropper__container .ReactCrop__drag-bar.ord-e {
+  right: 0;
+  top: 0;
+  width: var(--rc-drag-bar-size);
+  height: 100%;
+  transform: translateX(50%);
+}
+.ob-cropper__container .ReactCrop__drag-bar.ord-s {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--rc-drag-bar-size);
+  transform: translateY(50%);
+}
+.ob-cropper__container .ReactCrop__drag-bar.ord-w {
+  top: 0;
+  left: 0;
+  width: var(--rc-drag-bar-size);
+  height: 100%;
+  transform: translateX(-50%);
+}
+.ob-cropper__container .ReactCrop--new-crop .ob-cropper__container .ReactCrop__drag-bar, .ob-cropper__container .ReactCrop--new-crop .ob-cropper__container .ReactCrop__drag-handle, .ob-cropper__container .ReactCrop--fixed-aspect .ob-cropper__container .ReactCrop__drag-bar {
+  display: none;
+}
+.ob-cropper__container .ReactCrop--fixed-aspect .ob-cropper__container .ReactCrop__drag-handle.ord-n, .ob-cropper__container .ReactCrop--fixed-aspect .ob-cropper__container .ReactCrop__drag-handle.ord-e, .ob-cropper__container .ReactCrop--fixed-aspect .ob-cropper__container .ReactCrop__drag-handle.ord-s, .ob-cropper__container .ReactCrop--fixed-aspect .ob-cropper__container .ReactCrop__drag-handle.ord-w {
+  display: none;
+}
+@media (pointer: coarse) {
+  .ob-cropper__container .ReactCrop .ord-n,
+  .ob-cropper__container .ReactCrop .ord-e,
+  .ob-cropper__container .ReactCrop .ord-s,
+  .ob-cropper__container .ReactCrop .ord-w {
+    display: none;
+  }
+  .ob-cropper__container .ReactCrop__drag-handle {
+    width: var(--rc-drag-handle-mobile-size);
+    height: var(--rc-drag-handle-mobile-size);
+  }
+}
 .ob-cropper__container .ob-cropper__cropper-full-height {
   height: 100%;
 }
@@ -10206,243 +10450,3 @@ textarea:disabled {
 .ob-downloadable-files__error-pdf {
   padding-bottom: 1.5rem;
 }
-
-@keyframes marching-ants {
-  0% {
-    background-position: 0 0, 0 100%, 0 0, 100% 0;
-  }
-  100% {
-    background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px;
-  }
-}
-:root {
-  --rc-drag-handle-size: 12px;
-  --rc-drag-handle-mobile-size: 24px;
-  --rc-drag-handle-bg-colour: rgba(0, 0, 0, 0.2);
-  --rc-drag-bar-size: 6px;
-  --rc-border-color: rgba(255, 255, 255, 0.7);
-  --rc-focus-color: #0088ff;
-}
-
-.ReactCrop {
-  position: relative;
-  display: inline-block;
-  cursor: crosshair;
-  max-width: 100%;
-}
-.ReactCrop *, .ReactCrop *::before, .ReactCrop *::after {
-  box-sizing: border-box;
-}
-.ReactCrop--disabled, .ReactCrop--locked {
-  cursor: inherit;
-}
-.ReactCrop__child-wrapper {
-  overflow: hidden;
-  max-height: inherit;
-}
-.ReactCrop__child-wrapper > img, .ReactCrop__child-wrapper > video {
-  display: block;
-  max-width: 100%;
-  max-height: inherit;
-}
-.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video {
-  touch-action: none;
-}
-.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection {
-  touch-action: none;
-}
-.ReactCrop__crop-mask {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  width: calc(100% + 0.5px);
-  height: calc(100% + 0.5px);
-}
-.ReactCrop__crop-selection {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: translate3d(0, 0, 0);
-  cursor: move;
-}
-.ReactCrop--disabled .ReactCrop__crop-selection {
-  cursor: inherit;
-}
-.ReactCrop--circular-crop .ReactCrop__crop-selection {
-  border-radius: 50%;
-}
-.ReactCrop--circular-crop .ReactCrop__crop-selection::after {
-  pointer-events: none;
-  content: "";
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  bottom: -1px;
-  left: -1px;
-  border: 1px solid var(--rc-border-color);
-  opacity: 0.3;
-}
-.ReactCrop--no-animate .ReactCrop__crop-selection {
-  outline: 1px dashed white;
-}
-.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) {
-  animation: marching-ants 1s;
-  background-image: linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%);
-  background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px;
-  background-position: 0 0, 0 100%, 0 0, 100% 0;
-  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
-  color: #fff;
-  animation-play-state: running;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-.ReactCrop__crop-selection:focus {
-  outline: 2px solid var(--rc-focus-color);
-  outline-offset: -1px;
-}
-.ReactCrop--invisible-crop .ReactCrop__crop-mask, .ReactCrop--invisible-crop .ReactCrop__crop-selection {
-  display: none;
-}
-.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after, .ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after {
-  content: "";
-  display: block;
-  position: absolute;
-  background-color: rgba(255, 255, 255, 0.4);
-}
-.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after {
-  width: 1px;
-  height: 100%;
-}
-.ReactCrop__rule-of-thirds-vt::before {
-  left: 33.3333%;
-  left: 33.3333333333%;
-}
-.ReactCrop__rule-of-thirds-vt::after {
-  left: 66.6666%;
-  left: 66.6666666667%;
-}
-.ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after {
-  width: 100%;
-  height: 1px;
-}
-.ReactCrop__rule-of-thirds-hz::before {
-  top: 33.3333%;
-  top: 33.3333333333%;
-}
-.ReactCrop__rule-of-thirds-hz::after {
-  top: 66.6666%;
-  top: 66.6666666667%;
-}
-.ReactCrop__drag-handle {
-  position: absolute;
-  width: var(--rc-drag-handle-size);
-  height: var(--rc-drag-handle-size);
-  background-color: var(--rc-drag-handle-bg-colour);
-  border: 1px solid var(--rc-border-color);
-}
-.ReactCrop__drag-handle:focus {
-  background: var(--rc-focus-color);
-}
-.ReactCrop .ord-nw {
-  top: 0;
-  left: 0;
-  transform: translate(-50%, -50%);
-  cursor: nw-resize;
-}
-.ReactCrop .ord-n {
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  cursor: n-resize;
-}
-.ReactCrop .ord-ne {
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-  cursor: ne-resize;
-}
-.ReactCrop .ord-e {
-  top: 50%;
-  right: 0;
-  transform: translate(50%, -50%);
-  cursor: e-resize;
-}
-.ReactCrop .ord-se {
-  bottom: 0;
-  right: 0;
-  transform: translate(50%, 50%);
-  cursor: se-resize;
-}
-.ReactCrop .ord-s {
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, 50%);
-  cursor: s-resize;
-}
-.ReactCrop .ord-sw {
-  bottom: 0;
-  left: 0;
-  transform: translate(-50%, 50%);
-  cursor: sw-resize;
-}
-.ReactCrop .ord-w {
-  top: 50%;
-  left: 0;
-  transform: translate(-50%, -50%);
-  cursor: w-resize;
-}
-.ReactCrop__disabled .ReactCrop__drag-handle {
-  cursor: inherit;
-}
-.ReactCrop__drag-bar {
-  position: absolute;
-}
-.ReactCrop__drag-bar.ord-n {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: var(--rc-drag-bar-size);
-  transform: translateY(-50%);
-}
-.ReactCrop__drag-bar.ord-e {
-  right: 0;
-  top: 0;
-  width: var(--rc-drag-bar-size);
-  height: 100%;
-  transform: translateX(50%);
-}
-.ReactCrop__drag-bar.ord-s {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: var(--rc-drag-bar-size);
-  transform: translateY(50%);
-}
-.ReactCrop__drag-bar.ord-w {
-  top: 0;
-  left: 0;
-  width: var(--rc-drag-bar-size);
-  height: 100%;
-  transform: translateX(-50%);
-}
-.ReactCrop--new-crop .ReactCrop__drag-bar, .ReactCrop--new-crop .ReactCrop__drag-handle, .ReactCrop--fixed-aspect .ReactCrop__drag-bar {
-  display: none;
-}
-.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
-  display: none;
-}
-@media (pointer: coarse) {
-  .ReactCrop .ord-n,
-  .ReactCrop .ord-e,
-  .ReactCrop .ord-s,
-  .ReactCrop .ord-w {
-    display: none;
-  }
-  .ReactCrop__drag-handle {
-    width: var(--rc-drag-handle-mobile-size);
-    height: var(--rc-drag-handle-mobile-size);
-  }
-}

package/dist/styles.scss

@@ -148,7 +148,3 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
 @import './styles/nsw-point-address.scss';
 @import './styles/nsw-point-cadastral-parcel.scss';
 @import './styles/downloadable-files.scss';
-//
-// Third Party
-//
-@import 'react-image-crop/src/ReactCrop.scss';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "8.12.0-beta.9",
+  "version": "8.12.0",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"