@spw-ds/spw-stencil-library 1.14.1 → 1.14.2

package/dist/cem.json

@@ -4241,6 +4241,292 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/spw-drawer/spw-drawer.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "spw-drawer",
+          "name": "SpwDrawer",
+          "attributes": [
+            {
+              "name": "caption",
+              "description": "Titre du drawer",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Titre du drawer'",
+              "fieldName": "caption"
+            },
+            {
+              "name": "close-button-text",
+              "description": "Texte du bouton de fermeture",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Fermer'",
+              "fieldName": "closeButtonText"
+            },
+            {
+              "name": "close-on-overlay-click",
+              "description": "Indique si la fermeture du drawer est possible en cliquant sur l'overlay",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "closeOnOverlayClick"
+            },
+            {
+              "name": "modal",
+              "description": "Indique si l'overlay (fond sombre) est visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "modal"
+            },
+            {
+              "name": "opened",
+              "description": "Indique si le drawer est ouvert ou fermé, mutable et reflété dans le DOM",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "opened"
+            },
+            {
+              "name": "position",
+              "description": "Position du drawer : 'left', 'right', 'top' ou 'bottom'",
+              "type": {
+                "text": "\"bottom\" | \"left\" | \"right\" | \"top\""
+              },
+              "default": "'right'",
+              "fieldName": "position"
+            },
+            {
+              "name": "show-caption",
+              "description": "Indique si le titre est visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "showCaption"
+            },
+            {
+              "name": "show-close-button",
+              "description": "Indique si le bouton de fermeture est visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "showCloseButton"
+            },
+            {
+              "name": "size",
+              "description": "Taille du drawer (largeur pour left/right) : 'small', 'medium', 'large' ou 'full'",
+              "type": {
+                "text": "\"full\" | \"large\" | \"medium\" | \"small\""
+              },
+              "default": "'medium'",
+              "fieldName": "size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "caption",
+              "description": "Titre du drawer",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Titre du drawer'",
+              "readonly": true,
+              "attribute": "caption"
+            },
+            {
+              "kind": "field",
+              "name": "closeButtonText",
+              "description": "Texte du bouton de fermeture",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Fermer'",
+              "readonly": true,
+              "attribute": "close-button-text"
+            },
+            {
+              "kind": "field",
+              "name": "closeOnOverlayClick",
+              "description": "Indique si la fermeture du drawer est possible en cliquant sur l'overlay",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "readonly": true,
+              "attribute": "close-on-overlay-click"
+            },
+            {
+              "kind": "field",
+              "name": "modal",
+              "description": "Indique si l'overlay (fond sombre) est visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "readonly": true,
+              "attribute": "modal"
+            },
+            {
+              "kind": "field",
+              "name": "opened",
+              "description": "Indique si le drawer est ouvert ou fermé, mutable et reflété dans le DOM",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "opened",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "description": "Position du drawer : 'left', 'right', 'top' ou 'bottom'",
+              "type": {
+                "text": "\"bottom\" | \"left\" | \"right\" | \"top\""
+              },
+              "default": "'right'",
+              "readonly": true,
+              "attribute": "position"
+            },
+            {
+              "kind": "field",
+              "name": "showCaption",
+              "description": "Indique si le titre est visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "readonly": true,
+              "attribute": "show-caption"
+            },
+            {
+              "kind": "field",
+              "name": "showCloseButton",
+              "description": "Indique si le bouton de fermeture est visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "readonly": true,
+              "attribute": "show-close-button"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "description": "Taille du drawer (largeur pour left/right) : 'small', 'medium', 'large' ou 'full'",
+              "type": {
+                "text": "\"full\" | \"large\" | \"medium\" | \"small\""
+              },
+              "default": "'medium'",
+              "readonly": true,
+              "attribute": "size"
+            },
+            {
+              "kind": "method",
+              "name": "closeDrawer",
+              "description": "Méthode publique pour fermer le drawer programmatiquement",
+              "return": {
+                "type": {
+                  "text": "Promise<void>",
+                  "references": [
+                    {
+                      "name": "Promise",
+                      "package": "global:"
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "openDrawer",
+              "description": "Méthode publique pour ouvrir le drawer programmatiquement",
+              "return": {
+                "type": {
+                  "text": "Promise<void>",
+                  "references": [
+                    {
+                      "name": "Promise",
+                      "package": "global:"
+                    }
+                  ]
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "spwDrawerClose",
+              "description": "Événement déclenché lors de la fermeture du drawer",
+              "type": {
+                "text": "CustomEvent<any>"
+              }
+            },
+            {
+              "name": "spwDrawerOpen",
+              "description": "Événement déclenché lors de l'ouverture du drawer",
+              "type": {
+                "text": "CustomEvent<any>"
+              }
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--spw-drawer-height-large",
+              "description": "Hauteur du drawer large (position top/bottom)"
+            },
+            {
+              "name": "--spw-drawer-height-medium",
+              "description": "Hauteur du drawer medium (position top/bottom)"
+            },
+            {
+              "name": "--spw-drawer-height-small",
+              "description": "Hauteur du drawer small (position top/bottom)"
+            },
+            {
+              "name": "--spw-drawer-width-large",
+              "description": "Largeur du drawer large (position left/right)"
+            },
+            {
+              "name": "--spw-drawer-width-medium",
+              "description": "Largeur du drawer medium (position left/right)"
+            },
+            {
+              "name": "--spw-drawer-width-small",
+              "description": "Largeur du drawer small (position left/right)"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SpwDrawer",
+          "declaration": {
+            "name": "SpwDrawer"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "spw-drawer",
+          "declaration": {
+            "name": "SpwDrawer"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/spw-dropdown/spw-dropdown.tsx",

package/dist/cjs/focus-trap-CCFWfNJ1.js

@@ -0,0 +1,118 @@
+'use strict';
+
+/**
+ * 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);
+}
+
+exports.isFocusable = isFocusable;
+exports.isHidden = isHidden;
+exports.queryShadowRoot = queryShadowRoot;

package/dist/cjs/index-DuCXzb-X.js

@@ -206,6 +206,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './spw-custom-select.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'spw-drawer.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './spw-drawer.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'spw-dropdown.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -314,6 +318,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './spw-list-title.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'spw-modal.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './spw-modal.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'spw-mosaic-item.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -494,10 +502,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './spw-message.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'spw-modal.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './spw-modal.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'spw-button_2.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */