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

package/blocks/FileItem/file-item.css

@@ -1,243 +0,0 @@
-uc-file-item {
-  --uc-file-item-gap: 4px;
-  --uc-file-item-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + var(--uc-file-item-gap));
-
-  display: block;
-  overflow: hidden;
-  min-height: var(--uc-file-item-height);
-}
-
-uc-file-item:last-of-type {
-  --uc-file-item-gap: 0;
-}
-
-uc-file-item > .uc-inner {
-  position: relative;
-  display: grid;
-  grid-template-columns: var(--uc-preview-size) 1fr max-content;
-  gap: 2px;
-  align-items: center;
-  margin-bottom: var(--uc-file-item-gap);
-  padding: var(--uc-padding);
-  overflow: hidden;
-  font-size: 0.925em;
-  background-color: var(--uc-muted);
-  border-radius: var(--uc-radius);
-  transition: background-color var(--uc-transition);
-}
-
-uc-file-item > .uc-inner[focused] {
-  background-color: transparent;
-}
-
-uc-file-item > .uc-inner[uploading] .uc-edit-btn {
-  display: none;
-}
-
-uc-file-item > :where(.uc-inner[failed], .uc-inner[limit-overflow]) {
-  background-color: var(--uc-destructive);
-}
-
-uc-file-item .uc-thumb {
-  position: relative;
-  display: inline-flex;
-  width: var(--uc-preview-size);
-  height: var(--uc-preview-size);
-  background-color: var(--uc-secondary);
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  border-radius: var(--uc-radius);
-}
-
-uc-file-item .uc-file-name-wrapper {
-  text-align: left;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  max-width: 100%;
-  padding-right: var(--uc-padding);
-  padding-left: var(--uc-padding);
-  overflow: hidden;
-  color: var(--uc-muted-foreground);
-}
-
-uc-file-item .uc-file-name {
-  max-width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-uc-file-item .uc-file-error {
-  display: none;
-  color: var(--uc-destructive-foreground);
-  font-size: 0.85em;
-  z-index: 2;
-}
-
-uc-file-item button.uc-remove-btn,
-uc-file-item button.uc-edit-btn {
-  color: var(--uc-muted-foreground);
-}
-
-uc-file-item button svg {
-  pointer-events: none;
-}
-
-uc-file-item button.uc-upload-btn {
-  display: none;
-}
-
-uc-file-item .uc-badge {
-  position: absolute;
-  bottom: 2px;
-  right: 2px;
-  width: 14px;
-  height: 14px;
-  color: var(--uc-background);
-  background-color: var(--uc-foreground);
-  border-radius: 50%;
-  transform: scale(0.3);
-  opacity: 0;
-  transition:
-    opacity var(--uc-transition),
-    transform var(--uc-transition);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-uc-file-item > .uc-inner:where([failed], [limit-overflow], [finished]) .uc-badge {
-  transform: scale(1);
-  opacity: 1;
-}
-
-uc-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-badge {
-  background-color: var(--uc-destructive-foreground);
-}
-
-uc-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-file-error {
-  display: block;
-}
-
-uc-file-item .uc-badge uc-icon,
-uc-file-item .uc-badge uc-icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-uc-file-item .uc-progress-bar {
-  opacity: 0.7;
-  top: calc(100% - 2px);
-  height: 2px;
-}
-
-:where(.uc-contrast) uc-file-item .uc-progress-bar {
-  opacity: 1;
-}
-
-uc-file-item .uc-file-actions {
-  display: flex;
-  gap: 2px;
-  align-items: center;
-  justify-content: center;
-}
-
-/* File item in the grid */
-uc-file-item[mode='grid'] {
-  overflow: visible;
-  min-height: initial;
-}
-
-uc-file-item[mode='grid'] .uc-inner {
-  height: 100%;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr max-content;
-  padding: 0;
-  background-color: transparent;
-  margin-bottom: 0;
-  border-radius: 0;
-}
-
-uc-file-item[mode='grid'] .uc-inner[failed] .uc-badge {
-  display: none;
-}
-
-uc-file-item[mode='grid'] .uc-thumb {
-  width: 100%;
-  height: 100%;
-}
-
-uc-file-item[mode='grid'] .uc-badge {
-  right: var(--uc-padding);
-  bottom: var(--uc-padding);
-}
-
-uc-file-item[mode='grid'] .uc-file-name-wrapper {
-  padding: 0;
-}
-
-uc-file-item[mode='grid'] .uc-file-name:not([hidden]) + .uc-file-error {
-  bottom: calc(var(--uc-padding) + var(--uc-font-size));
-}
-
-uc-file-item[mode='grid'] .uc-file-error {
-  position: absolute;
-  background-color: var(--uc-destructive-foreground);
-  border-radius: var(--uc-radius);
-  color: var(--uc-background);
-  bottom: var(--uc-padding);
-  left: var(--uc-padding);
-  right: var(--uc-padding);
-  padding: calc(var(--uc-padding) / 2) var(--uc-padding);
-}
-
-uc-file-item[mode='grid'] .uc-file-hint {
-  position: absolute;
-  background-color: var(--uc-background);
-  border-radius: var(--uc-radius);
-  color: var(--uc-foreground);
-  bottom: calc(var(--uc-padding) * 2);
-  left: var(--uc-padding);
-  right: var(--uc-padding);
-  padding: calc(var(--uc-padding) / 2) var(--uc-padding);
-}
-
-uc-file-item[mode='grid'] .uc-file-actions {
-  position: absolute;
-  top: var(--uc-padding);
-  right: var(--uc-padding);
-}
-
-uc-file-item[mode='grid'] button {
-  background-color: var(--uc-background);
-}
-
-uc-file-item[mode='grid'] button:hover {
-  background-color: var(--uc-muted);
-}
-
-uc-file-item[mode='grid'] .uc-progress-bar {
-  width: initial;
-  height: 4px !important;
-  top: initial !important;
-  bottom: var(--uc-padding);
-  left: var(--uc-padding);
-  right: var(--uc-padding);
-  border-radius: var(--uc-radius);
-  z-index: 1;
-  transition:
-    background-color 0.3s,
-    opacity 0.3s;
-  background-color: var(--uc-background);
-}
-
-uc-file-item[mode='grid'] .uc-progress-bar :is(.uc-fake-progress, .uc-progress) {
-  background-color: var(--uc-primary);
-}
-
-uc-file-item[mode='grid'] .uc-progress-bar[hasfilename] {
-  bottom: calc(var(--uc-padding) + var(--uc-font-size));
-}

package/blocks/FormInput/FormInput.d.ts

@@ -1,7 +0,0 @@
-export class FormInput extends UploaderBlock {
-    _createValidationInput(): HTMLInputElement;
-    _validationInputElement: HTMLInputElement | null | undefined;
-    _dynamicInputsContainer: HTMLDivElement | undefined;
-}
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
-//# sourceMappingURL=FormInput.d.ts.map

package/blocks/FormInput/FormInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["FormInput.js"],"names":[],"mappings":"AAIA;IAGE,2CAYC;IAKC,6DAA4D;IAQpD,oDAA4D;CA2DvE;8BAzF6B,iCAAiC"}

package/blocks/FormInput/FormInput.js

@@ -1,92 +0,0 @@
-// @ts-check
-import { applyStyles } from '@symbiotejs/symbiote';
-import { UploaderBlock } from '../../abstract/UploaderBlock.js';
-
-export class FormInput extends UploaderBlock {
-  requireCtxName = true;
-
-  _createValidationInput() {
-    const validationInput = document.createElement('input');
-    validationInput.type = 'text';
-    validationInput.name = this.ctxName;
-    validationInput.required = this.cfg.multipleMin > 0;
-    validationInput.tabIndex = -1;
-    applyStyles(validationInput, {
-      opacity: 0,
-      height: 0,
-      width: 0,
-    });
-    return validationInput;
-  }
-
-  initCallback() {
-    super.initCallback();
-
-    this._validationInputElement = this._createValidationInput();
-    this.appendChild(this._validationInputElement);
-
-    this.sub(
-      '*collectionState',
-      (/** @type {import('../../types/index.js').OutputCollectionState} */ collectionState) => {
-        {
-          if (!this._dynamicInputsContainer) {
-            this._dynamicInputsContainer = document.createElement('div');
-            this.appendChild(this._dynamicInputsContainer);
-          }
-          if (!this._validationInputElement) {
-            const input = this._createValidationInput();
-            this.appendChild(input);
-            this._validationInputElement = input;
-          }
-
-          this._dynamicInputsContainer.innerHTML = '';
-
-          if (collectionState.status === 'uploading' || collectionState.status === 'idle') {
-            this._validationInputElement.value = '';
-            this._validationInputElement.setCustomValidity('');
-            return;
-          }
-
-          if (collectionState.status === 'failed') {
-            const errorMsg = collectionState.errors[0]?.message;
-            this._validationInputElement.value = '';
-            this._validationInputElement.setCustomValidity(errorMsg);
-            return;
-          }
-
-          const group = collectionState.group ? collectionState.group : null;
-          if (group) {
-            this._validationInputElement.value = group.cdnUrl;
-            this._validationInputElement.setCustomValidity('');
-            return;
-          }
-
-          const cdnUrls = collectionState.allEntries.map((entry) => entry.cdnUrl);
-
-          if (!this.cfg.multiple && cdnUrls.length === 1) {
-            this._validationInputElement.value = cdnUrls[0];
-            this._validationInputElement.setCustomValidity('');
-            return;
-          }
-
-          // Remove validation input to prevent it from being submitted
-          this._validationInputElement.remove();
-          this._validationInputElement = null;
-
-          const fr = new DocumentFragment();
-
-          for (let value of cdnUrls) {
-            const input = document.createElement('input');
-            input.type = 'hidden';
-            input.name = `${this.ctxName}[]`;
-            input.value = value;
-            fr.appendChild(input);
-          }
-
-          this._dynamicInputsContainer.replaceChildren(fr);
-        }
-      },
-      false,
-    );
-  }
-}

package/blocks/Icon/Icon.d.ts

@@ -1,11 +0,0 @@
-export class Icon extends Block {
-    init$: {
-        name: string;
-        href: string;
-    };
-}
-export namespace Icon {
-    let template: string;
-}
-import { Block } from '../../abstract/Block.js';
-//# sourceMappingURL=Icon.d.ts.map

package/blocks/Icon/Icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["Icon.js"],"names":[],"mappings":"AAGA;IAII;;;MAIC;CAqBJ;;;;sBA/BqB,yBAAyB"}

package/blocks/Icon/Icon.js

@@ -1,43 +0,0 @@
-// @ts-check
-import { Block } from '../../abstract/Block.js';
-
-export class Icon extends Block {
-  constructor() {
-    super();
-
-    this.init$ = {
-      ...this.init$,
-      name: '',
-      href: '',
-    };
-  }
-
-  initCallback() {
-    super.initCallback();
-    this.sub('name', (val) => {
-      if (!val) {
-        return;
-      }
-      let iconHref = `#uc-icon-${val}`;
-      this.subConfigValue('iconHrefResolver', (iconHrefResolver) => {
-        if (iconHrefResolver) {
-          const customIconHref = iconHrefResolver(val);
-          iconHref = customIconHref ?? iconHref;
-        }
-        this.$.href = iconHref;
-      });
-    });
-
-    this.setAttribute('aria-hidden', 'true');
-  }
-}
-
-Icon.template = /* HTML */ `
-  <svg ref="svg" xmlns="http://www.w3.org/2000/svg">
-    <use set="@href: href;"></use>
-  </svg>
-`;
-
-Icon.bindAttributes({
-  name: 'name',
-});

package/blocks/Icon/icon.css

@@ -1,12 +0,0 @@
-uc-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--uc-button-size);
-  height: var(--uc-button-size);
-}
-
-uc-icon svg {
-  width: calc(var(--uc-button-size) / 2);
-  height: calc(var(--uc-button-size) / 2);
-}

package/blocks/Img/Img.d.ts

@@ -1,4 +0,0 @@
-export class Img extends ImgBase {
-}
-import { ImgBase } from './ImgBase.js';
-//# sourceMappingURL=Img.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Img.d.ts","sourceRoot":"","sources":["Img.js"],"names":[],"mappings":"AAEA;CAkBC;wBApBuB,cAAc"}

package/blocks/Img/Img.js

@@ -1,21 +0,0 @@
-import { ImgBase } from './ImgBase.js';
-
-export class Img extends ImgBase {
-  initCallback() {
-    super.initCallback();
-
-    this.sub$$('src', () => {
-      this.init();
-    });
-
-    this.sub$$('uuid', () => {
-      this.init();
-    });
-
-    this.sub$$('lazy', (val) => {
-      if (!this.$$('is-background-for') && !this.$$('is-preview-blur')) {
-        this.img.loading = val ? 'lazy' : 'eager';
-      }
-    });
-  }
-}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ImgBase.d.ts","sourceRoot":"","sources":["ImgBase.js"],"names":[],"mappings":"AAgBA;IACE,uBAAmB;IACnB,8BAA0B;IAE1B;;;OAGG;IACH,gBAMC;IAED;;;;;OAKG;IACH,8BAFa,eAAe,CAoB3B;IAED;;;;;OAKG;IACH,uDAWC;IAED;;;;;OAKG;IACH,oBA6DC;IAED;;;;OAIG;IACH,kBAUC;IAED;;;;OAIG;IACH,eAJW,WAAW,8CAcrB;IAED,oCAAoC;IACpC,sBADY,gBAAgB,QAY3B;IAED,+BAA+B;IAC/B,WADW,gBAAgB,CAO1B;IAED;;;;;;MAUC;IAED,2BAEC;IAED,sBAEC;IAED,mCAOC;IAED,4BAEC;IAED,8BAA8B;IAC9B,aADY,WAAW,QAgBtB;IAED,oBAsBC;IAED,cAEC;IAED,yBAEC;IAED,yBAUC;IAED;;;;aAQC;IAED;;aAGC;IAED;;;;qBAqBC;IAED,6BA8DC;IAED,aAMC;CACF;0BAlZyB,gBAAgB"}