@uploadcare/file-uploader 0.50.1-alpha.2

package/blocks/Range/Range.js

@@ -0,0 +1,44 @@
+import { BaseComponent } from '@symbiotejs/symbiote';
+
+export class Range extends BaseComponent {
+  init$ = {
+    cssLeft: '50%',
+    barActive: false,
+    value: 50,
+    onChange: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.$.value = parseFloat(this._range.value);
+      this.dispatchEvent(new Event('change'));
+    },
+  };
+
+  initCallback() {
+    super.initCallback();
+    /** @type {HTMLInputElement} */
+    this._range = this.ref.range;
+    [...this.attributes].forEach((attr) => {
+      let exclude = ['style', 'ref'];
+      if (!exclude.includes(attr.name)) {
+        this.ref.range.setAttribute(attr.name, attr.value);
+      }
+    });
+    this.sub('value', (val) => {
+      let pcnt = (val / 100) * 100;
+      this.$.cssLeft = `${pcnt}%`;
+    });
+    this.defineAccessor('value', (val) => {
+      this.$.value = val;
+    });
+  }
+}
+
+Range.template = /* HTML */ `
+  <div class="uc-track-wrapper">
+    <div class="uc-track"></div>
+    <div class="uc-bar" set -style.width="cssLeft" -@active="barActive"></div>
+    <div class="uc-slider" set -style.left="cssLeft"></div>
+  </div>
+
+  <input type="range" ref="range" set -@value="value" -oninput="onChange" />
+`;

package/blocks/Range/range.css

@@ -0,0 +1,65 @@
+uc-range {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--uc-button-size);
+}
+
+uc-range datalist {
+  display: none;
+}
+
+uc-range input {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+uc-range .uc-track-wrapper {
+  position: absolute;
+  right: 10px;
+  left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2px;
+  user-select: none;
+  pointer-events: none;
+}
+
+uc-range .uc-track {
+  position: absolute;
+  right: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2px;
+  background-color: currentColor;
+  border-radius: 2px;
+  opacity: 0.5;
+}
+
+uc-range .uc-slider {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-color: currentColor;
+  border-radius: 100%;
+  transform: translateX(-50%);
+}
+
+uc-range .uc-bar {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  background-color: currentColor;
+  border-radius: 2px;
+}
+
+uc-range .uc-caption {
+  position: absolute;
+  display: inline-flex;
+  justify-content: center;
+}

package/blocks/Select/Select.d.ts

@@ -0,0 +1,9 @@
+export class Select extends Block {
+    init$: any;
+    value: any;
+}
+export namespace Select {
+    let template: string;
+}
+import { Block } from '../../abstract/Block.js';
+//# sourceMappingURL=Select.d.ts.map

package/blocks/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["Select.js"],"names":[],"mappings":"AAEA;IACE,WAeE;IAPE,WAAkC;CAqBvC;;;;sBAhCqB,yBAAyB"}

package/blocks/Select/Select.js

@@ -0,0 +1,35 @@
+import { Block } from '../../abstract/Block.js';
+
+export class Select extends Block {
+  init$ = {
+    ...this.init$,
+    currentText: '',
+    options: [],
+    selectHtml: '',
+    onSelect: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      this.value = this.ref.select.value;
+      this.$.currentText =
+        this.$.options.find((opt) => {
+          return opt.value == this.value;
+        })?.text || '';
+      this.dispatchEvent(new Event('change'));
+    },
+  };
+
+  initCallback() {
+    super.initCallback();
+
+    this.sub('options', (/** @type {{ text: String; value: String }[]} */ options) => {
+      this.$.currentText = options?.[0]?.text || '';
+      let html = '';
+      options?.forEach((opt) => {
+        html += /* HTML */ `<option value="${opt.value}">${opt.text}</option>`;
+      });
+      this.$.selectHtml = html;
+    });
+  }
+}
+
+Select.template = /* HTML */ ` <select ref="select" set="innerHTML: selectHtml; onchange: onSelect"></select> `;

package/blocks/Select/select.css

@@ -0,0 +1,22 @@
+uc-select {
+  display: inline-flex;
+}
+
+uc-select select {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--uc-button-size);
+  padding: 0 14px;
+  font-size: 1em;
+  font-family: inherit;
+  white-space: nowrap;
+  border: none;
+  border-radius: var(--uc-radius);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--uc-transition);
+  color: var(--uc-secondary-foreground);
+  background-color: var(--uc-secondary);
+}

package/blocks/SimpleBtn/SimpleBtn.d.ts

@@ -0,0 +1,26 @@
+export class SimpleBtn extends UploaderBlock {
+    init$: {
+        withDropZone: boolean;
+        onClick: () => void;
+        'button-text': string;
+        '*commonProgress': number;
+        '*uploadList': never[];
+        '*focusedEntry': null;
+        '*uploadQueue': import("@uploadcare/upload-client").Queue;
+        '*collectionErrors': any[];
+        '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
+        '*uploadTrigger': Set<string>;
+        '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
+        '*currentActivity': null;
+        '*currentActivityParams': {};
+        '*history': never[];
+        '*historyBack': null;
+        '*closeModal': () => void;
+    };
+}
+export namespace SimpleBtn {
+    let template: string;
+}
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+//# sourceMappingURL=SimpleBtn.d.ts.map

package/blocks/SimpleBtn/SimpleBtn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleBtn.d.ts","sourceRoot":"","sources":["SimpleBtn.js"],"names":[],"mappings":"AAIA;IAMI;;;;;;;;;;;;;;;;;;MAOC;CAoBJ;;;;8BApC6B,iCAAiC"}

package/blocks/SimpleBtn/SimpleBtn.js

@@ -0,0 +1,54 @@
+// @ts-check
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { asBoolean } from '../Config/normalizeConfigValue.js';
+
+export class SimpleBtn extends UploaderBlock {
+  static styleAttrs = [...super.styleAttrs, 'uc-simple-btn'];
+  couldBeCtxOwner = true;
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      withDropZone: true,
+      onClick: () => {
+        this.api.initFlow();
+      },
+      'button-text': '',
+    };
+  }
+
+  initCallback() {
+    super.initCallback();
+
+    this.defineAccessor(
+      'dropzone',
+      /** @param {unknown} val */
+      (val) => {
+        if (typeof val === 'undefined') {
+          return;
+        }
+        this.$.withDropZone = asBoolean(val);
+      },
+    );
+    this.subConfigValue('multiple', (val) => {
+      this.$['button-text'] = val ? 'upload-files' : 'upload-file';
+    });
+  }
+}
+
+SimpleBtn.template = /* HTML */ `
+  <uc-drop-area set="@disabled: !withDropZone">
+    <button type="button" set="onclick: onClick">
+      <uc-icon name="upload"></uc-icon>
+      <span l10n="button-text"></span>
+      <slot></slot>
+      <div class="uc-visual-drop-area" l10n="drop-files-here"></div>
+    </button>
+  </uc-drop-area>
+`;
+
+SimpleBtn.bindAttributes({
+  // @ts-expect-error TODO: we need to update symbiote types
+  dropzone: null,
+});

package/blocks/SimpleBtn/simple-btn.css

@@ -0,0 +1,64 @@
+:where([uc-simple-btn]) {
+  position: relative;
+  display: inline-flex;
+}
+
+:where([uc-simple-btn]) button {
+  height: auto;
+  gap: 0.5em;
+  padding: var(--uc-simple-btn-padding);
+  background-color: var(--uc-simple-btn);
+  color: var(--uc-simple-btn-foreground);
+  font-size: var(--uc-simple-btn-font-size);
+  font-family: var(--uc-simple-btn-font-family);
+}
+
+:where([uc-simple-btn]) button uc-icon {
+  width: auto;
+  height: auto;
+}
+
+:where([uc-simple-btn]) button uc-icon svg {
+  width: 0.9em;
+  height: 0.9em;
+}
+
+:where([uc-simple-btn]) button:hover {
+  background-color: var(--uc-simple-btn-hover);
+}
+
+:where([uc-simple-btn]) > uc-drop-area {
+  display: contents;
+}
+
+:where([uc-simple-btn]) .uc-visual-drop-area {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--uc-simple-btn-padding);
+  background-color: transparent;
+  color: transparent;
+  font-size: var(--uc-simple-btn-font-size);
+  border: 1px dashed var(--uc-simple-btn-foreground);
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity var(--uc-transition);
+}
+
+:where([uc-simple-btn]) > uc-drop-area[drag-state='active'] .uc-visual-drop-area {
+  opacity: 1;
+}
+:where([uc-simple-btn]) > uc-drop-area[drag-state='inactive'] .uc-visual-drop-area {
+  opacity: 0;
+}
+:where([uc-simple-btn]) > uc-drop-area[drag-state='near'] .uc-visual-drop-area {
+  opacity: 1;
+}
+:where([uc-simple-btn]) > uc-drop-area[drag-state='over'] .uc-visual-drop-area {
+  opacity: 1;
+}

package/blocks/SourceBtn/SourceBtn.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @typedef {{
+ *   type: string;
+ *   activity?: string;
+ *   textKey?: string;
+ *   icon?: string;
+ *   activate?: () => boolean;
+ *   activityParams?: Record<string, unknown>;
+ * }} TConfig
+ */
+export class SourceBtn extends UploaderBlock {
+    /** @type {string | undefined} */
+    type: string | undefined;
+    /**
+     * @private
+     * @type {Record<string, TConfig>}
+     */
+    private _registeredTypes;
+    init$: {
+        iconName: string;
+        'src-type': string;
+        '*commonProgress': number;
+        '*uploadList': never[];
+        '*focusedEntry': null;
+        '*uploadQueue': import("@uploadcare/upload-client").Queue;
+        '*collectionErrors': any[];
+        '*collectionState': import("../../index.js").OutputCollectionState<import("../../index.js").OutputCollectionStatus, "maybe-has-group"> | null;
+        '*groupInfo': import("@uploadcare/upload-client").UploadcareGroup | null;
+        '*uploadTrigger': Set<string>;
+        '*secureUploadsManager': import("../../abstract/SecureUploadsManager.js").SecureUploadsManager | null;
+        '*currentActivity': null;
+        '*currentActivityParams': {};
+        '*history': never[];
+        '*historyBack': null;
+        '*closeModal': () => void;
+    };
+    initTypes(): void;
+    /** @param {TConfig} typeConfig */
+    registerType(typeConfig: TConfig): void;
+    /** @param {string} type */
+    getType(type: string): TConfig;
+    activate(): void;
+    /** @param {string} type */
+    applyType(type: string): void;
+}
+export namespace SourceBtn {
+    let template: string;
+}
+export type TConfig = {
+    type: string;
+    activity?: string;
+    textKey?: string;
+    icon?: string;
+    activate?: () => boolean;
+    activityParams?: Record<string, unknown>;
+};
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+//# sourceMappingURL=SourceBtn.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SourceBtn.d.ts","sourceRoot":"","sources":["SourceBtn.js"],"names":[],"mappings":"AAMA;;;;;;;;;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;8BAb0B,iCAAiC"}

package/blocks/SourceBtn/SourceBtn.js

@@ -0,0 +1,145 @@
+// @ts-check
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+
+const L10N_PREFIX = 'src-type-';
+
+/**
+ * @typedef {{
+ *   type: string;
+ *   activity?: string;
+ *   textKey?: string;
+ *   icon?: string;
+ *   activate?: () => boolean;
+ *   activityParams?: Record<string, unknown>;
+ * }} TConfig
+ */
+
+export class SourceBtn extends UploaderBlock {
+  couldBeCtxOwner = true;
+  /** @type {string | undefined} */
+  type = undefined;
+  /**
+   * @private
+   * @type {Record<string, TConfig>}
+   */
+  _registeredTypes = {};
+
+  constructor() {
+    super();
+
+    this.init$ = {
+      ...this.init$,
+      iconName: 'default',
+      'src-type': '',
+    };
+  }
+
+  initTypes() {
+    this.registerType({
+      type: UploaderBlock.sourceTypes.LOCAL,
+      activate: () => {
+        this.api.openSystemDialog();
+        return false;
+      },
+    });
+    this.registerType({
+      type: UploaderBlock.sourceTypes.URL,
+      activity: ActivityBlock.activities.URL,
+      textKey: 'from-url',
+    });
+    this.registerType({
+      type: UploaderBlock.sourceTypes.CAMERA,
+      activity: ActivityBlock.activities.CAMERA,
+      activate: () => {
+        const supportsCapture = 'capture' in document.createElement('input');
+        if (supportsCapture) {
+          this.api.openSystemDialog({ captureCamera: true });
+        }
+        return !supportsCapture;
+      },
+    });
+    this.registerType({
+      type: 'draw',
+      activity: ActivityBlock.activities.DRAW,
+      icon: 'edit-draw',
+    });
+
+    for (let externalSourceType of Object.values(UploaderBlock.extSrcList)) {
+      this.registerType({
+        type: externalSourceType,
+        activity: ActivityBlock.activities.EXTERNAL,
+        activityParams: {
+          externalSourceType: externalSourceType,
+        },
+      });
+    }
+  }
+
+  initCallback() {
+    super.initCallback();
+    this.initTypes();
+
+    this.defineAccessor(
+      'type',
+      /** @param {string} val */
+      (val) => {
+        if (!val) {
+          return;
+        }
+        this.applyType(val);
+      },
+    );
+  }
+
+  /** @param {TConfig} typeConfig */
+  registerType(typeConfig) {
+    this._registeredTypes[typeConfig.type] = typeConfig;
+  }
+
+  /** @param {string} type */
+  getType(type) {
+    return this._registeredTypes[type];
+  }
+
+  activate() {
+    if (!this.type) {
+      return;
+    }
+    const configType = this._registeredTypes[this.type];
+    const { activity, activate, activityParams = {} } = configType;
+    const showActivity = activate ? activate() : !!activity;
+    showActivity &&
+      this.set$({
+        '*currentActivityParams': activityParams,
+        '*currentActivity': activity,
+      });
+  }
+
+  /** @param {string} type */
+  applyType(type) {
+    const configType = this._registeredTypes[type];
+    if (!configType) {
+      console.warn('Unsupported source type: ' + type);
+      return;
+    }
+    const { textKey = type, icon = type } = configType;
+
+    this.$['src-type'] = `${L10N_PREFIX}${textKey}`;
+    this.$.iconName = icon;
+    this.onclick = () => {
+      this.activate();
+    };
+  }
+}
+
+SourceBtn.template = /* HTML */ `
+  <button type="button">
+    <uc-icon set="@name: iconName"></uc-icon>
+    <div class="uc-txt" l10n="src-type"></div>
+  </button>
+`;
+SourceBtn.bindAttributes({
+  // @ts-expect-error symbiote types bug
+  type: null,
+});

package/blocks/SourceBtn/source-btn.css

@@ -0,0 +1,45 @@
+uc-source-btn > button {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2px;
+  padding: 2px var(--uc-padding);
+  color: var(--uc-foreground);
+  border-radius: var(--uc-radius);
+  cursor: pointer;
+  transition:
+    background-color var(--uc-transition),
+    color var(--uc-transition);
+  user-select: none;
+  width: 100%;
+  background-color: unset;
+  height: unset;
+}
+
+uc-source-btn:last-child > button {
+  margin-bottom: 0;
+}
+
+uc-source-btn > button:hover {
+  color: var(--uc-primary);
+  background-color: var(--uc-primary-transparent);
+}
+
+uc-source-btn uc-icon {
+  display: inline-flex;
+  flex-grow: 1;
+  justify-content: center;
+  min-width: var(--uc-button-size);
+  margin-right: var(--uc-padding);
+  opacity: 0.8;
+}
+
+uc-source-btn .uc-txt {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--uc-button-size);
+  padding: 0;
+  white-space: nowrap;
+  border: none;
+}

package/blocks/SourceList/SourceList.d.ts

@@ -0,0 +1,4 @@
+export class SourceList extends Block {
+}
+import { Block } from '../../abstract/Block.js';
+//# sourceMappingURL=SourceList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SourceList.d.ts","sourceRoot":"","sources":["SourceList.js"],"names":[],"mappings":"AAGA;CAgBC;sBAnBqB,yBAAyB"}

package/blocks/SourceList/SourceList.js

@@ -0,0 +1,20 @@
+import { Block } from '../../abstract/Block.js';
+import { stringToArray } from '../../utils/stringToArray.js';
+
+export class SourceList extends Block {
+  initCallback() {
+    super.initCallback();
+    this.subConfigValue('sourceList', (/** @type {String} */ val) => {
+      let list = stringToArray(val);
+      let html = '';
+      list.forEach((srcName) => {
+        html += /* HTML */ `<uc-source-btn type="${srcName}"></uc-source-btn>`;
+      });
+      if (this.cfg.sourceListWrap) {
+        this.innerHTML = html;
+      } else {
+        this.outerHTML = html;
+      }
+    });
+  }
+}

package/blocks/StartFrom/StartFrom.d.ts

@@ -0,0 +1,7 @@
+export class StartFrom extends ActivityBlock {
+}
+export namespace StartFrom {
+    let template: string;
+}
+import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+//# sourceMappingURL=StartFrom.d.ts.map

package/blocks/StartFrom/StartFrom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartFrom.d.ts","sourceRoot":"","sources":["StartFrom.js"],"names":[],"mappings":"AAEA;CASC;;;;8BAX6B,iCAAiC"}

package/blocks/StartFrom/StartFrom.js

@@ -0,0 +1,14 @@
+import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+
+export class StartFrom extends ActivityBlock {
+  historyTracked = true;
+  /** @type {import('../../abstract/ActivityBlock.js').ActivityType} */
+  activityType = 'start-from';
+
+  initCallback() {
+    super.initCallback();
+    this.registerActivity(this.activityType);
+  }
+}
+
+StartFrom.template = /* HTML */ ` <div class="uc-content"><slot></slot></div> `;

package/blocks/StartFrom/start-from.css

@@ -0,0 +1,32 @@
+uc-start-from {
+  display: block;
+  overflow-y: auto;
+}
+
+uc-start-from .uc-content {
+  display: grid;
+  grid-auto-flow: row;
+  gap: calc(var(--uc-padding) * 2);
+  width: 100%;
+  height: 100%;
+  padding: calc(var(--uc-padding) * 2);
+  background-color: var(--uc-background);
+}
+
+[uc-modal] uc-start-from {
+  width: min(
+    calc(var(--uc-dialog-width) - var(--uc-padding) * 2),
+    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
+    calc(100vw - var(--uc-padding) * 2)
+  );
+}
+
+[uc-modal] uc-start-from uc-drop-area {
+  border-radius: var(--uc-radius);
+}
+
+@media only screen and (max-width: 430px) {
+  [uc-modal] uc-start-from uc-drop-area {
+    display: none;
+  }
+}