@nuralyui/image 0.0.3 → 0.0.5

package/image.component.d.ts

@@ -2,14 +2,18 @@ import { LitElement, PropertyValues } from "lit";
 export declare class HyImage extends LitElement {
     static styles: import("lit").CSSResult;
     src: string;
-    fallback: null;
+    fallback: string;
     width: string;
     height: string;
     alt: string;
+    previewable: boolean;
     image: string;
+    showPreview: boolean;
     defaultFallBack: string;
     willUpdate(_changedProperties: PropertyValues): void;
     private handleError;
+    private _showPreview;
+    private _closePreview;
     render(): import("lit").TemplateResult<1>;
 }
 //# sourceMappingURL=image.component.d.ts.map

package/image.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.component.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGvD,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAU;IAG9B,GAAG,EAAE,MAAM,CAAA;IAGX,QAAQ,OAAK;IAGb,KAAK,SAAO;IAGZ,MAAM,SAAO;IAGb,GAAG,SAAG;IAGN,KAAK,SAAG;IACR,eAAe,SAAqsC;IAG3sC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAO7D,OAAO,CAAC,WAAW;IAgBV,MAAM;CAYlB"}
+{"version":3,"file":"image.component.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIvD,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAU;IAGhC,GAAG,EAAG,MAAM,CAAC;IAGb,QAAQ,EAAI,MAAM,CAAC;IAGnB,KAAK,SAAU;IAGf,MAAM,SAAU;IAGhB,GAAG,SAAM;IAGT,WAAW,UAAS;IAGpB,KAAK,SAAM;IAGX,WAAW,UAAS;IAEpB,eAAe,SAAwsC;IAE9sC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAM7D,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAIZ,MAAM;CAoBhB"}

package/image.component.js

@@ -10,11 +10,12 @@ import styles from './image.style.js';
 let HyImage = class HyImage extends LitElement {
     constructor() {
         super(...arguments);
-        this.fallback = null;
         this.width = 'auto';
         this.height = 'auto';
         this.alt = '';
+        this.previewable = false;
         this.image = '';
+        this.showPreview = false;
         this.defaultFallBack = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg==';
     }
     willUpdate(_changedProperties) {
@@ -37,16 +38,33 @@ let HyImage = class HyImage extends LitElement {
             this.image = this.defaultFallBack;
         }
     }
+    _showPreview() {
+        if (this.previewable) {
+            this.showPreview = true;
+        }
+    }
+    _closePreview() {
+        this.showPreview = false;
+    }
     render() {
         return html `
-        <img 
-        src=${this.image}
-        @error=${this.handleError}
-        style="width:${this.width}; height:${this.height}"
-        alt=${this.alt}
+      <div class="image-container">
+        <img
+          src=${this.image}
+          @error=${this.handleError}
+          @click=${this._showPreview}
+          style="width:${this.width}; height:${this.height}; cursor: ${this.previewable ? 'pointer' : 'default'}"
+          alt=${this.alt}
         />
-        
-        `;
+
+        ${this.showPreview ? html `
+          <div class="preview-modal" @click=${this._closePreview}>
+            <button class="preview-close">×</button>
+            <img src="${this.image}" alt="${this.alt}" />
+          </div>
+        ` : ''}
+      </div>
+    `;
     }
 };
 HyImage.styles = styles;
@@ -54,7 +72,7 @@ __decorate([
     property()
 ], HyImage.prototype, "src", void 0);
 __decorate([
-    property()
+    property({ type: String })
 ], HyImage.prototype, "fallback", void 0);
 __decorate([
     property()
@@ -65,9 +83,15 @@ __decorate([
 __decorate([
     property()
 ], HyImage.prototype, "alt", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyImage.prototype, "previewable", void 0);
 __decorate([
     state()
 ], HyImage.prototype, "image", void 0);
+__decorate([
+    state()
+], HyImage.prototype, "showPreview", void 0);
 HyImage = __decorate([
     customElement('hy-image')
 ], HyImage);

package/image.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.component.js","sourceRoot":"","sources":["../../../src/components/image/image.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QAOI,aAAQ,GAAC,IAAI,CAAA;QAGb,UAAK,GAAC,MAAM,CAAA;QAGZ,WAAM,GAAC,MAAM,CAAA;QAGb,QAAG,GAAC,EAAE,CAAA;QAGN,UAAK,GAAC,EAAE,CAAA;QACR,oBAAe,GAAC,osCAAosC,CAAA;IAsCxtC,CAAC;IAnCY,UAAU,CAAC,kBAAkC;QAClD,IAAG,kBAAkB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAC;YACnE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SACzB;IACL,CAAC;IAGO,WAAW;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACJ,KAAK,EAAC,uBAAuB,IAAI,CAAC,KAAK,EAAE;aAC5C;SACJ,CAAC,CAAC,CAAA;QACH,IAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,IAAE,IAAI,CAAC,eAAe,EAAC;YAChF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAA;SAC7B;aACI,IAAG,IAAI,CAAC,KAAK,IAAE,IAAI,CAAC,eAAe,EAAC;YACrC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAA;SACpC;IACL,CAAC;IAEQ,MAAM;QACX,OAAO,IAAI,CAAA;;cAEL,IAAI,CAAC,KAAK;iBACP,IAAI,CAAC,WAAW;uBACV,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,MAAM;cAC1C,IAAI,CAAC,GAAG;;;SAGb,CAAA;IACL,CAAC;CAEJ,CAAA;AAzDiB,cAAM,GAAG,MAAO,CAAA;AAG9B;IADC,QAAQ,EAAE;oCACA;AAGX;IADC,QAAQ,EAAE;yCACE;AAGb;IADC,QAAQ,EAAE;sCACC;AAGZ;IADC,QAAQ,EAAE;uCACE;AAGb;IADC,QAAQ,EAAE;oCACL;AAGN;IADC,KAAK,EAAE;sCACA;AAnBC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA0DnB;SA1DY,OAAO","sourcesContent":["import { LitElement, PropertyValues, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport styles from './image.style.js';\n@customElement('hy-image')\nexport class HyImage extends LitElement{\n  static override styles = styles;\n\n    @property()\n    src!:string\n\n    @property()\n    fallback=null\n    \n    @property()\n    width='auto'\n\n    @property()\n    height='auto'\n\n    @property()\n    alt=''\n\n    @state()\n    image=''\n    defaultFallBack='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg=='\n\n\n    override willUpdate(_changedProperties: PropertyValues): void {\n        if(_changedProperties.has('fallback') || _changedProperties.has('src')){\n            this.image = this.src;\n        }\n    }\n\n    \n    private handleError(){\n        this.dispatchEvent(new CustomEvent('onError', {\n            bubbles: true,\n            composed: true,\n            detail: {\n                error:`error loading image ${this.image}`\n            }\n        }))\n        if(this.fallback && this.image!== this.fallback && this.image!=this.defaultFallBack){\n            this.image = this.fallback\n        }\n        else if(this.image!=this.defaultFallBack){\n            this.image = this.defaultFallBack\n        }\n    }\n\n    override render(){\n        return html`\n        <img \n        src=${this.image}\n        @error=${this.handleError}\n        style=\"width:${this.width}; height:${this.height}\"\n        alt=${this.alt}\n        />\n        \n        `\n    }\n\n}"]}
+{"version":3,"file":"image.component.js","sourceRoot":"","sources":["../../../src/components/image/image.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAGtC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QAUE,UAAK,GAAG,MAAM,CAAC;QAGf,WAAM,GAAG,MAAM,CAAC;QAGhB,QAAG,GAAG,EAAE,CAAC;QAGT,gBAAW,GAAG,KAAK,CAAC;QAGpB,UAAK,GAAG,EAAE,CAAC;QAGX,gBAAW,GAAG,KAAK,CAAC;QAEpB,oBAAe,GAAG,osCAAosC,CAAC;IAuDztC,CAAC;IArDU,UAAU,CAAC,kBAAkC;QACpD,IAAI,kBAAkB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;SACvB;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE;YAC5C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,KAAK,EAAE,uBAAuB,IAAI,CAAC,KAAK,EAAE;aAC3C;SACF,CAAC,CAAC,CAAC;QAEJ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,EAAE;YACvF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;SAC5B;aACI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,eAAe,EAAE;YAC3C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC;SACnC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,KAAK;mBACP,IAAI,CAAC,WAAW;mBAChB,IAAI,CAAC,YAAY;yBACX,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBAC/F,IAAI,CAAC,GAAG;;;UAGd,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;8CACa,IAAI,CAAC,aAAa;;wBAExC,IAAI,CAAC,KAAK,UAAU,IAAI,CAAC,GAAG;;SAE3C,CAAC,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;CACF,CAAA;AAjFiB,cAAM,GAAG,MAAO,CAAA;AAGhC;IADC,QAAQ,EAAE;oCACE;AAGb;IADC,QAAQ,CAAC,EAAC,IAAI,EAAG,MAAM,EAAC,CAAC;yCACP;AAGnB;IADC,QAAQ,EAAE;sCACI;AAGf;IADC,QAAQ,EAAE;uCACK;AAGhB;IADC,QAAQ,EAAE;oCACF;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACR;AAGpB;IADC,KAAK,EAAE;sCACG;AAGX;IADC,KAAK,EAAE;4CACY;AAzBT,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAkFnB;SAlFY,OAAO","sourcesContent":["import { LitElement, PropertyValues, html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport styles from './image.style.js';\n\n@customElement('hy-image')\nexport class HyImage extends LitElement {\n  static override styles = styles;\n\n  @property()\n  src!: string;\n\n  @property({type : String})\n  fallback! : string;\n\n  @property()\n  width = 'auto';\n\n  @property()\n  height = 'auto';\n\n  @property()\n  alt = '';\n\n  @property({ type: Boolean })\n  previewable = false;\n\n  @state()\n  image = '';\n\n  @state()\n  showPreview = false;\n\n  defaultFallBack = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg==';\n\n  override willUpdate(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('fallback') || _changedProperties.has('src')) {\n      this.image = this.src;\n    }\n  }\n\n  private handleError() {\n    this.dispatchEvent(new CustomEvent('onError', {\n      bubbles: true,\n      composed: true,\n      detail: {\n        error: `error loading image ${this.image}`\n      }\n    }));\n\n    if (this.fallback && this.image !== this.fallback && this.image != this.defaultFallBack) {\n      this.image = this.fallback;\n    }\n    else if (this.image != this.defaultFallBack) {\n      this.image = this.defaultFallBack;\n    }\n  }\n\n  private _showPreview() {\n    if (this.previewable) {\n      this.showPreview = true;\n    }\n  }\n\n  private _closePreview() {\n    this.showPreview = false;\n  }\n\n  override render() {\n    return html`\n      <div class=\"image-container\">\n        <img\n          src=${this.image}\n          @error=${this.handleError}\n          @click=${this._showPreview}\n          style=\"width:${this.width}; height:${this.height}; cursor: ${this.previewable ? 'pointer' : 'default'}\"\n          alt=${this.alt}\n        />\n\n        ${this.showPreview ? html`\n          <div class=\"preview-modal\" @click=${this._closePreview}>\n            <button class=\"preview-close\">×</button>\n            <img src=\"${this.image}\" alt=\"${this.alt}\" />\n          </div>\n        ` : ''}\n      </div>\n    `;\n  }\n}"]}

package/image.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.style.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":";AAEA,wBAOC"}
+{"version":3,"file":"image.style.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":";AAEA,wBAgFC"}

package/image.style.js

@@ -6,5 +6,78 @@ img{
     border-bottom-left-radius: var(--hybrid-image-border-bottom-left-radius,var(--hybrid-image-local-border-bottom-left-radius));
     border-bottom-right-radius: var(--hybrid-image-border-bottom-right-radius,var(--hybrid-image-local-border-bottom-right-radius));
 }
+.image-container {
+    position: relative;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+  }
+
+  .preview-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    animation: fadeIn 0.3s ease;
+  }
+
+  .preview-modal img {
+    max-width: 90%;
+    max-height: 90%;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    animation: zoomIn 0.3s ease;
+  }
+
+  .preview-close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: 50%;
+    color: white;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    outline: none;
+    transition: background-color 0.3s;
+  }
+
+  .preview-close:hover {
+    background: rgba(255, 255, 255, 0.4);
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes zoomIn {
+    from {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
 `;
 //# sourceMappingURL=image.style.js.map

package/image.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.style.js","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAgB,GAAG,CAAA;;;;;;;CAOlB,CAAA","sourcesContent":["import { css } from \"lit\";\n\nexport  default css`\nimg{\n    border-top-left-radius:var(--hybrid-image-border-top-left-radius,var(--hybrid-image-local-border-top-left-radius)) ;\n    border-top-right-radius: var(--hybrid-image-border-top-right-radius,var(--hybrid-image-local-border-top-right-radius));\n    border-bottom-left-radius: var(--hybrid-image-border-bottom-left-radius,var(--hybrid-image-local-border-bottom-left-radius));\n    border-bottom-right-radius: var(--hybrid-image-border-bottom-right-radius,var(--hybrid-image-local-border-bottom-right-radius));\n}\n`"]}
+{"version":3,"file":"image.style.js","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAgB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFlB,CAAA","sourcesContent":["import { css } from \"lit\";\n\nexport  default css`\nimg{\n    border-top-left-radius:var(--hybrid-image-border-top-left-radius,var(--hybrid-image-local-border-top-left-radius)) ;\n    border-top-right-radius: var(--hybrid-image-border-top-right-radius,var(--hybrid-image-local-border-top-right-radius));\n    border-bottom-left-radius: var(--hybrid-image-border-bottom-left-radius,var(--hybrid-image-local-border-bottom-left-radius));\n    border-bottom-right-radius: var(--hybrid-image-border-bottom-right-radius,var(--hybrid-image-local-border-bottom-right-radius));\n}\n.image-container {\n    position: relative;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n  }\n\n  .preview-modal {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: rgba(0, 0, 0, 0.7);\n    z-index: 1000;\n    animation: fadeIn 0.3s ease;\n  }\n\n  .preview-modal img {\n    max-width: 90%;\n    max-height: 90%;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    border-radius: 4px;\n    animation: zoomIn 0.3s ease;\n  }\n\n  .preview-close {\n    position: absolute;\n    top: 20px;\n    right: 20px;\n    width: 40px;\n    height: 40px;\n    background: rgba(255, 255, 255, 0.2);\n    border: none;\n    border-radius: 50%;\n    color: white;\n    font-size: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    outline: none;\n    transition: background-color 0.3s;\n  }\n\n  .preview-close:hover {\n    background: rgba(255, 255, 255, 0.4);\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes zoomIn {\n    from {\n      transform: scale(0.9);\n      opacity: 0;\n    }\n    to {\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n`"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/image",
-    "version": "0.0.3",
+    "version": "0.0.5",
     "description": "",
     "main": "index.js",
     "type": "module",

package/react.d.ts

@@ -0,0 +1,307 @@
+export declare const HyImage: import("@lit-labs/react").ReactWebComponent<{
+    accessKey: string;
+    readonly accessKeyLabel: string;
+    autocapitalize: string;
+    dir: string;
+    draggable: boolean;
+    hidden: boolean;
+    innerText: string;
+    lang: string;
+    readonly offsetHeight: number;
+    readonly offsetLeft: number;
+    readonly offsetParent: Element | null;
+    readonly offsetTop: number;
+    readonly offsetWidth: number;
+    outerText: string;
+    spellcheck: boolean;
+    title: string;
+    translate: boolean;
+    attachInternals(): ElementInternals;
+    click(): void;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+    removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+    readonly attributes: NamedNodeMap;
+    readonly classList: DOMTokenList;
+    className: string;
+    readonly clientHeight: number;
+    readonly clientLeft: number;
+    readonly clientTop: number;
+    readonly clientWidth: number;
+    id: string;
+    readonly localName: string;
+    readonly namespaceURI: string | null;
+    onfullscreenchange: ((this: Element, ev: Event) => any) | null;
+    onfullscreenerror: ((this: Element, ev: Event) => any) | null;
+    outerHTML: string;
+    readonly ownerDocument: Document;
+    readonly part: DOMTokenList;
+    readonly prefix: string | null;
+    readonly scrollHeight: number;
+    scrollLeft: number;
+    scrollTop: number;
+    readonly scrollWidth: number;
+    readonly shadowRoot: ShadowRoot | null;
+    slot: string;
+    readonly tagName: string;
+    attachShadow(init: ShadowRootInit): ShadowRoot;
+    closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
+    closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
+    closest<E extends Element = Element>(selectors: string): E | null;
+    getAttribute(qualifiedName: string): string | null;
+    getAttributeNS(namespace: string | null, localName: string): string | null;
+    getAttributeNames(): string[];
+    getAttributeNode(qualifiedName: string): Attr | null;
+    getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+    getBoundingClientRect(): DOMRect;
+    getClientRects(): DOMRectList;
+    getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+    getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
+    getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
+    getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+    getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+    hasAttribute(qualifiedName: string): boolean;
+    hasAttributeNS(namespace: string | null, localName: string): boolean;
+    hasAttributes(): boolean;
+    hasPointerCapture(pointerId: number): boolean;
+    insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+    insertAdjacentHTML(position: InsertPosition, text: string): void;
+    insertAdjacentText(where: InsertPosition, data: string): void;
+    matches(selectors: string): boolean;
+    releasePointerCapture(pointerId: number): void;
+    removeAttribute(qualifiedName: string): void;
+    removeAttributeNS(namespace: string | null, localName: string): void;
+    removeAttributeNode(attr: Attr): Attr;
+    requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
+    requestPointerLock(): void;
+    scroll(options?: ScrollToOptions | undefined): void;
+    scroll(x: number, y: number): void;
+    scrollBy(options?: ScrollToOptions | undefined): void;
+    scrollBy(x: number, y: number): void;
+    scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
+    scrollTo(options?: ScrollToOptions | undefined): void;
+    scrollTo(x: number, y: number): void;
+    setAttribute(qualifiedName: string, value: string): void;
+    setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
+    setAttributeNode(attr: Attr): Attr | null;
+    setAttributeNodeNS(attr: Attr): Attr | null;
+    setPointerCapture(pointerId: number): void;
+    toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
+    webkitMatchesSelector(selectors: string): boolean;
+    readonly baseURI: string;
+    readonly childNodes: NodeListOf<ChildNode>;
+    readonly firstChild: ChildNode | null;
+    readonly isConnected: boolean;
+    readonly lastChild: ChildNode | null;
+    readonly nextSibling: ChildNode | null;
+    readonly nodeName: string;
+    readonly nodeType: number;
+    nodeValue: string | null;
+    readonly parentElement: HTMLElement | null;
+    readonly parentNode: ParentNode | null;
+    readonly previousSibling: ChildNode | null;
+    textContent: string | null;
+    appendChild<T extends Node>(node: T): T;
+    cloneNode(deep?: boolean | undefined): Node;
+    compareDocumentPosition(other: Node): number;
+    contains(other: Node | null): boolean;
+    getRootNode(options?: GetRootNodeOptions | undefined): Node;
+    hasChildNodes(): boolean;
+    insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
+    isDefaultNamespace(namespace: string | null): boolean;
+    isEqualNode(otherNode: Node | null): boolean;
+    isSameNode(otherNode: Node | null): boolean;
+    lookupNamespaceURI(prefix: string | null): string | null;
+    lookupPrefix(namespace: string | null): string | null;
+    normalize(): void;
+    removeChild<T_2 extends Node>(child: T_2): T_2;
+    replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
+    readonly ATTRIBUTE_NODE: number;
+    readonly CDATA_SECTION_NODE: number;
+    readonly COMMENT_NODE: number;
+    readonly DOCUMENT_FRAGMENT_NODE: number;
+    readonly DOCUMENT_NODE: number;
+    readonly DOCUMENT_POSITION_CONTAINED_BY: number;
+    readonly DOCUMENT_POSITION_CONTAINS: number;
+    readonly DOCUMENT_POSITION_DISCONNECTED: number;
+    readonly DOCUMENT_POSITION_FOLLOWING: number;
+    readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
+    readonly DOCUMENT_POSITION_PRECEDING: number;
+    readonly DOCUMENT_TYPE_NODE: number;
+    readonly ELEMENT_NODE: number;
+    readonly ENTITY_NODE: number;
+    readonly ENTITY_REFERENCE_NODE: number;
+    readonly NOTATION_NODE: number;
+    readonly PROCESSING_INSTRUCTION_NODE: number;
+    readonly TEXT_NODE: number;
+    dispatchEvent(event: Event): boolean;
+    ariaAtomic: string | null;
+    ariaAutoComplete: string | null;
+    ariaBusy: string | null;
+    ariaChecked: string | null;
+    ariaColCount: string | null;
+    ariaColIndex: string | null;
+    ariaColSpan: string | null;
+    ariaCurrent: string | null;
+    ariaDisabled: string | null;
+    ariaExpanded: string | null;
+    ariaHasPopup: string | null;
+    ariaHidden: string | null;
+    ariaKeyShortcuts: string | null;
+    ariaLabel: string | null;
+    ariaLevel: string | null;
+    ariaLive: string | null;
+    ariaModal: string | null;
+    ariaMultiLine: string | null;
+    ariaMultiSelectable: string | null;
+    ariaOrientation: string | null;
+    ariaPlaceholder: string | null;
+    ariaPosInSet: string | null;
+    ariaPressed: string | null;
+    ariaReadOnly: string | null;
+    ariaRequired: string | null;
+    ariaRoleDescription: string | null;
+    ariaRowCount: string | null;
+    ariaRowIndex: string | null;
+    ariaRowSpan: string | null;
+    ariaSelected: string | null;
+    ariaSetSize: string | null;
+    ariaSort: string | null;
+    ariaValueMax: string | null;
+    ariaValueMin: string | null;
+    ariaValueNow: string | null;
+    ariaValueText: string | null;
+    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+    getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
+    after(...nodes: (string | Node)[]): void;
+    before(...nodes: (string | Node)[]): void;
+    remove(): void;
+    replaceWith(...nodes: (string | Node)[]): void;
+    innerHTML: string;
+    readonly nextElementSibling: Element | null;
+    readonly previousElementSibling: Element | null;
+    readonly childElementCount: number;
+    readonly children: HTMLCollection;
+    readonly firstElementChild: Element | null;
+    readonly lastElementChild: Element | null;
+    append(...nodes: (string | Node)[]): void;
+    prepend(...nodes: (string | Node)[]): void;
+    querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
+    querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
+    querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
+    querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
+    querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
+    querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
+    replaceChildren(...nodes: (string | Node)[]): void;
+    readonly assignedSlot: HTMLSlotElement | null;
+    oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+    oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+    onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+    readonly style: CSSStyleDeclaration;
+    contentEditable: string;
+    enterKeyHint: string;
+    inputMode: string;
+    readonly isContentEditable: boolean;
+    onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+    onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+    oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onerror: OnErrorEventHandler;
+    onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+    onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+    ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
+    onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+    onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
+    onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+    onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+    autofocus: boolean;
+    readonly dataset: DOMStringMap;
+    nonce?: string | undefined;
+    tabIndex: number;
+    blur(): void;
+    focus(options?: FocusOptions | undefined): void;
+}, {
+    load: string;
+    error: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/image/react.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQlB,CAAC"}

package/react.js

@@ -0,0 +1,13 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+export const HyImage = createComponent({
+    tagName: 'hy-image',
+    elementClass: class extends HTMLElement {
+    },
+    react: React,
+    events: {
+        load: 'load',
+        error: 'error',
+    },
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/image/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,KAAM,SAAQ,WAAW;KAAG;IAC1C,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\n\nexport const HyImage = createComponent({\n  tagName: 'hy-image',\n  elementClass: class extends HTMLElement {},\n  react: React,\n  events: {\n    load: 'load',\n    error: 'error',\n  },\n});\n"]}