@nuralyui/image 0.0.1

package/demo/image-demo.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../image.component';
+import '../../../helpers/ThemeHandler';
+export declare class ImageDemoElement extends LitElement {
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'hy-image-demo': ImageDemoElement;
+    }
+}
+//# sourceMappingURL=image-demo.d.ts.map

package/demo/image-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/image/demo/image-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAErC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,+BAA+B,CAAC;AAEvC,qBACa,gBAAiB,SAAQ,UAAU;IACrC,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,gBAAgB,CAAC;KACnC;CACF"}

package/demo/image-demo.js

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import '../image.component';
+import '../../../helpers/ThemeHandler';
+let ImageDemoElement = class ImageDemoElement extends LitElement {
+    render() {
+        return html `
+      <theme-handler>
+      <h2>With valid src and alt</h2>
+          <hy-image
+            .src="${'https://picsum.photos/200'}"
+            .alt="${'Image'}"
+          ></hy-image>
+          <h2>With custom width and height</h2>
+
+         <hy-image
+         .src="${'https://picsum.photos/200'}"
+         .width="${'100px'}"
+         .height="${'300px'}">
+         </hy-image> 
+
+         <h2>With custom width and height and invalid src</h2>
+
+         <hy-image
+         .src="${'https://picsffum.photos/200'}"
+         .width="${'100px'}"
+         .height="${'300px'}">
+         </hy-image> 
+
+          <h2>With invalid src and valid fallback provided</h2>
+          <hy-image
+            .src="${'https://picdsum.photos/200'}"
+            .fallback="${'https://placehold.co/50?text=image'}">
+          </hy-image>
+          <h2>With invalid src no fallback provided and without alt </h2>
+           <hy-image
+             .src="${'https://picdsum.photos/200'}"
+           ></hy-image>
+          <h2>With invalid src, invalid fallback provided and with alt</h2>
+           <hy-image
+             .src="${'https://picdsum.photos/200'}"
+             .fallback="${'https://placehfold.jp/150x150.png'}"
+             .alt="${'image'}"
+             >
+           </hy-image>
+
+      </theme-handler>
+    `;
+    }
+};
+ImageDemoElement = __decorate([
+    customElement('hy-image-demo')
+], ImageDemoElement);
+export { ImageDemoElement };
+//# sourceMappingURL=image-demo.js.map

package/demo/image-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-demo.js","sourceRoot":"","sources":["../../../../src/components/image/demo/image-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAC5B,OAAO,+BAA+B,CAAC;AAGvC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IACrC,MAAM;QACb,OAAO,IAAI,CAAA;;;;oBAIK,2BAA2B;oBAC3B,OAAO;;;;;iBAKV,2BAA2B;mBACzB,OAAO;oBACN,OAAO;;;;;;iBAMV,6BAA6B;mBAC3B,OAAO;oBACN,OAAO;;;;;oBAKP,4BAA4B;yBACvB,oCAAoC;;;;qBAIxC,4BAA4B;;;;qBAI5B,4BAA4B;0BACvB,mCAAmC;qBACxC,OAAO;;;;;KAKvB,CAAC;IACJ,CAAC;CACF,CAAA;AA7CY,gBAAgB;IAD5B,aAAa,CAAC,eAAe,CAAC;GAClB,gBAAgB,CA6C5B;SA7CY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport '../image.component';\nimport '../../../helpers/ThemeHandler';\n\n@customElement('hy-image-demo')\nexport class ImageDemoElement extends LitElement {\n  override render() {\n    return html`\n      <theme-handler>\n      <h2>With valid src and alt</h2>\n          <hy-image\n            .src=\"${'https://picsum.photos/200'}\"\n            .alt=\"${'Image'}\"\n          ></hy-image>\n          <h2>With custom width and height</h2>\n\n         <hy-image\n         .src=\"${'https://picsum.photos/200'}\"\n         .width=\"${'100px'}\"\n         .height=\"${'300px'}\">\n         </hy-image> \n\n         <h2>With custom width and height and invalid src</h2>\n\n         <hy-image\n         .src=\"${'https://picsffum.photos/200'}\"\n         .width=\"${'100px'}\"\n         .height=\"${'300px'}\">\n         </hy-image> \n\n          <h2>With invalid src and valid fallback provided</h2>\n          <hy-image\n            .src=\"${'https://picdsum.photos/200'}\"\n            .fallback=\"${'https://placehold.co/50?text=image'}\">\n          </hy-image>\n          <h2>With invalid src no fallback provided and without alt </h2>\n           <hy-image\n             .src=\"${'https://picdsum.photos/200'}\"\n           ></hy-image>\n          <h2>With invalid src, invalid fallback provided and with alt</h2>\n           <hy-image\n             .src=\"${'https://picdsum.photos/200'}\"\n             .fallback=\"${'https://placehfold.jp/150x150.png'}\"\n             .alt=\"${'image'}\"\n             >\n           </hy-image>\n\n      </theme-handler>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hy-image-demo': ImageDemoElement;\n  }\n}\n"]}

package/image.component.d.ts

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

package/image.component.d.ts.map

@@ -0,0 +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,SAAqC;IAG3C,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAO7D,OAAO,CAAC,WAAW;IAgBV,MAAM;CAYlB"}

package/image.component.js

@@ -0,0 +1,73 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+let HyImage = class HyImage extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fallback = null;
+        this.width = 'auto';
+        this.height = 'auto';
+        this.alt = '';
+        this.image = '';
+        this.defaultFallBack = 'https://placehold.co/50?text=image';
+    }
+    willUpdate(_changedProperties) {
+        if (_changedProperties.has('fallback') || _changedProperties.has('src')) {
+            this.image = this.src;
+        }
+    }
+    handleError() {
+        this.dispatchEvent(new CustomEvent('onError', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                error: `error loading image ${this.image}`
+            }
+        }));
+        if (this.fallback && this.image !== this.fallback && this.image != this.defaultFallBack) {
+            this.image = this.fallback;
+        }
+        else if (this.image != this.defaultFallBack) {
+            this.image = this.defaultFallBack;
+        }
+    }
+    render() {
+        return html `
+        <img 
+        src=${this.image}
+        @error=${this.handleError}
+        style="width:${this.width}; height:${this.height}"
+        alt=${this.alt}
+        />
+        
+        `;
+    }
+};
+__decorate([
+    property()
+], HyImage.prototype, "src", void 0);
+__decorate([
+    property()
+], HyImage.prototype, "fallback", void 0);
+__decorate([
+    property()
+], HyImage.prototype, "width", void 0);
+__decorate([
+    property()
+], HyImage.prototype, "height", void 0);
+__decorate([
+    property()
+], HyImage.prototype, "alt", void 0);
+__decorate([
+    state()
+], HyImage.prototype, "image", void 0);
+HyImage = __decorate([
+    customElement('hy-image')
+], HyImage);
+export { HyImage };
+//# sourceMappingURL=image.component.js.map

package/image.component.js.map

@@ -0,0 +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,oCAAoC,CAAA;IAsCxD,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='https://placehold.co/50?text=image'\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}"]}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './image.component.js';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/image/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/index.js

@@ -0,0 +1,2 @@
+export * from './image.component.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/image/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './image.component.js';\n"]}

package/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "@nuralyui/image",
+    "version": "0.0.1",
+    "description": "",
+    "main": "index.js",
+    "type": "module",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Labidi Aymen",
+    "license": "ISC"
+}