@spw-ds/spw-stencil-library 0.0.1

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

@@ -0,0 +1,220 @@
+import { h } from "@stencil/core";
+export class SpwLink {
+    constructor() {
+        this.onClick = (ev) => {
+            if (this.disabled) {
+                ev.preventDefault();
+                return;
+            }
+            this.spwClick.emit(ev);
+        };
+        this.href = undefined;
+        this.target = '_self';
+        this.rel = undefined;
+        this.icon = undefined;
+        this.iconPosition = 'right';
+        this.disabled = false;
+        this.accAriaLabel = undefined;
+        this.surface = 'light';
+    }
+    get elementClass() {
+        return {
+            'spw-link': true,
+            'spw-link--has-icon-right': this.icon && this.iconPosition === 'right',
+            'spw-link--has-icon-left': this.icon && this.iconPosition === 'left',
+            [`spw-link--surface-${this.surface}`]: true,
+            'spw-link--has-icon': !!this.icon,
+        };
+    }
+    render() {
+        const { href, rel, target, icon, iconPosition, accAriaLabel, disabled } = this;
+        const ariaAttributes = {
+            'aria-label': accAriaLabel,
+            'aria-disabled': disabled ? 'true' : null,
+        };
+        const iconClass = `spw-icon--${iconPosition}`;
+        const iconElement = icon ? h("spw-icon", { class: iconClass, icon: icon }) : null;
+        return (h("a", Object.assign({ key: '7fbaf9809b820f00c522a1f693fc7a253ff3468b', href: disabled ? undefined : href, rel: rel, target: target, class: this.elementClass, onClick: this.onClick }, ariaAttributes), iconPosition === 'left' && iconElement, h("div", { key: '7eaf70c4b1af79a1718094470d07efeaac065a7a', class: "spw-link__inner" }, h("slot", { key: 'c36015c66367b8b28449738ce9e1e368ec4e7e14' })), iconPosition === 'right' && iconElement));
+    }
+    static get is() { return "spw-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sp\u00E9cifie le lien href"
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attribut target (d\u00E9termine o\u00F9 ouvrir le lien)"
+                },
+                "attribute": "target",
+                "reflect": false,
+                "defaultValue": "'_self'"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Remplit l'attribut rel"
+                },
+                "attribute": "rel",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Si rempli, permet d'utiliser une r\u00E9f\u00E9rence d'ic\u00F4ne font-awesome"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Position de l'ic\u00F4ne \u00E0 l'int\u00E9rieur du lien (gauche ou droite)"
+                },
+                "attribute": "icon-position",
+                "reflect": false,
+                "defaultValue": "'right'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Si d\u00E9sactiv\u00E9, le lien n'est pas cliquable"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "accAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Remplit l'attribut aria-label, utilis\u00E9 \u00E0 des fins d'accessibilit\u00E9"
+                },
+                "attribute": "acc-aria-label",
+                "reflect": false
+            },
+            "surface": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Permet de choisir la surface d'arri\u00E8re-plan du lien"
+                },
+                "attribute": "surface",
+                "reflect": false,
+                "defaultValue": "'light'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "spwClick",
+                "name": "spwClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement d\u00E9clench\u00E9 lors du clic sur le lien"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=spw-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spw-link.js","sourceRoot":"","sources":["../../../src/components/spw-link/spw-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,OAAO;;QAuBV,YAAO,GAAG,CAAC,EAAc,EAAE,EAAE;YACnC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,OAAO;YACT,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,CAAC;;sBAvBwB,OAAO;;;4BAMS,OAAO;wBAEpB,KAAK;;uBAIG,OAAO;;IAa5C,IAAY,YAAY;QACtB,OAAO;YACL,UAAU,EAAE,IAAI;YAChB,0BAA0B,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO;YACtE,yBAAyB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM;YACpE,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAC3C,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAClC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC/E,MAAM,cAAc,GAAG;YACrB,YAAY,EAAE,YAAY;YAC1B,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;SAC1C,CAAC;QAEF,MAAM,SAAS,GAAG,aAAa,YAAY,EAAE,CAAC;QAC9C,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,gBAAU,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,GAAa,CAAC,CAAC,CAAC,IAAI,CAAC;QAEtF,OAAO,CACL,wEAAG,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAM,cAAc;YAChI,YAAY,KAAK,MAAM,IAAI,WAAW;YACvC,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,8DAAa,CACT;YACL,YAAY,KAAK,OAAO,IAAI,WAAW,CACtC,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'spw-link',\n  styleUrl: 'spw-link.scss',\n  shadow: true,\n})\nexport class SpwLink {\n  @Element() el: HTMLSpwLinkElement;\n\n  /** Spécifie le lien href */\n  @Prop() href: string;\n  /** Attribut target (détermine où ouvrir le lien) */\n  @Prop() target?: string = '_self';\n  /** Remplit l'attribut rel */\n  @Prop() rel?: string;\n  /** Si rempli, permet d'utiliser une référence d'icône font-awesome */\n  @Prop() icon?: string;\n  /** Position de l'icône à l'intérieur du lien (gauche ou droite) */\n  @Prop() iconPosition?: 'left' | 'right' = 'right';\n  /** Si désactivé, le lien n'est pas cliquable */\n  @Prop() disabled?: boolean = false;\n  /** Remplit l'attribut aria-label, utilisé à des fins d'accessibilité */\n  @Prop() accAriaLabel?: string;\n  /** Permet de choisir la surface d'arrière-plan du lien */\n  @Prop() surface?: 'light' | 'dark' = 'light';\n\n  /** Événement déclenché lors du clic sur le lien */\n  @Event() spwClick: EventEmitter<MouseEvent>;\n\n  private onClick = (ev: MouseEvent) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      return;\n    }\n    this.spwClick.emit(ev);\n  };\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-link': true,\n      'spw-link--has-icon-right': this.icon && this.iconPosition === 'right',\n      'spw-link--has-icon-left': this.icon && this.iconPosition === 'left',\n      [`spw-link--surface-${this.surface}`]: true,\n      'spw-link--has-icon': !!this.icon,\n    };\n  }\n\n  render() {\n    const { href, rel, target, icon, iconPosition, accAriaLabel, disabled } = this;\n    const ariaAttributes = {\n      'aria-label': accAriaLabel,\n      'aria-disabled': disabled ? 'true' : null,\n    };\n\n    const iconClass = `spw-icon--${iconPosition}`;\n    const iconElement = icon ? <spw-icon class={iconClass} icon={icon}></spw-icon> : null;\n\n    return (\n      <a href={disabled ? undefined : href} rel={rel} target={target} class={this.elementClass} onClick={this.onClick} {...ariaAttributes}>\n        {iconPosition === 'left' && iconElement}\n        <div class=\"spw-link__inner\">\n          <slot></slot>\n        </div>\n        {iconPosition === 'right' && iconElement}\n      </a>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1220px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-loading{display:flex}.spw-loading__spinner{animation:loading 1s linear infinite;border:4px solid var(--spw-color-themes-grey-grey-100);border-radius:50%;border-top-color:var(--spw-ds-primary);height:20px;width:20px}@keyframes loading{to{transform:rotate(1turn)}}.spw-loading__text{color:var(--spw-color-themes-grey-grey-800);margin-left:8px}.spw-tw-mb-10{margin-bottom:2.5rem}.spw-tw-mb-6{margin-bottom:1.5rem}.spw-tw-ml-2{margin-left:.5rem}.spw-tw-mr-4{margin-right:1rem}.spw-tw-mt-12{margin-top:3rem}.-spw-tw-mt-1{margin-top:-.25rem}.spw-tw-mb-2{margin-bottom:.5rem}

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

@@ -0,0 +1,44 @@
+import { Host, h } from "@stencil/core";
+export class SpwLoading {
+    constructor() {
+        this.text = 'Chargement...';
+    }
+    render() {
+        return (h(Host, { key: '1d72eb366cb08f33ba5a3f92c15979fa3295beaf' }, h("div", { key: '70337a12bf43ca63ad81fd35f0bfd6dd2c0f4576', class: "spw-loading" }, h("div", { key: '57aebc1b0c47e51d376a0a5b5da8f510c47a2dbc', class: "spw-loading__spinner" }), h("p", { key: '8de8b8f0bc0aa81788edc1bf03d70e0a3fb48b52', class: "spw-loading__text" }, this.text))));
+    }
+    static get is() { return "spw-loading"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-loading.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-loading.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Permet de sp\u00E9cifier un texte de chargement"
+                },
+                "attribute": "text",
+                "reflect": false,
+                "defaultValue": "'Chargement...'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=spw-loading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spw-loading.js","sourceRoot":"","sources":["../../../src/components/spw-loading/spw-loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;oBAEG,eAAe;;IAEvC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,aAAa;gBACtB,4DAAK,KAAK,EAAC,sBAAsB,GAAO;gBACxC,0DAAG,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,CAAK,CACxC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'spw-loading',\n  styleUrl: 'spw-loading.scss',\n  shadow: true,\n})\nexport class SpwLoading {\n  /** Permet de spécifier un texte de chargement */\n  @Prop() text?: string = 'Chargement...';\n\n  render() {\n    return (\n      <Host>\n        <div class=\"spw-loading\">\n          <div class=\"spw-loading__spinner\"></div>\n          <p class=\"spw-loading__text\">{this.text}</p>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1220px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-message{border-radius:16px;color:var(--spw-colors-support-grey-grey-900);font-size:16px;padding:24px}.spw-message__title-container{display:flex;flex-direction:column;flex-wrap:nowrap;gap:24px;justify-content:space-between}@media (min-width:1024px){.spw-message__title-container{flex-direction:row}}.spw-message__close{order:-1}@media (min-width:1024px){.spw-message__close{order:0}}.spw-message__title{display:block;flex:1;font-size:18px}.spw-message__title .spw-icon,.spw-message__title spw-icon{margin-right:6px;position:relative;top:1px}.spw-message__text{margin-top:12px}.spw-message--default{background:var(--spw-colors-support-grey-grey-100)}.spw-message--success{background:var(--spw-colors-multi-branding-green-green-50)}.spw-message--success .spw-icon,.spw-message--success spw-icon{color:var(--spw-colors-multi-branding-green-green-600)}.spw-message--alert{background:var(--spw-colors-multi-branding-red-red-50)}.spw-message--alert .spw-icon,.spw-message--alert spw-icon{color:var(--spw-colors-multi-branding-red-red-accent-3)}.spw-message--info{background:var(--spw-colors-multi-branding-blue-blue-50)}.spw-message--info .spw-icon,.spw-message--info spw-icon{color:var(--spw-colors-multi-branding-blue-blue-accent-3)}.spw-message--warning{background:#fffdeb}.spw-message--warning .spw-icon,.spw-message--warning spw-icon{color:#e6b800}.spw-message spw-link{--spw-link-color:var(--spw-colors-support-grey-grey-900);--spw-link-hover-color:var(--spw-colors-support-grey-grey-900);--spw-link-active-color:var(--spw-colors-support-grey-grey-800);--spw-link-padding:12px}.spw-message spw-link:focus-visible{outline:2px solid var(--spw-ds-focus);outline-offset:1px}

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

@@ -0,0 +1,141 @@
+import { Host, h } from "@stencil/core";
+import { getIcon, getElementClass, shouldHideMessage, dismissMessage } from "./utils.js";
+export class SpwMessage {
+    constructor() {
+        this.handleKeyDown = (ev) => {
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+                this.handleDismiss();
+            }
+        };
+        this.handleDismiss = () => {
+            dismissMessage(this.messageId, () => {
+                this.isVisible = false;
+            });
+        };
+        this.variant = 'default';
+        this.messageId = undefined;
+        this.isDismissable = true;
+        this.dismissableText = 'Masquer';
+        this.messageTitle = 'Notification';
+        this.isVisible = true;
+    }
+    componentWillLoad() {
+        this.isVisible = !shouldHideMessage(this.messageId);
+    }
+    render() {
+        return this.isVisible ? (h(Host, null, h("div", { class: getElementClass(this.variant), role: "alert", "aria-live": "polite", "aria-label": this.messageTitle }, h("div", { class: "spw-message__title-container" }, h("strong", { class: "spw-message__title" }, h("spw-icon", { icon: getIcon(this.variant) }), " ", this.messageTitle), this.isDismissable && (h("spw-link", { tabindex: "0", icon: "fa-close", class: "spw-message__close", "aria-label": this.dismissableText, onClick: this.handleDismiss, onKeyDown: this.handleKeyDown }, this.dismissableText))), h("div", { class: "spw-message__text" }, h("slot", null))))) : null;
+    }
+    static get is() { return "spw-message"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-message.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'success' | 'info' | 'alert' | 'warning'",
+                    "resolved": "\"alert\" | \"default\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Le type de variante"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "messageId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifiant unique pour le message"
+                },
+                "attribute": "message-id",
+                "reflect": false
+            },
+            "isDismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Si la notification est masquable"
+                },
+                "attribute": "is-dismissable",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "dismissableText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du bouton pour masquer la notification"
+                },
+                "attribute": "dismissable-text",
+                "reflect": false,
+                "defaultValue": "'Masquer'"
+            },
+            "messageTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Titre de la notification"
+                },
+                "attribute": "message-title",
+                "reflect": false,
+                "defaultValue": "'Notification'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=spw-message.js.map

package/dist/collection/components/spw-message/spw-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spw-message.js","sourceRoot":"","sources":["../../../src/components/spw-message/spw-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAOzF,MAAM,OAAO,UAAU;;QAoBb,kBAAa,GAAG,CAAC,EAAiB,EAAE,EAAE;YAC5C,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACvB,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAG,EAAE;YAC3B,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;gBAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;uBA3BsE,SAAS;;6BAIhD,IAAI;+BAEH,SAAS;4BAEZ,cAAc;yBAEf,IAAI;;IAElC,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACtD,CAAC;IAeD,MAAM;QACJ,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACtB,EAAC,IAAI;YACH,WAAK,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,EAAC,OAAO,eAAW,QAAQ,gBAAa,IAAI,CAAC,YAAY;gBACtG,WAAK,KAAK,EAAC,8BAA8B;oBACvC,cAAQ,KAAK,EAAC,oBAAoB;wBAChC,gBAAU,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,GAAa;;wBAAE,IAAI,CAAC,YAAY,CAC9D;oBACR,IAAI,CAAC,aAAa,IAAI,CACrB,gBAAU,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,oBAAoB,gBAAa,IAAI,CAAC,eAAe,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,aAAa,IAC3J,IAAI,CAAC,eAAe,CACZ,CACZ,CACG;gBACN,WAAK,KAAK,EAAC,mBAAmB;oBAC5B,eAAa,CACT,CACF,CACD,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Element } from '@stencil/core';\nimport { getIcon, getElementClass, shouldHideMessage, dismissMessage } from './utils.js';\n\n@Component({\n  tag: 'spw-message',\n  styleUrl: 'spw-message.scss',\n  shadow: true,\n})\nexport class SpwMessage {\n  @Element() el: HTMLSpwMessageElement;\n\n  /** Le type de variante */\n  @Prop() variant: 'default' | 'success' | 'info' | 'alert' | 'warning' = 'default';\n  /** Identifiant unique pour le message */\n  @Prop() messageId: string;\n  /** Si la notification est masquable */\n  @Prop() isDismissable: boolean = true;\n  /** Texte du bouton pour masquer la notification */\n  @Prop() dismissableText: string = 'Masquer';\n  /** Titre de la notification */\n  @Prop() messageTitle: string = 'Notification';\n\n  @State() isVisible: boolean = true;\n\n  componentWillLoad() {\n    this.isVisible = !shouldHideMessage(this.messageId);\n  }\n\n  private handleKeyDown = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter') {\n      ev.preventDefault();\n      this.handleDismiss();\n    }\n  };\n\n  private handleDismiss = () => {\n    dismissMessage(this.messageId, () => {\n      this.isVisible = false;\n    });\n  };\n\n  render() {\n    return this.isVisible ? (\n      <Host>\n        <div class={getElementClass(this.variant)} role=\"alert\" aria-live=\"polite\" aria-label={this.messageTitle}>\n          <div class=\"spw-message__title-container\">\n            <strong class=\"spw-message__title\">\n              <spw-icon icon={getIcon(this.variant)}></spw-icon> {this.messageTitle}\n            </strong>\n            {this.isDismissable && (\n              <spw-link tabindex=\"0\" icon=\"fa-close\" class=\"spw-message__close\" aria-label={this.dismissableText} onClick={this.handleDismiss} onKeyDown={this.handleKeyDown}>\n                {this.dismissableText}\n              </spw-link>\n            )}\n          </div>\n          <div class=\"spw-message__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    ) : null;\n  }\n}\n"]}

package/dist/collection/components/spw-message/utils.js

@@ -0,0 +1,27 @@
+export const getIcon = variant => {
+  const icons = {
+    default: 'fa-lightbulb',
+    success: 'fa-check',
+    info: 'fa-info-circle',
+    warning: 'fa-exclamation-triangle',
+    alert: 'fa-exclamation-triangle',
+  };
+
+  return icons[variant] || icons['default'];
+};
+
+export const getElementClass = variant => {
+  return {
+    'spw-message': true,
+    [`spw-message--${variant}`]: true,
+  };
+};
+
+export const shouldHideMessage = messageId => {
+  return !!localStorage.getItem(`spw-message-${messageId}`);
+};
+
+export const dismissMessage = (messageId, hideCallback) => {
+  localStorage.setItem(`spw-message-${messageId}`, 'true');
+  hideCallback();
+};

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

@@ -0,0 +1,2 @@
+
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1220px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-modal{align-items:center;display:none;height:100%;justify-content:center;left:0;overflow-y:auto;position:fixed;top:0;width:100%;z-index:1060}.spw-modal--opened{display:flex}.spw-modal__overlay{background:#000;height:100%;left:0;opacity:.7;position:absolute;top:0;width:100%;z-index:0}.spw-modal__content-container{align-items:stretch;background-color:#fff;border-radius:var(--spw-spacings-border-radius-lg);box-shadow:var(--spw-effect-elevation-6);box-sizing:border-box;display:flex;justify-content:center;overflow:hidden;position:absolute;width:90%}.spw-modal__content-container--small{max-width:480px}.spw-modal__content-container--medium{max-width:600px}.spw-modal__content-container--large{max-width:768px}.spw-modal__content-container--fluid{max-width:100%}.spw-modal__content{border:1px solid var(--spw-color-themes-grey-grey-300);display:flex;flex-direction:column;max-height:90vh;overflow-y:auto;width:100%}.spw-modal--sticky-buttons .spw-modal__content{overflow-y:visible}.spw-modal__icon-container{align-items:center;align-self:stretch;background-color:#fff;display:flex;justify-content:center;width:32px}.spw-modal__header{align-items:center;border-radius:1px 1px 0 0;box-sizing:border-box;color:var(--spw-colors-support-grey-grey-900);display:flex;justify-content:space-between;margin-bottom:12px;margin-top:6px;padding:24px 24px 0}.spw-modal__caption{word-wrap:break-word;overflow:hidden;white-space:pre-wrap}.spw-modal__header h2{color:var(--spw-colors-support-grey-grey-900);font-size:18px;margin:0}.spw-modal__header button{background:none;border:none;cursor:pointer;font-size:1.5em;padding:0}.spw-modal__close-button{cursor:pointer;font-size:21px;position:absolute;right:12px;top:12px}.spw-modal__close-button:hover{opacity:.7}.spw-modal__body{box-sizing:border-box;color:var(--spw-colors-support-grey-grey-700);flex:1;font-size:16px;margin-bottom:12px;padding:0 24px}.spw-modal--sticky-buttons .spw-modal__body{overflow-y:auto}.spw-modal__buttons ::slotted([slot=buttons]){padding:12px 24px 24px}.spw-modal__footer--buttons-present ::slotted(*){display:flex;gap:12px;justify-content:flex-end;padding:8px 24px 24px}.spw-modal__content-container--small .spw-modal__footer--buttons-present ::slotted(*){flex-direction:column;gap:8px}.spw-modal__content-container--medium .spw-modal__footer--buttons-present ::slotted(*){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.spw-modal__border{align-items:center;display:flex;flex-grow:1;font-size:1.5em;justify-content:center;width:100%}