@uploadcare/file-uploader 0.50.1-alpha.2

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

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

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

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

@@ -0,0 +1,20 @@
+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;
+    };
+    _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

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

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

@@ -0,0 +1,90 @@
+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': '',
+    };
+
+    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 || '';
+    });
+  }
+
+  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">
+    <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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"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;CAM3B;;;;sBAvKqB,kCAAkC"}

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

@@ -0,0 +1,178 @@
+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 = '0.2';
+    }
+    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() {
+    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

@@ -0,0 +1,15 @@
+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";
+//# sourceMappingURL=index.d.ts.map

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

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

package/blocks/CloudImageEditor/src/index.js

@@ -0,0 +1,14 @@
+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';

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

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * 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) | undefined): () => void;
+//# sourceMappingURL=applyFocusVisiblePolyfill.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"applyFocusVisiblePolyfill.d.ts","sourceRoot":"","sources":["applyFocusVisiblePolyfill.js"],"names":[],"mappings":"AAgDA;;;;;;;GAOG;AACH,iDAJW,QAAQ,GAAG,UAAU,6BACN,OAAO,MAAM,WAAW,KAAK,IAAI,2BA0M1D"}