@uploadcare/file-uploader 0.50.1-alpha.2

package/blocks/Img/ImgConfig.js

@@ -0,0 +1,102 @@
+import { BaseComponent, Data } from '@symbiotejs/symbiote';
+import { PROPS_MAP } from './props-map.js';
+import { CSS_PREF } from './configurations.js';
+import { PACKAGE_NAME, PACKAGE_VERSION } from '../../env.js';
+
+const CSS_PROPS = Object.create(null);
+for (let prop in PROPS_MAP) {
+  CSS_PROPS[CSS_PREF + prop] = PROPS_MAP[prop]?.default || '';
+}
+
+export class ImgConfig extends BaseComponent {
+  cssInit$ = CSS_PROPS;
+
+  /**
+   * @param {String} key
+   * @returns {any}
+   */
+  $$(key) {
+    return this.$[CSS_PREF + key];
+  }
+
+  /** @param {Object<String, String | Number>} kvObj */
+  set$$(kvObj) {
+    for (let key in kvObj) {
+      this.$[CSS_PREF + key] = kvObj[key];
+    }
+  }
+
+  /**
+   * @param {String} key
+   * @param {(val: any) => void} kbFn
+   */
+  sub$$(key, kbFn) {
+    this.sub(CSS_PREF + key, (val) => {
+      // null comes from CSS context property
+      // empty string comes from attribute value
+      if (val === null || val === '') {
+        return;
+      }
+      kbFn(val);
+    });
+  }
+
+  analyticsParams() {
+    return `-/@clib/${PACKAGE_NAME}/${PACKAGE_VERSION}/uc-img/`;
+  }
+
+  initAttributes(el) {
+    [...this.attributes].forEach((attr) => {
+      if (!PROPS_MAP[attr.name]) {
+        el.setAttribute(attr.name, attr.value);
+      }
+    });
+  }
+
+  /**
+   * @param {HTMLElement} el
+   * @param {() => void} cbkFn
+   */
+  initIntersection(el, cbkFn) {
+    let opts = {
+      root: null,
+      rootMargin: '0px',
+    };
+    /** @private */
+    this._isnObserver = new IntersectionObserver((entries) => {
+      entries.forEach((ent) => {
+        if (ent.isIntersecting) {
+          cbkFn();
+          this._isnObserver.unobserve(el);
+        }
+      });
+    }, opts);
+    this._isnObserver.observe(el);
+    if (!this._observed) {
+      /** @private */
+      this._observed = new Set();
+    }
+    this._observed.add(el);
+  }
+
+  destroyCallback() {
+    super.destroyCallback();
+    if (this._isnObserver) {
+      this._observed.forEach((el) => {
+        this._isnObserver.unobserve(el);
+      });
+      this._isnObserver = null;
+    }
+    Data.deleteCtx(this);
+  }
+
+  static get observedAttributes() {
+    return Object.keys(PROPS_MAP);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    window.setTimeout(() => {
+      this.$[CSS_PREF + name] = newVal;
+    });
+  }
+}

package/blocks/Img/configurations.d.ts

@@ -0,0 +1,12 @@
+export const CSS_PREF: "--uc-img-";
+export const UNRESOLVED_ATTR: "unresolved";
+export const HI_RES_K: 2;
+export const ULTRA_RES_K: 3;
+export const DEV_MODE: boolean;
+export const MAX_WIDTH: 3000;
+export const MAX_WIDTH_JPG: 5000;
+export const ImgTypeEnum: Readonly<{
+    PREVIEW: "PREVIEW";
+    MAIN: "MAIN";
+}>;
+//# sourceMappingURL=configurations.d.ts.map

package/blocks/Img/configurations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configurations.d.ts","sourceRoot":"","sources":["configurations.js"],"names":[],"mappings":"AAAA,mCAAoC;AACpC,2CAA4C;AAC5C,yBAA0B;AAC1B,4BAA6B;AAC7B,+BACuH;AAEvH,6BAA8B;AAC9B,iCAAkC;AAElC;;;GAGG"}

package/blocks/Img/configurations.js

@@ -0,0 +1,14 @@
+export const CSS_PREF = '--uc-img-';
+export const UNRESOLVED_ATTR = 'unresolved';
+export const HI_RES_K = 2;
+export const ULTRA_RES_K = 3;
+export const DEV_MODE =
+  !window.location.host.trim() || window.location.host.includes(':') || window.location.hostname.includes('localhost');
+
+export const MAX_WIDTH = 3000;
+export const MAX_WIDTH_JPG = 5000;
+
+export const ImgTypeEnum = Object.freeze({
+  PREVIEW: 'PREVIEW',
+  MAIN: 'MAIN',
+});

package/blocks/Img/props-map.d.ts

@@ -0,0 +1,29 @@
+export const PROPS_MAP: Readonly<{
+    'dev-mode': {};
+    pubkey: {};
+    uuid: {};
+    src: {};
+    lazy: {
+        default: number;
+    };
+    intersection: {};
+    breakpoints: {};
+    'cdn-cname': {
+        default: string;
+    };
+    'proxy-cname': {};
+    'secure-delivery-proxy': {};
+    'hi-res-support': {
+        default: number;
+    };
+    'ultra-res-support': {};
+    format: {};
+    'cdn-operations': {};
+    progressive: {};
+    quality: {};
+    'is-background-for': {};
+    'is-preview-blur': {
+        default: number;
+    };
+}>;
+//# sourceMappingURL=props-map.d.ts.map

package/blocks/Img/props-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props-map.d.ts","sourceRoot":"","sources":["props-map.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG"}

package/blocks/Img/props-map.js

@@ -0,0 +1,34 @@
+const DEFAULT_CDN_BASE = 'https://ucarecdn.com';
+
+export const PROPS_MAP = Object.freeze({
+  'dev-mode': {},
+  pubkey: {},
+  uuid: {},
+  src: {},
+  // alt: {},
+  // 'placeholder-src': {}, // available via CSS
+  lazy: {
+    default: 1,
+  },
+  intersection: {},
+  breakpoints: {
+    // '200, 300, 400'
+  },
+  'cdn-cname': {
+    default: DEFAULT_CDN_BASE,
+  },
+  'proxy-cname': {},
+  'secure-delivery-proxy': {},
+  'hi-res-support': {
+    default: 1,
+  },
+  'ultra-res-support': {}, // ?
+  format: {},
+  'cdn-operations': {},
+  progressive: {},
+  quality: {},
+  'is-background-for': {},
+  'is-preview-blur': {
+    default: 1,
+  },
+});

package/blocks/Img/test.css

@@ -0,0 +1,16 @@
+uc-img {
+  --uc-img-pubkey: '364c0864158c27472ffe';
+  --uc-img-test: 'TEST';
+
+  display: contents;
+}
+
+uc-img > img {
+  transition: 1s;
+}
+
+uc-img > img[unresolved] {
+  transform: scale(0.8);
+  opacity: 0;
+  transition: 1s;
+}

package/blocks/Img/utils/parseObjectToString.d.ts

@@ -0,0 +1,2 @@
+export function parseObjectToString(params: any): any[];
+//# sourceMappingURL=parseObjectToString.d.ts.map

package/blocks/Img/utils/parseObjectToString.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseObjectToString.d.ts","sourceRoot":"","sources":["parseObjectToString.js"],"names":[],"mappings":"AAAO,wDAYD"}

package/blocks/Img/utils/parseObjectToString.js

@@ -0,0 +1,13 @@
+export const parseObjectToString = (params) =>
+  Object.entries(params)
+    .filter(([key, value]) => value !== undefined && value !== '')
+    .map(([key, value]) => {
+      if (key === 'cdn-operations') {
+        return value;
+      }
+      if (key === 'analytics') {
+        return value;
+      }
+
+      return `${key}/${value}`;
+    });

package/blocks/Modal/Modal.d.ts

@@ -0,0 +1,24 @@
+export class Modal extends Block {
+    static StateConsumerScope: string;
+    init$: {
+        '*modalActive': boolean;
+        isOpen: boolean;
+        closeClicked: () => void;
+    };
+    _handleBackdropClick: () => void;
+    _closeDialog: () => void;
+    _handleDialogClose: () => void;
+    /** @param {Event} e */
+    _handleDialogMouseDown: (e: Event) => void;
+    /** @private */
+    private _mouseDownTarget;
+    /** @param {Event} e */
+    _handleDialogMouseUp: (e: Event) => void;
+    show(): void;
+    hide(): void;
+}
+export namespace Modal {
+    let template: string;
+}
+import { Block } from '../../abstract/Block.js';
+//# sourceMappingURL=Modal.d.ts.map

package/blocks/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAGA;IAEE,kCAAoC;IAIlC;;;;MAKC;IAGH,iCAEE;IAEF,yBAEE;IAEF,+BAEE;IAEF,uBAAuB;IACvB,4BADY,KAAK,UAIf;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,0BADY,KAAK,UAKf;IAEF,aAMC;IAED,aAMC;CAqDF;;;;sBA5GqB,yBAAyB"}

package/blocks/Modal/Modal.js

@@ -0,0 +1,116 @@
+// @ts-check
+import { Block } from '../../abstract/Block.js';
+
+export class Modal extends Block {
+  static styleAttrs = [...super.styleAttrs, 'uc-modal'];
+  static StateConsumerScope = 'modal';
+
+  constructor() {
+    super();
+    this.init$ = {
+      ...this.init$,
+      '*modalActive': false,
+      isOpen: false,
+      closeClicked: this._handleDialogClose,
+    };
+  }
+
+  _handleBackdropClick = () => {
+    this._closeDialog();
+  };
+
+  _closeDialog = () => {
+    this.setOrAddState('*modalActive', false);
+  };
+
+  _handleDialogClose = () => {
+    this._closeDialog();
+  };
+
+  /** @param {Event} e */
+  _handleDialogMouseDown = (e) => {
+    /** @private */
+    this._mouseDownTarget = e.target;
+  };
+
+  /** @param {Event} e */
+  _handleDialogMouseUp = (e) => {
+    if (e.target === this.ref.dialog && e.target === this._mouseDownTarget) {
+      this._closeDialog();
+    }
+  };
+
+  show() {
+    if (this.ref.dialog.showModal) {
+      this.ref.dialog.showModal();
+    } else {
+      this.ref.dialog.setAttribute('open', '');
+    }
+  }
+
+  hide() {
+    if (this.ref.dialog.close) {
+      this.ref.dialog.close();
+    } else {
+      this.ref.dialog.removeAttribute('open');
+    }
+  }
+
+  initCallback() {
+    super.initCallback();
+    if (typeof HTMLDialogElement === 'function') {
+      this.ref.dialog.addEventListener('close', this._handleDialogClose);
+      this.ref.dialog.addEventListener('mousedown', this._handleDialogMouseDown);
+      this.ref.dialog.addEventListener('mouseup', this._handleDialogMouseUp);
+    } else {
+      this.setAttribute('dialog-fallback', '');
+      let backdrop = document.createElement('div');
+      backdrop.className = 'uc-backdrop';
+      this.appendChild(backdrop);
+      backdrop.addEventListener('click', this._handleBackdropClick);
+    }
+
+    this.sub('*modalActive', (modalActive) => {
+      if (this.$.isOpen !== modalActive) {
+        this.$.isOpen = modalActive;
+      }
+
+      if (modalActive && this.cfg.modalScrollLock) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = '';
+      }
+    });
+
+    this.subConfigValue('modalBackdropStrokes', (val) => {
+      if (val) {
+        this.setAttribute('strokes', '');
+      } else {
+        this.removeAttribute('strokes');
+      }
+    });
+
+    this.sub('isOpen', (isOpen) => {
+      if (isOpen) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    });
+  }
+
+  destroyCallback() {
+    super.destroyCallback();
+    document.body.style.overflow = '';
+    this._mouseDownTarget = undefined;
+    this.ref.dialog.removeEventListener('close', this._handleDialogClose);
+    this.ref.dialog.removeEventListener('mousedown', this._handleDialogMouseDown);
+    this.ref.dialog.removeEventListener('mouseup', this._handleDialogMouseUp);
+  }
+}
+
+Modal.template = /* HTML */ `
+  <dialog ref="dialog">
+    <slot></slot>
+  </dialog>
+`;

package/blocks/Modal/modal.css

@@ -0,0 +1,92 @@
+:where([uc-modal]) {
+  --modal-max-content-height: calc(
+    var(--uploadcare-blocks-window-height, 100vh) - 4 * var(--uc-padding) - var(--uc-button-size)
+  );
+  --modal-content-height-fill: var(--uploadcare-blocks-window-height, 100vh);
+}
+
+:where([uc-modal])[dialog-fallback] {
+  --uc-z-max: 2147483647;
+
+  position: fixed;
+  z-index: var(--uc-z-max);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  inset: 0;
+}
+
+:where([uc-modal])[dialog-fallback] dialog[open] {
+  z-index: var(--uc-z-max);
+  pointer-events: auto;
+}
+
+:where([uc-modal])[dialog-fallback] dialog[open] + .uc-backdrop {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: calc(var(--uc-z-max) - 1);
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  background-color: oklch(0 0 0 / 0.1);
+  pointer-events: auto;
+}
+
+:where([uc-modal])[strokes][dialog-fallback] dialog[open] + .uc-backdrop {
+  background-image: var(--modal-backdrop-background-image);
+}
+
+@supports selector(dialog::backdrop) {
+  :where([uc-modal]) > dialog::backdrop {
+    /* backdrop don't inherit theme properties */
+    background-color: oklch(0 0 0 / 0.1);
+  }
+  :where([uc-modal])[strokes] > dialog::backdrop {
+    /* TODO: it's not working, fix it */
+    background-image: var(--modal-backdrop-background-image);
+  }
+}
+
+:where([uc-modal]) > dialog[open] {
+  transform: translateY(0px);
+  visibility: visible;
+  opacity: 1;
+}
+
+:where([uc-modal]) > dialog:not([open]) {
+  transform: translateY(20px);
+  visibility: hidden;
+  opacity: 0;
+}
+
+:where([uc-modal]) > dialog {
+  display: flex;
+  flex-direction: column;
+
+  /* there was `fit-content` but it doesn't reduce width after activity change */
+  width: max-content;
+  max-width: min(calc(100% - var(--uc-padding) * 2), calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2));
+  min-height: var(--uc-button-size);
+  max-height: calc(var(--uc-dialog-max-height) - var(--uc-padding) * 2);
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--uc-background);
+  border: 0;
+  border-radius: calc(var(--uc-radius) * 1.75);
+  box-shadow: var(--uc-dialog-shadow);
+  transition:
+    transform 0.4s ease,
+    opacity 0.4s ease;
+}
+
+@media only screen and (max-width: 430px), only screen and (max-height: 600px) {
+  :where([uc-modal]) > dialog > .uc-content {
+    height: var(--modal-max-content-height);
+  }
+}

package/blocks/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,10 @@
+export class ProgressBar extends Block {
+    /** @type {Number} */
+    _value: number;
+    init$: any;
+}
+export namespace ProgressBar {
+    let template: string;
+}
+import { Block } from '../../abstract/Block.js';
+//# sourceMappingURL=ProgressBar.d.ts.map

package/blocks/ProgressBar/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAEA;IACE,qBAAqB;IACrB,eAAW;IAEX,WAIE;CAyBH;;;;sBAnCqB,yBAAyB"}

package/blocks/ProgressBar/ProgressBar.js

@@ -0,0 +1,38 @@
+import { Block } from '../../abstract/Block.js';
+
+export class ProgressBar extends Block {
+  /** @type {Number} */
+  _value = 0;
+
+  init$ = {
+    ...this.init$,
+    width: 0,
+    opacity: 0,
+  };
+
+  initCallback() {
+    super.initCallback();
+    this.defineAccessor('value', (value) => {
+      if (value === undefined) {
+        return;
+      }
+      const prevValue = this._value;
+      this._value = value;
+
+      if (value === 0 && prevValue > 0) {
+        this.ref.line.addEventListener('transitionend', () => {
+          this.style.setProperty('--l-width', this._value.toString());
+        });
+        return;
+      }
+
+      this.style.setProperty('--l-width', this._value.toString());
+    });
+
+    this.defineAccessor('visible', (visible) => {
+      this.ref.line.classList.toggle('uc-progress--hidden', !visible);
+    });
+  }
+}
+
+ProgressBar.template = /* HTML */ ` <div ref="line" class="uc-progress"></div> `;

package/blocks/ProgressBar/progress-bar.css

@@ -0,0 +1,25 @@
+uc-progress-bar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+uc-progress-bar .uc-progress {
+  width: calc(var(--l-width) * 1%);
+  height: 100%;
+  background-color: var(--uc-primary);
+  transform: translateX(0);
+  opacity: 1;
+  transition:
+    width 0.6s,
+    opacity 0.3s;
+}
+
+uc-progress-bar .uc-progress--hidden {
+  opacity: 0;
+}

package/blocks/ProgressBarCommon/ProgressBarCommon.d.ts

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

package/blocks/ProgressBarCommon/ProgressBarCommon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBarCommon.d.ts","sourceRoot":"","sources":["ProgressBarCommon.js"],"names":[],"mappings":"AAEA;IACE,WAME;CAgCH;;;;8BAzC6B,iCAAiC"}

package/blocks/ProgressBarCommon/ProgressBarCommon.js

@@ -0,0 +1,44 @@
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+
+export class ProgressBarCommon extends UploaderBlock {
+  init$ = {
+    ...this.init$,
+    visible: false,
+    value: 0,
+
+    '*commonProgress': 0,
+  };
+
+  initCallback() {
+    super.initCallback();
+    /** @private */
+    this._unobserveCollection = this.uploadCollection.observeProperties(() => {
+      let anyUploading = this.uploadCollection.items().some((id) => {
+        let item = this.uploadCollection.read(id);
+        return item.getValue('isUploading');
+      });
+
+      this.$.visible = anyUploading;
+    });
+
+    this.sub('visible', (visible) => {
+      if (visible) {
+        this.setAttribute('active', '');
+      } else {
+        this.removeAttribute('active');
+      }
+    });
+
+    this.sub('*commonProgress', (progress) => {
+      this.$.value = progress;
+    });
+  }
+
+  destroyCallback() {
+    super.destroyCallback();
+
+    this._unobserveCollection?.();
+  }
+}
+
+ProgressBarCommon.template = /* HTML */ ` <uc-progress-bar set="visible: visible; value: value"></uc-progress-bar> `;

package/blocks/ProgressBarCommon/progress-bar-common.css

@@ -0,0 +1,16 @@
+uc-progress-bar-common {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10000;
+  display: block;
+  height: 10px;
+  background-color: var(--uc-background);
+  transition: opacity 0.3s;
+}
+
+uc-progress-bar-common:not([active]) {
+  opacity: 0;
+  pointer-events: none;
+}

package/blocks/Range/Range.d.ts

@@ -0,0 +1,16 @@
+export class Range extends BaseComponent<any> {
+    constructor();
+    init$: {
+        cssLeft: string;
+        barActive: boolean;
+        value: number;
+        onChange: (e: any) => void;
+    };
+    /** @type {HTMLInputElement} */
+    _range: HTMLInputElement | undefined;
+}
+export namespace Range {
+    let template: string;
+}
+import { BaseComponent } from '@symbiotejs/symbiote';
+//# sourceMappingURL=Range.d.ts.map

package/blocks/Range/Range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["Range.js"],"names":[],"mappings":"AAEA;IAqC0C,cAAgB;IApCxD;;;;;MAUE;IAIA,+BAA+B;IAC/B,qCAA4B;CAe/B;;;;8BAjC6B,sBAAsB"}