@uploadcare/file-uploader 1.23.0 → 1.24.0-alpha.0

package/blocks/Modal/Modal.d.ts

@@ -1,43 +0,0 @@
-export class Modal extends Block {
-    static StateConsumerScope: string;
-    init$: {
-        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;
-    /**
-     * @private
-     * @type {import('../../abstract/managers/ModalManager.js').ModalCb}
-     */
-    private _handleModalOpen;
-    /**
-     * @private
-     * @type {import('../../abstract/managers/ModalManager.js').ModalCb}
-     */
-    private _handleModalClose;
-    /** @private */
-    private _handleModalCloseAll;
-    handleModalOpen: ((data: {
-        id: import("../../abstract/managers/ModalManager.js").ModalId;
-        modal: import("../../abstract/managers/ModalManager.js").ModalNode;
-    }) => void) | undefined;
-    handleModalClose: ((data: {
-        id: import("../../abstract/managers/ModalManager.js").ModalId;
-        modal: import("../../abstract/managers/ModalManager.js").ModalNode;
-    }) => void) | undefined;
-    handleModalCloseAll: (() => void) | undefined;
-}
-export namespace Modal {
-    let template: string;
-}
-import { Block } from '../../abstract/Block.js';
-//# sourceMappingURL=Modal.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAQA;IAEE,kCAAoC;IAIlC;;MAGC;IAGH,iCAEE;IAEF,yBAME;IAEF,+BAEE;IAEF,uBAAuB;IACvB,yBAA0B,GADd,KACe,UAGzB;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,uBAAwB,GADZ,KACa,UAIvB;IAEF,aAWC;IAED,aAOC;IAED;;;OAGG;IACH,yBAQC;IAED;;;OAGG;IACH,0BASC;IAED,eAAe;IACf,6BAUC;IAmBC;;;4BAAuD;IACvD;;;4BAAyD;IACzD,8CAA+D;CAmBlE;;;;sBAtJqB,yBAAyB"}

package/blocks/Modal/Modal.js

@@ -1,158 +0,0 @@
-// @ts-check
-import { Block } from '../../abstract/Block.js';
-import { ModalEvents } from '../../abstract/managers/ModalManager.js';
-import { EventType } from '../UploadCtxProvider/EventEmitter.js';
-
-/** @type {import('../../abstract/managers/ModalManager.js').ModalId | null} */
-let LAST_ACTIVE_MODAL_ID = null;
-
-export class Modal extends Block {
-  static styleAttrs = [...super.styleAttrs, 'uc-modal'];
-  static StateConsumerScope = 'modal';
-
-  constructor() {
-    super();
-    this.init$ = {
-      ...this.init$,
-      closeClicked: this._handleDialogClose,
-    };
-  }
-
-  _handleBackdropClick = () => {
-    this._closeDialog();
-  };
-
-  _closeDialog = () => {
-    this.modalManager?.close(this.id);
-
-    if (!this.modalManager.hasActiveModals) {
-      document.body.style.overflow = '';
-    }
-  };
-
-  _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.setAttribute('aria-modal', 'true');
-      this.ref.dialog.showModal();
-    } else {
-      this.ref.dialog.setAttribute('open', '');
-    }
-
-    if (this.cfg.modalScrollLock) {
-      document.body.style.overflow = 'hidden';
-    }
-  }
-
-  hide() {
-    if (this.ref.dialog.close) {
-      this.setAttribute('aria-modal', 'false');
-      this.ref.dialog.close();
-    } else {
-      this.ref.dialog.removeAttribute('open');
-    }
-  }
-
-  /**
-   * @private
-   * @type {import('../../abstract/managers/ModalManager.js').ModalCb}
-   */
-  _handleModalOpen({ id }) {
-    if (id === this.id) {
-      LAST_ACTIVE_MODAL_ID = id;
-      this.show();
-      this.emit(EventType.MODAL_OPEN, { modalId: id }, { debounce: true });
-    } else {
-      this.hide();
-    }
-  }
-
-  /**
-   * @private
-   * @type {import('../../abstract/managers/ModalManager.js').ModalCb}
-   */
-  _handleModalClose({ id }) {
-    if (id === this.id) {
-      this.hide();
-      this.emit(
-        EventType.MODAL_CLOSE,
-        { modalId: id, hasActiveModals: this.modalManager.hasActiveModals },
-        { debounce: true },
-      );
-    }
-  }
-
-  /** @private */
-  _handleModalCloseAll() {
-    this.hide();
-
-    if (LAST_ACTIVE_MODAL_ID === this.id) {
-      this.emit(
-        EventType.MODAL_CLOSE,
-        { modalId: LAST_ACTIVE_MODAL_ID, hasActiveModals: this.modalManager.hasActiveModals },
-        { debounce: true },
-      );
-    }
-  }
-
-  initCallback() {
-    super.initCallback();
-
-    this.modalManager?.registerModal(this.id, this);
-
-    this.ref.dialog.addEventListener('close', this._handleDialogClose);
-    this.ref.dialog.addEventListener('mousedown', this._handleDialogMouseDown);
-    this.ref.dialog.addEventListener('mouseup', this._handleDialogMouseUp);
-
-    this.subConfigValue('modalBackdropStrokes', (val) => {
-      if (val) {
-        this.setAttribute('strokes', '');
-      } else {
-        this.removeAttribute('strokes');
-      }
-    });
-
-    this.handleModalOpen = this._handleModalOpen.bind(this);
-    this.handleModalClose = this._handleModalClose.bind(this);
-    this.handleModalCloseAll = this._handleModalCloseAll.bind(this);
-
-    this.modalManager.subscribe(ModalEvents.OPEN, this.handleModalOpen);
-    this.modalManager.subscribe(ModalEvents.CLOSE, this.handleModalClose);
-    this.modalManager.subscribe(ModalEvents.CLOSE_ALL, this.handleModalCloseAll);
-  }
-
-  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);
-
-    this.modalManager.unsubscribe(ModalEvents.OPEN, this.handleModalOpen);
-    this.modalManager.unsubscribe(ModalEvents.CLOSE, this.handleModalClose);
-    this.modalManager.unsubscribe(ModalEvents.CLOSE_ALL, this.handleModalCloseAll);
-  }
-}
-
-Modal.template = /* HTML */ `
-  <dialog ref="dialog">
-    <slot></slot>
-  </dialog>
-`;

package/blocks/Modal/modal.css

@@ -1,45 +0,0 @@
-@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;
-  width: min(var(--uc-dialog-width), 100%);
-  max-width: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-width));
-  min-height: var(--uc-button-size);
-  max-height: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-height));
-  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;
-}
-
-:where(.uc-contrast) :where([uc-modal]) > dialog {
-  outline: 1px solid var(--uc-border);
-}

package/blocks/ProgressBar/ProgressBar.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["ProgressBar.js"],"names":[],"mappings":"AAGA;IACE,qBAAqB;IACrB,eAAW;IAEX,qBAAqB;IACrB,mBAAe;IAEf,sBAAsB;IACtB,kBAAgB;IAId;;;MAIC;CAqCJ;;;;sBAvDqB,yBAAyB"}

package/blocks/ProgressBar/ProgressBar.js

@@ -1,62 +0,0 @@
-// @ts-check
-import { Block } from '../../abstract/Block.js';
-
-export class ProgressBar extends Block {
-  /** @type {Number} */
-  _value = 0;
-
-  /** @type {Number} */
-  _prevValue = 0;
-
-  /** @type {Boolean} */
-  _visible = true;
-
-  constructor() {
-    super();
-    this.init$ = {
-      ...this.init$,
-      width: 0,
-      opacity: 0,
-    };
-  }
-
-  initCallback() {
-    super.initCallback();
-    const handleFakeProgressAnimation = () => {
-      const fakeProgressLine = this.ref.fakeProgressLine;
-      if (!this._visible) {
-        fakeProgressLine.classList.add('uc-fake-progress--hidden');
-        return;
-      }
-      if (this._value > 0) {
-        fakeProgressLine.classList.add('uc-fake-progress--hidden');
-      }
-    };
-
-    this.ref.fakeProgressLine.addEventListener('animationiteration', handleFakeProgressAnimation);
-
-    this.defineAccessor(
-      'value',
-      /** @param {number} value */ (value) => {
-        if (value === undefined || value === null) return;
-        this._prevValue = this._value;
-        this._value = value;
-        if (!this._visible) return;
-        this.style.setProperty('--l-progress-value', this._value.toString());
-      },
-    );
-
-    this.defineAccessor(
-      'visible',
-      /** @param {boolean} visible */ (visible) => {
-        this._visible = visible;
-        this.classList.toggle('uc-progress-bar--hidden', !visible);
-      },
-    );
-  }
-}
-
-ProgressBar.template = /* HTML */ `
-  <div ref="fakeProgressLine" class="uc-fake-progress"></div>
-  <div ref="realProgressLine" class="uc-progress"></div>
-`;

package/blocks/ProgressBar/progress-bar.css

@@ -1,62 +0,0 @@
-uc-progress-bar {
-  --l-progress-value: 0;
-
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: none;
-  transition: opacity 0.3s;
-  opacity: 1;
-}
-
-uc-progress-bar.uc-progress-bar--hidden {
-  opacity: 0;
-}
-
-uc-progress-bar .uc-progress {
-  position: absolute;
-  width: calc(var(--l-progress-value) * 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;
-}
-
-uc-progress-bar .uc-fake-progress {
-  --l-fake-progress-width: 30;
-
-  position: absolute;
-  width: calc(var(--l-fake-progress-width) * 1%);
-  height: 100%;
-  background-color: var(--uc-primary);
-  animation: fake-progress-animation 1s ease-in-out infinite;
-  opacity: 1;
-  transition: opacity 0.3s;
-  z-index: 1;
-}
-
-uc-progress-bar .uc-fake-progress--hidden {
-  opacity: 0;
-  animation: none;
-}
-
-@keyframes fake-progress-animation {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(calc(100 / var(--l-fake-progress-width) * 100 * 1%));
-  }
-}

package/blocks/ProgressBarCommon/ProgressBarCommon.d.ts

@@ -1,8 +0,0 @@
-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

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

package/blocks/ProgressBarCommon/ProgressBarCommon.js

@@ -1,44 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

package/blocks/Range/Range.js

@@ -1,44 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,35 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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);
-}