@spw-ds/spw-stencil-library 0.0.1

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

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

package/dist/components/spw-message.js

@@ -0,0 +1,104 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-3706b88e.js';
+import { d as defineCustomElement$3 } from './p-72ca702e.js';
+import { d as defineCustomElement$2 } from './p-1808c8c6.js';
+
+const getIcon = variant => {
+  const icons = {
+    default: 'fa-lightbulb',
+    success: 'fa-check',
+    info: 'fa-info-circle',
+    warning: 'fa-exclamation-triangle',
+    alert: 'fa-exclamation-triangle',
+  };
+
+  return icons[variant] || icons['default'];
+};
+
+const getElementClass = variant => {
+  return {
+    'spw-message': true,
+    [`spw-message--${variant}`]: true,
+  };
+};
+
+const shouldHideMessage = messageId => {
+  return !!localStorage.getItem(`spw-message-${messageId}`);
+};
+
+const dismissMessage = (messageId, hideCallback) => {
+  localStorage.setItem(`spw-message-${messageId}`, 'true');
+  hideCallback();
+};
+
+const spwMessageCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1220px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-message{border-radius:16px;color:var(--spw-colors-support-grey-grey-900);font-size:16px;padding:24px}.spw-message__title-container{display:flex;flex-direction:column;flex-wrap:nowrap;gap:24px;justify-content:space-between}@media (min-width:1024px){.spw-message__title-container{flex-direction:row}}.spw-message__close{order:-1}@media (min-width:1024px){.spw-message__close{order:0}}.spw-message__title{display:block;flex:1;font-size:18px}.spw-message__title .spw-icon,.spw-message__title spw-icon{margin-right:6px;position:relative;top:1px}.spw-message__text{margin-top:12px}.spw-message--default{background:var(--spw-colors-support-grey-grey-100)}.spw-message--success{background:var(--spw-colors-multi-branding-green-green-50)}.spw-message--success .spw-icon,.spw-message--success spw-icon{color:var(--spw-colors-multi-branding-green-green-600)}.spw-message--alert{background:var(--spw-colors-multi-branding-red-red-50)}.spw-message--alert .spw-icon,.spw-message--alert spw-icon{color:var(--spw-colors-multi-branding-red-red-accent-3)}.spw-message--info{background:var(--spw-colors-multi-branding-blue-blue-50)}.spw-message--info .spw-icon,.spw-message--info spw-icon{color:var(--spw-colors-multi-branding-blue-blue-accent-3)}.spw-message--warning{background:#fffdeb}.spw-message--warning .spw-icon,.spw-message--warning spw-icon{color:#e6b800}.spw-message spw-link{--spw-link-color:var(--spw-colors-support-grey-grey-900);--spw-link-hover-color:var(--spw-colors-support-grey-grey-900);--spw-link-active-color:var(--spw-colors-support-grey-grey-800);--spw-link-padding:12px}.spw-message spw-link:focus-visible{outline:2px solid var(--spw-ds-focus);outline-offset:1px}";
+const SpwMessageStyle0 = spwMessageCss;
+
+const SpwMessage$1 = /*@__PURE__*/ proxyCustomElement(class SpwMessage extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.handleKeyDown = (ev) => {
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+                this.handleDismiss();
+            }
+        };
+        this.handleDismiss = () => {
+            dismissMessage(this.messageId, () => {
+                this.isVisible = false;
+            });
+        };
+        this.variant = 'default';
+        this.messageId = undefined;
+        this.isDismissable = true;
+        this.dismissableText = 'Masquer';
+        this.messageTitle = 'Notification';
+        this.isVisible = true;
+    }
+    componentWillLoad() {
+        this.isVisible = !shouldHideMessage(this.messageId);
+    }
+    render() {
+        return this.isVisible ? (h(Host, null, h("div", { class: getElementClass(this.variant), role: "alert", "aria-live": "polite", "aria-label": this.messageTitle }, h("div", { class: "spw-message__title-container" }, h("strong", { class: "spw-message__title" }, h("spw-icon", { icon: getIcon(this.variant) }), " ", this.messageTitle), this.isDismissable && (h("spw-link", { tabindex: "0", icon: "fa-close", class: "spw-message__close", "aria-label": this.dismissableText, onClick: this.handleDismiss, onKeyDown: this.handleKeyDown }, this.dismissableText))), h("div", { class: "spw-message__text" }, h("slot", null))))) : null;
+    }
+    get el() { return this; }
+    static get style() { return SpwMessageStyle0; }
+}, [1, "spw-message", {
+        "variant": [1],
+        "messageId": [1, "message-id"],
+        "isDismissable": [4, "is-dismissable"],
+        "dismissableText": [1, "dismissable-text"],
+        "messageTitle": [1, "message-title"],
+        "isVisible": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-message", "spw-icon", "spw-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-message":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwMessage$1);
+            }
+            break;
+        case "spw-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "spw-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SpwMessage = SpwMessage$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwMessage, defineCustomElement };
+
+//# sourceMappingURL=spw-message.js.map

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

@@ -0,0 +1 @@
+{"file":"spw-message.js","mappings":";;;;AAAO,MAAM,OAAO,GAAG,OAAO,IAAI;AAClC,EAAE,MAAM,KAAK,GAAG;AAChB,IAAI,OAAO,EAAE,cAAc;AAC3B,IAAI,OAAO,EAAE,UAAU;AACvB,IAAI,IAAI,EAAE,gBAAgB;AAC1B,IAAI,OAAO,EAAE,yBAAyB;AACtC,IAAI,KAAK,EAAE,yBAAyB;AACpC,GAAG,CAAC;AACJ;AACA,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC;AAC5C,CAAC,CAAC;AACF;AACO,MAAM,eAAe,GAAG,OAAO,IAAI;AAC1C,EAAE,OAAO;AACT,IAAI,aAAa,EAAE,IAAI;AACvB,IAAI,CAAC,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,GAAG,IAAI;AACrC,GAAG,CAAC;AACJ,CAAC,CAAC;AACF;AACO,MAAM,iBAAiB,GAAG,SAAS,IAAI;AAC9C,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAC5D,CAAC,CAAC;AACF;AACO,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,YAAY,KAAK;AAC3D,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAC3D,EAAE,YAAY,EAAE,CAAC;AACjB,CAAC;;AC1BD,MAAM,aAAa,GAAG,8oIAA8oI,CAAC;AACrqI,yBAAe,aAAa;;MCOfA,YAAU;;;;;QAoBb,kBAAa,GAAG,CAAC,EAAiB;YACxC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,EAAE;gBACtB,EAAE,CAAC,cAAc,EAAE,CAAC;gBACpB,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;SACF,CAAC;QAEM,kBAAa,GAAG;YACtB,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE;gBAC7B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB,CAAC,CAAC;SACJ,CAAC;uBA3BsE,SAAS;;6BAIhD,IAAI;+BAEH,SAAS;4BAEZ,cAAc;yBAEf,IAAI;;IAElC,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACrD;IAeD,MAAM;QACJ,OAAO,IAAI,CAAC,SAAS,IACnB,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,EAAC,OAAO,eAAW,QAAQ,gBAAa,IAAI,CAAC,YAAY,IACtG,WAAK,KAAK,EAAC,8BAA8B,IACvC,cAAQ,KAAK,EAAC,oBAAoB,IAChC,gBAAU,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,GAAa,OAAE,IAAI,CAAC,YAAY,CAC9D,EACR,IAAI,CAAC,aAAa,KACjB,gBAAU,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,oBAAoB,gBAAa,IAAI,CAAC,eAAe,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,aAAa,IAC3J,IAAI,CAAC,eAAe,CACZ,CACZ,CACG,EACN,WAAK,KAAK,EAAC,mBAAmB,IAC5B,eAAa,CACT,CACF,CACD,IACL,IAAI,CAAC;KACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwMessage"],"sources":["src/components/spw-message/utils.js","src/components/spw-message/spw-message.scss?tag=spw-message&encapsulation=shadow","src/components/spw-message/spw-message.tsx"],"sourcesContent":["export const getIcon = variant => {\n  const icons = {\n    default: 'fa-lightbulb',\n    success: 'fa-check',\n    info: 'fa-info-circle',\n    warning: 'fa-exclamation-triangle',\n    alert: 'fa-exclamation-triangle',\n  };\n\n  return icons[variant] || icons['default'];\n};\n\nexport const getElementClass = variant => {\n  return {\n    'spw-message': true,\n    [`spw-message--${variant}`]: true,\n  };\n};\n\nexport const shouldHideMessage = messageId => {\n  return !!localStorage.getItem(`spw-message-${messageId}`);\n};\n\nexport const dismissMessage = (messageId, hideCallback) => {\n  localStorage.setItem(`spw-message-${messageId}`, 'true');\n  hideCallback();\n};\n","@import '../../scss/mixins';\n\n:host {\n  display: block;\n}\n\n.spw-message {\n  padding: 24px;\n  border-radius: 16px;\n  color: var(--spw-colors-support-grey-grey-900);\n  font-size: 16px;\n\n  &__title-container {\n    display: flex;\n    gap: 24px;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    flex-direction: column;\n    @include breakpoint(lg) {\n      flex-direction: row;\n    }\n  }\n\n  &__close {\n    order: -1;\n    @include breakpoint(lg) {\n      order: initial;\n    }\n  }\n\n  &__title {\n    font-size: 18px;\n    flex: 1;\n    display: block;\n    spw-icon,\n    .spw-icon {\n      position: relative;\n      margin-right: 6px;\n      top: 1px;\n    }\n  }\n\n  &__text {\n    margin-top: 12px;\n  }\n\n  &--default {\n    background: var(--spw-colors-support-grey-grey-100);\n  }\n\n  &--success {\n    background: var(--spw-colors-multi-branding-green-green-50);\n    spw-icon,\n    .spw-icon {\n      color: var(--spw-colors-multi-branding-green-green-600);\n    }\n  }\n\n  &--alert {\n    background: var(--spw-colors-multi-branding-red-red-50);\n    spw-icon,\n    .spw-icon {\n      color: var(--spw-colors-multi-branding-red-red-accent-3);\n    }\n  }\n\n  &--info {\n    background: var(--spw-colors-multi-branding-blue-blue-50);\n    spw-icon,\n    .spw-icon {\n      color: var(--spw-colors-multi-branding-blue-blue-accent-3);\n    }\n  }\n\n  &--warning {\n    background: #fffdeb;\n    spw-icon,\n    .spw-icon {\n      color: #e6b800;\n    }\n  }\n\n  spw-link {\n    --spw-link-color: var(--spw-colors-support-grey-grey-900);\n    --spw-link-hover-color: var(--spw-colors-support-grey-grey-900);\n    --spw-link-active-color: var(--spw-colors-support-grey-grey-800);\n    --spw-link-padding: 12px;\n    &:focus-visible {\n      outline-offset: 1px;\n      outline: 2px solid var(--spw-ds-focus);\n    }\n  }\n}\n","import { Component, Host, h, Prop, State, Element } from '@stencil/core';\nimport { getIcon, getElementClass, shouldHideMessage, dismissMessage } from './utils.js';\n\n@Component({\n  tag: 'spw-message',\n  styleUrl: 'spw-message.scss',\n  shadow: true,\n})\nexport class SpwMessage {\n  @Element() el: HTMLSpwMessageElement;\n\n  /** Le type de variante */\n  @Prop() variant: 'default' | 'success' | 'info' | 'alert' | 'warning' = 'default';\n  /** Identifiant unique pour le message */\n  @Prop() messageId: string;\n  /** Si la notification est masquable */\n  @Prop() isDismissable: boolean = true;\n  /** Texte du bouton pour masquer la notification */\n  @Prop() dismissableText: string = 'Masquer';\n  /** Titre de la notification */\n  @Prop() messageTitle: string = 'Notification';\n\n  @State() isVisible: boolean = true;\n\n  componentWillLoad() {\n    this.isVisible = !shouldHideMessage(this.messageId);\n  }\n\n  private handleKeyDown = (ev: KeyboardEvent) => {\n    if (ev.key === 'Enter') {\n      ev.preventDefault();\n      this.handleDismiss();\n    }\n  };\n\n  private handleDismiss = () => {\n    dismissMessage(this.messageId, () => {\n      this.isVisible = false;\n    });\n  };\n\n  render() {\n    return this.isVisible ? (\n      <Host>\n        <div class={getElementClass(this.variant)} role=\"alert\" aria-live=\"polite\" aria-label={this.messageTitle}>\n          <div class=\"spw-message__title-container\">\n            <strong class=\"spw-message__title\">\n              <spw-icon icon={getIcon(this.variant)}></spw-icon> {this.messageTitle}\n            </strong>\n            {this.isDismissable && (\n              <spw-link tabindex=\"0\" icon=\"fa-close\" class=\"spw-message__close\" aria-label={this.dismissableText} onClick={this.handleDismiss} onKeyDown={this.handleKeyDown}>\n                {this.dismissableText}\n              </spw-link>\n            )}\n          </div>\n          <div class=\"spw-message__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    ) : null;\n  }\n}\n"],"version":3}

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

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

package/dist/components/spw-modal.js

@@ -0,0 +1,324 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-3706b88e.js';
+import { d as defineCustomElement$2 } from './p-72ca702e.js';
+
+/**
+ * Copy/pasted from https://github.com/andreasbm/focus-trap
+ */
+/**
+ * Traverses the slots of the open shadowroots and returns all children matching the query.
+ * We need to traverse each child-depth one at a time because if an element should be skipped
+ * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll("*")
+ * the information of whether the children is within a hidden parent is lost.
+ * @param {ShadowRoot | HTMLElement} root
+ * @param skipNode
+ * @param isMatch
+ * @param {number} maxDepth
+ * @param {number} depth
+ * @returns {HTMLElement[]}
+ */
+function queryShadowRoot(root, skipNode, isMatch, maxDepth = 20, depth = 0) {
+    const matches = [];
+    // If the depth is above the max depth, abort the searching here.
+    if (depth >= maxDepth) {
+        return matches;
+    }
+    // Traverses a slot element
+    const traverseSlot = ($slot) => {
+        // Only check nodes that are of the type Node.ELEMENT_NODE
+        // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+        const assignedNodes = $slot.assignedNodes().filter(node => node.nodeType === 1);
+        if (assignedNodes.length > 0) {
+            const $slotParent = assignedNodes[0].parentElement;
+            return queryShadowRoot($slotParent, skipNode, isMatch, maxDepth, depth + 1);
+        }
+        return [];
+    };
+    // Go through each child and continue the traversing if necessary
+    // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.
+    // Therefore we fallback to an empty array if it is undefined.
+    const children = Array.from(root.children || []);
+    for (const $child of children) {
+        // Check if the element and its descendants should be skipped
+        if (skipNode($child)) {
+            // console.log('-- SKIP', $child);
+            continue;
+        }
+        // console.log('$child', $child);
+        // If the element matches we always add it
+        if (isMatch($child)) {
+            matches.push($child);
+        }
+        if ($child.shadowRoot != null) {
+            // If the element has a shadow root we need to traverse it
+            matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));
+        }
+        else if ($child.tagName === 'SLOT') {
+            // If the child is a slot we need to traverse each assigned node
+            matches.push(...traverseSlot($child));
+        }
+        else {
+            // Traverse the children of the element
+            matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));
+        }
+    }
+    return matches;
+}
+/**
+ * Returns whether the element is hidden.
+ * @param $elem
+ */
+function isHidden($elem) {
+    return ($elem.hasAttribute('hidden') ||
+        ($elem.hasAttribute('aria-hidden') && $elem.getAttribute('aria-hidden') !== 'false') ||
+        // A quick and dirty way to check whether the element is hidden.
+        // For a more fine-grained check we could use "window.getComputedStyle" but we don't because of bad performance.
+        // If the element has visibility set to "hidden" or "collapse", display set to "none" or opacity set to "0" through CSS
+        // we won't be able to catch it here. We accept it due to the huge performance benefits.
+        $elem.style.display === `none` ||
+        $elem.style.opacity === `0` ||
+        $elem.style.visibility === `hidden` ||
+        $elem.style.visibility === `collapse`);
+    // If offsetParent is null we can assume that the element is hidden
+    // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null
+    // || $elem.offsetParent == null;
+}
+/**
+ * Returns whether the element is disabled.
+ * @param $elem
+ */
+function isDisabled($elem) {
+    return $elem.hasAttribute('disabled') || ($elem.hasAttribute('aria-disabled') && $elem.getAttribute('aria-disabled') !== 'false');
+}
+/**
+ * Determines whether an element is focusable.
+ * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194
+ * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable
+ * @param $elem
+ */
+function isFocusable($elem) {
+    // Discard elements that are removed from the tab order.
+    if ($elem.getAttribute('tabindex') === '-1' || isHidden($elem) || isDisabled($elem)) {
+        return false;
+    }
+    return (
+    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists
+    $elem.hasAttribute('tabindex') ||
+        // Anchor tags or area tags with a href set
+        (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) && $elem.hasAttribute('href')) ||
+        // Form elements which are not disabled
+        $elem instanceof HTMLButtonElement ||
+        $elem instanceof HTMLInputElement ||
+        $elem instanceof HTMLTextAreaElement ||
+        $elem instanceof HTMLSelectElement ||
+        // IFrames
+        $elem instanceof HTMLIFrameElement);
+}
+
+function animationTo(element, keyframes, options) {
+    const animated = element.animate(keyframes, Object.assign(Object.assign({}, options), { fill: 'both' }));
+    animated.addEventListener('finish', () => {
+        // @ts-ignore
+        animated.commitStyles();
+        animated.cancel();
+    });
+    return animated;
+}
+const keyframeDefaults = {
+    easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',
+};
+const KEYFRAMES = {
+    fadeIn: [
+        Object.assign(Object.assign({ offset: 0 }, keyframeDefaults), { opacity: 0 }),
+        Object.assign(Object.assign({ offset: 1 }, keyframeDefaults), { opacity: 1 }),
+    ],
+    fadeOut: [
+        Object.assign(Object.assign({ offset: 0 }, keyframeDefaults), { opacity: 1 }),
+        Object.assign(Object.assign({ offset: 1 }, keyframeDefaults), { opacity: 0 }),
+    ],
+};
+
+const spwModalCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1220px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-modal{align-items:center;display:none;height:100%;justify-content:center;left:0;overflow-y:auto;position:fixed;top:0;width:100%;z-index:1060}.spw-modal--opened{display:flex}.spw-modal__overlay{background:#000;height:100%;left:0;opacity:.7;position:absolute;top:0;width:100%;z-index:0}.spw-modal__content-container{align-items:stretch;background-color:#fff;border-radius:var(--spw-spacings-border-radius-lg);box-shadow:var(--spw-effect-elevation-6);box-sizing:border-box;display:flex;justify-content:center;overflow:hidden;position:absolute;width:90%}.spw-modal__content-container--small{max-width:480px}.spw-modal__content-container--medium{max-width:600px}.spw-modal__content-container--large{max-width:768px}.spw-modal__content-container--fluid{max-width:100%}.spw-modal__content{border:1px solid var(--spw-color-themes-grey-grey-300);display:flex;flex-direction:column;max-height:90vh;overflow-y:auto;width:100%}.spw-modal--sticky-buttons .spw-modal__content{overflow-y:visible}.spw-modal__icon-container{align-items:center;align-self:stretch;background-color:#fff;display:flex;justify-content:center;width:32px}.spw-modal__header{align-items:center;border-radius:1px 1px 0 0;box-sizing:border-box;color:var(--spw-colors-support-grey-grey-900);display:flex;justify-content:space-between;margin-bottom:12px;margin-top:6px;padding:24px 24px 0}.spw-modal__caption{word-wrap:break-word;overflow:hidden;white-space:pre-wrap}.spw-modal__header h2{color:var(--spw-colors-support-grey-grey-900);font-size:18px;margin:0}.spw-modal__header button{background:none;border:none;cursor:pointer;font-size:1.5em;padding:0}.spw-modal__close-button{cursor:pointer;font-size:21px;position:absolute;right:12px;top:12px}.spw-modal__close-button:hover{opacity:.7}.spw-modal__body{box-sizing:border-box;color:var(--spw-colors-support-grey-grey-700);flex:1;font-size:16px;margin-bottom:12px;padding:0 24px}.spw-modal--sticky-buttons .spw-modal__body{overflow-y:auto}.spw-modal__buttons ::slotted([slot=buttons]){padding:12px 24px 24px}.spw-modal__footer--buttons-present ::slotted(*){display:flex;gap:12px;justify-content:flex-end;padding:8px 24px 24px}.spw-modal__content-container--small .spw-modal__footer--buttons-present ::slotted(*){flex-direction:column;gap:8px}.spw-modal__content-container--medium .spw-modal__footer--buttons-present ::slotted(*){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.spw-modal__border{align-items:center;display:flex;flex-grow:1;font-size:1.5em;justify-content:center;width:100%}";
+const SpwModalStyle0 = spwModalCss;
+
+const SpwModal$1 = /*@__PURE__*/ proxyCustomElement(class SpwModal extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.spwModalOpen = createEvent(this, "spwModalOpen", 7);
+        this.spwModalClose = createEvent(this, "spwModalClose", 7);
+        this.focusableElements = [];
+        this.handleClick = (event) => {
+            const trigger = event.target.closest('[data-modal-trigger]');
+            if (trigger) {
+                const modalId = trigger.getAttribute('data-modal-trigger');
+                if (modalId === this.hostElement.id) {
+                    this.opened = true;
+                }
+            }
+        };
+        this.handleClose = (event) => {
+            const trigger = event.target.closest('[data-modal-close]');
+            if (trigger) {
+                const modalId = trigger.getAttribute('data-modal-close');
+                if (modalId === this.hostElement.id) {
+                    this.opened = false;
+                }
+            }
+        };
+        this.handleTopFocus = () => {
+            this.attemptFocus(this.getLastFocusableElement());
+        };
+        this.handleBottomFocus = () => {
+            this.attemptFocus(this.getFirstFocusableElement());
+        };
+        this.handleKeypress = (event) => {
+            if (this.showModal && event.key === 'Escape') {
+                this.doBeforeClose('ESCAPE_KEY');
+            }
+        };
+        this.opened = false;
+        this.showModal = this.opened || false;
+        this.caption = 'Titre de la modal';
+        this.closeOnOverlayClick = true;
+        this.stickyButtons = false;
+        this.size = 'small';
+        this.alertIcon = '';
+        this.okButtonLabel = 'Confirmer';
+        this.cancelButtonLabel = 'Annuler';
+        this.slotButtonsPresent = false;
+        this.showCloseButton = true;
+    }
+    componentDidLoad() {
+        this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, el => isHidden(el) || el.matches('[data-focus-trap-edge]'), isFocusable);
+        document.addEventListener('click', this.handleClick);
+        document.addEventListener('click', this.handleClose);
+        document.addEventListener('keydown', this.handleKeypress);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClick);
+        document.removeEventListener('click', this.handleClose);
+        document.removeEventListener('keydown', this.handleKeypress);
+    }
+    getFirstFocusableElement() {
+        return this.focusableElements[0];
+    }
+    getLastFocusableElement() {
+        return this.focusableElements[this.focusableElements.length - 1];
+    }
+    attemptFocus(element) {
+        if (element == null) {
+            setTimeout(() => {
+                this.closeButton.focus();
+            });
+            return;
+        }
+        setTimeout(() => {
+            element.focus();
+        }, 0);
+    }
+    open() {
+        this.showModal = true;
+        try {
+            const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {
+                duration: 200,
+            });
+            anim.addEventListener('finish', () => {
+                setTimeout(() => {
+                    var _a, _b;
+                    (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.focus();
+                    (_b = this.getLastFocusableElement()) === null || _b === void 0 ? void 0 : _b.blur();
+                }, 0);
+                this.spwModalOpen.emit();
+            });
+        }
+        catch (err) {
+            this.spwModalOpen.emit();
+        }
+    }
+    close() {
+        try {
+            const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {
+                duration: 200,
+            });
+            anim.addEventListener('finish', () => {
+                this.showModal = false;
+                this.spwModalClose.emit();
+            });
+        }
+        catch (err) {
+            this.showModal = false;
+            this.spwModalClose.emit();
+        }
+    }
+    doBeforeClose(trigger) {
+        const triggers = [];
+        triggers.push(trigger);
+        const prevented = triggers.some(event => event.defaultPrevented);
+        if (!prevented) {
+            this.opened = false;
+        }
+    }
+    openedChanged(newValue) {
+        newValue === true ? this.open() : this.close();
+    }
+    handleOverlayClick() {
+        if (this.closeOnOverlayClick) {
+            this.doBeforeClose('BACKDROP');
+        }
+    }
+    get elementClass() {
+        return {
+            'spw-modal': true,
+            'spw-modal--opened': this.showModal,
+            'spw-modal--sticky-buttons': this.stickyButtons,
+        };
+    }
+    render() {
+        return (h(Host, { key: '4fd8ce50409d48a8348542e0b8de43e93992e707' }, h("div", { key: 'e7d0beefb5b9fd255cf2d4728850189d8ef7f779', ref: el => (this.modalContainer = el), class: this.elementClass }, h("div", { key: '884d4f6e571b86a7c4956305e0d56c8612ac44a4', class: "spw-modal__overlay", onClick: () => this.handleOverlayClick() }), h("div", { key: 'c244eda2abf043741bd9478b68180b6ac58887b1', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { key: 'f134fba630f9ab4929ca0104e37f352aa23d187c', class: `spw-modal__content-container spw-modal__content-container--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, h("div", { key: '08f2f50cdc0073bd739d653bfe652d84889582de', class: "spw-modal__content" }, h("div", { key: '81581611eb5d7b384694de9fd56819696d169a9d', class: "spw-modal__header" }, h("h2", { key: 'cebf2dcdb0d0bf5b84dec83815f95d2bd04be4ff', class: "spw-modal__caption" }, this.caption), this.showCloseButton && (h("spw-icon", { key: '7fc41c76aebb18a8cba76eb6e76df0bd30735945', class: "spw-modal__close-button", ref: el => (this.closeButton = el), icon: "fa-xmark", onClick: () => this.doBeforeClose('CLOSE_BUTTON') }))), h("div", { key: '47c627e9b302629fe48110cd5696afc62f5f07a4', class: "spw-modal__body" }, h("slot", { key: 'b447f58d68463e2a038b2730cb92fe65cd89733b', name: "content" })), h("div", { key: 'f03e2d95cf416a4aeb7c64083568b050956515e0', class: "spw-modal__buttons" }, h("slot", { key: '8959b3535b64398ed8754aa736d6276daf462fb4', name: "buttons" })))), h("div", { key: '9842e77f6c9f504cc41fd04795a42dfaf27dd475', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "opened": ["openedChanged"]
+    }; }
+    static get style() { return SpwModalStyle0; }
+}, [1, "spw-modal", {
+        "opened": [1540],
+        "caption": [1],
+        "closeOnOverlayClick": [4, "close-on-overlay-click"],
+        "stickyButtons": [4, "sticky-buttons"],
+        "size": [1],
+        "alertIcon": [1, "alert-icon"],
+        "okButtonLabel": [1, "ok-button-label"],
+        "cancelButtonLabel": [1, "cancel-button-label"],
+        "showCloseButton": [4, "show-close-button"],
+        "showModal": [32],
+        "slotButtonsPresent": [32]
+    }, undefined, {
+        "opened": ["openedChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-modal", "spw-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwModal$1);
+            }
+            break;
+        case "spw-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SpwModal = SpwModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwModal, defineCustomElement };
+
+//# sourceMappingURL=spw-modal.js.map

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

@@ -0,0 +1 @@
+{"file":"spw-modal.js","mappings":"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","names":["SpwModal"],"sources":["src/utils/focus-trap.ts","src/utils/animation.ts","src/components/spw-modal/spw-modal.scss?tag=spw-modal&encapsulation=shadow","src/components/spw-modal/spw-modal.tsx"],"sourcesContent":["/**\n * Copy/pasted from https://github.com/andreasbm/focus-trap\n */\n\n/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\n * the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(\n  root: ShadowRoot | HTMLElement,\n  skipNode: ($elem: HTMLElement) => boolean,\n  isMatch: ($elem: HTMLElement) => boolean,\n  maxDepth: number = 20,\n  depth: number = 0,\n): HTMLElement[] {\n  const matches: HTMLElement[] = [];\n\n  // If the depth is above the max depth, abort the searching here.\n  if (depth >= maxDepth) {\n    return matches;\n  }\n\n  // Traverses a slot element\n  const traverseSlot = ($slot: HTMLSlotElement) => {\n    // Only check nodes that are of the type Node.ELEMENT_NODE\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n    const assignedNodes = $slot.assignedNodes().filter(node => node.nodeType === 1);\n    if (assignedNodes.length > 0) {\n      const $slotParent = assignedNodes[0].parentElement!;\n      return queryShadowRoot($slotParent, skipNode, isMatch, maxDepth, depth + 1);\n    }\n\n    return [];\n  };\n\n  // Go through each child and continue the traversing if necessary\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n  // Therefore we fallback to an empty array if it is undefined.\n  const children = Array.from(root.children || []) as HTMLElement[];\n  for (const $child of children) {\n    // Check if the element and its descendants should be skipped\n    if (skipNode($child)) {\n      // console.log('-- SKIP', $child);\n      continue;\n    }\n\n    // console.log('$child', $child);\n\n    // If the element matches we always add it\n    if (isMatch($child)) {\n      matches.push($child);\n    }\n\n    if ($child.shadowRoot != null) {\n      // If the element has a shadow root we need to traverse it\n      matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));\n    } else if ($child.tagName === 'SLOT') {\n      // If the child is a slot we need to traverse each assigned node\n      matches.push(...traverseSlot($child as HTMLSlotElement));\n    } else {\n      // Traverse the children of the element\n      matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));\n    }\n  }\n\n  return matches;\n}\n\n/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('hidden') ||\n    ($elem.hasAttribute('aria-hidden') && $elem.getAttribute('aria-hidden') !== 'false') ||\n    // A quick and dirty way to check whether the element is hidden.\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\n    $elem.style.display === `none` ||\n    $elem.style.opacity === `0` ||\n    $elem.style.visibility === `hidden` ||\n    $elem.style.visibility === `collapse`\n  );\n\n  // If offsetParent is null we can assume that the element is hidden\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n  // || $elem.offsetParent == null;\n}\n\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem: HTMLElement): boolean {\n  return $elem.hasAttribute('disabled') || ($elem.hasAttribute('aria-disabled') && $elem.getAttribute('aria-disabled') !== 'false');\n}\n\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem: HTMLElement): boolean {\n  // Discard elements that are removed from the tab order.\n  if ($elem.getAttribute('tabindex') === '-1' || isHidden($elem) || isDisabled($elem)) {\n    return false;\n  }\n\n  return (\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n    $elem.hasAttribute('tabindex') ||\n    // Anchor tags or area tags with a href set\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) && $elem.hasAttribute('href')) ||\n    // Form elements which are not disabled\n    $elem instanceof HTMLButtonElement ||\n    $elem instanceof HTMLInputElement ||\n    $elem instanceof HTMLTextAreaElement ||\n    $elem instanceof HTMLSelectElement ||\n    // IFrames\n    $elem instanceof HTMLIFrameElement\n  );\n}\n","export function animationTo(element: HTMLElement, keyframes: Keyframe | Keyframe[], options?: KeyframeAnimationOptions) {\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\n  animated.addEventListener('finish', () => {\n    // @ts-ignore\n    animated.commitStyles();\n    animated.cancel();\n  });\n\n  return animated;\n}\n\nconst keyframeDefaults = {\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n  fadeIn: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n  ],\n  fadeOut: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n  ],\n};\n",":host {\n  display: block;\n}\n\n.spw-modal {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1060;\n  overflow-y: auto;\n\n  &--opened {\n    display: flex;\n  }\n}\n\n.spw-modal__overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: black;\n  opacity: 0.7;\n  z-index: 0;\n}\n\n.spw-modal__content-container {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  width: 90%;\n  background-color: #fff;\n  box-shadow: var(--spw-effect-elevation-6);\n  overflow: hidden;\n  box-sizing: border-box;\n  align-items: stretch;\n  border-radius: var(--spw-spacings-border-radius-lg);\n\n  &--small {\n    max-width: 480px;\n  }\n\n  &--medium {\n    max-width: 600px;\n  }\n\n  &--large {\n    max-width: 768px;\n  }\n\n  &--fluid {\n    max-width: 100%;\n  }\n}\n\n.spw-modal__content {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--spw-color-themes-grey-grey-300);\n  width: 100%;\n  max-height: 90vh;\n  overflow-y: auto;\n\n  .spw-modal--sticky-buttons & {\n    overflow-y: visible;\n  }\n}\n\n.spw-modal__icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  background-color: #fff;\n  align-self: stretch;\n}\n\n.spw-modal__header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  padding-bottom: 0;\n  margin-top: 6px;\n  margin-bottom: 12px;\n  box-sizing: border-box;\n  border-radius: 1px 1px 0px 0px;\n  color: var(--spw-colors-support-grey-grey-900);\n}\n\n.spw-modal__caption {\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n.spw-modal__header h2 {\n  margin: 0;\n  font-size: 18px;\n  color: var(--spw-colors-support-grey-grey-900);\n}\n\n.spw-modal__header button {\n  background: none;\n  border: none;\n  font-size: 1.5em;\n  padding: 0;\n  cursor: pointer;\n}\n\n.spw-modal__close-button {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  cursor: pointer;\n  font-size: 21px;\n  &:hover {\n    opacity: 0.7;\n  }\n}\n\n.spw-modal__body {\n  padding: 0 24px;\n  margin-bottom: 12px;\n  box-sizing: border-box;\n  flex: 1;\n  font-size: 16px;\n  color: var(--spw-colors-support-grey-grey-700);\n\n  .spw-modal--sticky-buttons & {\n    overflow-y: auto;\n  }\n}\n\n.spw-modal__buttons {\n  ::slotted([slot='buttons']) {\n    padding: 24px;\n    padding-top: 12px;\n  }\n}\n\n.spw-modal__footer--buttons-present ::slotted(*) {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 24px;\n  padding-top: 8px;\n\n  .spw-modal__content-container--small & {\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .spw-modal__content-container--medium & {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n.spw-modal__border {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: 1.5em;\n  flex-grow: 1;\n}\n","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '@utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '@utils/animation';\n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n\n@Component({\n  tag: 'spw-modal',\n  styleUrl: 'spw-modal.scss',\n  shadow: true,\n})\nexport class SpwModal {\n  /** Indique si la modal est ouverte ou fermée, mutable et reflétée dans le DOM */\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n\n  @State() showModal: boolean = this.opened || false;\n\n  /** Titre de la modal */\n  @Prop() caption: string = 'Titre de la modal';\n  /** Indique si la fermeture de la modal est possible en cliquant sur l'overlay */\n  @Prop() closeOnOverlayClick: boolean = true;\n  /** Rend les boutons en bas de la modal \"collants\" (toujours visibles) si vrai */\n  @Prop() stickyButtons: boolean = false;\n  /** Événement déclenché lors de l'ouverture de la modal */\n  @Event() spwModalOpen: EventEmitter;\n  /** Événement déclenché lors de la fermeture de la modal */\n  @Event() spwModalClose: EventEmitter;\n  /** Définit la taille de la modal : 'small', 'medium', 'large' ou 'fluid' */\n  @Prop() size: 'small' | 'medium' | 'large' | 'fluid' = 'small';\n  /** Icône d'alerte à afficher dans la modal */\n  @Prop() alertIcon: string = '';\n  /** Texte du bouton de confirmation */\n  @Prop() okButtonLabel: string = 'Confirmer';\n  /** Texte du bouton d'annulation */\n  @Prop() cancelButtonLabel: string = 'Annuler';\n\n  @Element() hostElement: HTMLSpwModalElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  /** Indique si le bouton de fermeture est visible */\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLSpwIconElement;\n\n  componentDidLoad() {\n    this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, el => isHidden(el) || el.matches('[data-focus-trap-edge]'), isFocusable);\n    document.addEventListener('click', this.handleClick);\n    document.addEventListener('click', this.handleClose);\n    document.addEventListener('keydown', this.handleKeypress);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClick);\n    document.removeEventListener('click', this.handleClose);\n    document.removeEventListener('keydown', this.handleKeypress);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const trigger = (event.target as HTMLElement).closest('[data-modal-trigger]');\n    if (trigger) {\n      const modalId = trigger.getAttribute('data-modal-trigger');\n      if (modalId === this.hostElement.id) {\n        this.opened = true;\n      }\n    }\n  };\n\n  private handleClose = (event: MouseEvent) => {\n    const trigger = (event.target as HTMLElement).closest('[data-modal-close]');\n    if (trigger) {\n      const modalId = trigger.getAttribute('data-modal-close');\n      if (modalId === this.hostElement.id) {\n        this.opened = false;\n      }\n    }\n  };\n\n  private getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  private getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  private handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  private handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n  private attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => {\n        this.closeButton.focus();\n      });\n      return;\n    }\n\n    setTimeout(() => {\n      element.focus();\n    }, 0);\n  }\n\n  private open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.spwModalOpen.emit();\n      });\n    } catch (err) {\n      this.spwModalOpen.emit();\n    }\n  }\n\n  private close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.spwModalClose.emit();\n      });\n    } catch (err) {\n      this.showModal = false;\n      this.spwModalClose.emit();\n    }\n  }\n\n  private handleKeypress = (event: KeyboardEvent) => {\n    if (this.showModal && event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n  private doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some(event => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n  @Watch('opened')\n  openedChanged(newValue: boolean) {\n    newValue === true ? this.open() : this.close();\n  }\n\n  private handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP');\n    }\n  }\n\n  private get elementClass(): { [className: string]: boolean } {\n    return {\n      'spw-modal': true,\n      'spw-modal--opened': this.showModal,\n      'spw-modal--sticky-buttons': this.stickyButtons,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div ref={el => (this.modalContainer = el)} class={this.elementClass}>\n          <div class=\"spw-modal__overlay\" onClick={() => this.handleOverlayClick()}></div>\n          <div data-focus-trap-edge onFocus={this.handleTopFocus} tabindex=\"0\"></div>\n          <div class={`spw-modal__content-container spw-modal__content-container--${this.size}`} role=\"dialog\" aria-modal=\"true\" aria-label={this.caption}>\n            <div class=\"spw-modal__content\">\n              <div class=\"spw-modal__header\">\n                <h2 class=\"spw-modal__caption\">{this.caption}</h2>\n                {this.showCloseButton && (\n                  <spw-icon class=\"spw-modal__close-button\" ref={el => (this.closeButton = el)} icon=\"fa-xmark\" onClick={() => this.doBeforeClose('CLOSE_BUTTON')}></spw-icon>\n                )}\n              </div>\n              <div class=\"spw-modal__body\">\n                <slot name=\"content\" />\n              </div>\n              <div class=\"spw-modal__buttons\">\n                <slot name=\"buttons\"></slot>\n              </div>\n            </div>\n          </div>\n          <div data-focus-trap-edge onFocus={this.handleBottomFocus} tabindex=\"0\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/spw-mosaic-item.d.ts

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

package/dist/components/spw-mosaic-item.js

@@ -0,0 +1,52 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-3706b88e.js';
+
+const spwMosaicItemCss = ".spw-tw-px-3{padding-left:.75rem;padding-right:.75rem}/*! 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%;--spw-mosaic-item-width-mobile:100%;--spw-mosaic-item-width-tablet:100%;--spw-mosaic-item-width-desktop:100%;box-sizing:border-box;font-size:100%;line-height:1.3;margin-bottom:1.5rem;padding-left:.75rem;padding-right:.75rem;width:var(--spw-mosaic-item-width-mobile)}: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)}}@media (min-width:768px){:host{width:var(--spw-mosaic-item-width-tablet)}}@media (min-width:1024px){:host{width:var(--spw-mosaic-item-width-desktop)}}.spw-mobile-1{--spw-mosaic-item-width-mobile:100%}.spw-tablet-1{--spw-mosaic-item-width-tablet:100%}.spw-desktop-1{--spw-mosaic-item-width-desktop:100%}.spw-mobile-2{--spw-mosaic-item-width-mobile:50%}.spw-tablet-2{--spw-mosaic-item-width-tablet:50%}.spw-desktop-2{--spw-mosaic-item-width-desktop:50%}.spw-mobile-3{--spw-mosaic-item-width-mobile:33.33333%}.spw-tablet-3{--spw-mosaic-item-width-tablet:33.33333%}.spw-desktop-3{--spw-mosaic-item-width-desktop:33.33333%}.spw-mobile-4{--spw-mosaic-item-width-mobile:25%}.spw-tablet-4{--spw-mosaic-item-width-tablet:25%}.spw-desktop-4{--spw-mosaic-item-width-desktop:25%}.spw-mobile-5{--spw-mosaic-item-width-mobile:20%}.spw-tablet-5{--spw-mosaic-item-width-tablet:20%}.spw-desktop-5{--spw-mosaic-item-width-desktop:20%}.spw-mobile-6{--spw-mosaic-item-width-mobile:16.66667%}.spw-tablet-6{--spw-mosaic-item-width-tablet:16.66667%}.spw-desktop-6{--spw-mosaic-item-width-desktop:16.66667%}.spw-mobile-7{--spw-mosaic-item-width-mobile:14.28571%}.spw-tablet-7{--spw-mosaic-item-width-tablet:14.28571%}.spw-desktop-7{--spw-mosaic-item-width-desktop:14.28571%}.spw-mobile-8{--spw-mosaic-item-width-mobile:12.5%}.spw-tablet-8{--spw-mosaic-item-width-tablet:12.5%}.spw-desktop-8{--spw-mosaic-item-width-desktop:12.5%}.spw-mobile-9{--spw-mosaic-item-width-mobile:11.11111%}.spw-tablet-9{--spw-mosaic-item-width-tablet:11.11111%}.spw-desktop-9{--spw-mosaic-item-width-desktop:11.11111%}.spw-mobile-10{--spw-mosaic-item-width-mobile:10%}.spw-tablet-10{--spw-mosaic-item-width-tablet:10%}.spw-desktop-10{--spw-mosaic-item-width-desktop:10%}.spw-mobile-11{--spw-mosaic-item-width-mobile:9.09091%}.spw-tablet-11{--spw-mosaic-item-width-tablet:9.09091%}.spw-desktop-11{--spw-mosaic-item-width-desktop:9.09091%}.spw-mobile-12{--spw-mosaic-item-width-mobile:8.33333%}.spw-tablet-12{--spw-mosaic-item-width-tablet:8.33333%}.spw-desktop-12{--spw-mosaic-item-width-desktop:8.33333%}.spw-tw-mb-6{margin-bottom:1.5rem}";
+const SpwMosaicItemStyle0 = spwMosaicItemCss;
+
+const SpwMosaicItem$1 = /*@__PURE__*/ proxyCustomElement(class SpwMosaicItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.classString = 'spw-tw-px-3 spw-tw-mb-6';
+    }
+    componentDidLoad() {
+        this.el.closest('spw-mosaic').addEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));
+    }
+    disconnectedCallback() {
+        this.el.closest('spw-mosaic').removeEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));
+    }
+    handleConfigurationChange(event) {
+        const { colsMobile, colsTablet, colsDesktop } = event.detail;
+        this.el.style.setProperty('--spw-mosaic-item-width-mobile', `calc(100% / ${colsMobile})`);
+        this.el.style.setProperty('--spw-mosaic-item-width-tablet', `calc(100% / ${colsTablet})`);
+        this.el.style.setProperty('--spw-mosaic-item-width-desktop', `calc(100% / ${colsDesktop})`);
+    }
+    render() {
+        return (h(Host, { key: 'c2f0d85eed9a6c3a05b155f3adc340e788b40213' }, h("slot", { key: 'ea74766894f7a06dc67a991a4e13949cb3144b38' })));
+    }
+    get el() { return this; }
+    static get style() { return SpwMosaicItemStyle0; }
+}, [1, "spw-mosaic-item", {
+        "classString": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-mosaic-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-mosaic-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwMosaicItem$1);
+            }
+            break;
+    } });
+}
+
+const SpwMosaicItem = SpwMosaicItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwMosaicItem, defineCustomElement };
+
+//# sourceMappingURL=spw-mosaic-item.js.map

package/dist/components/spw-mosaic-item.js.map

@@ -0,0 +1 @@
+{"file":"spw-mosaic-item.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,6yJAA6yJ,CAAC;AACv0J,4BAAe,gBAAgB;;MCMlBA,eAAa;;;;;2BAGO,yBAAyB;;IAExD,gBAAgB;QACd,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,gBAAgB,CAAC,4BAA4B,EAAE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KACzH;IAED,oBAAoB;QAClB,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,mBAAmB,CAAC,4BAA4B,EAAE,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC5H;IAEO,yBAAyB,CAAC,KAAK;QACrC,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAC7D,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,gCAAgC,EAAE,eAAe,UAAU,GAAG,CAAC,CAAC;QAC1F,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,gCAAgC,EAAE,eAAe,UAAU,GAAG,CAAC,CAAC;QAC1F,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,iCAAiC,EAAE,eAAe,WAAW,GAAG,CAAC,CAAC;KAC7F;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwMosaicItem"],"sources":["src/components/spw-mosaic/spw-mosaic-item/spw-mosaic-item.scss?tag=spw-mosaic-item&encapsulation=shadow","src/components/spw-mosaic/spw-mosaic-item/spw-mosaic-item.tsx"],"sourcesContent":[":host {\n  --spw-mosaic-item-width-mobile: 100%;\n  --spw-mosaic-item-width-tablet: 100%;\n  --spw-mosaic-item-width-desktop: 100%;\n\n  width: var(--spw-mosaic-item-width-mobile);\n  @apply spw-tw-px-3 spw-tw-mb-6;\n}\n\n@media (min-width: 768px) {\n  :host {\n    width: var(--spw-mosaic-item-width-tablet);\n  }\n}\n\n@media (min-width: 1024px) {\n  :host {\n    width: var(--spw-mosaic-item-width-desktop);\n  }\n}\n\n@for $i from 1 through 12 {\n  .spw-mobile-#{$i} {\n    --spw-mosaic-item-width-mobile: calc(100% / #{$i});\n  }\n\n  .spw-tablet-#{$i} {\n    --spw-mosaic-item-width-tablet: calc(100% / #{$i});\n  }\n\n  .spw-desktop-#{$i} {\n    --spw-mosaic-item-width-desktop: calc(100% / #{$i});\n  }\n}\n","import { Element, Component, Host, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'spw-mosaic-item',\n  styleUrl: 'spw-mosaic-item.scss',\n  shadow: true,\n})\nexport class SpwMosaicItem {\n  @Element() el: HTMLSpwMosaicItemElement;\n\n  @State() classString: string = 'spw-tw-px-3 spw-tw-mb-6';\n\n  componentDidLoad() {\n    this.el.closest('spw-mosaic').addEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));\n  }\n\n  disconnectedCallback() {\n    this.el.closest('spw-mosaic').removeEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));\n  }\n\n  private handleConfigurationChange(event) {\n    const { colsMobile, colsTablet, colsDesktop } = event.detail;\n    this.el.style.setProperty('--spw-mosaic-item-width-mobile', `calc(100% / ${colsMobile})`);\n    this.el.style.setProperty('--spw-mosaic-item-width-tablet', `calc(100% / ${colsTablet})`);\n    this.el.style.setProperty('--spw-mosaic-item-width-desktop', `calc(100% / ${colsDesktop})`);\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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