@spw-ds/spw-stencil-library 1.9.0 → 1.10.0

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

@@ -0,0 +1,426 @@
+import { Host, h } from "@stencil/core";
+import { animationTo } from "../../utils/animation";
+const VARIANT_ICONS = {
+    success: 'fa-check',
+    info: 'fa-info',
+    warning: 'fa-exclamation',
+    alert: 'fa-close',
+};
+export class SpwToast {
+    constructor() {
+        /** Variante du toast */
+        this.variant = 'info';
+        /** Titre du toast (gras) */
+        this.heading = '';
+        /** Message / description du toast */
+        this.message = '';
+        /** Texte du lien optionnel */
+        this.linkLabel = '';
+        /** URL du lien optionnel */
+        this.linkHref = '';
+        /** Durée d'affichage automatique en ms (0 = pas d'auto-dismiss) */
+        this.duration = 5000;
+        /** Affiche le bouton de fermeture */
+        this.dismissable = true;
+        /** Texte du bouton de fermeture */
+        this.dismissText = 'Masquer';
+        this.visible = false;
+        this.autoDismissTimer = null;
+        this.timerStartedAt = null;
+        this.timerRemaining = null;
+        // Swipe
+        this.swipeTouchStartX = 0;
+        this.swipeTouchStartY = 0;
+    }
+    componentDidLoad() {
+        this.show();
+    }
+    disconnectedCallback() {
+        this.clearTimer();
+    }
+    clearTimer() {
+        if (this.autoDismissTimer !== null) {
+            clearTimeout(this.autoDismissTimer);
+            this.autoDismissTimer = null;
+        }
+    }
+    startAutoDismiss(remaining) {
+        if (this.duration <= 0)
+            return;
+        const ms = remaining !== null && remaining !== void 0 ? remaining : this.duration;
+        this.timerStartedAt = Date.now();
+        this.timerRemaining = ms;
+        this.autoDismissTimer = setTimeout(() => this.dismiss(), ms);
+    }
+    pauseTimer() {
+        var _a;
+        if (this.autoDismissTimer === null || this.timerStartedAt === null)
+            return;
+        this.clearTimer();
+        const elapsed = Date.now() - this.timerStartedAt;
+        this.timerRemaining = Math.max(0, ((_a = this.timerRemaining) !== null && _a !== void 0 ? _a : this.duration) - elapsed);
+        this.timerStartedAt = null;
+        // pause CSS animation
+        if (this.progressEl) {
+            this.progressEl.style.animationPlayState = 'paused';
+        }
+    }
+    resumeTimer() {
+        if (this.timerRemaining === null || this.timerRemaining <= 0)
+            return;
+        this.startAutoDismiss(this.timerRemaining);
+        // resume CSS animation
+        if (this.progressEl) {
+            this.progressEl.style.animationPlayState = 'running';
+        }
+    }
+    /** Affiche le toast avec animation */
+    async show() {
+        this.visible = true;
+        await new Promise(r => requestAnimationFrame(r));
+        if (this.containerEl) {
+            animationTo(this.containerEl, SLIDE_IN_KEYFRAMES, { duration: 300 });
+        }
+        this.startAutoDismiss();
+    }
+    /** Ferme le toast avec animation */
+    async dismiss() {
+        this.clearTimer();
+        if (this.containerEl) {
+            const anim = animationTo(this.containerEl, SLIDE_OUT_KEYFRAMES, { duration: 200 });
+            anim.addEventListener('finish', () => this.remove());
+        }
+        else {
+            this.remove();
+        }
+    }
+    remove() {
+        this.visible = false;
+        this.spwToastDismiss.emit();
+        this.el.remove();
+    }
+    durationChanged() {
+        this.clearTimer();
+        this.timerRemaining = null;
+        this.startAutoDismiss();
+    }
+    get resolvedIcon() {
+        return this.icon || VARIANT_ICONS[this.variant];
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        const hasProgress = this.duration > 0;
+        return (h(Host, null, h("div", { class: { 'spw-toast': true, [`spw-toast--${this.variant}`]: true }, role: "alert", "aria-live": "assertive", "aria-atomic": "true", ref: el => (this.containerEl = el), onMouseEnter: () => this.pauseTimer(), onMouseLeave: () => this.resumeTimer(), onTouchStart: (e) => {
+                this.swipeTouchStartX = e.touches[0].clientX;
+                this.swipeTouchStartY = e.touches[0].clientY;
+            }, onTouchEnd: (e) => {
+                const dx = e.changedTouches[0].clientX - this.swipeTouchStartX;
+                const dy = e.changedTouches[0].clientY - this.swipeTouchStartY;
+                if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
+                    this.dismiss();
+                }
+            } }, h("div", { class: "spw-toast__aside" }, h("div", { class: "spw-toast__icon-wrapper" }, h("spw-icon", { variant: "fa-regular", icon: this.resolvedIcon }))), h("div", { class: "spw-toast__body" }, h("div", { class: "spw-toast__top" }, this.heading && h("p", { class: "spw-toast__heading" }, this.heading), this.dismissable && (h("button", { class: "spw-toast__close", "aria-label": this.dismissText, onClick: () => this.dismiss() }, h("span", { class: "spw-toast__close-label" }, this.dismissText), h("spw-icon", { icon: "fa-xmark" })))), this.message && h("p", { class: "spw-toast__message" }, this.message), this.linkLabel && (h("a", { class: "spw-toast__link", href: this.linkHref || undefined, role: !this.linkHref ? 'button' : undefined, tabindex: !this.linkHref ? '0' : undefined, onClick: e => {
+                if (!this.linkHref)
+                    e.preventDefault();
+                this.spwToastLinkClick.emit();
+            }, onKeyDown: e => {
+                if (!this.linkHref && (e.key === 'Enter' || e.key === ' ')) {
+                    e.preventDefault();
+                    this.spwToastLinkClick.emit();
+                }
+            } }, this.linkLabel))), hasProgress && h("div", { class: "spw-toast__progress", style: { animationDuration: `${this.duration}ms` }, ref: el => (this.progressEl = el) }))));
+    }
+    static get is() { return "spw-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-toast.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpwToastVariant",
+                    "resolved": "\"alert\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "SpwToastVariant": {
+                            "location": "local",
+                            "path": "/Users/pectonite/Desktop/SPW/spw-design-system/packages/spw-stencil-library/src/components/spw-toast/spw-toast.tsx",
+                            "id": "src/components/spw-toast/spw-toast.tsx::SpwToastVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante du toast"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'info'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Titre du toast (gras)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message / description du toast"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "linkLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du lien optionnel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "link-label",
+                "defaultValue": "''"
+            },
+            "linkHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL du lien optionnel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "link-href",
+                "defaultValue": "''"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dur\u00E9e d'affichage automatique en ms (0 = pas d'auto-dismiss)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "5000"
+            },
+            "dismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Affiche le bouton de fermeture"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissable",
+                "defaultValue": "true"
+            },
+            "dismissText": {
+                "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": "dismiss-text",
+                "defaultValue": "'Masquer'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Ic\u00F4ne personnalis\u00E9e"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "spwToastDismiss",
+                "name": "spwToastDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9mis quand le toast est ferm\u00E9"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "spwToastLinkClick",
+                "name": "spwToastLinkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9mis lors du clic sur le lien (utile en Angular sans href)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Affiche le toast avec animation",
+                    "tags": []
+                }
+            },
+            "dismiss": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Ferme le toast avec animation",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "duration",
+                "methodName": "durationChanged"
+            }];
+    }
+}
+const SLIDE_IN_KEYFRAMES = [
+    { offset: 0, opacity: '0', transform: 'translateY(20%)', easing: 'ease-out' },
+    { offset: 1, opacity: '1', transform: 'translateY(0)', easing: 'ease-out' },
+];
+const SLIDE_OUT_KEYFRAMES = [
+    { offset: 0, opacity: '1' },
+    { offset: 1, opacity: '0' },
+];

package/dist/collection/components/spw-toc/spw-toc-container/spw-toc-container.css

@@ -38,7 +38,7 @@ ul {
 :host *::before,
 :host *::after {
   box-sizing: inherit;
-  font-family: "Nunito Sans";
+  font-family: var(--spw-ds-font-main);
 }
 
 /* Sections

package/dist/collection/components/spw-toc/spw-toc-container/spw-toc-container.js

@@ -52,7 +52,7 @@ export class SpwTocContainer {
         return tocItems;
     }
     render() {
-        return (h(Host, { key: 'b5fd2f8a94d45c026d341220b9d8b687f6df42ea' }, h("slot", { key: '9eac6079896fcf196861a878ed866c096bfdeec1' })));
+        return (h(Host, { key: '7b7dc2303b766d3cae15f8a58d0923ee7cf86c81' }, h("slot", { key: '6a38b34550e70a223441c0103a7d5db9ff92d2f5' })));
     }
     static get is() { return "spw-toc-container"; }
     static get originalStyleUrls() {

package/dist/collection/components/spw-toc/spw-toc-navigation/spw-toc-navigation.css

@@ -38,7 +38,7 @@ ul {
 :host *::before,
 :host *::after {
   box-sizing: inherit;
-  font-family: "Nunito Sans";
+  font-family: var(--spw-ds-font-main);
 }
 
 /* Sections
@@ -414,7 +414,7 @@ template {
   content: "";
   position: absolute;
   left: 9px;
-  top: 50%;
+  top: calc(0.25rem + 0.5em);
   width: 2px;
   background-color: #e0e0e0;
   z-index: 0;
@@ -424,7 +424,7 @@ template {
   content: "";
   position: absolute;
   left: 9px;
-  top: 50%;
+  top: calc(0.25rem + 0.5em);
   width: 2px;
   background-color: var(--spw-ds-primary);
   z-index: 1;
@@ -438,7 +438,7 @@ template {
 .spw-toc li .spw-toc__progress-dot {
   position: absolute;
   left: 0.25rem;
-  top: 50%;
+  top: calc(0.25rem + 0.5em + 3px);
   transform: translateY(-50%);
   width: 13px;
   height: 13px;

package/dist/collection/components/spw-toc/spw-toc-navigation/spw-toc-navigation.js

@@ -6,12 +6,45 @@ export class SpwTocNavigation {
         this.currentH2Index = -1;
         this.h2ProgressPercents = new Map();
         this.clickedH2Index = -1;
+        this.h2Distances = new Map();
     }
     async componentDidLoad() {
         await this.loadItems();
         this.setupIntersectionObserver();
         this.setupScrollHandler();
     }
+    componentDidRender() {
+        this.recalculateH2Distances();
+    }
+    recalculateH2Distances() {
+        const h2Items = this.items.filter(item => item.level === 2);
+        const h2Indices = this.items.map((item, idx) => (item.level === 2 ? idx : -1)).filter(idx => idx !== -1);
+        const newDistances = new Map();
+        h2Items.forEach((h2Item, h2ListIndex) => {
+            const currentIndex = h2Indices[h2ListIndex];
+            if (h2ListIndex < h2Items.length - 1) {
+                const nextH2Item = h2Items[h2ListIndex + 1];
+                const currentLi = this.el.querySelector(`li:has(a[href="#${h2Item.id}"])`);
+                const nextLi = this.el.querySelector(`li:has(a[href="#${nextH2Item.id}"])`);
+                if (currentLi && nextLi) {
+                    const distance = nextLi.offsetTop - currentLi.offsetTop;
+                    newDistances.set(currentIndex, distance);
+                }
+            }
+        });
+        let changed = newDistances.size !== this.h2Distances.size;
+        if (!changed) {
+            for (const [key, val] of newDistances) {
+                if (this.h2Distances.get(key) !== val) {
+                    changed = true;
+                    break;
+                }
+            }
+        }
+        if (changed) {
+            this.h2Distances = newDistances;
+        }
+    }
     disconnectedCallback() {
         if (this.observer) {
             this.observer.disconnect();
@@ -225,8 +258,8 @@ export class SpwTocNavigation {
             return null;
         }
         const h2Items = this.items.filter(item => item.level === 2);
-        const h2Indices = this.items.map((item, idx) => (item.level === 2 ? idx : -1)).filter(idx => idx !== -1);
         return (h(Host, null, h("nav", { class: "spw-toc" }, h("ul", null, this.items.map((item, index) => {
+            var _a;
             let h2IndexForItem = -1;
             if (item.level === 2) {
                 h2IndexForItem = h2Items.findIndex(h2 => h2.id === item.id);
@@ -243,12 +276,7 @@ export class SpwTocNavigation {
             const barStatus = this.getH2BarStatus(progress);
             let distanceToNextH2 = 0;
             if (item.level === 2) {
-                const currentH2ListIndex = h2Indices.indexOf(index);
-                if (currentH2ListIndex !== -1 && currentH2ListIndex < h2Indices.length - 1) {
-                    const nextH2Index = h2Indices[currentH2ListIndex + 1];
-                    const itemsBetween = nextH2Index - index;
-                    distanceToNextH2 = itemsBetween * 32;
-                }
+                distanceToNextH2 = (_a = this.h2Distances.get(index)) !== null && _a !== void 0 ? _a : 0;
             }
             const styleVars = {};
             if (item.level === 2) {
@@ -284,7 +312,8 @@ export class SpwTocNavigation {
             "currentItemIndex": {},
             "currentH2Index": {},
             "h2ProgressPercents": {},
-            "clickedH2Index": {}
+            "clickedH2Index": {},
+            "h2Distances": {}
         };
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/spw-toc/spw-toc.css

@@ -38,7 +38,7 @@ ul {
 :host *::before,
 :host *::after {
   box-sizing: inherit;
-  font-family: "Nunito Sans";
+  font-family: var(--spw-ds-font-main);
 }
 
 /* Sections

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SpwToc {
     render() {
-        return (h(Host, { key: '8b90d59d3d764448636a8cd909bc5efd7abca656' }, h("slot", { key: '9bcda884219f6b3f21281db81c9676eae958bd0e' })));
+        return (h(Host, { key: '081a5ed85f247d83bc58256651d9ff9af5059cde' }, h("slot", { key: '0d6d6c98fe0b19de1912c3ab3832e1c773f4fcdd' })));
     }
     static get is() { return "spw-toc"; }
     static get originalStyleUrls() {

package/dist/collection/components/spw-tooltip/spw-tooltip.css

@@ -38,7 +38,7 @@ ul {
 :host *::before,
 :host *::after {
   box-sizing: inherit;
-  font-family: "Nunito Sans";
+  font-family: var(--spw-ds-font-main);
 }
 
 /* Sections

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

@@ -127,7 +127,7 @@ export class SpwTooltip {
         };
     }
     render() {
-        return (h("div", { key: '527f005c9921c6e122ddb9aac4d56afc5031a6c6', class: this.classes, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: 'ec5e7e9884dee44f5a030671d20508f96b1bb21d' })));
+        return (h("div", { key: '14d15348761912581fb36d97e7a5e7339c7088f5', class: this.classes, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: '081813407cfb98b6fd7dd8769c45aded6a9556c8' })));
     }
     static get is() { return "spw-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-topbar/spw-topbar.css

@@ -38,7 +38,7 @@ ul {
 :host *::before,
 :host *::after {
   box-sizing: inherit;
-  font-family: "Nunito Sans";
+  font-family: var(--spw-ds-font-main);
 }
 
 /* Sections