@everymatrix/ui-image 0.1.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const uiImage = require('./ui-image-e059fe64.js');
+require('./index-bdabfcc4.js');
+
+
+
+exports.UiImage = uiImage.UiImage;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bdabfcc4.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["ui-image.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/ui-image-e059fe64.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const index = require('./index-bdabfcc4.js');
+
+const uiImageCss = ":host{display:block}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}";
+const UiImageStyle0 = uiImageCss;
+
+const UiImage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.src = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.alt = undefined;
+        this.imgClass = '';
+        this.styles = undefined;
+        this.detectDistance = '200px';
+        this.imgLoaded = false;
+        this.shouldLoad = false;
+    }
+    handleSrc() {
+        if (!this.shouldLoad) {
+            return;
+        }
+        const tempImage = new Image();
+        tempImage.src = this.src;
+        tempImage.onload = () => {
+            if (this.image) {
+                this.image.src = this.src;
+                this.imgLoaded = true;
+                this.el.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+            }
+        };
+    }
+    componentDidLoad() {
+        if ('IntersectionObserver' in window) {
+            this.el.__uxComponent = this;
+            if (!window.EMUxObserver) {
+                window.EMUxObserver = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            const comp = entry.target.__uxComponent;
+                            if (comp) {
+                                comp.shouldLoad = true;
+                                comp.handleSrc();
+                            }
+                            window.EMUxObserver.unobserve(entry.target);
+                        }
+                    });
+                }, { rootMargin: this.detectDistance });
+            }
+            window.EMUxObserver.observe(this.el);
+        }
+        else {
+            this.shouldLoad = true;
+            this.handleSrc();
+        }
+    }
+    render() {
+        return (index.h("img", { key: '2bb4dc391fc2f753514103e91c0abf065de3236a', ref: el => (this.image = el), style: this.styles, class: `${this.imgClass} ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" }));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "src": ["handleSrc"]
+    }; }
+};
+UiImage.style = UiImageStyle0;
+
+exports.UiImage = UiImage;

package/dist/cjs/ui-image.cjs.entry.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const uiImage = require('./ui-image-e059fe64.js');
+require('./index-bdabfcc4.js');
+
+
+
+exports.ui_image = uiImage.UiImage;

package/dist/cjs/ui-image.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bdabfcc4.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('ui-image.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["ui-image.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"imgClass":[1,"img-class"],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/ui-image/ui-image.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.19.2",
+    "typescriptVersion": "5.4.5"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/ui-image/index.js

@@ -0,0 +1 @@
+export { UiImage } from './ui-image';

package/dist/collection/components/ui-image/ui-image.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+}
+
+.Hidden {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.Visible {
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+}

package/dist/collection/components/ui-image/ui-image.js

@@ -0,0 +1,204 @@
+import { h } from "@stencil/core";
+export class UiImage {
+    constructor() {
+        this.src = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.alt = undefined;
+        this.imgClass = '';
+        this.styles = undefined;
+        this.detectDistance = '200px';
+        this.imgLoaded = false;
+        this.shouldLoad = false;
+    }
+    handleSrc() {
+        if (!this.shouldLoad) {
+            return;
+        }
+        const tempImage = new Image();
+        tempImage.src = this.src;
+        tempImage.onload = () => {
+            if (this.image) {
+                this.image.src = this.src;
+                this.imgLoaded = true;
+                this.el.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+            }
+        };
+    }
+    componentDidLoad() {
+        if ('IntersectionObserver' in window) {
+            this.el.__uxComponent = this;
+            if (!window.EMUxObserver) {
+                window.EMUxObserver = new IntersectionObserver((entries) => {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting) {
+                            const comp = entry.target.__uxComponent;
+                            if (comp) {
+                                comp.shouldLoad = true;
+                                comp.handleSrc();
+                            }
+                            window.EMUxObserver.unobserve(entry.target);
+                        }
+                    });
+                }, { rootMargin: this.detectDistance });
+            }
+            window.EMUxObserver.observe(this.el);
+        }
+        else {
+            this.shouldLoad = true;
+            this.handleSrc();
+        }
+    }
+    render() {
+        return (h("img", { key: '2bb4dc391fc2f753514103e91c0abf065de3236a', ref: el => (this.image = el), style: this.styles, class: `${this.imgClass} ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" }));
+    }
+    static get is() { return "ui-image"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-image.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-image.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Source of the image"
+                },
+                "attribute": "src",
+                "reflect": false
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the image"
+                },
+                "attribute": "width",
+                "reflect": false
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the image"
+                },
+                "attribute": "height",
+                "reflect": false
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt of the image"
+                },
+                "attribute": "alt",
+                "reflect": false
+            },
+            "imgClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow external class for the inner image element"
+                },
+                "attribute": "img-class",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "styles": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow inline styles"
+                },
+                "attribute": "styles",
+                "reflect": false
+            },
+            "detectDistance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Distance for the image to be detected"
+                },
+                "attribute": "detect-distance",
+                "reflect": false,
+                "defaultValue": "'200px'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "imgLoaded": {},
+            "shouldLoad": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "src",
+                "methodName": "handleSrc"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/ui-image';

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };