@everymatrix/ui-image 0.1.1 → 0.2.1

package/dist/cjs/{index-bdabfcc4.js → index-e835971b.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'ui-image';
-const BUILD = /* ui-image */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: false, vdomXlink: false, watchCallback: true };
+const BUILD = /* ui-image */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -71,10 +71,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'ui-image.cjs':
+                case 'ui-image_2.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './ui-image.cjs.entry.js')); }).then(processMod, consoleError);
+                        './ui-image_2.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
@@ -293,6 +293,12 @@ var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
+    if (propType & 4 /* Boolean */) {
+      return propValue === "false" ? false : propValue === "" || !!propValue;
+    }
+    if (propType & 2 /* Number */) {
+      return parseFloat(propValue);
+    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -370,7 +376,7 @@ var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
   if (oldValue !== newValue) {
     let isProp = isMemberInElement(elm, memberName);
-    memberName.toLowerCase();
+    let ln = memberName.toLowerCase();
     if (memberName === "class") {
       const classList = elm.classList;
       const oldClasses = parseClassList(oldValue);
@@ -402,6 +408,24 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       if (newValue) {
         newValue(elm);
       }
+    } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+      if (memberName[2] === "-") {
+        memberName = memberName.slice(3);
+      } else if (isMemberInElement(win, ln)) {
+        memberName = ln.slice(2);
+      } else {
+        memberName = ln[2] + memberName.slice(3);
+      }
+      if (oldValue || newValue) {
+        const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+        memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+        if (oldValue) {
+          plt.rel(elm, memberName, oldValue, capture);
+        }
+        if (newValue) {
+          plt.ael(elm, memberName, newValue, capture);
+        }
+      }
     } else {
       const isComplex = isComplexType(newValue);
       if ((isProp || isComplex && newValue !== null) && !isSvg) {
@@ -436,6 +460,8 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
 };
 var parseClassListRegex = /\s/;
 var parseClassList = (value) => !value ? [] : value.split(parseClassListRegex);
+var CAPTURE_EVENT_SUFFIX = "Capture";
+var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/vdom/update-element.ts
 var updateElement = (oldVnode, newVnode, isSvgMode2) => {
@@ -470,7 +496,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
   let i2 = 0;
   let elm;
   let childNode;
-  {
+  if (newVNode2.$text$ !== null) {
+    elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
+  } else {
     elm = newVNode2.$elm$ = doc.createElement(
       !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     );
@@ -611,7 +639,8 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
-  {
+  const text = newVNode2.$text$;
+  if (text === null) {
     {
       {
         updateElement(oldVNode, newVNode2, isSvgMode);
@@ -620,10 +649,15 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     if (oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
     } else if (newChildren !== null) {
+      if (oldVNode.$text$ !== null) {
+        elm.textContent = "";
+      }
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
     } else if (oldChildren !== null) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
+  } else if (oldVNode.$text$ !== text) {
+    elm.data = text;
   }
 };
 var nullifyVNodeRefs = (vNode) => {
@@ -1126,6 +1160,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
+exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
 exports.getElement = getElement;
 exports.h = h;

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const uiImage = require('./ui-image-e059fe64.js');
-require('./index-bdabfcc4.js');
+const uiImage = require('./ui-image-008021e8.js');
+require('./index-e835971b.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bdabfcc4.js');
+const index = require('./index-e835971b.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);
+  return index.bootstrapLazy([["ui-image_2.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{ui-image-e059fe64.js → ui-image-008021e8.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('./index-bdabfcc4.js');
+const index = require('./index-e835971b.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 uiImageCss = ".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit}.UiContainer .Image{border-radius:inherit}.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 {
@@ -12,7 +12,6 @@ const UiImage = class {
         this.width = undefined;
         this.height = undefined;
         this.alt = undefined;
-        this.imgClass = '';
         this.styles = undefined;
         this.detectDistance = '200px';
         this.imgLoaded = false;
@@ -22,15 +21,14 @@ const UiImage = class {
         if (!this.shouldLoad) {
             return;
         }
-        const tempImage = new Image();
-        tempImage.src = this.src;
-        tempImage.onload = () => {
+        const preloadedImage = new Image();
+        preloadedImage.onload = () => {
             if (this.image) {
                 this.image.src = this.src;
                 this.imgLoaded = true;
-                this.el.dispatchEvent(new CustomEvent('load', { bubbles: true }));
             }
         };
+        preloadedImage.src = this.src;
     }
     componentDidLoad() {
         if ('IntersectionObserver' in window) {
@@ -57,7 +55,7 @@ const UiImage = class {
         }
     }
     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" }));
+        return (index.h(index.Host, { key: '527318220c6b48375943e897fe0e53e0f33e67ed', class: "HostContainer" }, !this.imgLoaded && (index.h("ui-skeleton", { key: 'e5c49a781ff2fac5c796cb6a3f8d334dce7be35b', class: "UiContainer", structure: "image", width: "100%", height: "100%" })), index.h("img", { key: '09dfbf8f52c2c899246590790f2780a84bdeefc3', ref: (el) => (this.image = el), src: this.shouldLoad ? this.src : undefined, onLoad: () => (this.imgLoaded = true), style: this.styles, class: `UiContainer ${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 {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bdabfcc4.js');
+const index = require('./index-e835971b.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 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);
+  return index.bootstrapLazy([["ui-image_2.cjs",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const uiImage = require('./ui-image-008021e8.js');
+const index = require('./index-e835971b.js');
+
+const uiSkeletonCss = ":host{display:block;--emw-skeleton-rectangle-background:#c2c2c2;--emw-skeleton-circle-background:#c2c2c2;--emw-skeleton-text-background:#c2c2c2;--emw-skeleton-title-background:#c2c2c2;--emw-skeleton-image-background:#c2c2c2;--emw-skeleton-logo-background:#c2c2c2;--emw-skeleton-primary-color:#e0e0e0;--emw-skeleton-secondary-color:#f0f0f0}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, inherit)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.structure = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.borderRadius = undefined;
+        this.marginBottom = undefined;
+        this.marginTop = undefined;
+        this.marginLeft = undefined;
+        this.marginRight = undefined;
+        this.animation = true;
+        this.rows = undefined;
+        this.size = undefined;
+        this.color = undefined;
+        this.primaryColor = undefined;
+        this.secondaryColor = undefined;
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    handleStructure(structure) {
+        switch (structure) {
+            case 'logo':
+                return this.renderLogo();
+            case 'image':
+                return this.renderImage();
+            case 'title':
+                return this.renderTitle();
+            case 'text':
+                return this.renderText();
+            case 'rectangle':
+                return this.renderRectangle();
+            case 'circle':
+                return this.renderCircle();
+            default:
+                return null;
+        }
+    }
+    renderLogo() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return (index.h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') }));
+    }
+    renderTitle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: "Text " + (this.animation ? 'Skeleton' : '') })))));
+    }
+    renderRectangle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    render() {
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.width};
+            --emw-skeleton-logo-height: ${this.height};
+            --emw-skeleton-logo-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-logo-margin-top: ${this.marginTop}px;
+            --emw-skeleton-logo-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-logo-margin-right: ${this.marginRight}px;
+            --emw-skeleton-logo-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.width};
+            --emw-skeleton-image-height: ${this.height};
+            --emw-skeleton-image-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-image-margin-top: ${this.marginTop}px;
+            --emw-skeleton-image-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-image-margin-right: ${this.marginRight}px;
+            --emw-skeleton-image-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.width};
+            --emw-skeleton-title-height: ${this.height};
+            --emw-skeleton-title-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-title-margin-top: ${this.marginTop}px;
+            --emw-skeleton-title-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-title-margin-right: ${this.marginRight}px;
+            --emw-skeleton-title-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.width};
+            --emw-skeleton-text-height: ${this.height};
+            --emw-skeleton-text-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-text-margin-top: ${this.marginTop}px;
+            --emw-skeleton-text-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-text-margin-right: ${this.marginRight}px;
+            --emw-skeleton-text-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.width};
+            --emw-skeleton-rectangle-height: ${this.height};
+            --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
+            --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
+            --emw-skeleton-rectangle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.size};
+            --emw-skeleton-circle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (index.h(index.Host, { key: '3bb792a149db7fe732d5cbfa092cdb4d6ca0689e' }, index.h("style", { key: 'a4607599b60659f385ae2660513e38b383739674' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+exports.ui_image = uiImage.UiImage;
+exports.ui_skeleton = UiSkeleton;

package/dist/collection/collection-manifest.json

@@ -7,6 +7,13 @@
     "version": "4.19.2",
     "typescriptVersion": "5.4.5"
   },
-  "collections": [],
+  "collections": [
+    {
+      "name": "@everymatrix/ui-skeleton",
+      "tags": [
+        "ui-skeleton"
+      ]
+    }
+  ],
   "bundles": []
 }

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

@@ -1,7 +1,16 @@
-:host {
+.HostContainer {
   display: block;
 }
 
+.UiContainer {
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+}
+.UiContainer .Image {
+  border-radius: inherit;
+}
+
 .Hidden {
   opacity: 0;
   transition: opacity 0.5s ease-in-out;

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

@@ -1,11 +1,11 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
+import "../../../../../ui-skeleton/dist/types/index";
 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;
@@ -15,15 +15,14 @@ export class UiImage {
         if (!this.shouldLoad) {
             return;
         }
-        const tempImage = new Image();
-        tempImage.src = this.src;
-        tempImage.onload = () => {
+        const preloadedImage = new Image();
+        preloadedImage.onload = () => {
             if (this.image) {
                 this.image.src = this.src;
                 this.imgLoaded = true;
-                this.el.dispatchEvent(new CustomEvent('load', { bubbles: true }));
             }
         };
+        preloadedImage.src = this.src;
     }
     componentDidLoad() {
         if ('IntersectionObserver' in window) {
@@ -50,7 +49,7 @@ export class UiImage {
         }
     }
     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" }));
+        return (h(Host, { key: '527318220c6b48375943e897fe0e53e0f33e67ed', class: "HostContainer" }, !this.imgLoaded && (h("ui-skeleton", { key: 'e5c49a781ff2fac5c796cb6a3f8d334dce7be35b', class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { key: '09dfbf8f52c2c899246590790f2780a84bdeefc3', ref: (el) => (this.image = el), src: this.shouldLoad ? this.src : undefined, onLoad: () => (this.imgLoaded = true), style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
     }
     static get is() { return "ui-image"; }
     static get originalStyleUrls() {
@@ -133,24 +132,6 @@ export class UiImage {
                 "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,

package/dist/esm/{index-b7bbd57e.js → index-97d17652.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'ui-image';
-const BUILD = /* ui-image */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: false, propNumber: false, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: false, vdomXlink: false, watchCallback: true };
+const BUILD = /* ui-image */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -49,10 +49,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'ui-image':
+                case 'ui-image_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './ui-image.entry.js').then(processMod, consoleError);
+                      './ui-image_2.entry.js').then(processMod, consoleError);
           }
       }
   return import(
@@ -271,6 +271,12 @@ var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
+    if (propType & 4 /* Boolean */) {
+      return propValue === "false" ? false : propValue === "" || !!propValue;
+    }
+    if (propType & 2 /* Number */) {
+      return parseFloat(propValue);
+    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -348,7 +354,7 @@ var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
 var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
   if (oldValue !== newValue) {
     let isProp = isMemberInElement(elm, memberName);
-    memberName.toLowerCase();
+    let ln = memberName.toLowerCase();
     if (memberName === "class") {
       const classList = elm.classList;
       const oldClasses = parseClassList(oldValue);
@@ -380,6 +386,24 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       if (newValue) {
         newValue(elm);
       }
+    } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+      if (memberName[2] === "-") {
+        memberName = memberName.slice(3);
+      } else if (isMemberInElement(win, ln)) {
+        memberName = ln.slice(2);
+      } else {
+        memberName = ln[2] + memberName.slice(3);
+      }
+      if (oldValue || newValue) {
+        const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+        memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+        if (oldValue) {
+          plt.rel(elm, memberName, oldValue, capture);
+        }
+        if (newValue) {
+          plt.ael(elm, memberName, newValue, capture);
+        }
+      }
     } else {
       const isComplex = isComplexType(newValue);
       if ((isProp || isComplex && newValue !== null) && !isSvg) {
@@ -414,6 +438,8 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
 };
 var parseClassListRegex = /\s/;
 var parseClassList = (value) => !value ? [] : value.split(parseClassListRegex);
+var CAPTURE_EVENT_SUFFIX = "Capture";
+var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/vdom/update-element.ts
 var updateElement = (oldVnode, newVnode, isSvgMode2) => {
@@ -448,7 +474,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
   let i2 = 0;
   let elm;
   let childNode;
-  {
+  if (newVNode2.$text$ !== null) {
+    elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
+  } else {
     elm = newVNode2.$elm$ = doc.createElement(
       !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     );
@@ -589,7 +617,8 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
-  {
+  const text = newVNode2.$text$;
+  if (text === null) {
     {
       {
         updateElement(oldVNode, newVNode2, isSvgMode);
@@ -598,10 +627,15 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     if (oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
     } else if (newChildren !== null) {
+      if (oldVNode.$text$ !== null) {
+        elm.textContent = "";
+      }
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
     } else if (oldChildren !== null) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
+  } else if (oldVNode.$text$ !== text) {
+    elm.data = text;
   }
 };
 var nullifyVNodeRefs = (vNode) => {
@@ -1104,4 +1138,4 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { bootstrapLazy as b, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Host as H, bootstrapLazy as b, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/index.js

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

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-b7bbd57e.js';
-export { s as setNonce } from './index-b7bbd57e.js';
+import { b as bootstrapLazy } from './index-97d17652.js';
+export { s as setNonce } from './index-97d17652.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);
+  return bootstrapLazy([["ui-image_2",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/{ui-image-38c3c15f.js → ui-image-3911756b.js}

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, g as getElement } from './index-b7bbd57e.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-97d17652.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 uiImageCss = ".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit}.UiContainer .Image{border-radius:inherit}.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 {
@@ -10,7 +10,6 @@ const UiImage = class {
         this.width = undefined;
         this.height = undefined;
         this.alt = undefined;
-        this.imgClass = '';
         this.styles = undefined;
         this.detectDistance = '200px';
         this.imgLoaded = false;
@@ -20,15 +19,14 @@ const UiImage = class {
         if (!this.shouldLoad) {
             return;
         }
-        const tempImage = new Image();
-        tempImage.src = this.src;
-        tempImage.onload = () => {
+        const preloadedImage = new Image();
+        preloadedImage.onload = () => {
             if (this.image) {
                 this.image.src = this.src;
                 this.imgLoaded = true;
-                this.el.dispatchEvent(new CustomEvent('load', { bubbles: true }));
             }
         };
+        preloadedImage.src = this.src;
     }
     componentDidLoad() {
         if ('IntersectionObserver' in window) {
@@ -55,7 +53,7 @@ const UiImage = class {
         }
     }
     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" }));
+        return (h(Host, { key: '527318220c6b48375943e897fe0e53e0f33e67ed', class: "HostContainer" }, !this.imgLoaded && (h("ui-skeleton", { key: 'e5c49a781ff2fac5c796cb6a3f8d334dce7be35b', class: "UiContainer", structure: "image", width: "100%", height: "100%" })), h("img", { key: '09dfbf8f52c2c899246590790f2780a84bdeefc3', ref: (el) => (this.image = el), src: this.shouldLoad ? this.src : undefined, onLoad: () => (this.imgLoaded = true), style: this.styles, class: `UiContainer ${this.imgLoaded ? 'Visible' : 'Hidden'}`, alt: this.alt, width: this.width, height: this.height, loading: "lazy" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ui-image.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-b7bbd57e.js';
-export { s as setNonce } from './index-b7bbd57e.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-97d17652.js';
+export { s as setNonce } from './index-97d17652.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 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);
+  return bootstrapLazy([["ui-image_2",[[0,"ui-image",{"src":[1],"width":[1],"height":[1],"alt":[1],"styles":[8],"detectDistance":[1,"detect-distance"],"imgLoaded":[32],"shouldLoad":[32]},null,{"src":["handleSrc"]}],[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
 });

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

@@ -0,0 +1,170 @@
+export { U as ui_image } from './ui-image-3911756b.js';
+import { r as registerInstance, h, H as Host } from './index-97d17652.js';
+
+const uiSkeletonCss = ":host{display:block;--emw-skeleton-rectangle-background:#c2c2c2;--emw-skeleton-circle-background:#c2c2c2;--emw-skeleton-text-background:#c2c2c2;--emw-skeleton-title-background:#c2c2c2;--emw-skeleton-image-background:#c2c2c2;--emw-skeleton-logo-background:#c2c2c2;--emw-skeleton-primary-color:#e0e0e0;--emw-skeleton-secondary-color:#f0f0f0}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, inherit)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.structure = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.borderRadius = undefined;
+        this.marginBottom = undefined;
+        this.marginTop = undefined;
+        this.marginLeft = undefined;
+        this.marginRight = undefined;
+        this.animation = true;
+        this.rows = undefined;
+        this.size = undefined;
+        this.color = undefined;
+        this.primaryColor = undefined;
+        this.secondaryColor = undefined;
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    handleStructure(structure) {
+        switch (structure) {
+            case 'logo':
+                return this.renderLogo();
+            case 'image':
+                return this.renderImage();
+            case 'title':
+                return this.renderTitle();
+            case 'text':
+                return this.renderText();
+            case 'rectangle':
+                return this.renderRectangle();
+            case 'circle':
+                return this.renderCircle();
+            default:
+                return null;
+        }
+    }
+    renderLogo() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return (h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') }));
+    }
+    renderTitle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        return (h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { key: index, class: "Text " + (this.animation ? 'Skeleton' : '') })))));
+    }
+    renderRectangle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    render() {
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.width};
+            --emw-skeleton-logo-height: ${this.height};
+            --emw-skeleton-logo-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-logo-margin-top: ${this.marginTop}px;
+            --emw-skeleton-logo-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-logo-margin-right: ${this.marginRight}px;
+            --emw-skeleton-logo-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.width};
+            --emw-skeleton-image-height: ${this.height};
+            --emw-skeleton-image-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-image-margin-top: ${this.marginTop}px;
+            --emw-skeleton-image-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-image-margin-right: ${this.marginRight}px;
+            --emw-skeleton-image-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.width};
+            --emw-skeleton-title-height: ${this.height};
+            --emw-skeleton-title-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-title-margin-top: ${this.marginTop}px;
+            --emw-skeleton-title-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-title-margin-right: ${this.marginRight}px;
+            --emw-skeleton-title-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.width};
+            --emw-skeleton-text-height: ${this.height};
+            --emw-skeleton-text-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-text-margin-top: ${this.marginTop}px;
+            --emw-skeleton-text-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-text-margin-right: ${this.marginRight}px;
+            --emw-skeleton-text-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.width};
+            --emw-skeleton-rectangle-height: ${this.height};
+            --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
+            --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
+            --emw-skeleton-rectangle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.size};
+            --emw-skeleton-circle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (h(Host, { key: '3bb792a149db7fe732d5cbfa092cdb4d6ca0689e' }, h("style", { key: 'a4607599b60659f385ae2660513e38b383739674' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+export { UiSkeleton as ui_skeleton };

package/dist/storybook/main.js

@@ -1,7 +1,12 @@
-import * as path from "path";
+import path from "path";
+import { getStoryFiles, detectUsedPackages, parseTsConfig, exec, filterParsedPathsByUsedPackages } from "../../../../libs/common/src/storybook/storybook-utils";
 const config = {
     stories: ['../**/*.@(mdx|stories.@(js|ts|tsx))'],
-    addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-dark-mode'],
+    addons: [
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+        'storybook-dark-mode'
+    ],
     docs: {
         defaultName: 'Documentation',
         autodocs: 'tag'
@@ -10,10 +15,31 @@ const config = {
         name: '@storybook/web-components-vite',
         options: {}
     },
+    // Async viteFinal to build dependent packages before finalizing configuration.
     viteFinal: async (config) => {
+        const storyFiles = getStoryFiles(path.resolve(__dirname, '../'));
+        const usedPackages = detectUsedPackages(storyFiles);
+        const buildPromises = usedPackages.map(async (pkg) => {
+            try {
+                console.log(`Building package ${pkg}...`);
+                const { stdout, stderr } = await exec(`nx run ${pkg}:build`);
+                console.log(`Built package ${pkg}: ${stdout}`);
+                if (stderr) {
+                    console.error(`Build warning/error for package ${pkg}: ${stderr}`);
+                }
+            }
+            catch (error) {
+                console.error(`Error building package ${pkg}:`, error);
+            }
+        });
+        await Promise.all(buildPromises);
+        const parsedPaths = parseTsConfig() || {};
+        const filteredParsedPaths = filterParsedPathsByUsedPackages(parsedPaths, usedPackages);
         return Object.assign(Object.assign({}, config), { resolve: {
-                alias: {
-                    'ui-image': path.resolve(__dirname, '../../../../dist/packages/stencil/ui-image')
+                alias: Object.assign({}, filteredParsedPaths)
+            }, define: {
+                process: {
+                    env: {}
                 }
             } });
     }

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

@@ -0,0 +1,39 @@
+/// <reference types="node" />
+import { exec as execCallback } from 'child_process';
+export declare const exec: typeof execCallback.__promisify__;
+/**
+ * Recursively retrieves all story files (.stories.ts/.stories.tsx) in a directory.
+ * @param dir The directory to search.
+ * @returns Array of story file paths.
+ */
+export declare const getStoryFiles: (dir: string) => string[];
+/**
+ * Detects which internal packages are used in the provided story files.
+ * It looks at every import that starts with the given package alias prefix,
+ * then extracts the package name (the segment immediately following the prefix).
+ *
+ * @param stories Array of story file paths.
+ * @returns Array of unique package names (e.g. ['foo', 'bar']).
+ */
+export declare const detectUsedPackages: (stories: string[]) => string[];
+/**
+ * Extracts all import paths from a file using the TypeScript compiler API.
+ * @param filePath The file path to parse.
+ * @returns Array of import strings.
+ */
+export declare const extractImports: (filePath: string) => string[];
+/**
+ * Parses the tsconfig paths and resolves them to absolute paths.
+ * @param tsconfigPath The path to the tsconfig file.
+ * @returns An object mapping alias keys to absolute paths.
+ */
+export declare const parseTsConfig: () => Record<string, string> | null;
+/**
+ * Filters the parsed tsconfig alias mapping to only include keys that correspond
+ * to the used packages.
+ *
+ * @param parsedPaths The full alias mapping from tsconfig.
+ * @param usedPackages Array of package names that are used (e.g. ['foo', 'bar']).
+ * @returns Filtered alias mapping.
+ */
+export declare const filterParsedPathsByUsedPackages: (parsedPaths: Record<string, string>, usedPackages: string[]) => Record<string, string>;

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

@@ -1,3 +1,4 @@
+import "../../../../../../dist/packages/stencil/ui-skeleton/dist/types/index";
 export declare class UiImage {
     /** Source of the image */
     src: string;
@@ -7,8 +8,6 @@ export declare class UiImage {
     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 */

package/dist/types/components.d.ts

@@ -19,10 +19,6 @@ export namespace Components {
           * Height of the image
          */
         "height": string;
-        /**
-          * Allow external class for the inner image element
-         */
-        "imgClass": string;
         /**
           * Source of the image
          */
@@ -62,10 +58,6 @@ declare namespace LocalJSX {
           * Height of the image
          */
         "height"?: string;
-        /**
-          * Allow external class for the inner image element
-         */
-        "imgClass"?: string;
         /**
           * Source of the image
          */

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

@@ -1 +1 @@
-export{U as UiImage}from"./p-37874c44.js";import"./p-864b3ce6.js";
+export{U as UiImage}from"./p-de18b4b5.js";import"./p-381d4568.js";

package/dist/ui-image/p-381d4568.js

@@ -0,0 +1,2 @@
+var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),i=new Map,r=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",u="undefined"!=typeof window?window:{},a=u.document||{head:{}},f={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},h=e=>Promise.resolve(e),m=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),p=!1,d=[],y=[],$=(e,t)=>n=>{e.push(n),p||(p=!0,t&&4&f.l?b(w):f.raf(w))},v=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},w=()=>{v(d),v(y),(p=d.length>0)&&f.raf(w)},b=e=>h().then(e),g=$(y,!0),S={},j=e=>"object"==(e=typeof e)||"function"===e;function k(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>E,map:()=>C,ok:()=>O,unwrap:()=>P,unwrapErr:()=>x});var O=e=>({isOk:!0,isErr:!1,value:e}),E=e=>({isOk:!1,isErr:!0,value:e});function C(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>O(e))):O(n)}if(e.isErr)return E(e.value);throw"should never get here"}var M,P=e=>{if(e.isOk)return e.value;throw e.value},x=e=>{if(e.isErr)return e.value;throw e.value},R=(e,t,...n)=>{let l=null,o=null,s=!1,i=!1;const r=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!j(l))&&(l+=""),s&&i?r[r.length-1].i+=l:r.push(s?T(null,l):l),i=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=T(e,null);return u.u=t,r.length>0&&(u.h=r),u.m=o,u},T=(e,t)=>({l:0,p:e,i:t,$:null,h:null,u:null,m:null}),A={},F=e=>n(e).$hostElement$,H=new WeakMap,L=e=>"sc-"+e.v,N=(e,t,n,l,s,i)=>{if(n!==l){let r=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=U(n),s=U(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("key"===t);else if("ref"===t)l&&l(e);else if(r||"o"!==t[0]||"n"!==t[1]){const o=j(l);if((r||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?r=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!r||4&i||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(u,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(W);t=t.replace(q,""),n&&f.rel(e,t,n,o),l&&f.ael(e,t,l,o)}}},D=/\s/,U=e=>e?e.split(D):[],W="Capture",q=RegExp(W+"$"),G=(e,t,n)=>{const l=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||S,s=t.u||S;for(const e of V(Object.keys(o)))e in s||N(l,e,o[e],void 0,n,t.l);for(const e of V(Object.keys(s)))N(l,e,o[e],s[e],n,t.l)};function V(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var _=!1,z=(e,t,n)=>{const l=t.h[n];let o,s,i=0;if(null!==l.i)o=l.$=a.createTextNode(l.i);else if(o=l.$=a.createElement(l.p),G(null,l,_),l.h)for(i=0;i<l.h.length;++i)s=z(e,l,i),s&&o.appendChild(s);return o["s-hn"]=M,o},B=(e,t,n,l,o,s)=>{let i,r=e;for(;o<=s;++o)l[o]&&(i=z(null,n,o),i&&(l[o].$=i,X(r,i,t)))},I=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;Q(t),e&&e.remove()}}},J=(e,t,n=!1)=>e.p===t.p&&(!!n||e.m===t.m),K=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h,i=t.i;null===i?(G(e,t,_),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,i,r=0,c=0,u=0,a=0,f=t.length-1,h=t[0],m=t[f],p=l.length-1,d=l[0],y=l[p];for(;r<=f&&c<=p;)if(null==h)h=t[++r];else if(null==m)m=t[--f];else if(null==d)d=l[++c];else if(null==y)y=l[--p];else if(J(h,d,o))K(h,d,o),h=t[++r],d=l[++c];else if(J(m,y,o))K(m,y,o),m=t[--f],y=l[--p];else if(J(h,y,o))K(h,y,o),X(e,h.$,m.$.nextSibling),h=t[++r],y=l[--p];else if(J(m,d,o))K(m,d,o),X(e,m.$,h.$),m=t[--f],d=l[++c];else{for(u=-1,a=r;a<=f;++a)if(t[a]&&null!==t[a].m&&t[a].m===d.m){u=a;break}u>=0?(i=t[u],i.p!==d.p?s=z(t&&t[c],n,u):(K(i,d,o),t[u]=void 0,s=i.$),d=l[++c]):(s=z(t&&t[c],n,c),d=l[++c]),s&&X(h.$.parentNode,s,h.$)}r>f?B(e,null==l[p+1]?null:l[p+1].$,n,l,c,p):c>p&&I(t,r,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),B(l,null,t,s,0,s.length-1)):null!==o&&I(o,0,o.length-1)):e.i!==i&&(l.data=i)},Q=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(Q)},X=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),Y=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},Z=(e,t)=>{if(e.l|=16,!(4&e.l))return Y(e,e.j),g((()=>ee(e,t)));e.l|=512},ee=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);return te(void 0,(()=>le(e,n,t)))},te=(e,t)=>ne(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),ne=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,le=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.k;((e,t)=>{var n;const l=L(t),o=r.get(l);if(e=11===e.nodeType?e:a,o)if("string"==typeof o){let s,i=H.get(e=e.head||e);if(i||H.set(e,i=new Set),!i.has(l)){{s=a.createElement("style"),s.innerHTML=o;const t=null!=(n=f.O)?n:k(a);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=c),i&&i.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o])})(e.$hostElement$.getRootNode(),t)})(e);oe(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>se(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},oe=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.C||T(null,null),s=(e=>e&&e.p===A)(t)?t:R(null,null,t);if(M=l.tagName,n&&s.u)for(const e of Object.keys(s.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(s.u[e]=l[e]);s.p=null,s.l|=4,e.C=s,s.$=o.$=l,K(o,s,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},se=e=>{const t=e.$hostElement$,n=e.t,l=e.j;64&e.l||(e.l|=64,ce(t),re(n,"componentDidLoad"),e.M(t),l||ie()),e.S&&(e.S(),e.S=void 0),512&e.l&&b((()=>Z(e,!1))),e.l&=-517},ie=()=>{ce(a.documentElement),b((()=>(e=>{const t=f.ce("appload",{detail:{namespace:"ui-image"}});return e.dispatchEvent(t),t})(u)))},re=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},ce=e=>e.classList.add("hydrated"),ue=(e,t,l)=>{var o,i;const r=e.prototype;if(t.P||t.R||e.watchers){e.watchers&&!t.R&&(t.R=e.watchers);const c=Object.entries(null!=(o=t.P)?o:{});if(c.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(r,e,{get(){return((e,t)=>n(this).T.get(t))(0,e)},set(l){((e,t,l,o)=>{const i=n(e);if(!i)throw Error(`Couldn't find host element for "${o.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const r=i.$hostElement$,c=i.T.get(t),u=i.l,a=i.t;if(l=((e,t)=>null==e||j(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,o.P[t][0]),(!(8&u)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(i.T.set(t,l),a)){if(o.R&&128&u){const e=o.R[t];e&&e.map((e=>{try{a[e](l,c,t)}catch(e){s(e,r)}}))}2==(18&u)&&Z(i,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;r.attributeChangedCallback=function(e,o,s){f.jmp((()=>{var i;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(r.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),r=null==l?void 0:l.l;if(r&&!(8&r)&&128&r&&s!==o){const n=l.t,r=null==(i=t.R)?void 0:i[e];null==r||r.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(i=t.R)?i:{}),...c.filter((([e,t])=>15&t[0])).map((([e,t])=>{const n=t[1]||e;return l.set(n,e),n}))]))}}return e},ae=(e,l={})=>{var o;const h=[],p=l.exclude||[],d=u.customElements,y=a.head,$=y.querySelector("meta[charset]"),v=a.createElement("style"),w=[];let b,g=!0;Object.assign(f,l),f.o=new URL(l.resourcesUrl||"./",a.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{var o;const c={l:l[0],v:l[1],P:l[2],A:l[3]};4&c.l&&(S=!0),c.P=l[2],c.R=null!=(o=l[4])?o:{};const u=c.v,a=class extends HTMLElement{constructor(e){super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,k:n,T:new Map};l.F=new Promise((e=>l.M=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c)}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),b&&(clearTimeout(b),b=null),g?w.push(this):f.jmp((()=>(e=>{if(!(1&f.l)){const t=n(e),l=t.k,o=()=>{};if(1&t.l)(null==t?void 0:t.t)||(null==t?void 0:t.F)&&t.F.then((()=>{}));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){Y(t,t.j=n);break}}l.P&&Object.entries(l.P).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.H){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.H;if(!n)return;const l=i.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(i.set(n,e),e[t])),s)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.L}" was not found`);l.isProxied||(n.R=l.watchers,ue(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o()}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=L(n);if(!r.has(t)){const l=()=>{};((e,t,n)=>{let l=r.get(e);m&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,r.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.j,c=()=>Z(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){f.jmp((()=>(async()=>{if(!(1&f.l)){const e=n(this);(null==e?void 0:e.t)||(null==e?void 0:e.F)&&e.F.then((()=>{}))}})()))}componentOnReady(){return n(this).F}};c.H=e[0],p.includes(u)||d.get(u)||(h.push(u),d.define(u,ue(a,c,1)))}))})),h.length>0&&(S&&(v.textContent+=c),v.textContent+=h.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",v.innerHTML.length)){v.setAttribute("data-styles","");const e=null!=(o=f.O)?o:k(a);null!=e&&v.setAttribute("nonce",e),y.insertBefore(v,$?$.nextSibling:y.firstChild)}g=!1,w.length?w.map((e=>e.connectedCallback())):f.jmp((()=>b=setTimeout(ie,30)))},fe=e=>f.O=e;export{A as H,ae as b,F as g,R as h,h as p,l as r,fe as s}

package/dist/ui-image/p-40c68e79.entry.js

@@ -0,0 +1 @@
+export{U as ui_image}from"./p-de18b4b5.js";import{r as e,h as t,H as n}from"./p-381d4568.js";const o=class{constructor(t){e(this,t),this.structure=void 0,this.width=void 0,this.height=void 0,this.borderRadius=void 0,this.marginBottom=void 0,this.marginTop=void 0,this.marginLeft=void 0,this.marginRight=void 0,this.animation=!0,this.rows=void 0,this.size=void 0,this.color=void 0,this.primaryColor=void 0,this.secondaryColor=void 0}handleStructureChange(e,t){t!==e&&this.handleStructure(e)}handleStructure(e){switch(e){case"logo":return this.renderLogo();case"image":return this.renderImage();case"title":return this.renderTitle();case"text":return this.renderText();case"rectangle":return this.renderRectangle();case"circle":return this.renderCircle();default:return null}}renderLogo(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(this.animation?"Skeleton":"")}))}renderText(){return t("div",{class:"SkeletonContainer"},Array.from({length:this.rows>0?this.rows:1}).map(((e,n)=>t("div",{key:n,class:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(this.animation?"Skeleton":"")}))}render(){let e="";switch(this.structure){case"logo":e=`\n          :host {\n            --emw-skeleton-logo-width: ${this.width};\n            --emw-skeleton-logo-height: ${this.height};\n            --emw-skeleton-logo-border-radius: ${this.borderRadius}px;\n            --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;\n            --emw-skeleton-logo-margin-top: ${this.marginTop}px;\n            --emw-skeleton-logo-margin-left: ${this.marginLeft}px;\n            --emw-skeleton-logo-margin-right: ${this.marginRight}px;\n            --emw-skeleton-logo-background: ${this.color};\n            --emw-skeleton-primary-color: ${this.primaryColor};\n            --emw-skeleton-secondary-color: ${this.secondaryColor};\n          }\n        `;break;case"image":e=`\n          :host {\n            --emw-skeleton-image-width: ${this.width};\n            --emw-skeleton-image-height: ${this.height};\n            --emw-skeleton-image-border-radius: ${this.borderRadius}px;\n            --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;\n            --emw-skeleton-image-margin-top: ${this.marginTop}px;\n            --emw-skeleton-image-margin-left: ${this.marginLeft}px;\n            --emw-skeleton-image-margin-right: ${this.marginRight}px;\n            --emw-skeleton-image-background: ${this.color};\n            --emw-skeleton-primary-color: ${this.primaryColor};\n            --emw-skeleton-secondary-color: ${this.secondaryColor};\n          }\n        `;break;case"title":e=`\n          :host {\n            --emw-skeleton-title-width: ${this.width};\n            --emw-skeleton-title-height: ${this.height};\n            --emw-skeleton-title-border-radius: ${this.borderRadius}px;\n            --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;\n            --emw-skeleton-title-margin-top: ${this.marginTop}px;\n            --emw-skeleton-title-margin-left: ${this.marginLeft}px;\n            --emw-skeleton-title-margin-right: ${this.marginRight}px;\n            --emw-skeleton-title-background: ${this.color};\n            --emw-skeleton-primary-color: ${this.primaryColor};\n            --emw-skeleton-secondary-color: ${this.secondaryColor};\n          }\n        `;break;case"text":e=`\n          :host {\n            --emw-skeleton-text-width: ${this.width};\n            --emw-skeleton-text-height: ${this.height};\n            --emw-skeleton-text-border-radius: ${this.borderRadius}px;\n            --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;\n            --emw-skeleton-text-margin-top: ${this.marginTop}px;\n            --emw-skeleton-text-margin-left: ${this.marginLeft}px;\n            --emw-skeleton-text-margin-right: ${this.marginRight}px;\n            --emw-skeleton-text-background: ${this.color};\n            --emw-skeleton-primary-color: ${this.primaryColor};\n            --emw-skeleton-secondary-color: ${this.secondaryColor};\n          }\n        `;break;case"rectangle":e=`\n          :host {\n            --emw-skeleton-rectangle-width: ${this.width};\n            --emw-skeleton-rectangle-height: ${this.height};\n            --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;\n            --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;\n            --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;\n            --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;\n            --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;\n            --emw-skeleton-rectangle-background: ${this.color};\n            --emw-skeleton-primary-color: ${this.primaryColor};\n            --emw-skeleton-secondary-color: ${this.secondaryColor};\n          }\n        `;break;case"circle":e=`\n          :host {\n            --emw-skeleton-circle-size: ${this.size};\n            --emw-skeleton-circle-background: ${this.color};\n            --emw-skeleton-primary-color: ${this.primaryColor};\n            --emw-skeleton-secondary-color: ${this.secondaryColor};\n          }\n        `;break;default:e=""}return t(n,{key:"3bb792a149db7fe732d5cbfa092cdb4d6ca0689e"},t("style",{key:"a4607599b60659f385ae2660513e38b383739674"},e),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};o.style=":host{display:block;--emw-skeleton-rectangle-background:#c2c2c2;--emw-skeleton-circle-background:#c2c2c2;--emw-skeleton-text-background:#c2c2c2;--emw-skeleton-title-background:#c2c2c2;--emw-skeleton-image-background:#c2c2c2;--emw-skeleton-logo-background:#c2c2c2;--emw-skeleton-primary-color:#e0e0e0;--emw-skeleton-secondary-color:#f0f0f0}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 2px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 5px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, inherit)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";export{o as ui_skeleton}

package/dist/ui-image/p-de18b4b5.js

@@ -0,0 +1 @@
+import{r as i,h as t,H as s,g as e}from"./p-381d4568.js";const n=class{constructor(t){i(this,t),this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.styles=void 0,this.detectDistance="200px",this.imgLoaded=!1,this.shouldLoad=!1}handleSrc(){if(!this.shouldLoad)return;const i=new Image;i.onload=()=>{this.image&&(this.image.src=this.src,this.imgLoaded=!0)},i.src=this.src}componentDidLoad(){"IntersectionObserver"in window?(this.el.__uxComponent=this,window.EMUxObserver||(window.EMUxObserver=new IntersectionObserver((i=>{i.forEach((i=>{if(i.isIntersecting){const t=i.target.__uxComponent;t&&(t.shouldLoad=!0,t.handleSrc()),window.EMUxObserver.unobserve(i.target)}}))}),{rootMargin:this.detectDistance})),window.EMUxObserver.observe(this.el)):(this.shouldLoad=!0,this.handleSrc())}render(){return t(s,{key:"527318220c6b48375943e897fe0e53e0f33e67ed",class:"HostContainer"},!this.imgLoaded&&t("ui-skeleton",{key:"e5c49a781ff2fac5c796cb6a3f8d334dce7be35b",class:"UiContainer",structure:"image",width:"100%",height:"100%"}),t("img",{key:"09dfbf8f52c2c899246590790f2780a84bdeefc3",ref:i=>this.image=i,src:this.shouldLoad?this.src:void 0,onLoad:()=>this.imgLoaded=!0,style:this.styles,class:"UiContainer "+(this.imgLoaded?"Visible":"Hidden"),alt:this.alt,width:this.width,height:this.height,loading:"lazy"}))}get el(){return e(this)}static get watchers(){return{src:["handleSrc"]}}};n.style=".HostContainer{display:block}.UiContainer{height:100%;width:100%;border-radius:inherit}.UiContainer .Image{border-radius:inherit}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}";export{n as U}

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

@@ -1 +1 @@
-import{p as e,b as t}from"./p-864b3ce6.js";export{s as setNonce}from"./p-864b3ce6.js";import{g as a}from"./p-e1255160.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async s=>(await a(),t([["p-9da68072",[[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"]}]]]],s))));
+import{p as r,b as t}from"./p-381d4568.js";export{s as setNonce}from"./p-381d4568.js";import{g as o}from"./p-e1255160.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),r(o)})().then((async r=>(await o(),t([["p-40c68e79",[[0,"ui-image",{src:[1],width:[1],height:[1],alt:[1],styles:[8],detectDistance:[1,"detect-distance"],imgLoaded:[32],shouldLoad:[32]},null,{src:["handleSrc"]}],[0,"ui-skeleton",{structure:[1],width:[1],height:[1],borderRadius:[2,"border-radius"],marginBottom:[2,"margin-bottom"],marginTop:[2,"margin-top"],marginLeft:[2,"margin-left"],marginRight:[2,"margin-right"],animation:[4],rows:[2],size:[1],color:[1],primaryColor:[1,"primary-color"],secondaryColor:[1,"secondary-color"]},null,{structure:["handleStructureChange"]}]]]],r))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/ui-image",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",
@@ -24,6 +24,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@everymatrix/ui-skeleton": "1.61.1"
+    "@everymatrix/ui-skeleton": "1.62.1"
   }
 }

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

@@ -1,10 +0,0 @@
-'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/esm/ui-image.entry.js

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

package/dist/ui-image/p-37874c44.js

@@ -1 +0,0 @@
-import{r as i,h as t,g as s}from"./p-864b3ce6.js";const e=class{constructor(t){i(this,t),this.src=void 0,this.width=void 0,this.height=void 0,this.alt=void 0,this.imgClass="",this.styles=void 0,this.detectDistance="200px",this.imgLoaded=!1,this.shouldLoad=!1}handleSrc(){if(!this.shouldLoad)return;const i=new Image;i.src=this.src,i.onload=()=>{this.image&&(this.image.src=this.src,this.imgLoaded=!0,this.el.dispatchEvent(new CustomEvent("load",{bubbles:!0})))}}componentDidLoad(){"IntersectionObserver"in window?(this.el.__uxComponent=this,window.EMUxObserver||(window.EMUxObserver=new IntersectionObserver((i=>{i.forEach((i=>{if(i.isIntersecting){const t=i.target.__uxComponent;t&&(t.shouldLoad=!0,t.handleSrc()),window.EMUxObserver.unobserve(i.target)}}))}),{rootMargin:this.detectDistance})),window.EMUxObserver.observe(this.el)):(this.shouldLoad=!0,this.handleSrc())}render(){return t("img",{key:"2bb4dc391fc2f753514103e91c0abf065de3236a",ref:i=>this.image=i,style:this.styles,class:`${this.imgClass} ${this.imgLoaded?"Visible":"Hidden"}`,alt:this.alt,width:this.width,height:this.height,loading:"lazy"})}get el(){return s(this)}static get watchers(){return{src:["handleSrc"]}}};e.style=":host{display:block}.Hidden{opacity:0;transition:opacity 0.5s ease-in-out}.Visible{opacity:1;transition:opacity 0.5s ease-in-out}";export{e as U}

package/dist/ui-image/p-864b3ce6.js

@@ -1,2 +0,0 @@
-var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>(0,console.error)(e,t),s=new Map,i=new Map,r="slot-fb{display:contents}slot-fb[hidden]{display:none}",c="undefined"!=typeof window?window:{},u=c.document||{head:{}},a={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},f=e=>Promise.resolve(e),h=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),m=!1,d=[],p=[],y=(e,t)=>n=>{e.push(n),m||(m=!0,t&&4&a.l?w(v):a.raf(v))},$=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){o(e)}e.length=0},v=()=>{$(d),$(p),(m=d.length>0)&&a.raf(v)},w=e=>f().then(e),b=y(p,!0),g={},S=e=>"object"==(e=typeof e)||"function"===e;function j(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>O,map:()=>E,ok:()=>k,unwrap:()=>M,unwrapErr:()=>P});var k=e=>({isOk:!0,isErr:!1,value:e}),O=e=>({isOk:!1,isErr:!0,value:e});function E(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>k(e))):k(n)}if(e.isErr)return O(e.value);throw"should never get here"}var C,M=e=>{if(e.isOk)return e.value;throw e.value},P=e=>{if(e.isErr)return e.value;throw e.value},x=(e,t,...n)=>{let l=null,o=null,s=!1,i=!1;const r=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!S(l))&&(l+=""),s&&i?r[r.length-1].i+=l:r.push(s?T(null,l):l),i=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=T(e,null);return u.u=t,r.length>0&&(u.h=r),u.m=o,u},T=(e,t)=>({l:0,p:e,i:t,$:null,h:null,u:null,m:null}),A={},L=e=>n(e).$hostElement$,N=new WeakMap,R=e=>"sc-"+e.v,D=(e,t,n,l,o,s)=>{if(n!==l){let i=((e,t)=>t in e)(e,t);if(t.toLowerCase(),"class"===t){const t=e.classList,o=H(n),s=H(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("style"===t){for(const t in n)l&&null!=l[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in l)n&&l[t]===n[t]||(t.includes("-")?e.style.setProperty(t,l[t]):e.style[t]=l[t])}else if("key"===t);else if("ref"===t)l&&l(e);else{const r=S(l);if((i||r&&null!==l)&&!o)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&s||o)&&!r&&e.setAttribute(t,l=!0===l?"":l)}}},F=/\s/,H=e=>e?e.split(F):[],U=(e,t,n)=>{const l=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||g,s=t.u||g;for(const e of W(Object.keys(o)))e in s||D(l,e,o[e],void 0,n,t.l);for(const e of W(Object.keys(s)))D(l,e,o[e],s[e],n,t.l)};function W(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var q=!1,G=(e,t,n)=>{const l=t.h[n];let o,s,i=0;if(o=l.$=u.createElement(l.p),U(null,l,q),l.h)for(i=0;i<l.h.length;++i)s=G(e,l,i),s&&o.appendChild(s);return o["s-hn"]=C,o},V=(e,t,n,l,o,s)=>{let i,r=e;for(;o<=s;++o)l[o]&&(i=G(null,n,o),i&&(l[o].$=i,J(r,i,t)))},_=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;I(t),e&&e.remove()}}},z=(e,t,n=!1)=>e.p===t.p&&(!!n||e.m===t.m),B=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h;U(e,t,q),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,i,r=0,c=0,u=0,a=0,f=t.length-1,h=t[0],m=t[f],d=l.length-1,p=l[0],y=l[d];for(;r<=f&&c<=d;)if(null==h)h=t[++r];else if(null==m)m=t[--f];else if(null==p)p=l[++c];else if(null==y)y=l[--d];else if(z(h,p,o))B(h,p,o),h=t[++r],p=l[++c];else if(z(m,y,o))B(m,y,o),m=t[--f],y=l[--d];else if(z(h,y,o))B(h,y,o),J(e,h.$,m.$.nextSibling),h=t[++r],y=l[--d];else if(z(m,p,o))B(m,p,o),J(e,m.$,h.$),m=t[--f],p=l[++c];else{for(u=-1,a=r;a<=f;++a)if(t[a]&&null!==t[a].m&&t[a].m===p.m){u=a;break}u>=0?(i=t[u],i.p!==p.p?s=G(t&&t[c],n,u):(B(i,p,o),t[u]=void 0,s=i.$),p=l[++c]):(s=G(t&&t[c],n,c),p=l[++c]),s&&J(h.$.parentNode,s,h.$)}r>f?V(e,null==l[d+1]?null:l[d+1].$,n,l,c,d):c>d&&_(t,r,f)})(l,o,t,s,n):null!==s?V(l,null,t,s,0,s.length-1):null!==o&&_(o,0,o.length-1)},I=e=>{e.u&&e.u.ref&&e.u.ref(null),e.h&&e.h.map(I)},J=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),K=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},Q=(e,t)=>{if(e.l|=16,!(4&e.l))return K(e,e.j),b((()=>X(e,t)));e.l|=512},X=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);return Y(void 0,(()=>ee(e,n,t)))},Y=(e,t)=>Z(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),Z=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,ee=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.k;((e,t)=>{var n;const l=R(t),o=i.get(l);if(e=11===e.nodeType?e:u,o)if("string"==typeof o){let s,i=N.get(e=e.head||e);if(i||N.set(e,i=new Set),!i.has(l)){{s=u.createElement("style"),s.innerHTML=o;const t=null!=(n=a.O)?n:j(u);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=r),i&&i.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o])})(e.$hostElement$.getRootNode(),t)})(e);te(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>ne(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},te=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.C||T(null,null),s=(e=>e&&e.p===A)(t)?t:x(null,null,t);if(C=l.tagName,n&&s.u)for(const e of Object.keys(s.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(s.u[e]=l[e]);s.p=null,s.l|=4,e.C=s,s.$=o.$=l,B(o,s,n)})(e,t,l)}catch(t){o(t,e.$hostElement$)}return null},ne=e=>{const t=e.$hostElement$,n=e.t,l=e.j;64&e.l||(e.l|=64,se(t),oe(n,"componentDidLoad"),e.M(t),l||le()),e.S&&(e.S(),e.S=void 0),512&e.l&&w((()=>Q(e,!1))),e.l&=-517},le=()=>{se(u.documentElement),w((()=>(e=>{const t=a.ce("appload",{detail:{namespace:"ui-image"}});return e.dispatchEvent(t),t})(c)))},oe=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){o(e)}},se=e=>e.classList.add("hydrated"),ie=(e,t,l)=>{var s,i;const r=e.prototype;if(t.P||t.T||e.watchers){e.watchers&&!t.T&&(t.T=e.watchers);const c=Object.entries(null!=(s=t.P)?s:{});if(c.map((([e,[s]])=>{(31&s||2&l&&32&s)&&Object.defineProperty(r,e,{get(){return((e,t)=>n(this).A.get(t))(0,e)},set(l){((e,t,l,s)=>{const i=n(e);if(!i)throw Error(`Couldn't find host element for "${s.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const r=i.$hostElement$,c=i.A.get(t),u=i.l,a=i.t;if(l=((e,t)=>null==e||S(e)?e:1&t?e+"":e)(l,s.P[t][0]),(!(8&u)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(i.A.set(t,l),a)){if(s.T&&128&u){const e=s.T[t];e&&e.map((e=>{try{a[e](l,c,t)}catch(e){o(e,r)}}))}2==(18&u)&&Q(i,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;r.attributeChangedCallback=function(e,o,s){a.jmp((()=>{var i;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(r.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),r=null==l?void 0:l.l;if(r&&!(8&r)&&128&r&&s!==o){const n=l.t,r=null==(i=t.T)?void 0:i[e];null==r||r.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(i=t.T)?i:{}),...c.filter((([e,t])=>15&t[0])).map((([e,t])=>{const n=t[1]||e;return l.set(n,e),n}))]))}}return e},re=(e,l={})=>{var f;const m=[],d=l.exclude||[],p=c.customElements,y=u.head,$=y.querySelector("meta[charset]"),v=u.createElement("style"),w=[];let b,g=!0;Object.assign(a,l),a.o=new URL(l.resourcesUrl||"./",u.baseURI).href;let S=!1;if(e.map((e=>{e[1].map((l=>{var r;const c={l:l[0],v:l[1],P:l[2],L:l[3]};4&c.l&&(S=!0),c.P=l[2],c.T=null!=(r=l[4])?r:{};const u=c.v,f=class extends HTMLElement{constructor(e){super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,k:n,A:new Map};l.N=new Promise((e=>l.M=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c)}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),b&&(clearTimeout(b),b=null),g?w.push(this):a.jmp((()=>(e=>{if(!(1&a.l)){const t=n(e),l=t.k,r=()=>{};if(1&t.l)(null==t?void 0:t.t)||(null==t?void 0:t.N)&&t.N.then((()=>{}));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){K(t,t.j=n);break}}l.P&&Object.entries(l.P).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.R){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.R;if(!n)return;const l=s.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(s.set(n,e),e[t])),o)
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.D}" was not found`);l.isProxied||(n.T=l.watchers,ie(l,n,2),l.isProxied=!0);const i=()=>{};t.l|=8;try{new l(t)}catch(e){o(e)}t.l&=-9,t.l|=128,i()}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=R(n);if(!i.has(t)){const l=()=>{};((e,t,n)=>{let l=i.get(e);h&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,i.set(e,l)})(t,e,!!(1&n.l)),l()}}}const r=t.j,c=()=>Q(t,!0);r&&r["s-rc"]?r["s-rc"].push(c):c()})(e,t,l)}r()}})(this)))}disconnectedCallback(){a.jmp((()=>(async()=>{if(!(1&a.l)){const e=n(this);(null==e?void 0:e.t)||(null==e?void 0:e.N)&&e.N.then((()=>{}))}})()))}componentOnReady(){return n(this).N}};c.R=e[0],d.includes(u)||p.get(u)||(m.push(u),p.define(u,ie(f,c,1)))}))})),m.length>0&&(S&&(v.textContent+=r),v.textContent+=m.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",v.innerHTML.length)){v.setAttribute("data-styles","");const e=null!=(f=a.O)?f:j(u);null!=e&&v.setAttribute("nonce",e),y.insertBefore(v,$?$.nextSibling:y.firstChild)}g=!1,w.length?w.map((e=>e.connectedCallback())):a.jmp((()=>b=setTimeout(le,30)))},ce=e=>a.O=e;export{re as b,L as g,x as h,f as p,l as r,ce as s}

package/dist/ui-image/p-9da68072.entry.js

@@ -1 +0,0 @@
-export{U as ui_image}from"./p-37874c44.js";import"./p-864b3ce6.js";