@spw-ds/spw-stencil-library 1.7.0 → 1.8.0

package/dist/collection/components/spw-block-content/spw-block-content.css

@@ -0,0 +1,492 @@
+@charset "UTF-8";
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.3; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li {
+  padding: 0;
+  margin: 0;
+}
+
+ul {
+  list-style: none;
+}
+
+:host {
+  box-sizing: border-box;
+  line-height: 1.3;
+  -webkit-text-size-adjust: 100%;
+  font-size: 100%;
+}
+
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: inherit;
+  font-family: "Nunito Sans";
+}
+
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type=checkbox],
+[type=radio] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type=search] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}
+
+:root {
+  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-lg: 1024px;
+  --spw-ds-container-md: 768px;
+  --spw-ds-container-sm: 640px;
+}
+
+.spw-ds-container {
+  width: 100%;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: auto;
+  margin-right: auto;
+}
+@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);
+  }
+}
+
+:host {
+  display: block;
+  --spw-block-content-blockquote-bg: var(--spw-colors-multi-branding-red-red-50);
+  --spw-block-content-blockquote-accent: var(--spw-colors-multi-branding-red-red-accent-3);
+  --spw-block-content-blockquote-text: var(--spw-colors-support-grey-grey-900);
+}
+
+:host(.spw-block-content--blockquote) .spw-block-content__blockquote {
+  margin: 0;
+  padding: 32px;
+  background-color: var(--spw-block-content-blockquote-bg);
+  border-radius: 16px;
+  color: var(--spw-block-content-blockquote-text);
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+:host(.spw-block-content--blockquote) .spw-block-content__quote {
+  display: flex;
+  gap: 16px;
+  position: relative;
+}
+:host(.spw-block-content--blockquote) .spw-block-content__quote::before {
+  content: "“";
+  position: absolute;
+  left: -40px;
+  font-size: 48px;
+  line-height: 1;
+  font-weight: 700;
+  color: var(--spw-colors-support-grey-grey-900);
+  flex-shrink: 0;
+}
+:host(.spw-block-content--blockquote) .spw-block-content__quote ::slotted(*) {
+  margin: 0;
+  padding-left: 16px;
+  font-size: 24px;
+  font-style: italic;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+:host(.spw-block-content--banner-landscape),
+:host(.spw-block-content--banner-portrait) {
+  background: var(--spw-ds-primary);
+  color: white;
+  border-radius: 16px;
+  overflow: hidden;
+  position: relative;
+}
+:host(.spw-block-content--banner-landscape) .spw-block-content__link,
+:host(.spw-block-content--banner-portrait) .spw-block-content__link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+:host(.spw-block-content--banner-landscape) .spw-block-content__image img,
+:host(.spw-block-content--banner-portrait) .spw-block-content__image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-top-left-radius: 900px;
+}
+:host(.spw-block-content--banner-landscape) .spw-block-content__button,
+:host(.spw-block-content--banner-portrait) .spw-block-content__button {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  z-index: 2;
+}
+:host(.spw-block-content--banner-landscape) .spw-block-content__text,
+:host(.spw-block-content--banner-portrait) .spw-block-content__text {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+@media (min-width: 768px) {
+  :host(.spw-block-content--banner-landscape) .spw-block-content__text,
+  :host(.spw-block-content--banner-portrait) .spw-block-content__text {
+    padding: 24px;
+  }
+}
+
+:host(.spw-block-content--banner-landscape) .spw-block-content__banner {
+  display: flex;
+  flex-direction: row;
+}
+:host(.spw-block-content--banner-landscape) .spw-block-content__image {
+  flex-shrink: 0;
+  width: 120px;
+}
+@media (min-width: 768px) {
+  :host(.spw-block-content--banner-landscape) .spw-block-content__image {
+    width: 260px;
+  }
+}
+:host(.spw-block-content--banner-landscape) .spw-block-content__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+:host(.spw-block-content--banner-portrait) .spw-block-content__banner {
+  display: flex;
+  flex-direction: column;
+}
+:host(.spw-block-content--banner-portrait) .spw-block-content__image {
+  aspect-ratio: 1/1;
+}
+:host(.spw-block-content--banner-portrait) .spw-block-content__content {
+  display: flex;
+  flex-direction: column;
+}

package/dist/collection/components/spw-block-content/spw-block-content.js

@@ -0,0 +1,141 @@
+import { Host, h } from "@stencil/core";
+export class SpwBlockContent {
+    constructor() {
+        /** Variante du bloc de contenu */
+        this.variant = 'blockquote';
+        /** Target du lien (pour banner-landscape et banner-portrait) */
+        this.target = '_self';
+    }
+    get elementClass() {
+        return {
+            'spw-block-content': true,
+            [`spw-block-content--${this.variant}`]: true,
+        };
+    }
+    renderBlockquote() {
+        return (h("blockquote", { class: "spw-block-content__blockquote" }, h("div", { class: "spw-block-content__top" }, h("slot", { name: "top" })), h("div", { class: "spw-block-content__quote" }, h("slot", { name: "quote" })), h("div", { class: "spw-block-content__bottom" }, h("slot", { name: "bottom" }))));
+    }
+    renderBanner() {
+        const content = (h("div", { class: "spw-block-content__banner" }, h("div", { class: "spw-block-content__content" }, h("div", { class: "spw-block-content__text" }, h("slot", null))), this.imageSrc && (h("div", { class: "spw-block-content__image" }, h("img", { src: this.imageSrc, alt: this.imageAlt || '' }))), h("div", { class: "spw-block-content__button" }, h("slot", { name: "button" }))));
+        if (this.href) {
+            return (h("a", { href: this.href, target: this.target, class: "spw-block-content__link" }, content));
+        }
+        return content;
+    }
+    render() {
+        return (h(Host, { key: '850805ab7f2fdf3ab44709b4c3d173656b011de3', class: this.elementClass }, this.variant === 'blockquote' && this.renderBlockquote(), (this.variant === 'banner-landscape' || this.variant === 'banner-portrait') && this.renderBanner()));
+    }
+    static get is() { return "spw-block-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["spw-block-content.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["spw-block-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'blockquote' | 'banner-landscape' | 'banner-portrait'",
+                    "resolved": "\"banner-landscape\" | \"banner-portrait\" | \"blockquote\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variante du bloc de contenu"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'blockquote'"
+            },
+            "imageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL de l'image (pour banner-landscape et banner-portrait)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-src"
+            },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texte alternatif de l'image (pour banner-landscape et banner-portrait)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-alt"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL du lien (pour banner-landscape et banner-portrait)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Target du lien (pour banner-landscape et banner-portrait)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "'_self'"
+            }
+        };
+    }
+}

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

@@ -35,7 +35,7 @@ export class SpwBreadcrumbItem {
         this.el.classList.add(`spw-breadcrumb-item--${this.surface}`);
     }
     render() {
-        return (h(Host, { key: 'a8d39283ff3fd6a337d5027aa5ad4e71c4458d95' }, h("div", { key: '6e78480b01c8f048fb96ebac90d06180e6581b54', role: "listitem", class: `spw-breadcrumb-item spw-breadcrumb-item--${this.surface}` }, this.href ? (h("spw-link", { href: this.href, surface: this.surface }, h("slot", null))) : (h("span", { class: "spw-breadcrumb-item__text", "aria-current": "page" }, h("slot", null))))));
+        return (h(Host, { key: '62170b372e3af41044400421f155fa743e04e101' }, h("div", { key: '8a93c5cb0dbcfef7ff3a3470ed97a52c682bd314', role: "listitem", class: `spw-breadcrumb-item spw-breadcrumb-item--${this.surface}` }, this.href ? (h("spw-link", { href: this.href, surface: this.surface }, h("slot", null))) : (h("span", { class: "spw-breadcrumb-item__text", "aria-current": "page" }, h("slot", null))))));
     }
     static get is() { return "spw-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -403,7 +403,7 @@ template {
 @media (min-width: 1024px) {
   .spw-breadcrumb--multiline ::slotted(spw-breadcrumb-item:last-child) {
     display: block;
-    margin-top: 12px;
+    margin-top: 12px !important;
   }
 }
 @media (min-width: 1024px) {
@@ -413,8 +413,8 @@ template {
 }
 
 ::slotted(spw-breadcrumb-item) {
-  margin-right: 10px;
-  padding-left: 24px;
+  margin-right: 10px !important;
+  padding-left: 24px !important;
   position: relative;
   display: none;
 }
@@ -440,8 +440,8 @@ template {
 @media (min-width: 1024px) {
   ::slotted(spw-breadcrumb-item) {
     display: inline-block;
-    padding-left: 0;
-    padding-right: 16px;
+    padding-left: 0 !important;
+    padding-right: 16px !important;
   }
 }
 
@@ -449,12 +449,12 @@ template {
   flex: 1;
   overflow: hidden;
   display: none;
-  margin-right: 0;
+  margin-right: 0 !important;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
   -webkit-line-clamp: 1;
   line-clamp: 1;
-  padding-right: 0;
+  padding-right: 0 !important;
 }
 ::slotted(spw-breadcrumb-item:last-child):after {
   display: none;

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

@@ -43,7 +43,7 @@ export class SpwBreadcrumb {
             [`spw-breadcrumb--font-size-${this.fontSize}`]: true,
             [`spw-breadcrumb--${this.variant}`]: true,
         };
-        return (h(Host, { key: 'f9bef15077067179fbcf86737537ba1c46dac886' }, h("nav", { key: '099594e2e4d2f40fb55694bdc516f28564852b0a', "aria-label": this.accAriaLabel, class: elementClass }, h("div", { key: 'c83862b88046d2f3026cd4470fc42cd51c7b871a', role: "list", class: "spw-breadcrumb__list" }, h("slot", { key: '95136b7364449131b22d4c3b44ebc28b9753e098' })))));
+        return (h(Host, { key: '3c9a8857160787a9a0d4aa057500fe41fe2f35df' }, h("nav", { key: 'cf96eef790f3db49323475acdffa002591001beb', "aria-label": this.accAriaLabel, class: elementClass }, h("div", { key: '98c6b384e02c4d3f57e41796e6e7470b2e4cef78', role: "list", class: "spw-breadcrumb__list" }, h("slot", { key: '1db5c67a34953c7f5b3d6c3ba0ce24fbdd52bbb9' })))));
     }
     static get is() { return "spw-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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

@@ -98,7 +98,7 @@ export class SpwButton {
             'aria-label': this.accAriaLabel || this.name || slotText || 'Label',
             'aria-disabled': isDisabled ? 'true' : null,
         };
-        return (h(TagType, Object.assign({ key: 'ba4232794c0defd5df9a8a9c7fe85d75bfe9dcd7' }, attrs, { class: this.elementClass, disabled: isDisabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, ariaAttributes), h("div", { key: '758936e7a9532618370bbcafaa77b93f3b9404bc', class: "spw-button__inner" }, h("div", { key: '61262396459699c951a2c576df2e9cf3e9f5c465', class: "spw-button__inner-text" }, iconPosition === 'left' && iconElement, !this.isIconOnly && h("slot", { key: 'c35ac2f0dd98969b71fb957f866daea55f158a12' }), iconPosition === 'right' && iconElement)), h("spw-loading", { key: '4ca683338ac80666827b24f4fea95e5b6db0ad34', text: "" })));
+        return (h(TagType, Object.assign({ key: '4242ce609961abb30ccdc66e50c3af0a0eae9602' }, attrs, { class: this.elementClass, disabled: isDisabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, ariaAttributes), h("div", { key: 'da887f677a2be3ea6a945989ac8d66cf3e2f7bbb', class: "spw-button__inner" }, h("div", { key: '9e247b2225ab86e364d614801059cd34fd7403d2', class: "spw-button__inner-text" }, iconPosition === 'left' && iconElement, !this.isIconOnly && h("slot", { key: 'a345249b2b3a147e4c70ec43d8de632d175c4f46' }), iconPosition === 'right' && iconElement)), h("spw-loading", { key: 'f9d6f32380be6b1238ac6a7c3ce7fcad019d14e9', text: "" })));
     }
     static get is() { return "spw-button"; }
     static get encapsulation() { return "shadow"; }