@spw-ds/spw-stencil-library 1.10.2 → 1.11.0

package/dist/collection/components/spw-lightbox/spw-lightbox-item/spw-lightbox-item.js

@@ -0,0 +1,292 @@
+import { Host, h } from "@stencil/core";
+export class SpwLightboxItem {
+    constructor() {
+        /** Texte alternatif de l'image */
+        this.alt = '';
+        /** Icône Font Awesome du copyright */
+        this.copyrightIcon = 'fa-copyright';
+        /** Permet de spécifier une variante de Font Awesome pour l'icône de copyright */
+        this.copyrightIconVariant = 'fa-light';
+        /** Target du lien du copyright */
+        this.copyrightTarget = '_blank';
+        /** Texte du label aria du bouton déclencheur */
+        this.textOpenImage = "Ouvrir l'image";
+        /** Affiche une icône de loupe en superposition au survol */
+        this.isHover = true;
+    }
+    getIndex() {
+        const parent = this.hostElement.closest('spw-lightbox');
+        if (!parent)
+            return 0;
+        const siblings = Array.from(parent.querySelectorAll('spw-lightbox-item'));
+        return siblings.indexOf(this.hostElement);
+    }
+    handleClick() {
+        this.spwLightboxItemClick.emit({
+            src: this.src,
+            alt: this.alt,
+            captionTitle: this.captionTitle || '',
+            captionText: this.captionText || '',
+            index: this.getIndex(),
+        });
+    }
+    handleKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleClick();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'c384e663df3571a37b24a04233b06ffd31877f56' }, h("div", { key: 'cdd3b40c697ca4265737f20722fdf0baaec3f880', class: { 'spw-lightbox-item__wrapper': true, 'spw-lightbox-item__wrapper--hoverable': this.isHover }, role: "button", tabindex: "0", "aria-label": this.alt || this.textOpenImage, onClick: () => this.handleClick(), onKeyDown: (e) => this.handleKeydown(e) }, h("slot", { key: '21055288e6ed4acd8e6a83923dff8031d1b8255e' }, h("img", { key: '471164f2a425be0e91bbd5301f73255b959984b4', class: "spw-lightbox-item__img", src: this.src, alt: this.alt, loading: "lazy" })), this.isHover && (h("div", { key: '47993f41570edab49ac52cc224ea6693c41aac9a', class: "spw-lightbox-item__hover-overlay" }, h("spw-button", { key: 'a9efcd48cf7b38a58e0d4cbd748393945b53f58e', variant: "secondary", icon: "fa-magnifying-glass", "is-icon-only": true, "acc-aria-label": this.textOpenImage }))))));
+    }
+    static get is() { return "spw-lightbox-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-lightbox-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-lightbox-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL de l'image \u00E0 afficher dans la lightbox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte alternatif de l'image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "''"
+            },
+            "captionTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Titre de la l\u00E9gende affich\u00E9e en superposition de l'image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption-title"
+            },
+            "captionText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte de la l\u00E9gende affich\u00E9e en superposition de l'image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "caption-text"
+            },
+            "copyrightText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du copyright \u00E0 afficher sur l'image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copyright-text"
+            },
+            "copyrightIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Ic\u00F4ne Font Awesome du copyright"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copyright-icon",
+                "defaultValue": "'fa-copyright'"
+            },
+            "copyrightIconVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fa-solid' | 'fa-brands' | 'fa-regular' | 'fa-light'",
+                    "resolved": "\"fa-brands\" | \"fa-light\" | \"fa-regular\" | \"fa-solid\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Permet de sp\u00E9cifier une variante de Font Awesome pour l'ic\u00F4ne de copyright"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copyright-icon-variant",
+                "defaultValue": "'fa-light'"
+            },
+            "copyrightHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Lien du copyright"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copyright-href"
+            },
+            "copyrightTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Target du lien du copyright"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copyright-target",
+                "defaultValue": "'_blank'"
+            },
+            "textOpenImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du label aria du bouton d\u00E9clencheur"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-open-image",
+                "defaultValue": "\"Ouvrir l'image\""
+            },
+            "isHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Affiche une ic\u00F4ne de loupe en superposition au survol"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-hover",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "spwLightboxItemClick",
+                "name": "spwLightboxItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ src: string; alt: string; captionTitle: string; captionText: string; index: number }",
+                    "resolved": "{ src: string; alt: string; captionTitle: string; captionText: string; index: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+}