@everymatrix/ui-image 0.1.0

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export { U as UiImage } from './ui-image-38c3c15f.js';
+import './index-b7bbd57e.js';

package/dist/esm/loader.js

@@ -0,0 +1,11 @@
+import { b as bootstrapLazy } from './index-b7bbd57e.js';
+export { s as setNonce } from './index-b7bbd57e.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await globalScripts();
+  return bootstrapLazy([["ui-image",[[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);
+};
+
+export { defineCustomElements };

package/dist/esm/ui-image-38c3c15f.js

@@ -0,0 +1,67 @@
+import { r as registerInstance, h, g as getElement } from './index-b7bbd57e.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) {
+        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 (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 getElement(this); }
+    static get watchers() { return {
+        "src": ["handleSrc"]
+    }; }
+};
+UiImage.style = UiImageStyle0;
+
+export { UiImage as U };

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

@@ -0,0 +1,2 @@
+export { U as ui_image } from './ui-image-38c3c15f.js';
+import './index-b7bbd57e.js';

package/dist/esm/ui-image.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-b7bbd57e.js';
+export { s as setNonce } from './index-b7bbd57e.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["ui-image",[[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);
+});

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/stencil.config.dev.js

@@ -0,0 +1,17 @@
+import { sass } from "@stencil/sass";
+export const config = {
+    namespace: 'ui-image',
+    taskQueue: 'async',
+    sourceMap: false,
+    minifyJs: true,
+    extras: {
+        experimentalImportInjection: true
+    },
+    plugins: [sass()],
+    outputTargets: [
+        {
+            type: 'www',
+            serviceWorker: null // disable service workers
+        }
+    ]
+};

package/dist/stencil.config.js

@@ -0,0 +1,17 @@
+import { sass } from "@stencil/sass";
+export const config = {
+    namespace: 'ui-image',
+    taskQueue: 'async',
+    sourceMap: false,
+    minifyJs: true,
+    extras: {
+        experimentalImportInjection: true
+    },
+    plugins: [sass()],
+    outputTargets: [
+        {
+            type: 'dist',
+            esmLoaderPath: '../loader'
+        }
+    ]
+};

package/dist/storybook/main.js

@@ -0,0 +1,21 @@
+import * as path from "path";
+const config = {
+    stories: ['../**/*.@(mdx|stories.@(js|ts|tsx))'],
+    addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-dark-mode'],
+    docs: {
+        defaultName: 'Documentation',
+        autodocs: 'tag'
+    },
+    framework: {
+        name: '@storybook/web-components-vite',
+        options: {}
+    },
+    viteFinal: async (config) => {
+        return Object.assign(Object.assign({}, config), { resolve: {
+                alias: {
+                    'ui-image': path.resolve(__dirname, '../../../../dist/packages/stencil/ui-image')
+                }
+            } });
+    }
+};
+export default config;

package/dist/storybook/preview.js

@@ -0,0 +1,9 @@
+import { themes } from "@storybook/theming";
+export const parameters = {
+    darkMode: {
+        dark: Object.assign(Object.assign({}, themes.dark), { appBg: 'black' }),
+        light: Object.assign(Object.assign({}, themes.normal), { appBg: 'green' }),
+        current: 'light',
+        stylePreview: true
+    }
+};

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-image/.stencil/packages/stencil/ui-image/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-image/.stencil/packages/stencil/ui-image/stencil.config.dev.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-image/.stencil/packages/stencil/ui-image/storybook/main.d.ts

@@ -0,0 +1,3 @@
+import type { StorybookConfig } from '@storybook/web-components-vite';
+declare const config: StorybookConfig;
+export default config;

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-image/.stencil/packages/stencil/ui-image/storybook/preview.d.ts

@@ -0,0 +1,70 @@
+export declare const parameters: {
+    darkMode: {
+        dark: {
+            appBg: string;
+            base: "light" | "dark";
+            colorPrimary: string;
+            colorSecondary: string;
+            appContentBg: string;
+            appPreviewBg: string;
+            appBorderColor: string;
+            appBorderRadius: number;
+            fontBase: string;
+            fontCode: string;
+            textColor: string;
+            textInverseColor: string;
+            textMutedColor: string;
+            barTextColor: string;
+            barHoverColor: string;
+            barSelectedColor: string;
+            barBg: string;
+            buttonBg: string;
+            buttonBorder: string;
+            booleanBg: string;
+            booleanSelectedBg: string;
+            inputBg: string;
+            inputBorder: string;
+            inputTextColor: string;
+            inputBorderRadius: number;
+            brandTitle?: string;
+            brandUrl?: string;
+            brandImage?: string;
+            brandTarget?: string;
+            gridCellSize?: number;
+        };
+        light: {
+            appBg: string;
+            base: "light" | "dark";
+            colorPrimary: string;
+            colorSecondary: string;
+            appContentBg: string;
+            appPreviewBg: string;
+            appBorderColor: string;
+            appBorderRadius: number;
+            fontBase: string;
+            fontCode: string;
+            textColor: string;
+            textInverseColor: string;
+            textMutedColor: string;
+            barTextColor: string;
+            barHoverColor: string;
+            barSelectedColor: string;
+            barBg: string;
+            buttonBg: string;
+            buttonBorder: string;
+            booleanBg: string;
+            booleanSelectedBg: string;
+            inputBg: string;
+            inputBorder: string;
+            inputTextColor: string;
+            inputBorderRadius: number;
+            brandTitle?: string;
+            brandUrl?: string;
+            brandImage?: string;
+            brandTarget?: string;
+            gridCellSize?: number;
+        };
+        current: string;
+        stylePreview: boolean;
+    };
+};

package/dist/types/components/ui-image/index.d.ts

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

package/dist/types/components/ui-image/ui-image.d.ts

@@ -0,0 +1,23 @@
+export declare class UiImage {
+    /** Source of the image */
+    src: string;
+    /** Width of the image */
+    width: string;
+    /** Height of the image */
+    height: string;
+    /** Alt of the image */
+    alt: string;
+    /** Allow external class for the inner image element */
+    imgClass: string;
+    /** Allow inline styles */
+    styles: any;
+    /** Distance for the image to be detected */
+    detectDistance: string;
+    private imgLoaded;
+    private shouldLoad;
+    el: HTMLElement;
+    private image;
+    handleSrc(): void;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -0,0 +1,93 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+export namespace Components {
+    interface UiImage {
+        /**
+          * Alt of the image
+         */
+        "alt": string;
+        /**
+          * Distance for the image to be detected
+         */
+        "detectDistance": string;
+        /**
+          * Height of the image
+         */
+        "height": string;
+        /**
+          * Allow external class for the inner image element
+         */
+        "imgClass": string;
+        /**
+          * Source of the image
+         */
+        "src": string;
+        /**
+          * Allow inline styles
+         */
+        "styles": any;
+        /**
+          * Width of the image
+         */
+        "width": string;
+    }
+}
+declare global {
+    interface HTMLUiImageElement extends Components.UiImage, HTMLStencilElement {
+    }
+    var HTMLUiImageElement: {
+        prototype: HTMLUiImageElement;
+        new (): HTMLUiImageElement;
+    };
+    interface HTMLElementTagNameMap {
+        "ui-image": HTMLUiImageElement;
+    }
+}
+declare namespace LocalJSX {
+    interface UiImage {
+        /**
+          * Alt of the image
+         */
+        "alt"?: string;
+        /**
+          * Distance for the image to be detected
+         */
+        "detectDistance"?: string;
+        /**
+          * Height of the image
+         */
+        "height"?: string;
+        /**
+          * Allow external class for the inner image element
+         */
+        "imgClass"?: string;
+        /**
+          * Source of the image
+         */
+        "src"?: string;
+        /**
+          * Allow inline styles
+         */
+        "styles"?: any;
+        /**
+          * Width of the image
+         */
+        "width"?: string;
+    }
+    interface IntrinsicElements {
+        "ui-image": UiImage;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "ui-image": LocalJSX.UiImage & JSXBase.HTMLAttributes<HTMLUiImageElement>;
+        }
+    }
+}

package/dist/types/index.d.ts

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