@unissey-web/web-components 3.8.0-beta.5

package/dist/picture-editor.js

@@ -0,0 +1,252 @@
+import { _ as _inherits, a as _createClass, x, d as _taggedTemplateLiteral, s, b as _classCallCheck, c as _callSuper, i, e as _objectSpread2, g as _asyncToGenerator, h as _regeneratorRuntime, f as _superPropGet } from './lit-element-ac3d3a27.js';
+import { E as EN } from './en-e76ed5a0.js';
+
+var _templateObject$2;
+var RotateLeftIcon = /*#__PURE__*/function (_LitElement) {
+  function RotateLeftIcon() {
+    _classCallCheck(this, RotateLeftIcon);
+    return _callSuper(this, RotateLeftIcon, arguments);
+  }
+  _inherits(RotateLeftIcon, _LitElement);
+  return _createClass(RotateLeftIcon, [{
+    key: "render",
+    value: function render() {
+      return x(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n      <svg width=\"21\" height=\"24\" viewBox=\"0 0 21 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M4.74753 8.53703L2.96129 6.7508C1.93769 7.77529 1.14478 9.00665 0.635652 10.3624L3.00172 11.248C3.38417 10.2304 3.97936 9.30619 4.74753 8.53703ZM20.2122 13.8945C20.2163 12.567 19.9566 11.2519 19.4483 10.0256C18.94 8.79928 18.1932 7.68614 17.2512 6.7508C15.6685 5.16015 13.5969 4.14794 11.3695 3.87691V0L5.05323 5.05299L11.3695 10.106V6.42867C12.9218 6.68503 14.3544 7.42253 15.4649 8.53703C16.1713 9.23885 16.7313 10.0739 17.1125 10.9938C17.4937 11.9136 17.6886 12.9 17.6857 13.8957V13.8983C17.6857 14.3151 17.644 14.7257 17.5771 15.1325C17.5682 15.1868 17.5632 15.2436 17.5531 15.2979C17.3289 16.4629 16.8367 17.5596 16.1155 18.5015C15.9134 18.7656 15.6974 19.022 15.4637 19.2557C15.1783 19.5379 14.8707 19.7969 14.544 20.0301C13.6874 20.6573 12.7067 21.0944 11.6676 21.3123C11.4882 21.3502 11.3076 21.3754 11.1244 21.3994C11.0461 21.4108 10.9703 21.426 10.892 21.4335C10.0909 21.5156 9.28184 21.4717 8.49432 21.3034L7.9587 23.7731C9.01004 23.9984 10.0904 24.0564 11.1598 23.9449C11.2469 23.936 11.3341 23.9183 11.4213 23.907C11.6802 23.8741 11.9379 23.8362 12.1919 23.7832L12.2588 23.7718L12.2575 23.7655C13.2009 23.5633 14.1098 23.225 14.9558 22.7612L14.9571 22.7625L14.9925 22.7385C15.4388 22.4894 15.8653 22.2065 16.2684 21.8921C16.6094 21.6281 16.9404 21.3489 17.2499 21.0394C17.5632 20.7274 17.8436 20.3914 18.1102 20.0478C18.1367 20.0124 18.1721 19.9808 18.1986 19.9454L18.191 19.9404C18.7707 19.1706 19.2357 18.3208 19.5717 17.4177L19.5819 17.4215C19.6185 17.3229 19.645 17.2219 19.6779 17.1221C19.7246 16.9831 19.7726 16.8429 19.813 16.7014C19.8636 16.5246 19.9052 16.3464 19.9457 16.1671C19.9735 16.042 20.0063 15.9207 20.029 15.7944C20.0695 15.5784 20.0998 15.3598 20.1251 15.1426C20.1377 15.0466 20.1541 14.9531 20.1629 14.8558C20.192 14.5413 20.2097 14.2242 20.2097 13.9046C20.2122 13.9021 20.2122 13.8995 20.2122 13.8945V13.8945ZM4.03884 18.4396L2.01765 19.9568C2.88691 21.1141 3.99336 22.0724 5.26293 22.7675L6.47691 20.5518C5.52249 20.0302 4.69109 19.31 4.03884 18.4396V18.4396ZM2.52674 13.8957C2.52674 13.7126 2.53305 13.5332 2.54568 13.3538L0.0267662 13.1732C-0.0789274 14.6204 0.1292 16.0734 0.636915 17.4328L3.00298 16.5473C2.68651 15.6992 2.52519 14.801 2.52674 13.8957V13.8957Z\"\n          fill=\"#707070\"\n        />\n      </svg>\n    "])));
+    }
+  }]);
+}(s);
+customElements.define("uni-rotate-left-icon", RotateLeftIcon);
+
+var _templateObject$1;
+var RotateRightIcon = /*#__PURE__*/function (_LitElement) {
+  function RotateRightIcon() {
+    _classCallCheck(this, RotateRightIcon);
+    return _callSuper(this, RotateRightIcon, arguments);
+  }
+  _inherits(RotateRightIcon, _LitElement);
+  return _createClass(RotateRightIcon, [{
+    key: "render",
+    value: function render() {
+      return x(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n      <svg width=\"21\" height=\"24\" viewBox=\"0 0 21 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15.4639 19.2533C14.9515 19.7658 14.3688 20.2026 13.7333 20.5506L14.9472 22.7662C16.2162 22.0704 17.3224 21.1123 18.1923 19.9557L16.1712 18.4386C15.9553 18.7268 15.7189 18.9991 15.4639 19.2533ZM17.6656 13.353C17.7451 14.438 17.5891 15.5273 17.2083 16.5464L19.5742 17.4318C20.0817 16.0729 20.2899 14.6204 20.1843 13.1737L17.6656 13.353ZM19.5755 10.3618C19.0664 9.00614 18.2735 7.77485 17.25 6.75042L15.4639 8.53655C16.2313 9.30622 16.8263 10.2302 17.2096 11.2473L19.5755 10.3618ZM9.3084 21.4311C9.24903 21.4247 9.18966 21.4121 9.13029 21.4045C8.93218 21.3799 8.735 21.3483 8.53912 21.3098C7.42521 21.0761 6.37928 20.5914 5.48097 19.8925C5.22192 19.6956 4.97593 19.4821 4.74454 19.2533C4.51132 19.0162 4.2936 18.7643 4.09274 18.4992C3.61092 17.875 3.23104 17.1783 2.96725 16.4352C2.83418 16.064 2.72987 15.683 2.65524 15.2958C2.64514 15.2415 2.64008 15.1846 2.63124 15.1303C2.56451 14.7227 2.52946 14.3105 2.5264 13.8975V13.8949C2.5264 11.8701 3.31462 9.96773 4.74706 8.53655C5.85755 7.42211 7.29005 6.68465 8.84228 6.42831V10.1054L15.1582 5.05271L8.84228 0V3.87669C6.61497 4.1477 4.54349 5.15986 2.96093 6.75042C2.01904 7.68575 1.27229 8.79883 0.764015 10.0251C0.255739 11.2513 -0.00394133 12.5663 4.52127e-05 13.8937V13.9051C4.52127e-05 14.2246 0.0177299 14.5417 0.046783 14.8562C0.0556252 14.9522 0.0733094 15.0457 0.0846779 15.143C0.111205 15.3602 0.140258 15.5788 0.18068 15.7948C0.20468 15.9211 0.236259 16.0423 0.264049 16.1674C0.304471 16.3468 0.346156 16.5249 0.396683 16.7017C0.437105 16.8432 0.485105 16.9834 0.531843 17.1224C0.564685 17.2222 0.591212 17.3232 0.627844 17.4217L0.63795 17.4179C0.97563 18.3204 1.44147 19.1695 2.02113 19.9392L2.01229 19.9456C2.03881 19.9809 2.07418 20.0125 2.10071 20.0479C2.36724 20.3915 2.64766 20.7275 2.96093 21.0395C3.34066 21.4138 3.7486 21.7584 4.18116 22.0702C4.5159 22.3128 4.85949 22.5401 5.21823 22.7384L5.2536 22.7624L5.25486 22.7612C6.1008 23.225 7.0097 23.5632 7.95301 23.7654L7.95174 23.7717L8.01869 23.7831C8.27259 23.8361 8.53028 23.8728 8.78923 23.9069C8.87639 23.9183 8.96355 23.9359 9.05071 23.9448C10.1193 24.0567 11.1988 23.9983 12.2491 23.7717L11.7135 21.3022C10.9235 21.4708 10.1119 21.5142 9.3084 21.4311Z\"\n          fill=\"#707070\"\n        />\n      </svg>\n    "])));
+    }
+  }]);
+}(s);
+customElements.define("uni-rotate-right-icon", RotateRightIcon);
+
+var _templateObject, _templateObject2;
+var defaultStrings = EN.pictureEditor;
+var PictureEditor = /*#__PURE__*/function (_LitElement) {
+  function PictureEditor() {
+    var _this;
+    _classCallCheck(this, PictureEditor);
+    _this = _callSuper(this, PictureEditor);
+    _this.rotation = 90;
+    _this.image = "";
+    _this.strings = _objectSpread2({}, defaultStrings);
+    _this.rotatedImageBase64 = void 0;
+    _this.rotatedImage = void 0;
+    return _this;
+  }
+  _inherits(PictureEditor, _LitElement);
+  return _createClass(PictureEditor, [{
+    key: "rotateImage",
+    value: function () {
+      var _rotateImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(degrees) {
+        var _this$shadowRoot, _this$rotatedImageBas;
+        var cvs, img, ctx, radians, imgWidth, imgHeight, cosinus, sinus, width, height, rotatedBlob;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              cvs = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.querySelector(".image > canvas");
+              _context2.next = 3;
+              return this.createImage((_this$rotatedImageBas = this.rotatedImageBase64) !== null && _this$rotatedImageBas !== void 0 ? _this$rotatedImageBas : this.image);
+            case 3:
+              img = _context2.sent;
+              if (cvs) {
+                _context2.next = 6;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 6:
+              ctx = cvs.getContext("2d");
+              if (ctx) {
+                _context2.next = 9;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 9:
+              radians = degrees * Math.PI / 180;
+              imgWidth = img.naturalWidth;
+              imgHeight = img.naturalHeight;
+              cosinus = Math.abs(Math.cos(radians));
+              sinus = Math.abs(Math.sin(radians));
+              width = imgHeight * sinus + imgWidth * cosinus;
+              height = imgHeight * cosinus + imgWidth * sinus;
+              ctx.canvas.width = width;
+              ctx.canvas.height = height;
+              ctx.translate(width / 2, height / 2);
+              ctx.rotate(radians);
+              ctx.drawImage(img, -imgWidth / 2, -imgHeight / 2);
+              _context2.next = 23;
+              return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+                return _regeneratorRuntime().wrap(function _callee$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      return _context.abrupt("return", new Promise(function (resolve, reject) {
+                        ctx.canvas.toBlob(function (blob) {
+                          if (blob === null) reject("Failed to generated Blob from canvas");else resolve(blob);
+                        }, "image/jpeg", 0.75);
+                      }));
+                    case 1:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _callee);
+              }))();
+            case 23:
+              rotatedBlob = _context2.sent;
+              this.rotatedImage = rotatedBlob;
+              _context2.next = 27;
+              return this.blobToBase64(this.rotatedImage);
+            case 27:
+              this.rotatedImageBase64 = _context2.sent;
+            case 28:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function rotateImage(_x) {
+        return _rotateImage.apply(this, arguments);
+      }
+      return rotateImage;
+    }()
+  }, {
+    key: "rotateLeft",
+    value: function () {
+      var _rotateLeft = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return this.rotateImage(-this.rotation);
+            case 2:
+              this.requestUpdate();
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function rotateLeft() {
+        return _rotateLeft.apply(this, arguments);
+      }
+      return rotateLeft;
+    }()
+  }, {
+    key: "rotateRight",
+    value: function () {
+      var _rotateRight = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return this.rotateImage(this.rotation);
+            case 2:
+              this.requestUpdate();
+            case 3:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function rotateRight() {
+        return _rotateRight.apply(this, arguments);
+      }
+      return rotateRight;
+    }()
+  }, {
+    key: "emitValidation",
+    value: function emitValidation() {
+      if (this.rotatedImage) {
+        var validationEvent = new CustomEvent("picture", {
+          detail: {
+            picture: this.rotatedImage
+          }
+        });
+        this.dispatchEvent(validationEvent);
+      }
+    }
+  }, {
+    key: "firstUpdated",
+    value: function () {
+      var _firstUpdated = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(changes) {
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              _superPropGet(PictureEditor, "firstUpdated", this, 3)([changes]);
+              if (!this.image) {
+                _context5.next = 4;
+                break;
+              }
+              _context5.next = 4;
+              return this.rotateImage(0);
+            case 4:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5, this);
+      }));
+      function firstUpdated(_x2) {
+        return _firstUpdated.apply(this, arguments);
+      }
+      return firstUpdated;
+    }()
+  }, {
+    key: "render",
+    value: function render() {
+      return x(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      <div class=\"box\">\n        <div class=\"image\">\n          <canvas>\n        </div>\n        <div class=\"controls\">\n          <div class=\"rotate\">\n            <button class=\"btn-rotate\" @click=\"", "\"><uni-rotate-left-icon></uni-rotate-left-icon></button>\n            <button class=\"btn-rotate\" @click=\"", "\"><uni-rotate-right-icon></uni-rotate-right-icon></button>\n          </div>\n          <div class=\"actions\">\n            <div style=\"btn-items\">\n              <slot name=\"cancel\"></slot>\n            </div>\n            <div class=\"btn-items\">\n              <uni-button id=\"capture\" @click=\"", "\">\n                ", "\n              </uni-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    "])), this.rotateLeft, this.rotateRight, this.emitValidation, this.strings.validate);
+    }
+  }, {
+    key: "createImage",
+    value: function createImage(data) {
+      return new Promise(function (resolve, reject) {
+        var img = new Image();
+        img.onload = function () {
+          return resolve(img);
+        };
+        img.onerror = reject;
+        img.src = data;
+      });
+    }
+  }, {
+    key: "blobToBase64",
+    value: function blobToBase64(blob) {
+      return new Promise(function (resolve) {
+        var f = new FileReader();
+        f.onloadend = function () {
+          return resolve(f.result);
+        };
+        f.readAsDataURL(blob);
+      });
+    }
+  }]);
+}(s);
+PictureEditor.properties = {
+  image: {
+    attribute: "img",
+    type: String
+  },
+  rotation: {
+    attribute: "rotation",
+    type: Number
+  },
+  strings: {
+    attribute: "strings",
+    type: Object
+  }
+};
+PictureEditor.styles = i(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    canvas {\n      height: 300px;\n      width: auto;\n      border-radius: 12px;\n    }\n\n    .controls {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      width: 100%;\n    }\n\n    .image {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .btn-rotate {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      width: 50px;\n      height: 50px;\n      padding: 10px;\n\n      cursor: pointer;\n      background-color: rgba(255, 255, 255, 0);\n      border: none;\n    }\n\n    .btn-rotate:hover {\n      background-color: rgba(33, 33, 33, 0.15);\n      border-radius: 360px;\n    }\n\n    .btn-items {\n      display: inline-block;\n      margin: 7px;\n    }\n\n    @media screen and (max-width: 576px) {\n      .btn-items {\n        margin: 7px 0;\n        width: 100%;\n      }\n\n      canvas {\n        height: 150px;\n        width: auto;\n      }\n    }\n\n    .actions {\n      text-align: center;\n      margin-top: 20px;\n      width: 100%;\n    }\n\n    .actions div {\n      margin-top: 5px;\n    }\n  "])));
+customElements.define("uni-picture-editor", PictureEditor);
+
+export { PictureEditor };

package/dist/picture-recorder.js

@@ -0,0 +1,46 @@
+import { _ as _inherits, a as _createClass, x, d as _taggedTemplateLiteral, s, b as _classCallCheck, c as _callSuper, e as _objectSpread2 } from './lit-element-ac3d3a27.js';
+import { E as EN } from './en-e76ed5a0.js';
+import { R as Recorder, b as buildPacked } from './video-recorder-4b9e6a43.js';
+import './variables-09a3e162.js';
+import './button.js';
+
+var _templateObject$1;
+var PhotoCameraIcon = /*#__PURE__*/function (_LitElement) {
+  function PhotoCameraIcon() {
+    _classCallCheck(this, PhotoCameraIcon);
+    return _callSuper(this, PhotoCameraIcon, arguments);
+  }
+  _inherits(PhotoCameraIcon, _LitElement);
+  return _createClass(PhotoCameraIcon, [{
+    key: "render",
+    value: function render() {
+      return x(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n      <svg width=\"15\" height=\"13\" viewBox=\"0 0 15 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M7.22224 9.53332C8.49864 9.53332 9.53335 8.4986 9.53335 7.22221C9.53335 5.94582 8.49864 4.9111 7.22224 4.9111C5.94585 4.9111 4.91113 5.94582 4.91113 7.22221C4.91113 8.4986 5.94585 9.53332 7.22224 9.53332Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M5.05556 0L3.73389 1.44444H1.44444C0.65 1.44444 0 2.09444 0 2.88889V11.5556C0 12.35 0.65 13 1.44444 13H13C13.7944 13 14.4444 12.35 14.4444 11.5556V2.88889C14.4444 2.09444 13.7944 1.44444 13 1.44444H10.7106L9.38889 0H5.05556ZM7.22222 10.8333C5.22889 10.8333 3.61111 9.21556 3.61111 7.22222C3.61111 5.22889 5.22889 3.61111 7.22222 3.61111C9.21556 3.61111 10.8333 5.22889 10.8333 7.22222C10.8333 9.21556 9.21556 10.8333 7.22222 10.8333Z\"\n          fill=\"white\"\n        />\n      </svg>\n    "])));
+    }
+  }]);
+}(s);
+customElements.define("uni-photo-camera-icon", PhotoCameraIcon);
+
+var _templateObject;
+var PictureRecorder = /*#__PURE__*/function (_Recorder) {
+  function PictureRecorder() {
+    var _this;
+    _classCallCheck(this, PictureRecorder);
+    _this = _callSuper(this, PictureRecorder);
+    _this.defaultStrings = _objectSpread2(_objectSpread2({}, _this.defaultStrings), EN.pictureRecorder); // no need for a deep clone because EN.pictureRecorder is a flat object
+    _this.preset = buildPacked.exports.AcquisitionPreset.DOC_IMAGE;
+    _this.resultEvent = {
+      name: "picture",
+      mediaPropertyName: "picture",
+      includeMetadata: false
+    };
+    _this.mediaType = "picture";
+    _this.captureButtonPicto = x(_templateObject || (_templateObject = _taggedTemplateLiteral(["<uni-photo-camera-icon></uni-photo-camera-icon>"])));
+    _this.faceChecker = "disabled"; // default for picture-recorder : disable Face Checker
+    return _this;
+  }
+  _inherits(PictureRecorder, _Recorder);
+  return _createClass(PictureRecorder);
+}(Recorder);
+customElements.define("uni-picture-recorder", PictureRecorder);
+
+export { PictureRecorder };

package/dist/reference-capture.js

@@ -0,0 +1,296 @@
+import { _ as _inherits, a as _createClass, x, d as _taggedTemplateLiteral, s, b as _classCallCheck, c as _callSuper, i, e as _objectSpread2 } from './lit-element-ac3d3a27.js';
+import './button.js';
+import './image-capture-directions.js';
+import './file-upload.js';
+import './picture-recorder.js';
+import { b as buildPacked } from './video-recorder-4b9e6a43.js';
+import { E as EN } from './en-e76ed5a0.js';
+import { c as referenceCaptureVars } from './variables-09a3e162.js';
+import './direction-card-f55e1936.js';
+
+var _templateObject$1;
+var UploadIcon = /*#__PURE__*/function (_LitElement) {
+  function UploadIcon() {
+    _classCallCheck(this, UploadIcon);
+    return _callSuper(this, UploadIcon, arguments);
+  }
+  _inherits(UploadIcon, _LitElement);
+  return _createClass(UploadIcon, [{
+    key: "render",
+    value: function render() {
+      return x(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n      <svg width=\"17\" height=\"13\" viewBox=\"0 0 17 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7.3125 8.9375H8.9375V4.0625H11.375L8.125 0L4.875 4.0625H7.3125V8.9375Z\" fill=\"white\" />\n        <path\n          d=\"M14.625 11.375H1.625V5.6875H0V11.375C0 12.2712 0.728812 13 1.625 13H14.625C15.5212 13 16.25 12.2712 16.25 11.375V5.6875H14.625V11.375Z\"\n          fill=\"white\"\n        />\n      </svg>\n    "])));
+    }
+  }]);
+}(s);
+customElements.define("uni-upload-icon", UploadIcon);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var reducer = function reducer(state, action) {
+  switch (action.type) {
+    case "display-directions":
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        step: "directions"
+      });
+    case "display-file-upload":
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        step: "file-upload"
+      });
+    case "display-picture-record":
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        step: "picture-record"
+      });
+    case "display-video-record":
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        step: "video-record"
+      });
+    case "display-picture-editor":
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        step: "picture-editor"
+      });
+    case "set-picture":
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        picture: action.payload.picture,
+        step: "picture-editor",
+        prevStep: action.payload.source
+      });
+    case "display-video-replay":
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        step: "video-replay"
+      });
+    case "set-video":
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        step: "video-replay",
+        video: action.payload.video,
+        prevStep: "video-record"
+      });
+  }
+};
+var referenceCaptureStrings = EN.referenceCapture;
+var ReferenceCapture = /*#__PURE__*/function (_LitElement) {
+  function ReferenceCapture() {
+    var _this;
+    _classCallCheck(this, ReferenceCapture);
+    _this = _callSuper(this, ReferenceCapture);
+    _this.state = {
+      step: "directions"
+    };
+    _this.strings = {};
+    _this.recorderOptions = {};
+    _this.hideCaptureBtn = false;
+    return _this;
+  }
+  _inherits(ReferenceCapture, _LitElement);
+  return _createClass(ReferenceCapture, [{
+    key: "handleFileSelection",
+    value: function handleFileSelection(e) {
+      this.dispatch({
+        type: "set-picture",
+        payload: {
+          picture: e.detail.file,
+          source: "file-upload"
+        }
+      });
+    }
+  }, {
+    key: "handlePictureCapture",
+    value: function handlePictureCapture(e) {
+      this.dispatch({
+        type: "set-picture",
+        payload: {
+          picture: e.detail.picture,
+          source: "picture-record"
+        }
+      });
+    }
+  }, {
+    key: "dispatch",
+    value: function dispatch(action) {
+      this.state = _objectSpread2({}, reducer(this.state, action));
+    }
+  }, {
+    key: "displayUploadStep",
+    value: function displayUploadStep() {
+      this.dispatch({
+        type: "display-file-upload"
+      });
+    }
+  }, {
+    key: "displayPictureRecordStep",
+    value: function displayPictureRecordStep() {
+      this.dispatch({
+        type: "display-picture-record"
+      });
+    }
+  }, {
+    key: "displayVideoRecordStep",
+    value: function displayVideoRecordStep() {
+      this.dispatch({
+        type: "display-video-record"
+      });
+    }
+  }, {
+    key: "displayDirectionsStep",
+    value: function displayDirectionsStep() {
+      this.dispatch({
+        type: "display-directions"
+      });
+    }
+  }, {
+    key: "retryCapture",
+    value: function retryCapture() {
+      var _this$state$prevStep;
+      this.dispatch({
+        type: "display-".concat((_this$state$prevStep = this.state.prevStep) !== null && _this$state$prevStep !== void 0 ? _this$state$prevStep : "directions")
+      });
+    }
+  }, {
+    key: "handlePicture",
+    value: function handlePicture(e) {
+      this.state.picture = e.detail.picture;
+      this.dispatchEvent(new CustomEvent("reference", {
+        detail: {
+          media: e.detail.picture
+        }
+      }));
+    }
+  }, {
+    key: "handleVideo",
+    value: function handleVideo() {
+      this.dispatchEvent(new CustomEvent("reference", {
+        detail: {
+          media: this.state.video
+        }
+      }));
+    }
+  }, {
+    key: "handleVideoRecord",
+    value: function handleVideoRecord(e) {
+      this.dispatch({
+        type: "set-video",
+        payload: {
+          video: e.detail.media
+        }
+      });
+    }
+  }, {
+    key: "handleVideoRecoderReady",
+    value: function handleVideoRecoderReady(e) {
+      var _this$shadowRoot;
+      var videoRecorderElmt = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.getElementById("uni-video-recorder");
+      this.dispatchEvent(new CustomEvent("recorderReady", {
+        detail: {
+          recorderElmt: videoRecorderElmt,
+          mediaType: e.detail.mediaType,
+          contentKind: "reference",
+          acquisitionTime: e.detail.acquisitionTime
+        }
+      }));
+    }
+  }, {
+    key: "handlePictureRecoderReady",
+    value: function handlePictureRecoderReady(e) {
+      var _this$shadowRoot2;
+      var pictureRecorderElmt = (_this$shadowRoot2 = this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : _this$shadowRoot2.getElementById("uni-picture-recorder");
+      this.dispatchEvent(new CustomEvent("recorderReady", {
+        detail: {
+          recorderElmt: pictureRecorderElmt,
+          mediaType: e.detail.mediaType,
+          contentKind: "reference",
+          acquisitionTime: e.detail.acquisitionTime
+        }
+      }));
+    }
+  }, {
+    key: "handleRecordCompleted",
+    value: function handleRecordCompleted(e) {
+      this.dispatchEvent(new CustomEvent("recordCompleted", {
+        detail: e.detail
+      }));
+    }
+  }, {
+    key: "handleRecordStarting",
+    value: function handleRecordStarting(e) {
+      this.dispatchEvent(new CustomEvent("recordStarting"));
+    }
+  }, {
+    key: "handleRecordCapturing",
+    value: function handleRecordCapturing(e) {
+      this.dispatchEvent(new CustomEvent("recordCapturing"));
+    }
+  }, {
+    key: "handleRecordInterrupted",
+    value: function handleRecordInterrupted(e) {
+      this.dispatchEvent(new CustomEvent("recordInterrupted"));
+    }
+  }, {
+    key: "renderDirections",
+    value: function renderDirections() {
+      var _this$strings$title, _this$strings$directi, _this$strings$directi2, _this$strings$uploadB, _this$strings$picture, _this$strings$recordV;
+      return x(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      <div class=\"box\">\n        <h1 class=\"title\">", "</h1>\n        <span class=\"subtitle\"\n          >", "</span\n        >\n\n        <div class=\"directions v-space\">\n          <slot name=\"directions\">\n            <uni-image-capture-directions\n              strings=\"", "\"\n            ></uni-image-capture-directions>\n          </slot>\n        </div>\n\n        <div class=\"h-box v-space\">\n          <div class=\"btn-items\">\n            <slot name=\"action-button\"></slot>\n          </div>\n\n          <div class=\"btn-items\">\n            <uni-button @click=\"", "\">\n              <div slot=\"icon\"><uni-upload-icon></uni-upload-icon></div>\n              ", "\n            </uni-button>\n          </div>\n\n          <div class=\"btn-items\">\n            <uni-button @click=\"", "\">\n              <div slot=\"icon\">\n                <uni-photo-camera-icon></uni-photo-camera-icon>\n              </div>\n              ", "\n            </uni-button>\n          </div>\n\n          <div class=\"btn-items\">\n            <uni-button @click=\"", "\">\n              <div slot=\"icon\">\n                <uni-camera-video-outlined-icon></uni-camera-video-outlined-icon>\n              </div>\n              ", "\n            </uni-button>\n          </div>\n        </div>\n      </div>\n    "])), (_this$strings$title = this.strings.title) !== null && _this$strings$title !== void 0 ? _this$strings$title : referenceCaptureStrings.title, (_this$strings$directi = this.strings.directionSubtitle) !== null && _this$strings$directi !== void 0 ? _this$strings$directi : referenceCaptureStrings.directionSubtitle, JSON.stringify((_this$strings$directi2 = this.strings.directions) !== null && _this$strings$directi2 !== void 0 ? _this$strings$directi2 : referenceCaptureStrings.directions), this.displayUploadStep, (_this$strings$uploadB = this.strings.uploadBtn) !== null && _this$strings$uploadB !== void 0 ? _this$strings$uploadB : referenceCaptureStrings.uploadBtn, this.displayPictureRecordStep, (_this$strings$picture = this.strings.pictureBtn) !== null && _this$strings$picture !== void 0 ? _this$strings$picture : referenceCaptureStrings.pictureBtn, this.displayVideoRecordStep, (_this$strings$recordV = this.strings.recordVidBtn) !== null && _this$strings$recordV !== void 0 ? _this$strings$recordV : referenceCaptureStrings.recordVidBtn);
+    }
+  }, {
+    key: "renderFileUpload",
+    value: function renderFileUpload() {
+      var _this$strings$fileUpl, _this$strings$back;
+      return x(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      <div class=\"box\">\n        <div>\n          <uni-file-upload\n            @change=\"", "\"\n            strings=\"", "\"\n          ></uni-file-upload>\n        </div>\n\n        <div class=\"v-space\"></div>\n\n        <uni-button variant=\"outlined\" @click=\"", "\">\n          <div slot=\"icon\">\n            <uni-back-arrow-icon></uni-back-arrow-icon>\n          </div>\n          ", "\n        </uni-button>\n      </div>\n    "])), this.handleFileSelection, JSON.stringify((_this$strings$fileUpl = this.strings.fileUpload) !== null && _this$strings$fileUpl !== void 0 ? _this$strings$fileUpl : referenceCaptureStrings.fileUpload), this.displayDirectionsStep, (_this$strings$back = this.strings.back) !== null && _this$strings$back !== void 0 ? _this$strings$back : referenceCaptureStrings.back);
+    }
+  }, {
+    key: "renderPictureEditor",
+    value: function renderPictureEditor() {
+      var _this$strings$editorT, _this$state$picture, _this$strings$editor, _this$strings$retryPi;
+      return x(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      <div class=\"box\">\n        <h1 class=\"title\" style=\"text-align: center\">\n          ", "\n        </h1>\n        <div class=\"h-box\" style=\"margin-top: 40px\">\n          <uni-picture-editor\n            img=\"", "\"\n            @picture=\"", "\"\n            strings=\"", "\"\n          >\n            <uni-button slot=\"cancel\" variant=\"outlined\" @click=\"", "\">\n              ", "\n            </uni-button>\n          </uni-picture-editor>\n        </div>\n      </div>\n    "])), (_this$strings$editorT = this.strings.editorTitle) !== null && _this$strings$editorT !== void 0 ? _this$strings$editorT : referenceCaptureStrings.editorTitle, URL.createObjectURL((_this$state$picture = this.state.picture) !== null && _this$state$picture !== void 0 ? _this$state$picture : new Blob()), this.handlePicture, JSON.stringify((_this$strings$editor = this.strings.editor) !== null && _this$strings$editor !== void 0 ? _this$strings$editor : referenceCaptureStrings.editor), this.retryCapture, (_this$strings$retryPi = this.strings.retryPictureCaptureBtn) !== null && _this$strings$retryPi !== void 0 ? _this$strings$retryPi : referenceCaptureStrings.retryPictureCaptureBtn);
+    }
+  }, {
+    key: "renderPictureRecord",
+    value: function renderPictureRecord() {
+      var _this$strings$title2, _this$strings$picture2, _this$strings$picture3, _this$strings$back2;
+      return x(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      <div class=\"box\">\n        <h1 class=\"title\">", "</h1>\n        <span class=\"subtitle\">\n          ", "\n        </span>\n\n        <div class=\"recorder v-space\">\n          <uni-picture-recorder\n            id=\"uni-picture-recorder\"\n            @picture=\"", "\"\n            @recorderReady=\"", "\"\n            @recordCompleted=\"", "\"\n            @recordStarting=\"", "\"\n            @recordCapturing=\"", "\"\n            @recordInterrupted=\"", "\"\n            strings=\"", "\"\n            log-level=\"", "\"\n            ?hide-capture-btn=", "\n          >\n            <div slot=\"left\">\n              <uni-button variant=\"outlined\" @click=\"", "\">\n                <uni-back-arrow-icon slot=\"icon\"></uni-back-arrow-icon>\n                ", "\n              </uni-button>\n            </div>\n          </uni-picture-recorder>\n        </div>\n      </div>\n    "])), (_this$strings$title2 = this.strings.title) !== null && _this$strings$title2 !== void 0 ? _this$strings$title2 : referenceCaptureStrings.title, (_this$strings$picture2 = this.strings.pictureRecordSubtitle) !== null && _this$strings$picture2 !== void 0 ? _this$strings$picture2 : referenceCaptureStrings.pictureRecordSubtitle, this.handlePictureCapture, this.handlePictureRecoderReady, this.handleRecordCompleted, this.handleRecordStarting, this.handleRecordCapturing, this.handleRecordInterrupted, JSON.stringify((_this$strings$picture3 = this.strings.pictureRecorder) !== null && _this$strings$picture3 !== void 0 ? _this$strings$picture3 : referenceCaptureStrings.pictureRecorder), this.recorderOptions.logLevel, this.hideCaptureBtn, this.displayDirectionsStep, (_this$strings$back2 = this.strings.back) !== null && _this$strings$back2 !== void 0 ? _this$strings$back2 : referenceCaptureStrings.back);
+    }
+  }, {
+    key: "renderVideoRecord",
+    value: function renderVideoRecord() {
+      var _this$strings$title3, _this$strings$videoRe, _this$strings$videoRe2, _this$strings$back3;
+      return x(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      <div class=\"box\">\n        <h1 class=\"title\">", "</h1>\n        <span class=\"subtitle\"\n          >", "</span\n        >\n\n        <div class=\"recorder v-space\">\n          <uni-video-recorder\n            id=\"uni-video-recorder\"\n            strings=\"", "\"\n            preset=\"", "\"\n            log-level=\"", "\"\n            face-checker=\"disabled\"\n            @record=\"", "\"\n            @recorderReady=\"", "\"\n            @recordCompleted=\"", "\"\n            @recordStarting=\"", "\"\n            @recordCapturing=\"", "\"\n            @recordInterrupted=\"", "\"\n            ?hide-capture-btn=", "\n          >\n            <div slot=\"left\">\n              <uni-button variant=\"outlined\" @click=\"", "\">\n                <uni-back-arrow-icon slot=\"icon\"></uni-back-arrow-icon>\n                ", "\n              </uni-button>\n            </div>\n          </uni-video-recorder>\n        </div>\n      </div>\n    "])), (_this$strings$title3 = this.strings.title) !== null && _this$strings$title3 !== void 0 ? _this$strings$title3 : referenceCaptureStrings.title, (_this$strings$videoRe = this.strings.videoRecordSubtitle) !== null && _this$strings$videoRe !== void 0 ? _this$strings$videoRe : referenceCaptureStrings.videoRecordSubtitle, JSON.stringify((_this$strings$videoRe2 = this.strings.videoRecorder) !== null && _this$strings$videoRe2 !== void 0 ? _this$strings$videoRe2 : referenceCaptureStrings.videoRecorder), buildPacked.exports.AcquisitionPreset.DOC_VIDEO, this.recorderOptions.logLevel, this.handleVideoRecord, this.handleVideoRecoderReady, this.handleRecordCompleted, this.handleRecordStarting, this.handleRecordCapturing, this.handleRecordInterrupted, this.hideCaptureBtn, this.displayDirectionsStep, (_this$strings$back3 = this.strings.back) !== null && _this$strings$back3 !== void 0 ? _this$strings$back3 : referenceCaptureStrings.back);
+    }
+  }, {
+    key: "renderVideoReplay",
+    value: function renderVideoReplay() {
+      var _this$strings$editorT2, _this$state$video, _this$strings$retryVi, _this$strings$replayV;
+      return x(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      <div class=\"box\">\n        <h1 class=\"title\" style=\"text-align: center\">\n          ", "\n        </h1>\n\n        <div class=\"h-box\" style=\"width: 65%; margin-top: 30px\">\n          <video\n            src=\"", "\"\n            class=\"replay-video\"\n            controls\n            playsinline\n          ></video>\n        </div>\n\n        <div class=\"h-box v-space\">\n          <div class=\"btn-items\">\n            <uni-button variant=\"outlined\" @click=\"", "\">\n              ", "\n            </uni-button>\n          </div>\n\n          <div class=\"btn-items\">\n            <uni-button @click=\"", "\">\n              ", "\n            </uni-button>\n          </div>\n        </div>\n      </div>\n    "])), (_this$strings$editorT2 = this.strings.editorTitle) !== null && _this$strings$editorT2 !== void 0 ? _this$strings$editorT2 : referenceCaptureStrings.editorTitle, URL.createObjectURL((_this$state$video = this.state.video) !== null && _this$state$video !== void 0 ? _this$state$video : new Blob()), this.retryCapture, (_this$strings$retryVi = this.strings.retryVideoCaptureBtn) !== null && _this$strings$retryVi !== void 0 ? _this$strings$retryVi : referenceCaptureStrings.retryVideoCaptureBtn, this.handleVideo, (_this$strings$replayV = this.strings.replayValidation) !== null && _this$strings$replayV !== void 0 ? _this$strings$replayV : referenceCaptureStrings.replayValidation);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var stepToDisplay = {
+        directions: this.renderDirections(),
+        "file-upload": this.renderFileUpload(),
+        "picture-editor": this.renderPictureEditor(),
+        "picture-record": this.renderPictureRecord(),
+        "video-record": this.renderVideoRecord(),
+        "video-replay": this.renderVideoReplay()
+      };
+      return stepToDisplay[this.state.step];
+    }
+  }]);
+}(s);
+ReferenceCapture.properties = {
+  recorderOptions: {
+    attribute: "recorder-options",
+    type: Object
+  },
+  strings: {
+    attribute: "strings",
+    type: Object
+  },
+  hideCaptureBtn: {
+    attribute: "hide-capture-btn",
+    type: Boolean
+  },
+  state: {
+    state: true
+  }
+};
+ReferenceCapture.styles = i(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    .box {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      max-width: 100%;\n    }\n\n    .directions {\n      width: 100%;\n    }\n\n    .h-box {\n      display: block;\n      text-align: center;\n      width: 100%;\n      vertical-align: middle;\n    }\n\n    .subtitle {\n      line-height: ", ";\n      font: ", ";\n      color: ", ";\n      text-align: center;\n    }\n\n    .title {\n      line-height: ", ";\n      text-align: center;\n      font: ", ";\n      color: ", ";\n    }\n\n    .recorder {\n      width: ", ";\n    }\n\n    .btn-items {\n      display: inline-block;\n      margin: 7px;\n    }\n\n    .v-space {\n      margin-top: 30px;\n    }\n\n    .replay-video {\n      width: 100%;\n      border-radius: 10px;\n    }\n\n    @media screen and (max-width: 576px) {\n      .recorder {\n        width: ", ";\n      }\n\n      .btn-items {\n        margin: 7px 0;\n        width: 100%;\n      }\n\n      .v-space {\n        margin-top: 15px;\n      }\n\n      .replay-video {\n        height: 350px;\n      }\n    }\n  "])), referenceCaptureVars.subTitleLineHeight, referenceCaptureVars.subTitleFont, referenceCaptureVars.subTitleColor, referenceCaptureVars.titleLineHeight, referenceCaptureVars.titleFont, referenceCaptureVars.titleColor, referenceCaptureVars.videoRecorderWidth, referenceCaptureVars.videoRecorderSmWidth);
+customElements.define("uni-reference-capture", ReferenceCapture);
+
+export { ReferenceCapture, referenceCaptureStrings };