@spw-ds/spw-stencil-library 0.0.1

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

@@ -0,0 +1,96 @@
+import { p as proxyCustomElement, H, h } from './p-3706b88e.js';
+
+const rougeCss = ":root{--spw-ds-white:var(--spw-color-shades-base-white);--spw-ds-focus:var(--spw-color-themes-blue-blue-400);--spw-ds-primary:var(--spw-color-themes-red-red-500);--spw-ds-variant:var(--spw-color-themes-red-red-700);--spw-ds-active:var(--spw-color-themes-red-red-800);--spw-ds-cta-outlined-bg-hover:var(--spw-color-themes-red-red-50);--spw-ds-cta-outlined-stroke-hover:var(--spw-color-themes-red-red-700);--spw-ds-cta-outlined-bg-active:var(--spw-color-themes-red-red-100);--spw-ds-cta-outlined-stroke-active:var(--spw-color-themes-red-red-800)}";
+const rougeTheme = rougeCss;
+
+const bleuCss = ":root{--spw-ds-white:var(--spw-color-shades-base-white);--spw-ds-focus:var(--spw-color-themes-blue-blue-400);--spw-ds-primary:var(--spw-color-themes-blue-blue-500);--spw-ds-variant:var(--spw-color-themes-blue-blue-700);--spw-ds-active:var(--spw-color-themes-blue-blue-800);--spw-ds-cta-outlined-bg-hover:var(--spw-color-themes-blue-blue-50);--spw-ds-cta-outlined-stroke-hover:var(--spw-color-themes-blue-blue-700);--spw-ds-cta-outlined-bg-active:var(--spw-color-themes-blue-blue-100);--spw-ds-cta-outlined-stroke-active:var(--spw-color-themes-blue-blue-800)}";
+const bleuTheme = bleuCss;
+
+const bleuClairCss = ":root{--spw-ds-white:var(--spw-color-shades-base-white);--spw-ds-focus:var(--spw-color-themes-blue-blue-400);--spw-ds-primary:var(--spw-color-themes-light-blue-light-blue-600);--spw-ds-variant:var(--spw-color-themes-light-blue-light-blue-800);--spw-ds-active:var(--spw-color-themes-light-blue-light-blue-900);--spw-ds-cta-outlined-bg-hover:var(--spw-color-themes-light-blue-light-blue-50);--spw-ds-cta-outlined-stroke-hover:var(--spw-color-themes-light-blue-light-blue-700);--spw-ds-cta-outlined-bg-active:var(--spw-color-themes-light-blue-light-blue-100);--spw-ds-cta-outlined-stroke-active:var(--spw-color-themes-light-blue-light-blue-800)}";
+const bleuClairTheme = bleuClairCss;
+
+const vertCss = ":root{--spw-ds-white:var(--spw-color-shades-base-white);--spw-ds-focus:var(--spw-color-themes-blue-blue-400);--spw-ds-primary:var(--spw-color-themes-green-green-700);--spw-ds-variant:var(--spw-color-themes-green-green-800);--spw-ds-active:var(--spw-color-themes-green-green-900);--spw-ds-cta-outlined-bg-hover:var(--spw-color-themes-green-green-50);--spw-ds-cta-outlined-stroke-hover:var(--spw-color-themes-green-green-700);--spw-ds-cta-outlined-bg-active:var(--spw-color-themes-green-green-100);--spw-ds-cta-outlined-stroke-active:var(--spw-color-themes-green-green-800)}";
+const vertTheme = vertCss;
+
+const vertLegerCss = ":root{--spw-ds-white:var(--spw-color-shades-base-white);--spw-ds-focus:var(--spw-color-themes-blue-blue-400);--spw-ds-primary:var(--spw-color-themes-light-green-light-green-700);--spw-ds-variant:var(--spw-color-themes-light-green-light-green-800);--spw-ds-active:var(--spw-color-themes-light-green-light-green-900);--spw-ds-cta-outlined-bg-hover:var(--spw-color-themes-light-green-light-green-50);--spw-ds-cta-outlined-stroke-hover:var(--spw-color-themes-light-green-light-green-700);--spw-ds-cta-outlined-bg-active:var(--spw-color-themes-light-green-light-green-100);--spw-ds-cta-outlined-stroke-active:var(--spw-color-themes-light-green-light-green-800)}";
+const vertLegerTheme = vertLegerCss;
+
+const turquoiseCss = ":root{--spw-ds-white:var(--spw-color-shades-base-white);--spw-ds-focus:var(--spw-color-themes-blue-blue-400);--spw-ds-primary:var(--spw-color-themes-teal-teal-700);--spw-ds-variant:var(--spw-color-themes-teal-teal-800);--spw-ds-active:var(--spw-color-themes-teal-teal-900);--spw-ds-cta-outlined-bg-hover:var(--spw-color-themes-teal-teal-50);--spw-ds-cta-outlined-stroke-hover:var(--spw-color-themes-teal-teal-700);--spw-ds-cta-outlined-bg-active:var(--spw-color-themes-teal-teal-100);--spw-ds-cta-outlined-stroke-active:var(--spw-color-themes-teal-teal-800)}";
+const turquoiseTheme = turquoiseCss;
+
+const orangeCss = ":root{--spw-ds-white:var(--spw-color-shades-base-white);--spw-ds-focus:var(--spw-color-themes-blue-blue-400);--spw-ds-primary:var(--spw-color-themes-orange-orange-700);--spw-ds-variant:var(--spw-color-themes-orange-orange-800);--spw-ds-active:var(--spw-color-themes-orange-orange-900);--spw-ds-cta-outlined-bg-hover:var(--spw-color-themes-orange-orange-50);--spw-ds-cta-outlined-stroke-hover:var(--spw-color-themes-orange-orange-700);--spw-ds-cta-outlined-bg-active:var(--spw-color-themes-orange-orange-100);--spw-ds-cta-outlined-stroke-active:var(--spw-color-themes-orange-orange-800)}";
+const orangeTheme = orangeCss;
+
+const indigoCss = ":root{--spw-ds-white:var(--spw-color-shades-base-white);--spw-ds-focus:var(--spw-color-themes-blue-blue-400);--spw-ds-primary:var(--spw-color-themes-indigo-indigo-700);--spw-ds-variant:var(--spw-color-themes-indigo-indigo-800);--spw-ds-active:var(--spw-color-themes-indigo-indigo-900);--spw-ds-cta-outlined-bg-hover:var(--spw-color-themes-indigo-indigo-50);--spw-ds-cta-outlined-stroke-hover:var(--spw-color-themes-indigo-indigo-700);--spw-ds-cta-outlined-bg-active:var(--spw-color-themes-indigo-indigo-100);--spw-ds-cta-outlined-stroke-active:var(--spw-color-themes-indigo-indigo-800)}";
+const indigoTheme = indigoCss;
+
+const mauveCss = ":root{--spw-ds-white:var(--spw-color-shades-base-white);--spw-ds-focus:var(--spw-color-themes-blue-blue-400);--spw-ds-primary:var(--spw-color-themes-purple-purple-500);--spw-ds-variant:var(--spw-color-themes-purple-purple-800);--spw-ds-active:var(--spw-color-themes-purple-purple-900);--spw-ds-cta-outlined-bg-hover:var(--spw-color-themes-purple-purple-50);--spw-ds-cta-outlined-stroke-hover:var(--spw-color-themes-purple-purple-700);--spw-ds-cta-outlined-bg-active:var(--spw-color-themes-purple-purple-100);--spw-ds-cta-outlined-stroke-active:var(--spw-color-themes-purple-purple-800)}";
+const mauveTheme = mauveCss;
+
+const grisCss = ":root{--spw-ds-white:var(--spw-color-shades-base-white);--spw-ds-focus:var(--spw-color-themes-blue-blue-400);--spw-ds-primary:var(--spw-color-themes-grey-grey-500);--spw-ds-variant:var(--spw-color-themes-grey-grey-800);--spw-ds-active:var(--spw-color-themes-grey-grey-900);--spw-ds-cta-outlined-bg-hover:var(--spw-color-themes-grey-grey-50);--spw-ds-cta-outlined-stroke-hover:var(--spw-color-themes-grey-grey-700);--spw-ds-cta-outlined-bg-active:var(--spw-color-themes-grey-grey-100);--spw-ds-cta-outlined-stroke-active:var(--spw-color-themes-grey-grey-800)}";
+const grisTheme = grisCss;
+
+const themes = {
+    rouge: rougeTheme,
+    bleu: bleuTheme,
+    bleuClair: bleuClairTheme,
+    vert: vertTheme,
+    vertLeger: vertLegerTheme,
+    orange: orangeTheme,
+    turquoise: turquoiseTheme,
+    indigo: indigoTheme,
+    mauve: mauveTheme,
+    gris: grisTheme,
+};
+
+const SpwThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SpwThemeProvider extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        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' })));
+    }
+    get el() { return this; }
+}, [4, "spw-theme-provider", {
+        "theme": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-theme-provider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-theme-provider":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwThemeProvider$1);
+            }
+            break;
+    } });
+}
+
+const SpwThemeProvider = SpwThemeProvider$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwThemeProvider, defineCustomElement };
+
+//# sourceMappingURL=spw-theme-provider.js.map

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

@@ -0,0 +1 @@
+{"file":"spw-theme-provider.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,kiBAAkiB,CAAC;AACpjB,mBAAe,QAAQ;;ACDvB,MAAM,OAAO,GAAG,gjBAAgjB,CAAC;AACjkB,kBAAe,OAAO;;ACDtB,MAAM,YAAY,GAAG,ooBAAooB,CAAC;AAC1pB,uBAAe,YAAY;;ACD3B,MAAM,OAAO,GAAG,8jBAA8jB,CAAC;AAC/kB,kBAAe,OAAO;;ACDtB,MAAM,YAAY,GAAG,kpBAAkpB,CAAC;AACxqB,uBAAe,YAAY;;ACD3B,MAAM,YAAY,GAAG,gjBAAgjB,CAAC;AACtkB,uBAAe,YAAY;;ACD3B,MAAM,SAAS,GAAG,4kBAA4kB,CAAC;AAC/lB,oBAAe,SAAS;;ACDxB,MAAM,SAAS,GAAG,4kBAA4kB,CAAC;AAC/lB,oBAAe,SAAS;;ACDxB,MAAM,QAAQ,GAAG,4kBAA4kB,CAAC;AAC9lB,mBAAe,QAAQ;;ACDvB,MAAM,OAAO,GAAG,gjBAAgjB,CAAC;AACjkB,kBAAe,OAAO;;ACUf,MAAM,MAAM,GAAG;IACpB,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,cAAc;IACzB,MAAM,EAAE,WAAW;IACnB,SAAS,EAAE,cAAc;IACzB,MAAM,EAAE,WAAW;IACnB,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,SAAS;CAChB;;MCfYA,kBAAgB;;;;qBAED,OAAO;;IAIjC,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B;IAED,mBAAmB;QACjB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B;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;YACjB,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;SACzC;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;KAC5D;IAED,MAAM;QACJ,QACE,6DAAM,KAAK,EAAE,aAAa,IAAI,CAAC,KAAK,EAAE,IACpC,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwThemeProvider"],"sources":["src/themes/rouge.css","src/themes/bleu.css","src/themes/bleu-clair.css","src/themes/vert.css","src/themes/vert-leger.css","src/themes/turquoise.css","src/themes/orange.css","src/themes/indigo.css","src/themes/mauve.css","src/themes/gris.css","src/themes/themes.ts","src/components/spw-theme-provider/spw-theme-provider.tsx"],"sourcesContent":["@import '_base.css';\n\n:root {\n  --spw-ds-primary: var(--spw-color-themes-red-red-500);\n  --spw-ds-variant: var(--spw-color-themes-red-red-700);\n  --spw-ds-active: var(--spw-color-themes-red-red-800);\n  --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-red-red-50);\n  --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-red-red-700);\n  --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-red-red-100);\n  --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-red-red-800);\n}\n","@import '_base.css';\n\n:root {\n  --spw-ds-primary: var(--spw-color-themes-blue-blue-500);\n  --spw-ds-variant: var(--spw-color-themes-blue-blue-700);\n  --spw-ds-active: var(--spw-color-themes-blue-blue-800);\n  --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-blue-blue-50);\n  --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-blue-blue-700);\n  --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-blue-blue-100);\n  --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-blue-blue-800);\n}\n","@import '_base.css';\n\n:root {\n  --spw-ds-primary: var(--spw-color-themes-light-blue-light-blue-600);\n  --spw-ds-variant: var(--spw-color-themes-light-blue-light-blue-800);\n  --spw-ds-active: var(--spw-color-themes-light-blue-light-blue-900);\n  --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-light-blue-light-blue-50);\n  --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-light-blue-light-blue-700);\n  --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-light-blue-light-blue-100);\n  --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-light-blue-light-blue-800);\n}\n","@import '_base.css';\n\n:root {\n  --spw-ds-primary: var(--spw-color-themes-green-green-700);\n  --spw-ds-variant: var(--spw-color-themes-green-green-800);\n  --spw-ds-active: var(--spw-color-themes-green-green-900);\n  --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-green-green-50);\n  --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-green-green-700);\n  --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-green-green-100);\n  --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-green-green-800);\n}\n","@import '_base.css';\n\n:root {\n  --spw-ds-primary: var(--spw-color-themes-light-green-light-green-700);\n  --spw-ds-variant: var(--spw-color-themes-light-green-light-green-800);\n  --spw-ds-active: var(--spw-color-themes-light-green-light-green-900);\n  --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-light-green-light-green-50);\n  --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-light-green-light-green-700);\n  --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-light-green-light-green-100);\n  --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-light-green-light-green-800);\n}\n","@import '_base.css';\n\n:root {\n  --spw-ds-primary: var(--spw-color-themes-teal-teal-700);\n  --spw-ds-variant: var(--spw-color-themes-teal-teal-800);\n  --spw-ds-active: var(--spw-color-themes-teal-teal-900);\n  --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-teal-teal-50);\n  --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-teal-teal-700);\n  --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-teal-teal-100);\n  --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-teal-teal-800);\n}\n","@import '_base.css';\n\n:root {\n  --spw-ds-primary: var(--spw-color-themes-orange-orange-700);\n  --spw-ds-variant: var(--spw-color-themes-orange-orange-800);\n  --spw-ds-active: var(--spw-color-themes-orange-orange-900);\n  --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-orange-orange-50);\n  --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-orange-orange-700);\n  --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-orange-orange-100);\n  --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-orange-orange-800);\n}\n","@import '_base.css';\n\n:root {\n  --spw-ds-primary: var(--spw-color-themes-indigo-indigo-700);\n  --spw-ds-variant: var(--spw-color-themes-indigo-indigo-800);\n  --spw-ds-active: var(--spw-color-themes-indigo-indigo-900);\n  --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-indigo-indigo-50);\n  --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-indigo-indigo-700);\n  --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-indigo-indigo-100);\n  --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-indigo-indigo-800);\n}\n","@import '_base.css';\n\n:root {\n  --spw-ds-primary: var(--spw-color-themes-purple-purple-500);\n  --spw-ds-variant: var(--spw-color-themes-purple-purple-800);\n  --spw-ds-active: var(--spw-color-themes-purple-purple-900);\n  --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-purple-purple-50);\n  --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-purple-purple-700);\n  --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-purple-purple-100);\n  --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-purple-purple-800);\n}\n","@import '_base.css';\n\n:root {\n  --spw-ds-primary: var(--spw-color-themes-grey-grey-500);\n  --spw-ds-variant: var(--spw-color-themes-grey-grey-800);\n  --spw-ds-active: var(--spw-color-themes-grey-grey-900);\n  --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-grey-grey-50);\n  --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-grey-grey-700);\n  --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-grey-grey-100);\n  --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-grey-grey-800);\n}\n","import rougeTheme from './rouge.css';\nimport bleuTheme from './bleu.css';\nimport bleuClairTheme from './bleu-clair.css';\nimport vertTheme from './vert.css';\nimport vertLegerTheme from './vert-leger.css';\nimport turquoiseTheme from './turquoise.css';\nimport orangeTheme from './orange.css';\nimport indigoTheme from './indigo.css';\nimport mauveTheme from './mauve.css';\nimport grisTheme from './gris.css';\n\nexport const themes = {\n  rouge: rougeTheme,\n  bleu: bleuTheme,\n  bleuClair: bleuClairTheme,\n  vert: vertTheme,\n  vertLeger: vertLegerTheme,\n  orange: orangeTheme,\n  turquoise: turquoiseTheme,\n  indigo: indigoTheme,\n  mauve: mauveTheme,\n  gris: grisTheme,\n};\n\nexport type SpwTheme = keyof typeof themes;\n","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"],"version":3}

package/dist/components/spw-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SpwTooltip extends Components.SpwTooltip, HTMLElement {}
+export const SpwTooltip: {
+    prototype: SpwTooltip;
+    new (): SpwTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/spw-tooltip.js

@@ -0,0 +1,57 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-3706b88e.js';
+
+const spwTooltipCss = "/*! 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%)}";
+const SpwTooltipStyle0 = spwTooltipCss;
+
+const SpwTooltip$1 = /*@__PURE__*/ proxyCustomElement(class SpwTooltip extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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 style() { return SpwTooltipStyle0; }
+}, [1, "spw-tooltip", {
+        "tooltipTitle": [1, "tooltip-title"],
+        "tooltipText": [1, "tooltip-text"],
+        "direction": [1],
+        "isVisible": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwTooltip$1);
+            }
+            break;
+    } });
+}
+
+const SpwTooltip = SpwTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwTooltip, defineCustomElement };
+
+//# sourceMappingURL=spw-tooltip.js.map

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

@@ -0,0 +1 @@
+{"file":"spw-tooltip.js","mappings":";;AAAA,MAAM,aAAa,GAAG,4jIAA4jI,CAAC;AACnlI,yBAAe,aAAa;;MCMfA,YAAU;;;;;QAUb,gBAAW,GAAG;YACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB,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,GAAG,IAAI;SAClD,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,wBAAwB,EAAC,YAAY,EAAE,IAAI,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,CAAC,WAAW,IAChG,8DAAa,EACZ,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAC,SAAS,IAC1C,IAAI,CAAC,YAAY,IAAI,+DAAQ,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,YAAY,CAAU,EACpF,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CACjC,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwTooltip"],"sources":["src/components/spw-tooltip/spw-tooltip.scss?tag=spw-tooltip&encapsulation=shadow","src/components/spw-tooltip/spw-tooltip.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-block;\n}\n\n.spw-tooltip {\n  &__container {\n    display: inline-block;\n    cursor: pointer;\n    &:hover {\n      .spw-tooltip__content {\n        opacity: 1;\n        visibility: visible;\n      }\n    }\n  }\n\n  &__title {\n    display: block;\n    margin-bottom: 4px;\n    color: var(--spw-colors-support-grey-grey-100);\n  }\n\n  &__content {\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    background-color: var(--spw-colors-support-grey-grey-900);\n    color: var(--spw-colors-support-grey-grey-400);\n    padding: 12px;\n    border-radius: 8px;\n    font-size: 14px;\n    white-space: nowrap;\n    z-index: 10;\n    opacity: 0;\n    visibility: hidden;\n\n    &:after {\n      content: '';\n      position: absolute;\n      left: 50%;\n      transform: translateX(-50%);\n      border-width: 3px;\n      border-style: solid;\n      border-color: var(--spw-colors-support-grey-grey-900) transparent transparent transparent;\n    }\n\n    &--top {\n      bottom: 100%;\n      margin-bottom: 5px;\n      &:after {\n        top: 100%;\n      }\n    }\n\n    &--bottom {\n      top: 100%;\n      margin-top: 5px;\n      &:after {\n        bottom: 100%;\n        border-color: transparent transparent var(--spw-colors-support-grey-grey-900) transparent;\n      }\n    }\n\n    &--left {\n      top: 50%;\n      left: auto;\n      right: 100%;\n      transform: translateY(-50%);\n      margin-right: 5px;\n\n      &:after {\n        top: 50%;\n        left: 100%;\n        transform: translateY(-50%);\n        border-color: transparent transparent transparent var(--spw-colors-support-grey-grey-900);\n      }\n    }\n\n    &--right {\n      top: 50%;\n      left: 100%;\n      transform: translateY(-50%);\n      margin-left: 5px;\n\n      &:after {\n        top: 50%;\n        left: auto;\n        right: 100%;\n        transform: translateY(-50%);\n        border-color: transparent var(--spw-colors-support-grey-grey-900) transparent transparent;\n      }\n    }\n  }\n}\n","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"],"version":3}

package/dist/components_json.d.ts

@@ -0,0 +1,435 @@
+
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * DO NOT MODIFY IT MANUALLY
+ */
+interface ComponentCompilerPropertyComplexType {
+  /**
+   * The string of the original type annotation in the Stencil source code
+   */
+  original: string;
+  /**
+   * A 'resolved' type, where e.g. imported types have been resolved and inlined
+   *
+   * For instance, an annotation like `(foo: Foo) => string;` will be
+   * converted to `(foo: { foo: string }) => string;`.
+   */
+  resolved: string;
+  /**
+   * A record of the types which were referenced in the assorted type
+   * annotation in the original source file.
+   */
+  references: ComponentCompilerTypeReferences;
+}
+type ComponentCompilerTypeReferences = Record<string, ComponentCompilerTypeReference>;
+interface ComponentCompilerTypeReference {
+  /**
+   * A type may be defined:
+   * - locally (in the same file as the component that uses it)
+   * - globally
+   * - by importing it into a file (and is defined elsewhere)
+   */
+  location: "local" | "global" | "import";
+  /**
+   * The path to the type reference, if applicable (global types should not need a path associated with them)
+   */
+  path?: string;
+  /**
+   * An ID for this type which is unique within a Stencil project.
+   */
+  id: string;
+}
+interface ComponentCompilerReferencedType {
+  /**
+   * The path to the module where the type is declared.
+   */
+  path: string;
+  /**
+   * The string of the original type annotation in the Stencil source code
+   */
+  declaration: string;
+  /**
+   * An extracted docstring
+   */
+  docstring: string;
+}
+interface ComponentCompilerEventComplexType {
+  original: string;
+  resolved: string;
+  references: ComponentCompilerTypeReferences;
+}
+interface ComponentCompilerMethodComplexType {
+  signature: string;
+  parameters: JsonDocMethodParameter[];
+  references: ComponentCompilerTypeReferences;
+  return: string;
+}
+/**
+ * The Type Library holds information about the types which are used in a
+ * Stencil project. During compilation, Stencil gathers information about the
+ * types which form part of a component's public API, such as properties
+ * decorated with `@Prop`, `@Event`, `@Watch`, etc. This type information is
+ * then added to the Type Library, where it can be accessed later on for
+ * generating documentation.
+ *
+ * This information is included in the file written by the `docs-json` output
+ * target (see {@link JsonDocs.typeLibrary}).
+ */
+export type JsonDocsTypeLibrary = Record<string, ComponentCompilerReferencedType>;
+/**
+ * A container for JSDoc metadata for a project
+ */
+export interface JsonDocs {
+  /**
+   * The metadata for the JSDocs for each component in a Stencil project
+   */
+  components: JsonDocsComponent[];
+  /**
+   * The timestamp at which the metadata was generated, in the format YYYY-MM-DDThh:mm:ss
+   */
+  timestamp: string;
+  compiler: {
+    /**
+     * The name of the compiler that generated the metadata
+     */
+    name: string;
+    /**
+     * The version of the Stencil compiler that generated the metadata
+     */
+    version: string;
+    /**
+     * The version of TypeScript that was used to generate the metadata
+     */
+    typescriptVersion: string;
+  };
+  typeLibrary: JsonDocsTypeLibrary;
+}
+/**
+ * Container for JSDoc metadata for a single Stencil component
+ */
+export interface JsonDocsComponent {
+  /**
+   * The directory containing the Stencil component, minus the file name.
+   *
+   * @example /workspaces/stencil-project/src/components/my-component
+   */
+  dirPath?: string;
+  /**
+   * The name of the file containing the Stencil component, with no path
+   *
+   * @example my-component.tsx
+   */
+  fileName?: string;
+  /**
+   * The full path of the file containing the Stencil component
+   *
+   * @example /workspaces/stencil-project/src/components/my-component/my-component.tsx
+   */
+  filePath?: string;
+  /**
+   * The path to the component's `readme.md` file, including the filename
+   *
+   * @example /workspaces/stencil-project/src/components/my-component/readme.md
+   */
+  readmePath?: string;
+  /**
+   * The path to the component's `usage` directory
+   *
+   * @example /workspaces/stencil-project/src/components/my-component/usage/
+   */
+  usagesDir?: string;
+  /**
+   * The encapsulation strategy for a component
+   */
+  encapsulation: "shadow" | "scoped" | "none";
+  /**
+   * The tag name for the component, for use in HTML
+   */
+  tag: string;
+  /**
+   * The contents of a component's `readme.md` that are user generated.
+   *
+   * Auto-generated contents are not stored in this reference.
+   */
+  readme: string;
+  /**
+   * The description of a Stencil component, found in the JSDoc that sits above the component's declaration
+   */
+  docs: string;
+  /**
+   * JSDoc tags found in the JSDoc comment written atop a component's declaration
+   */
+  docsTags: JsonDocsTag[];
+  /**
+   * The text from the class-level JSDoc for a Stencil component, if present.
+   */
+  overview?: string;
+  /**
+   * A mapping of usage example file names to their contents for the component.
+   */
+  usage: JsonDocsUsage;
+  /**
+   * Array of metadata for a component's `@Prop`s
+   */
+  props: JsonDocsProp[];
+  /**
+   * Array of metadata for a component's `@Method`s
+   */
+  methods: JsonDocsMethod[];
+  /**
+   * Array of metadata for a component's `@Event`s
+   */
+  events: JsonDocsEvent[];
+  /**
+   * Array of metadata for a component's `@Listen` handlers
+   */
+  listeners: JsonDocsListener[];
+  /**
+   * Array of metadata for a component's CSS styling information
+   */
+  styles: JsonDocsStyle[];
+  /**
+   * Array of component Slot information, generated from `@slot` tags
+   */
+  slots: JsonDocsSlot[];
+  /**
+   * Array of component Parts information, generate from `@part` tags
+   */
+  parts: JsonDocsPart[];
+  /**
+   * Array of metadata describing where the current component is used
+   */
+  dependents: string[];
+  /**
+   * Array of metadata listing the components which are used in current component
+   */
+  dependencies: string[];
+  /**
+   * Describes a tree of components coupling
+   */
+  dependencyGraph: JsonDocsDependencyGraph;
+  /**
+   * A deprecation reason/description found following a `@deprecated` tag
+   */
+  deprecation?: string;
+}
+export interface JsonDocsDependencyGraph {
+  [tagName: string]: string[];
+}
+/**
+ * A descriptor for a single JSDoc tag found in a block comment
+ */
+export interface JsonDocsTag {
+  /**
+   * The tag name (immediately following the '@')
+   */
+  name: string;
+  /**
+   * The description that immediately follows the tag name
+   */
+  text?: string;
+}
+export interface JsonDocsValue {
+  value?: string;
+  type: string;
+}
+/**
+ * A mapping of file names to their contents.
+ *
+ * This type is meant to be used when reading one or more usage markdown files associated with a component. For the
+ * given directory structure:
+ * ```
+ * src/components/my-component
+ * ├── my-component.tsx
+ * └── usage
+ *     ├── bar.md
+ *     └── foo.md
+ * ```
+ * an instance of this type would include the name of the markdown file, mapped to its contents:
+ * ```ts
+ * {
+ *   'bar': STRING_CONTENTS_OF_BAR.MD
+ *   'foo': STRING_CONTENTS_OF_FOO.MD
+ * }
+ * ```
+ */
+export interface JsonDocsUsage {
+  [key: string]: string;
+}
+/**
+ * An intermediate representation of a `@Prop` decorated member's JSDoc
+ */
+export interface JsonDocsProp {
+  /**
+   * the name of the prop
+   */
+  name: string;
+  complexType?: ComponentCompilerPropertyComplexType;
+  /**
+   * the type of the prop, in terms of the TypeScript type system (as opposed to JavaScript's or HTML's)
+   */
+  type: string;
+  /**
+   * `true` if the prop was configured as "mutable" where it was declared, `false` otherwise
+   */
+  mutable: boolean;
+  /**
+   * The name of the attribute that is exposed to configure a compiled web component
+   */
+  attr?: string;
+  /**
+   * `true` if the prop was configured to "reflect" back to HTML where it (the prop) was declared, `false` otherwise
+   */
+  reflectToAttr: boolean;
+  /**
+   * the JSDoc description text associated with the prop
+   */
+  docs: string;
+  /**
+   * JSDoc tags associated with the prop
+   */
+  docsTags: JsonDocsTag[];
+  /**
+   * The default value of the prop
+   */
+  default?: string;
+  /**
+   * Deprecation text associated with the prop. This is the text that immediately follows a `@deprecated` tag
+   */
+  deprecation?: string;
+  values: JsonDocsValue[];
+  /**
+   * `true` if a component is declared with a '?', `false` otherwise
+   *
+   * @example
+   * ```tsx
+   * @Prop() componentProps?: any;
+   * ```
+   */
+  optional: boolean;
+  /**
+   * `true` if a component is declared with a '!', `false` otherwise
+   *
+   * @example
+   * ```tsx
+   * @Prop() componentProps!: any;
+   * ```
+   */
+  required: boolean;
+}
+export interface JsonDocsMethod {
+  name: string;
+  docs: string;
+  docsTags: JsonDocsTag[];
+  deprecation?: string;
+  signature: string;
+  returns: JsonDocsMethodReturn;
+  parameters: JsonDocMethodParameter[];
+  complexType: ComponentCompilerMethodComplexType;
+}
+export interface JsonDocsMethodReturn {
+  type: string;
+  docs: string;
+}
+export interface JsonDocMethodParameter {
+  name: string;
+  type: string;
+  docs: string;
+}
+export interface JsonDocsEvent {
+  event: string;
+  bubbles: boolean;
+  cancelable: boolean;
+  composed: boolean;
+  complexType: ComponentCompilerEventComplexType;
+  docs: string;
+  docsTags: JsonDocsTag[];
+  deprecation?: string;
+  detail: string;
+}
+/**
+ * Type describing a CSS Style, as described by a JSDoc-style comment
+ */
+export interface JsonDocsStyle {
+  /**
+   * The name of the style
+   */
+  name: string;
+  /**
+   * The type/description associated with the style
+   */
+  docs: string;
+  /**
+   * The annotation used in the JSDoc of the style (e.g. `@prop`)
+   */
+  annotation: string;
+  /**
+   * The mode associated with the style
+   */
+  mode: string | undefined;
+}
+export interface JsonDocsListener {
+  event: string;
+  target?: string;
+  capture: boolean;
+  passive: boolean;
+}
+/**
+ * A descriptor for a slot
+ *
+ * Objects of this type are translated from the JSDoc tag, `@slot`
+ */
+export interface JsonDocsSlot {
+  /**
+   * The name of the slot. Defaults to an empty string for an unnamed slot.
+   */
+  name: string;
+  /**
+   * A textual description of the slot.
+   */
+  docs: string;
+}
+/**
+ * A descriptor of a CSS Shadow Part
+ *
+ * Objects of this type are translated from the JSDoc tag, `@part`, or the 'part'
+ * attribute on a component in TSX
+ */
+export interface JsonDocsPart {
+  /**
+   * The name of the Shadow part
+   */
+  name: string;
+  /**
+   * A textual description of the Shadow part.
+   */
+  docs: string;
+}
+/**
+ * Represents a parsed block comment in a CSS, Sass, etc. file for a custom property.
+ */
+export interface StyleDoc {
+  /**
+   * The name of the CSS property
+   */
+  name: string;
+  /**
+   * The user-defined description of the CSS property
+   */
+  docs: string;
+  /**
+   * The JSDoc-style annotation (e.g. `@prop`) that was used in the block comment to detect the comment.
+   * Used to inform Stencil where the start of a new property's description starts (and where the previous description
+   * ends).
+   */
+  annotation: "prop";
+  /**
+   * The Stencil style-mode that is associated with this property.
+   */
+  mode: string | undefined;
+}
+
+export {};
+
+declare const _default: JsonDocs;
+export default _default;