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

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

@@ -0,0 +1,525 @@
+import { Host, h } from "@stencil/core";
+import { animationTo, KEYFRAMES } from "../../utils/animation";
+export class SpwLightbox {
+    constructor() {
+        /** Texte du bouton de fermeture */
+        this.closeButtonText = 'Fermer';
+        /** Indique si la fermeture est possible en cliquant sur le backdrop */
+        this.closeOnBackdropClick = true;
+        /** Affiche ou masque la galerie de miniatures sous l'image principale */
+        this.showThumbnails = true;
+        // Textes customisables
+        /** Label aria de la dialog */
+        this.textDialogLabel = "Galerie d'images";
+        /** Label aria du bouton image précédente */
+        this.textPrevious = 'Image précédente';
+        /** Label aria du bouton image suivante */
+        this.textNext = 'Image suivante';
+        /** Label aria de la liste de miniatures */
+        this.textThumbnailsLabel = 'Miniatures';
+        /** Label aria d'une miniature (utiliser {index} comme placeholder) */
+        this.textThumbnailItem = 'Image {index}';
+        this.opened = false;
+        this.activeIndex = 0;
+        this.items = [];
+        this.previouslyFocusedElement = null;
+        this.currentAnimation = null;
+        this.swipeStartX = 0;
+        this.swipeStartY = 0;
+        this.isSwiping = false;
+        this.SWIPE_THRESHOLD = 50;
+        this.handleItemClick = (event) => {
+            var _a;
+            this.collectItems();
+            this.activeIndex = (_a = event.detail.index) !== null && _a !== void 0 ? _a : 0;
+            this.opened = true;
+        };
+        this.handleKeydown = (event) => {
+            if (!this.opened)
+                return;
+            switch (event.key) {
+                case 'Escape':
+                    this.doClose();
+                    break;
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.navigate(1);
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.navigate(-1);
+                    break;
+            }
+        };
+        this.handleTouchStart = (event) => {
+            this.swipeStartX = event.touches[0].clientX;
+            this.swipeStartY = event.touches[0].clientY;
+            this.isSwiping = true;
+        };
+        this.handleTouchMove = (event) => {
+            if (!this.isSwiping)
+                return;
+            const dx = event.touches[0].clientX - this.swipeStartX;
+            const dy = event.touches[0].clientY - this.swipeStartY;
+            if (Math.abs(dx) > Math.abs(dy)) {
+                event.preventDefault();
+            }
+        };
+        this.handleTouchEnd = (event) => {
+            if (!this.isSwiping)
+                return;
+            const dx = this.swipeStartX - event.changedTouches[0].clientX;
+            if (Math.abs(dx) >= this.SWIPE_THRESHOLD) {
+                this.navigate(dx > 0 ? 1 : -1);
+            }
+            this.isSwiping = false;
+        };
+    }
+    componentDidLoad() {
+        window.addEventListener('keydown', this.handleKeydown);
+        this.hostElement.addEventListener('spwLightboxItemClick', this.handleItemClick);
+        this.imageWrapperEl.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+        this.imageWrapperEl.addEventListener('touchmove', this.handleTouchMove, { passive: false });
+        this.imageWrapperEl.addEventListener('touchend', this.handleTouchEnd);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        window.removeEventListener('keydown', this.handleKeydown);
+        this.hostElement.removeEventListener('spwLightboxItemClick', this.handleItemClick);
+        (_a = this.imageWrapperEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', this.handleTouchStart);
+        (_b = this.imageWrapperEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchmove', this.handleTouchMove);
+        (_c = this.imageWrapperEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('touchend', this.handleTouchEnd);
+        document.body.style.overflow = '';
+    }
+    async open(index = 0) {
+        this.collectItems();
+        this.activeIndex = index;
+        this.opened = true;
+    }
+    async close() {
+        this.doClose();
+    }
+    onOpenedChange(newValue) {
+        if (newValue) {
+            this.onOpen();
+        }
+        else {
+            this.onClose();
+        }
+    }
+    collectItems() {
+        const lightboxItems = this.hostElement.querySelectorAll(`spw-lightbox-item`);
+        this.items = Array.from(lightboxItems).map(el => ({
+            src: el.getAttribute('src') || '',
+            alt: el.getAttribute('alt') || '',
+            captionTitle: el.getAttribute('caption-title') || '',
+            captionText: el.getAttribute('caption-text') || '',
+            copyrightText: el.getAttribute('copyright-text') || '',
+            copyrightIcon: el.getAttribute('copyright-icon') || 'fa-copyright',
+            copyrightIconVariant: el.getAttribute('copyright-icon-variant') || 'fa-light',
+            copyrightHref: el.getAttribute('copyright-href') || '',
+            copyrightTarget: el.getAttribute('copyright-target') || '_blank',
+        }));
+    }
+    cancelCurrentAnimation() {
+        if (this.currentAnimation) {
+            this.currentAnimation.cancel();
+            this.currentAnimation = null;
+        }
+    }
+    scrollToActiveThumbnail() {
+        if (!this.thumbnailsEl)
+            return;
+        const thumb = this.thumbnailsEl.querySelectorAll('.spw-lightbox__thumb')[this.activeIndex];
+        thumb === null || thumb === void 0 ? void 0 : thumb.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    }
+    onOpen() {
+        var _a;
+        this.cancelCurrentAnimation();
+        this.previouslyFocusedElement = document.activeElement;
+        document.body.style.overflow = 'hidden';
+        try {
+            this.currentAnimation = animationTo(this.lightboxContainer, KEYFRAMES.fadeIn, { duration: 200 });
+            this.currentAnimation.addEventListener('finish', () => {
+                var _a;
+                this.currentAnimation = null;
+                (_a = this.closeButtonEl) === null || _a === void 0 ? void 0 : _a.focus();
+                this.scrollToActiveThumbnail();
+                this.spwLightboxOpen.emit({ index: this.activeIndex });
+            });
+        }
+        catch (_b) {
+            this.currentAnimation = null;
+            (_a = this.closeButtonEl) === null || _a === void 0 ? void 0 : _a.focus();
+            this.scrollToActiveThumbnail();
+            this.spwLightboxOpen.emit({ index: this.activeIndex });
+        }
+    }
+    onClose() {
+        var _a;
+        this.cancelCurrentAnimation();
+        document.body.style.overflow = '';
+        try {
+            this.currentAnimation = animationTo(this.lightboxContainer, KEYFRAMES.fadeOut, { duration: 200 });
+            this.currentAnimation.addEventListener('finish', () => {
+                var _a;
+                this.currentAnimation = null;
+                (_a = this.previouslyFocusedElement) === null || _a === void 0 ? void 0 : _a.focus();
+                this.spwLightboxClose.emit();
+            });
+        }
+        catch (_b) {
+            this.currentAnimation = null;
+            (_a = this.previouslyFocusedElement) === null || _a === void 0 ? void 0 : _a.focus();
+            this.spwLightboxClose.emit();
+        }
+    }
+    doClose() {
+        this.opened = false;
+    }
+    handleFocusTrap(event) {
+        var _a, _b;
+        if (!this.opened || event.key !== 'Tab')
+            return;
+        const focusable = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+        if (!focusable || focusable.length === 0)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = (_b = this.hostElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement;
+        if (event.shiftKey) {
+            if (active === first) {
+                event.preventDefault();
+                last === null || last === void 0 ? void 0 : last.focus();
+            }
+        }
+        else {
+            if (active === last) {
+                event.preventDefault();
+                first === null || first === void 0 ? void 0 : first.focus();
+            }
+        }
+    }
+    navigate(direction) {
+        if (this.items.length <= 1)
+            return;
+        this.activeIndex = (this.activeIndex + direction + this.items.length) % this.items.length;
+    }
+    onActiveIndexChange() {
+        this.scrollToActiveThumbnail();
+    }
+    handleBackdropClick() {
+        if (this.closeOnBackdropClick) {
+            this.doClose();
+        }
+    }
+    get activeItem() {
+        var _a;
+        return (_a = this.items[this.activeIndex]) !== null && _a !== void 0 ? _a : null;
+    }
+    render() {
+        const { opened, activeItem, items, activeIndex } = this;
+        return (h(Host, { key: '82f09859f985e2ced84a3c23a6d9556d23fdfac3' }, h("div", { key: '07ccb0969c57164634b593244e7bdbbd77624118', inert: opened || undefined }, h("slot", { key: '703697fe06bb4e35233b45af1440333ed2907eef' })), h("div", { key: '83f8fc36eff6467eb93bfff20c7a985e8707fe20', ref: el => (this.lightboxContainer = el), class: { 'spw-lightbox': true, 'spw-lightbox--opened': opened }, role: "dialog", "aria-modal": "true", "aria-label": this.textDialogLabel }, h("div", { key: '010c22cfc2d327f22e939ddf64927f4e9d080c2b', class: "spw-lightbox__backdrop", onClick: () => this.handleBackdropClick(), "aria-hidden": "true" }), h("div", { key: '7bb393d0aac7d026fd67846ce70eef245de6d62f', class: "spw-lightbox__container" }, h("div", { key: '3cfad6891f1f3dbf61ac3873bbb59b0539e017c2', class: "spw-lightbox__toolbar" }, h("span", { key: 'a629606363df7d34e622f66fea4c9c4f3b540360', class: "spw-lightbox__counter", "aria-live": "polite" }, items.length > 0 ? `${activeIndex + 1} / ${items.length}` : ''), h("div", { key: '6f7dccb6fc628d76469b2acd370d15a78cecf91d', ref: el => (this.closeButtonEl = el), class: "spw-lightbox__close", tabIndex: 0, role: "button", onClick: () => this.doClose(), onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ')
+                    this.doClose();
+            } }, h("spw-link", { key: 'eec6d31fb305140765ef0c6642072b6908b9f847', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText))), h("div", { key: '82ee2aad1c7cb153ca077bf83c00c8684bd54314', class: "spw-lightbox__stage" }, items.length > 1 && (h("spw-button", { key: '726defc5d1930802c24c94cbc0aa6cd659426e1d', class: "spw-lightbox__nav spw-lightbox__nav--prev", "is-icon-only": true, icon: "fa-chevron-left", "acc-aria-label": this.textPrevious, variant: "secondary", onClick: () => this.navigate(-1) })), h("div", { key: '6f7582b0733bd3091cbafd9a0c07c1d86184668c', class: "spw-lightbox__image-wrapper", ref: el => (this.imageWrapperEl = el) }, activeItem && (h("div", { key: 'be5aa3822872fab8608a225ebd526c71f52e7c37', class: "spw-lightbox__image-frame" }, h("img", { class: "spw-lightbox__image", src: activeItem.src, alt: activeItem.alt || '', key: activeItem.src }), ((activeItem === null || activeItem === void 0 ? void 0 : activeItem.captionTitle) || (activeItem === null || activeItem === void 0 ? void 0 : activeItem.captionText) || (activeItem === null || activeItem === void 0 ? void 0 : activeItem.copyrightText)) && (h("div", { key: '6bf0226b1ff9741ffb15d0981f17ba61db257e55', class: "spw-lightbox__caption", "aria-live": "polite" }, h("div", { key: '23f6a32908f30dcbd024283013e08760d58a0507', class: "spw-lightbox__caption-content" }, activeItem.captionTitle && h("strong", { key: '90500406e8fefe23f013d581670005d287c00ea6', class: "spw-lightbox__caption-title" }, activeItem.captionTitle), activeItem.captionText && h("span", { key: '5be08c1459ee6c6fa3be9fe8a854d0fc6967288b', class: "spw-lightbox__caption-text" }, activeItem.captionText)), activeItem.copyrightText && (h("spw-tag", { key: '3e1b3bff55708e34ba97a502ac4a65fe5bdd0448', size: "small", "icon-variant": activeItem.copyrightIconVariant, class: "spw-lightbox__copyright", icon: activeItem.copyrightIcon, href: activeItem.copyrightHref || undefined, target: activeItem.copyrightHref ? activeItem.copyrightTarget : undefined }, activeItem.copyrightText))))))), items.length > 1 && (h("spw-button", { key: 'c94feeca844f367c141bb48e23bbdb96f41e9566', class: "spw-lightbox__nav spw-lightbox__nav--next", "is-icon-only": true, icon: "fa-chevron-right", "acc-aria-label": this.textNext, variant: "secondary", onClick: () => this.navigate(1) }))), this.showThumbnails && items.length > 1 && (h("div", { key: 'c06cf2a19b7b64702180ef0303b1cc32bf85151c', class: "spw-lightbox__thumbnails", role: "tablist", "aria-label": this.textThumbnailsLabel, ref: el => (this.thumbnailsEl = el) }, items.map((item, index) => (h("button", { key: item.src, role: "tab", class: { 'spw-lightbox__thumb': true, 'spw-lightbox__thumb--active': index === activeIndex }, onClick: () => (this.activeIndex = index), "aria-selected": String(index === activeIndex), "aria-label": item.alt || this.textThumbnailItem.replace('{index}', String(index + 1)) }, h("img", { src: item.src, alt: item.alt || '', loading: "lazy" }))))))))));
+    }
+    static get is() { return "spw-lightbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-lightbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-lightbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "gallery": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifiant de la galerie (partag\u00E9 avec spw-lightbox-item pour grouper les items)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "gallery"
+            },
+            "closeButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du bouton de fermeture"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-button-text",
+                "defaultValue": "'Fermer'"
+            },
+            "closeOnBackdropClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si la fermeture est possible en cliquant sur le backdrop"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-backdrop-click",
+                "defaultValue": "true"
+            },
+            "showThumbnails": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Affiche ou masque la galerie de miniatures sous l'image principale"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-thumbnails",
+                "defaultValue": "true"
+            },
+            "textDialogLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label aria de la dialog"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-dialog-label",
+                "defaultValue": "\"Galerie d'images\""
+            },
+            "textPrevious": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label aria du bouton image pr\u00E9c\u00E9dente"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-previous",
+                "defaultValue": "'Image pr\u00E9c\u00E9dente'"
+            },
+            "textNext": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label aria du bouton image suivante"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-next",
+                "defaultValue": "'Image suivante'"
+            },
+            "textThumbnailsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label aria de la liste de miniatures"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-thumbnails-label",
+                "defaultValue": "'Miniatures'"
+            },
+            "textThumbnailItem": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label aria d'une miniature (utiliser {index} comme placeholder)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-thumbnail-item",
+                "defaultValue": "'Image {index}'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "opened": {},
+            "activeIndex": {},
+            "items": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "spwLightboxOpen",
+                "name": "spwLightboxOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ index: number }",
+                    "resolved": "{ index: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "spwLightboxClose",
+                "name": "spwLightboxClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "(index?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "opened",
+                "methodName": "onOpenedChange"
+            }, {
+                "propName": "activeIndex",
+                "methodName": "onActiveIndexChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleFocusTrap",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/spw-link/spw-link.js

@@ -34,7 +34,7 @@ export class SpwLink {
         };
         const iconClass = `spw-icon--${iconPosition}`;
         const iconElement = icon ? h("spw-icon", { class: iconClass, icon: icon }) : null;
-        return (h("a", Object.assign({ key: '30615a14ae6c2284dd2615a98d9075b857f7f62f', href: disabled ? undefined : href, rel: rel, download: download, target: target, class: this.elementClass, onClick: this.onClick }, ariaAttributes), iconPosition === 'left' && iconElement, h("div", { key: 'fce8e40082395281d9a82887741bbcd336e6cff3', class: "spw-link__inner" }, h("slot", { key: '63a595baec18faa6c5b8c617a17ad76fb31afe4a' })), iconPosition === 'right' && iconElement));
+        return (h("a", Object.assign({ key: '899f64c682ce6ee3236a36b795df7eb1804a0810', href: disabled ? undefined : href, rel: rel, download: download, target: target, class: this.elementClass, onClick: this.onClick }, ariaAttributes), iconPosition === 'left' && iconElement, h("div", { key: 'c87bb64a8b4055991dea51d3f95bc1e5fdbee0b7', class: "spw-link__inner" }, h("slot", { key: 'faa097c523da01a5311075c3a6a1e25897a07efd' })), iconPosition === 'right' && iconElement));
     }
     static get is() { return "spw-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-list/spw-list-description/spw-list-description.js

@@ -9,7 +9,7 @@ export class SpwListDescription {
         };
     }
     render() {
-        return (h(Host, { key: '4a5332f1e2d248434476bf4db340c2134b0f4721' }, h("div", { key: '185346b31af0b07cec1053ebab48db7308ecaef4', class: this.elementClass }, h("slot", { key: '3f2719c69ee614f95cec8a489bd72f096d4f36f3' }))));
+        return (h(Host, { key: 'b4b72cc7427baab592a63fa96d94648916e15194' }, h("div", { key: '64b8ba560fb842051c84266a987e5784bc69e5a0', class: this.elementClass }, h("slot", { key: 'c104a9a85823c9a6f5d7526f2dd3594816895c16' }))));
     }
     static get is() { return "spw-list-description"; }
     static get encapsulation() { return "shadow"; }

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

@@ -106,7 +106,7 @@ export class SpwListItem {
                 href,
                 target,
             };
-        return (h(Host, { key: 'e08ec16f4b29e594e282c629bfafd41b7e5d0953' }, h("li", { key: 'e09d70fbf9097893b8735d775532c763aaafaa0e', role: "listitem", class: this.elementClass }, this.category && (h("span", { key: '363fbf92dfc1a78dcc269b23a641829dc393258f', class: this.elementCatClass, onClick: () => this.handleClick() }, this.categoryIcon && h("spw-icon", { key: '3fe6a5d676289330889559c95182f20e7e664b81', icon: this.categoryIcon }), " ", this.category)), h(TagType, Object.assign({ key: '79053ec58beb7119297937b4a834b2d63e5d1805' }, attrs), h("slot", { key: '510699e74d0c883afc4aab90ec652fc18a0b651a' })), h("slot", { key: '13727b38959a6ee6f3dced49ea3e7a638680008a', name: "buttons" }))));
+        return (h(Host, { key: '8c807f37bef2f056b0e5e33031c36e99ee74b3a3' }, h("li", { key: '203903edb02ba2d244b9d9375f24428e459e3a47', role: "listitem", class: this.elementClass }, this.category && (h("span", { key: '80e567a90fe0a06ac2523d74731d0fc607592045', class: this.elementCatClass, onClick: () => this.handleClick() }, this.categoryIcon && h("spw-icon", { key: '2ecb923c0fed03840648777d480f66aea1291fdf', icon: this.categoryIcon }), " ", this.category)), h(TagType, Object.assign({ key: 'e86f4f394260b3a396b1f04a34df4abbc28e55ea' }, attrs), h("slot", { key: '577415c2ea250cad41364c018cbadb192954d994' })), h("slot", { key: '9b1be1bfae9fcd009c8769eb504b2208e7ab82fe', name: "buttons" }))));
     }
     static get is() { return "spw-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-list/spw-list-title/spw-list-title.js

@@ -10,7 +10,7 @@ export class SpwListTitle {
         };
     }
     render() {
-        return (h(Host, { key: '795f1701d85b2d52aa31b786121be9de1e878b57' }, h("div", { key: '3d2d3043f716a0ea80075d069e424089263072da', class: this.elementClass }, this.icon && h("spw-icon", { key: 'b118fc4fad5345b71d2766b0831146d122f41ebb', icon: this.icon }), h("div", { key: '1ce942e4070671b4d82cc78f61d01729ba61a070', class: "spw-list-title__content" }, h("div", { key: '9e9d379f65bfffb15f6ca7d7356787b2505061ca', class: "spw-list-title__content-text" }, h("slot", { key: '6a50b0ce145ed7d1ee3fe550ff9ef3a3679800a6' }))))));
+        return (h(Host, { key: '96b5bac8e6721db88297b4881fe67424415c0227' }, h("div", { key: '719182fd51fb67dd24915bd5a8b612e1b63dd112', class: this.elementClass }, this.icon && h("spw-icon", { key: '6f96398057f175024fbdb512a8f81bfa5fc4e6ac', icon: this.icon }), h("div", { key: '27fe08ce105bcd6f80f25bcee410cc44f685a06d', class: "spw-list-title__content" }, h("div", { key: '1fda7233de36d1b92ce9abfbf8768ffab64eac20', class: "spw-list-title__content-text" }, h("slot", { key: '6a47e207887b8d60619f31ad17a3353ae85cbf4c' }))))));
     }
     static get is() { return "spw-list-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-list/spw-list.js

@@ -29,7 +29,7 @@ export class SpwList {
         };
     }
     render() {
-        return (h(Host, { key: '5783a5ea988594e0ac7630ffefbb296ac9105e34' }, h("ul", { key: 'd57ec4255cfef3bf1816fcaf529459023f45f978', role: "list", class: this.elementClass }, h("slot", { key: 'd8756ca6497a8bd6065ad810271b5f11cad1ac92' }))));
+        return (h(Host, { key: '437fb36977c9791f1c64020a28b56fa57127509e' }, h("ul", { key: '8c117fa57f2f8ccaaaf4fc4c7247bc57910979fe', role: "list", class: this.elementClass }, h("slot", { key: '400e532fbece3f626b96c8bf44701c583cfb0784' }))));
     }
     static get is() { return "spw-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-loading/spw-loading.js

@@ -19,7 +19,7 @@ export class SpwLoading {
         };
     }
     render() {
-        return (h(Host, { key: 'e448d0d69c3eb9b1c8bae6decb4489ad165fa5e2' }, h("div", { key: '32e6e8a450d670e93580b1b50071c4eef3ed4fcf', class: this.loadingClasses }, h("div", { key: 'b29b05981c46ad8070ca3eed06d16fe344400b9d', class: "spw-loading__spinner" }), this.text && h("p", { key: '186d4ff71ef3dbeaa2fd7f4245f358b23a2f39b2', class: "spw-loading__text" }, this.text))));
+        return (h(Host, { key: '2ae810f9bac688bb2ef02ab611b4143769f5fa2e' }, h("div", { key: '822c5236811d5361e562b6efea9c8437e59e39b4', class: this.loadingClasses }, h("div", { key: '99e0addc754c008e37f0c99799244790565cbae0', class: "spw-loading__spinner" }), this.text && h("p", { key: '674e6b700e1a8b9a7816eb014344e49e38781d9e', class: "spw-loading__text" }, this.text))));
     }
     static get is() { return "spw-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-modal/spw-modal.js

@@ -166,13 +166,13 @@ export class SpwModal {
         };
     }
     render() {
-        return (h(Host, { key: '672e6ee79675a69b7bf9455a0a10b71353129a53' }, h("div", { key: 'f0f737f1e6ba61788c575978f140321271fc0761', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: 'c4bdb3ae9e4e7f8f108a07523aee30dadfb69492', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '04ad128adae51a6c47a5dc9cb03d48d381306f19', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '7ed6045ddd6d74c3c90ac31d8038753cf380b94c', class: "spw-modal__content", ref: el => (this.modalContent = el), onScroll: this.handleContentScroll }, h("div", { key: '821fb004557f50c2fb0c7246e400098476e17bec', class: "spw-modal__header" }, h("div", { key: '62c0906da57593ec51b4ad4f5fb2c95b042c880f', class: "spw-modal__title-container" }, this.alertIcon && h("spw-icon", { key: '6bbf60ee022b2e25945acfd23022721ef18a28bf', class: "spw-modal__alert-icon", icon: this.alertIcon }), h("h2", { key: 'e57764e17bb77bb5c4e221f2e524c917e5d29c7d', class: "spw-modal__caption" }, this.caption)), this.showCloseButton && (h("div", { key: '3bcb4c4d36fc6efab35096767706ed1029b088c0', class: {
+        return (h(Host, { key: 'c157646646bcdc2336f4b91b657f20bec00df4dc' }, h("div", { key: 'ecd8f315db80d19e433391a9ffe7deefc9736bd5', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: '519205765483e2739404bbe70e2e59b6c2f28b75', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: '4b3c34065c64c272ef71ede849cdf5987ebd5453', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '7bcc2f2747f6fcc70249de6913f9751e97e12a6b', class: "spw-modal__content", ref: el => (this.modalContent = el), onScroll: this.handleContentScroll }, h("div", { key: '80ece3a351c1e0a6eb1345b70478edf1f4c7cab7', class: "spw-modal__header" }, h("div", { key: '64cb2a0695bf11a1295fae8350a62fa9ca355eff', class: "spw-modal__title-container" }, this.alertIcon && h("spw-icon", { key: 'adb258fbcba9dd8c3659dc47ef51f7c2b41e8b72', class: "spw-modal__alert-icon", icon: this.alertIcon }), h("h2", { key: '778b74582a8660dec60e345fb0136a06aa5aa1a2', class: "spw-modal__caption" }, this.caption)), this.showCloseButton && (h("div", { key: 'da8ea051072980ff579caa2556fd73bcf59ed221', class: {
                 'spw-modal__close-button': true,
                 'spw-modal__close-button--sticky': this.isCloseButtonSticky,
-            }, ref: el => (this.closeButton = el), onClick: () => this.doBeforeClose('CLOSE_BUTTON') }, h("spw-link", { key: 'a089fb0b8b88170f7a5d84cd3ce2df4cb4bc8d6c', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText)))), h("div", { key: 'df3f41aba76d95ab047023d75e73883fb2ba8a58', class: "spw-modal__body" }, h("slot", { key: '779d94057417bb4db7025a14bf6a9a12e6bb1231', name: "content" })), h("div", { key: '5b5d7309368d6d5ebf8cede7afc900e19c337ca6', class: { 'spw-modal__buttons': true, 'spw-modal__footer--buttons-present': this.slotButtonsPresent } }, h("slot", { key: '9bb5c12d9ae3cb34b08ce454ab68b78d93de4199', name: "buttons", onSlotchange: (e) => {
+            }, ref: el => (this.closeButton = el), onClick: () => this.doBeforeClose('CLOSE_BUTTON') }, h("spw-link", { key: 'd9a440db7d4d25fbea422f4138695bc709894233', "icon-position": "right", icon: "fa-xmark" }, this.closeButtonText)))), h("div", { key: 'fc1f867b109b5e9d34a40141a0d063ad530aadac', class: "spw-modal__body" }, h("slot", { key: '6a048196c218df1d3e0145f2c27695853b5e6178', name: "content" })), h("div", { key: '57c9a3144e2c27c1e90a556c423faa230aa1bd60', class: { 'spw-modal__buttons': true, 'spw-modal__footer--buttons-present': this.slotButtonsPresent } }, h("slot", { key: 'b8c04462cae8435332af8769650c0bd58f950bb3', name: "buttons", onSlotchange: (e) => {
                 const slot = e.target;
                 this.slotButtonsPresent = slot.assignedNodes({ flatten: true }).length > 0;
-            } })))), h("div", { key: 'b41b4b50f8147c6530de423547858fd559124ba3', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+            } })))), h("div", { key: '07522150f05d312d3773f3dd3497e41cab4015bd', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
     }
     static get is() { return "spw-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,7 @@ export class SpwMosaicItem {
         }
     }
     render() {
-        return (h(Host, { key: '791d2364555da8c938245b0c305e6344b41e4f98' }, h("slot", { key: 'aa44cc7c7d04be55f188435635aef97c070df231' })));
+        return (h(Host, { key: '00e72c7c829603bb27cabe751fdcd504dc0c3890' }, h("slot", { key: '2d10aedf1a608b19e016f2b280448f810927afa6' })));
     }
     static get is() { return "spw-mosaic-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-mosaic/spw-mosaic.js

@@ -136,7 +136,7 @@ export class SpwMosaic {
         };
     }
     render() {
-        return (h(Host, { key: '3b254991dfedd8cd39506b9e591a2b2798dd28bc' }, h("div", { key: '394464511c4bba1acc87e5fdbd19b4e873932750', class: this.elementClass }, h("slot", { key: '3485aafc9ff0e1a26bb24d17f688627f226d724c' }))));
+        return (h(Host, { key: '8b547bf3289b4fd36266004b56dbd4e27302f217' }, h("div", { key: 'f9156b6debf0d4cdd35d4a97e19a818ca383c6ca', class: this.elementClass }, h("slot", { key: '74e30d3012df0c9d702e5e347155c0a0b07ec84a' }))));
     }
     static get is() { return "spw-mosaic"; }
     static get encapsulation() { return "shadow"; }