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

package/blocks/CloudImageEditor/src/EditorToolbar.js

@@ -1,5 +1,4 @@
 // @ts-check
-import { html } from '@symbiotejs/symbiote';
 import { debounce } from '../../utils/debounce.js';
 import { Block } from '../../../abstract/Block.js';
 import { EditorCropButtonControl } from './EditorCropButtonControl.js';
@@ -22,14 +21,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>
@@ -38,11 +37,11 @@ function renderTabToggle(id) {
 
 /** @param {String} id */
 function renderTabContent(id) {
-  return html`
+  return /* HTML */ `
     <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">
@@ -335,7 +334,7 @@ export class EditorToolbar extends Block {
     this.sub('*editorTransformations', (editorTransformations) => {
       let appliedFilter = editorTransformations?.filter?.name;
       if (this.$['*currentFilter'] !== appliedFilter) {
-        this.$['*currentFilter'] = appliedFilter ?? null;
+        this.$['*currentFilter'] = appliedFilter;
       }
     });
 
@@ -400,8 +399,8 @@ export class EditorToolbar extends Block {
   }
 }
 
-EditorToolbar.template = html`
-  <uc-line-loader-ui bind="active: showLoader"></uc-line-loader-ui>
+EditorToolbar.template = /* HTML */ `
+  <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 +410,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/crop-utils.d.ts

@@ -18,7 +18,7 @@ export function createSvgNode(name: string, attrs?: {
  * @param {import('./types.js').Direction} direction
  * @param {number} sizeMultiplier
  */
-export function cornerPath(rect: import("./types.js").Rectangle, direction: import("./types.js").Direction, sizeMultiplier: number): {
+export function cornerPath(rect: import('./types.js').Rectangle, direction: import('./types.js').Direction, sizeMultiplier: number): {
     d: string;
     center: number[];
 };
@@ -27,12 +27,12 @@ export function cornerPath(rect: import("./types.js").Rectangle, direction: impo
  * @param {Extract<import('./types.js').Direction, 'n' | 's' | 'w' | 'e'>} direction
  * @param {number} sizeMultiplier
  */
-export function sidePath(rect: import("./types.js").Rectangle, direction: Extract<import("./types.js").Direction, "n" | "s" | "w" | "e">, sizeMultiplier: number): {
+export function sidePath(rect: import('./types.js').Rectangle, direction: Extract<import('./types.js').Direction, 'n' | 's' | 'w' | 'e'>, sizeMultiplier: number): {
     d: string;
     center: number[];
 };
 /** @param {import('./types.js').Direction} direction */
-export function thumbCursor(direction: import("./types.js").Direction): "move" | "ew-resize" | "ns-resize" | "nwse-resize" | "nesw-resize";
+export function thumbCursor(direction: import('./types.js').Direction): "move" | "ew-resize" | "ns-resize" | "nwse-resize" | "nesw-resize";
 /**
  * @param {{
  *   rect: import('./types.js').Rectangle;
@@ -41,9 +41,9 @@ export function thumbCursor(direction: import("./types.js").Direction): "move" |
  * }} options
  */
 export function moveRect({ rect, delta: [dx, dy], imageBox }: {
-    rect: import("./types.js").Rectangle;
+    rect: import('./types.js').Rectangle;
     delta: [number, number];
-    imageBox: import("./types.js").Rectangle;
+    imageBox: import('./types.js').Rectangle;
 }): {
     x: number;
     y: number;
@@ -54,7 +54,7 @@ export function moveRect({ rect, delta: [dx, dy], imageBox }: {
  * @param {import('./types.js').Rectangle} rect1
  * @param {import('./types.js').Rectangle} rect2
  */
-export function constraintRect(rect1: import("./types.js").Rectangle, rect2: import("./types.js").Rectangle): {
+export function constraintRect(rect1: import('./types.js').Rectangle, rect2: import('./types.js').Rectangle): {
     x: number;
     y: number;
     width: number;
@@ -70,33 +70,33 @@ export function constraintRect(rect1: import("./types.js").Rectangle, rect2: imp
  * }} options
  */
 export function resizeRect({ direction, ...rest }: {
-    rect: import("./types.js").Rectangle;
+    rect: import('./types.js').Rectangle;
     delta: [number, number];
-    direction: import("./types.js").Direction;
+    direction: import('./types.js').Direction;
     aspectRatio?: number;
-    imageBox: import("./types.js").Rectangle;
+    imageBox: import('./types.js').Rectangle;
 }): import("./types.js").Rectangle;
 /**
  * @param {import('./types.js').Rectangle} rect
  * @param {[Number, Number]} point
  */
-export function rectContainsPoint(rect: import("./types.js").Rectangle, [x, y]: [number, number]): boolean;
+export function rectContainsPoint(rect: import('./types.js').Rectangle, [x, y]: [number, number]): boolean;
 /**
  * @param {import('./types.js').Rectangle} rect1
  * @param {import('./types.js').Rectangle} rect2
  */
-export function isRectInsideRect(rect1: import("./types.js").Rectangle, rect2: import("./types.js").Rectangle): boolean;
+export function isRectInsideRect(rect1: import('./types.js').Rectangle, rect2: import('./types.js').Rectangle): boolean;
 /**
  * @param {import('./types.js').Rectangle} rect
  * @param {number} aspectRatio
  */
-export function isRectMatchesAspectRatio(rect: import("./types.js").Rectangle, aspectRatio: number): boolean;
+export function isRectMatchesAspectRatio(rect: import('./types.js').Rectangle, aspectRatio: number): boolean;
 /**
  * @param {import('./types.js').ImageSize} imageSize
  * @param {Number} angle
  * @returns {import('./types.js').ImageSize}
  */
-export function rotateSize({ width, height }: import("./types.js").ImageSize, angle: number): import("./types.js").ImageSize;
+export function rotateSize({ width, height }: import('./types.js').ImageSize, angle: number): import('./types.js').ImageSize;
 /**
  * @param {number} width
  * @param {number} height
@@ -112,7 +112,7 @@ export function calculateMaxCenteredCropFrame(width: number, height: number, asp
  * @param {import('./types.js').Rectangle} rect
  * @returns {import('./types.js').Rectangle}
  */
-export function roundRect(rect: import("./types.js").Rectangle): import("./types.js").Rectangle;
+export function roundRect(rect: import('./types.js').Rectangle): import('./types.js').Rectangle;
 /**
  * @param {Number} value
  * @param {Number} min

package/blocks/CloudImageEditor/src/crop-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crop-utils.d.ts","sourceRoot":"","sources":["crop-utils.js"],"names":[],"mappings":"AAGA;;;GAGG;AACH,sCAHW,UAAU,SACV;IAAE,CAAC,GAAG,QAAQ,GAAG,eAAe,CAAA;CAAE,QAI5C;AAED;;;;GAIG;AACH,oDAHW;IAAE,CAAC,GAAG,QAAQ,GAAG,eAAe,CAAA;CAAE,GAChC,UAAU,CAMtB;AAED;;;;GAIG;AACH,iCAJW,OAAO,YAAY,EAAE,SAAS,aAC9B,OAAO,YAAY,EAAE,SAAS,kBAC9B,MAAM;;;EA2BhB;AAED;;;;GAIG;AACH,+BAJW,OAAO,YAAY,EAAE,SAAS,aAC9B,OAAO,CAAC,OAAO,YAAY,EAAE,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,kBAC9D,MAAM;;;EA0BhB;AAED,wDAAwD;AACxD,uCADY,OAAO,YAAY,EAAE,SAAS,sEAezC;AAED;;;;;;GAMG;AACH,8DANW;IACV,IAAQ,EAAE,OAAO,YAAY,EAAE,SAAS,CAAC;IACzC,KAAS,EAAE,gBAAgB,CAAC;IAC5B,QAAY,EAAE,OAAO,YAAY,EAAE,SAAS,CAAC;CAC1C;;;;;EAWH;AAED;;;GAGG;AACH,sCAHW,OAAO,YAAY,EAAE,SAAS,SAC9B,OAAO,YAAY,EAAE,SAAS;;;;;EAqBxC;AA8cD;;;;;;;;GAQG;AACH,mDARW;IACV,IAAQ,EAAE,OAAO,YAAY,EAAE,SAAS,CAAC;IACzC,KAAS,EAAE,gBAAgB,CAAC;IAC5B,SAAa,EAAE,OAAO,YAAY,EAAE,SAAS,CAAC;IAC9C,WAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAY,EAAE,OAAO,YAAY,EAAE,SAAS,CAAC;CAC1C,kCAuBH;AAED;;;GAGG;AACH,wCAHW,OAAO,YAAY,EAAE,SAAS,UAC9B,gBAAgB,WAI1B;AAED;;;GAGG;AACH,wCAHW,OAAO,YAAY,EAAE,SAAS,SAC9B,OAAO,YAAY,EAAE,SAAS,WASxC;AAED;;;GAGG;AACH,+CAHW,OAAO,YAAY,EAAE,SAAS,eAC9B,MAAM,WAKhB;AAED;;;;GAIG;AACH,8CAJW,OAAO,YAAY,EAAE,SAAS,kBAE5B,OAAO,YAAY,EAAE,SAAS,CAK1C;AAED;;;;GAIG;AACH,qDAJW,MAAM,UACN,MAAM,eACN,MAAM;;;;;EAyBhB;AAED;;;GAGG;AACH,gCAHW,OAAO,YAAY,EAAE,SAAS,GAC5B,OAAO,YAAY,EAAE,SAAS,CAS1C;AAED;;;;;GAKG;AACH,uEAEC"}
+{"version":3,"file":"crop-utils.d.ts","sourceRoot":"","sources":["crop-utils.js"],"names":[],"mappings":"AAGA;;;GAGG;AACH,sCAHW,UAAU;;SAKpB;AAED;;;;GAIG;AACH;;IAFa,UAAU,CAMtB;AAED;;;;GAIG;AACH,iCAJW,OAAO,YAAY,EAAE,SAAS,aAC9B,OAAO,YAAY,EAAE,SAAS,kBAC9B,MAAM;;;EA2BhB;AAED;;;;GAIG;AACH,+BAJW,OAAO,YAAY,EAAE,SAAS,aAC9B,QAAQ,OAAO,YAAY,EAAE,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,kBAC9D,MAAM;;;EA0BhB;AAED,wDAAwD;AACxD,uCADY,OAAO,YAAY,EAAE,SAAS,sEAezC;AAED;;;;;;GAMG;AACH,8DANW;IACV,IAAQ,EAAE,OAAO,YAAY,EAAE,SAAS,CAAC;IACzC,KAAS,EAAE,gBAAgB,CAAC;IAC5B,QAAY,EAAE,OAAO,YAAY,EAAE,SAAS,CAAC;CAC1C;;;;;EAWH;AAED;;;GAGG;AACH,sCAHW,OAAO,YAAY,EAAE,SAAS,SAC9B,OAAO,YAAY,EAAE,SAAS;;;;;EAqBxC;AA8cD;;;;;;;;GAQG;AACH,mDARW;IACV,IAAQ,EAAE,OAAO,YAAY,EAAE,SAAS,CAAC;IACzC,KAAS,EAAE,gBAAgB,CAAC;IAC5B,SAAa,EAAE,OAAO,YAAY,EAAE,SAAS,CAAC;IAC9C,WAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAY,EAAE,OAAO,YAAY,EAAE,SAAS,CAAC;CAC1C,kCAuBH;AAED;;;GAGG;AACH,wCAHW,OAAO,YAAY,EAAE,SAAS,UAC9B,gBAAgB,WAI1B;AAED;;;GAGG;AACH,wCAHW,OAAO,YAAY,EAAE,SAAS,SAC9B,OAAO,YAAY,EAAE,SAAS,WASxC;AAED;;;GAGG;AACH,+CAHW,OAAO,YAAY,EAAE,SAAS,eAC9B,MAAM,WAKhB;AAED;;;;GAIG;AACH,8CAJW,OAAO,YAAY,EAAE,SAAS,kBAE5B,OAAO,YAAY,EAAE,SAAS,CAK1C;AAED;;;;GAIG;AACH,qDAJW,MAAM,UACN,MAAM,eACN,MAAM;;;;;EAyBhB;AAED;;;GAGG;AACH,gCAHW,OAAO,YAAY,EAAE,SAAS,GAC5B,OAAO,YAAY,EAAE,SAAS,CAS1C;AAED;;;;;GAKG;AACH,uEAEC"}

package/blocks/CloudImageEditor/src/css/common.css

@@ -375,7 +375,7 @@ uc-editor-operation-control > button {
   height: var(--size-icon);
 }
 
-uc-editor-filter-control uc-icon.uc-original-icon > svg {
+uc-editor-filter-control > uc-icon.uc-original-icon > svg {
   width: 100%;
   height: 100%;
 }
@@ -448,7 +448,7 @@ uc-editor-filter-control > button .uc-preview {
   transition: var(--transition-duration-3);
 }
 
-uc-editor-filter-control .uc-original-icon {
+uc-editor-filter-control > .uc-original-icon {
   color: var(--color-effect);
   opacity: 0.3;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"BtnUi.d.ts","sourceRoot":"","sources":["BtnUi.js"],"names":[],"mappings":"AAIA;IAII,uBAA0B;IAC1B,qBAAwB;IACxB,qBAAwB;IAExB;;;;;;;MAQC;IAWH,mBAOC;IAkCD,sBAQC;CACF;;;;sBAhFqB,kCAAkC"}
+{"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

@@ -1,4 +1,3 @@
-import { html } from '@symbiotejs/symbiote';
 import { Block } from '../../../../../abstract/Block.js';
 import { classNames } from '../../lib/classNames.js';
 
@@ -53,7 +52,7 @@ export class BtnUi extends Block {
       }
     });
 
-    this.sub('text', () => {
+    this.sub('text', (txt) => {
       this._iconSingle = false;
     });
 
@@ -80,11 +79,12 @@ 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>
+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.map

@@ -1 +1 @@
-{"version":3,"file":"LineLoaderUi.d.ts","sourceRoot":"","sources":["LineLoaderUi.js"],"names":[],"mappings":"AAGA;IAII,iBAAoB;IAEpB,sCAMC;IAgBH,eAUC;IAED,cAEC;CACF;;;;sBA7CqB,kCAAkC"}
+{"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,4 +1,3 @@
-import { html } from '@symbiotejs/symbiote';
 import { Block } from '../../../../../abstract/Block.js';
 
 export class LineLoaderUi extends Block {
@@ -46,7 +45,7 @@ export class LineLoaderUi extends Block {
   }
 }
 
-LineLoaderUi.template = html`
+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.map

@@ -1 +1 @@
-{"version":3,"file":"PresenceToggle.d.ts","sourceRoot":"","sources":["PresenceToggle.js"],"names":[],"mappings":"AAkBA;IAII,kBAAqB;IACrB,kCAA0C;IAC1C,iCAAwC;IACxC,8BAAiC;IAqBnC,uBAQC;CAgBF;;;;;;;;;sBArEqB,kCAAkC"}
+{"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,6 +1,5 @@
-import { html } from '@symbiotejs/symbiote';
-import { Block } from '../../../../../abstract/Block.js';
 import { applyClassNames } from '../../lib/classNames.js';
+import { Block } from '../../../../../abstract/Block.js';
 
 /**
  * @typedef {Object} Style
@@ -69,4 +68,4 @@ export class PresenceToggle extends Block {
     }, 0);
   }
 }
-PresenceToggle.template = html` <slot></slot> `;
+PresenceToggle.template = /* HTML */ `<slot></slot> `;

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

@@ -1 +1 @@
-{"version":3,"file":"SliderUi.d.ts","sourceRoot":"","sources":["SliderUi.js"],"names":[],"mappings":"AAGA;IACE,WAiBE;IA6BE,WAAiB;IAenB,sCAIE;IAGF,+BAAgG;IAyBlG,+BAWC;IAED,iCAgBC;IAED,qBAmCC;IALC,uCAA2B;IAI3B,iBAAwB;CAM3B;;;;sBAvKqB,kCAAkC"}
+{"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

@@ -1,4 +1,3 @@
-import { html } from '@symbiotejs/symbiote';
 import { Block } from '../../../../../abstract/Block.js';
 
 export class SliderUi extends Block {
@@ -167,13 +166,13 @@ export class SliderUi extends Block {
     this._observer?.disconnect();
   }
 }
-SliderUi.template = html`
+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"
-    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/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"}

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

@@ -0,0 +1,256 @@
+/**
+ * Helper function for legacy browsers and iframes which sometimes focus on elements like document, body, and
+ * non-interactive SVG.
+ *
+ * @param {EventTarget} el
+ */
+function isValidFocusTarget(el) {
+  if (
+    el &&
+    el !== document &&
+    /** @type {Element} */ (el).nodeName !== 'HTML' &&
+    /** @type {Element} */ (el).nodeName !== 'BODY' &&
+    'classList' in el &&
+    'contains' in /** @type {Element} */ (el).classList
+  ) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Computes whether the given element should automatically trigger the `focus-visible` class being added, i.e., whether
+ * it should always match `:focus-visible` when focused.
+ *
+ * @param {EventTarget} el
+ * @returns {boolean}
+ */
+function focusTriggersKeyboardModality(el) {
+  let { tagName } = /** @type {Element} */ (el);
+
+  if (tagName === 'INPUT' && !(/** @type {HTMLInputElement} */ (el).readOnly)) {
+    return true;
+  }
+
+  if (tagName === 'TEXTAREA' && !(/** @type {HTMLTextAreaElement} */ (el).readOnly)) {
+    return true;
+  }
+
+  if (/** @type {HTMLElement} */ (el).isContentEditable) {
+    return true;
+  }
+
+  return false;
+}
+
+let hadKeyboardEvent = true;
+let hadFocusVisibleRecently = false;
+
+/**
+ * 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, callback) {
+  let hadFocusVisibleRecentlyTimeout = null;
+
+  /**
+   * Add the `focus-visible` class to the given element if the author did not add it.
+   *
+   * @param {EventTarget} el
+   */
+  function addFocusVisibleClass(el) {
+    /** @type {Element} */ (el).setAttribute('focus-visible', '');
+    callback(true, el);
+  }
+
+  /**
+   * Remove the `focus-visible` class from the given element if the author did not originally add it.
+   *
+   * @param {EventTarget} el
+   */
+  function removeFocusVisibleClass(el) {
+    if (!(/** @type {Element} */ (el).hasAttribute('focus-visible'))) {
+      return;
+    }
+    /** @type {Element} */ (el).removeAttribute('focus-visible');
+    callback(false, el);
+  }
+
+  /**
+   * If the most recent user interaction was via the keyboard, and the keypress did not include a meta, alt/option, or
+   * control key, then the keyboard's modality. Otherwise, the modality is not the keyboard.Apply `focus-visible` to any
+   * current active element and keep track of our keyboard modality state with `hadKeyboardEvent`.
+   *
+   * @param {KeyboardEvent} e
+   */
+  function onKeyDown(e) {
+    if (e.metaKey || e.altKey || e.ctrlKey) {
+      return;
+    }
+
+    if (isValidFocusTarget(scope.activeElement)) {
+      addFocusVisibleClass(scope.activeElement);
+    }
+
+    hadKeyboardEvent = true;
+  }
+
+  /**
+   * If at any point a user clicks with a pointing device, ensure that we change the modality away from the keyboard.
+   * This avoids the situation where a user presses a key on an already focused element, and then clicks on a different
+   * element focusing it with a pointing device while we still think we're in keyboard modality.
+   *
+   * @param {Event} e
+   */
+  function onPointerDown(e) {
+    hadKeyboardEvent = false;
+  }
+
+  /**
+   * On `focus`, add the `focus-visible` class to the target if: - the target received focus as a result of keyboard
+   * navigation or - the event target is an element that will likely require interaction via the keyboard (e.g., a text
+   * box).
+   *
+   * @param {Event} e
+   */
+  function onFocus(e) {
+    // Prevent IE from focusing the document or HTML element.
+    if (!isValidFocusTarget(e.target)) {
+      return;
+    }
+
+    if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
+      addFocusVisibleClass(e.target);
+    }
+  }
+
+  /**
+   * On `blur`, remove the `focus-visible` class from the target.
+   *
+   * @param {Event} e
+   */
+  function onBlur(e) {
+    if (!isValidFocusTarget(e.target)) {
+      return;
+    }
+
+    if (/** @type {Element} */ (e.target).hasAttribute('focus-visible')) {
+      // To detect a tab/window switch, we look for a blur event followed
+      // rapidly by a visibility change.
+      // If we don't see a visibility change within 100ms, it's probably a
+      // regular focus change.
+      hadFocusVisibleRecently = true;
+      window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+      hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {
+        hadFocusVisibleRecently = false;
+      }, 100);
+      removeFocusVisibleClass(e.target);
+    }
+  }
+
+  /**
+   * Add a group of listeners to detect usage of any pointing devices. These listeners will be added when the polyfill
+   * first loads and anytime the window is blurred so that they are active when the window regains focus.
+   */
+  function addInitialPointerMoveListeners() {
+    /* eslint-disable no-use-before-define */
+    document.addEventListener('mousemove', onInitialPointerMove);
+    document.addEventListener('mousedown', onInitialPointerMove);
+    document.addEventListener('mouseup', onInitialPointerMove);
+    document.addEventListener('pointermove', onInitialPointerMove);
+    document.addEventListener('pointerdown', onInitialPointerMove);
+    document.addEventListener('pointerup', onInitialPointerMove);
+    document.addEventListener('touchmove', onInitialPointerMove);
+    document.addEventListener('touchstart', onInitialPointerMove);
+    document.addEventListener('touchend', onInitialPointerMove);
+    /* eslint-enable no-use-before-define */
+  }
+
+  function removeInitialPointerMoveListeners() {
+    /* eslint-disable no-use-before-define */
+    document.removeEventListener('mousemove', onInitialPointerMove);
+    document.removeEventListener('mousedown', onInitialPointerMove);
+    document.removeEventListener('mouseup', onInitialPointerMove);
+    document.removeEventListener('pointermove', onInitialPointerMove);
+    document.removeEventListener('pointerdown', onInitialPointerMove);
+    document.removeEventListener('pointerup', onInitialPointerMove);
+    document.removeEventListener('touchmove', onInitialPointerMove);
+    document.removeEventListener('touchstart', onInitialPointerMove);
+    document.removeEventListener('touchend', onInitialPointerMove);
+    /* eslint-enable no-use-before-define */
+  }
+
+  /**
+   * If the user changes tabs, keep track of whether or not the previously focused element had .focus-visible.
+   *
+   * @param {Event} e
+   */
+  function onVisibilityChange(e) {
+    if (document.visibilityState === 'hidden') {
+      // If the tab becomes active again, the browser will handle calling focus
+      // on the element (Safari actually calls it twice).
+      // If this tab change caused a blur on an element with focus-visible,
+      // re-apply the class when the user switches back to the tab.
+      if (hadFocusVisibleRecently) {
+        hadKeyboardEvent = true;
+      }
+      addInitialPointerMoveListeners();
+    }
+  }
+
+  /**
+   * When the polyfill first loads, assume the user is in keyboard modality. If any event is received from a pointing
+   * device (e.g., mouse, pointer, touch), turn off keyboard modality. This accounts for situations where focus enters
+   * the page from the URL bar.
+   *
+   * @param {Event} e
+   */
+  function onInitialPointerMove(e) {
+    // Work around a Safari quirk that fires a mousemove on <html> whenever the
+    // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯
+    if (
+      /** @type {Element} */ (e.target).nodeName &&
+      /** @type {Element} */ (e.target).nodeName.toLowerCase() === 'html'
+    ) {
+      return;
+    }
+
+    hadKeyboardEvent = false;
+    removeInitialPointerMoveListeners();
+  }
+
+  // We are interested in changes at the global scope only for some kinds of states.
+  // For example, global pointer input, global key presses, and global
+  // visibility change should affect the state at every scope:
+  document.addEventListener('keydown', onKeyDown, true);
+  document.addEventListener('mousedown', onPointerDown, true);
+  document.addEventListener('pointerdown', onPointerDown, true);
+  document.addEventListener('touchstart', onPointerDown, true);
+  document.addEventListener('visibilitychange', onVisibilityChange, true);
+
+  addInitialPointerMoveListeners();
+
+  // We specifically care about state changes in the local scope for focus and blur.
+  // This is because focus/blur events that originate from within a
+  // shadow root are not re-dispatched from the host element if it was already
+  // the active element in its own scope:
+  scope.addEventListener('focus', onFocus, true);
+  scope.addEventListener('blur', onBlur, true);
+
+  return () => {
+    removeInitialPointerMoveListeners();
+
+    document.removeEventListener('keydown', onKeyDown, true);
+    document.removeEventListener('mousedown', onPointerDown, true);
+    document.removeEventListener('pointerdown', onPointerDown, true);
+    document.removeEventListener('touchstart', onPointerDown, true);
+    document.removeEventListener('visibilitychange', onVisibilityChange, true);
+
+    scope.removeEventListener('focus', onFocus, true);
+    scope.removeEventListener('blur', onBlur, true);
+  };
+}

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

@@ -1,2 +1,2 @@
-export function parseCropPreset(cropPreset: import("../../../../types/exported.d.ts").ConfigType["cropPreset"]): import("../types.js").CropAspectRatio[] | undefined;
+export function parseCropPreset(cropPreset: import('../../../../types/exported.d.ts').ConfigType['cropPreset']): import("../types.js").CropAspectRatio[] | undefined;
 //# sourceMappingURL=parseCropPreset.d.ts.map