@nuralyui/image 0.0.2 → 0.0.4

package/image.component.d.ts

@@ -1,14 +1,19 @@
 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,EAAC,cAAc,EAAO,MAAM,KAAK,CAAC;AAGrD,qBACa,OAAQ,SAAQ,UAAU;IAGnC,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

@@ -6,14 +6,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+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) {
@@ -36,23 +38,41 @@ 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;
 __decorate([
     property()
 ], HyImage.prototype, "src", void 0);
 __decorate([
-    property()
+    property({ type: String })
 ], HyImage.prototype, "fallback", void 0);
 __decorate([
     property()
@@ -63,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,EAAgB,IAAI,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAGnE,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QAMI,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;AAtDG;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;AAlBC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAyDnB;SAzDY,OAAO","sourcesContent":["import { LitElement,PropertyValues,html } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\n@customElement('hy-image')\nexport class HyImage extends LitElement{\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

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=image.style.d.ts.map

package/image.style.d.ts.map

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

package/image.style.js

@@ -0,0 +1,83 @@
+import { css } from "lit";
+export default css `
+img{
+    border-top-left-radius:var(--hybrid-image-border-top-left-radius,var(--hybrid-image-local-border-top-left-radius)) ;
+    border-top-right-radius: var(--hybrid-image-border-top-right-radius,var(--hybrid-image-local-border-top-right-radius));
+    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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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.2",
+    "version": "0.0.4",
     "description": "",
     "main": "index.js",
     "type": "module",