diff --git a/.gitignore b/.gitignore
index 9ea26ec..1e5a088 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,10 @@
-node_modules/*
+# OS files
+.DS_Store
+
+# npm modules
+/node_modules
+
+# Composer files
+/vendor
+
 package-lock.json
\ No newline at end of file
diff --git a/README.md b/README.md
index bb39569..3420d03 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,7 @@ composer require mullema/k3-image-clip
 ```
 
 ### Requirements
+- Kirby 3.6 -> use v3
 - Kirby 3.5 -> use v2.2.0
 - Kirby 3.3 -> use v2.1.0
 - Kirby 3.2.5 -> use v2.0.0
diff --git a/bili.config.js b/bili.config.js
deleted file mode 100644
index ad24cc0..0000000
--- a/bili.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-module.exports = {
-    input: 'src/main.js',
-    bundleNodeModules: true,
-    output: {
-        dir: './',
-        fileName: 'index.js',
-        format: 'umd-min',
-        sourceMap: false
-    },
-    plugins: {
-        vue: true,
-        img: true
-    }
-};
\ No newline at end of file
diff --git a/classes/FilePicker.php b/classes/FilePicker.php
index 03f2d3d..6b6cc7d 100644
--- a/classes/FilePicker.php
+++ b/classes/FilePicker.php
@@ -22,13 +22,15 @@ public function itemsToArray($items = null): array
         }
         $result = [];
         foreach ($items as $index => $item) {
+
             if (empty($this->options['map']) === false) {
                 $result[] = $this->options['map']($item);
             } else {
                 $result[] = array_merge(
-                    $item->panelPickerData([
+                    $item->panel()->pickerData([
                         'image' => $this->options['image'],
                         'info'  => $this->options['info'],
+                        'layout' => $this->options['layout'],
                         'model' => $this->options['model'],
                         'text'  => $this->options['text'],
                     ]),
diff --git a/composer.json b/composer.json
index fbd2157..a08f866 100644
--- a/composer.json
+++ b/composer.json
@@ -1,15 +1,19 @@
 {
   "name": "mullema/k3-image-clip",
-  "description": "Visual image clip for Kirby3.",
+  "description": "Visual image clip for Kirby 3",
   "type": "kirby-plugin",
   "license": "MIT",
   "authors": [
     {
       "name": "Matthias Müller",
-      "email": "moeli@moeli.com"
+      "email": "moeli@moeli.com",
+      "homepage": "https://getkirby.com/plugins/mullema"
     }
   ],
   "require": {
-    "getkirby/composer-installer": "^1.1"
+    "getkirby/composer-installer": "^1.2"
+  },
+  "extra": {
+    "installer-name": "k3-image-clip"
   }
-}
\ No newline at end of file
+}
diff --git a/fields/image-clip.php b/fields/image-clip.php
index 113329f..b967f67 100644
--- a/fields/image-clip.php
+++ b/fields/image-clip.php
@@ -1,6 +1,6 @@
 <?php
 
-use Kirby\Data\Yaml;
+use Kirby\Data\Data;
 use mullema\File;
 use mullema\FilePicker;
 
@@ -9,7 +9,7 @@
 return array_replace_recursive($base, [
     'props' => [
         'clip' => function ($clip = []) {
-            return Yaml::decode($clip);
+            return Data::decode($clip, 'yaml');
         }
     ],
     'methods' => [
@@ -25,11 +25,12 @@
             }
 
             return array_merge(
-                $file->panelPickerData([
+                $file->panel()->pickerData([
                     'image' => $this->image,
-                    'info'  => $this->info ?? false,
+                    'info' => $this->info ?? false,
+                    'layout' => $this->layout,
                     'model' => $this->model(),
-                    'text'  => $this->text,
+                    'text' => $this->text,
                 ]),
                 // append more information for clip field
                 [
@@ -40,23 +41,22 @@
         },
         'toFiles' => function ($value = null) {
             $files = [];
-                foreach (Yaml::decode($value) as $item) {
-
-                    // read from native files field
-                    if (!is_array($item)) {
-                        $id = $item;
-                        $clip = null;
-                    }
-                    // read image-clip field
-                    else {
-                        $id = $item['id'];
-                        $clip = $item['clip'] ?? null;
-                    }
+            foreach (Data::decode($value, 'yaml') as $item) {
+
+                // read from native files field
+                if (!is_array($item)) {
+                    $id = $item;
+                    $clip = null;
+                } // read image-clip field
+                else {
+                    $id = $item['id'];
+                    $clip = $item['clip'] ?? null;
+                }
 
-                    if ($id !== null && ($file = $this->kirby()->file($id, $this->model()))) {
-                        // add clip as parameter to fileResponse call
-                        $files[] = $this->fileResponse($file, $clip);
-                    }
+                if ($id !== null && ($file = $this->kirby()->file($id, $this->model()))) {
+                    // add clip as parameter to fileResponse call
+                    $files[] = $this->fileResponse($file, $clip);
+                }
             }
 
             return $files;
@@ -78,34 +78,36 @@
             // native field routes
             [
                 'pattern' => '/',
-                'action'  => function () {
+                'action' => function () {
                     $field = $this->field();
 
                     return $field->filepicker([
-                        'image'  => $field->image(),
-                        'info'   => $field->info(),
-                        'limit'  => $field->limit(),
-                        'page'   => $this->requestQuery('page'),
-                        'query'  => $field->query(),
+                        'image' => $field->image(),
+                        'info' => $field->info(),
+                        'layout' => $field->layout(),
+                        'limit' => $field->limit(),
+                        'page' => $this->requestQuery('page'),
+                        'query' => $field->query(),
                         'search' => $this->requestQuery('search'),
-                        'text'   => $field->text()
+                        'text' => $field->text()
                     ]);
                 }
             ],
             [
                 'pattern' => 'upload',
-                'method'  => 'POST',
-                'action'  => function () {
-                    $field   = $this->field();
+                'method' => 'POST',
+                'action' => function () {
+                    $field = $this->field();
                     $uploads = $field->uploads();
 
                     return $field->upload($this, $uploads, function ($file, $parent) use ($field) {
                         return array_merge(
-                            $file->panelPickerData([
+                            $file->panel()->pickerData([
                                 'image' => $field->image(),
-                                'info'  => $field->info(),
+                                'info' => $field->info(),
+                                'layout' => $field->layout(),
                                 'model' => $field->model(),
-                                'text'  => $field->text(),
+                                'text' => $field->text(),
                             ]),
                             // append more information for clip field
                             [
@@ -125,14 +127,14 @@
                 'action' => function () {
                     $id = get('id');
                     $clip = [
-                        'width' => (int) get('width'),
-                        'height' => (int) get('height'),
-                        'top' => (int) get('top'),
-                        'left' => (int) get('left')
+                        'width' => (int)get('width'),
+                        'height' => (int)get('height'),
+                        'top' => (int)get('top'),
+                        'left' => (int)get('left')
                     ];
 
                     // from https://github.com/getkirby/kirby/blob/3.2.4/config/helpers.php#L251
-                    $uri      = dirname($id);
+                    $uri = dirname($id);
                     $filename = basename($id);
 
                     if ($uri === '.') {
@@ -162,10 +164,9 @@
                         $file->setClip($clip);
 
                         return [
-                            'image' => $file->panelImage(),
+                            'image' => $file->panel()->image([], $this->field()->layout),
                         ];
-                    }
-                    else {
+                    } else {
                         throw new Exception("Clip: Could not find image parent.");
                     }
                 }
@@ -181,8 +182,7 @@
                     'id' => $item['id'],
                     'clip' => $item['clip']
                 ];
-            }
-            else {
+            } else {
                 $result[] = [
                     'id' => $item['id']
                 ];
diff --git a/index.css b/index.css
index b992db9..ed5f2a8 100644
--- a/index.css
+++ b/index.css
@@ -1,5 +1 @@
-
-.clip[data-v-c59f6268]{left:.75rem;cursor:pointer}.clip[data-v-c59f6268]:hover{background:#ddd}.clipicon[data-v-c59f6268]{width:2em;height:2em}
-
-.clip[data-v-7d15b97a]{cursor:pointer;padding:5px}.clip[data-v-7d15b97a]:hover{background:#eee}.clipicon[data-v-7d15b97a]{width:2em;height:2em}
-.croppr-container *{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.croppr-container img{vertical-align:middle;max-width:100%}.croppr{position:relative;display:inline-block}.croppr-overlay{background:rgba(0,0,0,.5);position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;cursor:crosshair}.croppr-region{border:1px dashed rgba(0,0,0,.5);position:absolute;z-index:3;cursor:move;top:0}.croppr-imageClipped{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.croppr-handle{border:1px solid #000;background-color:#fff;width:10px;height:10px;position:absolute;z-index:4;top:0}.preload{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:100000;background:#efefef}.preload-dialog-footer{position:absolute;left:1.5rem;bottom:0}.spinner{margin:auto 0;width:70px;text-align:center}.spinner>div{width:18px;height:18px;background-color:#333;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,100%,80%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}
+.relative[data-v-974829e6]{position:relative}.clip-handle[data-v-02c05879]{left:auto!important;right:0;cursor:crosshair;background:white}.list-handle[data-v-02c05879]{margin:auto;left:0!important;top:0;bottom:0;text-align:center}.clip-handle[data-v-02c05879]:hover{background:#ddd}.clipicon[data-v-02c05879]{width:1.5rem;height:1.5rem}.croppr-container *{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.croppr-container img{vertical-align:middle;max-width:100%}.croppr{position:relative;display:inline-block}.croppr-overlay{background:rgba(0,0,0,.5);position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;cursor:crosshair}.croppr-region{border:1px dashed rgba(0,0,0,.5);position:absolute;z-index:3;cursor:move;top:0}.croppr-imageClipped{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.croppr-handle{border:1px solid black;background-color:#fff;width:10px;height:10px;position:absolute;z-index:4;top:0}.preload{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:100000;background:#efefef}.preload-dialog-footer{position:absolute;left:1.5rem;bottom:0}.spinner{margin:auto 0;width:70px;text-align:center}.spinner>div{width:18px;height:18px;background-color:#333;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}
diff --git a/index.js b/index.js
index 38ebafd..f3ee67d 100644
--- a/index.js
+++ b/index.js
@@ -1 +1 @@
-!function(t){"function"==typeof define&&define.amd?define(t):t()}(function(){"use strict";var t=function(t,i,e,n,o,s,a,r,h,l){"boolean"!=typeof a&&(h=r,r=a,a=!1);var d,c="function"==typeof e?e.options:e;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),n&&(c._scopeId=n),s?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,h(t)),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=d):i&&(d=a?function(){i.call(this,l(this.$root.$options.shadowRoot))}:function(t){i.call(this,r(t))}),d)if(c.functional){var u=c.render;c.render=function(t,i){return d.call(i),u(t,i)}}else{var p=c.beforeCreate;c.beforeCreate=p?[].concat(p,d):[d]}return e},i=t({render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("k-field",t._b({staticClass:"k-files-field"},"k-field",t.$props,!1),[t.more&&!t.disabled?e("template",{slot:"options"},[e("k-button-group",{staticClass:"k-field-options"},[t.uploads?[e("k-dropdown",[e("k-button",{ref:"pickerToggle",staticClass:"k-field-options-button",attrs:{icon:"add"},on:{click:function(i){return t.$refs.picker.toggle()}}},[t._v("\n                        "+t._s(t.$t("add"))+"\n                    ")]),t._v(" "),e("k-dropdown-content",{ref:"picker",attrs:{align:"right"}},[e("k-dropdown-item",{attrs:{icon:"check"},on:{click:t.open}},[t._v(t._s(t.$t("select")))]),t._v(" "),e("k-dropdown-item",{attrs:{icon:"upload"},on:{click:t.upload}},[t._v(t._s(t.$t("upload")))])],1)],1)]:[e("k-button",{staticClass:"k-field-options-button",attrs:{icon:"add"},on:{click:t.open}},[t._v(t._s(t.$t("add")))])]],2)],1):t._e(),t._v(" "),t.selected.length?[e("k-draggable",{attrs:{element:t.elements.list,list:t.selected,"data-size":t.size,handle:!0,"data-invalid":t.isInvalid},on:{end:t.onInput}},t._l(t.selected,function(i,n){return e(t.elements.item,{key:i.filename,tag:"component",attrs:{sortable:!t.disabled&&t.selected.length>1,text:i.text,link:i.link,info:i.info,image:i.image,icon:i.icon,id:i.id,resizable:i.resizable,disabled:i.disabled},on:{openclipdialog:t.openClipDialog}},[t.disabled?t._e():e("k-button",{attrs:{slot:"options",tooltip:t.$t("remove"),icon:"remove"},on:{click:function(i){return t.remove(n)}},slot:"options"})],1)}),1)]:e("k-empty",{attrs:{layout:t.layout,icon:"image","data-invalid":t.isInvalid},on:{click:t.open}},[t._v("\n        "+t._s(t.empty||t.$t("field.files.empty"))+"\n    ")]),t._v(" "),e("k-files-dialog",{ref:"selector",on:{submit:t.select}}),t._v(" "),e("k-upload",{ref:"fileUpload",on:{success:t.selectUpload}}),t._v(" "),e("k-clip-dialog",{ref:"clip",attrs:{size:"large",image:t.clip_image,clip:t.clip},on:{submit:t.clippedArea}})],2)},staticRenderFns:[]},void 0,{extends:"k-files-field",props:{clip:{type:Object,default:null}},data:function(){return{clip_image:{}}},computed:{elements:function(){var t={cards:{list:"k-cards",item:"k-clip-card"},list:{list:"k-list",item:"k-clip-list-item"}};return t[this.layout]?t[this.layout]:t.list}},methods:{openClipDialog:function(t){this.clip_image=this.value.find(function(i){return i.id===t}),this.$refs.clip.open()},clippedArea:function(t){this.clip_image.clip=t.clip,this.onInput(),this.getPreview(t.id,t.clip)},getPreview:function(t,i){var e=this;this.$api.post(this.endpoints.field+"/preview",{id:t,width:i.width,height:i.height,top:i.top,left:i.left}).then(function(i){if(!i.image)throw new Error("image clip: no image for preview received.");var n=e.name,o=e.$store.state.content.current,s=e.$store.getters["content/values"](o)[n];s?(s.find(function(i){return i.id===t}).image=i.image,e.$store.dispatch("content/update",[n,s,o])):e.selected.find(function(i){return i.id===t}).image=i.image}).catch(function(t){console.log(t)})}}},void 0,!1,void 0,void 0,void 0),e=t({render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("figure",t._g({staticClass:"k-card"},t.$listeners),[t.sortable?e("k-sort-handle"):t._e(),t._v(" "),t.resizable&&!t.disabled?e("k-clip-handle",{on:{clicked:t.openClipDialog}}):t._e(),t._v(" "),e(t.wrapper,{tag:"component",attrs:{to:t.link,target:t.target}},[t.imageOptions?e("k-image",t._b({staticClass:"k-card-image"},"k-image",t.imageOptions,!1)):e("span",{staticClass:"k-card-icon",style:"padding-bottom:"+t.ratioPadding},[e("k-icon",t._b({},"k-icon",t.icon,!1))],1),t._v(" "),e("figcaption",{staticClass:"k-card-content"},[e("span",{staticClass:"k-card-text",attrs:{"data-noinfo":!t.info}},[t._v(t._s(t.text))]),t._v(" "),t.info?e("span",{staticClass:"k-card-info",domProps:{innerHTML:t._s(t.info)}}):t._e()])],1),t._v(" "),e("nav",{staticClass:"k-card-options"},[t.flag?e("k-button",t._b({staticClass:"k-card-options-button",on:{click:t.flag.click}},"k-button",t.flag,!1)):t._e(),t._v(" "),t._t("options",[t.options?e("k-button",{staticClass:"k-card-options-button",attrs:{tooltip:t.$t("options"),icon:"dots"},on:{click:function(i){return i.stopPropagation(),t.$refs.dropdown.toggle()}}}):t._e(),t._v(" "),e("k-dropdown-content",{ref:"dropdown",staticClass:"k-card-options-dropdown",attrs:{options:t.options,align:"right"},on:{action:function(i){return t.$emit("action",i)}}})])],2)],1)},staticRenderFns:[]},void 0,{extends:"k-card",props:{id:String,resizable:Boolean,disabled:Boolean},methods:{openClipDialog:function(){this.$emit("openclipdialog",this.id)}}},"data-v-290c02b0",!1,void 0,void 0,void 0),n="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgBAMAAAAQtmoLAAAAMFBMVEUAAAAzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzPzX0yTAAAAD3RSTlMAQIDAEPDQYLAgoFBwMJALzXfXAAAAsElEQVRYw+3TPQoCMRCG4RgXVEQwrVXwFhbilt7AQu+QvYl7BQ9h72XshUUtP+NPQImBDAq7Webtn2I+GMFxXG1JVAzaDjJlm+CivMrvoINQOhnwSPpHG2jarAsGDH4BOREs1zQwMpiRwB44HwhAwlaV0SDb4t5GiOEqCvTxbG5lEQO6eHUErtHAVVDBKU3Qm76lG/MPH2CnbHkIhBonAwbKy7ijY3OzMmg74Djuj90AekzAtvxv03QAAAAASUVORK5CYII=",o=t({render:function(){var t=this.$createElement,i=this._self._c||t;return i("span",{staticClass:"k-sort-handle clip",attrs:{"aria-hidden":"true"}},[i("img",{staticClass:"clipicon",attrs:{src:n,alt:"Clip"},on:{click:this.open}})])},staticRenderFns:[]},void 0,{extends:"k-sort-handle",methods:{open:function(){this.$emit("clicked")}}},"data-v-c59f6268",!1,void 0,void 0,void 0),s=t({render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e(t.element,t._g({tag:"component",staticClass:"k-list-item"},t.$listeners),[t.sortable?e("k-sort-handle"):t._e(),t._v(" "),e("k-link",{directives:[{name:"tab",rawName:"v-tab"}],staticClass:"k-list-item-content",attrs:{to:t.link,target:t.target}},[e("span",{staticClass:"k-list-item-image"},[t.imageOptions?e("k-image",t._b({},"k-image",t.imageOptions,!1)):e("k-icon",t._b({},"k-icon",t.icon,!1))],1),t._v(" "),e("span",{staticClass:"k-list-item-text"},[e("em",[t._v(t._s(t.text))]),t._v(" "),t.info?e("small",{domProps:{innerHTML:t._s(t.info)}}):t._e()])]),t._v(" "),e("nav",{staticClass:"k-list-item-options"},[t.resizable&&!t.disabled?e("k-clip-button",{on:{clicked:t.openClipDialog}}):t._e(),t._v(" "),t._t("options",[t.flag?e("k-button",t._b({on:{click:t.flag.click}},"k-button",t.flag,!1)):t._e(),t._v(" "),t.options?e("k-button",{staticClass:"k-list-item-toggle",attrs:{tooltip:t.$t("options"),icon:"dots",alt:"Options"},on:{click:function(i){return i.stopPropagation(),t.$refs.options.toggle()}}}):t._e(),t._v(" "),e("k-dropdown-content",{ref:"options",attrs:{options:t.options,align:"right"},on:{action:function(i){return t.$emit("action",i)}}})])],2)],1)},staticRenderFns:[]},void 0,{extends:"k-list-item",props:{id:String,resizable:Boolean,disabled:Boolean},methods:{openClipDialog:function(){this.$emit("openclipdialog",this.id)}}},"data-v-9cf224f4",!1,void 0,void 0,void 0),a=t({render:function(){var t=this.$createElement,i=this._self._c||t;return i("span",{staticClass:"k-button clip",attrs:{"aria-hidden":"true"}},[i("img",{staticClass:"clipicon",attrs:{src:n,alt:"Clip"},on:{click:this.open}})])},staticRenderFns:[]},void 0,{extends:"k-sort-handle",methods:{open:function(){this.$emit("clicked")}}},"data-v-7d15b97a",!1,void 0,void 0,void 0);function r(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var h,l=(function(t,i){t.exports=function(){(function(){for(var t=0,i=["ms","moz","webkit","o"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i,e){var n=(new Date).getTime(),o=Math.max(0,16-(n-t)),s=window.setTimeout(function(){i(n+o)},o);return t=n+o,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})})(),function(){if("function"==typeof window.CustomEvent)return!1;function t(t,i){i=i||{bubbles:!1,cancelable:!1,detail:void 0};var e=document.createEvent("CustomEvent");return e.initCustomEvent(t,i.bubbles,i.cancelable,i.detail),e}t.prototype=window.Event.prototype,window.CustomEvent=t}(),function(t){try{return new CustomEvent("test"),!1}catch(t){}function i(i,e){e=e||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(i,e.bubbles,e.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),n}i.prototype=Event.prototype,t.MouseEvent=i}(window);var t=function(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")},i=function(){function t(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(i,e,n){return e&&t(i.prototype,e),n&&t(i,n),i}}(),e=function t(i,e,n){null===i&&(i=Function.prototype);var o=Object.getOwnPropertyDescriptor(i,e);if(void 0===o){var s=Object.getPrototypeOf(i);return null===s?void 0:t(s,e,n)}if("value"in o)return o.value;var a=o.get;return void 0!==a?a.call(n):void 0},n=function(t,i){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!i||"object"!=typeof i&&"function"!=typeof i?t:i},o=function(t,i){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return function(t,i){var e=[],n=!0,o=!1,s=void 0;try{for(var a,r=t[Symbol.iterator]();!(n=(a=r.next()).done)&&(e.push(a.value),!i||e.length!==i);n=!0);}catch(t){o=!0,s=t}finally{try{!n&&r.return&&r.return()}finally{if(o)throw s}}return e}(t,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")},s=function i(e,n,o,s){t(this,i);var a=this;function r(t){t.stopPropagation(),document.removeEventListener("mouseup",r),document.removeEventListener("mousemove",h),a.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:a}}))}function h(t){t.stopPropagation(),a.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}this.position=e,this.constraints=n,this.cursor=o,this.eventBus=s,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=o,this.el.addEventListener("mousedown",function(t){t.stopPropagation(),document.addEventListener("mouseup",r),document.addEventListener("mousemove",h),a.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:a}}))})},a=function(){function e(i,n,o,s){t(this,e),this.x1=i,this.y1=n,this.x2=o,this.y2=s}return i(e,[{key:"set",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return this.x1=null==t?this.x1:t,this.y1=null==i?this.y1:i,this.x2=null==e?this.x2:e,this.y2=null==n?this.y2:n,this}},{key:"width",value:function(){return Math.abs(this.x2-this.x1)}},{key:"height",value:function(){return Math.abs(this.y2-this.y1)}},{key:"resize",value:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.x1+this.width()*e[0],o=this.y1+this.height()*e[1];return this.x1=n-t*e[0],this.y1=o-i*e[1],this.x2=this.x1+t,this.y2=this.y1+i,this}},{key:"scale",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],e=this.width()*t,n=this.height()*t;return this.resize(e,n,i),this}},{key:"move",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,e=this.width(),n=this.height();return t=null===t?this.x1:t,i=null===i?this.y1:i,this.x1=t,this.y1=i,this.x2=t+e,this.y2=i+n,this}},{key:"getRelativePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0],i=this.width()*t[0],e=this.height()*t[1];return[i,e]}},{key:"getAbsolutePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0],i=this.x1+this.width()*t[0],e=this.y1+this.height()*t[1];return[i,e]}},{key:"constrainToRatio",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"height";if(null!==t){switch(this.width(),this.height(),e){case"height":this.resize(this.width(),this.width()*t,i);break;case"width":this.resize(1*this.height()/t,this.height(),i);break;default:this.resize(this.width(),this.width()*t,i)}return this}}},{key:"constrainToBoundary",value:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.getAbsolutePoint(e),s=o(n,2),a=s[0],r=s[1],h=a,l=r,d=t-a,c=i-r,u=-2*e[0]+1,p=-2*e[1]+1,v=null,m=null;switch(u){case-1:v=h;break;case 0:v=2*Math.min(h,d);break;case 1:v=d}switch(p){case-1:m=l;break;case 0:m=2*Math.min(l,c);break;case 1:m=c}if(this.width()>v){var g=v/this.width();this.scale(g,e)}if(this.height()>m){var f=m/this.height();this.scale(f,e)}return this}},{key:"constrainToSize",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[0,0],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null;if(s&&(s>1?(t=1*i/s,n=e*s):s<1&&(i=t*s,e=1*n/s)),t&&this.width()>t){var a=t,r=null===s?this.height():i;this.resize(a,r,o)}if(i&&this.height()>i){var h=null===s?this.width():t,l=i;this.resize(h,l,o)}if(e&&this.width()<e){var d=e,c=null===s?this.height():n;this.resize(d,c,o)}if(n&&this.height()<n){var u=null===s?this.width():e,p=n;this.resize(u,p,o)}return this}}]),e}();function r(t){t.preventDefault();var i=t.changedTouches[0];i.target.dispatchEvent(new MouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[t.type],{bubbles:!0,cancelable:!0,view:window,clientX:i.clientX,clientY:i.clientY,screenX:i.screenX,screenY:i.screenY}))}var h=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}];function l(t,i){return Number(Math.round(t+"e"+i)+"e-"+i)}return function(o){function s(i,e){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return t(this,s),n(this,(s.__proto__||Object.getPrototypeOf(s)).call(this,i,e,o))}return function(t,i){if("function"!=typeof i&&null!==i)throw new TypeError("Super expression must either be null or a function, not "+typeof i);t.prototype=Object.create(i&&i.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),i&&(Object.setPrototypeOf?Object.setPrototypeOf(t,i):t.__proto__=i)}(s,o),i(s,[{key:"getValue",value:function(t){return e(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"getValue",this).call(this,t)}},{key:"setImage",value:function(t){return e(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"setImage",this).call(this,t)}},{key:"destroy",value:function(){return e(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"destroy",this).call(this)}},{key:"moveTo",value:function(t,i){return this.box.move(t,i),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"resizeTo",value:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[.5,.5];return this.box.resize(t,i,e),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"scaleBy",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[.5,.5];return this.box.scale(t,i),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"reset",value:function(){return this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}]),s}(function(){function e(i,n){var o=this,s=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t(this,e),this.options=e.parseOptions(n||{}),!i.nodeName&&null==(i=document.querySelector(i)))throw"Unable to find element.";if(!i.getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:i.parentNode,element:i},s||(0===i.width||0===i.height?i.onload=function(){o.initialize(i)}:this.initialize(i))}return i(e,[{key:"initialize",value:function(t){this.createDOM(t),this.options.convertToPixels(this.cropperEl),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.box=this.initializeBox(this.options),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this)}},{key:"createDOM",value:function(t){var i;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(i=this.containerEl).addEventListener("touchstart",r),i.addEventListener("touchend",r),i.addEventListener("touchmove",r),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",t.getAttribute("src")),this.imageEl.setAttribute("alt",t.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var e=document.createElement("div");e.className="croppr-handleContainer",this.handles=[];for(var n=0;n<h.length;n++){var o=new s(h[n].position,h[n].constraints,h[n].cursor,this.eventBus);this.handles.push(o),e.appendChild(o.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(e),this.containerEl.appendChild(this.cropperEl),t.parentElement.replaceChild(this.containerEl,t)}},{key:"setImage",value:function(t){var i=this;return this.imageEl.onload=function(){i.box=i.initializeBox(i.options),i.redraw()},this.imageEl.src=t,this.imageClippedEl.src=t,this}},{key:"destroy",value:function(){this._restore.parent.replaceChild(this._restore.element,this.containerEl)}},{key:"initializeBox",value:function(t){var i=t.startSize.width,e=t.startSize.height,n=new a(0,0,i,e);n.constrainToRatio(t.aspectRatio,[.5,.5]);var o=t.minSize,s=t.maxSize;n.constrainToSize(s.width,s.height,o.width,o.height,[.5,.5],t.aspectRatio);var r=this.cropperEl.offsetWidth,h=this.cropperEl.offsetHeight;n.constrainToBoundary(r,h,[.5,.5]);var l=this.cropperEl.offsetWidth/2-n.width()/2,d=this.cropperEl.offsetHeight/2-n.height()/2;return n.move(l,d),n}},{key:"redraw",value:function(){var t=this,i=Math.round(this.box.width()),e=Math.round(this.box.height()),n=Math.round(this.box.x1),o=Math.round(this.box.y1),s=Math.round(this.box.x2),a=Math.round(this.box.y2);window.requestAnimationFrame(function(){t.regionEl.style.transform="translate("+n+"px, "+o+"px)",t.regionEl.style.width=i+"px",t.regionEl.style.height=e+"px",t.imageClippedEl.style.clip="rect("+o+"px, "+s+"px, "+a+"px, "+n+"px)";for(var r=t.box.getAbsolutePoint([.5,.5]),h=r[0]-t.cropperEl.offsetWidth/2>>31,l=r[1]-t.cropperEl.offsetHeight/2>>31,d=(h^l)+l+l+4,c=-2*d+8,u=0;u<t.handles.length;u++){var p=t.handles[u],v=p.el.offsetWidth,m=p.el.offsetHeight,g=n+i*p.position[0]-v/2,f=o+e*p.position[1]-m/2;p.el.style.transform="translate("+Math.round(g)+"px, "+Math.round(f)+"px)",p.el.style.zIndex=c==u?5:4}})}},{key:"attachHandlerEvents",value:function(){var t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}},{key:"attachRegionEvents",value:function(){var t=this.eventBus;function i(i){i.stopPropagation(),t.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:i.clientX,mouseY:i.clientY}}))}function e(n){n.stopPropagation(),document.removeEventListener("mouseup",e),document.removeEventListener("mousemove",i),t.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}this.regionEl.addEventListener("mousedown",function(n){n.stopPropagation(),document.addEventListener("mouseup",e),document.addEventListener("mousemove",i),t.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}),t.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),t.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),t.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}},{key:"attachOverlayEvents",value:function(){var t=4,i=this,e=null;function n(t){t.stopPropagation(),i.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function o(t){t.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",n),1!==i.box.width()||1!==i.box.height()?i.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:t.clientX,mouseY:t.clientY}})):i.box=e}this.overlayEl.addEventListener("mousedown",function(s){s.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",n);var r=i.cropperEl.getBoundingClientRect(),h=s.clientX-r.left,l=s.clientY-r.top;e=i.box,i.box=new a(h,l,h+1,l+1),i.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:i.handles[t]}}))})}},{key:"onHandleMoveStart",value:function(t){var i=t.detail.handle,e=[1-i.position[0],1-i.position[1]],n=this.box.getAbsolutePoint(e),s=o(n,2),a=s[0],r=s[1];this.activeHandle={handle:i,originPoint:e,originX:a,originY:r},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onHandleMoveMoving",value:function(t){var i=t.detail,e=i.mouseX,n=i.mouseY,o=this.cropperEl.getBoundingClientRect();e-=o.left,n-=o.top,e<0?e=0:e>o.width&&(e=o.width),n<0?n=0:n>o.height&&(n=o.height);var s=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,h=this.activeHandle.originY,l=this.activeHandle.handle,d=1===l.constraints[0],c=1===l.constraints[1],u=1===l.constraints[2],p=1===l.constraints[3],v=(p||c)&&(d||u),m=p||c?r:this.box.x1,g=p||c?r:this.box.x2,f=d||u?h:this.box.y1,w=d||u?h:this.box.y2;m=p?e:m,g=c?e:g,f=d?n:f,w=u?n:w;var _=!1,b=!1;if((p||c)&&(_=p?e>r:e<r),(d||u)&&(b=d?n>h:n<h),_){var y=m;m=g,g=y,s[0]=1-s[0]}if(b){var E=f;f=w,w=E,s[1]=1-s[1]}var x=new a(m,f,g,w);if(this.options.aspectRatio){var k=this.options.aspectRatio,C=!1;v?C=n>x.y1+k*x.width()||n<x.y2-k*x.width():(d||u)&&(C=!0);var z=C?"width":"height";x.constrainToRatio(k,s,z)}var M=this.cropperEl.offsetWidth,S=this.cropperEl.offsetHeight;x.constrainToBoundary(M,S,s);var A=this.options.minSize,R=this.options.maxSize;x.constrainToSize(R.width,R.height,A.width,A.height,s,this.options.aspectRatio),x.x1<0||x.y1<0||x.x2>Math.ceil(o.width)||x.y2>Math.ceil(o.height)||(this.box=x,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue()))}},{key:"onHandleMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"onRegionMoveStart",value:function(t){var i=t.detail,e=i.mouseX,n=i.mouseY,o=this.cropperEl.getBoundingClientRect();e-=o.left,n-=o.top,this.currentMove={offsetX:e-this.box.x1,offsetY:n-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onRegionMoveMoving",value:function(t){var i=t.detail,e=i.mouseX,n=i.mouseY,o=this.currentMove,s=o.offsetX,a=o.offsetY,r=this.cropperEl.getBoundingClientRect();e-=r.left,n-=r.top,this.box.move(e-s,n-a),this.box.x1<0&&this.box.move(0,null),this.box.x2>r.width&&this.box.move(r.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>r.height&&this.box.move(null,r.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onRegionMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"getValue",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(null===t&&(t=this.options.returnMode),"real"==t){var i=this.imageEl.naturalWidth,e=this.imageEl.naturalHeight,n=this.imageEl.getBoundingClientRect(),o=n.width,s=n.height,a=i/o,r=e/s;return{x:Math.round(this.box.x1*a),y:Math.round(this.box.y1*r),width:Math.round(this.box.width()*a),height:Math.round(this.box.height()*r)}}if("ratio"==t){var h=this.imageEl.getBoundingClientRect(),d=h.width,c=h.height;return{x:l(this.box.x1/d,3),y:l(this.box.y1/c,3),width:l(this.box.width()/d,3),height:l(this.box.height()/c,3)}}if("raw"==t)return{x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}}}],[{key:"parseOptions",value:function(t){var i={aspectRatio:null,maxSize:{width:null,height:null},minSize:{width:null,height:null},startSize:{width:100,height:100,unit:"%"},returnMode:"real",onInitialize:null,onCropStart:null,onCropMove:null,onCropEnd:null},e=null;void 0!==t.aspectRatio&&("number"==typeof t.aspectRatio?e=t.aspectRatio:t.aspectRatio instanceof Array&&(e=t.aspectRatio[1]/t.aspectRatio[0]));var n=null;void 0!==t.maxSize&&null!==t.maxSize&&(n={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"px"});var o=null;void 0!==t.minSize&&null!==t.minSize&&(o={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"px"});var s=null;void 0!==t.startSize&&null!==t.startSize&&(s={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"%"});var a=null;"function"==typeof t.onInitialize&&(a=t.onInitialize);var r=null;"function"==typeof t.onCropStart&&(r=t.onCropStart);var h=null;"function"==typeof t.onCropEnd&&(h=t.onCropEnd);var l=null;"function"==typeof t.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),l=t.onUpdate),"function"==typeof t.onCropMove&&(l=t.onCropMove);var d=null;if(void 0!==t.returnMode){var c=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(c))throw"Invalid return mode.";d=c}var u=function(t,i){return null!==t?t:i};return{aspectRatio:u(e,i.aspectRatio),maxSize:u(n,i.maxSize),minSize:u(o,i.minSize),startSize:u(s,i.startSize),returnMode:u(d,i.returnMode),onInitialize:u(a,i.onInitialize),onCropStart:u(r,i.onCropStart),onCropMove:u(l,i.onCropMove),onCropEnd:u(h,i.onCropEnd),convertToPixels:function(t){for(var i=t.offsetWidth,e=t.offsetHeight,n=["maxSize","minSize","startSize"],o=0;o<n.length;o++){var s=n[o];null!==this[s]&&("%"==this[s].unit&&(null!==this[s].width&&(this[s].width=this[s].width/100*i),null!==this[s].height&&(this[s].height=this[s].height/100*e)),delete this[s].unit)}}}}}]),e}())}()}(h={exports:{}},h.exports),h.exports);function d(t){var i=t.srcWidth,e=t.srcHeight,n=t.maxWidth,o=t.maxHeight,s=Math.min(n/i,o/e);return{width:i*s,height:e*s}}var c=function(){function t(i){var e=i.el,n=i.original_dimensions,o=i.saved,s=i.clip,a=i.events;!function(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}(this,t),this.el=e,this.original_dimensions=n,this.saved=o,this.min_width=s?s.minwidth:null,this.min_height=s?s.minheight:null,this.max_width=s?s.maxwidth:null,this.max_height=s?s.maxheight:null,this.limit_width=null,this.limit_height=null,this.ratio=s?s.ratio:null,this.events=a,this.validate(),this.cropInstance=this.init()}var i,e,n;return i=t,(e=[{key:"reset",value:function(t){var i=t.position;this.cropInstance.destroy(),this.saved=i,this.cropInstance=this.init()}},{key:"init",value:function(){var t=this,i=Object.assign({returnMode:"raw",onInitialize:function(i){document.getElementsByClassName("croppr-image")[0].addEventListener("load",function(i){t.image=i.target,t.factor_w=t.original_dimensions.width/i.target.clientWidth,t.factor_h=t.original_dimensions.height/i.target.clientHeight,t.setStartPosition()},!1)}},this.events);return this.min_width&&this.min_height&&(i.aspectRatio="fixed"===this.ratio?this.min_height/this.min_width:null,i.minSize=[this.min_width,this.min_height,"px"],this.limit_width=this.min_width,this.limit_height=this.min_height),this.max_width&&this.max_height&&(i.aspectRatio="fixed"===this.ratio?this.max_height/this.max_width:null,i.maxSize=[this.max_width,this.max_height,"px"],this.limit_width=this.max_width,this.limit_height=this.max_height),new l(this.el,i)}},{key:"getCropArea",value:function(){var t=this.cropInstance.getValue(),i={width:this.roundSize(t.width*this.factor_w,this.limit_width),height:this.roundSize(t.height*this.factor_h,this.limit_height)};return i.left=this.adjustPosition(t.x*this.factor_w,i.width,this.original_dimensions.width),i.top=this.adjustPosition(t.y*this.factor_h,i.height,this.original_dimensions.height),i}},{key:"setStartPosition",value:function(){var t={width:10,height:10};if(this.max_width&&this.max_height&&(this.cropInstance.options.maxSize=t={width:this.max_width/this.factor_w,height:this.max_height/this.factor_h}),this.min_width&&this.min_height&&(this.cropInstance.options.minSize=t={width:this.min_width/this.factor_w,height:this.min_height/this.factor_h}),this.saved){var i={width:Math.round(this.saved.width/this.factor_w),height:Math.round(this.saved.height/this.factor_h),left:Math.round(this.saved.left/this.factor_w),top:Math.round(this.saved.top/this.factor_h)};this.cropInstance.resizeTo(i.width,i.height),this.cropInstance.moveTo(i.left,i.top)}else{var e=d({srcWidth:t.width,srcHeight:t.height,maxWidth:this.original_dimensions.width,maxHeight:this.original_dimensions.height});t={width:e.width/this.factor_w,height:e.height/this.factor_h},this.cropInstance.resizeTo(t.width,t.height),this.cropInstance.moveTo(0,0)}}},{key:"validate",value:function(){if(this.min_width&&this.original_dimensions.width<this.min_width)throw new Error("Image width (".concat(this.original_dimensions.width,"px) must be at least ").concat(this.min_width,"px"));if(this.min_height&&this.original_dimensions.height<this.min_height)throw new Error("Image height (".concat(this.original_dimensions.height,"px) must be at least ").concat(this.min_height,"px"));if(this.min_width&&this.min_height&&this.max_width&&this.max_height&&"fixed"===this.ratio&&this.min_width/this.min_height!=this.max_width/this.max_height)throw new Error("Ratio must be same for min and max")}},{key:"roundSize",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;return i&&i-t>=-1&&i-t<=1?i:Math.round(t)}},{key:"adjustPosition",value:function(t,i,e){return t+i>e?e-i:Math.round(t)}}])&&r(i.prototype,e),n&&r(i,n),t}();var u=t({render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("k-overlay",{ref:"overlay",attrs:{autofocus:t.autofocus,centered:!0},on:{ready:function(i){return t.$emit("ready")}}},[e("div",{ref:"dialog",staticClass:"k-dialog",class:t.$vnode.data.staticClass,style:t.dialog_width,attrs:{"data-size":t.size},on:{mousedown:function(t){t.stopPropagation()}}},[t.notification?e("div",{staticClass:"k-dialog-notification",attrs:{"data-theme":t.notification.type}},[e("p",[t._v(t._s(t.notification.message))]),t._v(" "),e("k-button",{attrs:{icon:"cancel"},on:{click:function(i){t.notification=null}}})],1):t._e(),t._v(" "),t.image?e("div",{staticClass:"k-dialog-body"},[t.spinner?e("div",{staticClass:"preload"},[e("div",{staticClass:"spinner"},[e("div",{staticClass:"bounce1"}),t._v(" "),e("div",{staticClass:"bounce2"}),t._v(" "),e("div",{staticClass:"bounce3"})]),t._v(" "),e("footer",{staticClass:"preload-dialog-footer"},[t._t("footer",[e("k-button-group",[e("k-button",{staticClass:"k-dialog-button-cancel",attrs:{icon:"cancel"},on:{click:t.cancel}},[t._v("\n                "+t._s(t.$t("cancel"))+"\n              ")])],1)])],2)]):t._e(),t._v(" "),e("img",{attrs:{src:t.image.url,id:"croppr"}})]):t._e(),t._v(" "),e("footer",{staticClass:"k-dialog-footer"},[t._t("footer",[e("k-button-group",[e("k-button",{staticClass:"k-dialog-button-cancel",attrs:{icon:"cancel"},on:{click:t.cancel}},[t._v("\n            "+t._s(t.$t("cancel"))+"\n          ")]),t._v(" "),e("k-button",{staticClass:"k-dialog-button-submit",attrs:{icon:t.icon,theme:t.theme},on:{click:t.submit}},[t._v("\n            "+t._s(t.button||t.$t("confirm"))+"\n          ")])],1)])],2)])])},staticRenderFns:[]},void 0,{extends:"k-dialog",props:{image:{type:Object,default:null},clip:{type:Object,default:null}},data:function(){return{cropprFacade:null,dialog_width:null,spinner:!0,freezeDialog:!1,was_moved:!1}},created:function(){this.$on("ready",this.isOpen,!1),this.$on("close",this.isClosed,!1)},destroyed:function(){this.$off("ready",this.isOpen,!1),this.$off("close",this.isClosed,!1)},methods:{isOpen:function(){var t=this;this.setDialogWidth(),this.showSpinner(),this.$nextTick(function(){var i=document.getElementById("croppr");i.addEventListener("load",t.hideSpinner,!1),i.complete&&t.hideSpinner();try{t.cropprFacade=new c({el:i,original_dimensions:t.image.dimensions,clip:t.clip,saved:t.image.clip,events:{onCropStart:function(){t.freezeDialog=!0,t.was_moved=!0},onCropEnd:function(){setTimeout(function(){t.freezeDialog=!1},200)}}}),window.addEventListener("resize",t.showSpinner,!1),window.addEventListener("resize",t.resizeDialog,!1)}catch(i){t.cancel(),console.error(t.image.id+": "+i.message),t.$store.dispatch("notification/error",i.message)}})},isClosed:function(){window.removeEventListener("resize",this.showSpinner,!1),window.removeEventListener("resize",this.resizeDialog,!1)},cancel:function(){this.freezeDialog||(this.$emit("cancel"),this.close())},remToPx:function(){return(arguments.length>0&&void 0!==arguments[0]?arguments[0]:1)*parseInt(getComputedStyle(document.documentElement).fontSize)},submit:function(){this.was_moved&&(this.$emit("submit",{id:this.image.id,clip:this.cropprFacade.getCropArea()}),this.was_moved=!1),this.close()},setDialogWidth:function(){var t=window.innerWidth-this.remToPx(6),i=window.innerHeight-this.remToPx(12),e=d({srcWidth:this.image.dimensions.width,srcHeight:this.image.dimensions.height,maxWidth:t,maxHeight:i}),n=this.image.dimensions.width;(this.image.dimensions.width>t||this.image.dimensions.height>i)&&(n=e.width),this.dialog_width="width: "+n+"px;"},resizeDialog:function(t){var i,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100;return function(){for(var n=this,o=arguments.length,s=new Array(o),a=0;a<o;a++)s[a]=arguments[a];window.clearTimeout(i),i=window.setTimeout(function(){t.apply(n,s)},e)}}(function(){this.setDialogWidth();var t=this.cropprFacade.getCropArea();this.cropprFacade.reset({position:t}),this.spinner=!1},500),hideSpinner:function(){this.spinner=!1},showSpinner:function(){!1===this.spinner&&(this.spinner=!0)}}},void 0,!1,void 0,void 0,void 0),p=t({},void 0,{extends:"k-files-field-preview"},"data-v-0ef04a10",void 0,void 0,void 0,void 0);panel.plugin("mullema/image-clip",{fields:{"image-clip":i},components:{"k-clip-card":e,"k-clip-handle":o,"k-clip-list-item":s,"k-clip-button":a,"k-clip-dialog":u,"k-image-clip-field-preview":p}})});
+var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(t,i,e)=>i in t?__defProp(t,i,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[i]=e,__spreadValues=(t,i)=>{for(var e in i||(i={}))__hasOwnProp.call(i,e)&&__defNormalProp(t,e,i[e]);if(__getOwnPropSymbols)for(var e of __getOwnPropSymbols(i))__propIsEnum.call(i,e)&&__defNormalProp(t,e,i[e]);return t};!function(){"use strict";function t(t,i,e,n,o,s,r,a){var h,l="function"==typeof t?t.options:t;if(i&&(l.render=i,l.staticRenderFns=e,l._compiled=!0),n&&(l.functional=!0),s&&(l._scopeId="data-v-"+s),r?(h=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},l._ssrRegister=h):o&&(h=a?function(){o.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:o),h)if(l.functional){l._injectStyles=h;var c=l.render;l.render=function(t,i){return h.call(i),c(t,i)}}else{var d=l.beforeCreate;l.beforeCreate=d?[].concat(d,h):[h]}return{exports:t,options:l}}const i={};var e=t({extends:"k-files-field",props:{clip:{type:Object,default:null}},data:()=>({clip_image:{}}),methods:{openClipDialog(t){this.clip_image=this.value.find((i=>i.id===t)),this.$refs.clip.open()},clippedArea(t){this.clip_image.clip=t.clip,this.onInput(),this.getPreview(t.id,t.clip)},getPreview(t,i){this.$api.post(this.endpoints.field+"/preview",{id:t,width:i.width,height:i.height,top:i.top,left:i.left}).then((i=>{if(!i.image)throw new Error("image clip: no image for preview received.");{let e=this.name,n=this.$store.state.content.current,o=this.$store.getters["content/values"](n)[e];if(o){o.find((i=>i.id===t)).image=i.image,this.$store.dispatch("content/update",[e,o,n])}else{this.selected.find((i=>i.id===t)).image=i.image}}})).catch((t=>{console.log(t)}))}}},(function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("k-field",t._b({staticClass:"k-files-field",scopedSlots:t._u([t.more&&!t.disabled?{key:"options",fn:function(){return[e("k-button-group",{staticClass:"k-field-options"},[e("k-options-dropdown",t._b({ref:"options",on:{action:t.onAction}},"k-options-dropdown",t.options,!1))],1)]},proxy:!0}:null],null,!0)},"k-field",t.$props,!1),[e("k-dropzone",{attrs:{disabled:!1===t.more},on:{drop:t.drop}},[t.selected.length?[e("k-clip-items",{attrs:{items:t.selected,layout:t.layout,size:t.size,sortable:!t.disabled&&t.selected.length>1},on:{sort:t.onInput,sortChange:function(i){return t.$emit("change",i)},openClipDialog:t.openClipDialog},scopedSlots:t._u([{key:"options",fn:function(i){var n=i.index;return[t.disabled?t._e():e("k-button",{attrs:{tooltip:t.$t("remove"),icon:"remove"},on:{click:function(i){return t.remove(n)}}})]}}],null,!1,1805525116)})]:e("k-empty",{attrs:{layout:t.layout,"data-invalid":t.isInvalid,icon:"image"},on:{click:t.prompt}},[t._v(" "+t._s(t.empty||t.$t("field.files.empty"))+" ")])],2),e("k-files-dialog",{ref:"selector",on:{submit:t.select}}),e("k-upload",{ref:"fileUpload",on:{success:t.upload}}),e("k-clip-dialog",{ref:"clip",attrs:{size:"large",image:t.clip_image,clip:t.clip},on:{submit:t.clippedArea}})],1)}),[],!1,n,null,null,null);function n(t){for(let e in i)this[e]=i[e]}var o=function(){return e.exports}();const s={};var r=t({extends:"k-items",computed:{}},(function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("k-draggable",{staticClass:"k-items",class:"k-"+t.layout+"-items",attrs:{handle:!0,options:t.dragOptions,"data-layout":t.layout,"data-size":t.size,list:t.items},on:{change:function(i){return t.$emit("change",i)},end:function(i){return t.$emit("sort",t.items,i)}}},[t._t("default",(function(){return t._l(t.items,(function(i,n){return e("k-clip-item",t._b({key:i.id||n,class:{"k-draggable-item":t.sortable&&i.sortable},attrs:{image:t.imageOptions(i),layout:t.layout,sortable:t.sortable&&i.sortable,width:i.column},on:{click:function(e){return t.$emit("item",i,n)},drag:function(e){return t.onDragStart(e,i.dragText)},flag:function(e){return t.$emit("flag",i,n)},option:function(e){return t.$emit("option",e,i,n)},openClipDialog:function(i){return t.$emit("openClipDialog",i)}},nativeOn:{mouseover:function(e){return t.$emit("hover",e,i,n)}},scopedSlots:t._u([{key:"options",fn:function(){return[t._t("options",null,{item:i,index:n})]},proxy:!0}],null,!0)},"k-clip-item",i,!1))}))}))],2)}),[],!1,a,"20e62f27",null,null);function a(t){for(let i in s)this[i]=s[i]}var h=function(){return r.exports}(),l=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("article",t._b({staticClass:"k-item",class:!!t.layout&&"k-"+t.layout+"-item",attrs:{"data-has-figure":t.hasFigure,"data-has-info":Boolean(t.info),"data-has-label":Boolean(t.label),"data-has-options":Boolean(t.options),tabindex:"-1"},on:{click:function(i){return t.$emit("click",i)},dragstart:function(i){return t.$emit("drag",i)}}},"article",t.data,!1),[t.hasFigure?e("k-clip-item-image",{attrs:{image:t.image,layout:t.layout,width:t.width,id:t.id,resizable:t.resizable,disabled:t.disabled},on:{clicked:function(i){return t.$emit("openClipDialog",t.id)}}}):t._e(),t.sortable?e("k-sort-handle",{staticClass:"k-item-sort-handle"}):t._e(),e("header",{staticClass:"k-item-content"},[e("h3",{staticClass:"k-item-title"},[t.link?e("k-link",{staticClass:"k-item-title-link",attrs:{target:t.target,to:t.link}},[e("span",{domProps:{innerHTML:t._s(t.title)}})]):e("span",{domProps:{innerHTML:t._s(t.title)}})],1),t.info?e("p",{staticClass:"k-item-info",domProps:{innerHTML:t._s(t.info)}}):t._e()]),t.flag||t.options||t.$slots.options?e("footer",{staticClass:"k-item-footer"},[e("nav",{staticClass:"k-item-buttons",on:{click:function(t){t.stopPropagation()}}},[t.flag?e("k-status-icon",t._b({},"k-status-icon",t.flag,!1)):t._e(),t._t("options",(function(){return[t.options?e("k-options-dropdown",{staticClass:"k-item-options-dropdown",attrs:{options:t.options},on:{option:t.onOption}}):t._e()]}))],2)]):t._e()],1)};const c={extends:"k-item",props:{id:String,resizable:Boolean,disabled:Boolean},computed:{hasFigure(){return!1!==this.image&&Object.keys(this.image).length>0},title(){return this.text||"-"}}},d={};var u=t(c,l,[],!1,p,null,null,null);function p(t){for(let i in d)this[i]=d[i]}var m=function(){return u.exports}();const g={extends:"k-item-image",props:{id:String,resizable:Boolean,disabled:Boolean}},v={};var f=t(g,(function(){var t=this,i=t.$createElement,e=t._self._c||i;return t.image?e("div",{staticClass:"k-item-figure relative",style:{background:t.$helper.color(t.back)}},[t.resizable&&!t.disabled?e("k-clip-handle",{attrs:{layout:t.layout},on:{clicked:function(i){return t.$emit("clicked")}}}):t._e(),t.image.src?e("k-image",{staticClass:"k-item-image",attrs:{cover:t.image.cover,ratio:t.ratio,sizes:t.sizes,src:t.image.src,srcset:t.image.srcset}}):e("k-aspect-ratio",{attrs:{ratio:t.ratio}},[e("k-icon",{staticClass:"k-item-icon",attrs:{color:t.$helper.color(t.image.color),size:t.size,type:t.image.icon}})],1)],1):t._e()}),[],!1,w,"974829e6",null,null);function w(t){for(let i in v)this[i]=v[i]}var _=function(){return f.exports}();const b={};var y=t({extends:"k-sort-handle",props:{layout:String},methods:{open(){this.$emit("clicked")}}},(function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("span",{class:"k-sort-handle k-item-sort-handle k-icon k-icon-sort clip-handle "+t.layout+"-handle",attrs:{"aria-hidden":"true"}},[e("img",{staticClass:"clipicon",attrs:{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgBAMAAAAQtmoLAAAAMFBMVEUAAAAzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzPzX0yTAAAAD3RSTlMAQIDAEPDQYLAgoFBwMJALzXfXAAAAsElEQVRYw+3TPQoCMRCG4RgXVEQwrVXwFhbilt7AQu+QvYl7BQ9h72XshUUtP+NPQImBDAq7Webtn2I+GMFxXG1JVAzaDjJlm+CivMrvoINQOhnwSPpHG2jarAsGDH4BOREs1zQwMpiRwB44HwhAwlaV0SDb4t5GiOEqCvTxbG5lEQO6eHUErtHAVVDBKU3Qm76lG/MPH2CnbHkIhBonAwbKy7ijY3OzMmg74Djuj90AekzAtvxv03QAAAAASUVORK5CYII=",alt:"Clip"},on:{click:t.open}})])}),[],!1,x,"02c05879",null,null);function x(t){for(let i in b)this[i]=b[i]}var E=function(){return y.exports}(),z=("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self,{exports:{}});z.exports=function(){(function(){for(var t=0,i=["ms","moz","webkit","o"],e=0;e<i.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[i[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i[e]+"CancelAnimationFrame"]||window[i[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(i,e){var n=(new Date).getTime(),o=Math.max(0,16-(n-t)),s=window.setTimeout((function(){i(n+o)}),o);return t=n+o,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})})(),function(){if("function"==typeof window.CustomEvent)return!1;function t(t,i){i=i||{bubbles:!1,cancelable:!1,detail:void 0};var e=document.createEvent("CustomEvent");return e.initCustomEvent(t,i.bubbles,i.cancelable,i.detail),e}t.prototype=window.Event.prototype,window.CustomEvent=t}(),function(t){try{return new CustomEvent("test"),!1}catch(e){}function i(i,e){e=e||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(i,e.bubbles,e.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),n}i.prototype=Event.prototype,t.MouseEvent=i}(window);var t=function(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")},i=function(){function t(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(i,e,n){return e&&t(i.prototype,e),n&&t(i,n),i}}(),e=function t(i,e,n){null===i&&(i=Function.prototype);var o=Object.getOwnPropertyDescriptor(i,e);if(void 0===o){var s=Object.getPrototypeOf(i);return null===s?void 0:t(s,e,n)}if("value"in o)return o.value;var r=o.get;return void 0!==r?r.call(n):void 0},n=function(t,i){if("function"!=typeof i&&null!==i)throw new TypeError("Super expression must either be null or a function, not "+typeof i);t.prototype=Object.create(i&&i.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),i&&(Object.setPrototypeOf?Object.setPrototypeOf(t,i):t.__proto__=i)},o=function(t,i){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!i||"object"!=typeof i&&"function"!=typeof i?t:i},s=function(){function t(t,i){var e=[],n=!0,o=!1,s=void 0;try{for(var r,a=t[Symbol.iterator]();!(n=(r=a.next()).done)&&(e.push(r.value),!i||e.length!==i);n=!0);}catch(h){o=!0,s=h}finally{try{!n&&a.return&&a.return()}finally{if(o)throw s}}return e}return function(i,e){if(Array.isArray(i))return i;if(Symbol.iterator in Object(i))return t(i,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r=function i(e,n,o,s){t(this,i);var r=this;function a(t){t.stopPropagation(),document.addEventListener("mouseup",h),document.addEventListener("mousemove",l),r.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:r}}))}function h(t){t.stopPropagation(),document.removeEventListener("mouseup",h),document.removeEventListener("mousemove",l),r.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:r}}))}function l(t){t.stopPropagation(),r.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}this.position=e,this.constraints=n,this.cursor=o,this.eventBus=s,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=o,this.el.addEventListener("mousedown",a)},a=function(){function e(i,n,o,s){t(this,e),this.x1=i,this.y1=n,this.x2=o,this.y2=s}return i(e,[{key:"set",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return this.x1=null==t?this.x1:t,this.y1=null==i?this.y1:i,this.x2=null==e?this.x2:e,this.y2=null==n?this.y2:n,this}},{key:"width",value:function(){return Math.abs(this.x2-this.x1)}},{key:"height",value:function(){return Math.abs(this.y2-this.y1)}},{key:"resize",value:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.x1+this.width()*e[0],o=this.y1+this.height()*e[1];return this.x1=n-t*e[0],this.y1=o-i*e[1],this.x2=this.x1+t,this.y2=this.y1+i,this}},{key:"scale",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],e=this.width()*t,n=this.height()*t;return this.resize(e,n,i),this}},{key:"move",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,e=this.width(),n=this.height();return t=null===t?this.x1:t,i=null===i?this.y1:i,this.x1=t,this.y1=i,this.x2=t+e,this.y2=i+n,this}},{key:"getRelativePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.width()*t[0],this.height()*t[1]]}},{key:"getAbsolutePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.x1+this.width()*t[0],this.y1+this.height()*t[1]]}},{key:"constrainToRatio",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"height";if(null!==t)return this.width(),this.height(),"width"===e?this.resize(1*this.height()/t,this.height(),i):this.resize(this.width(),this.width()*t,i),this}},{key:"constrainToBoundary",value:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.getAbsolutePoint(e),o=s(n,2),r=o[0],a=o[1],h=r,l=a,c=t-r,d=i-a,u=-2*e[0]+1,p=-2*e[1]+1,m=null,g=null;switch(u){case-1:m=h;break;case 0:m=2*Math.min(h,c);break;case 1:m=c}switch(p){case-1:g=l;break;case 0:g=2*Math.min(l,d);break;case 1:g=d}if(this.width()>m){var v=m/this.width();this.scale(v,e)}if(this.height()>g){var f=g/this.height();this.scale(f,e)}return this}},{key:"constrainToSize",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[0,0],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null;if(s&&(s>1?(t=1*i/s,n=e*s):s<1&&(i=t*s,e=1*n/s)),t&&this.width()>t){var r=t,a=null===s?this.height():i;this.resize(r,a,o)}if(i&&this.height()>i){var h=null===s?this.width():t,l=i;this.resize(h,l,o)}if(e&&this.width()<e){var c=e,d=null===s?this.height():n;this.resize(c,d,o)}if(n&&this.height()<n){var u=null===s?this.width():e,p=n;this.resize(u,p,o)}return this}}]),e}();function h(t){t.addEventListener("touchstart",l),t.addEventListener("touchend",l),t.addEventListener("touchmove",l)}function l(t){t.preventDefault();var i=t.changedTouches[0],e={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"};i.target.dispatchEvent(new MouseEvent(e[t.type],{bubbles:!0,cancelable:!0,view:window,clientX:i.clientX,clientY:i.clientY,screenX:i.screenX,screenY:i.screenY}))}var c=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}],d=function(){function e(i,n){var o=this,s=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t(this,e),this.options=e.parseOptions(n||{}),!i.nodeName&&null==(i=document.querySelector(i)))throw"Unable to find element.";if(!i.getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:i.parentNode,element:i},s||(0===i.width||0===i.height?i.onload=function(){o.initialize(i)}:this.initialize(i))}return i(e,[{key:"initialize",value:function(t){this.createDOM(t),this.options.convertToPixels(this.cropperEl),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.box=this.initializeBox(this.options),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this)}},{key:"createDOM",value:function(t){this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,h(this.containerEl),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",t.getAttribute("src")),this.imageEl.setAttribute("alt",t.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var e=0;e<c.length;e++){var n=new r(c[e].position,c[e].constraints,c[e].cursor,this.eventBus);this.handles.push(n),i.appendChild(n.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),t.parentElement.replaceChild(this.containerEl,t)}},{key:"setImage",value:function(t){var i=this;return this.imageEl.onload=function(){i.box=i.initializeBox(i.options),i.redraw()},this.imageEl.src=t,this.imageClippedEl.src=t,this}},{key:"destroy",value:function(){this._restore.parent.replaceChild(this._restore.element,this.containerEl)}},{key:"initializeBox",value:function(t){var i=t.startSize.width,e=t.startSize.height,n=new a(0,0,i,e);n.constrainToRatio(t.aspectRatio,[.5,.5]);var o=t.minSize,s=t.maxSize;n.constrainToSize(s.width,s.height,o.width,o.height,[.5,.5],t.aspectRatio);var r=this.cropperEl.offsetWidth,h=this.cropperEl.offsetHeight;n.constrainToBoundary(r,h,[.5,.5]);var l=this.cropperEl.offsetWidth/2-n.width()/2,c=this.cropperEl.offsetHeight/2-n.height()/2;return n.move(l,c),n}},{key:"redraw",value:function(){var t=this,i=Math.round(this.box.width()),e=Math.round(this.box.height()),n=Math.round(this.box.x1),o=Math.round(this.box.y1),s=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame((function(){t.regionEl.style.transform="translate("+n+"px, "+o+"px)",t.regionEl.style.width=i+"px",t.regionEl.style.height=e+"px",t.imageClippedEl.style.clip="rect("+o+"px, "+s+"px, "+r+"px, "+n+"px)";for(var a=t.box.getAbsolutePoint([.5,.5]),h=a[0]-t.cropperEl.offsetWidth/2>>31,l=a[1]-t.cropperEl.offsetHeight/2>>31,c=-2*((h^l)+l+l+4)+8,d=0;d<t.handles.length;d++){var u=t.handles[d],p=u.el.offsetWidth,m=u.el.offsetHeight,g=n+i*u.position[0]-p/2,v=o+e*u.position[1]-m/2;u.el.style.transform="translate("+Math.round(g)+"px, "+Math.round(v)+"px)",u.el.style.zIndex=c==d?5:4}}))}},{key:"attachHandlerEvents",value:function(){var t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}},{key:"attachRegionEvents",value:function(){var t=this.eventBus;function i(i){i.stopPropagation(),document.addEventListener("mouseup",n),document.addEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:i.clientX,mouseY:i.clientY}}))}function e(i){i.stopPropagation(),t.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:i.clientX,mouseY:i.clientY}}))}function n(i){i.stopPropagation(),document.removeEventListener("mouseup",n),document.removeEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:i.clientX,mouseY:i.clientY}}))}this.regionEl.addEventListener("mousedown",i),t.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),t.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),t.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}},{key:"attachOverlayEvents",value:function(){var t=4,i=this,e=null;function n(n){n.stopPropagation(),document.addEventListener("mouseup",s),document.addEventListener("mousemove",o);var r=i.cropperEl.getBoundingClientRect(),h=n.clientX-r.left,l=n.clientY-r.top;e=i.box,i.box=new a(h,l,h+1,l+1),i.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:i.handles[t]}}))}function o(t){t.stopPropagation(),i.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function s(t){t.stopPropagation(),document.removeEventListener("mouseup",s),document.removeEventListener("mousemove",o),1!==i.box.width()||1!==i.box.height()?i.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:t.clientX,mouseY:t.clientY}})):i.box=e}this.overlayEl.addEventListener("mousedown",n)}},{key:"onHandleMoveStart",value:function(t){var i=t.detail.handle,e=[1-i.position[0],1-i.position[1]],n=this.box.getAbsolutePoint(e),o=s(n,2),r=o[0],a=o[1];this.activeHandle={handle:i,originPoint:e,originX:r,originY:a},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onHandleMoveMoving",value:function(t){var i=t.detail,e=i.mouseX,n=i.mouseY,o=this.cropperEl.getBoundingClientRect();e-=o.left,n-=o.top,e<0?e=0:e>o.width&&(e=o.width),n<0?n=0:n>o.height&&(n=o.height);var s=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,h=this.activeHandle.originY,l=this.activeHandle.handle,c=1===l.constraints[0],d=1===l.constraints[1],u=1===l.constraints[2],p=1===l.constraints[3],m=(p||d)&&(c||u),g=p||d?r:this.box.x1,v=p||d?r:this.box.x2,f=c||u?h:this.box.y1,w=c||u?h:this.box.y2;g=p?e:g,v=d?e:v,f=c?n:f,w=u?n:w;var _=!1,b=!1;if((p||d)&&(_=p?e>r:e<r),(c||u)&&(b=c?n>h:n<h),_){var y=g;g=v,v=y,s[0]=1-s[0]}if(b){var x=f;f=w,w=x,s[1]=1-s[1]}var E=new a(g,f,v,w);if(this.options.aspectRatio){var z=this.options.aspectRatio,k=!1;m?k=n>E.y1+z*E.width()||n<E.y2-z*E.width():(c||u)&&(k=!0);var C=k?"width":"height";E.constrainToRatio(z,s,C)}var M=this.cropperEl.offsetWidth,S=this.cropperEl.offsetHeight;E.constrainToBoundary(M,S,s);var A=this.options.minSize,P=this.options.maxSize;E.constrainToSize(P.width,P.height,A.width,A.height,s,this.options.aspectRatio),E.x1<0||E.y1<0||E.x2>Math.ceil(o.width)||E.y2>Math.ceil(o.height)||(this.box=E,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue()))}},{key:"onHandleMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"onRegionMoveStart",value:function(t){var i=t.detail,e=i.mouseX,n=i.mouseY,o=this.cropperEl.getBoundingClientRect();e-=o.left,n-=o.top,this.currentMove={offsetX:e-this.box.x1,offsetY:n-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onRegionMoveMoving",value:function(t){var i=t.detail,e=i.mouseX,n=i.mouseY,o=this.currentMove,s=o.offsetX,r=o.offsetY,a=this.cropperEl.getBoundingClientRect();e-=a.left,n-=a.top,this.box.move(e-s,n-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>a.width&&this.box.move(a.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>a.height&&this.box.move(null,a.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onRegionMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"getValue",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(null===t&&(t=this.options.returnMode),"real"==t){var i=this.imageEl.naturalWidth,e=this.imageEl.naturalHeight,n=this.imageEl.getBoundingClientRect(),o=i/n.width,s=e/n.height;return{x:Math.round(this.box.x1*o),y:Math.round(this.box.y1*s),width:Math.round(this.box.width()*o),height:Math.round(this.box.height()*s)}}if("ratio"==t){var r=this.imageEl.getBoundingClientRect(),a=r.width,h=r.height;return{x:u(this.box.x1/a,3),y:u(this.box.y1/h,3),width:u(this.box.width()/a,3),height:u(this.box.height()/h,3)}}if("raw"==t)return{x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}}}],[{key:"parseOptions",value:function(t){var i={aspectRatio:null,maxSize:{width:null,height:null},minSize:{width:null,height:null},startSize:{width:100,height:100,unit:"%"},returnMode:"real",onInitialize:null,onCropStart:null,onCropMove:null,onCropEnd:null},e=null;void 0!==t.aspectRatio&&("number"==typeof t.aspectRatio?e=t.aspectRatio:t.aspectRatio instanceof Array&&(e=t.aspectRatio[1]/t.aspectRatio[0]));var n=null;void 0!==t.maxSize&&null!==t.maxSize&&(n={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"px"});var o=null;void 0!==t.minSize&&null!==t.minSize&&(o={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"px"});var s=null;void 0!==t.startSize&&null!==t.startSize&&(s={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"%"});var r=null;"function"==typeof t.onInitialize&&(r=t.onInitialize);var a=null;"function"==typeof t.onCropStart&&(a=t.onCropStart);var h=null;"function"==typeof t.onCropEnd&&(h=t.onCropEnd);var l=null;"function"==typeof t.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),l=t.onUpdate),"function"==typeof t.onCropMove&&(l=t.onCropMove);var c=null;if(void 0!==t.returnMode){var d=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(d))throw"Invalid return mode.";c=d}var u=function(t){for(var i=t.offsetWidth,e=t.offsetHeight,n=["maxSize","minSize","startSize"],o=0;o<n.length;o++){var s=n[o];null!==this[s]&&("%"==this[s].unit&&(null!==this[s].width&&(this[s].width=this[s].width/100*i),null!==this[s].height&&(this[s].height=this[s].height/100*e)),delete this[s].unit)}},p=function(t,i){return null!==t?t:i};return{aspectRatio:p(e,i.aspectRatio),maxSize:p(n,i.maxSize),minSize:p(o,i.minSize),startSize:p(s,i.startSize),returnMode:p(c,i.returnMode),onInitialize:p(r,i.onInitialize),onCropStart:p(a,i.onCropStart),onCropMove:p(l,i.onCropMove),onCropEnd:p(h,i.onCropEnd),convertToPixels:u}}}]),e}();function u(t,i){return Number(Math.round(t+"e"+i)+"e-"+i)}var p=function(s){function r(i,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return t(this,r),o(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,i,e,n))}return n(r,s),i(r,[{key:"getValue",value:function(t){return e(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"getValue",this).call(this,t)}},{key:"setImage",value:function(t){return e(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"setImage",this).call(this,t)}},{key:"destroy",value:function(){return e(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"destroy",this).call(this)}},{key:"moveTo",value:function(t,i){return this.box.move(t,i),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"resizeTo",value:function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[.5,.5];return this.box.resize(t,i,e),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"scaleBy",value:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[.5,.5];return this.box.scale(t,i),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"reset",value:function(){return this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}]),r}(d);return p}();var k=z.exports;function C({srcWidth:t,srcHeight:i,maxWidth:e,maxHeight:n}){let o=Math.min(e/t,n/i);return{width:t*o,height:i*o}}class M{constructor({el:t,originalDimensions:i,saved:e,clip:n,events:o}){this.el=t,this.original_dimensions=i,this.saved=e,this.min_width=n?n.minwidth:null,this.min_height=n?n.minheight:null,this.max_width=n?n.maxwidth:null,this.max_height=n?n.maxheight:null,this.limit_width=null,this.limit_height=null,this.ratio=n?n.ratio:null,this.events=o,this.validate(),this.cropInstance=this.init()}reset({position:t}){this.cropInstance.destroy(),this.saved=t,this.cropInstance=this.init()}init(){const t=__spreadValues({returnMode:"raw",onInitialize:t=>{document.getElementsByClassName("croppr-image")[0].addEventListener("load",(t=>{this.image=t.target,this.factor_w=this.original_dimensions.width/t.target.clientWidth,this.factor_h=this.original_dimensions.height/t.target.clientHeight,this.setStartPosition()}),!1)}},this.events);return this.min_width&&this.min_height&&(t.aspectRatio="fixed"===this.ratio?this.min_height/this.min_width:null,t.minSize=[this.min_width,this.min_height,"px"],this.limit_width=this.min_width,this.limit_height=this.min_height),this.max_width&&this.max_height&&(t.aspectRatio="fixed"===this.ratio?this.max_height/this.max_width:null,t.maxSize=[this.max_width,this.max_height,"px"],this.limit_width=this.max_width,this.limit_height=this.max_height),new k(this.el,t)}getCropArea(){const t=this.cropInstance.getValue(),i={width:this.roundSize(t.width*this.factor_w,this.limit_width),height:this.roundSize(t.height*this.factor_h,this.limit_height)};return i.left=this.adjustPosition(t.x*this.factor_w,i.width,this.original_dimensions.width),i.top=this.adjustPosition(t.y*this.factor_h,i.height,this.original_dimensions.height),i}setStartPosition(){let t={width:10,height:10};if(this.max_width&&this.max_height&&(this.cropInstance.options.maxSize=t={width:this.max_width/this.factor_w,height:this.max_height/this.factor_h}),this.min_width&&this.min_height&&(this.cropInstance.options.minSize=t={width:this.min_width/this.factor_w,height:this.min_height/this.factor_h}),this.saved){const t={width:Math.round(this.saved.width/this.factor_w),height:Math.round(this.saved.height/this.factor_h),left:Math.round(this.saved.left/this.factor_w),top:Math.round(this.saved.top/this.factor_h)};this.cropInstance.resizeTo(t.width,t.height),this.cropInstance.moveTo(t.left,t.top)}else{const i=C({srcWidth:t.width,srcHeight:t.height,maxWidth:this.original_dimensions.width,maxHeight:this.original_dimensions.height});t={width:i.width/this.factor_w,height:i.height/this.factor_h},this.cropInstance.resizeTo(t.width,t.height),this.cropInstance.moveTo(0,0)}}validate(){if(this.min_width&&this.original_dimensions.width<this.min_width)throw new Error(`Image width (${this.original_dimensions.width}px) must be at least ${this.min_width}px`);if(this.min_height&&this.original_dimensions.height<this.min_height)throw new Error(`Image height (${this.original_dimensions.height}px) must be at least ${this.min_height}px`);if(this.min_width&&this.min_height&&this.max_width&&this.max_height&&"fixed"===this.ratio&&this.min_width/this.min_height!=this.max_width/this.max_height)throw new Error("Ratio must be same for min and max")}roundSize(t,i=null){return i&&i-t>=-1&&i-t<=1?i:Math.round(t)}adjustPosition(t,i,e){return t+i>e?e-i:Math.round(t)}}var S=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("k-overlay",{ref:"overlay",attrs:{autofocus:t.autofocus,centered:!0},on:{close:t.onOverlayClose,ready:function(i){return t.$emit("ready")}}},[e("div",{ref:"dialog",staticClass:"k-dialog",class:t.$vnode.data.staticClass,style:t.dialog_width,attrs:{"data-size":t.size},on:{mousedown:function(t){t.stopPropagation()}}},[t.notification?e("div",{staticClass:"k-dialog-notification",attrs:{"data-theme":t.notification.type}},[e("p",[t._v(t._s(t.notification.message))]),e("k-button",{attrs:{icon:"cancel"},on:{click:function(i){t.notification=null}}})],1):t._e(),t.image?e("div",{staticClass:"k-dialog-body"},[t.spinner?e("div",{staticClass:"preload"},[e("div",{staticClass:"spinner"},[e("div",{staticClass:"bounce1"}),e("div",{staticClass:"bounce2"}),e("div",{staticClass:"bounce3"})]),e("footer",{staticClass:"preload-dialog-footer"},[t._t("footer",(function(){return[e("k-button-group",[e("k-button",{staticClass:"k-dialog-button-cancel",attrs:{icon:"cancel"},on:{click:t.cancel}},[t._v(" "+t._s(t.$t("cancel"))+" ")])],1)]}))],2)]):t._e(),e("img",{attrs:{src:t.image.url,id:"croppr"}})]):t._e(),e("footer",{staticClass:"k-dialog-footer"},[t._t("footer",(function(){return[e("k-button-group",[e("k-button",{staticClass:"k-dialog-button-cancel",attrs:{icon:"cancel"},on:{click:t.cancel}},[t._v(" "+t._s(t.$t("cancel"))+" ")]),e("k-button",{staticClass:"k-dialog-button-submit",attrs:{icon:t.icon,theme:t.theme},on:{click:t.submit}},[t._v(" "+t._s(t.button||t.$t("confirm"))+" ")])],1)]}))],2)])])},A=[];const P={extends:"k-dialog",props:{image:{type:Object,default:null},clip:{type:Object,default:null}},data:()=>({cropprFacade:null,dialog_width:null,spinner:!0,freezeDialog:!1,was_moved:!1}),created(){this.$on("ready",this.isOpen),this.$on("close",this.isClosed)},beforeDestroy(){this.$off("ready",this.isOpen),this.$off("close",this.isClosed)},methods:{isOpen(){this.setDialogWidth(),this.showSpinner(),this.$nextTick((()=>{let t=document.getElementById("croppr");t.addEventListener("load",this.hideSpinner,!1),t.complete&&this.hideSpinner();try{this.cropprFacade=new M({el:t,originalDimensions:this.image.dimensions,clip:this.clip,saved:this.image.clip,events:{onCropStart:()=>{this.freezeDialog=!0,this.was_moved=!0},onCropEnd:()=>{setTimeout((()=>{this.freezeDialog=!1}),200)}}}),window.addEventListener("resize",this.showSpinner,!1),window.addEventListener("resize",this.resizeDialog,!1)}catch(i){this.cancel(),console.error(this.image.id+": "+i.message),this.$store.dispatch("notification/error",i.message)}}))},isClosed(){window.removeEventListener("resize",this.showSpinner,!1),window.removeEventListener("resize",this.resizeDialog,!1)},cancel(){this.freezeDialog||(this.$emit("cancel"),this.close())},remToPx:(t=1)=>t*parseInt(getComputedStyle(document.documentElement).fontSize),submit(){this.was_moved&&(this.$emit("submit",{id:this.image.id,clip:this.cropprFacade.getCropArea()}),this.was_moved=!1),this.close()},setDialogWidth(){let t=window.innerWidth-this.remToPx(6),i=window.innerHeight-this.remToPx(12),e=C({srcWidth:this.image.dimensions.width,srcHeight:this.image.dimensions.height,maxWidth:t,maxHeight:i}),n=this.image.dimensions.width;(this.image.dimensions.width>t||this.image.dimensions.height>i)&&(n=e.width),this.dialog_width="width: "+n+"px;"},resizeDialog:function(t,i=100){let e;return function(...n){window.clearTimeout(e),e=window.setTimeout((()=>{t.apply(this,n)}),i)}}((function(){this.setDialogWidth();let t=this.cropprFacade.getCropArea();this.cropprFacade.reset({position:t}),this.spinner=!1}),500),hideSpinner:function(){this.spinner=!1},showSpinner:function(){!1===this.spinner&&(this.spinner=!0)}}},O={};var $=t(P,S,A,!1,R,null,null,null);function R(t){for(let i in O)this[i]=O[i]}var B=function(){return $.exports}();const T={};var I=t({extends:"k-files-field-preview"},undefined,undefined,!1,H,"fedf2864",null,null);function H(t){for(let i in T)this[i]=T[i]}var L=function(){return I.exports}();panel.plugin("mullema/image-clip",{fields:{"image-clip":o},components:{"k-clip-items":h,"k-clip-item":m,"k-clip-item-image":_,"k-clip-handle":E,"k-clip-dialog":B,"k-image-clip-field-preview":L}})}();
diff --git a/package.json b/package.json
index 62a680a..d2c1e65 100644
--- a/package.json
+++ b/package.json
@@ -1,21 +1,18 @@
 {
   "name": "k3-image-clip",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "description": "Visual image clip for Kirby3.",
   "author": "Matthias Müller <moeli@moeli.com>",
   "license": "MIT",
   "main": "index.js",
   "scripts": {
-    "dev": "bili --watch",
-    "build": "bili"
-  },
-  "devDependencies": {
-    "bili": "^4.8.1",
-    "rollup-plugin-img": "^1.1.0",
-    "rollup-plugin-vue": "^5.0.1",
-    "vue-template-compiler": "^2.6.10"
+    "dev": "kirbyup src/main.js --watch",
+    "build": "kirbyup src/main.js"
   },
   "dependencies": {
     "croppr": "github:mullema/Croppr.js"
+  },
+  "devDependencies": {
+    "kirbyup": "^0.16.0"
   }
 }
diff --git a/src/components/clipButton.vue b/src/components/clipButton.vue
index 0a5ae50..9b5bef7 100644
--- a/src/components/clipButton.vue
+++ b/src/components/clipButton.vue
@@ -1,32 +1,32 @@
 <template>
   <span class="k-button clip" aria-hidden="true">
-    <img @click="open"  src="../../assets/clip.png" alt="Clip" class="clipicon" />
+    <img @click="open" src="../../assets/clip.png" alt="Clip" class="clipicon"/>
   </span>
 </template>`
 
 <script>
-    export default {
-        extends: 'k-sort-handle',
-        methods: {
-            open() {
-                this.$emit('clicked')
-            }
-        }
+export default {
+  extends: 'k-sort-handle',
+  methods: {
+    open () {
+      this.$emit('clicked')
     }
+  }
+}
 </script>
 
 <style scoped>
-    .clip {
-        cursor: pointer;
-        padding: 5px;
-    }
+.clip {
+  cursor: pointer;
+  padding: 5px;
+}
 
-    .clip:hover {
-        background: #eee;
-    }
+.clip:hover {
+  background: #eee;
+}
 
-    .clipicon {
-        width: 2em;
-        height: 2em;
-    }
+.clipicon {
+  width: 2em;
+  height: 2em;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/clipDialog.vue b/src/components/clipDialog.vue
index 1c8a00d..0809d41 100644
--- a/src/components/clipDialog.vue
+++ b/src/components/clipDialog.vue
@@ -3,6 +3,7 @@
       ref="overlay"
       :autofocus="autofocus"
       :centered="true"
+      @close="onOverlayClose"
       @ready="$emit('ready')"
   >
     <div
@@ -90,12 +91,12 @@ export default {
     }
   },
   created () {
-    this.$on('ready', this.isOpen, false)
-    this.$on('close', this.isClosed, false)
+    this.$on('ready', this.isOpen)
+    this.$on('close', this.isClosed)
   },
-  destroyed () {
-    this.$off('ready', this.isOpen, false)
-    this.$off('close', this.isClosed, false)
+  beforeDestroy () {
+    this.$off('ready', this.isOpen)
+    this.$off('close', this.isClosed)
   },
   methods: {
     isOpen () {
@@ -113,7 +114,7 @@ export default {
         try {
           this.cropprFacade = new Croppr({
             el: el,
-            original_dimensions: this.image.dimensions,
+            originalDimensions: this.image.dimensions,
             clip: this.clip,
             saved: this.image.clip,
             events: {
diff --git a/src/components/clipHandle.vue b/src/components/clipHandle.vue
index 4b20099..5c21cb7 100644
--- a/src/components/clipHandle.vue
+++ b/src/components/clipHandle.vue
@@ -1,32 +1,45 @@
 <template>
-  <span class="k-sort-handle clip" aria-hidden="true">
-    <img @click="open" src="../../assets/clip.png" alt="Clip" class="clipicon" />
+  <span :class="`k-sort-handle k-item-sort-handle k-icon k-icon-sort clip-handle ${layout}-handle`" aria-hidden="true">
+    <img @click="open" src="../../assets/clip.png" alt="Clip" class="clipicon"/>
   </span>
 </template>
 
 <script>
-    export default {
-        extends: 'k-sort-handle',
-        methods: {
-            open() {
-                this.$emit('clicked')
-            }
-        }
+export default {
+  extends: 'k-sort-handle',
+  props: {
+    layout: String
+  },
+  methods: {
+    open () {
+      this.$emit('clicked')
     }
+  }
+}
 </script>
 
 <style scoped>
-    .clip {
-        left: 0.75rem;
-        cursor: pointer;
-    }
+.clip-handle {
+  left: auto !important;
+  right: 0;
+  cursor: crosshair;
+  background: white;
+}
 
-    .clip:hover {
-        background: #ddd;
-    }
+.list-handle {
+  margin: auto;
+  left: 0 !important;
+  top: 0;
+  bottom: 0;
+  text-align: center;
+}
 
-    .clipicon {
-        width: 2em;
-        height: 2em;
-    }
+.clip-handle:hover {
+  background: #ddd;
+}
+
+.clipicon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/clipItem.vue b/src/components/clipItem.vue
new file mode 100644
index 0000000..69e4c8d
--- /dev/null
+++ b/src/components/clipItem.vue
@@ -0,0 +1,103 @@
+<template>
+  <article
+      :class="layout ? 'k-' + layout + '-item' : false"
+      v-bind="data"
+      :data-has-figure="hasFigure"
+      :data-has-info="Boolean(info)"
+      :data-has-label="Boolean(label)"
+      :data-has-options="Boolean(options)"
+      class="k-item"
+      tabindex="-1"
+      @click="$emit('click', $event);"
+      @dragstart="$emit('drag', $event)"
+  >
+    <!-- Image -->
+    <k-clip-item-image
+        v-if="hasFigure"
+        :image="image"
+        :layout="layout"
+        :width="width"
+
+        :id="id"
+        :resizable="resizable"
+        :disabled="disabled"
+        @clicked="$emit('openClipDialog', id)"
+    />
+
+    <!-- Sort handle -->
+    <k-sort-handle
+        v-if="sortable"
+        class="k-item-sort-handle"
+    />
+
+    <!-- Content -->
+    <header class="k-item-content">
+      <h3 class="k-item-title">
+        <k-link
+            v-if="link"
+            :target="target"
+            :to="link"
+            class="k-item-title-link"
+        >
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <span v-html="title" />
+        </k-link>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span v-else v-html="title" />
+      </h3>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <p v-if="info" class="k-item-info" v-html="info" />
+    </header>
+
+    <!-- Footer -->
+    <footer
+        v-if="flag || options || $slots.options"
+        class="k-item-footer"
+    >
+      <nav
+          class="k-item-buttons"
+          @click.stop
+      >
+        <!-- Status icon -->
+        <k-status-icon
+            v-if="flag"
+            v-bind="flag"
+        />
+
+        <!-- Options -->
+        <slot name="options">
+          <k-options-dropdown
+              v-if="options"
+              :options="options"
+              class="k-item-options-dropdown"
+              @option="onOption"
+          />
+        </slot>
+      </nav>
+    </footer>
+  </article>
+</template>
+
+<script>
+export default {
+  extends: 'k-item',
+  props: {
+    id: String,
+    resizable: Boolean,
+    disabled: Boolean
+  },
+  computed: {
+    /**
+     * From k-item
+     * No image will be shown otherwise, even with 'extends'
+     * @returns {boolean}
+     */
+    hasFigure() {
+      return this.image !== false && Object.keys(this.image).length > 0;
+    },
+    title() {
+      return this.text || "-";
+    }
+  },
+}
+</script>
\ No newline at end of file
diff --git a/src/components/clipItemImage.vue b/src/components/clipItemImage.vue
new file mode 100644
index 0000000..082e14a
--- /dev/null
+++ b/src/components/clipItemImage.vue
@@ -0,0 +1,53 @@
+<template>
+  <div
+      v-if="image"
+      class="k-item-figure relative"
+      :style="{ background: $helper.color(back) }"
+  >
+    <!-- image clip handle //-->
+    <k-clip-handle
+        v-if="resizable && !disabled"
+        @clicked="$emit('clicked')"
+        :layout="layout"
+    />
+
+    <!-- image -->
+    <k-image
+        v-if="image.src"
+        :cover="image.cover"
+        :ratio="ratio"
+        :sizes="sizes"
+        :src="image.src"
+        :srcset="image.srcset"
+        class="k-item-image"
+    />
+    <!-- icon -->
+    <k-aspect-ratio
+        v-else
+        :ratio="ratio"
+    >
+      <k-icon
+          :color="$helper.color(image.color)"
+          :size="size"
+          :type="image.icon"
+          class="k-item-icon"
+      />
+    </k-aspect-ratio>
+  </div>
+</template>
+<script>
+export default {
+  extends: 'k-item-image',
+  props: {
+    id: String,
+    resizable: Boolean,
+    disabled: Boolean
+  }
+}
+</script>
+
+<style scoped>
+  .relative {
+    position: relative;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/clipItems.vue b/src/components/clipItems.vue
new file mode 100644
index 0000000..17c3fd3
--- /dev/null
+++ b/src/components/clipItems.vue
@@ -0,0 +1,52 @@
+<template>
+  <k-draggable
+      class="k-items"
+      :class="'k-' + layout + '-items'"
+      :handle="true"
+      :options="dragOptions"
+      :data-layout="layout"
+      :data-size="size"
+      :list="items"
+      @change="$emit('change', $event)"
+      @end="$emit('sort', items, $event)"
+  >
+    <slot>
+      <k-clip-item
+          v-for="(item, itemIndex) in items"
+          :key="item.id || itemIndex"
+          v-bind="item"
+          :class="{'k-draggable-item': sortable && item.sortable}"
+          :image="imageOptions(item)"
+          :layout="layout"
+          :sortable="sortable && item.sortable"
+          :width="item.column"
+          @click="$emit('item', item, itemIndex)"
+          @drag="onDragStart($event, item.dragText)"
+          @flag="$emit('flag', item, itemIndex)"
+          @mouseover.native="$emit('hover', $event, item, itemIndex)"
+          @option="$emit('option', $event, item, itemIndex)"
+
+          @openClipDialog="(id) => $emit('openClipDialog', id)"
+      >
+        <template #options>
+          <slot
+              name="options"
+              :item="item"
+              :index="itemIndex"
+          />
+        </template>
+      </k-clip-item>
+    </slot>
+  </k-draggable>
+</template>
+
+<script>
+export default {
+  extends: 'k-items',
+  computed: {},
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/facade/CropprFacade.js b/src/facade/CropprFacade.js
index cac5e0e..265aa2d 100644
--- a/src/facade/CropprFacade.js
+++ b/src/facade/CropprFacade.js
@@ -1,196 +1,193 @@
-import Croppr from 'croppr';
-import aspectRatioFit from "../helpers/aspectRatioFit.js";
+import Croppr from 'croppr'
+import aspectRatioFit from '../helpers/aspectRatioFit.js'
 
 /**
  * Facade to Croppr
  * Validation and Bugfixes to link Croppr with Kirby's Panel
  */
 export default class {
+  /**
+   * Constructor
+   * @param {Element} el - The image to work with
+   * @param {Object} originalDimensions - From file on disk
+   * @param {Object} saved - Crop data from disk
+   * @param {Object} clip - Blueprint options
+   * @param {Object} events
+   */
+  constructor ({ el, originalDimensions, saved, clip, events }) {
+    this.el = el
+    this.original_dimensions = originalDimensions
+    this.saved = saved
+    this.min_width = clip ? clip.minwidth : null
+    this.min_height = clip ? clip.minheight : null
+    this.max_width = clip ? clip.maxwidth : null
+    this.max_height = clip ? clip.maxheight : null
+    this.limit_width = null
+    this.limit_height = null
+    this.ratio = clip ? clip.ratio : null
+    this.events = events
+
+    this.validate()
+    this.cropInstance = this.init()
+  }
+
+  /**
+   * reset all of the croppr instance and adjust to new environment
+   * @param {Object} position - last known position of crop area
+   */
+  reset ({ position }) {
+    this.cropInstance.destroy()
+    this.saved = position
+    this.cropInstance = this.init()
+  }
+
+  /**
+   * Initiate Croppr
+   * @returns {Croppr} - Croppr Instance
+   */
+  init () {
+    const options = {
+      returnMode: 'raw',
+      onInitialize: (instance) => {
+        // image width for factor calculations because they are wrong in Croppr
+        const image = document.getElementsByClassName('croppr-image')[0]
+        image.addEventListener('load', (event) => {
+          this.image = event.target
+          this.factor_w = this.original_dimensions.width / event.target.clientWidth
+          this.factor_h = this.original_dimensions.height / event.target.clientHeight
+          this.setStartPosition()
+        }, false)
+      },
+      ...this.events
+    }
 
-    /**
-     * Constructor
-     * @param {Element} el - The image to work with
-     * @param {Object} original_dimensions - From file on disk
-     * @param {Object} saved - Crop data from disk
-     * @param {Object} clip - Blueprint options
-     * @param {Object} events
-     */
-    constructor({el, original_dimensions, saved, clip, events}) {
-        this.el = el;
-        this.original_dimensions = original_dimensions;
-        this.saved = saved;
-        this.min_width = clip ? clip.minwidth : null;
-        this.min_height = clip ? clip.minheight : null;
-        this.max_width = clip ? clip.maxwidth : null;
-        this.max_height = clip ? clip.maxheight : null;
-        this.limit_width = null;
-        this.limit_height = null;
-        this.ratio = clip ? clip.ratio : null;
-        this.events = events;
-
-        this.validate();
-        this.cropInstance = this.init();
+    if (this.min_width && this.min_height) {
+      options.aspectRatio = (this.ratio === 'fixed') ? this.min_height / this.min_width : null
+      options.minSize = [this.min_width, this.min_height, 'px']
+      this.limit_width = this.min_width
+      this.limit_height = this.min_height
     }
 
-    /**
-     * reset all of the croppr instance and adjust to new environment
-     * @param {Object} position - last known position of crop area
-     */
-    reset({position}) {
-        this.cropInstance.destroy();
-        this.saved = position;
-        this.cropInstance = this.init();
+    if (this.max_width && this.max_height) {
+      options.aspectRatio = (this.ratio === 'fixed') ? this.max_height / this.max_width : null
+      options.maxSize = [this.max_width, this.max_height, 'px']
+      this.limit_width = this.max_width
+      this.limit_height = this.max_height
     }
 
-    /**
-     * Initiate Croppr
-     * @returns {Croppr} - Croppr Instance
-     */
-    init () {
-        let options = {
-            returnMode: "raw",
-            onInitialize: (instance) => {
-                // image width for factor calculations because they are wrong in Croppr
-                let image = document.getElementsByClassName('croppr-image')[0];
-                image.addEventListener("load", (event) => {
-                    this.image = event.target;
-                    this.factor_w = this.original_dimensions.width / event.target.clientWidth;
-                    this.factor_h = this.original_dimensions.height / event.target.clientHeight;
-                    this.setStartPosition();
-                }, false);
-            },
-            ...this.events
-        };
-
-        if (this.min_width && this.min_height) {
-            options.aspectRatio = (this.ratio === 'fixed') ? this.min_height / this.min_width : null;
-            options.minSize = [this.min_width, this.min_height, 'px'];
-            this.limit_width = this.min_width;
-            this.limit_height = this.min_height;
-        }
-
-        if (this.max_width && this.max_height) {
-            options.aspectRatio = (this.ratio === 'fixed') ? this.max_height / this.max_width : null;
-            options.maxSize = [this.max_width, this.max_height, 'px'];
-            this.limit_width = this.max_width;
-            this.limit_height = this.max_height;
-        }
-
-        return new Croppr(this.el, options);
+    return new Croppr(this.el, options)
+  }
+
+  /**
+   * Returns the crop area coordinates
+   * @returns {Object} - Coordinates in "real" values on original image
+   */
+  getCropArea () {
+    const coord = this.cropInstance.getValue()
+    const area = {
+      width: this.roundSize(coord.width * this.factor_w, this.limit_width),
+      height: this.roundSize(coord.height * this.factor_h, this.limit_height)
     }
 
-    /**
-     * Returns the crop area coordinates
-     * @returns {Object} - Coordinates in "real" values on original image
-     */
-    getCropArea() {
-        let coord = this.cropInstance.getValue();
-        let area = {
-            width: this.roundSize(coord.width * this.factor_w, this.limit_width),
-            height: this.roundSize(coord.height * this.factor_h, this.limit_height)
-        };
-
-        area.left = this.adjustPosition(coord.x * this.factor_w, area.width, this.original_dimensions.width);
-        area.top = this.adjustPosition(coord.y * this.factor_h, area.height, this.original_dimensions.height);
-
-        return area;
+    area.left = this.adjustPosition(coord.x * this.factor_w, area.width, this.original_dimensions.width)
+    area.top = this.adjustPosition(coord.y * this.factor_h, area.height, this.original_dimensions.height)
+
+    return area
+  }
+
+  /**
+   * Moves the crop selector to a start position
+   */
+  setStartPosition () {
+    let reference = {
+      width: 10,
+      height: 10
     }
 
-    /**
-     * Moves the crop selector to a start position
-     */
-    setStartPosition () {
-        let reference = {
-            width: 10,
-            height: 10
-        };
-
-        if (this.max_width && this.max_height) {
-            this.cropInstance.options.maxSize = reference = {
-                width: this.max_width / this.factor_w,
-                height: this.max_height / this.factor_h
-            };
-        }
-
-        if (this.min_width && this.min_height) {
-            this.cropInstance.options.minSize = reference = {
-                width: this.min_width / this.factor_w,
-                height: this.min_height / this.factor_h
-            };
-        }
-
-        if (!this.saved) {
-            let size = aspectRatioFit({
-                srcWidth: reference.width,
-                srcHeight: reference.height,
-                maxWidth: this.original_dimensions.width,
-                maxHeight: this.original_dimensions.height
-            });
-
-            reference = {
-                width: size.width / this.factor_w,
-                height: size.height / this.factor_h
-            };
-
-            // set default values
-            this.cropInstance.resizeTo(reference.width, reference.height);
-            this.cropInstance.moveTo(0, 0);
-        }
-        else {
-            // set to position of saved cropped image
-            let calculated = {
-                width:  Math.round(this.saved.width / this.factor_w),
-                height: Math.round(this.saved.height / this.factor_h),
-                left: Math.round(this.saved.left / this.factor_w),
-                top: Math.round(this.saved.top / this.factor_h)
-            };
-
-            this.cropInstance.resizeTo(calculated.width, calculated.height);
-            this.cropInstance.moveTo(calculated.left, calculated.top);
-        }
+    if (this.max_width && this.max_height) {
+      this.cropInstance.options.maxSize = reference = {
+        width: this.max_width / this.factor_w,
+        height: this.max_height / this.factor_h
+      }
     }
 
-    /**
-     * Validates Options vs Image
-     * @throws {Error}
-     */
-    validate() {
-        if (this.min_width && this.original_dimensions.width < this.min_width) {
-            throw new Error(`Image width (${this.original_dimensions.width}px) must be at least ${this.min_width}px`);
-        }
-
-        if (this.min_height && this.original_dimensions.height < this.min_height) {
-            throw new Error(`Image height (${this.original_dimensions.height}px) must be at least ${this.min_height}px`);
-        }
-
-        if (this.min_width && this.min_height && this.max_width && this.max_height
-            && this.ratio === 'fixed'
-            && (this.min_width / this.min_height) !== (this.max_width / this.max_height)) {
-            throw new Error(`Ratio must be same for min and max`);
-        }
+    if (this.min_width && this.min_height) {
+      this.cropInstance.options.minSize = reference = {
+        width: this.min_width / this.factor_w,
+        height: this.min_height / this.factor_h
+      }
     }
 
+    if (!this.saved) {
+      const size = aspectRatioFit({
+        srcWidth: reference.width,
+        srcHeight: reference.height,
+        maxWidth: this.original_dimensions.width,
+        maxHeight: this.original_dimensions.height
+      })
+
+      reference = {
+        width: size.width / this.factor_w,
+        height: size.height / this.factor_h
+      }
+
+      // set default values
+      this.cropInstance.resizeTo(reference.width, reference.height)
+      this.cropInstance.moveTo(0, 0)
+    } else {
+      // set to position of saved cropped image
+      const calculated = {
+        width: Math.round(this.saved.width / this.factor_w),
+        height: Math.round(this.saved.height / this.factor_h),
+        left: Math.round(this.saved.left / this.factor_w),
+        top: Math.round(this.saved.top / this.factor_h)
+      }
+
+      this.cropInstance.resizeTo(calculated.width, calculated.height)
+      this.cropInstance.moveTo(calculated.left, calculated.top)
+    }
+  }
+
+  /**
+   * Validates Options vs Image
+   * @throws {Error}
+   */
+  validate () {
+    if (this.min_width && this.original_dimensions.width < this.min_width) {
+      throw new Error(`Image width (${this.original_dimensions.width}px) must be at least ${this.min_width}px`)
+    }
 
-    /**
-     *  Return the rounded coordinates
-     *  If 1px or less from defined limit, round to the limit
-     * @param value
-     * @param limit
-     * @returns {number|*}
-     */
-    roundSize(value, limit = null) {
-        return (limit && limit - value >= -1 && limit - value <= 1) ? limit : Math.round(value);
+    if (this.min_height && this.original_dimensions.height < this.min_height) {
+      throw new Error(`Image height (${this.original_dimensions.height}px) must be at least ${this.min_height}px`)
     }
 
-    /**
-     *  Return the adjusted position
-     *  Corrects for 1px rounding errors and makes sure selection is always inside image
-     * @param position
-     * @param size
-     * @param limit
-     * @returns {number}
-     */
-    adjustPosition(position, size, limit) {
-        return (position + size > limit) ? limit - size : Math.round(position);
+    if (this.min_width && this.min_height && this.max_width &&
+      this.max_height && this.ratio === 'fixed' &&
+      (this.min_width / this.min_height) !== (this.max_width / this.max_height)) {
+      throw new Error('Ratio must be same for min and max')
     }
+  }
+
+  /**
+   *  Return the rounded coordinates
+   *  If 1px or less from defined limit, round to the limit
+   * @param value
+   * @param limit
+   * @returns {number|*}
+   */
+  roundSize (value, limit = null) {
+    return (limit && limit - value >= -1 && limit - value <= 1) ? limit : Math.round(value)
+  }
+
+  /**
+   *  Return the adjusted position
+   *  Corrects for 1px rounding errors and makes sure selection is always inside image
+   * @param position
+   * @param size
+   * @param limit
+   * @returns {number}
+   */
+  adjustPosition (position, size, limit) {
+    return (position + size > limit) ? limit - size : Math.round(position)
+  }
 }
diff --git a/src/fields/imageClip.vue b/src/fields/imageClip.vue
index 679f5cd..a545fe6 100644
--- a/src/fields/imageClip.vue
+++ b/src/fields/imageClip.vue
@@ -1,171 +1,127 @@
 <template>
-    <k-field v-bind="$props" class="k-files-field">
-
-        <template v-if="more && !disabled" slot="options">
-            <k-button-group class="k-field-options">
-                <template v-if="uploads">
-                    <k-dropdown>
-                        <k-button
-                                ref="pickerToggle"
-                                icon="add"
-                                class="k-field-options-button"
-                                @click="$refs.picker.toggle()"
-                        >
-                            {{ $t('add') }}
-                        </k-button>
-                        <k-dropdown-content ref="picker" align="right">
-                            <k-dropdown-item icon="check" @click="open">{{ $t('select') }}</k-dropdown-item>
-                            <k-dropdown-item icon="upload" @click="upload">{{ $t('upload') }}</k-dropdown-item>
-                        </k-dropdown-content>
-                    </k-dropdown>
-                </template>
-                <template v-else>
-                    <k-button icon="add" class="k-field-options-button" @click="open">{{ $t('add') }}</k-button>
-                </template>
-            </k-button-group>
-        </template>
+  <k-field v-bind="$props" class="k-files-field">
+    <template v-if="more && !disabled" #options>
+      <k-button-group class="k-field-options">
+        <k-options-dropdown
+            ref="options"
+            v-bind="options"
+            @action="onAction"
+        />
+      </k-button-group>
+    </template>
 
-        <template v-if="selected.length">
-            <k-draggable
-                    :element="elements.list"
-                    :list="selected"
-                    :data-size="size"
-                    :handle="true"
-                    :data-invalid="isInvalid"
-                    @end="onInput"
-            >
-                <component
-                        v-for="(file, index) in selected"
-                        :is="elements.item"
-                        :key="file.filename"
-                        :sortable="!disabled && selected.length > 1"
-                        :text="file.text"
-                        :link="file.link"
-                        :info="file.info"
-                        :image="file.image"
-                        :icon="file.icon"
+    <k-dropzone :disabled="more === false" @drop="drop">
+      <template v-if="selected.length">
+        <k-clip-items
+            :items="selected"
+            :layout="layout"
+            :size="size"
+            :sortable="!disabled && selected.length > 1"
+            @sort="onInput"
+            @sortChange="$emit('change', $event)"
 
-                        :id="file.id"
-                        :resizable="file.resizable"
-                        :disabled="file.disabled"
-                        @openclipdialog="openClipDialog"
-                >
-                    <k-button
-                            v-if="!disabled"
-                            slot="options"
-                            :tooltip="$t('remove')"
-                            icon="remove"
-                            @click="remove(index)"
-                    />
-                </component>
-            </k-draggable>
-        </template>
-        <k-empty
-                v-else
-                :layout="layout"
-                icon="image"
-                :data-invalid="isInvalid"
-                @click="open"
+            @openClipDialog="openClipDialog"
         >
-            {{ empty || $t('field.files.empty') }}
-        </k-empty>
-        <k-files-dialog ref="selector" @submit="select" />
-        <k-upload ref="fileUpload" @success="selectUpload" />
-        <k-clip-dialog
-                ref="clip"
-                size="large"
-                :image="clip_image"
-                :clip="clip"
-                @submit="clippedArea"
-        />
-    </k-field>
+          <template #options="{ index }">
+            <k-button
+                v-if="!disabled"
+                :tooltip="$t('remove')"
+                icon="remove"
+                @click="remove(index)"
+            />
+          </template>
+        </k-clip-items>
+      </template>
+      <k-empty
+          v-else
+          :layout="layout"
+          :data-invalid="isInvalid"
+          icon="image"
+          @click="prompt"
+      >
+        {{ empty || $t('field.files.empty') }}
+      </k-empty>
+    </k-dropzone>
+
+    <k-files-dialog ref="selector" @submit="select"/>
+    <k-upload ref="fileUpload" @success="upload"/>
+
+    <k-clip-dialog
+        ref="clip"
+        size="large"
+        :image="clip_image"
+        :clip="clip"
+        @submit="clippedArea"
+    />
+  </k-field>
 </template>
 
 <script>
 export default {
-    extends: 'k-files-field',
-    props: {
-        clip: {
-            type: Object,
-            default: null
-        }
+  extends: 'k-files-field',
+  props: {
+    clip: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      clip_image: {}
+    }
+  },
+  methods: {
+    openClipDialog (id) {
+      this.clip_image = this.value.find(item => item.id === id)
+      this.$refs.clip.open()
     },
-    data() {
-        return {
-            clip_image: {}
-        }
+    clippedArea (data) {
+      this.clip_image.clip = data.clip
+      this.onInput()
+      this.getPreview(data.id, data.clip)
     },
-    computed: {
-        elements() {
-            const layouts = {
-                cards: {
-                    list: "k-cards",
-                    item: "k-clip-card"
-                },
-                list: {
-                    list: "k-list",
-                    item: "k-clip-list-item"
-                }
-            };
-            if (layouts[this.layout]) {
-                return layouts[this.layout];
-            }
-            return layouts["list"];
-        },
-    },
-    methods: {
-        openClipDialog(id) {
-            this.clip_image = this.value.find(item => item.id === id);
-            this.$refs.clip.open();
-        },
-        clippedArea(data) {
-            this.clip_image.clip = data.clip;
-            this.onInput();
-            this.getPreview(data.id, data.clip);
-        },
-        /**
-         * Loads a clipped preview
-         * @param image_id
-         * @param clip
-         */
-        getPreview(image_id, clip) {
-            this.$api
-                .post(this.endpoints.field + "/preview", {
-                    id: image_id,
-                    width: clip.width,
-                    height: clip.height,
-                    top: clip.top,
-                    left: clip.left
-                })
-                .then(data => {
-                    if (data.image) {
-                        let field_name = this.name;
-                        let content_id = this.$store.state.content.current;
-                        let field_model = this.$store.getters["content/values"](content_id)[field_name];
+    /**
+     * Loads a clipped preview
+     * @param image_id
+     * @param clip
+     */
+    getPreview (image_id, clip) {
+      this.$api
+          .post(this.endpoints.field + '/preview', {
+            id: image_id,
+            width: clip.width,
+            height: clip.height,
+            top: clip.top,
+            left: clip.left
+          })
+          .then(data => {
+            if (data.image) {
+              let field_name = this.name
+              let content_id = this.$store.state.content.current
+              let field_model = this.$store.getters['content/values'](content_id)[field_name]
 
-                        // regular field
-                        // update vuex store with new thumbnail urls
-                        if (field_model) {
-                            let changed_image = field_model.find(image => image.id === image_id);
-                            // new preview image to image model
-                            changed_image.image = data.image;
-                            this.$store.dispatch("content/update", [field_name, field_model, content_id])
-                        }
-                        // field inside a structure field
-                        // store gets automatically updated when OK clicked
-                        else {
-                            let updated_image = this.selected.find(image => image.id === image_id);
-                            updated_image.image = data.image;
-                        }
-                    }
-                    else {
-                        throw new Error("image clip: no image for preview received.")
-                    }
-                })
-                .catch(error => {
-                    console.log(error);
-                });
-        }
+              // regular field
+              // update vuex store with new thumbnail urls
+              if (field_model) {
+                let changed_image = field_model.find(image => image.id === image_id)
+                // new preview image to image model
+                changed_image.image = data.image
+                this.$store.dispatch('content/update', [field_name, field_model, content_id])
+              }
+                  // field inside a structure field
+              // store gets automatically updated when OK clicked
+              else {
+                let updated_image = this.selected.find(image => image.id === image_id)
+                updated_image.image = data.image
+              }
+            } else {
+              throw new Error('image clip: no image for preview received.')
+            }
+          })
+          .catch(error => {
+            console.log(error)
+          })
     }
+  }
 }
 </script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 7ec5e60..9ccab9d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,21 +1,21 @@
-import imageClip from "./fields/imageClip.vue";
-import clipCard from "./components/clipCard.vue";
-import clipHandle from "./components/clipHandle.vue";
-import clipListItem from "./components/clipListItem.vue";
-import clipButton from "./components/clipButton.vue";
-import clipDialog from "./components/clipDialog.vue";
-import structurePreview from "./components/structurePreview.vue";
+import imageClip from './fields/imageClip.vue'
+import clipItems from './components/clipItems.vue'
+import clipItem from './components/clipItem.vue'
+import clipItemImage from './components/clipItemImage.vue'
+import clipHandle from './components/clipHandle.vue'
+import clipDialog from './components/clipDialog.vue'
+import structurePreview from './components/structurePreview.vue'
 
-panel.plugin("mullema/image-clip", {
-    fields: {
-        'image-clip': imageClip
-    },
-    components: {
-        'k-clip-card': clipCard,
-        'k-clip-handle': clipHandle,
-        'k-clip-list-item': clipListItem,
-        'k-clip-button': clipButton,
-        'k-clip-dialog': clipDialog,
-        'k-image-clip-field-preview': structurePreview
-    }
-});
+panel.plugin('mullema/image-clip', {
+  fields: {
+    'image-clip': imageClip
+  },
+  components: {
+    'k-clip-items': clipItems,
+    'k-clip-item': clipItem,
+    'k-clip-item-image': clipItemImage,
+    'k-clip-handle': clipHandle,
+    'k-clip-dialog': clipDialog,
+    'k-image-clip-field-preview': structurePreview,
+  }
+})