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

package/blocks/CloudImageEditor/src/css/icons.css

@@ -1,12 +0,0 @@
-:where([uc-cloud-image-editor]) uc-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-:where([uc-cloud-image-editor]) uc-icon svg {
-  width: calc(var(--uc-button-size) / 2);
-  height: calc(var(--uc-button-size) / 2);
-}

package/blocks/CloudImageEditor/src/css/index.css

@@ -1,2 +0,0 @@
-@import url('common.css');
-@import url('icons.css');

package/blocks/CloudImageEditor/src/elements/button/BtnUi.d.ts

@@ -1,21 +0,0 @@
-export class BtnUi extends Block {
-    _iconReversed: boolean;
-    _iconSingle: boolean;
-    _iconHidden: boolean;
-    init$: {
-        text: string;
-        icon: string;
-        iconCss: string;
-        theme: null;
-        'aria-role': string;
-        'aria-controls': string;
-        'title-prop': string;
-    };
-    _iconCss(): string;
-    set reverse(val: any);
-}
-export namespace BtnUi {
-    let template: string;
-}
-import { Block } from '../../../../../abstract/Block.js';
-//# sourceMappingURL=BtnUi.d.ts.map

package/blocks/CloudImageEditor/src/elements/button/BtnUi.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BtnUi.d.ts","sourceRoot":"","sources":["BtnUi.js"],"names":[],"mappings":"AAGA;IAII,uBAA0B;IAC1B,qBAAwB;IACxB,qBAAwB;IAExB;;;;;;;;MASC;IAWH,mBAOC;IAsCD,sBAQC;CACF;;;;sBArFqB,kCAAkC"}

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

@@ -1,99 +0,0 @@
-import { Block } from '../../../../../abstract/Block.js';
-import { classNames } from '../../lib/classNames.js';
-
-export class BtnUi extends Block {
-  constructor() {
-    super();
-
-    this._iconReversed = false;
-    this._iconSingle = false;
-    this._iconHidden = false;
-
-    this.init$ = {
-      ...this.init$,
-      text: '',
-      icon: '',
-      iconCss: this._iconCss(),
-      theme: null,
-      'aria-role': '',
-      'aria-controls': '',
-      'title-prop': '',
-    };
-
-    this.defineAccessor('active', (active) => {
-      if (active) {
-        this.setAttribute('active', '');
-      } else {
-        this.removeAttribute('active');
-      }
-    });
-  }
-
-  _iconCss() {
-    return classNames('uc-icon', {
-      'uc-icon_left': !this._iconReversed,
-      'uc-icon_right': this._iconReversed,
-      'uc-icon_hidden': this._iconHidden,
-      'uc-icon_single': this._iconSingle,
-    });
-  }
-
-  initCallback() {
-    super.initCallback();
-
-    this.sub('icon', (iconName) => {
-      this._iconSingle = !this.$.text;
-      this._iconHidden = !iconName;
-      this.$.iconCss = this._iconCss();
-    });
-
-    this.sub('theme', (theme) => {
-      if (theme !== 'custom') {
-        this.className = `uc-${theme}`;
-      }
-    });
-
-    this.sub('text', (txt) => {
-      this._iconSingle = false;
-    });
-
-    if (!this.hasAttribute('theme')) {
-      this.setAttribute('theme', 'default');
-    }
-
-    this.defineAccessor('aria-role', (value) => {
-      this.$['aria-role'] = value || '';
-    });
-
-    this.defineAccessor('aria-controls', (value) => {
-      this.$['aria-controls'] = value || '';
-    });
-
-    this.defineAccessor('title-prop', (value) => {
-      this.$['title-prop'] = value || '';
-    });
-  }
-
-  set reverse(val) {
-    if (this.hasAttribute('reverse')) {
-      this.style.flexDirection = 'row-reverse';
-      this._iconReversed = true;
-    } else {
-      this._iconReversed = false;
-      this.style.flexDirection = null;
-    }
-  }
-}
-
-BtnUi.bindAttributes({ text: 'text', icon: 'icon', reverse: 'reverse', theme: 'theme' });
-
-BtnUi.template = /* HTML */ `
-  <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/CloudImageEditor/src/elements/line-loader/LineLoaderUi.d.ts

@@ -1,11 +0,0 @@
-export class LineLoaderUi extends Block {
-    _active: boolean;
-    _handleTransitionEndRight: () => void;
-    _start(): void;
-    _stop(): void;
-}
-export namespace LineLoaderUi {
-    let template: string;
-}
-import { Block } from '../../../../../abstract/Block.js';
-//# sourceMappingURL=LineLoaderUi.d.ts.map

package/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LineLoaderUi.d.ts","sourceRoot":"","sources":["LineLoaderUi.js"],"names":[],"mappings":"AAEA;IAII,iBAAoB;IAEpB,sCAMC;IAgBH,eAUC;IAED,cAEC;CACF;;;;sBA7CqB,kCAAkC"}

package/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.js

@@ -1,52 +0,0 @@
-import { Block } from '../../../../../abstract/Block.js';
-
-export class LineLoaderUi extends Block {
-  constructor() {
-    super();
-
-    this._active = false;
-
-    this._handleTransitionEndRight = () => {
-      let lineEl = this.ref['line-el'];
-      lineEl.style.transition = `initial`;
-      lineEl.style.opacity = '0';
-      lineEl.style.transform = `translateX(-101%)`;
-      this._active && this._start();
-    };
-  }
-
-  initCallback() {
-    super.initCallback();
-    this.defineAccessor('active', (active) => {
-      if (typeof active === 'boolean') {
-        if (active) {
-          this._start();
-        } else {
-          this._stop();
-        }
-      }
-    });
-  }
-
-  _start() {
-    this._active = true;
-    let { width } = this.getBoundingClientRect();
-    let lineEl = this.ref['line-el'];
-    lineEl.style.transition = `transform 1s`;
-    lineEl.style.opacity = '1';
-    lineEl.style.transform = `translateX(${width}px)`;
-    lineEl.addEventListener('transitionend', this._handleTransitionEndRight, {
-      once: true,
-    });
-  }
-
-  _stop() {
-    this._active = false;
-  }
-}
-
-LineLoaderUi.template = /* HTML */ `
-  <div class="uc-inner">
-    <div class="uc-line" ref="line-el"></div>
-  </div>
-`;

package/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.d.ts

@@ -1,17 +0,0 @@
-export class PresenceToggle extends Block {
-    _visible: boolean;
-    _visibleStyle: string | undefined;
-    _hiddenStyle: string | undefined;
-    _externalTransitions: boolean;
-    _handleVisible(): void;
-}
-export namespace PresenceToggle {
-    let template: string;
-}
-export type Style = {
-    transition?: string | undefined;
-    visible?: string | undefined;
-    hidden?: string | undefined;
-};
-import { Block } from '../../../../../abstract/Block.js';
-//# sourceMappingURL=PresenceToggle.d.ts.map

package/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PresenceToggle.d.ts","sourceRoot":"","sources":["PresenceToggle.js"],"names":[],"mappings":"AAiBA;IAII,kBAAqB;IACrB,kCAA0C;IAC1C,iCAAwC;IACxC,8BAAiC;IAqBnC,uBAQC;CAgBF;;;;;;;;;sBApEqB,kCAAkC"}

package/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.js

@@ -1,71 +0,0 @@
-import { applyClassNames } from '../../lib/classNames.js';
-import { Block } from '../../../../../abstract/Block.js';
-
-/**
- * @typedef {Object} Style
- * @property {String} [transition]
- * @property {String} [visible]
- * @property {String} [hidden]
- */
-
-/** @type {Style} */
-const DEFAULT_STYLE = {
-  transition: 'uc-transition',
-  visible: 'uc-visible',
-  hidden: 'uc-hidden',
-};
-
-export class PresenceToggle extends Block {
-  constructor() {
-    super();
-
-    this._visible = false;
-    this._visibleStyle = DEFAULT_STYLE.visible;
-    this._hiddenStyle = DEFAULT_STYLE.hidden;
-    this._externalTransitions = false;
-
-    this.defineAccessor('styles', (styles) => {
-      if (!styles) {
-        return;
-      }
-      this._externalTransitions = true;
-      this._visibleStyle = styles.visible;
-      this._hiddenStyle = styles.hidden;
-    });
-
-    this.defineAccessor('visible', (visible) => {
-      if (typeof visible !== 'boolean') {
-        return;
-      }
-
-      this._visible = visible;
-      this._handleVisible();
-    });
-  }
-
-  _handleVisible() {
-    this.style.visibility = this._visible ? 'inherit' : 'hidden';
-    applyClassNames(this, {
-      [DEFAULT_STYLE.transition]: !this._externalTransitions,
-      [this._visibleStyle]: this._visible,
-      [this._hiddenStyle]: !this._visible,
-    });
-    this.setAttribute('aria-hidden', this._visible ? 'false' : 'true');
-  }
-
-  initCallback() {
-    super.initCallback();
-
-    this.classList.toggle('uc-initial', true);
-
-    if (!this._externalTransitions) {
-      this.classList.add(DEFAULT_STYLE.transition);
-    }
-
-    this._handleVisible();
-    setTimeout(() => {
-      this.classList.toggle('uc-initial', false);
-    }, 0);
-  }
-}
-PresenceToggle.template = /* HTML */ `<slot></slot> `;

package/blocks/CloudImageEditor/src/elements/slider/SliderUi.d.ts

@@ -1,16 +0,0 @@
-export class SliderUi extends Block {
-    init$: any;
-    _zero: any;
-    _observer: ResizeObserver | undefined;
-    _thumbSize: number | undefined;
-    _updateValue(value: any): void;
-    _updateZeroDot(value: any): void;
-    _updateSteps(): void;
-    _zeroDotEl: HTMLDivElement | undefined;
-    _stepsCount: any;
-}
-export namespace SliderUi {
-    let template: string;
-}
-import { Block } from '../../../../../abstract/Block.js';
-//# sourceMappingURL=SliderUi.d.ts.map

package/blocks/CloudImageEditor/src/elements/slider/SliderUi.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SliderUi.d.ts","sourceRoot":"","sources":["SliderUi.js"],"names":[],"mappings":"AAEA;IACE,WAiBE;IA6BE,WAAiB;IAenB,sCAIE;IAGF,+BAAgG;IAyBlG,+BAWC;IAED,iCAgBC;IAED,qBAmCC;IALC,uCAA2B;IAI3B,iBAAwB;CAO3B;;;;sBAxKqB,kCAAkC"}

package/blocks/CloudImageEditor/src/elements/slider/SliderUi.js

@@ -1,179 +0,0 @@
-import { Block } from '../../../../../abstract/Block.js';
-
-export class SliderUi extends Block {
-  init$ = {
-    ...this.init$,
-    disabled: false,
-    min: 0,
-    max: 100,
-    onInput: null,
-    onChange: null,
-    defaultValue: null,
-    'on.sliderInput': () => {
-      let value = parseInt(this.ref['input-el'].value, 10);
-      this._updateValue(value);
-      this.$.onInput && this.$.onInput(value);
-    },
-    'on.sliderChange': () => {
-      let value = parseInt(this.ref['input-el'].value, 10);
-      this.$.onChange && this.$.onChange(value);
-    },
-  };
-
-  constructor() {
-    super();
-    this.setAttribute('with-effects', '');
-  }
-
-  initCallback() {
-    super.initCallback();
-
-    this.defineAccessor('disabled', (disabled) => {
-      this.$.disabled = disabled;
-    });
-
-    this.defineAccessor('min', (min) => {
-      this.$.min = min;
-    });
-
-    this.defineAccessor('max', (max) => {
-      this.$.max = max;
-    });
-
-    this.defineAccessor('defaultValue', (defaultValue) => {
-      this.$.defaultValue = defaultValue;
-      this.ref['input-el'].value = defaultValue;
-      this._updateValue(defaultValue);
-    });
-
-    this.defineAccessor('zero', (zero) => {
-      this._zero = zero;
-    });
-
-    this.defineAccessor('onInput', (onInput) => {
-      if (!onInput) return;
-      this.$.onInput = onInput;
-    });
-
-    this.defineAccessor('onChange', (onChange) => {
-      if (!onChange) return;
-      this.$.onChange = onChange;
-    });
-
-    this._updateSteps();
-
-    this._observer = new ResizeObserver(() => {
-      this._updateSteps();
-      let value = parseInt(this.ref['input-el'].value, 10);
-      this._updateValue(value);
-    });
-    this._observer.observe(this);
-
-    this._thumbSize = parseInt(window.getComputedStyle(this).getPropertyValue('--l-thumb-size'), 10);
-
-    setTimeout(() => {
-      let value = parseInt(this.ref['input-el'].value, 10);
-      this._updateValue(value);
-    }, 0);
-
-    this.sub('disabled', (disabled) => {
-      let el = this.ref['input-el'];
-      if (disabled) {
-        el.setAttribute('disabled', 'disabled');
-      } else {
-        el.removeAttribute('disabled');
-      }
-    });
-
-    let inputEl = this.ref['input-el'];
-    inputEl.addEventListener('focus', () => {
-      this.style.setProperty('--color-effect', 'var(--hover-color-rgb)');
-    });
-    inputEl.addEventListener('blur', () => {
-      this.style.setProperty('--color-effect', 'var(--idle-color-rgb)');
-    });
-  }
-
-  _updateValue(value) {
-    this._updateZeroDot(value);
-
-    let { width } = this.getBoundingClientRect();
-    let slope = 100 / (this.$.max - this.$.min);
-    let mappedValue = slope * (value - this.$.min);
-    let offset = (mappedValue * (width - this._thumbSize)) / 100;
-
-    window.requestAnimationFrame(() => {
-      this.ref['thumb-el'].style.transform = `translateX(${offset}px)`;
-    });
-  }
-
-  _updateZeroDot(value) {
-    if (!this._zeroDotEl) {
-      return;
-    }
-    if (value === this._zero) {
-      this._zeroDotEl.style.opacity = '0';
-    } else {
-      this._zeroDotEl.style.opacity = '1';
-    }
-    let { width } = this.getBoundingClientRect();
-    let slope = 100 / (this.$.max - this.$.min);
-    let mappedValue = slope * (this._zero - this.$.min);
-    let offset = (mappedValue * (width - this._thumbSize)) / 100;
-    window.requestAnimationFrame(() => {
-      this._zeroDotEl.style.transform = `translateX(${offset}px)`;
-    });
-  }
-
-  _updateSteps() {
-    const STEP_GAP = 15;
-
-    let stepsEl = this.ref['steps-el'];
-    let { width } = stepsEl.getBoundingClientRect();
-    let half = Math.ceil(width / 2);
-    let count = Math.ceil(half / STEP_GAP) - 2;
-
-    if (this._stepsCount === count) {
-      return;
-    }
-
-    let fr = document.createDocumentFragment();
-    let minorStepEl = document.createElement('div');
-    let borderStepEl = document.createElement('div');
-    minorStepEl.className = 'uc-minor-step';
-    borderStepEl.className = 'uc-border-step';
-    fr.appendChild(borderStepEl);
-    for (let i = 0; i < count; i++) {
-      fr.appendChild(minorStepEl.cloneNode());
-    }
-    fr.appendChild(borderStepEl.cloneNode());
-    for (let i = 0; i < count; i++) {
-      fr.appendChild(minorStepEl.cloneNode());
-    }
-    fr.appendChild(borderStepEl.cloneNode());
-
-    let zeroDotEl = document.createElement('div');
-    zeroDotEl.className = 'uc-zero-dot';
-    fr.appendChild(zeroDotEl);
-    this._zeroDotEl = zeroDotEl;
-
-    stepsEl.innerHTML = '';
-    stepsEl.appendChild(fr);
-    this._stepsCount = count;
-  }
-
-  destroyCallback() {
-    super.destroyCallback();
-    this._observer?.disconnect();
-  }
-}
-SliderUi.template = /* HTML */ `
-  <div class="uc-steps" ref="steps-el"></div>
-  <div ref="thumb-el" class="uc-thumb"></div>
-  <input
-    class="uc-input"
-    type="range"
-    ref="input-el"
-    set="oninput: on.sliderInput; onchange: on.sliderChange; @min: min; @max: max; @value: defaultValue;"
-  />
-`;

package/blocks/CloudImageEditor/src/index.d.ts

@@ -1,16 +0,0 @@
-export { CloudImageEditorBlock } from "./CloudImageEditorBlock.js";
-export { CropFrame } from "./CropFrame.js";
-export { EditorCropButtonControl } from "./EditorCropButtonControl.js";
-export { EditorFilterControl } from "./EditorFilterControl.js";
-export { EditorOperationControl } from "./EditorOperationControl.js";
-export { EditorImageCropper } from "./EditorImageCropper.js";
-export { EditorImageFader } from "./EditorImageFader.js";
-export { EditorScroller } from "./EditorScroller.js";
-export { EditorSlider } from "./EditorSlider.js";
-export { EditorToolbar } from "./EditorToolbar.js";
-export { BtnUi } from "./elements/button/BtnUi.js";
-export { LineLoaderUi } from "./elements/line-loader/LineLoaderUi.js";
-export { PresenceToggle } from "./elements/presence-toggle/PresenceToggle.js";
-export { SliderUi } from "./elements/slider/SliderUi.js";
-export { EditorAspectRatioButtonControl, EditorFreeformButtonControl } from "./EditorAspectRatioButtonControl.js";
-//# sourceMappingURL=index.d.ts.map

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

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

package/blocks/CloudImageEditor/src/index.js

@@ -1,15 +0,0 @@
-export { CloudImageEditorBlock } from './CloudImageEditorBlock.js';
-export { CropFrame } from './CropFrame.js';
-export { EditorCropButtonControl } from './EditorCropButtonControl.js';
-export { EditorAspectRatioButtonControl, EditorFreeformButtonControl } from './EditorAspectRatioButtonControl.js';
-export { EditorFilterControl } from './EditorFilterControl.js';
-export { EditorOperationControl } from './EditorOperationControl.js';
-export { EditorImageCropper } from './EditorImageCropper.js';
-export { EditorImageFader } from './EditorImageFader.js';
-export { EditorScroller } from './EditorScroller.js';
-export { EditorSlider } from './EditorSlider.js';
-export { EditorToolbar } from './EditorToolbar.js';
-export { BtnUi } from './elements/button/BtnUi.js';
-export { LineLoaderUi } from './elements/line-loader/LineLoaderUi.js';
-export { PresenceToggle } from './elements/presence-toggle/PresenceToggle.js';
-export { SliderUi } from './elements/slider/SliderUi.js';

package/blocks/CloudImageEditor/src/lib/FocusVisible.d.ts

@@ -1,15 +0,0 @@
-export class FocusVisible {
-    /**
-     * @param {boolean} focusVisible
-     * @param {HTMLElement} element
-     */
-    static handleFocusVisible(focusVisible: boolean, element: HTMLElement): void;
-    /** @param {ShadowRoot | Document} scope */
-    static register(scope: ShadowRoot | Document): void;
-    /** @param {Document | ShadowRoot} scope */
-    static unregister(scope: Document | ShadowRoot): void;
-}
-export namespace FocusVisible {
-    let _destructors: WeakMap<WeakKey, any>;
-}
-//# sourceMappingURL=FocusVisible.d.ts.map

package/blocks/CloudImageEditor/src/lib/FocusVisible.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FocusVisible.d.ts","sourceRoot":"","sources":["FocusVisible.js"],"names":[],"mappings":"AAEA;IACE;;;OAGG;IACH,wCAHW,OAAO,WACP,WAAW,QASrB;IAED,2CAA2C;IAC3C,uBADY,UAAU,GAAG,QAAQ,QAGhC;IAED,2CAA2C;IAC3C,yBADY,QAAQ,GAAG,UAAU,QAQhC;CACF"}

package/blocks/CloudImageEditor/src/lib/FocusVisible.js

@@ -1,33 +0,0 @@
-import { applyFocusVisiblePolyfill } from './applyFocusVisiblePolyfill.js';
-
-export class FocusVisible {
-  /**
-   * @param {boolean} focusVisible
-   * @param {HTMLElement} element
-   */
-  static handleFocusVisible(focusVisible, element) {
-    if (focusVisible) {
-      let customOutline = element.style.getPropertyValue('--focus-visible-outline');
-      element.style.outline = customOutline || '2px solid var(--color-focus-ring)';
-    } else {
-      element.style.outline = 'none';
-    }
-  }
-
-  /** @param {ShadowRoot | Document} scope */
-  static register(scope) {
-    FocusVisible._destructors.set(scope, applyFocusVisiblePolyfill(scope, FocusVisible.handleFocusVisible));
-  }
-
-  /** @param {Document | ShadowRoot} scope */
-  static unregister(scope) {
-    if (!FocusVisible._destructors.has(scope)) {
-      return;
-    }
-    let removeFocusVisiblePolyfill = FocusVisible._destructors.get(scope);
-    removeFocusVisiblePolyfill();
-    FocusVisible._destructors.delete(scope);
-  }
-}
-
-FocusVisible._destructors = new WeakMap();

package/blocks/CloudImageEditor/src/lib/applyFocusVisiblePolyfill.d.ts

@@ -1,10 +0,0 @@
-/**
- * Applies the :focus-visible polyfill at the given scope. A scope, in this case, is either the top-level Document or a
- * Shadow Root.
- *
- * @param {Document | ShadowRoot} scope
- * @param {(focusVisible: boolean, el: EventTarget) => void} [callback]
- * @see https://github.com/WICG/focus-visible
- */
-export function applyFocusVisiblePolyfill(scope: Document | ShadowRoot, callback?: (focusVisible: boolean, el: EventTarget) => void): () => void;
-//# sourceMappingURL=applyFocusVisiblePolyfill.d.ts.map

package/blocks/CloudImageEditor/src/lib/applyFocusVisiblePolyfill.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"applyFocusVisiblePolyfill.d.ts","sourceRoot":"","sources":["applyFocusVisiblePolyfill.js"],"names":[],"mappings":"AAgDA;;;;;;;GAOG;AACH,iDAJW,QAAQ,GAAG,UAAU,aACrB,CAAC,YAAY,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,KAAK,IAAI,cA0M1D"}