@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/filepond-plugin-file-poster.js

@@ -1,9 +1,669 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{g as t}from"./_commonjsHelpers.js";function n(t,n){return n.forEach((function(n){n&&"string"!=typeof n&&!Array.isArray(n)&&Object.keys(n).forEach((function(e){if("default"!==e&&!(e in t)){var r=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,r.get?r:{enumerable:!0,get:function(){return n[e]}})}}))})),Object.freeze(t)}var e,r={exports:{}},i=(e||(e=1,r.exports=function(){var t={type:"spring",stiffness:.5,damping:.45,mass:10},n=function(t){return-.5*(Math.cos(Math.PI*t)-1)},e=function(t){var n=Math.min(10/t.width,10/t.height),e=document.createElement("canvas"),i=e.getContext("2d"),o=e.width=Math.ceil(t.width*n),a=e.height=Math.ceil(t.height*n);i.drawImage(t,0,0,o,a);var _=null;try{_=i.getImageData(0,0,o,a).data}catch(t){return null}for(var E=_.length,u=0,I=0,c=0,T=0;T<E;T+=4)u+=_[T]*_[T],I+=_[T+1]*_[T+1],c+=_[T+2]*_[T+2];return{r:u=r(u,E),g:I=r(I,E),b:c=r(c,E)}},r=function(t,n){return Math.floor(Math.sqrt(t/(n/4)))},i=function(t,e,r,i,o){t.width=e,t.height=r;var a=t.getContext("2d"),_=.5*e,E=a.createRadialGradient(_,r+110,r-100,_,r+110,r+100);(function(t,e){for(var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:n,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:10,a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,_=1-a,E=e.join(","),u=0;u<=o;u++){var I=u/o;t.addColorStop(a+_*I,"rgba(".concat(E,", ").concat(i(I)*r,")"))}})(E,i,o,void 0,8,.4),a.save(),a.translate(.5*-e,0),a.scale(2,1),a.fillStyle=E,a.fillRect(0,0,e,r),a.restore()},o="undefined"!=typeof navigator,a="undefined"!=typeof document,_=500,E=200,u=o&&a&&document.createElement("canvas"),I=o&&a&&document.createElement("canvas"),c=o&&a&&document.createElement("canvas"),T=[40,40,40],f=[196,78,71],l=[54,151,99];o&&a&&(i(u,_,E,T,.85),i(I,_,E,f,1),i(c,_,E,l,1));var s=function(n){var r=n.utils.createView({name:"file-poster-overlay",tag:"canvas",ignoreRect:!0,create:function(t){var n,e;(e=t.root.element).width=(n=t.props.template).width,e.height=n.height,e.getContext("2d").drawImage(n,0,0)},mixins:{styles:["opacity"],animations:{opacity:{type:"spring",mass:25}}}}),o=function(t){var n=t.root;n.ref.overlayShadow.opacity=1,n.ref.overlayError.opacity=0,n.ref.overlaySuccess.opacity=0},a=function(t){var n=t.root;n.ref.overlayShadow.opacity=.25,n.ref.overlayError.opacity=1};return n.utils.createView({name:"file-poster-wrapper",create:function(e){var o=e.root,a=e.props,s=o.query("GET_FILE_POSTER_ITEM_OVERLAY_SHADOW_COLOR"),O=o.query("GET_FILE_POSTER_ITEM_OVERLAY_ERROR_COLOR"),R=o.query("GET_FILE_POSTER_ITEM_OVERLAY_SUCCESS_COLOR");s&&s!==T&&i(u,_,E,T=s,.85),O&&O!==f&&i(I,_,E,f=O,1),R&&R!==l&&i(c,_,E,l=R,1);var v=function(n){return n.utils.createView({name:"file-poster",tag:"div",ignoreRect:!0,create:function(t){var n=t.root;n.ref.image=document.createElement("img"),n.element.appendChild(n.ref.image)},write:n.utils.createRoute({DID_FILE_POSTER_LOAD:function(t){var n=t.root,e=t.props,r=e.id,i=n.query("GET_ITEM",{id:e.id});if(i){var o=i.getMetadata("poster");n.ref.image.src=o,n.dispatch("DID_FILE_POSTER_DRAW",{id:r})}}}),mixins:{styles:["scaleX","scaleY","opacity"],animations:{scaleX:t,scaleY:t,opacity:{type:"tween",duration:750}}}})}(n);o.ref.image=o.appendChildView(o.createChildView(v,{id:a.id,scaleX:1.25,scaleY:1.25,opacity:0})),o.ref.overlayShadow=o.appendChildView(o.createChildView(r,{template:u,opacity:0})),o.ref.overlaySuccess=o.appendChildView(o.createChildView(r,{template:c,opacity:0})),o.ref.overlayError=o.appendChildView(o.createChildView(r,{template:I,opacity:0}))},write:n.utils.createRoute({DID_FILE_POSTER_LOAD:function(t){t.root.ref.overlayShadow.opacity=1},DID_FILE_POSTER_DRAW:function(t){var n=t.root.ref.image;n.scaleX=1,n.scaleY=1,n.opacity=1},DID_FILE_POSTER_CONTAINER_CREATE:function(t){var n,r,i,o=t.root,a=t.props.id,_=o.query("GET_ITEM",a);if(_){var E=_.getMetadata("poster"),u=function(t){var n=o.query("GET_FILE_POSTER_CALCULATE_AVERAGE_IMAGE_COLOR")?e(t):null;_.setMetadata("color",n,!0),o.dispatch("DID_FILE_POSTER_LOAD",{id:a,data:t})};n=E,r=function(t,n){var e,r;o.dispatch("DID_FILE_POSTER_CALCULATE_SIZE",{id:a,width:t,height:n}),(e=E,r=o.query("GET_FILE_POSTER_CROSS_ORIGIN_ATTRIBUTE_VALUE"),new Promise((function(t,n){var i=new Image;"string"==typeof crossOrigin&&(i.crossOrigin=r),i.onload=function(){t(i)},i.onerror=function(t){n(t)},i.src=e}))).then(u)},(i=new Image).onload=function(){var t=i.naturalWidth,n=i.naturalHeight;i=null,r(t,n)},i.src=n}},DID_THROW_ITEM_LOAD_ERROR:a,DID_THROW_ITEM_PROCESSING_ERROR:a,DID_THROW_ITEM_INVALID:a,DID_COMPLETE_ITEM_PROCESSING:function(t){var n=t.root;n.ref.overlayShadow.opacity=.25,n.ref.overlaySuccess.opacity=1},DID_START_ITEM_PROCESSING:o,DID_REVERT_ITEM_PROCESSING:o})})},O=function(t){var n=t.addFilter,e=t.utils,r=e.Type,i=e.createRoute,o=s(t);return n("CREATE_VIEW",(function(t){var n=t.view,e=t.query;if((0,t.is)("file")&&e("GET_ALLOW_FILE_POSTER")){var r=function(t,r){var i=r.id,a=e("GET_ITEM",i);a&&a.getMetadata("poster")&&!a.archived&&t.ref.previousPoster!==a.getMetadata("poster")&&(t.ref.previousPoster=a.getMetadata("poster"),e("GET_FILE_POSTER_FILTER_ITEM")(a)&&(t.ref.filePoster&&n.removeChildView(t.ref.filePoster),t.ref.filePoster=n.appendChildView(n.createChildView(o,{id:i})),t.dispatch("DID_FILE_POSTER_CONTAINER_CREATE",{id:i})))},a=function(t){var n=t.root,e=n.query("GET_FILE_POSTER_HEIGHT");if(e)return e;var r=n.query("GET_FILE_POSTER_MIN_HEIGHT"),i=n.query("GET_FILE_POSTER_MAX_HEIGHT");if(r&&n.ref.imageHeight<r)return r;var o=n.rect.element.width*(n.ref.imageHeight/n.ref.imageWidth);return r&&o<r?r:i&&o>i?i:o};n.registerWriter(i({DID_LOAD_ITEM:function(t){r(t.root,t.props)},DID_FILE_POSTER_CALCULATE_SIZE:function(t){var n=t.root,e=t.action;n.ref.filePoster&&(n.ref.imageWidth=e.width,n.ref.imageHeight=e.height,n.ref.shouldUpdatePanelHeight=!0,n.dispatch("KICK"))},DID_UPDATE_ITEM_METADATA:function(t){var n=t.root,e=t.props;/poster/.test(t.action.change.key)&&r(n,e)}},(function(t){var n=t.root;n.ref.filePoster&&(n.rect.element.hidden||n.ref.shouldUpdatePanelHeight&&(n.dispatch("DID_UPDATE_PANEL_HEIGHT",{id:t.props.id,height:a({root:n})}),n.ref.shouldUpdatePanelHeight=!1))})))}})),{options:{allowFilePoster:[!0,r.BOOLEAN],filePosterHeight:[null,r.INT],filePosterMinHeight:[null,r.INT],filePosterMaxHeight:[null,r.INT],filePosterFilterItem:[function(){return!0},r.FUNCTION],filePosterCalculateAverageImageColor:[!1,r.BOOLEAN],filePosterCrossOriginAttributeValue:["Anonymous",r.STRING],filePosterItemOverlayShadowColor:[null,r.ARRAY],filePosterItemOverlayErrorColor:[null,r.ARRAY],filePosterItemOverlaySuccessColor:[null,r.ARRAY]}}};return"undefined"!=typeof window&&void 0!==window.document&&document.dispatchEvent(new CustomEvent("FilePond:pluginloaded",{detail:O})),O}()),r.exports),o=n({__proto__:null,default:t(i)},[i]);
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
+
+function _mergeNamespaces(n, m) {
+  m.forEach(function (e) {
+    e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
+      if (k !== 'default' && !(k in n)) {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  });
+  return Object.freeze(n);
+}
+
+var filepondPluginFilePoster$3 = {exports: {}};
+
 /*!
  * FilePondPluginFilePoster 2.5.2
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
- */export{o as f}
+ */
+var filepondPluginFilePoster$2 = filepondPluginFilePoster$3.exports;
+
+var hasRequiredFilepondPluginFilePoster;
+
+function requireFilepondPluginFilePoster () {
+	if (hasRequiredFilepondPluginFilePoster) return filepondPluginFilePoster$3.exports;
+	hasRequiredFilepondPluginFilePoster = 1;
+	(function (module, exports) {
+		/* eslint-disable */
+
+		(function(global, factory) {
+		  (module.exports = factory())
+		    ;
+		})(filepondPluginFilePoster$2, function() {
+
+		  var IMAGE_SCALE_SPRING_PROPS = {
+		    type: 'spring',
+		    stiffness: 0.5,
+		    damping: 0.45,
+		    mass: 10
+		  };
+
+		  var createPosterView = function createPosterView(_) {
+		    return _.utils.createView({
+		      name: 'file-poster',
+		      tag: 'div',
+		      ignoreRect: true,
+		      create: function create(_ref) {
+		        var root = _ref.root;
+		        root.ref.image = document.createElement('img');
+		        root.element.appendChild(root.ref.image);
+		      },
+		      write: _.utils.createRoute({
+		        DID_FILE_POSTER_LOAD: function DID_FILE_POSTER_LOAD(_ref2) {
+		          var root = _ref2.root,
+		            props = _ref2.props;
+		          var id = props.id;
+
+		          // get item
+		          var item = root.query('GET_ITEM', { id: props.id });
+		          if (!item) return;
+
+		          // get poster
+		          var poster = item.getMetadata('poster');
+		          root.ref.image.src = poster;
+
+		          // let others know of our fabulous achievement (so the image can be faded in)
+		          root.dispatch('DID_FILE_POSTER_DRAW', { id: id });
+		        }
+		      }),
+
+		      mixins: {
+		        styles: ['scaleX', 'scaleY', 'opacity'],
+		        animations: {
+		          scaleX: IMAGE_SCALE_SPRING_PROPS,
+		          scaleY: IMAGE_SCALE_SPRING_PROPS,
+		          opacity: { type: 'tween', duration: 750 }
+		        }
+		      }
+		    });
+		  };
+
+		  var applyTemplate = function applyTemplate(source, target) {
+		    // copy width and height
+		    target.width = source.width;
+		    target.height = source.height;
+
+		    // draw the template
+		    var ctx = target.getContext('2d');
+		    ctx.drawImage(source, 0, 0);
+		  };
+
+		  var createPosterOverlayView = function createPosterOverlayView(fpAPI) {
+		    return fpAPI.utils.createView({
+		      name: 'file-poster-overlay',
+		      tag: 'canvas',
+		      ignoreRect: true,
+		      create: function create(_ref) {
+		        var root = _ref.root,
+		          props = _ref.props;
+		        applyTemplate(props.template, root.element);
+		      },
+		      mixins: {
+		        styles: ['opacity'],
+		        animations: {
+		          opacity: { type: 'spring', mass: 25 }
+		        }
+		      }
+		    });
+		  };
+
+		  var getImageSize = function getImageSize(url, cb) {
+		    var image = new Image();
+		    image.onload = function() {
+		      var width = image.naturalWidth;
+		      var height = image.naturalHeight;
+		      image = null;
+		      cb(width, height);
+		    };
+		    image.src = url;
+		  };
+
+		  var easeInOutSine = function easeInOutSine(t) {
+		    return -0.5 * (Math.cos(Math.PI * t) - 1);
+		  };
+
+		  var addGradientSteps = function addGradientSteps(gradient, color) {
+		    var alpha =
+		      arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+		    var easeFn =
+		      arguments.length > 3 && arguments[3] !== undefined
+		        ? arguments[3]
+		        : easeInOutSine;
+		    var steps =
+		      arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 10;
+		    var offset =
+		      arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+		    var range = 1 - offset;
+		    var rgb = color.join(',');
+		    for (var i = 0; i <= steps; i++) {
+		      var p = i / steps;
+		      var stop = offset + range * p;
+		      gradient.addColorStop(
+		        stop,
+		        'rgba('.concat(rgb, ', ').concat(easeFn(p) * alpha, ')')
+		      );
+		    }
+		  };
+
+		  var MAX_WIDTH = 10;
+		  var MAX_HEIGHT = 10;
+
+		  var calculateAverageColor = function calculateAverageColor(image) {
+		    var scalar = Math.min(MAX_WIDTH / image.width, MAX_HEIGHT / image.height);
+
+		    var canvas = document.createElement('canvas');
+		    var ctx = canvas.getContext('2d');
+		    var width = (canvas.width = Math.ceil(image.width * scalar));
+		    var height = (canvas.height = Math.ceil(image.height * scalar));
+		    ctx.drawImage(image, 0, 0, width, height);
+		    var data = null;
+		    try {
+		      data = ctx.getImageData(0, 0, width, height).data;
+		    } catch (e) {
+		      return null;
+		    }
+		    var l = data.length;
+
+		    var r = 0;
+		    var g = 0;
+		    var b = 0;
+		    var i = 0;
+
+		    for (; i < l; i += 4) {
+		      r += data[i] * data[i];
+		      g += data[i + 1] * data[i + 1];
+		      b += data[i + 2] * data[i + 2];
+		    }
+
+		    r = averageColor(r, l);
+		    g = averageColor(g, l);
+		    b = averageColor(b, l);
+
+		    return { r: r, g: g, b: b };
+		  };
+
+		  var averageColor = function averageColor(c, l) {
+		    return Math.floor(Math.sqrt(c / (l / 4)));
+		  };
+
+		  var drawTemplate = function drawTemplate(
+		    canvas,
+		    width,
+		    height,
+		    color,
+		    alphaTarget
+		  ) {
+		    canvas.width = width;
+		    canvas.height = height;
+		    var ctx = canvas.getContext('2d');
+
+		    var horizontalCenter = width * 0.5;
+
+		    var grad = ctx.createRadialGradient(
+		      horizontalCenter,
+		      height + 110,
+		      height - 100,
+		      horizontalCenter,
+		      height + 110,
+		      height + 100
+		    );
+
+		    addGradientSteps(grad, color, alphaTarget, undefined, 8, 0.4);
+
+		    ctx.save();
+		    ctx.translate(-500 * 0.5, 0);
+		    ctx.scale(2, 1);
+		    ctx.fillStyle = grad;
+		    ctx.fillRect(0, 0, width, height);
+		    ctx.restore();
+		  };
+
+		  var hasNavigator = typeof navigator !== 'undefined';
+		  var hasDocument = typeof document !== 'undefined';
+
+		  var width = 500;
+		  var height = 200;
+
+		  var overlayTemplateShadow =
+		    hasNavigator && hasDocument && document.createElement('canvas');
+		  var overlayTemplateError =
+		    hasNavigator && hasDocument && document.createElement('canvas');
+		  var overlayTemplateSuccess =
+		    hasNavigator && hasDocument && document.createElement('canvas');
+
+		  var itemShadowColor = [40, 40, 40];
+		  var itemErrorColor = [196, 78, 71];
+		  var itemSuccessColor = [54, 151, 99];
+
+		  if (hasNavigator && hasDocument) {
+		    drawTemplate(overlayTemplateShadow, width, height, itemShadowColor, 0.85);
+		    drawTemplate(overlayTemplateError, width, height, itemErrorColor, 1);
+		    drawTemplate(overlayTemplateSuccess, width, height, itemSuccessColor, 1);
+		  }
+
+		  var loadImage = function loadImage(url, crossOriginValue) {
+		    return new Promise(function(resolve, reject) {
+		      var img = new Image();
+		      if (typeof crossOrigin === 'string') {
+		        img.crossOrigin = crossOriginValue;
+		      }
+		      img.onload = function() {
+		        resolve(img);
+		      };
+		      img.onerror = function(e) {
+		        reject(e);
+		      };
+		      img.src = url;
+		    });
+		  };
+
+		  var createPosterWrapperView = function createPosterWrapperView(_) {
+		    // create overlay view
+		    var overlay = createPosterOverlayView(_);
+
+		    /**
+		     * Write handler for when preview container has been created
+		     */
+		    var didCreatePreviewContainer = function didCreatePreviewContainer(_ref) {
+		      var root = _ref.root,
+		        props = _ref.props;
+		      var id = props.id;
+
+		      // we need to get the file data to determine the eventual image size
+		      var item = root.query('GET_ITEM', id);
+		      if (!item) return;
+
+		      // get url to file
+		      var fileURL = item.getMetadata('poster');
+
+		      // image is now ready
+		      var previewImageLoaded = function previewImageLoaded(data) {
+		        // calculate average image color, is in try catch to circumvent any cors errors
+		        var averageColor = root.query(
+		          'GET_FILE_POSTER_CALCULATE_AVERAGE_IMAGE_COLOR'
+		        )
+		          ? calculateAverageColor(data)
+		          : null;
+		        item.setMetadata('color', averageColor, true);
+
+		        // the preview is now ready to be drawn
+		        root.dispatch('DID_FILE_POSTER_LOAD', {
+		          id: id,
+		          data: data
+		        });
+		      };
+
+		      // determine image size of this item
+		      getImageSize(fileURL, function(width, height) {
+		        // we can now scale the panel to the final size
+		        root.dispatch('DID_FILE_POSTER_CALCULATE_SIZE', {
+		          id: id,
+		          width: width,
+		          height: height
+		        });
+
+		        // create fallback preview
+		        loadImage(
+		          fileURL,
+		          root.query('GET_FILE_POSTER_CROSS_ORIGIN_ATTRIBUTE_VALUE')
+		        ).then(previewImageLoaded);
+		      });
+		    };
+
+		    /**
+		     * Write handler for when the preview has been loaded
+		     */
+		    var didLoadPreview = function didLoadPreview(_ref2) {
+		      var root = _ref2.root;
+		      root.ref.overlayShadow.opacity = 1;
+		    };
+
+		    /**
+		     * Write handler for when the preview image is ready to be animated
+		     */
+		    var didDrawPreview = function didDrawPreview(_ref3) {
+		      var root = _ref3.root;
+		      var image = root.ref.image;
+
+		      // reveal image
+		      image.scaleX = 1.0;
+		      image.scaleY = 1.0;
+		      image.opacity = 1;
+		    };
+
+		    /**
+		     * Write handler for when the preview has been loaded
+		     */
+		    var restoreOverlay = function restoreOverlay(_ref4) {
+		      var root = _ref4.root;
+		      root.ref.overlayShadow.opacity = 1;
+		      root.ref.overlayError.opacity = 0;
+		      root.ref.overlaySuccess.opacity = 0;
+		    };
+
+		    var didThrowError = function didThrowError(_ref5) {
+		      var root = _ref5.root;
+		      root.ref.overlayShadow.opacity = 0.25;
+		      root.ref.overlayError.opacity = 1;
+		    };
+
+		    var didCompleteProcessing = function didCompleteProcessing(_ref6) {
+		      var root = _ref6.root;
+		      root.ref.overlayShadow.opacity = 0.25;
+		      root.ref.overlaySuccess.opacity = 1;
+		    };
+
+		    /**
+		     * Constructor
+		     */
+		    var create = function create(_ref7) {
+		      var root = _ref7.root,
+		        props = _ref7.props;
+		      // test if colors aren't default item overlay colors
+		      var itemShadowColorProp = root.query(
+		        'GET_FILE_POSTER_ITEM_OVERLAY_SHADOW_COLOR'
+		      );
+
+		      var itemErrorColorProp = root.query(
+		        'GET_FILE_POSTER_ITEM_OVERLAY_ERROR_COLOR'
+		      );
+
+		      var itemSuccessColorProp = root.query(
+		        'GET_FILE_POSTER_ITEM_OVERLAY_SUCCESS_COLOR'
+		      );
+
+		      if (itemShadowColorProp && itemShadowColorProp !== itemShadowColor) {
+		        itemShadowColor = itemShadowColorProp;
+		        drawTemplate(
+		          overlayTemplateShadow,
+		          width,
+		          height,
+		          itemShadowColor,
+		          0.85
+		        );
+		      }
+		      if (itemErrorColorProp && itemErrorColorProp !== itemErrorColor) {
+		        itemErrorColor = itemErrorColorProp;
+		        drawTemplate(overlayTemplateError, width, height, itemErrorColor, 1);
+		      }
+		      if (itemSuccessColorProp && itemSuccessColorProp !== itemSuccessColor) {
+		        itemSuccessColor = itemSuccessColorProp;
+		        drawTemplate(
+		          overlayTemplateSuccess,
+		          width,
+		          height,
+		          itemSuccessColor,
+		          1
+		        );
+		      }
+
+		      // image view
+		      var image = createPosterView(_);
+
+		      // append image presenter
+		      root.ref.image = root.appendChildView(
+		        root.createChildView(image, {
+		          id: props.id,
+		          scaleX: 1.25,
+		          scaleY: 1.25,
+		          opacity: 0
+		        })
+		      );
+
+		      // image overlays
+		      root.ref.overlayShadow = root.appendChildView(
+		        root.createChildView(overlay, {
+		          template: overlayTemplateShadow,
+		          opacity: 0
+		        })
+		      );
+
+		      root.ref.overlaySuccess = root.appendChildView(
+		        root.createChildView(overlay, {
+		          template: overlayTemplateSuccess,
+		          opacity: 0
+		        })
+		      );
+
+		      root.ref.overlayError = root.appendChildView(
+		        root.createChildView(overlay, {
+		          template: overlayTemplateError,
+		          opacity: 0
+		        })
+		      );
+		    };
+
+		    return _.utils.createView({
+		      name: 'file-poster-wrapper',
+		      create: create,
+		      write: _.utils.createRoute({
+		        // image preview stated
+		        DID_FILE_POSTER_LOAD: didLoadPreview,
+		        DID_FILE_POSTER_DRAW: didDrawPreview,
+		        DID_FILE_POSTER_CONTAINER_CREATE: didCreatePreviewContainer,
+
+		        // file states
+		        DID_THROW_ITEM_LOAD_ERROR: didThrowError,
+		        DID_THROW_ITEM_PROCESSING_ERROR: didThrowError,
+		        DID_THROW_ITEM_INVALID: didThrowError,
+		        DID_COMPLETE_ITEM_PROCESSING: didCompleteProcessing,
+		        DID_START_ITEM_PROCESSING: restoreOverlay,
+		        DID_REVERT_ITEM_PROCESSING: restoreOverlay
+		      })
+		    });
+		  };
+
+		  /**
+		   * File Poster Plugin
+		   */
+		  var plugin = function plugin(fpAPI) {
+		    var addFilter = fpAPI.addFilter,
+		      utils = fpAPI.utils;
+		    var Type = utils.Type,
+		      createRoute = utils.createRoute;
+
+		    // filePosterView
+		    var filePosterView = createPosterWrapperView(fpAPI);
+
+		    // called for each view that is created right after the 'create' method
+		    addFilter('CREATE_VIEW', function(viewAPI) {
+		      // get reference to created view
+		      var is = viewAPI.is,
+		        view = viewAPI.view,
+		        query = viewAPI.query;
+
+		      // only hook up to item view and only if is enabled for this cropper
+		      if (!is('file') || !query('GET_ALLOW_FILE_POSTER')) return;
+
+		      // create the file poster plugin, but only do so if the item is an image
+		      var didLoadItem = function didLoadItem(_ref) {
+		        var root = _ref.root,
+		          props = _ref.props;
+		        updateItemPoster(root, props);
+		      };
+
+		      var didUpdateItemMetadata = function didUpdateItemMetadata(_ref2) {
+		        var root = _ref2.root,
+		          props = _ref2.props,
+		          action = _ref2.action;
+		        if (!/poster/.test(action.change.key)) return;
+		        updateItemPoster(root, props);
+		      };
+
+		      var updateItemPoster = function updateItemPoster(root, props) {
+		        var id = props.id;
+		        var item = query('GET_ITEM', id);
+
+		        // item could theoretically have been removed in the mean time
+		        if (!item || !item.getMetadata('poster') || item.archived) return;
+
+		        // don't update if is the same poster
+		        if (root.ref.previousPoster === item.getMetadata('poster')) return;
+		        root.ref.previousPoster = item.getMetadata('poster');
+
+		        // test if is filtered
+		        if (!query('GET_FILE_POSTER_FILTER_ITEM')(item)) return;
+
+		        if (root.ref.filePoster) {
+		          view.removeChildView(root.ref.filePoster);
+		        }
+
+		        // set preview view
+		        root.ref.filePoster = view.appendChildView(
+		          view.createChildView(filePosterView, { id: id })
+		        );
+
+		        // now ready
+		        root.dispatch('DID_FILE_POSTER_CONTAINER_CREATE', { id: id });
+		      };
+
+		      var didCalculatePreviewSize = function didCalculatePreviewSize(_ref3) {
+		        var root = _ref3.root,
+		          action = _ref3.action;
+		        // no poster set
+		        if (!root.ref.filePoster) return;
+
+		        // remember dimensions
+		        root.ref.imageWidth = action.width;
+		        root.ref.imageHeight = action.height;
+
+		        root.ref.shouldUpdatePanelHeight = true;
+
+		        root.dispatch('KICK');
+		      };
+
+		      var getPosterHeight = function getPosterHeight(_ref4) {
+		        var root = _ref4.root;
+		        var fixedPosterHeight = root.query('GET_FILE_POSTER_HEIGHT');
+
+		        // if fixed height: return fixed immediately
+		        if (fixedPosterHeight) {
+		          return fixedPosterHeight;
+		        }
+
+		        var minPosterHeight = root.query('GET_FILE_POSTER_MIN_HEIGHT');
+		        var maxPosterHeight = root.query('GET_FILE_POSTER_MAX_HEIGHT');
+
+		        // if natural height is smaller than minHeight: return min height
+		        if (minPosterHeight && root.ref.imageHeight < minPosterHeight) {
+		          return minPosterHeight;
+		        }
+
+		        var height =
+		          root.rect.element.width *
+		          (root.ref.imageHeight / root.ref.imageWidth);
+
+		        if (minPosterHeight && height < minPosterHeight) {
+		          return minPosterHeight;
+		        }
+		        if (maxPosterHeight && height > maxPosterHeight) {
+		          return maxPosterHeight;
+		        }
+
+		        return height;
+		      };
+
+		      // start writing
+		      view.registerWriter(
+		        createRoute(
+		          {
+		            DID_LOAD_ITEM: didLoadItem,
+		            DID_FILE_POSTER_CALCULATE_SIZE: didCalculatePreviewSize,
+		            DID_UPDATE_ITEM_METADATA: didUpdateItemMetadata
+		          },
+
+		          function(_ref5) {
+		            var root = _ref5.root,
+		              props = _ref5.props;
+		            // don't run without poster
+		            if (!root.ref.filePoster) return;
+
+		            // don't do anything while hidden
+		            if (root.rect.element.hidden) return;
+
+		            // should we redraw
+		            if (root.ref.shouldUpdatePanelHeight) {
+		              // time to resize the parent panel
+		              root.dispatch('DID_UPDATE_PANEL_HEIGHT', {
+		                id: props.id,
+		                height: getPosterHeight({ root: root })
+		              });
+
+		              // done!
+		              root.ref.shouldUpdatePanelHeight = false;
+		            }
+		          }
+		        )
+		      );
+		    });
+
+		    // expose plugin
+		    return {
+		      options: {
+		        // Enable or disable file poster
+		        allowFilePoster: [true, Type.BOOLEAN],
+
+		        // Fixed preview height
+		        filePosterHeight: [null, Type.INT],
+
+		        // Min image height
+		        filePosterMinHeight: [null, Type.INT],
+
+		        // Max image height
+		        filePosterMaxHeight: [null, Type.INT],
+
+		        // filters file items to determine which are shown as poster
+		        filePosterFilterItem: [
+		          function() {
+		            return true;
+		          },
+		          Type.FUNCTION
+		        ],
+
+		        // Enables or disables reading average image color
+		        filePosterCalculateAverageImageColor: [false, Type.BOOLEAN],
+
+		        // Allows setting the value of the CORS attribute (null is don't set attribute)
+		        filePosterCrossOriginAttributeValue: ['Anonymous', Type.STRING],
+
+		        // Colors used for item overlay gradient
+		        filePosterItemOverlayShadowColor: [null, Type.ARRAY],
+		        filePosterItemOverlayErrorColor: [null, Type.ARRAY],
+		        filePosterItemOverlaySuccessColor: [null, Type.ARRAY]
+		      }
+		    };
+		  };
+
+		  // fire pluginloaded event if running in browser, this allows registering the plugin when using async script tags
+		  var isBrowser =
+		    typeof window !== 'undefined' && typeof window.document !== 'undefined';
+		  if (isBrowser) {
+		    document.dispatchEvent(
+		      new CustomEvent('FilePond:pluginloaded', { detail: plugin })
+		    );
+		  }
+
+		  return plugin;
+		}); 
+	} (filepondPluginFilePoster$3));
+	return filepondPluginFilePoster$3.exports;
+}
+
+var filepondPluginFilePosterExports = requireFilepondPluginFilePoster();
+var filepondPluginFilePoster = /*@__PURE__*/getDefaultExportFromCjs(filepondPluginFilePosterExports);
+
+var filepondPluginFilePoster$1 = /*#__PURE__*/_mergeNamespaces({
+  __proto__: null,
+  default: filepondPluginFilePoster
+}, [filepondPluginFilePosterExports]);
+
+export { filepondPluginFilePoster$1 as f };