@nuralyui/image 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,14 +2,18 @@ import { LitElement, PropertyValues } from "lit";
2
2
  export declare class HyImage extends LitElement {
3
3
  static styles: import("lit").CSSResult;
4
4
  src: string;
5
- fallback: null;
5
+ fallback: string;
6
6
  width: string;
7
7
  height: string;
8
8
  alt: string;
9
+ previewable: boolean;
9
10
  image: string;
11
+ showPreview: boolean;
10
12
  defaultFallBack: string;
11
13
  willUpdate(_changedProperties: PropertyValues): void;
12
14
  private handleError;
15
+ private _showPreview;
16
+ private _closePreview;
13
17
  render(): import("lit").TemplateResult<1>;
14
18
  }
15
19
  //# sourceMappingURL=image.component.d.ts.map
@@ -1 +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"}
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;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"}
@@ -10,11 +10,12 @@ import styles from './image.style.js';
10
10
  let HyImage = class HyImage extends LitElement {
11
11
  constructor() {
12
12
  super(...arguments);
13
- this.fallback = null;
14
13
  this.width = 'auto';
15
14
  this.height = 'auto';
16
15
  this.alt = '';
16
+ this.previewable = false;
17
17
  this.image = '';
18
+ this.showPreview = false;
18
19
  this.defaultFallBack = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg==';
19
20
  }
20
21
  willUpdate(_changedProperties) {
@@ -37,16 +38,33 @@ let HyImage = class HyImage extends LitElement {
37
38
  this.image = this.defaultFallBack;
38
39
  }
39
40
  }
41
+ _showPreview() {
42
+ if (this.previewable) {
43
+ this.showPreview = true;
44
+ }
45
+ }
46
+ _closePreview() {
47
+ this.showPreview = false;
48
+ }
40
49
  render() {
41
50
  return html `
42
- <img
43
- src=${this.image}
44
- @error=${this.handleError}
45
- style="width:${this.width}; height:${this.height}"
46
- alt=${this.alt}
51
+ <div class="image-container">
52
+ <img
53
+ src=${this.image}
54
+ @error=${this.handleError}
55
+ @click=${this._showPreview}
56
+ style="width:${this.width}; height:${this.height}; cursor: ${this.previewable ? 'pointer' : 'default'}"
57
+ alt=${this.alt}
47
58
  />
48
-
49
- `;
59
+
60
+ ${this.showPreview ? html `
61
+ <div class="preview-modal" @click=${this._closePreview}>
62
+ <button class="preview-close">×</button>
63
+ <img src="${this.image}" alt="${this.alt}" />
64
+ </div>
65
+ ` : ''}
66
+ </div>
67
+ `;
50
68
  }
51
69
  };
52
70
  HyImage.styles = styles;
@@ -54,7 +72,7 @@ __decorate([
54
72
  property()
55
73
  ], HyImage.prototype, "src", void 0);
56
74
  __decorate([
57
- property()
75
+ property({ type: String })
58
76
  ], HyImage.prototype, "fallback", void 0);
59
77
  __decorate([
60
78
  property()
@@ -65,9 +83,15 @@ __decorate([
65
83
  __decorate([
66
84
  property()
67
85
  ], HyImage.prototype, "alt", void 0);
86
+ __decorate([
87
+ property({ type: Boolean })
88
+ ], HyImage.prototype, "previewable", void 0);
68
89
  __decorate([
69
90
  state()
70
91
  ], HyImage.prototype, "image", void 0);
92
+ __decorate([
93
+ state()
94
+ ], HyImage.prototype, "showPreview", void 0);
71
95
  HyImage = __decorate([
72
96
  customElement('hy-image')
73
97
  ], HyImage);
@@ -1 +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}"]}
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;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}"]}
@@ -1 +1 @@
1
- {"version":3,"file":"image.style.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":";AAEA,wBAOC"}
1
+ {"version":3,"file":"image.style.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":";AAEA,wBAgFC"}
package/image.style.js CHANGED
@@ -6,5 +6,78 @@ img{
6
6
  border-bottom-left-radius: var(--hybrid-image-border-bottom-left-radius,var(--hybrid-image-local-border-bottom-left-radius));
7
7
  border-bottom-right-radius: var(--hybrid-image-border-bottom-right-radius,var(--hybrid-image-local-border-bottom-right-radius));
8
8
  }
9
+ .image-container {
10
+ position: relative;
11
+ }
12
+
13
+ img {
14
+ display: block;
15
+ max-width: 100%;
16
+ }
17
+
18
+ .preview-modal {
19
+ position: fixed;
20
+ top: 0;
21
+ left: 0;
22
+ right: 0;
23
+ bottom: 0;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ background-color: rgba(0, 0, 0, 0.7);
28
+ z-index: 1000;
29
+ animation: fadeIn 0.3s ease;
30
+ }
31
+
32
+ .preview-modal img {
33
+ max-width: 90%;
34
+ max-height: 90%;
35
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
36
+ border-radius: 4px;
37
+ animation: zoomIn 0.3s ease;
38
+ }
39
+
40
+ .preview-close {
41
+ position: absolute;
42
+ top: 20px;
43
+ right: 20px;
44
+ width: 40px;
45
+ height: 40px;
46
+ background: rgba(255, 255, 255, 0.2);
47
+ border: none;
48
+ border-radius: 50%;
49
+ color: white;
50
+ font-size: 24px;
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: center;
54
+ cursor: pointer;
55
+ outline: none;
56
+ transition: background-color 0.3s;
57
+ }
58
+
59
+ .preview-close:hover {
60
+ background: rgba(255, 255, 255, 0.4);
61
+ }
62
+
63
+ @keyframes fadeIn {
64
+ from {
65
+ opacity: 0;
66
+ }
67
+ to {
68
+ opacity: 1;
69
+ }
70
+ }
71
+
72
+ @keyframes zoomIn {
73
+ from {
74
+ transform: scale(0.9);
75
+ opacity: 0;
76
+ }
77
+ to {
78
+ transform: scale(1);
79
+ opacity: 1;
80
+ }
81
+ }
9
82
  `;
10
83
  //# sourceMappingURL=image.style.js.map
@@ -1 +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`"]}
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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/image",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/react.d.ts ADDED
@@ -0,0 +1,307 @@
1
+ export declare const HyImage: import("@lit-labs/react").ReactWebComponent<{
2
+ accessKey: string;
3
+ readonly accessKeyLabel: string;
4
+ autocapitalize: string;
5
+ dir: string;
6
+ draggable: boolean;
7
+ hidden: boolean;
8
+ innerText: string;
9
+ lang: string;
10
+ readonly offsetHeight: number;
11
+ readonly offsetLeft: number;
12
+ readonly offsetParent: Element | null;
13
+ readonly offsetTop: number;
14
+ readonly offsetWidth: number;
15
+ outerText: string;
16
+ spellcheck: boolean;
17
+ title: string;
18
+ translate: boolean;
19
+ attachInternals(): ElementInternals;
20
+ click(): void;
21
+ addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
22
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
23
+ removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
24
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
25
+ readonly attributes: NamedNodeMap;
26
+ readonly classList: DOMTokenList;
27
+ className: string;
28
+ readonly clientHeight: number;
29
+ readonly clientLeft: number;
30
+ readonly clientTop: number;
31
+ readonly clientWidth: number;
32
+ id: string;
33
+ readonly localName: string;
34
+ readonly namespaceURI: string | null;
35
+ onfullscreenchange: ((this: Element, ev: Event) => any) | null;
36
+ onfullscreenerror: ((this: Element, ev: Event) => any) | null;
37
+ outerHTML: string;
38
+ readonly ownerDocument: Document;
39
+ readonly part: DOMTokenList;
40
+ readonly prefix: string | null;
41
+ readonly scrollHeight: number;
42
+ scrollLeft: number;
43
+ scrollTop: number;
44
+ readonly scrollWidth: number;
45
+ readonly shadowRoot: ShadowRoot | null;
46
+ slot: string;
47
+ readonly tagName: string;
48
+ attachShadow(init: ShadowRootInit): ShadowRoot;
49
+ closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
50
+ closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
51
+ closest<E extends Element = Element>(selectors: string): E | null;
52
+ getAttribute(qualifiedName: string): string | null;
53
+ getAttributeNS(namespace: string | null, localName: string): string | null;
54
+ getAttributeNames(): string[];
55
+ getAttributeNode(qualifiedName: string): Attr | null;
56
+ getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
57
+ getBoundingClientRect(): DOMRect;
58
+ getClientRects(): DOMRectList;
59
+ getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
60
+ getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
61
+ getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
62
+ getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
63
+ getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
64
+ getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
65
+ getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
66
+ hasAttribute(qualifiedName: string): boolean;
67
+ hasAttributeNS(namespace: string | null, localName: string): boolean;
68
+ hasAttributes(): boolean;
69
+ hasPointerCapture(pointerId: number): boolean;
70
+ insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
71
+ insertAdjacentHTML(position: InsertPosition, text: string): void;
72
+ insertAdjacentText(where: InsertPosition, data: string): void;
73
+ matches(selectors: string): boolean;
74
+ releasePointerCapture(pointerId: number): void;
75
+ removeAttribute(qualifiedName: string): void;
76
+ removeAttributeNS(namespace: string | null, localName: string): void;
77
+ removeAttributeNode(attr: Attr): Attr;
78
+ requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
79
+ requestPointerLock(): void;
80
+ scroll(options?: ScrollToOptions | undefined): void;
81
+ scroll(x: number, y: number): void;
82
+ scrollBy(options?: ScrollToOptions | undefined): void;
83
+ scrollBy(x: number, y: number): void;
84
+ scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
85
+ scrollTo(options?: ScrollToOptions | undefined): void;
86
+ scrollTo(x: number, y: number): void;
87
+ setAttribute(qualifiedName: string, value: string): void;
88
+ setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
89
+ setAttributeNode(attr: Attr): Attr | null;
90
+ setAttributeNodeNS(attr: Attr): Attr | null;
91
+ setPointerCapture(pointerId: number): void;
92
+ toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
93
+ webkitMatchesSelector(selectors: string): boolean;
94
+ readonly baseURI: string;
95
+ readonly childNodes: NodeListOf<ChildNode>;
96
+ readonly firstChild: ChildNode | null;
97
+ readonly isConnected: boolean;
98
+ readonly lastChild: ChildNode | null;
99
+ readonly nextSibling: ChildNode | null;
100
+ readonly nodeName: string;
101
+ readonly nodeType: number;
102
+ nodeValue: string | null;
103
+ readonly parentElement: HTMLElement | null;
104
+ readonly parentNode: ParentNode | null;
105
+ readonly previousSibling: ChildNode | null;
106
+ textContent: string | null;
107
+ appendChild<T extends Node>(node: T): T;
108
+ cloneNode(deep?: boolean | undefined): Node;
109
+ compareDocumentPosition(other: Node): number;
110
+ contains(other: Node | null): boolean;
111
+ getRootNode(options?: GetRootNodeOptions | undefined): Node;
112
+ hasChildNodes(): boolean;
113
+ insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
114
+ isDefaultNamespace(namespace: string | null): boolean;
115
+ isEqualNode(otherNode: Node | null): boolean;
116
+ isSameNode(otherNode: Node | null): boolean;
117
+ lookupNamespaceURI(prefix: string | null): string | null;
118
+ lookupPrefix(namespace: string | null): string | null;
119
+ normalize(): void;
120
+ removeChild<T_2 extends Node>(child: T_2): T_2;
121
+ replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
122
+ readonly ATTRIBUTE_NODE: number;
123
+ readonly CDATA_SECTION_NODE: number;
124
+ readonly COMMENT_NODE: number;
125
+ readonly DOCUMENT_FRAGMENT_NODE: number;
126
+ readonly DOCUMENT_NODE: number;
127
+ readonly DOCUMENT_POSITION_CONTAINED_BY: number;
128
+ readonly DOCUMENT_POSITION_CONTAINS: number;
129
+ readonly DOCUMENT_POSITION_DISCONNECTED: number;
130
+ readonly DOCUMENT_POSITION_FOLLOWING: number;
131
+ readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
132
+ readonly DOCUMENT_POSITION_PRECEDING: number;
133
+ readonly DOCUMENT_TYPE_NODE: number;
134
+ readonly ELEMENT_NODE: number;
135
+ readonly ENTITY_NODE: number;
136
+ readonly ENTITY_REFERENCE_NODE: number;
137
+ readonly NOTATION_NODE: number;
138
+ readonly PROCESSING_INSTRUCTION_NODE: number;
139
+ readonly TEXT_NODE: number;
140
+ dispatchEvent(event: Event): boolean;
141
+ ariaAtomic: string | null;
142
+ ariaAutoComplete: string | null;
143
+ ariaBusy: string | null;
144
+ ariaChecked: string | null;
145
+ ariaColCount: string | null;
146
+ ariaColIndex: string | null;
147
+ ariaColSpan: string | null;
148
+ ariaCurrent: string | null;
149
+ ariaDisabled: string | null;
150
+ ariaExpanded: string | null;
151
+ ariaHasPopup: string | null;
152
+ ariaHidden: string | null;
153
+ ariaKeyShortcuts: string | null;
154
+ ariaLabel: string | null;
155
+ ariaLevel: string | null;
156
+ ariaLive: string | null;
157
+ ariaModal: string | null;
158
+ ariaMultiLine: string | null;
159
+ ariaMultiSelectable: string | null;
160
+ ariaOrientation: string | null;
161
+ ariaPlaceholder: string | null;
162
+ ariaPosInSet: string | null;
163
+ ariaPressed: string | null;
164
+ ariaReadOnly: string | null;
165
+ ariaRequired: string | null;
166
+ ariaRoleDescription: string | null;
167
+ ariaRowCount: string | null;
168
+ ariaRowIndex: string | null;
169
+ ariaRowSpan: string | null;
170
+ ariaSelected: string | null;
171
+ ariaSetSize: string | null;
172
+ ariaSort: string | null;
173
+ ariaValueMax: string | null;
174
+ ariaValueMin: string | null;
175
+ ariaValueNow: string | null;
176
+ ariaValueText: string | null;
177
+ animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
178
+ getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
179
+ after(...nodes: (string | Node)[]): void;
180
+ before(...nodes: (string | Node)[]): void;
181
+ remove(): void;
182
+ replaceWith(...nodes: (string | Node)[]): void;
183
+ innerHTML: string;
184
+ readonly nextElementSibling: Element | null;
185
+ readonly previousElementSibling: Element | null;
186
+ readonly childElementCount: number;
187
+ readonly children: HTMLCollection;
188
+ readonly firstElementChild: Element | null;
189
+ readonly lastElementChild: Element | null;
190
+ append(...nodes: (string | Node)[]): void;
191
+ prepend(...nodes: (string | Node)[]): void;
192
+ querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
193
+ querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
194
+ querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
195
+ querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
196
+ querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
197
+ querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
198
+ replaceChildren(...nodes: (string | Node)[]): void;
199
+ readonly assignedSlot: HTMLSlotElement | null;
200
+ oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
201
+ oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
202
+ onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
203
+ readonly style: CSSStyleDeclaration;
204
+ contentEditable: string;
205
+ enterKeyHint: string;
206
+ inputMode: string;
207
+ readonly isContentEditable: boolean;
208
+ onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
209
+ onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
210
+ onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
211
+ onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
212
+ onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
213
+ onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
214
+ onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
215
+ oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
216
+ oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
217
+ onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
218
+ onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
219
+ onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
220
+ oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
221
+ oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
222
+ ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
223
+ ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
224
+ ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
225
+ ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
226
+ ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
227
+ ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
228
+ ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
229
+ ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
230
+ ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
231
+ onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
232
+ onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
233
+ onerror: OnErrorEventHandler;
234
+ onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
235
+ onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
236
+ ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
237
+ oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
238
+ oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
239
+ onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
240
+ onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
241
+ onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
242
+ onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
243
+ onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
244
+ onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
245
+ onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
246
+ onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
247
+ onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
248
+ onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
249
+ onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
250
+ onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
251
+ onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
252
+ onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
253
+ onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
254
+ onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
255
+ onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
256
+ onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
257
+ onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
258
+ onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
259
+ onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
260
+ onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
261
+ onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
262
+ onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
263
+ onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
264
+ onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
265
+ onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
266
+ onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
267
+ onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
268
+ onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
269
+ onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
270
+ onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
271
+ onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
272
+ onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
273
+ onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
274
+ onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
275
+ onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
276
+ onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
277
+ onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
278
+ onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
279
+ onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
280
+ ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
281
+ ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
282
+ ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
283
+ ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
284
+ ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
285
+ ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
286
+ ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
287
+ ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
288
+ ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
289
+ ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
290
+ onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
291
+ onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
292
+ onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
293
+ onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
294
+ onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
295
+ onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
296
+ onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
297
+ autofocus: boolean;
298
+ readonly dataset: DOMStringMap;
299
+ nonce?: string | undefined;
300
+ tabIndex: number;
301
+ blur(): void;
302
+ focus(options?: FocusOptions | undefined): void;
303
+ }, {
304
+ load: string;
305
+ error: string;
306
+ }>;
307
+ //# sourceMappingURL=react.d.ts.map
package/react.d.ts.map ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,13 @@
1
+ import { createComponent } from '@lit-labs/react';
2
+ import * as React from 'react';
3
+ export const HyImage = createComponent({
4
+ tagName: 'hy-image',
5
+ elementClass: class extends HTMLElement {
6
+ },
7
+ react: React,
8
+ events: {
9
+ load: 'load',
10
+ error: 'error',
11
+ },
12
+ });
13
+ //# sourceMappingURL=react.js.map
package/react.js.map ADDED
@@ -0,0 +1 @@
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"]}