@uploadcare/file-uploader 1.13.1 → 1.13.3-alpha.0

package/abstract/UploaderBlock.d.ts

@@ -100,6 +100,7 @@ export namespace UploaderBlock {
         LOCAL: "local";
         DROP_AREA: "drop-area";
         CAMERA: "camera";
+        VIDEO_CAMERA: "video-camera";
         EXTERNAL: "external";
         API: "js-api";
         URL: "url";

package/abstract/UploaderBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploaderBlock.d.ts","sourceRoot":"","sources":["UploaderBlock.js"],"names":[],"mappings":"AAmBA;IACE,iBAAiB;IACjB,mCAAwB;IAExB,eAAe;IACf,mBAAmB;IAEnB;;;;;;;;;;;;;;MAA+B;IAE/B,eAAe;IACf,0BAOC;IA2BD;;;OAGG;IACH,qDAKC;IAED,mCAAmC;IACnC,6BAKC;IAED,4BAEC;IAED,iCAAiC;IACjC,wCAKC;IAYD,eAAe;IACf,qBA0BC;IAvBC,eAAe;IACf,6BAAiG;IAEjG,eAAe;IACf,uCAEC;IAmBH;;;OAGG;IACH,qBAkBC;IAED,eAAe;IACf,0BAYQ;IAER;;;;OAIG;IACH,gCAiCE;IAEF;;;OAGG;IACH,0CAyFE;IAEF,eAAe;IACf,mCAoBE;IAEF,eAAe;IACf,uBAuCC;IAED;;;OAGG;IACH,kCAHW,MAAM,qEAWhB;IAED;;;OAGG;IACH,oCAHa,QAAQ,OAAO,2BAA2B,EAAE,eAAe,CAAC,CA2BxE;IAED,kEAAkE;IAClE,iBADc,OAAO,sBAAsB,EAAE,eAAe,EAAE,CAK7D;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAra6B,oBAAoB;qCAWb,2BAA2B;kCAG9B,wBAAwB;kCADxB,wBAAwB;gCAD1B,sBAAsB"}
+{"version":3,"file":"UploaderBlock.d.ts","sourceRoot":"","sources":["UploaderBlock.js"],"names":[],"mappings":"AAmBA;IACE,iBAAiB;IACjB,mCAAwB;IAExB,eAAe;IACf,mBAAmB;IAEnB;;;;;;;;;;;;;;MAA+B;IAE/B,eAAe;IACf,0BAOC;IA2BD;;;OAGG;IACH,qDAKC;IAED,mCAAmC;IACnC,6BAKC;IAED,4BAEC;IAED,iCAAiC;IACjC,wCAKC;IAYD,eAAe;IACf,qBA0BC;IAvBC,eAAe;IACf,6BAAiG;IAEjG,eAAe;IACf,uCAEC;IAmBH;;;OAGG;IACH,qBAkBC;IAED,eAAe;IACf,0BAYQ;IAER;;;;OAIG;IACH,gCAiCE;IAEF;;;OAGG;IACH,0CAyFE;IAEF,eAAe;IACf,mCAoBE;IAEF,eAAe;IACf,uBAuCC;IAED;;;OAGG;IACH,kCAHW,MAAM,qEAWhB;IAED;;;OAGG;IACH,oCAHa,QAAQ,OAAO,2BAA2B,EAAE,eAAe,CAAC,CA2BxE;IAED,kEAAkE;IAClE,iBADc,OAAO,sBAAsB,EAAE,eAAe,EAAE,CAK7D;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAra6B,oBAAoB;qCAWb,2BAA2B;kCAG9B,wBAAwB;kCADxB,wBAAwB;gCAD1B,sBAAsB"}

package/abstract/UploaderPublicApi.d.ts

@@ -59,9 +59,10 @@ export class UploaderPublicApi {
     removeFileByInternalId: (internalId: string) => void;
     removeAllFiles(): void;
     uploadAll: () => void;
-    /** @param {{ captureCamera?: boolean }} options */
+    /** @param {{ captureCamera?: boolean; modeCamera?: import('../blocks/CameraSource/constants.js').ModeCameraType }} options */
     openSystemDialog: (options?: {
         captureCamera?: boolean;
+        modeCamera?: import('../blocks/CameraSource/constants.js').ModeCameraType;
     }) => void;
     /**
      * @template {import('../types').OutputFileStatus} TStatus

package/abstract/UploaderPublicApi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploaderPublicApi.d.ts","sourceRoot":"","sources":["UploaderPublicApi.js"],"names":[],"mappings":"AAaA;IAOE,8DAA8D;IAC9D,iBADY,OAAO,oBAAoB,EAAE,aAAa,EAGrD;IATD;;;OAGG;IACH,aAAK;IAOL,eAAe;IACf,gCAEC;IAED,yCAEC;IAED;;iBAEC;IAED;;;;;;OAMG;IACH,sBAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAUrD;IAEF;;;;OAIG;IACH,wBAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAUrD;IAEF;;;;OAIG;IACH,4BAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAgBrD;IAEF;;;;OAIG;IACH,0BAJW,IAAI;;;;;sBAEF,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAcrD;IAEF,iCAAiC;IACjC,qCADY,MAAM,UAMhB;IAEF,uBAEC;IAED,sBAeE;IAEF,mDAAmD;IACnD,6BADY;QAAE,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,UAkDrC;IAEF;;;;OAIG;IACH,8EAHW,MAAM,iDA8Cf;IAEF,oEAAoE;IACpE,oKAIE;IAEF,+BAA+B;IAC/B,gDAsCE;IAEF,qBAQE;IAEF;;;;;;;;;OASG;IACH,uTAFQ,IAAI,CAWV;IAEF,2DAA2D;IAC3D,0BADc,OAAO,oBAAoB,EAAE,YAAY,CAGrD;IAEF,8BAA8B;IAC9B,wBADY,OAAO,UAOjB;IAEF;;;OAGG;IACH,0BAOC;CACF"}
+{"version":3,"file":"UploaderPublicApi.d.ts","sourceRoot":"","sources":["UploaderPublicApi.js"],"names":[],"mappings":"AAcA;IAOE,8DAA8D;IAC9D,iBADY,OAAO,oBAAoB,EAAE,aAAa,EAGrD;IATD;;;OAGG;IACH,aAAK;IAOL,eAAe;IACf,gCAEC;IAED,yCAEC;IAED;;iBAEC;IAED;;;;;;OAMG;IACH,sBAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAUrD;IAEF;;;;OAIG;IACH,wBAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAUrD;IAEF;;;;OAIG;IACH,4BAJW,MAAM;;;;sBAEJ,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAgBrD;IAEF;;;;OAIG;IACH,0BAJW,IAAI;;;;;sBAEF,OAAO,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,CAcrD;IAEF,iCAAiC;IACjC,qCADY,MAAM,UAMhB;IAEF,uBAEC;IAED,sBAeE;IAEF,8HAA8H;IAC9H,6BADY;QAAE,aAAa,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,OAAO,qCAAqC,EAAE,cAAc,CAAA;KAAE,UAyDhH;IAEF;;;;OAIG;IACH,8EAHW,MAAM,iDA8Cf;IAEF,oEAAoE;IACpE,oKAIE;IAEF,+BAA+B;IAC/B,gDAsCE;IAEF,qBAQE;IAEF;;;;;;;;;OASG;IACH,uTAFQ,IAAI,CAWV;IAEF,2DAA2D;IAC3D,0BADc,OAAO,oBAAoB,EAAE,YAAY,CAGrD;IAEF,8BAA8B;IAC9B,wBADY,OAAO,UAOjB;IAEF;;;OAGG;IACH,0BAOC;CACF"}

package/abstract/UploaderPublicApi.js

@@ -4,11 +4,12 @@ import { ActivityBlock } from './ActivityBlock.js';
 import { applyStyles, Data } from '@symbiotejs/symbiote';
 import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { UploadSource } from '../blocks/utils/UploadSource.js';
-import { deserializeCsv, serializeCsv } from '../blocks/utils/comma-separated.js';
+import { serializeCsv } from '../blocks/utils/comma-separated.js';
 import { IMAGE_ACCEPT_LIST, fileIsImage, mergeFileTypes } from '../utils/fileTypes.js';
 import { parseCdnUrl } from '../utils/parseCdnUrl.js';
 import { buildOutputCollectionState } from './buildOutputCollectionState.js';
 import { stringToArray } from '../utils/stringToArray.js';
+import { calcCameraModes } from '../blocks/CameraSource/calcCameraModes.js';
 import { CameraSourceTypes } from '../blocks/CameraSource/constants.js';
 
 export class UploaderPublicApi {
@@ -137,7 +138,7 @@ export class UploaderPublicApi {
     );
   };
 
-  /** @param {{ captureCamera?: boolean }} options */
+  /** @param {{ captureCamera?: boolean; modeCamera?: import('../blocks/CameraSource/constants.js').ModeCameraType }} options */
   openSystemDialog = (options = {}) => {
     const accept = serializeCsv(
       mergeFileTypes([this.cfg.accept ?? '', ...(this.cfg.imgOnly ? IMAGE_ACCEPT_LIST : [])]),
@@ -155,8 +156,15 @@ export class UploaderPublicApi {
     fileInput.multiple = this.cfg.multiple;
     if (options.captureCamera) {
       fileInput.capture = this.cfg.cameraCapture;
-      const isVideoRecordingEnabled = deserializeCsv(this.cfg.cameraModes).includes(CameraSourceTypes.VIDEO);
-      fileInput.accept = ['image/*', isVideoRecordingEnabled && 'video/*'].filter(Boolean).join(',');
+      const { isPhotoEnabled, isVideoRecordingEnabled } = calcCameraModes(this.cfg);
+
+      if (options.modeCamera === CameraSourceTypes.PHOTO && isPhotoEnabled) {
+        fileInput.accept = 'image/*';
+      }
+
+      if (options.modeCamera === CameraSourceTypes.VIDEO && isVideoRecordingEnabled) {
+        fileInput.accept = 'video/*';
+      }
     } else {
       fileInput.accept = accept;
     }

package/abstract/l10nProcessor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"l10nProcessor.d.ts","sourceRoot":"","sources":["l10nProcessor.js"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wEAHW,gBAAgB,kBAyE1B"}
+{"version":3,"file":"l10nProcessor.d.ts","sourceRoot":"","sources":["l10nProcessor.js"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wEAHW,gBAAgB,kBAe1B"}

package/abstract/l10nProcessor.js

@@ -13,68 +13,81 @@ export function l10nProcessor(fr, fnCtx) {
     if (!key) {
       return;
     }
-    let elProp = 'textContent';
-    let useAttribute = false;
-    if (key.includes(':')) {
-      const arr = key.split(':');
-      elProp = arr[0];
-      key = arr[1];
-      if (elProp.startsWith('@')) {
-        elProp = elProp.slice(1);
-        useAttribute = true;
-      }
-    }
+    const list = key.split(';');
 
-    // Check if the key is present in the local context
-    const localCtxKey = key;
-    if (fnCtx.has(localCtxKey)) {
-      fnCtx.sub(localCtxKey, (mappedKey) => {
-        if (!mappedKey) {
-          return;
-        }
-        // Store the subscription in a temporary map to be able to unsubscribe later
-        if (!fnCtx.l10nProcessorSubs.has(localCtxKey)) {
-          fnCtx.l10nProcessorSubs.set(localCtxKey, new Set());
-        }
-        const keySubs = fnCtx.l10nProcessorSubs.get(localCtxKey);
-        keySubs?.forEach(
-          /** @param {{ remove: () => void }} sub */
-          (sub) => {
-            sub.remove();
-            keySubs.delete(sub);
-            fnCtx.allSubs.delete(sub);
-          },
-        );
-        // We don't need the leading * in the key because we use the key as a local context key relative to the global state
-        const nodeStateKey = localeStateKey(mappedKey).replace('*', '');
-        // If the key is not present in the node context, add it
-        if (!fnCtx.nodeCtx.has(nodeStateKey)) {
-          fnCtx.nodeCtx.add(nodeStateKey, mappedKey);
-        }
-        // Subscribe on the global l10n key change
-        const sub = fnCtx.nodeCtx.sub(nodeStateKey, () => {
-          el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(mappedKey);
-        });
-        keySubs?.add(sub);
-        // Store the subscription in the global context to make able Symbiote to unsubscribe it on destroy
-        fnCtx.allSubs.add(sub);
-        el.removeAttribute('l10n');
-      });
+    for (const item of list) {
+      if (item) locale(el, item, fnCtx);
     }
+  });
+}
 
-    // Otherwise, assume the key is in the global context
-    const stateKey = localeStateKey(key);
-    if (!fnCtx.has(stateKey)) {
-      fnCtx.add(stateKey, '');
+/**
+ * @param {Element} el
+ * @param {string} key
+ * @param {any} fnCtx
+ */
+const locale = (el, key, fnCtx) => {
+  let elProp = 'textContent';
+  let useAttribute = false;
+  if (key.includes(':')) {
+    const arr = key.split(':');
+    elProp = arr[0];
+    key = arr[1];
+    if (elProp.startsWith('@')) {
+      elProp = elProp.slice(1);
+      useAttribute = true;
     }
-    fnCtx.sub(stateKey, () => {
-      key = /** @type {string} */ (key);
-      if (useAttribute) {
-        el.setAttribute(elProp, fnCtx.l10n(key));
-      } else {
-        el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(key);
+  }
+
+  // Check if the key is present in the local context
+  const localCtxKey = key;
+  if (fnCtx.has(localCtxKey)) {
+    fnCtx.sub(localCtxKey, (/** @type {string} */ mappedKey) => {
+      if (!mappedKey) {
+        return;
+      }
+      // Store the subscription in a temporary map to be able to unsubscribe later
+      if (!fnCtx.l10nProcessorSubs.has(localCtxKey)) {
+        fnCtx.l10nProcessorSubs.set(localCtxKey, new Set());
       }
+      const keySubs = fnCtx.l10nProcessorSubs.get(localCtxKey);
+      keySubs?.forEach(
+        /** @param {{ remove: () => void }} sub */
+        (sub) => {
+          sub.remove();
+          keySubs.delete(sub);
+          fnCtx.allSubs.delete(sub);
+        },
+      );
+      // We don't need the leading * in the key because we use the key as a local context key relative to the global state
+      const nodeStateKey = localeStateKey(mappedKey).replace('*', '');
+      // If the key is not present in the node context, add it
+      if (!fnCtx.nodeCtx.has(nodeStateKey)) {
+        fnCtx.nodeCtx.add(nodeStateKey, mappedKey);
+      }
+      // Subscribe on the global l10n key change
+      const sub = fnCtx.nodeCtx.sub(nodeStateKey, () => {
+        el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(mappedKey);
+      });
+      keySubs?.add(sub);
+      // Store the subscription in the global context to make able Symbiote to unsubscribe it on destroy
+      fnCtx.allSubs.add(sub);
+      el.removeAttribute('l10n');
     });
-    el.removeAttribute('l10n');
+  }
+
+  // Otherwise, assume the key is in the global context
+  const stateKey = localeStateKey(key);
+  if (!fnCtx.has(stateKey)) {
+    fnCtx.add(stateKey, '');
+  }
+  fnCtx.sub(stateKey, () => {
+    key = /** @type {string} */ (key);
+    if (useAttribute) {
+      el.setAttribute(elProp, fnCtx.l10n(key));
+    } else {
+      el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(key);
+    }
   });
-}
+  el.removeAttribute('l10n');
+};

package/blocks/CameraSource/CameraSource.js

@@ -844,7 +844,7 @@ CameraSource.template = /* HTML */ `
       type="button"
       class="uc-mini-btn uc-close-btn"
       set="onclick: *closeModal"
-      l10n="@title:a11y-activity-header-button-close"
+      l10n="@title:a11y-activity-header-button-close;@aria-label:a11y-activity-header-button-close"
     >
       <uc-icon name="close"></uc-icon>
     </button>

package/blocks/CameraSource/calcCameraModes.d.ts

@@ -0,0 +1,5 @@
+export function calcCameraModes(cfg: import('../../types').ConfigType): {
+    isVideoRecordingEnabled: boolean;
+    isPhotoEnabled: boolean;
+};
+//# sourceMappingURL=calcCameraModes.d.ts.map

package/blocks/CameraSource/calcCameraModes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calcCameraModes.d.ts","sourceRoot":"","sources":["calcCameraModes.js"],"names":[],"mappings":"AAKO,qCAAoC,OAAO,aAAa,EAAE,UAAU;;;EAK1E"}

package/blocks/CameraSource/calcCameraModes.js

@@ -0,0 +1,11 @@
+//@ts-check
+
+import { deserializeCsv } from '../utils/comma-separated.js';
+import { CameraSourceTypes } from './constants.js';
+
+export const calcCameraModes = (/** @type {import('../../types').ConfigType} } */ cfg) => {
+  return {
+    isVideoRecordingEnabled: deserializeCsv(cfg.cameraModes).includes(CameraSourceTypes.VIDEO),
+    isPhotoEnabled: deserializeCsv(cfg.cameraModes).includes(CameraSourceTypes.PHOTO),
+  };
+};

package/blocks/CameraSource/constants.d.ts

@@ -12,4 +12,5 @@ export const CameraSourceEvents: Readonly<{
     RETAKE: "retake";
     ACCEPT: "accept";
 }>;
+export type ModeCameraType = (typeof CameraSourceTypes)[keyof typeof CameraSourceTypes];
 //# sourceMappingURL=constants.d.ts.map

package/blocks/CameraSource/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["constants.js"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;GAWG"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["constants.js"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;;;;GAWG;6BAEW,CAAC,wBAAwB,CAAC,CAAC,MAAM,wBAAwB,CAAC"}

package/blocks/CameraSource/constants.js

@@ -15,3 +15,5 @@ export const CameraSourceEvents = Object.freeze({
   RETAKE: 'retake',
   ACCEPT: 'accept',
 });
+
+/** @typedef {(typeof CameraSourceTypes)[keyof typeof CameraSourceTypes]} ModeCameraType */

package/blocks/CloudImageEditor/src/EditorButtonControl.js

@@ -38,7 +38,7 @@ export class EditorButtonControl extends Block {
 }
 
 EditorButtonControl.template = /* HTML */ `
-  <button type="button" role="option" l10n="@title:title-prop">
+  <button role="option" type="button" set="@aria-label:title-prop;" l10n="@title:title-prop;">
     <uc-icon set="@name: icon;"></uc-icon>
     <div class="uc-title" ref="title-el">{{title}}</div>
   </button>

package/blocks/CloudImageEditor/src/EditorFilterControl.js

@@ -164,7 +164,7 @@ export class EditorFilterControl extends EditorButtonControl {
 }
 
 EditorFilterControl.template = /* HTML */ `
-  <button type="button" role="option" l10n="@title:title-prop">
+  <button type="button" role="option" l10n="@title:title-prop;@aria-label:title-prop">
     <div class="uc-preview" ref="preview-el"></div>
     <uc-icon ref="icon-el" set="@name: icon; @size: iconSize;"></uc-icon>
   </button>

package/blocks/CloudImageEditor/src/EditorToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorToolbar.d.ts","sourceRoot":"","sources":["EditorToolbar.js"],"names":[],"mappings":"AA2DA;IAII;;QAGE,qDAAqD;8BAA1C,OAAO,YAAY,EAAE,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAuDjD,4BAA4B;2BAAhB,UAAU;;;;;;;MAgBvB;IAED,eAAe;IAEf,6BAAsE;IAGxE,eAAe;IACf,uBAKC;IAED;;;OAGG;IACH,gCAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,4BAoCC;IAED;;;;OAIG;IACH,qBAyBC;IAED;;;OAGG;IACH,4BAKC;IAED,eAAe;IACf,0BAIC;IAED,eAAe;IACf,4BAWC;IALG,oBAGC;IAIL;;;OAGG;IACH,oBAEC;IAED;;MAwBM;CAiFP;;;;sBAlZqB,4BAA4B"}
+{"version":3,"file":"EditorToolbar.d.ts","sourceRoot":"","sources":["EditorToolbar.js"],"names":[],"mappings":"AA2DA;IAII;;QAGE,qDAAqD;8BAA1C,OAAO,YAAY,EAAE,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAuDjD,4BAA4B;2BAAhB,UAAU;;;;;;;MAgBvB;IAED,eAAe;IAEf,6BAAsE;IAGxE,eAAe;IACf,uBAKC;IAED;;;OAGG;IACH,gCAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,6BAKC;IAED;;;OAGG;IACH,4BAoCC;IAED;;;;OAIG;IACH,qBAyBC;IAED;;;OAGG;IACH,4BAKC;IAED,eAAe;IACf,0BAIC;IAED,eAAe;IACf,4BAWC;IALG,oBAGC;IAIL;;;OAGG;IACH,oBAEC;IAED;;MAwBM;CAqFP;;;;sBAtZqB,4BAA4B"}

package/blocks/CloudImageEditor/src/EditorToolbar.js

@@ -402,6 +402,10 @@ export class EditorToolbar extends Block {
 
     this._updateInfoTooltip();
   }
+
+  destroyCallback() {
+    this.$['*showSlider'] = false;
+  }
 }
 
 EditorToolbar.template = /* HTML */ `

package/blocks/CloudImageEditor/src/css/common.css

@@ -17,7 +17,9 @@
   --size-ui-min-width: 130px;
   --size-line-width: 1px;
   --size-modal-width: 650px;
-  --size-icon: calc(var(--uc-button-size) / 2); /* TODO: remove icon size overrides */
+  --size-icon: calc(var(--uc-button-size) / 2);
+
+  /* TODO: remove icon size overrides */
 
   --border-radius-editor: var(--uc-radius);
   --border-radius-thumb: var(--uc-radius);
@@ -365,7 +367,6 @@ uc-editor-operation-control > button {
   height: var(--l-base-height);
   color: var(--color-effect);
   opacity: var(--opacity-effect);
-  outline: none;
   cursor: pointer;
   transition: var(--l-width-transition);
 }
@@ -882,7 +883,6 @@ uc-btn-ui > button {
   background-color: var(--background-effect);
   border-radius: var(--uc-radius);
   opacity: var(--opacity-effect);
-  outline: none;
   cursor: pointer;
   filter: brightness(var(--filter-effect));
   transition: var(--l-transition-effect);
@@ -1188,5 +1188,6 @@ uc-presence-toggle.uc-initial {
 
 [uc-cloud-image-editor] [role='button']:focus-visible,
 [uc-cloud-image-editor] button:focus-visible {
+  outline: 1px auto Highlight;
   outline: 1px auto -webkit-focus-ring-color;
 }

package/blocks/CloudImageEditor/src/elements/button/BtnUi.js

@@ -88,7 +88,11 @@ export class BtnUi extends Block {
 BtnUi.bindAttributes({ text: 'text', icon: 'icon', reverse: 'reverse', theme: 'theme' });
 
 BtnUi.template = /* HTML */ `
-  <button type="button" set="@role:aria-role; @aria-controls: aria-controls;" l10n="@title:title-prop">
+  <button
+    type="button"
+    set="@role:aria-role; @aria-controls: aria-controls; @aria-label:title-prop"
+    l10n="@title:title-prop;"
+  >
     <uc-icon set="className: iconCss; @name: icon; @hidden: !icon"></uc-icon>
     <div class="uc-text">{{text}}</div>
   </button>

package/blocks/Copyright/copyright.css

@@ -22,6 +22,7 @@ uc-copyright .uc-credits {
 }
 
 uc-copyright .uc-credits:focus-visible {
+  outline: 1px auto Highlight;
   outline: 1px auto -webkit-focus-ring-color;
 }
 

package/blocks/ExternalSource/ExternalSource.js

@@ -274,7 +274,7 @@ ExternalSource.template = /* HTML */ `
       type="button"
       class="uc-mini-btn uc-close-btn"
       set="onclick: *historyBack"
-      l10n="@title:a11y-activity-header-button-close"
+      l10n="@title:a11y-activity-header-button-close;@aria-label:a11y-activity-header-button-close"
     >
       <uc-icon name="close"></uc-icon>
     </button>

package/blocks/FileItem/FileItem.js

@@ -450,15 +450,15 @@ FileItem.template = /* HTML */ `
         <uc-icon set="@name: badgeIcon"></uc-icon>
       </div>
     </div>
-    <div aria-live="polite" class="uc-file-name-wrapper" set="@aria-label:ariaLabelStatusFile;">
-      <span class="uc-file-name" set="@title: itemName">{{itemName}}</span>
+    <div aria-atomic="true" aria-live="polite" class="uc-file-name-wrapper" set="@aria-label:ariaLabelStatusFile;">
+      <span class="uc-file-name">{{itemName}}</span>
       <span class="uc-file-error" set="@hidden: !errorText">{{errorText}}</span>
       <span class="uc-file-hint" set="@hidden: !hint">{{hint}}</span>
     </div>
     <div class="uc-file-actions">
       <button
         type="button"
-        l10n="@title:file-item-edit-button"
+        l10n="@title:file-item-edit-button;@aria-label:file-item-edit-button"
         class="uc-edit-btn uc-mini-btn"
         set="onclick: onEdit; @hidden: !isEditable"
       >
@@ -466,7 +466,7 @@ FileItem.template = /* HTML */ `
       </button>
       <button
         type="button"
-        l10n="@title:file-item-remove-button"
+        l10n="@title:file-item-remove-button;@aria-label:file-item-remove-button"
         class="uc-remove-btn uc-mini-btn"
         set="onclick: onRemove;"
       >

package/blocks/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["Icon.js"],"names":[],"mappings":"AAGA;IAII;;;MAIC;CAmBJ;;;;sBA7BqB,yBAAyB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["Icon.js"],"names":[],"mappings":"AAGA;IAII;;;MAIC;CAqBJ;;;;sBA/BqB,yBAAyB"}

package/blocks/Icon/Icon.js

@@ -27,6 +27,8 @@ export class Icon extends Block {
         this.$.href = iconHref;
       });
     });
+
+    this.setAttribute('aria-hidden', 'true');
   }
 }
 

package/blocks/SourceBtn/SourceBtn.d.ts

@@ -20,7 +20,7 @@ export class SourceBtn extends UploaderBlock {
         iconName: string;
         'src-type': string;
         '*commonProgress': number;
-        '*uploadList': never[];
+        '*uploadList': never[]; /** @type {string | undefined} */
         '*uploadQueue': import("@uploadcare/upload-client").Queue;
         '*collectionErrors': any[];
         '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;

package/blocks/SourceBtn/SourceBtn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceBtn.d.ts","sourceRoot":"","sources":["SourceBtn.js"],"names":[],"mappings":"AAOA;;;;;;;;;GASG;AAEH;IAEE,iCAAiC;IACjC,MADW,MAAM,GAAG,SAAS,CACZ;IACjB;;;OAGG;IACH,yBAAsB;IAKpB;;;;;;;;;;;;;;;;MAIC;IAGH,kBAuCC;IAkBD,kCAAkC;IAClC,yBADY,OAAO,QAGlB;IAED,2BAA2B;IAC3B,cADY,MAAM,WAGjB;IAED,iBAYC;IAED,2BAA2B;IAC3B,gBADY,MAAM,QAcjB;CACF;;;;sBA9HY;IACZ,IAAQ,EAAE,MAAM,CAAC;IACjB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAY,CAAC,EAAE,MAAM,OAAO,CAAC;IAC7B,cAAkB,CAAC,EAAE,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;8BAd0B,iCAAiC"}
+{"version":3,"file":"SourceBtn.d.ts","sourceRoot":"","sources":["SourceBtn.js"],"names":[],"mappings":"AAQA;;;;;;;;;GASG;AAEH;IAEE,iCAAiC;IACjC,MADW,MAAM,GAAG,SAAS,CACZ;IACjB;;;OAGG;IACH,yBAAsB;IAKpB;;;;gCAXF,iCAAiC;;;;;;;;;;;;MAe9B;IAGH,kBAkDC;IAkBD,kCAAkC;IAClC,yBADY,OAAO,QAGlB;IAED,2BAA2B;IAC3B,cADY,MAAM,WAGjB;IAED,iBAYC;IAED,2BAA2B;IAC3B,gBADY,MAAM,QAcjB;CACF;;;;sBAzIY;IACZ,IAAQ,EAAE,MAAM,CAAC;IACjB,QAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAY,CAAC,EAAE,MAAM,OAAO,CAAC;IAC7B,cAAkB,CAAC,EAAE,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C;8BAf0B,iCAAiC"}

package/blocks/SourceBtn/SourceBtn.js

@@ -2,6 +2,7 @@
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { ExternalUploadSource, UploadSource } from '../utils/UploadSource.js';
+import { CameraSourceTypes } from '../CameraSource/constants.js';
 
 const L10N_PREFIX = 'src-type-';
 
@@ -55,7 +56,18 @@ export class SourceBtn extends UploaderBlock {
       activate: () => {
         const supportsCapture = 'capture' in document.createElement('input');
         if (supportsCapture) {
-          this.api.openSystemDialog({ captureCamera: true });
+          this.api.openSystemDialog({ captureCamera: true, modeCamera: CameraSourceTypes.PHOTO });
+        }
+        return !supportsCapture;
+      },
+    });
+    this.registerType({
+      type: UploadSource.VIDEO_CAMERA,
+      activity: ActivityBlock.activities.CAMERA,
+      activate: () => {
+        const supportsCapture = 'capture' in document.createElement('input');
+        if (supportsCapture) {
+          this.api.openSystemDialog({ captureCamera: true, modeCamera: CameraSourceTypes.VIDEO });
         }
         return !supportsCapture;
       },

package/blocks/SourceList/SourceList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SourceList.d.ts","sourceRoot":"","sources":["SourceList.js"],"names":[],"mappings":"AAGA;CA2BC;sBA9BqB,yBAAyB"}
+{"version":3,"file":"SourceList.d.ts","sourceRoot":"","sources":["SourceList.js"],"names":[],"mappings":"AAOA;CAqCC;sBA1CqB,yBAAyB"}

package/blocks/SourceList/SourceList.js

@@ -1,9 +1,15 @@
+// @ts-check
+import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { Block } from '../../abstract/Block.js';
 import { stringToArray } from '../../utils/stringToArray.js';
+import { calcCameraModes } from '../CameraSource/calcCameraModes.js';
+import { isMobileDevice } from '../utils/checkDevice.js';
 
 export class SourceList extends Block {
   initCallback() {
     super.initCallback();
+    const isMobile = isMobileDevice();
+
     this.subConfigValue('sourceList', (/** @type {String} */ val) => {
       let list = stringToArray(val);
       let html = '';
@@ -18,7 +24,15 @@ export class SourceList extends Block {
           return;
         }
 
-        html += /* HTML */ `<uc-source-btn type="${srcName}"></uc-source-btn>`;
+        html += /* HTML */ `<uc-source-btn role="listitem" type="${srcName}"></uc-source-btn>`;
+
+        if (
+          srcName === ActivityBlock.activities.CAMERA &&
+          isMobile &&
+          calcCameraModes(this.cfg).isVideoRecordingEnabled
+        ) {
+          html += /* HTML */ `<uc-source-btn role="listitem" type="video-camera"></uc-source-btn>`;
+        }
       });
 
       if (this.cfg.sourceListWrap) {

package/blocks/UploadList/UploadList.js

@@ -206,7 +206,7 @@ UploadList.template = /* HTML */ `
       type="button"
       class="uc-mini-btn uc-close-btn"
       set="onclick: *closeModal"
-      l10n="@title:a11y-activity-header-button-close"
+      l10n="@title:a11y-activity-header-button-close;@aria-label:a11y-activity-header-button-close"
     >
       <uc-icon name="close"></uc-icon>
     </button>

package/blocks/UrlSource/UrlSource.js

@@ -38,7 +38,7 @@ export class UrlSource extends UploaderBlock {
 
 UrlSource.template = /* HTML */ `
   <uc-activity-header>
-    <button type="button" class="uc-mini-btn" set="onclick: *historyBack" l10n="@title:back">
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack" l10n="@title:back;@aria-label:back">
       <uc-icon name="back"></uc-icon>
     </button>
     <div>
@@ -49,7 +49,7 @@ UrlSource.template = /* HTML */ `
       type="button"
       class="uc-mini-btn uc-close-btn"
       set="onclick: *closeModal"
-      l10n="@title:a11y-activity-header-button-close"
+      l10n="@title:a11y-activity-header-button-close;@aria-label:a11y-activity-header-button-close"
     >
       <uc-icon name="close"></uc-icon>
     </button>

package/blocks/utils/UploadSource.d.ts

@@ -24,6 +24,7 @@ export const UploadSource: Readonly<{
     LOCAL: "local";
     DROP_AREA: "drop-area";
     CAMERA: "camera";
+    VIDEO_CAMERA: "video-camera";
     EXTERNAL: "external";
     API: "js-api";
     URL: "url";

package/blocks/utils/UploadSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadSource.d.ts","sourceRoot":"","sources":["UploadSource.js"],"names":[],"mappings":"AACA;;;;;;;;;;;GAWG;AAEH;;;;;;;;;;;;;;;;;;GASG;0BAEW,CAAC,mBAAmB,CAAC,CAAC,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"UploadSource.d.ts","sourceRoot":"","sources":["UploadSource.js"],"names":[],"mappings":"AACA;;;;;;;;;;;GAWG;AAEH;;;;;;;;;;;;;;;;;;;GAUG;0BAEW,CAAC,mBAAmB,CAAC,CAAC,MAAM,mBAAmB,CAAC"}

package/blocks/utils/UploadSource.js

@@ -16,6 +16,7 @@ export const UploadSource = Object.freeze({
   LOCAL: 'local',
   DROP_AREA: 'drop-area',
   CAMERA: 'camera',
+  VIDEO_CAMERA: 'video-camera',
   EXTERNAL: 'external',
   API: 'js-api',
   URL: 'url',

package/blocks/utils/checkDevice.d.ts

@@ -0,0 +1,9 @@
+export const DeviceTypes: Readonly<{
+    iOS: "iOS";
+    Android: "Android";
+    WindowsPhone: "Windows Phone";
+    Desktop: "Desktop";
+}>;
+export function checkDevice(): "iOS" | "Android" | "Windows Phone" | "Desktop";
+export function isMobileDevice(): boolean;
+//# sourceMappingURL=checkDevice.d.ts.map

package/blocks/utils/checkDevice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkDevice.d.ts","sourceRoot":"","sources":["checkDevice.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEI,+EAoBN;AAEM,0CAIN"}

package/blocks/utils/checkDevice.js

@@ -0,0 +1,34 @@
+export const DeviceTypes = Object.freeze({
+  iOS: 'iOS',
+  Android: 'Android',
+  WindowsPhone: 'Windows Phone',
+  Desktop: 'Desktop',
+});
+
+export const checkDevice = () => {
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+
+  // Check for iOS
+  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+    return DeviceTypes.iOS;
+  }
+
+  // Check for Android
+  if (/android/i.test(userAgent)) {
+    return DeviceTypes.Android;
+  }
+
+  // Check for Windows Phone
+  if (/windows phone/i.test(userAgent)) {
+    return DeviceTypes.WindowsPhone;
+  }
+
+  // Default to desktop
+  return DeviceTypes.Desktop;
+};
+
+export const isMobileDevice = () => {
+  const deviceType = checkDevice();
+
+  return deviceType !== DeviceTypes.Desktop;
+};

package/env.d.ts

@@ -1,4 +1,4 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME: "blocks";
-export const PACKAGE_VERSION: "1.13.1";
+export const PACKAGE_VERSION: "1.13.2";
 //# sourceMappingURL=env.d.ts.map

package/env.js

@@ -1,3 +1,3 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME = 'blocks';
-export const PACKAGE_VERSION = '1.13.1';
+export const PACKAGE_VERSION = '1.13.2';