@unissey-web/web-components 5.4.0 → 5.5.0-rc.1

package/dist/button.js

@@ -1,5 +1,5 @@
 import { i, d as _taggedTemplateLiteral, _ as _inherits, a as _createClass, x, s, b as _classCallCheck, c as _callSuper } from './lit-element-c42ac26e.js';
-import { e as buttonsVars, d as defaultVars } from './variables-0db5ef1b.js';
+import { e as buttonsVars, d as defaultVars } from './variables-513bd26a.js';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var Button = /*#__PURE__*/function (_LitElement) {
@@ -38,7 +38,7 @@ Button.properties = {
     type: Boolean
   }
 };
-Button.styles = i(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    @media screen and (max-width: 576px) {\n      .btn {\n        width: ", ";\n      }\n    }\n\n    :host {\n    }\n\n    .btn {\n      display: inline-block;\n      align-items: center;\n      vertical-align: top;\n      padding: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n      font-size: ", ";\n      text-transform: ", ";\n    }\n\n    .btn:hover {\n      background-color: ", ";\n    }\n\n    .btn:disabled {\n      cursor: default;\n      background-color: ", ";\n      border-color: ", ";\n    }\n\n    .btn-outlined {\n      color: ", ";\n      background-color: ", ";\n      border: ", ";\n    }\n\n    .btn-outlined:hover {\n      background-color: ", ";\n    }\n\n    .box {\n      display: block;\n      text-align: center;\n    }\n\n    .label {\n      margin: 0 10px;\n    }\n\n    .item-center {\n      display: inline-block;\n      vertical-align: middle;\n    }\n  "])), buttonsVars.smWidth, buttonsVars.padding, buttonsVars.border, defaultVars.colors.primary, buttonsVars.borderRadius, defaultVars.colors.primary, defaultVars.colors.white, buttonsVars.fontSize, buttonsVars.textTransform, defaultVars.colors.primaryLighter, buttonsVars.btnDisabledBgColor, buttonsVars.btnDisabledBgColor, defaultVars.colors.primary, defaultVars.colors.white, buttonsVars.outlinedBorders, buttonsVars.btnDisabledBgColor);
+Button.styles = i(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    @media screen and (max-width: 576px) {\n      .btn {\n        width: ", ";\n      }\n    }\n\n    :host {\n    }\n\n    .btn {\n      display: inline-block;\n      align-items: center;\n      vertical-align: top;\n      padding: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n      font-size: ", ";\n      text-transform: ", ";\n    }\n\n    .btn:hover {\n      background-color: ", ";\n    }\n\n    .btn:focus {\n      outline: ", ";\n    }\n\n    .btn:disabled {\n      cursor: default;\n      background-color: ", ";\n      border-color: ", ";\n    }\n\n    .btn-outlined {\n      color: ", ";\n      background-color: ", ";\n      border: ", ";\n    }\n\n    .btn-outlined:hover {\n      background-color: ", ";\n    }\n\n    .box {\n      display: block;\n      text-align: center;\n    }\n\n    .label {\n      margin: 0 10px;\n    }\n\n    .item-center {\n      display: inline-block;\n      vertical-align: middle;\n    }\n  "])), buttonsVars.smWidth, buttonsVars.padding, buttonsVars.border, defaultVars.colors.primary, buttonsVars.borderRadius, defaultVars.colors.primary, defaultVars.colors.white, buttonsVars.fontSize, buttonsVars.textTransform, defaultVars.colors.primaryLighter, buttonsVars.focusOutline, buttonsVars.btnDisabledBgColor, buttonsVars.btnDisabledBgColor, defaultVars.colors.primary, defaultVars.colors.white, buttonsVars.outlinedBorders, buttonsVars.btnDisabledBgColor);
 customElements.define("uni-button", Button);
 
 export { Button };

package/dist/{direction-card-fd8d8d8b.js → direction-card-88c5d34f.js}

@@ -1,5 +1,5 @@
 import { i, d as _taggedTemplateLiteral, _ as _inherits, a as _createClass, x, s, b as _classCallCheck, c as _callSuper } from './lit-element-c42ac26e.js';
-import { d as defaultVars, c as directionCardsVars } from './variables-0db5ef1b.js';
+import { d as defaultVars, c as directionCardsVars } from './variables-513bd26a.js';
 
 var _templateObject$1;
 var directionsStyle = i(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  .layout {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .item {\n    margin-top: 15px;\n    width: 100%;\n  }\n"])));

package/dist/{en-57f1198e.js → en-27ff3a75.js}

@@ -49,10 +49,18 @@ var videoRecorder = {
   },
   rotationWhileCapturingErrorMessage: "Please don't rotate the device during acquisition.",
   activeChallengeMessages: {
-    rotateLeft: 'Turn head to the <strong font-size: 18px">left</strong>',
-    rotateRight: 'Turn head to the <strong font-size: 18px">right</strong>',
-    rotateUp: 'Turn head <strong font-size: 18px">up</strong>',
-    rotateDown: 'Turn head <strong font-size: 18px">down</strong>'
+    rotateLeft: 'Turn head to the <strong style="font-size: 18px">left</strong>',
+    rotateRight: 'Turn head to the <strong style="font-size: 18px">right</strong>',
+    rotateUp: 'Turn head <strong style="font-size: 18px">up</strong>',
+    rotateDown: 'Turn head <strong style="font-size: 18px">down</strong>'
+  },
+  accessibility: {
+    flipCamera: "Switch camera",
+    turnLeft: "Turn left",
+    turnRight: "Turn right",
+    turnUp: "Turn up",
+    turnDown: "Turn down",
+    videoFeed: "Camera feed for identity verification"
   }
 };
 var pictureRecorder = {

package/dist/file-upload.js

@@ -1,7 +1,7 @@
-import { i, d as _taggedTemplateLiteral, _ as _inherits, a as _createClass, x, s, b as _classCallCheck, c as _callSuper, e as _objectSpread2, f as _asyncToGenerator, g as _regenerator } from './lit-element-c42ac26e.js';
-import { E as EN } from './en-57f1198e.js';
-import { f as fileUploadVars } from './variables-0db5ef1b.js';
-import { c as commonjsGlobal } from './_commonjsHelpers-02146103.js';
+import { i, d as _taggedTemplateLiteral, _ as _inherits, a as _createClass, h as _superPropGet, x, s, b as _classCallCheck, c as _callSuper, e as _objectSpread2, f as _asyncToGenerator, g as _regenerator } from './lit-element-c42ac26e.js';
+import { E as EN } from './en-27ff3a75.js';
+import { f as fileUploadVars } from './variables-513bd26a.js';
+import { c as commonjsGlobal, K as KEY_ENTER, a as KEY_SPACE } from './utils-474188c7.js';
 
 var heic2any$1 = {exports: {}};
 
@@ -296,11 +296,23 @@ var FileUpload = /*#__PURE__*/function (_LitElement) {
     _this.strings = _objectSpread2({}, defaultStrings);
     _this.error = "";
     _this.inited = false;
+    _this.handleKeyboardSelection = function (e) {
+      if (e.code === KEY_ENTER || e.code === KEY_SPACE) {
+        _this.handleClick();
+      }
+    };
     _this.handleFileSelection = _this.handleFileSelection.bind(_this);
     return _this;
   }
   _inherits(FileUpload, _LitElement);
   return _createClass(FileUpload, [{
+    key: "connectedCallback",
+    value: function connectedCallback() {
+      _superPropGet(FileUpload, "connectedCallback", this, 3)([]);
+      this.setAttribute("tabindex", "0");
+      this.addEventListener("keydown", this.handleKeyboardSelection);
+    }
+  }, {
     key: "validateFile",
     value: function validateFile(type, size) {
       var error = "";
@@ -408,6 +420,12 @@ var FileUpload = /*#__PURE__*/function (_LitElement) {
     value: function updated() {
       if (!this.inited) this.init();
     }
+  }, {
+    key: "disconnectedCallback",
+    value: function disconnectedCallback() {
+      _superPropGet(FileUpload, "disconnectedCallback", this, 3)([]);
+      this.removeEventListener("keydown", this.handleKeyboardSelection);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -435,7 +453,7 @@ FileUpload.properties = {
     state: true
   }
 };
-FileUpload.styles = i(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    #drop-zone {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: ", ";\n      text-align: center;\n\n      width: ", ";\n      height: ", ";\n      border: ", ";\n      background-color: ", ";\n\n      cursor: pointer;\n    }\n\n    .text {\n      color: ", ";\n      font-size: ", ";\n    }\n\n    .error {\n      display: inline-block;\n      margin-top: 40px;\n      color: ", ";\n      font-size: ", ";\n    }\n  "])), fileUploadVars.padding, fileUploadVars.width, fileUploadVars.height, fileUploadVars.border, fileUploadVars.backgroundColor, fileUploadVars.textColor, fileUploadVars.textFontSize, fileUploadVars.errorTextColor, fileUploadVars.errorTextFontSize);
+FileUpload.styles = i(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    #drop-zone {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: ", ";\n      text-align: center;\n\n      width: ", ";\n      height: ", ";\n      border: ", ";\n      background-color: ", ";\n\n      cursor: pointer;\n    }\n\n    :host(:focus) #drop-zone {\n      outline: ", ";\n    }\n\n    .text {\n      color: ", ";\n      font-size: ", ";\n    }\n\n    .error {\n      display: inline-block;\n      margin-top: 40px;\n      color: ", ";\n      font-size: ", ";\n    }\n  "])), fileUploadVars.padding, fileUploadVars.width, fileUploadVars.height, fileUploadVars.border, fileUploadVars.backgroundColor, fileUploadVars.focusOutline, fileUploadVars.textColor, fileUploadVars.textFontSize, fileUploadVars.errorTextColor, fileUploadVars.errorTextFontSize);
 customElements.define("uni-file-upload", FileUpload);
 
 export { FileUpload };

package/dist/full-capture.js

@@ -2,12 +2,12 @@ import { _ as _inherits, a as _createClass, x, d as _taggedTemplateLiteral, s, b
 import { selfieCaptureStrings } from './selfie-capture.js';
 import { referenceCaptureStrings } from './reference-capture.js';
 import './button.js';
-import './en-57f1198e.js';
-import './video-recorder-04ecd01a.js';
-import './_commonjsHelpers-02146103.js';
-import './variables-0db5ef1b.js';
+import './en-27ff3a75.js';
+import './video-recorder-31ce7f04.js';
+import './utils-474188c7.js';
+import './variables-513bd26a.js';
 import './video-record-directions.js';
-import './direction-card-fd8d8d8b.js';
+import './direction-card-88c5d34f.js';
 import './image-capture-directions.js';
 import './file-upload.js';
 import './picture-recorder.js';

package/dist/image-capture-directions.js

@@ -1,7 +1,7 @@
 import { _ as _inherits, a as _createClass, x, d as _taggedTemplateLiteral, s, b as _classCallCheck, c as _callSuper, i, e as _objectSpread2 } from './lit-element-c42ac26e.js';
-import { d as directionsStyle } from './direction-card-fd8d8d8b.js';
-import { d as defaultVars } from './variables-0db5ef1b.js';
-import { E as EN } from './en-57f1198e.js';
+import { d as directionsStyle } from './direction-card-88c5d34f.js';
+import { d as defaultVars } from './variables-513bd26a.js';
+import { E as EN } from './en-27ff3a75.js';
 
 var _templateObject$3;
 var FaceCardPicto = /*#__PURE__*/function (_LitElement) {

package/dist/index.d.ts

@@ -125,6 +125,14 @@ declare const EN: {
             rotateUp: string;
             rotateDown: string;
         };
+        accessibility: {
+            flipCamera: string;
+            turnLeft: string;
+            turnRight: string;
+            turnUp: string;
+            turnDown: string;
+            videoFeed: string;
+        };
     };
     pictureRecorder: {
         capture: string;
@@ -215,6 +223,14 @@ declare const EN: {
                 rotateUp: string;
                 rotateDown: string;
             };
+            accessibility: {
+                flipCamera: string;
+                turnLeft: string;
+                turnRight: string;
+                turnUp: string;
+                turnDown: string;
+                videoFeed: string;
+            };
         };
     };
     referenceCapture: {
@@ -276,6 +292,14 @@ declare const EN: {
                 rotateUp: string;
                 rotateDown: string;
             };
+            accessibility: {
+                flipCamera: string;
+                turnLeft: string;
+                turnRight: string;
+                turnUp: string;
+                turnDown: string;
+                videoFeed: string;
+            };
         };
         pictureRecorder: {
             capture: string;
@@ -289,6 +313,25 @@ declare const EN: {
 };
 type I18n = typeof EN;
 
+type SdkNotification = {
+    message: string;
+    type: "info" | "error";
+};
+type NotificationCallback = (notification: SdkNotification) => void;
+declare class NotificationThrottler {
+    private nextNotification;
+    private isProcessing;
+    private readRate;
+    private readonly notificationCallback;
+    private readonly targetElement;
+    constructor(notificationCallback: NotificationCallback, readRate: number | undefined, targetElement: HTMLElement);
+    setReadRate(rate: number): void;
+    private execAndDelay;
+    private processCycleEnd;
+    getIsProcessing(): boolean;
+    sendNotification(notification: SdkNotification): void;
+}
+
 declare class Recorder extends LitElement {
     session: UnisseySession | null;
     sessionPromise: Promise<void> | null;
@@ -341,6 +384,14 @@ declare class Recorder extends LitElement {
             rotateUp: string;
             rotateDown: string;
         };
+        accessibility: {
+            flipCamera: string;
+            turnLeft: string;
+            turnRight: string;
+            turnUp: string;
+            turnDown: string;
+            videoFeed: string;
+        };
     };
     strings: Partial<typeof EN.videoRecorder>;
     captureButtonPicto: lit_html.TemplateResult<1>;
@@ -350,6 +401,7 @@ declare class Recorder extends LitElement {
     disconnected: boolean;
     initSessionInprogress: boolean;
     hints: HintType;
+    internalHints: HintType | undefined;
     error: string;
     sdkJsStatus: StatusEvent;
     willRetryCapture: boolean;
@@ -447,6 +499,7 @@ declare class Recorder extends LitElement {
             state: boolean;
         };
     };
+    notificationThrotler: NotificationThrottler;
     constructor();
     retryCapture(): Promise<void>;
     capture(): Promise<void>;
@@ -552,6 +605,8 @@ declare class FileUpload extends LitElement {
     error: string;
     inited: boolean;
     constructor();
+    connectedCallback(): void;
+    handleKeyboardSelection: (e: KeyboardEvent) => void;
     static properties: {
         supportedTypes: {
             attribute: string;
@@ -580,6 +635,7 @@ declare class FileUpload extends LitElement {
     handleClick(): void;
     init(): void;
     updated(): void;
+    disconnectedCallback(): void;
     static styles: lit.CSSResult;
     render(): lit_html.TemplateResult<1>;
 }
@@ -698,6 +754,14 @@ declare const selfieCaptureStrings: {
             rotateUp: string;
             rotateDown: string;
         };
+        accessibility: {
+            flipCamera: string;
+            turnLeft: string;
+            turnRight: string;
+            turnUp: string;
+            turnDown: string;
+            videoFeed: string;
+        };
     };
 };
 type RecorderOptions$1 = Partial<{
@@ -863,6 +927,14 @@ declare const referenceCaptureStrings: {
             rotateUp: string;
             rotateDown: string;
         };
+        accessibility: {
+            flipCamera: string;
+            turnLeft: string;
+            turnRight: string;
+            turnUp: string;
+            turnDown: string;
+            videoFeed: string;
+        };
     };
     pictureRecorder: {
         capture: string;
@@ -1017,6 +1089,14 @@ declare const fullCaptureStrings: {
                 rotateUp: string;
                 rotateDown: string;
             };
+            accessibility: {
+                flipCamera: string;
+                turnLeft: string;
+                turnRight: string;
+                turnUp: string;
+                turnDown: string;
+                videoFeed: string;
+            };
         };
         pictureRecorder: {
             capture: string;
@@ -1081,6 +1161,14 @@ declare const fullCaptureStrings: {
                 rotateUp: string;
                 rotateDown: string;
             };
+            accessibility: {
+                flipCamera: string;
+                turnLeft: string;
+                turnRight: string;
+                turnUp: string;
+                turnDown: string;
+                videoFeed: string;
+            };
         };
     };
 };

package/dist/index.js

@@ -1,6 +1,6 @@
 export { Button } from './button.js';
-import { R as Recorder } from './video-recorder-04ecd01a.js';
-export { A as Animation, C as CameraVideoOutlinedIcon, O as OverlayHints } from './video-recorder-04ecd01a.js';
+import { R as Recorder } from './video-recorder-31ce7f04.js';
+export { A as Animation, C as CameraVideoOutlinedIcon, O as OverlayHints } from './video-recorder-31ce7f04.js';
 export { VideoRecordDirections } from './video-record-directions.js';
 export { PictureRecorder } from './picture-recorder.js';
 export { PictureEditor } from './picture-editor.js';
@@ -11,10 +11,10 @@ export { RetryResult } from './retry-result.js';
 export { SelfieCapture } from './selfie-capture.js';
 export { ReferenceCapture } from './reference-capture.js';
 export { FullCapture } from './full-capture.js';
-export { D as DirectionCard } from './direction-card-fd8d8d8b.js';
-export { E as EN } from './en-57f1198e.js';
-import './variables-0db5ef1b.js';
-import './_commonjsHelpers-02146103.js';
+export { D as DirectionCard } from './direction-card-88c5d34f.js';
+export { E as EN } from './en-27ff3a75.js';
+import './variables-513bd26a.js';
+import './utils-474188c7.js';
 
 // @ts-ignore
 
@@ -60,10 +60,18 @@ var videoRecorder = {
   },
   rotationWhileCapturingErrorMessage: "Veuillez ne pas tourner l'appareil pendant l'acquisition.",
   activeChallengeMessages: {
-    rotateLeft: 'Tournez la tête à <strong font-size: 18px">gauche</strong>',
-    rotateRight: 'Tournez la tête à <strong font-size: 18px">droite</strong>',
-    rotateUp: 'Pivotez la tête en <strong font-size: 18px">haut</strong>',
-    rotateDown: 'Pivotez la tête en <strong font-size: 18px">bas</strong>'
+    rotateLeft: 'Tournez la tête à <strong style="font-size: 18px">gauche</strong>',
+    rotateRight: 'Tournez la tête à <strong style="font-size: 18px">droite</strong>',
+    rotateUp: 'Pivotez la tête en <strong style="font-size: 18px">haut</strong>',
+    rotateDown: 'Pivotez la tête en <strong style="font-size: 18px">bas</strong>'
+  },
+  accessibility: {
+    flipCamera: "Changer de caméra",
+    turnLeft: "Tourner à gauche",
+    turnRight: "Tourner à droite",
+    turnUp: "Tourner vers le haut",
+    turnDown: "Tourner vers le bas",
+    videoFeed: "Flux caméra pour la vérification d'identité"
   }
 };
 var pictureRecorder = {

package/dist/picture-editor.js

@@ -1,5 +1,5 @@
 import { _ as _inherits, a as _createClass, x, d as _taggedTemplateLiteral, s, b as _classCallCheck, c as _callSuper, i, e as _objectSpread2, f as _asyncToGenerator, g as _regenerator, h as _superPropGet } from './lit-element-c42ac26e.js';
-import { E as EN } from './en-57f1198e.js';
+import { E as EN } from './en-27ff3a75.js';
 
 var _templateObject$2;
 var RotateLeftIcon = /*#__PURE__*/function (_LitElement) {

package/dist/picture-recorder.js

@@ -1,8 +1,8 @@
 import { _ as _inherits, a as _createClass, x, d as _taggedTemplateLiteral, s, b as _classCallCheck, c as _callSuper, e as _objectSpread2 } from './lit-element-c42ac26e.js';
-import { R as Recorder, b as buildPacked } from './video-recorder-04ecd01a.js';
-import { E as EN } from './en-57f1198e.js';
-import './_commonjsHelpers-02146103.js';
-import './variables-0db5ef1b.js';
+import { R as Recorder, b as buildPacked } from './video-recorder-31ce7f04.js';
+import { E as EN } from './en-27ff3a75.js';
+import './utils-474188c7.js';
+import './variables-513bd26a.js';
 import './button.js';
 
 var _templateObject$1;

package/dist/reference-capture.js

@@ -3,11 +3,11 @@ import './button.js';
 import './image-capture-directions.js';
 import './file-upload.js';
 import './picture-recorder.js';
-import { b as buildPacked } from './video-recorder-04ecd01a.js';
-import { E as EN } from './en-57f1198e.js';
-import { a as referenceCaptureVars } from './variables-0db5ef1b.js';
-import './direction-card-fd8d8d8b.js';
-import './_commonjsHelpers-02146103.js';
+import { b as buildPacked } from './video-recorder-31ce7f04.js';
+import { E as EN } from './en-27ff3a75.js';
+import { a as referenceCaptureVars } from './variables-513bd26a.js';
+import './direction-card-88c5d34f.js';
+import './utils-474188c7.js';
 
 var _templateObject$1;
 var UploadIcon = /*#__PURE__*/function (_LitElement) {

package/dist/retry-result.js

@@ -1,7 +1,7 @@
 import { _ as _inherits, a as _createClass, x, d as _taggedTemplateLiteral, s, b as _classCallCheck, c as _callSuper, i } from './lit-element-c42ac26e.js';
 import './button.js';
-import { d as defaultVars, r as retryResultVars } from './variables-0db5ef1b.js';
-import { E as EN } from './en-57f1198e.js';
+import { d as defaultVars, r as retryResultVars } from './variables-513bd26a.js';
+import { E as EN } from './en-27ff3a75.js';
 
 var _templateObject$3;
 var GenericHintIcon = /*#__PURE__*/function (_LitElement) {

package/dist/selfie-capture.js

@@ -1,11 +1,11 @@
 import { _ as _inherits, a as _createClass, x, d as _taggedTemplateLiteral, s, b as _classCallCheck, c as _callSuper, i } from './lit-element-c42ac26e.js';
-import { E as EN } from './en-57f1198e.js';
-import { b as buildPacked } from './video-recorder-04ecd01a.js';
+import { E as EN } from './en-27ff3a75.js';
+import { b as buildPacked } from './video-recorder-31ce7f04.js';
 import './video-record-directions.js';
 import './button.js';
-import { s as selfieCaptureVars } from './variables-0db5ef1b.js';
-import './_commonjsHelpers-02146103.js';
-import './direction-card-fd8d8d8b.js';
+import { s as selfieCaptureVars } from './variables-513bd26a.js';
+import './utils-474188c7.js';
+import './direction-card-88c5d34f.js';
 
 var _templateObject$1;
 var BackArrowIcon = /*#__PURE__*/function (_LitElement) {

package/dist/utils-474188c7.js

@@ -0,0 +1,21 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function commonjsRequire (path) {
+	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
+}
+
+var KEY_ENTER = "Enter";
+var KEY_SPACE = "Space";
+
+//add new isMobileDevice() function from sdk-js;
+function isMobileDevice() {
+  var navigator = window.navigator;
+  var check = false;
+  (function (a) {
+    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true;
+    // @ts-ignore  ('window.opera' is not officially defined. Actually only on Opera.)
+  })(navigator.userAgent || navigator.vendor || window.opera);
+  return check;
+}
+
+export { KEY_ENTER as K, KEY_SPACE as a, commonjsRequire as b, commonjsGlobal as c, isMobileDevice as i };

package/dist/{variables-0db5ef1b.js → variables-513bd26a.js}

@@ -1,6 +1,6 @@
 import { i, d as _taggedTemplateLiteral } from './lit-element-c42ac26e.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75, _templateObject76, _templateObject77;
 var recorderVars = {
   borderRadius: i(_templateObject || (_templateObject = _taggedTemplateLiteral(["var(--uni-recorder-border-radius, 10px)"]))),
   buttonsMargin: i(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["var(--uni-recorder-buttons-margin, 30px 0)"]))),
@@ -59,42 +59,44 @@ var fileUploadVars = {
   width: i(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["var(--uni-file-upload-width, 80%)"]))),
   height: i(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["var(--uni-file-upload-height, 80%)"]))),
   border: i(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["var(--uni-file-upload-border, dashed 2px #eee)"]))),
-  backgroundColor: i(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["var(--uni-file-upload-bg-color, #fafafa)"]))),
-  textColor: i(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["var(--uni-file-upload-txt-color, #ccc)"]))),
-  textFontSize: i(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["var(--uni-file-upload-txt-font-size, 20px)"]))),
-  errorTextColor: i(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["var(--uni-file-upload-err-txt-color, #333)"]))),
-  errorTextFontSize: i(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["var(--uni-file-upload-err-txt-font-size, 16px)"])))
+  focusOutline: i(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["var(--uni-file-upload-focus-outline, 2px solid #3b54f0)"]))),
+  backgroundColor: i(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["var(--uni-file-upload-bg-color, #fafafa)"]))),
+  textColor: i(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["var(--uni-file-upload-txt-color, #ccc)"]))),
+  textFontSize: i(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["var(--uni-file-upload-txt-font-size, 20px)"]))),
+  errorTextColor: i(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["var(--uni-file-upload-err-txt-color, #333)"]))),
+  errorTextFontSize: i(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["var(--uni-file-upload-err-txt-font-size, 16px)"])))
 };
 var buttonsVars = {
-  padding: i(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["var(--uni-btn-padding, 8px 15px)"]))),
-  border: i(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["var(--uni-btn-border, solid 1px)"]))),
-  borderRadius: i(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["var(--uni-btn-border-radius, 7px)"]))),
-  fontSize: i(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["var(--uni-btn-font-size, 14px)"]))),
-  textTransform: i(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["var(--uni-btn-text-transform, normal)"]))),
-  outlinedBorders: i(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["var(--uni-btn-border-outlined, solid 1px)"]))),
-  btnLabelMargin: i(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["var(--uni-btn-label-margin, 10px 0px)"]))),
-  btnDisabledBgColor: i(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["var(--uni-btn-disabled-bg-color, #eee)"]))),
-  smWidth: i(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["var(--uni-btn-sm-width, 250px)"])))
+  padding: i(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["var(--uni-btn-padding, 8px 15px)"]))),
+  border: i(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["var(--uni-btn-border, solid 1px)"]))),
+  borderRadius: i(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["var(--uni-btn-border-radius, 7px)"]))),
+  fontSize: i(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["var(--uni-btn-font-size, 14px)"]))),
+  focusOutline: i(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["var(--uni-btn-focus-outline, 3px solid #3b54f0)"]))),
+  textTransform: i(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["var(--uni-btn-text-transform, normal)"]))),
+  outlinedBorders: i(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["var(--uni-btn-border-outlined, solid 1px)"]))),
+  btnLabelMargin: i(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["var(--uni-btn-label-margin, 10px 0px)"]))),
+  btnDisabledBgColor: i(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["var(--uni-btn-disabled-bg-color, #eee)"]))),
+  smWidth: i(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["var(--uni-btn-sm-width, 250px)"])))
 };
 var directionCardsVars = {
-  padding: i(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["var(--uni-card-padding, 8px 4%)"]))),
-  margin: i(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["var(--uni-card-margin, 0px)"]))),
-  width: i(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["var(--uni-card-width, 92%)"]))),
-  radius: i(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["var(--uni-card-border-radius, 20px)"]))),
-  fontSize: i(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["var(--uni-card-font-size, 16px)"]))),
-  fontWeight: i(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["var(--uni-card-font-weight, normal)"]))),
-  textMarginLeft: i(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["var(--uni-card-text-margin-left, 25px)"]))),
-  iconHeight: i(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["var(--uni-card-icon-height, 55px)"]))),
-  iconWidth: i(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["var(--uni-card-icon-width, auto)"]))),
-  backgroundColor: i(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["var(--uni-card-bg-color, #f2f5f8)"])))
+  padding: i(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["var(--uni-card-padding, 8px 4%)"]))),
+  margin: i(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["var(--uni-card-margin, 0px)"]))),
+  width: i(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["var(--uni-card-width, 92%)"]))),
+  radius: i(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["var(--uni-card-border-radius, 20px)"]))),
+  fontSize: i(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["var(--uni-card-font-size, 16px)"]))),
+  fontWeight: i(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["var(--uni-card-font-weight, normal)"]))),
+  textMarginLeft: i(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["var(--uni-card-text-margin-left, 25px)"]))),
+  iconHeight: i(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["var(--uni-card-icon-height, 55px)"]))),
+  iconWidth: i(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["var(--uni-card-icon-width, auto)"]))),
+  backgroundColor: i(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["var(--uni-card-bg-color, #f2f5f8)"])))
 };
 var retryResultVars = {
-  retriesColor: i(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["var(--uni-retry-result-retries-color, grey)"]))),
-  fontSizeMd: i(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["var(--uni-retry-result-font-size-md, 22px)"]))),
-  lineHeightMd: i(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["var(--uni-retry-result-line-height-md, 24px)"]))),
-  fontSizeSm: i(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["var(--uni-retry-result-font-size-sm, 16px)"]))),
-  lineHeightSm: i(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["var(--uni-retry-result-line-height-sm, 18px)"]))),
-  iconWidth: i(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["var(--uni-retry-result-icon-width, 150px)"])))
+  retriesColor: i(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["var(--uni-retry-result-retries-color, grey)"]))),
+  fontSizeMd: i(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["var(--uni-retry-result-font-size-md, 22px)"]))),
+  lineHeightMd: i(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["var(--uni-retry-result-line-height-md, 24px)"]))),
+  fontSizeSm: i(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["var(--uni-retry-result-font-size-sm, 16px)"]))),
+  lineHeightSm: i(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["var(--uni-retry-result-line-height-sm, 18px)"]))),
+  iconWidth: i(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["var(--uni-retry-result-icon-width, 150px)"])))
 };
 
 export { referenceCaptureVars as a, recorderVars as b, directionCardsVars as c, defaultVars as d, buttonsVars as e, fileUploadVars as f, retryResultVars as r, selfieCaptureVars as s };

package/dist/video-record-directions.js

@@ -1,7 +1,7 @@
 import { _ as _inherits, a as _createClass, x, d as _taggedTemplateLiteral, s, b as _classCallCheck, c as _callSuper, e as _objectSpread2 } from './lit-element-c42ac26e.js';
-import { d as directionsStyle } from './direction-card-fd8d8d8b.js';
-import { d as defaultVars } from './variables-0db5ef1b.js';
-import { E as EN } from './en-57f1198e.js';
+import { d as directionsStyle } from './direction-card-88c5d34f.js';
+import { d as defaultVars } from './variables-513bd26a.js';
+import { E as EN } from './en-27ff3a75.js';
 
 var _templateObject$4;
 var LightPicto = /*#__PURE__*/function (_LitElement) {

package/dist/{video-recorder-04ecd01a.js → video-recorder-31ce7f04.js}

@@ -1,17 +1,17 @@
 import { i, d as _taggedTemplateLiteral, _ as _inherits, a as _createClass, x as x$2, s as s$1, b as _classCallCheck, c as _callSuper, e as _objectSpread2, j as _toConsumableArray, h as _superPropGet, f as _asyncToGenerator, g as _regenerator } from './lit-element-c42ac26e.js';
-import { a as commonjsRequire } from './_commonjsHelpers-02146103.js';
-import { b as recorderVars, d as defaultVars } from './variables-0db5ef1b.js';
-import { E as EN } from './en-57f1198e.js';
+import { b as commonjsRequire, i as isMobileDevice } from './utils-474188c7.js';
+import { b as recorderVars, d as defaultVars } from './variables-513bd26a.js';
+import { E as EN } from './en-27ff3a75.js';
 import './button.js';
 
 var name = "@unissey-web/web-components";
-var version = "5.4.0";
+var version = "5.5.0-rc.1";
 var description = "";
 var module = "./dist/index.js";
 var typings = "./dist/index.d.ts";
 var scripts = {
 	dev: "start-storybook -p 6006 --ci --https --ssl-cert https/certificate.crt --ssl-key https/privateKey.key",
-	"dev:server": "rimraf ./dev-server/dist && rollup --config rollup.dev.mjs",
+	"dev:server": "rimraf ./dev-server/dist && rollup --config rollup.dev.mjs --silent --watch",
 	"build:base": "npm run build:types && npm run build:pkg",
 	"build:types": "tsc",
 	"build:pkg": "rimraf dist && rimraf dist-iife && rollup --config --silent",
@@ -72,7 +72,7 @@ var buildPacked = {exports: {}};
 }(buildPacked, buildPacked.exports));
 
 var _templateObject$g;
-var cameraStyle = i(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  .container {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .wrapper {\n    position: relative;\n    top: 0;\n    left: 0;\n    width: ", ";\n  }\n\n  .hints,\n  .instructions,\n  .errors,\n  .flip-icon-container,\n  .face-hints {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .face-hints {\n    width: 100%;\n    height: 100%;\n    z-index: 5;\n  }\n\n  .top-hints {\n    margin-bottom: 20px;\n  }\n\n  .bottom-hints {\n    margin-top: 20px;\n    min-height: 18px;\n  }\n\n  .spinner {\n    z-index: -1;\n    width: 100%;\n    height: 400px;\n  }\n\n  .flip-icon-container {\n    z-index: 6;\n  }\n\n  .flip-icon {\n    position: absolute;\n    bottom: 5%;\n    left: 5d%;\n  }\n\n  .hints {\n    z-index: 3;\n  }\n\n  .instructions {\n    z-index: 4;\n  }\n\n  .errors {\n    display: none;\n    justify-content: center;\n    align-items: center;\n    z-index: 3;\n\n    border-radius: 10px;\n  }\n\n  .errors .message {\n    display: inline-block;\n    width: 70%;\n    background-color: ", ";\n    color: var(--uni-light-color, #fff);\n    padding: 7px 15px;\n    border-radius: 5px;\n    text-align: center;\n  }\n\n  .item-center {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .buttons {\n    text-align: center;\n    width: 100%;\n\n    margin: ", ";\n  }\n\n  .buttons-item {\n    display: inline-block;\n    padding: 7px;\n  }\n\n  .ac-arrow-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .ac-arrow-hint {\n    position: absolute;\n    bottom: -40%;\n    transform: scale(0.65);\n    width: 100%;\n    height: 100%;\n    object-fit: none;\n    overflow: visible;\n    display: block;\n  }\n\n  @media screen and (max-width: 576px) {\n    .buttons-item {\n      width: 95%;\n    }\n\n    .buttons {\n      margin-top: 15px;\n    }\n  }\n"])), recorderVars.videoWidth, defaultVars.colors.error, recorderVars.buttonsMargin);
+var cameraStyle = i(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  .container {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .wrapper {\n    position: relative;\n    top: 0;\n    left: 0;\n    width: ", ";\n  }\n\n  .hints,\n  .instructions,\n  .errors,\n  .flip-icon-container,\n  .face-hints {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .face-hints {\n    width: 100%;\n    height: 100%;\n    z-index: 5;\n  }\n\n  .top-hints {\n    margin-bottom: 20px;\n  }\n\n  .bottom-hints {\n    margin-top: 20px;\n    min-height: 18px;\n  }\n\n  .spinner {\n    z-index: -1;\n    width: 100%;\n    height: 400px;\n  }\n\n  .flip-icon-container {\n    z-index: 6;\n  }\n\n  .flip-icon {\n    position: absolute;\n    bottom: 5%;\n    left: 5%;\n    min-width: 44px;\n    min-height: 44px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n\n  .hints {\n    z-index: 3;\n  }\n\n  .instructions {\n    z-index: 4;\n  }\n\n  .errors {\n    display: none;\n    justify-content: center;\n    align-items: center;\n    z-index: 3;\n\n    border-radius: 10px;\n  }\n\n  .errors .message {\n    display: inline-block;\n    width: 70%;\n    background-color: ", ";\n    color: var(--uni-light-color, #fff);\n    padding: 7px 15px;\n    border-radius: 5px;\n    text-align: center;\n  }\n\n  .item-center {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .buttons {\n    text-align: center;\n    width: 100%;\n\n    margin: ", ";\n  }\n\n  .buttons-item {\n    display: inline-block;\n    padding: 7px;\n  }\n\n  .ac-arrow-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .ac-arrow-hint {\n    position: absolute;\n    bottom: -40%;\n    transform: scale(0.65);\n    width: 100%;\n    height: 100%;\n    object-fit: none;\n    overflow: visible;\n    display: block;\n  }\n\n  @media screen and (max-width: 576px) {\n    .buttons-item {\n      width: 95%;\n    }\n\n    .buttons {\n      margin-top: 15px;\n    }\n  }\n"])), recorderVars.videoWidth, defaultVars.colors.error, recorderVars.buttonsMargin);
 
 var _templateObject$f;
 var fadeAnimation = i(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  @keyframes fade {\n    from {\n      width: 25px;\n      margin-left: 0%;\n      margin-top: 0%;\n      opacity: 1;\n    }\n    to {\n      width: 30px;\n      margin-left: -2%;\n      margin-top: -2%;\n      opacity: 0;\n    }\n  }\n\n  .icon {\n    width: 25px;\n    animation-name: fade;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n  }\n"])));
@@ -439,17 +439,6 @@ var FlipCameraIcon = /*#__PURE__*/function (_LitElement) {
 }(s$1);
 customElements.define("uni-flip-camera-icon", FlipCameraIcon);
 
-//add new isMobileDevice() function from sdk-js;
-function isMobileDevice() {
-  var navigator = window.navigator;
-  var check = false;
-  (function (a) {
-    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true;
-    // @ts-ignore  ('window.opera' is not officially defined. Actually only on Opera.)
-  })(navigator.userAgent || navigator.vendor || window.opera);
-  return check;
-}
-
 var TICK_MS = 50;
 var ProgressBarSequencer = /*#__PURE__*/function () {
   function ProgressBarSequencer(options) {
@@ -584,6 +573,80 @@ var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECA
 
 var img = "data:image/png;base64,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";
 
+/**
+ * This class ensures that a stream of continuous notifications is processed at a controlled rate, preventing rapid-fire announcements.
+ * - When a notification is being processed (i.e., the calculated delay is running), any new notification overwrites the buffered item, effectively discarding intermediate events.
+ * - Processing for the next notification only begins after the full delay of the previous one has completed.
+ * - Dispatches an 'onNotification' event when the system is free.
+ */
+var NotificationThrottler = /*#__PURE__*/function () {
+  /**
+   * @param notificationCallback The function that executes UI changes
+   * @param readRate The time in milliseconds (ms) estimated to read one character.
+   * @param targetElement The HTML element to dispatch the 'onNotification' event from.
+   */
+  function NotificationThrottler(notificationCallback) {
+    var _this = this;
+    var readRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+    var targetElement = arguments.length > 2 ? arguments[2] : undefined;
+    _classCallCheck(this, NotificationThrottler);
+    this.nextNotification = null;
+    this.isProcessing = false;
+    this.readRate = void 0;
+    this.notificationCallback = void 0;
+    this.targetElement = void 0;
+    this.processCycleEnd = function () {
+      if (_this.nextNotification === null) {
+        _this.isProcessing = false;
+      } else {
+        var _notification = _this.nextNotification;
+        _this.nextNotification = null;
+        _this.execAndDelay(_notification).then(_this.processCycleEnd);
+      }
+    };
+    this.notificationCallback = notificationCallback;
+    this.readRate = readRate;
+    this.targetElement = targetElement;
+  }
+  return _createClass(NotificationThrottler, [{
+    key: "setReadRate",
+    value: function setReadRate(rate) {
+      this.readRate = rate;
+    }
+  }, {
+    key: "execAndDelay",
+    value: function execAndDelay(notification) {
+      var duration = this.readRate * notification.message.length;
+      this.notificationCallback(notification);
+      this.targetElement.dispatchEvent(new CustomEvent("onNotification", {
+        detail: notification
+      }));
+      return new Promise(function (resolve) {
+        setTimeout(resolve, duration);
+      });
+    }
+  }, {
+    key: "getIsProcessing",
+    value: function getIsProcessing() {
+      return this.isProcessing;
+    }
+
+    /**
+     * Receive continuous event data.
+     */
+  }, {
+    key: "sendNotification",
+    value: function sendNotification(notification) {
+      if (this.isProcessing) {
+        this.nextNotification = notification;
+      } else {
+        this.isProcessing = true;
+        this.execAndDelay(notification).then(this.processCycleEnd);
+      }
+    }
+  }]);
+}();
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 var Recorder = /*#__PURE__*/function (_LitElement) {
   function Recorder() {
@@ -623,7 +686,10 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     _this.disconnected = false;
     _this.initSessionInprogress = false;
     // Indicate which hint to display on recorder screen
+    // It is a state variable, so it triggers a re render on change
     _this.hints = "nil";
+    // It is a class variable, that does not trigger a re render
+    _this.internalHints = void 0;
     // Error message
     _this.error = "";
     // Indicate if a record session is running
@@ -645,6 +711,7 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     _this.acActiveActionIndex = 0;
     _this.acNumberOfActions = 0;
     _this.acProgressBarValues = [];
+    _this.notificationThrotler = void 0;
     _this.sdkJsListener_status = function (status) {
       var _this$shadowRoot, _this$shadowRoot2;
       _this.sdkJsStatus = status;
@@ -679,18 +746,25 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     _this.sdkJsListener_faceInfo = function (type, value) {
       switch (type) {
         case buildPacked.exports.FaceInfoType.BAD_POS:
-          _this.handleBadFacePos(value);
+          _this.internalHints = _this.handleBadFacePos(value);
           break;
         case buildPacked.exports.FaceInfoType.TOO_FAR:
-          _this.hints = "closer";
+          _this.internalHints = "closer";
           break;
         case buildPacked.exports.FaceInfoType.GOOD_POS:
-          _this.hints = "perfect";
+          _this.internalHints = "perfect";
           break;
         case buildPacked.exports.FaceInfoType.FACE_VALID:
-          _this.hints = "record";
+          _this.internalHints = "record";
           break;
       }
+      if (_this.internalHints) {
+        var message = _this.getString(["hints", _this.internalHints]);
+        if (message) _this.notificationThrotler.sendNotification({
+          type: "info",
+          message: message
+        });
+      }
     };
     _this.handleError = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var _this$shadowRoot3, _this$session;
@@ -716,7 +790,7 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     }));
     _this.sdkJsListener_issue = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(type, value) {
-        var forbiddenActionMessages, cameraErrorMessages, _t;
+        var forbiddenActionMessages, cameraErrorMessages, message, _t;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
             case 0:
@@ -730,37 +804,42 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
                 "1": _this.getString(["cameraErrorMessages", "permissionDenied"]),
                 "2": _this.getString(["cameraErrorMessages", "openFailed"])
               };
+              message = undefined;
               _t = type;
               _context2.n = _t === buildPacked.exports.IssueType.NO_FACE ? 1 : _t === buildPacked.exports.IssueType.FORBIDDEN_ACTION ? 2 : _t === buildPacked.exports.IssueType.CAMERA_ERROR ? 3 : _t === buildPacked.exports.IssueType.MOVE ? 4 : _t === buildPacked.exports.IssueType.UNSUPPORTED_FACE_DETECTOR ? 5 : 6;
               break;
             case 1:
-              _this.displayError(_this.getString(["errors", "noFace"]));
+              message = _this.getString(["errors", "noFace"]);
               _this.faceDetectionFails = true;
               return _context2.a(3, 6);
             case 2:
               if (Object.keys(forbiddenActionMessages).includes("".concat(value))) {
-                _this.displayError(forbiddenActionMessages["".concat(value)]);
+                message = forbiddenActionMessages["".concat(value)];
               } else {
-                _this.displayError(_this.getString(["forbiddenActionMessages", "default"]));
+                message = _this.getString(["forbiddenActionMessages", "default"]);
               }
               return _context2.a(3, 6);
             case 3:
               if (Object.keys(cameraErrorMessages).includes("".concat(value))) {
-                _this.displayError(cameraErrorMessages["".concat(value)]);
+                message = cameraErrorMessages["".concat(value)];
               } else {
-                _this.displayError(_this.getString(["cameraErrorMessages", "default"]));
+                message = _this.getString(["cameraErrorMessages", "default"]);
               }
               return _context2.a(3, 6);
             case 4:
               if (value === 7) {
-                _this.displayError(_this.getString(["rotationWhileCapturingErrorMessage"]));
+                message = _this.getString(["rotationWhileCapturingErrorMessage"]);
               }
               return _context2.a(3, 6);
             case 5:
-              _this.displayError(_this.getString(["errors", "unsupportedFaceDetector"]));
+              message = _this.getString(["errors", "unsupportedFaceDetector"]);
               return _context2.a(3, 6);
             case 6:
               if (_this.acSequenceStarted) _this.acSequenceStarted = false;
+              if (message) _this.notificationThrotler.sendNotification({
+                type: "error",
+                message: message
+              });
               _context2.n = 7;
               return _this.handleError();
             case 7:
@@ -868,6 +947,15 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
       };
     }();
     _this.addEventListener("startCapture", _this.capture.bind(_this));
+    var DEFAULT_READ_RATE = 100; // ms
+
+    _this.notificationThrotler = new NotificationThrottler(function (notification) {
+      if (notification.type === "error") {
+        _this.displayError(notification.message);
+      } else if (_this.internalHints) {
+        _this.hints = _this.internalHints;
+      }
+    }, DEFAULT_READ_RATE, _this);
     return _this;
   }
   _inherits(Recorder, _LitElement);
@@ -1021,6 +1109,7 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "updated",
     value: function updated(_changedProperties) {
+      var _this$getString, _this$getString2, _this$getString3, _this$getString4;
       var presetChanged = _changedProperties.has("preset");
       var configChanged = _changedProperties.has("config");
       var faceCheckerChanged = _changedProperties.has("faceChecker");
@@ -1041,16 +1130,16 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
         if (_container) {
           switch (this.acCurrentAction) {
             case "left":
-              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"Arrow\" src=".concat(img$3, " />");
+              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"".concat((_this$getString = this.getString(["accessibility", "turnLeft"])) !== null && _this$getString !== void 0 ? _this$getString : "Turn left", "\" src=").concat(img$3, " />");
               break;
             case "right":
-              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"Arrow\" src=".concat(img$2, " />");
+              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"".concat((_this$getString2 = this.getString(["accessibility", "turnRight"])) !== null && _this$getString2 !== void 0 ? _this$getString2 : "Turn right", "\" src=").concat(img$2, " />");
               break;
             case "up":
-              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"Arrow\" src=".concat(img$1, " />");
+              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"".concat((_this$getString3 = this.getString(["accessibility", "turnUp"])) !== null && _this$getString3 !== void 0 ? _this$getString3 : "Turn up", "\" src=").concat(img$1, " />");
               break;
             case "down":
-              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"Arrow\" src=".concat(img, " />");
+              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"".concat((_this$getString4 = this.getString(["accessibility", "turnDown"])) !== null && _this$getString4 !== void 0 ? _this$getString4 : "Turn down", "\" src=").concat(img, " />");
               break;
             default:
               _container.innerHTML = "";
@@ -1073,6 +1162,10 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
         _this$config$iadConfi2,
         _this2 = this;
       _superPropGet(Recorder, "connectedCallback", this, 3)([]);
+      var readRate = this.getAttribute("read-rate");
+      if (readRate !== null && !isNaN(Number(readRate))) {
+        this.notificationThrotler.setReadRate(Number(readRate));
+      }
       this.disconnected = false;
       this.initSdkJs();
       this.sequencer = new ProgressBarSequencer({
@@ -1153,9 +1246,9 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
         check: faceCheckerValue
       };
       if (((_sessionConfig$iadCon = sessionConfig.iadConfig) === null || _sessionConfig$iadCon === void 0 ? void 0 : _sessionConfig$iadCon.mode) === buildPacked.exports.IadMode.SUBSTANTIAL || !!((_sessionConfig$iadCon2 = sessionConfig.iadConfig) !== null && _sessionConfig$iadCon2 !== void 0 && _sessionConfig$iadCon2.activeChallengeConfig)) {
-        var _this$getString, _this$getString2, _this$getString3, _this$getString4, _sessionConfig$iadCon3, _sessionConfig$iadCon4, _sessionConfig$iadCon5, _sessionConfig$iadCon6, _sessionConfig$iadCon7, _sessionConfig$iadCon8, _sessionConfig$iadCon9;
+        var _this$getString5, _this$getString6, _this$getString7, _this$getString8, _sessionConfig$iadCon3, _sessionConfig$iadCon4, _sessionConfig$iadCon5, _sessionConfig$iadCon6, _sessionConfig$iadCon7, _sessionConfig$iadCon8, _sessionConfig$iadCon9;
         // configure active challenge
-        this.instructions = [(_this$getString = this.getString(["activeChallengeMessages", "rotateLeft"])) !== null && _this$getString !== void 0 ? _this$getString : "undefined action", (_this$getString2 = this.getString(["activeChallengeMessages", "rotateRight"])) !== null && _this$getString2 !== void 0 ? _this$getString2 : "undefined action", (_this$getString3 = this.getString(["activeChallengeMessages", "rotateUp"])) !== null && _this$getString3 !== void 0 ? _this$getString3 : "undefined action", (_this$getString4 = this.getString(["activeChallengeMessages", "rotateDown"])) !== null && _this$getString4 !== void 0 ? _this$getString4 : "undefined action"];
+        this.instructions = [(_this$getString5 = this.getString(["activeChallengeMessages", "rotateLeft"])) !== null && _this$getString5 !== void 0 ? _this$getString5 : "undefined action", (_this$getString6 = this.getString(["activeChallengeMessages", "rotateRight"])) !== null && _this$getString6 !== void 0 ? _this$getString6 : "undefined action", (_this$getString7 = this.getString(["activeChallengeMessages", "rotateUp"])) !== null && _this$getString7 !== void 0 ? _this$getString7 : "undefined action", (_this$getString8 = this.getString(["activeChallengeMessages", "rotateDown"])) !== null && _this$getString8 !== void 0 ? _this$getString8 : "undefined action"];
         sessionConfig.iadConfig.activeChallengeConfig = {
           maxSecondsBetweenActions: (_sessionConfig$iadCon3 = (_sessionConfig$iadCon4 = sessionConfig.iadConfig.activeChallengeConfig) === null || _sessionConfig$iadCon4 === void 0 ? void 0 : _sessionConfig$iadCon4.maxSecondsBetweenActions) !== null && _sessionConfig$iadCon3 !== void 0 ? _sessionConfig$iadCon3 : 8,
           // client customisation or default (8 seconds)
@@ -1205,7 +1298,7 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
       var _initSession = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
         var _this$shadowRoot6,
           _this4 = this;
-        var videoContainer, _this$shadowRoot7, _this$shadowRoot8, _this$session3, sessionConfig, _this$session4, sessionInfos, acquisitionTime, activeChallengeNumActions, _this$sequencer7, _this$config$iadConfi3, _this$config$iadConfi4, canvasElem, videoElem, recorderReadyEvent;
+        var videoContainer, _this$shadowRoot7, _this$shadowRoot8, _this$session3, sessionConfig, _this$session4, sessionInfos, acquisitionTime, activeChallengeNumActions, _this$sequencer7, _this$config$iadConfi3, _this$config$iadConfi4, canvasElem, videoElem, _this$getString9, recorderReadyEvent;
         return _regenerator().w(function (_context8) {
           while (1) switch (_context8.n) {
             case 0:
@@ -1279,6 +1372,9 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
               }
               canvasElem = (_this$shadowRoot7 = this.shadowRoot) === null || _this$shadowRoot7 === void 0 ? void 0 : _this$shadowRoot7.getElementById(buildPacked.exports.CANVAS_ELEMENT_ID);
               videoElem = (_this$shadowRoot8 = this.shadowRoot) === null || _this$shadowRoot8 === void 0 ? void 0 : _this$shadowRoot8.getElementById(buildPacked.exports.VIDEO_ELEMENT_ID);
+              if (videoElem) {
+                videoElem.setAttribute("aria-label", (_this$getString9 = this.getString(["accessibility", "videoFeed"])) !== null && _this$getString9 !== void 0 ? _this$getString9 : "Camera feed for identity verification");
+              }
               recorderReadyEvent = new CustomEvent("recorderReady", {
                 detail: {
                   recorderElmt: this,
@@ -1313,20 +1409,15 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
       };
       switch (value) {
         case values.front:
-          this.hints = "closer";
-          break;
+          return "closer";
         case values.left:
-          this.hints = "left";
-          break;
+          return "left";
         case values.right:
-          this.hints = "right";
-          break;
+          return "right";
         case values.down:
-          this.hints = "down";
-          break;
+          return "down";
         case values.up:
-          this.hints = "up";
-          break;
+          return "up";
       }
     }
   }, {
@@ -1400,11 +1491,20 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "render",
     value: function render() {
-      var _this$acActiveActionI;
+      var _this$acActiveActionI,
+        _this5 = this,
+        _this$getString0;
+      var retryButtonLabel = this.willRetryCapture ? this.getString(["retry"]) : this.getString(["capture"]);
+
       // not necessary : this.strings = { ...this.defaultStrings, ...this.strings };
-      return x$2(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      <div class=\"container\" id=\"container\">\n        <div id=\"top-hints\" class=\"top-hints\">\n          <slot name=\"ac-top-hints\">\n            ", "\n          </slot>\n        </div>\n        <div class=\"wrapper\" id=\"wrapper\">\n          <div id=\"face-hints\" class=\"face-hints\">\n            <slot name=\"ac-face-hints\">\n              <div id=\"ac-arrow-container\" class=\"ac-arrow-container\"></div>\n            </slot>\n          </div>\n\n          ", "\n\n          <uni-overlay-hints\n            class=\"hints item-center\"\n            hints=\"", "\"\n            strings=\"", "\"\n          ></uni-overlay-hints>\n\n          <div id=\"spinner\" class=\"spinner item-center\" style=\"display: none\">\n            <uni-spinner></uni-spinner>\n          </div>\n          <div class=\"errors\" id=\"errors\">\n            <span class=\"message\">", "</span>\n          </div>\n        </div>\n        <div id=\"bottom-hints\" class=\"bottom-hints\">\n          <slot name=\"ac-bottom-hints\"><span id=\"ac-message-container\"></span> </slot>\n          <div class=\"ac-bottom-hints\">", "</div>\n        </div>\n        <div class=\"buttons\" id=\"buttons\">\n          <div class=\"buttons-item\">\n            <slot name=\"left\"></slot>\n          </div>\n\n          <div class=\"buttons-item\">\n            <!-- Display record/retry button -->\n            ", "\n          </div>\n        </div>\n      </div>\n    "])), this.acSequenceStarted ? x$2(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                  <uni-progress-bar-group\n                    count=\"", "\"\n                    .values=\"", "\"\n                    active-index=\"", "\"\n                  ></uni-progress-bar-group>\n                "])), this.acNumberOfActions, this.acProgressBarValues, (_this$acActiveActionI = this.acActiveActionIndex) !== null && _this$acActiveActionI !== void 0 ? _this$acActiveActionI : -1) : x$2(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""]))), isMobileDevice() && (
+      return x$2(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      <div class=\"container\" id=\"container\">\n        <div id=\"top-hints\" class=\"top-hints\">\n          <slot name=\"ac-top-hints\">\n            ", "\n          </slot>\n        </div>\n        <div class=\"wrapper\" id=\"wrapper\">\n          <div id=\"face-hints\" class=\"face-hints\">\n            <slot name=\"ac-face-hints\">\n              <div id=\"ac-arrow-container\" class=\"ac-arrow-container\"></div>\n            </slot>\n          </div>\n\n          ", "\n\n          <uni-overlay-hints\n            class=\"hints item-center\"\n            hints=\"", "\"\n            strings=\"", "\"\n          ></uni-overlay-hints>\n\n          <div id=\"spinner\" class=\"spinner item-center\" style=\"display: none\">\n            <uni-spinner></uni-spinner>\n          </div>\n          <div class=\"errors\" id=\"errors\">\n            <span class=\"message\" id=\"sdk-error\" aria-live=\"assertive\">", "</span>\n          </div>\n        </div>\n        <div id=\"bottom-hints\" class=\"bottom-hints\">\n          <slot name=\"ac-bottom-hints\"><span id=\"ac-message-container\"></span></slot>\n          <div class=\"ac-bottom-hints\">\n            <span id=\"pos-hint\" role=\"alert\" aria-live=\"assertive\">", "</span>\n          </div>\n        </div>\n        <div class=\"buttons\" id=\"buttons\">\n          <div class=\"buttons-item\">\n            <slot name=\"left\"></slot>\n          </div>\n\n          <div class=\"buttons-item\">\n            <!-- Display record/retry button -->\n            ", "\n          </div>\n        </div>\n      </div>\n    "])), this.acSequenceStarted ? x$2(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                  <uni-progress-bar-group\n                    count=\"", "\"\n                    .values=\"", "\"\n                    active-index=\"", "\"\n                  ></uni-progress-bar-group>\n                "])), this.acNumberOfActions, this.acProgressBarValues, (_this$acActiveActionI = this.acActiveActionIndex) !== null && _this$acActiveActionI !== void 0 ? _this$acActiveActionI : -1) : x$2(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""]))), isMobileDevice() && (
       // eslint-disable-next-line no-extra-boolean-cast
-      !!this.displayFlipCameraBtn ? this.displayFlipCameraBtn : this.preset === buildPacked.exports.AcquisitionPreset.DOC_VIDEO || this.preset === buildPacked.exports.AcquisitionPreset.DOC_IMAGE) && !this.isRunning() ? x$2(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([" <div id=\"flip-icon-container\" class=\"flip-icon-container\">\n                <uni-flip-camera-icon @click=\"", "\" class=\"flip-icon\"> </uni-flip-camera-icon>\n              </div>"])), this.flipCamera) : x$2(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""]))), this.hints, JSON.stringify(this.getString(["hints"])), this.error, this.getString(["hints", this.hints]), !this.hideCaptureBtn || this.willRetryCapture ? x$2(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["<uni-button id=\"capture\" @click=\"", "\">\n                  <div slot=\"icon\">", "</div>\n                  ", "\n                </uni-button>"])), this.capture, this.captureButtonPicto, this.willRetryCapture ? this.getString(["retry"]) : this.getString(["capture"])) : x$2(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([""]))));
+      !!this.displayFlipCameraBtn ? this.displayFlipCameraBtn : this.preset === buildPacked.exports.AcquisitionPreset.DOC_VIDEO || this.preset === buildPacked.exports.AcquisitionPreset.DOC_IMAGE) && !this.isRunning() ? x$2(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([" <div id=\"flip-icon-container\" class=\"flip-icon-container\">\n                <uni-flip-camera-icon\n                  @click=\"", "\"\n                  @keydown=\"", "\"\n                  class=\"flip-icon\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  aria-label=\"", "\"\n                ></uni-flip-camera-icon>\n              </div>"])), this.flipCamera, function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          _this5.flipCamera();
+        }
+      }, (_this$getString0 = this.getString(["accessibility", "flipCamera"])) !== null && _this$getString0 !== void 0 ? _this$getString0 : "Switch camera") : x$2(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""]))), this.hints, JSON.stringify(this.getString(["hints"])), this.error, this.getString(["hints", this.hints]), !this.hideCaptureBtn || this.willRetryCapture ? x$2(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["<uni-button\n                  id=\"capture\"\n                  @click=\"", "\"\n                  aria-role=\"button\"\n                  aria-label=\"", "\"\n                >\n                  <div slot=\"icon\">", "</div>\n                  ", "\n                </uni-button>"])), this.capture, retryButtonLabel, this.captureButtonPicto, retryButtonLabel) : x$2(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([""]))));
     }
   }]);
 }(s$1);

package/dist/video-recorder.js

@@ -1,6 +1,6 @@
 import './lit-element-c42ac26e.js';
-export { R as Recorder, V as VideoRecorder } from './video-recorder-04ecd01a.js';
-import './variables-0db5ef1b.js';
+export { R as Recorder, V as VideoRecorder } from './video-recorder-31ce7f04.js';
+import './variables-513bd26a.js';
 import './button.js';
-import './en-57f1198e.js';
-import './_commonjsHelpers-02146103.js';
+import './en-27ff3a75.js';
+import './utils-474188c7.js';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@unissey-web/web-components",
-  "version": "5.4.0",
+  "version": "5.5.0-rc.1",
   "description": "",
   "module": "./dist/index.js",
   "typings": "./dist/index.d.ts",
   "scripts": {
     "dev": "start-storybook -p 6006 --ci --https --ssl-cert https/certificate.crt --ssl-key https/privateKey.key",
-    "dev:server": "rimraf ./dev-server/dist && rollup --config rollup.dev.mjs",
+    "dev:server": "rimraf ./dev-server/dist && rollup --config rollup.dev.mjs --silent --watch",
     "build:base": "npm run build:types && npm run build:pkg",
     "build:types": "tsc",
     "build:pkg": "rimraf dist && rimraf dist-iife && rollup --config --silent",

package/dist/_commonjsHelpers-02146103.js

@@ -1,7 +0,0 @@
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function commonjsRequire (path) {
-	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
-}
-
-export { commonjsRequire as a, commonjsGlobal as c };