@uploadcare/file-uploader 1.3.0-alpha.4 → 1.3.0-alpha.5

package/abstract/Block.d.ts

@@ -89,6 +89,6 @@ export class Block extends Symbiote<any> {
     /** @param {unknown[]} args */
     debugPrint(...args: unknown[]): void;
 }
-import { Symbiote } from '@symbiotejs/symbiote';
+import { Symbiote } from '../symbiote.js';
 import { A11y } from './a11y.js';
 //# sourceMappingURL=Block.d.ts.map

package/abstract/Block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["Block.js"],"names":[],"mappings":"AAuBA;IACE,4BAA4B;IAC5B,2BADW,MAAM,GAAG,IAAI,CACS;IAEjC,uBAAuB;IACvB,mBADW,MAAM,EAAE,CACI;IA4TvB,6BAA6B;IAC7B,4CAQC;IAjRD,cAUC;IA5DD,iBAAiB;IACjB,kCAAuB;IAEvB,wDAAwD;IACxD,cADW,OAAO,oBAAoB,EAAE,YAAY,CAChC;IAEpB,UAAmB;IAEnB;;;;OAIG;IACH,8BAHW;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,UAiB5C;IAED;;;;;OAKG;IACH,kBAIC;IAED;;;;OAIG;IACH,wBAJW,MAAM,YACN,MAAM,IAAI,QAKpB;IAIC,uDAAuD;IACvD,mBADW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CACjB;IASpC;;;;OAIG;IACH,WAJW,UAAU,CAAC,OAAO,6CAA6C,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,YACzF,UAAU,CAAC,OAAO,6CAA6C,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,YACzF,UAAU,CAAC,OAAO,6CAA6C,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,QASnG;IAED;;;OAGG;IACH,wBAHW,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,WAUnC;IAED;;;OAGG;IACH,oCAFW,GAAG,QASb;IAqED;;;OAGG;IACH,4BAEC;IAED;;;OAGG;IACH,kCAEC;IAED,yBAAyB;IACzB,iCAEC;IAsBD;;;;OAIG;IACH,qCAIC;IAED;;;;OAIG;IACH,iCAHa,OAAO,QAAQ,CA6B3B;IAED,iDAAiD;IACjD,yCA8BC;IA3BG,eAAe;IACf,mBAuBE;IAKN;;;;OAIG;IACH,eAJmD,CAAC,SAAvC,MAAO,OAAO,UAAU,EAAE,UAAW,OACvC,CAAC,YACD,CAAC,KAAK,EAAE,OAAO,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,QAQ3D;IAED,8BAA8B;IAC9B,oBADY,OAAO,EAAE,QAYpB;CAYF;yBAjWsC,sBAAsB;qBAaxC,WAAW"}
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["Block.js"],"names":[],"mappings":"AAoBA;IACE,4BAA4B;IAC5B,2BADW,MAAM,GAAG,IAAI,CACS;IAEjC,uBAAuB;IACvB,mBADW,MAAM,EAAE,CACI;IAkUvB,6BAA6B;IAC7B,4CAQC;IAvRD,cAOC;IAzDD,iBAAiB;IACjB,kCAAuB;IAEvB,wDAAwD;IACxD,cADW,OAAO,oBAAoB,EAAE,YAAY,CAChC;IAEpB,UAAmB;IAEnB;;;;OAIG;IACH,8BAHW;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,UAiB5C;IAED;;;;;OAKG;IACH,kBAIC;IAED;;;;OAIG;IACH,wBAJW,MAAM,YACN,MAAM,IAAI,QAKpB;IAIC,uDAAuD;IACvD,mBADW,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;QAAE,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CACjB;IAMpC;;;;OAIG;IACH,WAJW,UAAU,CAAC,OAAO,6CAA6C,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,YACzF,UAAU,CAAC,OAAO,6CAA6C,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,YACzF,UAAU,CAAC,OAAO,6CAA6C,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,QASnG;IAED;;;OAGG;IACH,wBAHW,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,WAUnC;IAED;;;OAGG;IACH,oCAFW,GAAG,QASb;IA8ED;;;OAGG;IACH,4BAEC;IAED;;;OAGG;IACH,kCAEC;IAED,yBAAyB;IACzB,iCAEC;IAsBD;;;;OAIG;IACH,qCAIC;IAED;;;;OAIG;IACH,iCAHa,OAAO,QAAQ,CA6B3B;IAED,iDAAiD;IACjD,yCA8BC;IA3BG,eAAe;IACf,mBAuBE;IAKN;;;;OAIG;IACH,eAJmD,CAAC,SAAvC,MAAO,OAAO,UAAU,EAAE,UAAW,OACvC,CAAC,YACD,CAAC,KAAK,EAAE,OAAO,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,QAQ3D;IAED,8BAA8B;IAC9B,oBADY,OAAO,EAAE,QAYpB;CAYF;yBApWqD,gBAAgB;qBAWjD,WAAW"}

package/abstract/Block.js

@@ -1,7 +1,5 @@
 // @ts-check
-import { DICT, PubSub, Symbiote } from '@symbiotejs/symbiote';
-// @ts-ignore - something wrong with the tsd
-import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
+import { DICT, PubSub, Symbiote, slotProcessor } from '../symbiote.js';
 import { initialConfig } from '../blocks/Config/initialConfig.js';
 import { EventEmitter } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { WindowHeightTracker } from '../utils/WindowHeightTracker.js';
@@ -15,7 +13,6 @@ import { LocaleManager, localeStateKey } from './LocaleManager.js';
 import { A11y } from './a11y.js';
 import { l10nProcessor } from './l10nProcessor.js';
 import { sharedConfigKey } from './sharedConfigKey.js';
-import { bindCompatibilityFallbackProcessor } from './bindCompatibilityFallbackProcessor.js';
 
 const TAG_PREFIX = 'uc-';
 const CTX_NAME_FALLBACK_ATTR = 'ctx-name';
@@ -85,9 +82,6 @@ export class Block extends Symbiote {
     // @ts-expect-error TODO: fix this
     this.addTemplateProcessor(l10nProcessor);
     this.addTemplateProcessor(slotProcessor);
-
-    // Prepend tpl processors with bind compatibility fallback processor
-    this.tplProcessors = new Set([bindCompatibilityFallbackProcessor, ...this.tplProcessors]);
   }
 
   /**
@@ -143,19 +137,28 @@ export class Block extends Symbiote {
       this.processInnerHtml = true;
     }
     if (this.requireCtxName) {
-      waitForAttribute({
-        element: this,
-        attribute: CTX_NAME_FALLBACK_ATTR,
-      }).then((result) => {
+      Promise.race([
+        waitForAttribute({
+          element: this,
+          attribute: DICT.CTX_NAME_ATTR,
+        }),
+        waitForAttribute({
+          element: this,
+          attribute: CTX_NAME_FALLBACK_ATTR,
+        }),
+      ]).then((result) => {
         if (result.success) {
-          const ctxName = result.value;
-          this.style.setProperty(DICT.CSS_CTX_PROP, `'${ctxName}'`);
-          this.setAttribute(DICT.CTX_NAME_ATTR, ctxName);
+          if (result.attribute === CTX_NAME_FALLBACK_ATTR) {
+            const ctxName = result.value;
+            this.style.setProperty(DICT.CSS_CTX_PROP, `'${ctxName}'`);
+          }
           // async wait for ctx attribute to be set, needed for Angular because it sets attributes after mount
           // TODO: should be moved to the symbiote core
           super.connectedCallback();
         } else {
-          console.error(`Attribute "${CTX_NAME_FALLBACK_ATTR}" is required and it is not set.`);
+          console.error(
+            `Attribute "${DICT.CTX_NAME_ATTR}" or "${CTX_NAME_FALLBACK_ATTR}" is required and it is not set.`,
+          );
         }
       });
     } else {

package/abstract/TypedCollection.js

@@ -1,4 +1,4 @@
-import { PubSub, UID } from '@symbiotejs/symbiote';
+import { PubSub, UID } from '../symbiote.js';
 import { TypedData } from './TypedData.js';
 
 export class TypedCollection {

package/abstract/TypedData.js

@@ -1,4 +1,4 @@
-import { PubSub, UID } from '@symbiotejs/symbiote';
+import { PubSub, UID } from '../symbiote.js';
 
 const MSG_NAME = '[Typed State] Wrong property name: ';
 const MSG_TYPE = '[Typed State] Wrong property type: ';

package/abstract/UploaderBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UploaderBlock.d.ts","sourceRoot":"","sources":["UploaderBlock.js"],"names":[],"mappings":"AAkBA;IACE,iBAAiB;IACjB,mCAAwB;IAExB,eAAe;IACf,mBAAmB;IAEnB;;;;;oCAbK,UAAS;mCACW,UAAU;6BAEjC,2BAA2B;;wCAGU,2BACxB;;;;;;MAMgB;IAE/B,eAAe;IACf,0BAOC;IA2BD;;;OAGG;IACH,qDAKC;IAED,mCAAmC;IACnC,6BAKC;IAED,4BAEC;IAED,iCAAiC;IACjC,wCAKC;IAYD,eAAe;IACf,qBA0BC;IAvBC,eAAe;IACf,6BAAiG;IAEjG,eAAe;IACf,uCAEC;IAmBH;;;OAGG;IACH,qBAkBC;IAED,eAAe;IACf,0BAYQ;IAER;;;;OAIG;IACH,gCAiCE;IAEF;;;OAGG;IACH,0CAyFE;IAEF,eAAe;IACf,mCAoBE;IAEF,eAAe;IACf,uBAqCC;IAED;;;OAGG;IACH,kCAHW,MAAM,qEAWhB;IAED;;;OAGG;IACH,oCAHa,OAAO,CAAC,OAAO,2BAA2B,EAAE,eAAe,CAAC,CA2BxE;IAED,kEAAkE;IAClE,iBADc,OAAO,sBAAsB,EAAE,eAAe,EAAE,CAK7D;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAla6B,oBAAoB;qCAWb,2BAA2B;kCAG9B,wBAAwB;kCADxB,wBAAwB;gCAD1B,sBAAsB"}
+{"version":3,"file":"UploaderBlock.d.ts","sourceRoot":"","sources":["UploaderBlock.js"],"names":[],"mappings":"AAkBA;IACE,iBAAiB;IACjB,mCAAwB;IAExB,eAAe;IACf,mBAAmB;IAEnB;;;;;oCAbU,UAAU;mCACW,UAAU;6BAEjC,2BAA2B;;wCAGU,2BAE5C;;;;;;MAK8B;IAE/B,eAAe;IACf,0BAOC;IA2BD;;;OAGG;IACH,qDAKC;IAED,mCAAmC;IACnC,6BAKC;IAED,4BAEC;IAED,iCAAiC;IACjC,wCAKC;IAYD,eAAe;IACf,qBA0BC;IAvBC,eAAe;IACf,6BAAiG;IAEjG,eAAe;IACf,uCAEC;IAmBH;;;OAGG;IACH,qBAkBC;IAED,eAAe;IACf,0BAYQ;IAER;;;;OAIG;IACH,gCAiCE;IAEF;;;OAGG;IACH,0CAyFE;IAEF,eAAe;IACf,mCAoBE;IAEF,eAAe;IACf,uBAqCC;IAED;;;OAGG;IACH,kCAHW,MAAM,qEAWhB;IAED;;;OAGG;IACH,oCAHa,OAAO,CAAC,OAAO,2BAA2B,EAAE,eAAe,CAAC,CA2BxE;IAED,kEAAkE;IAClE,iBADc,OAAO,sBAAsB,EAAE,eAAe,EAAE,CAK7D;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAla6B,oBAAoB;qCAWb,2BAA2B;kCAG9B,wBAAwB;kCADxB,wBAAwB;gCAD1B,sBAAsB"}

package/abstract/UploaderBlock.js

@@ -1,7 +1,7 @@
 // @ts-check
 import { ActivityBlock } from './ActivityBlock.js';
 
-import { PubSub } from '@symbiotejs/symbiote';
+import { PubSub } from '../symbiote.js';
 import { uploadFileGroup } from '@uploadcare/upload-client';
 import { calculateMaxCenteredCropFrame } from '../blocks/CloudImageEditor/src/crop-utils.js';
 import { parseCropPreset } from '../blocks/CloudImageEditor/src/lib/parseCropPreset.js';

package/abstract/UploaderPublicApi.js

@@ -1,7 +1,7 @@
 // @ts-check
 import { ActivityBlock } from './ActivityBlock.js';
 
-import { PubSub } from '@symbiotejs/symbiote';
+import { PubSub } from '../symbiote.js';
 import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
 import { UploadSource } from '../blocks/utils/UploadSource.js';
 import { serializeCsv } from '../blocks/utils/comma-separated.js';

package/blocks/CameraSource/CameraSource.js

@@ -1,4 +1,4 @@
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../symbiote.js';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { UploadSource } from '../utils/UploadSource.js';
@@ -216,19 +216,19 @@ export class CameraSource extends UploaderBlock {
 
 CameraSource.template = html`
   <uc-activity-header>
-    <button type="button" class="uc-mini-btn" bind="onclick: *historyBack">
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
       <uc-icon name="back"></uc-icon>
     </button>
-    <div bind="@hidden: !cameraSelectHidden">
+    <div set="@hidden: !cameraSelectHidden">
       <uc-icon name="camera"></uc-icon>
       <span l10n="caption-camera"></span>
     </div>
     <uc-select
       class="uc-camera-select"
-      bind="options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange"
+      set="options: cameraSelectOptions; @hidden: cameraSelectHidden; onchange: onCameraSelectChange"
     >
     </uc-select>
-    <button type="button" class="uc-mini-btn uc-close-btn" bind="onclick: *closeModal">
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *closeModal">
       <uc-icon name="close"></uc-icon>
     </button>
   </uc-activity-header>
@@ -236,18 +236,18 @@ CameraSource.template = html`
     <video
       autoplay
       playsinline
-      bind="srcObject: video; style.transform: videoTransformCss; @hidden: videoHidden"
+      set="srcObject: video; style.transform: videoTransformCss; @hidden: videoHidden"
       ref="video"
     ></video>
-    <div class="uc-message-box" bind="@hidden: messageHidden">
+    <div class="uc-message-box" set="@hidden: messageHidden">
       <span l10n="l10nMessage"></span>
       <button
         type="button"
-        bind="onclick: onRequestPermissions; @hidden: requestBtnHidden"
+        set="onclick: onRequestPermissions; @hidden: requestBtnHidden"
         l10n="camera-permissions-request"
       ></button>
     </div>
-    <button type="button" class="uc-shot-btn" bind="onclick: onShot; @disabled: shotBtnDisabled">
+    <button type="button" class="uc-shot-btn" set="onclick: onShot; @disabled: shotBtnDisabled">
       <uc-icon name="camera"></uc-icon>
     </button>
   </div>

package/blocks/CloudImageEditor/src/CropFrame.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../symbiote.js';
 import { Block } from '../../../abstract/Block.js';
 import {
   clamp,

package/blocks/CloudImageEditor/src/EditorButtonControl.js

@@ -1,4 +1,4 @@
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../symbiote.js';
 import { classNames } from './lib/classNames.js';
 import { Block } from '../../../abstract/Block.js';
 
@@ -39,7 +39,7 @@ export class EditorButtonControl extends Block {
 
 EditorButtonControl.template = html`
   <button type="button" role="option">
-    <uc-icon bind="@name: icon;"></uc-icon>
+    <uc-icon set="@name: icon;"></uc-icon>
     <div class="uc-title" ref="title-el">{{title}}</div>
   </button>
 `;

package/blocks/CloudImageEditor/src/EditorFilterControl.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../symbiote.js';
 import { createCdnUrl, createCdnUrlModifiers } from '../../../utils/cdn-utils.js';
 import { EditorButtonControl } from './EditorButtonControl.js';
 import { FAKE_ORIGINAL_FILTER } from './EditorSlider.js';
@@ -156,6 +156,6 @@ export class EditorFilterControl extends EditorButtonControl {
 EditorFilterControl.template = html`
   <button type="button" role="option">
     <div class="uc-preview" ref="preview-el"></div>
-    <uc-icon ref="icon-el" bind="@name: icon;"></uc-icon>
+    <uc-icon ref="icon-el" set="@name: icon;"></uc-icon>
   </button>
 `;

package/blocks/CloudImageEditor/src/EditorImageCropper.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../symbiote.js';
 import { Block } from '../../../abstract/Block.js';
 import { debounce } from '../../utils/debounce.js';
 import { throttle } from '../../utils/throttle.js';

package/blocks/CloudImageEditor/src/EditorScroller.js

@@ -1,4 +1,4 @@
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../symbiote.js';
 import { Block } from '../../../abstract/Block.js';
 
 const X_THRESHOLD = 1;

package/blocks/CloudImageEditor/src/EditorSlider.js

@@ -1,5 +1,5 @@
 import { Block } from '../../../abstract/Block.js';
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../symbiote.js';
 import { COLOR_OPERATIONS_CONFIG } from './toolbar-constants.js';
 
 const ControlType = {
@@ -114,6 +114,6 @@ export class EditorSlider extends Block {
 EditorSlider.template = html`
   <uc-slider-ui
     ref="slider-el"
-    bind="disabled: disabled; min: min; max: max; defaultValue: defaultValue; zero: zero; onInput: on.input;"
+    set="disabled: disabled; min: min; max: max; defaultValue: defaultValue; zero: zero; onInput: on.input;"
   ></uc-slider-ui>
 `;

package/blocks/CloudImageEditor/src/EditorToolbar.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../symbiote.js';
 import { debounce } from '../../utils/debounce.js';
 import { Block } from '../../../abstract/Block.js';
 import { EditorCropButtonControl } from './EditorCropButtonControl.js';
@@ -22,14 +22,14 @@ function renderTabToggle(id) {
   return /* HTML */ `
     <uc-presence-toggle
       class="uc-tab-toggle"
-      bind="visible: presence.tabToggle.${id}; styles: presence.tabToggleStyles;"
+      set="visible: presence.tabToggle.${id}; styles: presence.tabToggleStyles;"
     >
       <uc-btn-ui
         theme="tab"
         ref="tab-toggle-${id}"
         data-id="${id}"
         icon="${id}"
-        bind="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_${id}"
+        set="onclick: on.clickTab; aria-role:tab_role; aria-controls:tab_${id}"
       >
       </uc-btn-ui>
     </uc-presence-toggle>
@@ -42,7 +42,7 @@ function renderTabContent(id) {
     <uc-presence-toggle
       id="tab_${id}"
       class="uc-tab-content"
-      bind="visible: presence.tabContent.${id}; styles: presence.tabContentStyles"
+      set="visible: presence.tabContent.${id}; styles: presence.tabContentStyles"
     >
       <uc-editor-scroller hidden-scrollbar>
         <div class="uc-controls-list_align">
@@ -401,7 +401,7 @@ export class EditorToolbar extends Block {
 }
 
 EditorToolbar.template = html`
-  <uc-line-loader-ui bind="active: showLoader"></uc-line-loader-ui>
+  <uc-line-loader-ui set="active: showLoader"></uc-line-loader-ui>
   <div class="uc-info-tooltip_container">
     <div class="uc-info-tooltip_wrapper">
       <div ref="tooltip-el" class="uc-info-tooltip uc-info-tooltip_hidden">{{*operationTooltip}}</div>
@@ -411,31 +411,31 @@ EditorToolbar.template = html`
     <uc-presence-toggle
       role="tablist"
       class="uc-sub-toolbar"
-      bind="visible: presence.mainToolbar; styles: presence.subTopToolbarStyles"
+      set="visible: presence.mainToolbar; styles: presence.subTopToolbarStyles"
     >
       <div class="uc-tab-content-row">${ALL_TABS.map(renderTabContent).join('')}</div>
       <div class="uc-controls-row">
         <uc-presence-toggle
           class="uc-tab-toggles"
-          bind="visible: presence.tabToggles; styles: presence.tabTogglesStyles"
+          set="visible: presence.tabToggles; styles: presence.tabTogglesStyles"
         >
           <div ref="tabs-indicator" class="uc-tab-toggles_indicator"></div>
           ${ALL_TABS.map(renderTabToggle).join('')}
         </uc-presence-toggle>
-        <uc-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" bind="onclick: on.cancel"> </uc-btn-ui>
-        <uc-btn-ui theme="primary-icon" icon="done" bind="onclick: on.apply"> </uc-btn-ui>
+        <uc-btn-ui style="order: -1" theme="secondary-icon" icon="closeMax" set="onclick: on.cancel"> </uc-btn-ui>
+        <uc-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply"> </uc-btn-ui>
       </div>
     </uc-presence-toggle>
     <uc-presence-toggle
       class="uc-sub-toolbar"
-      bind="visible: presence.subToolbar; styles: presence.subBottomToolbarStyles"
+      set="visible: presence.subToolbar; styles: presence.subBottomToolbarStyles"
     >
       <div class="uc-slider">
         <uc-editor-slider ref="slider-el"></uc-editor-slider>
       </div>
       <div class="uc-controls-row">
-        <uc-btn-ui theme="secondary" bind="onclick: on.cancelSlider;" l10n="@text:cancel"> </uc-btn-ui>
-        <uc-btn-ui theme="primary" bind="onclick: on.applySlider;" l10n="@text:apply"> </uc-btn-ui>
+        <uc-btn-ui theme="secondary" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </uc-btn-ui>
+        <uc-btn-ui theme="primary" set="onclick: on.applySlider;" l10n="@text:apply"> </uc-btn-ui>
       </div>
     </uc-presence-toggle>
   </div>

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

@@ -1,4 +1,4 @@
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../../../symbiote.js';
 import { Block } from '../../../../../abstract/Block.js';
 import { classNames } from '../../lib/classNames.js';
 
@@ -83,8 +83,8 @@ export class BtnUi extends Block {
 BtnUi.bindAttributes({ text: 'text', icon: 'icon', reverse: 'reverse', theme: 'theme' });
 
 BtnUi.template = html`
-  <button type="button" bind="@role:aria-role; @aria-controls: aria-controls">
-    <uc-icon bind="className: iconCss; @name: icon; @hidden: !icon"></uc-icon>
+  <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.js

@@ -1,4 +1,4 @@
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../../../symbiote.js';
 import { Block } from '../../../../../abstract/Block.js';
 
 export class LineLoaderUi extends Block {

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

@@ -1,4 +1,4 @@
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../../../symbiote.js';
 import { Block } from '../../../../../abstract/Block.js';
 import { applyClassNames } from '../../lib/classNames.js';
 

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

@@ -1,4 +1,4 @@
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../../../symbiote.js';
 import { Block } from '../../../../../abstract/Block.js';
 
 export class SliderUi extends Block {
@@ -174,6 +174,6 @@ SliderUi.template = html`
     class="uc-input"
     type="range"
     ref="input-el"
-    bind="oninput: on.sliderInput; onchange: on.sliderChange; @min: min; @max: max; @value: defaultValue;"
+    set="oninput: on.sliderInput; onchange: on.sliderChange; @min: min; @max: max; @value: defaultValue;"
   />
 `;

package/blocks/CloudImageEditor/src/template.js

@@ -1,11 +1,11 @@
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../../symbiote.js';
 import { TRANSPARENT_PIXEL_SRC } from '../../../utils/transparentPixelSrc.js';
 import svgIconsSprite from './svg-sprite.js';
 
 export const TEMPLATE = html`
   ${svgIconsSprite}
   <div class="uc-wrapper uc-wrapper_desktop">
-    <uc-presence-toggle class="uc-network_problems_splash" bind="visible: presence.networkProblems;">
+    <uc-presence-toggle class="uc-network_problems_splash" set="visible: presence.networkProblems;">
       <div class="uc-network_problems_content">
         <div class="uc-network_problems_icon">
           <uc-icon name="sad"></uc-icon>
@@ -13,7 +13,7 @@ export const TEMPLATE = html`
         <div class="uc-network_problems_text">Network error</div>
       </div>
       <div class="uc-network_problems_footer">
-        <uc-btn-ui theme="primary" text="Retry" bind="onclick: *on.retryNetwork"></uc-btn-ui>
+        <uc-btn-ui theme="primary" text="Retry" set="onclick: *on.retryNetwork"></uc-btn-ui>
       </div>
     </uc-presence-toggle>
     <div class="uc-viewport">
@@ -28,7 +28,7 @@ export const TEMPLATE = html`
       <div class="uc-info_pan">{{msg}}</div>
     </div>
     <div class="uc-toolbar">
-      <uc-line-loader-ui bind="active: showLoader"></uc-line-loader-ui>
+      <uc-line-loader-ui set="active: showLoader"></uc-line-loader-ui>
       <div class="uc-toolbar_content uc-toolbar_content__editor">
         <uc-editor-toolbar></uc-editor-toolbar>
       </div>

package/blocks/CloudImageEditorActivity/CloudImageEditorActivity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CloudImageEditorActivity.d.ts","sourceRoot":"","sources":["CloudImageEditorActivity.js"],"names":[],"mappings":"AAMA;IAEE,iCAAuD;IAKrD;;;;;;oCAW2B,gBAAU;mCAGoB,gBAAU;6BAIjE,2BAEF;;wCAOA,wCAAsB;;;;;;MAxBrB;IAeC,mEAAkB;IAsBtB,qFAAqF;IACrF,eADY,WAAW,CAAC,OAAO,kCAAkC,EAAE,WAAW,CAAC,QAW9E;IAED,qBAEC;IAED,oBAqCC;IAJC,8BAAoB;IAEpB,eAAe;IACf,kBAAyB;IAG3B,sBAGC;CACF;8BA9G6B,iCAAiC"}
+{"version":3,"file":"CloudImageEditorActivity.d.ts","sourceRoot":"","sources":["CloudImageEditorActivity.js"],"names":[],"mappings":"AAMA;IAEE,iCAAuD;IAKrD;;;;;;oCAW8B,gBAAU;mCAGoB,gBAAU;6BAInE,2BAEA;;wCAOH,wCAAyB;;;;;;MAxBxB;IAeC,mEAAkB;IAsBtB,qFAAqF;IACrF,eADY,WAAW,CAAC,OAAO,kCAAkC,EAAE,WAAW,CAAC,QAW9E;IAED,qBAEC;IAED,oBAqCC;IAJC,8BAAoB;IAEpB,eAAe;IACf,kBAAyB;IAG3B,sBAGC;CACF;8BA9G6B,iCAAiC"}

package/blocks/CloudImageEditorActivity/CloudImageEditorActivity.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { DICT } from '@symbiotejs/symbiote';
+import { DICT } from '../../symbiote.js';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { CloudImageEditorBlock } from '../CloudImageEditor/index.js';

package/blocks/Copyright/Copyright.js

@@ -1,4 +1,4 @@
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../symbiote.js';
 import { Block } from '../../abstract/Block.js';
 
 export class Copyright extends Block {

package/blocks/DropArea/DropArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropArea.d.ts","sourceRoot":"","sources":["DropArea.js"],"names":[],"mappings":"AAaA;IAKI;;;;;;;;;;;;;oCAAA,gBAAS;mCAGA,gBACb;6BAGO,2BACI;;wCASM,wCAA0B;;;;;;MAPtC;IAGH,oBAgBC;IAgDC,eAAe;IACf,yBA2BE;IAIA,yDAWE;IA6BF;;;OAGG;IACH,uBASC;IAOL;;;;;OAKG;IACH,sBAeC;IAED,eAAe;IACf,0BAcC;CAqBF;;;;8BAlP6B,iCAAiC"}
+{"version":3,"file":"DropArea.d.ts","sourceRoot":"","sources":["DropArea.js"],"names":[],"mappings":"AAaA;IAKI;;;;;;;;;;;;;oCAAE,gBAAU;mCAGA,gBACb;6BAGO,2BACI;;wCASK,wCAA2B;;;;;;MAPzC;IAGH,oBAgBC;IAgDC,eAAe;IACf,yBA2BE;IAIA,yDAWE;IA6BF;;;OAGG;IACH,uBASC;IAOL;;;;;OAKG;IACH,sBAeC;IAED,eAAe;IACf,0BAcC;CAqBF;;;;8BAlP6B,iCAAiC"}

package/blocks/DropArea/DropArea.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-import { PubSub, html } from '@symbiotejs/symbiote';
+import { PubSub, html } from '../../symbiote.js';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { stringToArray } from '../../utils/stringToArray.js';
@@ -249,8 +249,8 @@ export class DropArea extends UploaderBlock {
 DropArea.template = html`
   <slot>
     <div data-default-slot hidden></div>
-    <div ref="content-wrapper" class="uc-content-wrapper" bind="@hidden: !isVisible">
-      <div class="uc-icon-container" bind="@hidden: !withIcon">
+    <div ref="content-wrapper" class="uc-content-wrapper" set="@hidden: !isVisible">
+      <div class="uc-icon-container" set="@hidden: !withIcon">
         <uc-icon name="default"></uc-icon>
         <uc-icon name="arrow-down"></uc-icon>
       </div>

package/blocks/ExternalSource/ExternalSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalSource.d.ts","sourceRoot":"","sources":["ExternalSource.js"],"names":[],"mappings":"AAWA,+DAA+D;AAE/D;;;;;;;;GAQG;AAEH;;;;;GAKG;AAEH,+DAA+D;AAE/D;IAEE,yBAAiD;IAK/C;;;;;;;;;;;;oCApBC,gBAAS;mCAKF,gBACL;6BAKY,2BAA2B;;wCAIZ,wCAE1B;;;;;;MAuBH;IAGH;;;OAGG;IACH,gBAAe;IA2Cf;;;OAGG;IACH,8BAcC;IAED;;;OAGG;IACH,oBAEC;IAED;;;OAGG;IACH,2BAUC;IAED,eAAe;IACf,yBAEC;IAED;;;OAGG;IACH,oBAGC;IAED,eAAe;IACf,oBAkBC;IAED,eAAe;IACf,kBAcC;IAED,eAAe;IACf,oBAsBC;IAED,eAAe;IACf,sBAMC;CACF;;;;6BAnOa;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE;kCAG/B;IACZ,IAAQ,EAAE,eAAe,CAAC;IAC1B,QAAY,EAAE,eAAe,CAAC;IAC9B,QAAY,EAAE,MAAM,CAAC;IACrB,GAAO,EAAE,MAAM,CAAC;IAChB,YAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;8BAIS;IACZ,IAAQ,EAAE,WAAW,CAAC;IACtB,KAAS,EAAE,MAAM,CAAC;CACf;sBAGU,mBAAmB,GAAG,eAAe;8BA1BrB,iCAAiC"}
+{"version":3,"file":"ExternalSource.d.ts","sourceRoot":"","sources":["ExternalSource.js"],"names":[],"mappings":"AAWA,+DAA+D;AAE/D;;;;;;;;GAQG;AAEH;;;;;GAKG;AAEH,+DAA+D;AAE/D;IAEE,yBAAiD;IAK/C;;;;;;;;;;;;oCApBG,gBAAU;mCAMhB,gBAAS;6BAKY,2BAA2B;;wCAIZ,wCAE1B;;;;;;MAuBN;IAGH;;;OAGG;IACH,gBAAe;IA2Cf;;;OAGG;IACH,8BAcC;IAED;;;OAGG;IACH,oBAEC;IAED;;;OAGG;IACH,2BAUC;IAED,eAAe;IACf,yBAEC;IAED;;;OAGG;IACH,oBAGC;IAED,eAAe;IACf,oBAkBC;IAED,eAAe;IACf,kBAcC;IAED,eAAe;IACf,oBAsBC;IAED,eAAe;IACf,sBAMC;CACF;;;;6BAnOa;IAAE,kBAAkB,EAAE,MAAM,CAAA;CAAE;kCAG/B;IACZ,IAAQ,EAAE,eAAe,CAAC;IAC1B,QAAY,EAAE,eAAe,CAAC;IAC9B,QAAY,EAAE,MAAM,CAAC;IACrB,GAAO,EAAE,MAAM,CAAC;IAChB,YAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;8BAIS;IACZ,IAAQ,EAAE,WAAW,CAAC;IACtB,KAAS,EAAE,MAAM,CAAC;CACf;sBAGU,mBAAmB,GAAG,eAAe;8BA1BrB,iCAAiC"}

package/blocks/ExternalSource/ExternalSource.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-import { create, html } from '@symbiotejs/symbiote';
+import { create, html } from '../../symbiote.js';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 import { stringToArray } from '../../utils/stringToArray.js';
@@ -240,27 +240,27 @@ export class ExternalSource extends UploaderBlock {
 
 ExternalSource.template = html`
   <uc-activity-header>
-    <button type="button" class="uc-mini-btn" bind="onclick: *historyBack">
+    <button type="button" class="uc-mini-btn" set="onclick: *historyBack">
       <uc-icon name="back"></uc-icon>
     </button>
     <div>
-      <uc-icon bind="@name: activityIcon"></uc-icon>
+      <uc-icon set="@name: activityIcon"></uc-icon>
       <span>{{activityCaption}}</span>
     </div>
-    <button type="button" class="uc-mini-btn uc-close-btn" bind="onclick: *historyBack">
+    <button type="button" class="uc-mini-btn uc-close-btn" set="onclick: *historyBack">
       <uc-icon name="close"></uc-icon>
     </button>
   </uc-activity-header>
   <div class="uc-content">
     <div ref="iframeWrapper" class="uc-iframe-wrapper"></div>
     <div class="uc-toolbar">
-      <button type="button" class="uc-cancel-btn uc-secondary-btn" bind="onclick: onCancel" l10n="cancel"></button>
+      <button type="button" class="uc-cancel-btn uc-secondary-btn" set="onclick: onCancel" l10n="cancel"></button>
       <div></div>
-      <div bind="@hidden: !multiple" class="uc-selected-counter"><span l10n="selected-count"></span>{{counter}}</div>
+      <div set="@hidden: !multiple" class="uc-selected-counter"><span l10n="selected-count"></span>{{counter}}</div>
       <button
         type="button"
         class="uc-done-btn uc-primary-btn"
-        bind="onclick: onDone; @disabled: !counter"
+        set="onclick: onDone; @disabled: !counter"
         l10n="done"
       ></button>
     </div>

package/blocks/FileItem/FileItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAmBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IACd,eAAe;IACf,wBAAwB;IACxB,eAAe;IACf,gCAA4E;IAC5E,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;oCA/B+B,gBAC5B;mCAGS,gBAGd;6BAEY,2BAEG;;wCAON,wCACS;;;;;;MA2Cf;IAGH,eASC;IAED;;;OAGG;IACH,0BAaC;IAED,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAsCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;;OAGG;IACH,uBAkDC;IAsCD,wEAAwE;IACxE,oBADY,CAAC,OAAO,aAAa,EAAE,MAAM,OAAO,aAAa,CAAC,QAsB7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAqFC;CACF;;;;;8BAla6B,iCAAiC;AAO/D;;;;;GAKG"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["FileItem.js"],"names":[],"mappings":"AAmBA;IAIE,eAAe;IACf,mBAAuB;IACvB;;;OAGG;IACH,eAAc;IACd,eAAe;IACf,wBAAwB;IACxB,eAAe;IACf,gCAA4E;IAC5E,eAAe;IACf,iCAA0E;IAE1E,eAAe;IACf,sBAAsB;IAKpB;;;;;;;;;;;;;;;;;;;;;oCA9BF,gBAAQ;mCAIV,gBAEK;6BAEW,2BAGd;;wCAMa,wCACQ;;;;;;MA2ClB;IAGH,eASC;IAED;;;OAGG;IACH,0BAaC;IAED,eAAe;IACf,wBAgBC;IAED,eAAe;IACf,2BAsCC;IAED;;;;OAIG;IACH,kBAUC;IAED;;;OAGG;IACH,uBAkDC;IAsCD,wEAAwE;IACxE,oBADY,CAAC,OAAO,aAAa,EAAE,MAAM,OAAO,aAAa,CAAC,QAsB7D;IAaC,eAAe;IACf,kBAEE;IAWJ;;;MAEC;IAED;;;OAGG;IACH,uBAEC;IAED,wBAqFC;CACF;;;;;8BAla6B,iCAAiC;AAO/D;;;;;GAKG"}

package/blocks/FileItem/FileItem.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../symbiote.js';
 import { CancelError, uploadFile } from '@uploadcare/upload-client';
 import { shrinkFile } from '@uploadcare/image-shrink';
 import { ActivityBlock } from '../../abstract/ActivityBlock.js';
@@ -424,22 +424,22 @@ export class FileItem extends UploaderBlock {
 }
 
 FileItem.template = html`
-  <div class="uc-inner" bind="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
-    <div class="uc-thumb" bind="style.backgroundImage: thumbUrl">
+  <div class="uc-inner" set="@finished: isFinished; @uploading: isUploading; @failed: isFailed; @focused: isFocused">
+    <div class="uc-thumb" set="style.backgroundImage: thumbUrl">
       <div class="uc-badge">
-        <uc-icon bind="@name: badgeIcon"></uc-icon>
+        <uc-icon set="@name: badgeIcon"></uc-icon>
       </div>
     </div>
     <div class="uc-file-name-wrapper">
-      <span class="uc-file-name" bind="@title: itemName">{{itemName}}</span>
-      <span class="uc-file-error" bind="@hidden: !errorText">{{errorText}}</span>
+      <span class="uc-file-name" set="@title: itemName">{{itemName}}</span>
+      <span class="uc-file-error" set="@hidden: !errorText">{{errorText}}</span>
     </div>
     <div class="uc-file-actions">
       <button
         type="button"
         l10n="@title:file-item-edit-button"
         class="uc-edit-btn uc-mini-btn"
-        bind="onclick: onEdit; @hidden: !isEditable"
+        set="onclick: onEdit; @hidden: !isEditable"
       >
         <uc-icon name="edit-file"></uc-icon>
       </button>
@@ -447,15 +447,15 @@ FileItem.template = html`
         type="button"
         l10n="@title:file-item-remove-button"
         class="uc-remove-btn uc-mini-btn"
-        bind="onclick: onRemove;"
+        set="onclick: onRemove;"
       >
         <uc-icon name="remove-file"></uc-icon>
       </button>
-      <button type="button" class="uc-upload-btn uc-mini-btn" bind="onclick: onUpload;">
+      <button type="button" class="uc-upload-btn uc-mini-btn" set="onclick: onUpload;">
         <uc-icon name="upload"></uc-icon>
       </button>
     </div>
-    <uc-progress-bar class="uc-progress-bar" bind="value: progressValue; visible: progressVisible;"> </uc-progress-bar>
+    <uc-progress-bar class="uc-progress-bar" set="value: progressValue; visible: progressVisible;"> </uc-progress-bar>
   </div>
 `;
 FileItem.activeInstances = new Set();

package/blocks/FormInput/FormInput.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { applyStyles } from '@symbiotejs/symbiote';
+import { applyStyles } from '../../symbiote.js';
 import { UploaderBlock } from '../../abstract/UploaderBlock.js';
 
 export class FormInput extends UploaderBlock {

package/blocks/Icon/Icon.js

@@ -1,5 +1,5 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
+import { html } from '../../symbiote.js';
 import { Block } from '../../abstract/Block.js';
 
 export class Icon extends Block {
@@ -33,7 +33,7 @@ export class Icon extends Block {
 
 Icon.template = html`
   <svg ref="svg" xmlns="http://www.w3.org/2000/svg">
-    <use bind="@href: href;"></use>
+    <use set="@href: href;"></use>
   </svg>
 `;
 

package/blocks/Img/ImgConfig.d.ts

@@ -27,5 +27,5 @@ export class ImgConfig extends Symbiote<any> {
     private _observed;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
 }
-import { Symbiote } from '@symbiotejs/symbiote';
+import { Symbiote } from '../../symbiote.js';
 //# sourceMappingURL=ImgConfig.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImgConfig.d.ts","sourceRoot":"","sources":["ImgConfig.js"],"names":[],"mappings":"AAUA;IAkFE,0CAEC;;IAnFD,cAAqB;IAErB;;;OAGG;IACH,iBAFa,GAAG,CAIf;IAED,qDAAqD;IACrD,wBAIC;IAED;;;OAGG;IACH,yBAFW,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,QAW5B;IAED,0BAEC;IAED,8BAMC;IAED;;;OAGG;IACH,qBAHW,WAAW,SACX,MAAM,IAAI,QAsBpB;IAfC,eAAe;IACf,qBAOQ;IAGN,eAAe;IACf,kBAA0B;IAoB9B,oEAIC;CACF;yBArGgC,sBAAsB"}
+{"version":3,"file":"ImgConfig.d.ts","sourceRoot":"","sources":["ImgConfig.js"],"names":[],"mappings":"AAUA;IAkFE,0CAEC;;IAnFD,cAAqB;IAErB;;;OAGG;IACH,iBAFa,GAAG,CAIf;IAED,qDAAqD;IACrD,wBAIC;IAED;;;OAGG;IACH,yBAFW,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,QAW5B;IAED,0BAEC;IAED,8BAMC;IAED;;;OAGG;IACH,qBAHW,WAAW,SACX,MAAM,IAAI,QAsBpB;IAfC,eAAe;IACf,qBAOQ;IAGN,eAAe;IACf,kBAA0B;IAoB9B,oEAIC;CACF;yBArGgC,mBAAmB"}

package/blocks/Img/ImgConfig.js

@@ -1,4 +1,4 @@
-import { Symbiote, PubSub } from '@symbiotejs/symbiote';
+import { Symbiote, PubSub } from '../../symbiote.js';
 import { PROPS_MAP } from './props-map.js';
 import { CSS_PREF } from './configurations.js';
 import { PACKAGE_NAME, PACKAGE_VERSION } from '../../env.js';