@spw-ds/spw-stencil-library 0.0.1

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

@@ -0,0 +1,450 @@
+import { h } from "@stencil/core";
+export class SpwTextarea {
+    constructor() {
+        this.internalValue = '';
+        this.value = undefined;
+        this.label = '';
+        this.placeholder = undefined;
+        this.disabled = undefined;
+        this.name = undefined;
+        this.rows = 3;
+        this.minLength = undefined;
+        this.maxLength = undefined;
+        this.isSearch = false;
+        this.required = false;
+        this.size = 'medium';
+        this.indicator = undefined;
+        this.assistiveText = undefined;
+        this.error = '';
+        this.hint = '';
+        this.success = '';
+        this.showErrorIcon = true;
+        this.showHintIcon = true;
+        this.showSuccessIcon = true;
+    }
+    valueChangedHandler(newValue) {
+        this.internalValue = newValue;
+        this.internals.setFormValue(this.internalValue);
+        this.valueChanged.emit(this.internalValue);
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.internalValue = this.value;
+        }
+    }
+    handleChange(event) {
+        this.internalValue = event.target.value;
+        this.value = this.internalValue;
+        this.internals.setFormValue(this.internalValue);
+        this.valueChanged.emit(this.internalValue);
+    }
+    renderErrorMessage() {
+        if (this.error) {
+            return (h("spw-field-message", { variant: "error", showIcon: this.showErrorIcon }, this.error));
+        }
+    }
+    renderHintMessage() {
+        if (this.hint) {
+            return (h("spw-field-message", { variant: "hint", showIcon: this.showHintIcon }, this.hint));
+        }
+    }
+    renderSuccessMessage() {
+        if (this.success) {
+            return (h("spw-field-message", { variant: "success", showIcon: this.showSuccessIcon }, this.success));
+        }
+    }
+    get elementClass() {
+        return {
+            'spw-textarea': true,
+            [`spw-textarea--${this.size}`]: true,
+            'spw-textarea--is-search': this.isSearch,
+            'spw-textarea--is-error': !!this.error,
+            'spw-textarea--disabled': this.disabled,
+        };
+    }
+    render() {
+        return (h("div", { key: 'df4a93564d0c2db2803653d0280755581b785fe1', class: this.elementClass }, this.label && h("spw-field-label", { key: '94cc59c7618732086323a774aeb39fbfc6c8f1de', label: this.label, name: this.name, required: this.required }), this.assistiveText && (h("spw-field-message", { key: '8d270afe2394b3c6c7262be050f4301825aa6b60', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '748d04510eda0c5c9e4fc8a02e025e113627adc1', class: "spw-textarea__container" }, h("textarea", { key: '91079252fab37964e5c35281d01fd1f67b08a051', class: "spw-textarea__input", value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, name: this.name, id: this.name, rows: this.rows, minLength: this.minLength, maxLength: this.maxLength, required: this.required, onInput: event => this.handleChange(event) })), this.renderErrorMessage(), this.renderHintMessage(), this.renderSuccessMessage()));
+    }
+    static get is() { return "spw-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-textarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Valeur actuelle du champ textarea, mutable et refl\u00E9t\u00E9e dans le DOM"
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte \u00E0 afficher au-dessus du champ textarea"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du placeholder pour le champ textarea"
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Si `true`, le champ textarea est d\u00E9sactiv\u00E9 et ne peut pas \u00EAtre utilis\u00E9"
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Attribut `name` de l'\u00E9l\u00E9ment textarea"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre de lignes \u00E0 afficher dans le champ textarea"
+                },
+                "attribute": "rows",
+                "reflect": false,
+                "defaultValue": "3"
+            },
+            "minLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Longueur minimale pour la valeur du textarea"
+                },
+                "attribute": "min-length",
+                "reflect": false
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Longueur maximale pour la valeur du textarea"
+                },
+                "attribute": "max-length",
+                "reflect": false
+            },
+            "isSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si l'input est un champ de recherche"
+                },
+                "attribute": "is-search",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indique si le champ textarea est requis"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'medium'",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sp\u00E9cifie la taille du champ textarea : 'large' ou 'medium'"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "indicator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicateur \u00E0 afficher \u00E0 droite du champ textarea"
+                },
+                "attribute": "indicator",
+                "reflect": false
+            },
+            "assistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte d'assistance \u00E0 afficher au-dessus du champ textarea"
+                },
+                "attribute": "assistive-text",
+                "reflect": false
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message d'erreur \u00E0 afficher sous le champ textarea"
+                },
+                "attribute": "error",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message d'indication (hint) \u00E0 afficher sous le champ textarea"
+                },
+                "attribute": "hint",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "success": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Message de succ\u00E8s \u00E0 afficher sous le champ textarea"
+                },
+                "attribute": "success",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "showErrorIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Affiche une ic\u00F4ne d'erreur si vrai"
+                },
+                "attribute": "show-error-icon",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showHintIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Affiche une ic\u00F4ne d'indication si vrai"
+                },
+                "attribute": "show-hint-icon",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showSuccessIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Affiche une ic\u00F4ne de succ\u00E8s si vrai"
+                },
+                "attribute": "show-success-icon",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u00C9v\u00E9nement \u00E9mis lorsque la valeur du champ textarea change"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChangedHandler"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=spw-textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spw-textarea.js","sourceRoot":"","sources":["../../../src/components/spw-textarea/spw-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Event, EventEmitter, Component, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-textarea',\n  styleUrl: 'spw-textarea.scss',\n  formAssociated: true,\n  shadow: true,\n})\nexport class SpwTextarea {\n  /** Événement émis lorsque la valeur du champ textarea change */\n  @Event() valueChanged: EventEmitter<string>;\n\n  @State() internalValue: string = '';\n\n  /** Valeur actuelle du champ textarea, mutable et reflétée dans le DOM */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n  /** Texte à afficher au-dessus du champ textarea */\n  @Prop() label?: string = '';\n  /** Texte du placeholder pour le champ textarea */\n  @Prop() placeholder: string;\n  /** Si `true`, le champ textarea est désactivé et ne peut pas être utilisé */\n  @Prop() disabled?: boolean;\n  /** Attribut `name` de l'élément textarea */\n  @Prop() name: string;\n  /** Nombre de lignes à afficher dans le champ textarea */\n  @Prop() rows?: number = 3;\n  /** Longueur minimale pour la valeur du textarea */\n  @Prop() minLength?: number;\n  /** Longueur maximale pour la valeur du textarea */\n  @Prop() maxLength?: number;\n  /** Indique si l'input est un champ de recherche */\n  @Prop() isSearch?: boolean = false;\n  /** Indique si le champ textarea est requis */\n  @Prop() required?: boolean = false;\n  /** Spécifie la taille du champ textarea : 'large' ou 'medium' */\n  @Prop() size?: 'large' | 'medium' = 'medium';\n  /** Indicateur à afficher à droite du champ textarea */\n  @Prop() indicator?: string;\n  /** Texte d'assistance à afficher au-dessus du champ textarea */\n  @Prop() assistiveText?: string;\n  /** Message d'erreur à afficher sous le champ textarea */\n  @Prop() error?: string = '';\n  /** Message d'indication (hint) à afficher sous le champ textarea */\n  @Prop() hint?: string = '';\n  /** Message de succès à afficher sous le champ textarea */\n  @Prop() success?: string = '';\n  /** Affiche une icône d'erreur si vrai */\n  @Prop() showErrorIcon?: boolean = true;\n  /** Affiche une icône d'indication si vrai */\n  @Prop() showHintIcon?: boolean = true;\n  /** Affiche une icône de succès si vrai */\n  @Prop() showSuccessIcon?: boolean = true;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Watch('value')\n  valueChangedHandler(newValue: string) {\n    this.internalValue = newValue;\n    this.internals.setFormValue(this.internalValue);\n    this.valueChanged.emit(this.internalValue);\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.internalValue = this.value;\n    }\n  }\n\n  private handleChange(event) {\n    this.internalValue = event.target.value;\n    this.value = this.internalValue;\n    this.internals.setFormValue(this.internalValue);\n    this.valueChanged.emit(this.internalValue);\n  }\n\n  private renderErrorMessage() {\n    if (this.error) {\n      return (\n        <spw-field-message variant=\"error\" showIcon={this.showErrorIcon}>\n          {this.error}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private renderHintMessage() {\n    if (this.hint) {\n      return (\n        <spw-field-message variant=\"hint\" showIcon={this.showHintIcon}>\n          {this.hint}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private renderSuccessMessage() {\n    if (this.success) {\n      return (\n        <spw-field-message variant=\"success\" showIcon={this.showSuccessIcon}>\n          {this.success}\n        </spw-field-message>\n      );\n    }\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-textarea': true,\n      [`spw-textarea--${this.size}`]: true,\n      'spw-textarea--is-search': this.isSearch,\n      'spw-textarea--is-error': !!this.error,\n      'spw-textarea--disabled': this.disabled,\n    };\n  }\n\n  render() {\n    return (\n      <div class={this.elementClass}>\n        {this.label && <spw-field-label label={this.label} name={this.name} required={this.required}></spw-field-label>}\n        {this.assistiveText && (\n          <spw-field-message class=\"spw-tw-mb-2 -spw-tw-mt-1\" variant=\"hint\" showIcon={false}>\n            {this.assistiveText}\n          </spw-field-message>\n        )}\n        <div class=\"spw-textarea__container\">\n          <textarea\n            class=\"spw-textarea__input\"\n            value={this.internalValue}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            name={this.name}\n            id={this.name}\n            rows={this.rows}\n            minLength={this.minLength}\n            maxLength={this.maxLength}\n            required={this.required}\n            onInput={event => this.handleChange(event)}\n          ></textarea>\n        </div>\n        {this.renderErrorMessage()}\n        {this.renderHintMessage()}\n        {this.renderSuccessMessage()}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/spw-theme-provider/spw-theme-provider.js

@@ -0,0 +1,59 @@
+import { h } from "@stencil/core";
+import { themes } from "../../themes/themes";
+export class SpwThemeProvider {
+    constructor() {
+        this.theme = 'rouge';
+    }
+    componentWillLoad() {
+        this.applyTheme(this.theme);
+    }
+    componentWillUpdate() {
+        this.applyTheme(this.theme);
+    }
+    applyTheme(theme) {
+        const styleId = 'theme-styles';
+        let styleElement = document.getElementById(styleId);
+        if (!styleElement) {
+            styleElement = document.createElement('style');
+            styleElement.id = styleId;
+            document.head.appendChild(styleElement);
+        }
+        const css = themes[theme];
+        styleElement.innerHTML = css;
+        document.documentElement.setAttribute('data-theme', theme);
+    }
+    render() {
+        return (h("main", { key: 'f654e3ca9c0acb6596f338ced77b6572ea0c53df', class: `spw-theme-${this.theme}` }, h("slot", { key: '2229fa760c6d37a1821337deae00991636b5d0ec' })));
+    }
+    static get is() { return "spw-theme-provider"; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SpwTheme",
+                    "resolved": "\"bleu\" | \"bleuClair\" | \"gris\" | \"indigo\" | \"mauve\" | \"orange\" | \"rouge\" | \"turquoise\" | \"vert\" | \"vertLeger\"",
+                    "references": {
+                        "SpwTheme": {
+                            "location": "import",
+                            "path": "@themes/themes",
+                            "id": "src/themes/themes.ts::SpwTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "D\u00E9finit le th\u00E8me employ\u00E9, conditionne les tokens associ\u00E9s au th\u00E8me"
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'rouge'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=spw-theme-provider.js.map

package/dist/collection/components/spw-theme-provider/spw-theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spw-theme-provider.js","sourceRoot":"","sources":["../../../src/components/spw-theme-provider/spw-theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAY,MAAM,gBAAgB,CAAC;AAMlD,MAAM,OAAO,gBAAgB;;qBAED,OAAO;;IAIjC,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAEO,UAAU,CAAC,KAAe;QAChC,MAAM,OAAO,GAAG,cAAc,CAAC;QAC/B,IAAI,YAAY,GAAG,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAqB,CAAC;QAExE,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC/C,YAAY,CAAC,EAAE,GAAG,OAAO,CAAC;YAC1B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAC1C,CAAC;QAED,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC1B,YAAY,CAAC,SAAS,GAAG,GAAG,CAAC;QAE7B,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAC7D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,EAAE;YACpC,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element } from '@stencil/core';\nimport { themes, SpwTheme } from '@themes/themes';\n\n@Component({\n  tag: 'spw-theme-provider',\n  shadow: false,\n})\nexport class SpwThemeProvider {\n  /** Définit le thème employé, conditionne les tokens associés au thème */\n  @Prop() theme: SpwTheme = 'rouge';\n\n  @Element() el: HTMLSpwThemeProviderElement;\n\n  componentWillLoad() {\n    this.applyTheme(this.theme);\n  }\n\n  componentWillUpdate() {\n    this.applyTheme(this.theme);\n  }\n\n  private applyTheme(theme: SpwTheme) {\n    const styleId = 'theme-styles';\n    let styleElement = document.getElementById(styleId) as HTMLStyleElement;\n\n    if (!styleElement) {\n      styleElement = document.createElement('style');\n      styleElement.id = styleId;\n      document.head.appendChild(styleElement);\n    }\n\n    const css = themes[theme];\n    styleElement.innerHTML = css;\n\n    document.documentElement.setAttribute('data-theme', theme);\n  }\n\n  render() {\n    return (\n      <main class={`spw-theme-${this.theme}`}>\n        <slot />\n      </main>\n    );\n  }\n}\n"]}

package/dist/collection/components/spw-tooltip/spw-tooltip.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:inline-block;font-size:100%;line-height:1.3;position:relative}: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-tooltip__container{cursor:pointer;display:inline-block}.spw-tooltip__container:hover .spw-tooltip__content{opacity:1;visibility:visible}.spw-tooltip__title{color:var(--spw-colors-support-grey-grey-100);display:block;margin-bottom:4px}.spw-tooltip__content{background-color:var(--spw-colors-support-grey-grey-900);border-radius:8px;color:var(--spw-colors-support-grey-grey-400);font-size:14px;opacity:0;padding:12px;visibility:hidden;white-space:nowrap;z-index:10}.spw-tooltip__content,.spw-tooltip__content:after{left:50%;position:absolute;transform:translateX(-50%)}.spw-tooltip__content:after{border-color:var(--spw-colors-support-grey-grey-900) transparent transparent transparent;border-style:solid;border-width:3px;content:""}.spw-tooltip__content--top{bottom:100%;margin-bottom:5px}.spw-tooltip__content--top:after{top:100%}.spw-tooltip__content--bottom{margin-top:5px;top:100%}.spw-tooltip__content--bottom:after{border-color:transparent transparent var(--spw-colors-support-grey-grey-900) transparent;bottom:100%}.spw-tooltip__content--left{left:auto;margin-right:5px;right:100%;top:50%;transform:translateY(-50%)}.spw-tooltip__content--left:after{border-color:transparent transparent transparent var(--spw-colors-support-grey-grey-900);left:100%;top:50%;transform:translateY(-50%)}.spw-tooltip__content--right{left:100%;margin-left:5px;top:50%;transform:translateY(-50%)}.spw-tooltip__content--right:after{border-color:transparent var(--spw-colors-support-grey-grey-900) transparent transparent;left:auto;right:100%;top:50%;transform:translateY(-50%)}

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

@@ -0,0 +1,100 @@
+import { Host, h } from "@stencil/core";
+export class SpwTooltip {
+    constructor() {
+        this.showTooltip = () => {
+            this.isVisible = true;
+        };
+        this.hideTooltip = () => {
+            this.isVisible = false;
+        };
+        this.tooltipTitle = '';
+        this.tooltipText = '';
+        this.direction = 'top';
+        this.isVisible = false;
+    }
+    get elementClass() {
+        return {
+            'spw-tooltip__content': true,
+            [`spw-tooltip__content--${this.direction}`]: true,
+        };
+    }
+    render() {
+        return (h(Host, { key: '18283d5ea4137cbae78e730b90ace030904e361c' }, h("div", { key: '3b2fdd627c669ccf6b2a418ad9f82d301cf4ecf6', class: "spw-tooltip__container", onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: '7a1f128baba0ced9fb5fb97b27b212cf1fe2cfee' }), this.isVisible && (h("div", { key: '31466a95b3e7c3c697f38bc532844ee48bdc1b2e', class: this.elementClass, role: "tooltip" }, this.tooltipTitle && h("strong", { key: '60057d4e600666ceb0c43ae614d87aeff6bae7e1', class: "spw-tooltip__title" }, this.tooltipTitle), this.tooltipText && this.tooltipText)))));
+    }
+    static get is() { return "spw-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tooltipTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Titre du tooltip"
+                },
+                "attribute": "tooltip-title",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "tooltipText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte du tooltip"
+                },
+                "attribute": "tooltip-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Positionnement du tooltip"
+                },
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'top'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+}
+//# sourceMappingURL=spw-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spw-tooltip.js","sourceRoot":"","sources":["../../../src/components/spw-tooltip/spw-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOhE,MAAM,OAAO,UAAU;;QAUb,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC;4BAd6B,EAAE;2BAEH,EAAE;yBAEyB,KAAK;yBAEhC,KAAK;;IAUnC,IAAY,YAAY;QACtB,OAAO;YACL,sBAAsB,EAAE,IAAI;YAC5B,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;SAClD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,wBAAwB,EAAC,YAAY,EAAE,IAAI,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,CAAC,WAAW;gBAChG,8DAAa;gBACZ,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAC,SAAS;oBAC1C,IAAI,CAAC,YAAY,IAAI,+DAAQ,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,YAAY,CAAU;oBACpF,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CACjC,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'spw-tooltip',\n  styleUrl: 'spw-tooltip.scss',\n  shadow: true,\n})\nexport class SpwTooltip {\n  /** Titre du tooltip */\n  @Prop() tooltipTitle: string = '';\n  /** Texte du tooltip */\n  @Prop() tooltipText: string = '';\n  /** Positionnement du tooltip */\n  @Prop() direction: 'top' | 'bottom' | 'left' | 'right' = 'top';\n\n  @State() isVisible: boolean = false;\n\n  private showTooltip = () => {\n    this.isVisible = true;\n  };\n\n  private hideTooltip = () => {\n    this.isVisible = false;\n  };\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-tooltip__content': true,\n      [`spw-tooltip__content--${this.direction}`]: true,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"spw-tooltip__container\" onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>\n          <slot></slot>\n          {this.isVisible && (\n            <div class={this.elementClass} role=\"tooltip\">\n              {this.tooltipTitle && <strong class=\"spw-tooltip__title\">{this.tooltipTitle}</strong>}\n              {this.tooltipText && this.tooltipText}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

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

package/dist/collection/index.js.map

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