@frollo/frollo-web-ui 2.0.0 → 3.0.1

package/esm/fw-image-4727ac61.js

@@ -0,0 +1,289 @@
+import './es.array.includes-91be7771.js';
+import './es.number.constructor-1249bd78.js';
+import { defineComponent, computed, ref, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, withKeys, createElementVNode, createVNode, renderSlot } from 'vue';
+import './es.array.find-dfa1f42f.js';
+import './es.string.iterator-284b31d4.js';
+import './web.timers-0f117224.js';
+import { a as documentCreateElement$1, g as global$1, c as createNonEnumerableProperty$1 } from './is-forced-752b5893.js';
+import { _ as _export } from './export-a37ba078.js';
+import { a as arrayIteration } from './array-iteration-107f927f.js';
+import { a as arrayMethodIsStrict$1 } from './array-method-is-strict-055b1830.js';
+import { s as script$1 } from './fw-loading-bar-f5ca605c.js';
+import { r as render$1 } from './index-4605e00e.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var es_array_forEach = {};
+
+'use strict';
+var $forEach = arrayIteration.forEach;
+var arrayMethodIsStrict = arrayMethodIsStrict$1;
+
+var STRICT_METHOD = arrayMethodIsStrict('forEach');
+
+// `Array.prototype.forEach` method implementation
+// https://tc39.es/ecma262/#sec-array.prototype.foreach
+var arrayForEach = !STRICT_METHOD ? function forEach(callbackfn /* , thisArg */) {
+  return $forEach(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined);
+// eslint-disable-next-line es-x/no-array-prototype-foreach -- safe
+} : [].forEach;
+
+'use strict';
+var $ = _export;
+var forEach$1 = arrayForEach;
+
+// `Array.prototype.forEach` method
+// https://tc39.es/ecma262/#sec-array.prototype.foreach
+// eslint-disable-next-line es-x/no-array-prototype-foreach -- safe
+$({ target: 'Array', proto: true, forced: [].forEach != forEach$1 }, {
+  forEach: forEach$1
+});
+
+var web_domCollections_forEach = {};
+
+// iterable DOM collections
+// flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods
+var domIterables = {
+  CSSRuleList: 0,
+  CSSStyleDeclaration: 0,
+  CSSValueList: 0,
+  ClientRectList: 0,
+  DOMRectList: 0,
+  DOMStringList: 0,
+  DOMTokenList: 1,
+  DataTransferItemList: 0,
+  FileList: 0,
+  HTMLAllCollection: 0,
+  HTMLCollection: 0,
+  HTMLFormElement: 0,
+  HTMLSelectElement: 0,
+  MediaList: 0,
+  MimeTypeArray: 0,
+  NamedNodeMap: 0,
+  NodeList: 1,
+  PaintRequestList: 0,
+  Plugin: 0,
+  PluginArray: 0,
+  SVGLengthList: 0,
+  SVGNumberList: 0,
+  SVGPathSegList: 0,
+  SVGPointList: 0,
+  SVGStringList: 0,
+  SVGTransformList: 0,
+  SourceBufferList: 0,
+  StyleSheetList: 0,
+  TextTrackCueList: 0,
+  TextTrackList: 0,
+  TouchList: 0
+};
+
+// in old WebKit versions, `element.classList` is not an instance of global `DOMTokenList`
+var documentCreateElement = documentCreateElement$1;
+
+var classList = documentCreateElement('span').classList;
+var DOMTokenListPrototype$1 = classList && classList.constructor && classList.constructor.prototype;
+
+var domTokenListPrototype = DOMTokenListPrototype$1 === Object.prototype ? undefined : DOMTokenListPrototype$1;
+
+var global = global$1;
+var DOMIterables = domIterables;
+var DOMTokenListPrototype = domTokenListPrototype;
+var forEach = arrayForEach;
+var createNonEnumerableProperty = createNonEnumerableProperty$1;
+
+var handlePrototype = function (CollectionPrototype) {
+  // some Chrome versions have non-configurable methods on DOMTokenList
+  if (CollectionPrototype && CollectionPrototype.forEach !== forEach) try {
+    createNonEnumerableProperty(CollectionPrototype, 'forEach', forEach);
+  } catch (error) {
+    CollectionPrototype.forEach = forEach;
+  }
+};
+
+for (var COLLECTION_NAME in DOMIterables) {
+  if (DOMIterables[COLLECTION_NAME]) {
+    handlePrototype(global[COLLECTION_NAME] && global[COLLECTION_NAME].prototype);
+  }
+}
+
+handlePrototype(DOMTokenListPrototype);
+
+var lazyLoadDirective = {
+  mounted: function mounted(el) {
+    var loadImage = function loadImage() {
+      var imageElement = Array.from(el.children).find(function (element) {
+        return element.nodeName === 'IMG';
+      });
+      if (imageElement) {
+        var type = el.getAttribute('type');
+        var url = imageElement.dataset.url;
+        imageElement.addEventListener('load', function () {
+          setTimeout(function () {
+            return el.classList.add('fw-image--loaded');
+          }, 100);
+          setTimeout(function () {
+            var _el$querySelector;
+            return (_el$querySelector = el.querySelector('.fw-image--loading')) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.remove();
+          }, 600);
+        });
+        if (url) {
+          imageElement.src = url;
+        }
+        if (type === 'background') {
+          el.style.backgroundImage = "url('".concat(url, "')");
+          imageElement.remove();
+        }
+        imageElement.addEventListener('error', function () {
+          setTimeout(function () {
+            return el.classList.add('fw-image--loaded-error');
+          }, 100);
+          setTimeout(function () {
+            var _el$querySelector2;
+            return (_el$querySelector2 = el.querySelector('.fw-image--loading')) === null || _el$querySelector2 === void 0 ? void 0 : _el$querySelector2.remove();
+          }, 600);
+        });
+      }
+    };
+    var handleIntersect = function handleIntersect(entries, observer) {
+      entries.forEach(function (entry) {
+        if (entry.isIntersecting) {
+          loadImage();
+          observer.unobserve(el);
+        }
+      });
+    };
+    var createObserver = function createObserver() {
+      var options = {
+        root: null,
+        threshold: Number(el.getAttribute('threshold')) || 0
+      };
+      var observer = new IntersectionObserver(handleIntersect, options);
+      observer.observe(el);
+    };
+    if (window.IntersectionObserver) {
+      createObserver();
+    } else {
+      loadImage();
+    }
+  }
+};
+
+var script = defineComponent({
+  name: 'FwImage',
+  directives: {
+    lazyload: lazyLoadDirective
+  },
+  components: {
+    FwLoadingBar: script$1,
+    FileExclamationSvg: render$1
+  },
+  props: {
+    /**
+     * The src attribute of the image
+     */
+    src: String,
+    /**
+     * The alt attribute of the image
+     */
+    alt: String,
+    /**
+     * The type of component. Accepts 'background' and defaults to the native html5 element.
+     */
+    type: {
+      type: String,
+      "default": 'native',
+      validator: function validator(value) {
+        return ['native', 'background'].includes(value);
+      }
+    },
+    /**
+     * Whether the loading bar and error state are rounded.
+     */
+    rounded: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * The class for the native image element
+     */
+    imageClass: {
+      type: String
+    },
+    /**
+     * Controls the threshold before the component triggers the src url.
+     */
+    threshold: {
+      type: Number,
+      "default": 0
+    }
+  },
+  setup: function setup(props) {
+    var isBackground = computed(function () {
+      return props.type === 'background';
+    });
+    var fwImageRef = ref(null);
+    return {
+      fwImageRef: fwImageRef,
+      isBackground: isBackground
+    };
+  }
+});
+
+var _hoisted_1 = ["type", "threshold"];
+var _hoisted_2 = ["data-url", "alt"];
+var _hoisted_3 = {
+  "class": "fw-image--error-wrapper flex flex-col items-center justify-center"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_FwLoadingBar = resolveComponent("FwLoadingBar");
+  var _component_FileExclamationSvg = resolveComponent("FileExclamationSvg");
+  var _directive_lazyload = resolveDirective("lazyload");
+  return withDirectives((openBlock(), createElementBlock("div", {
+    ref: "fwImageRef",
+    type: _ctx.type,
+    threshold: _ctx.threshold,
+    "class": normalizeClass(["fw-image", {
+      'fw-image--background': _ctx.isBackground,
+      'rounded-full': _ctx.rounded
+    }]),
+    onClick: _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.$emit('click', $event);
+    }),
+    onKeyup: _cache[1] || (_cache[1] = withKeys(function ($event) {
+      return _ctx.$emit('click', $event);
+    }, ["enter"])),
+    onMouseover: _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.$emit('mouseover');
+    }),
+    onMouseout: _cache[3] || (_cache[3] = function ($event) {
+      return _ctx.$emit('mouseout');
+    }),
+    onFocusin: _cache[4] || (_cache[4] = function ($event) {
+      return _ctx.$emit('mouseover');
+    }),
+    onFocusout: _cache[5] || (_cache[5] = function ($event) {
+      return _ctx.$emit('mouseout');
+    })
+  }, [createElementVNode("img", {
+    "data-url": _ctx.src,
+    alt: _ctx.alt,
+    "class": normalizeClass(_ctx.imageClass)
+  }, null, 10, _hoisted_2), createVNode(_component_FwLoadingBar, {
+    "class": normalizeClass(["fw-image--loading w-full h-full", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, null, 8, ["class"]), createElementVNode("div", {
+    "class": normalizeClass(["fw-image--error bg-grey-20", {
+      'rounded-full': _ctx.rounded
+    }])
+  }, [createElementVNode("div", _hoisted_3, [createVNode(_component_FileExclamationSvg, {
+    "class": "w-full h-full scale-[0.3] opacity-80 text-alert max-w-[150px]"
+  })])], 2), renderSlot(_ctx.$slots, "default")], 42, _hoisted_1)), [[_directive_lazyload]]);
+}
+
+var css_248z = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
+var stylesheet = ".fw-image{position:relative}.fw-image img{-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.fw-image img,.fw-image--error{opacity:0;visibility:hidden;width:100%}.fw-image--error{height:100%;left:0;position:relative;position:absolute;top:0;-webkit-transition:all .5s ease-in;transition:all .5s ease-in}.fw-image--error-wrapper{font-size:inherit;left:50%;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}.fw-image--loading{height:100%;left:0;position:absolute!important;top:0;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;width:100%}.fw-image--loaded img,.fw-image--loading{opacity:1;visibility:visible}.fw-image--loaded .fw-image--loading{opacity:0;visibility:hidden;width:100%}.fw-image--loaded-error img{display:none}.fw-image--loaded-error .fw-image--error{opacity:1;visibility:visible}.fw-image--background{background-position:50%;background-repeat:no-repeat;background-size:cover}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as s };