@swisspost/design-system-components 1.4.0 → 1.5.0

package/dist/docs.json

@@ -1,11 +1,163 @@
 {
-  "timestamp": "2023-08-31T09:34:16",
+  "timestamp": "2023-10-04T09:51:38",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.4.2",
     "typescriptVersion": "5.0.4"
   },
   "components": [
+    {
+      "filePath": "./src/components/post-alert/post-alert.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-alert",
+      "readme": "# post-alert\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "dismissLabel",
+          "type": "string",
+          "mutable": false,
+          "attr": "dismiss-label",
+          "reflectToAttr": false,
+          "docs": "The label to use for the close button of a dismissible alert.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "dismissible",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "dismissible",
+          "reflectToAttr": false,
+          "docs": "If `true`, a close button (×) is displayed and the alert can be dismissed by the user.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "fixed",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "fixed",
+          "reflectToAttr": false,
+          "docs": "If `true`, the alert is positioned at the bottom of the window, from edge to edge.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "mutable": false,
+          "attr": "icon",
+          "reflectToAttr": false,
+          "docs": "The icon to display in the alert. By default, the icon depends on the alert type.\n\nIf `none`, no icon is displayed.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "type",
+          "type": "\"danger\" | \"gray\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+          "mutable": false,
+          "attr": "type",
+          "reflectToAttr": false,
+          "docs": "The type of the alert.",
+          "docsTags": [],
+          "default": "'primary'",
+          "values": [
+            {
+              "value": "danger",
+              "type": "string"
+            },
+            {
+              "value": "gray",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "primary",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "dismiss",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "dismiss() => Promise<void>",
+          "parameters": [],
+          "docs": "Triggers alert dismissal programmatically (same as clicking on the close button (×)).",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "dismissed",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "An event emitted when the alert element is dismissed, after the transition.\nIt has no payload and only relevant for dismissible alerts.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "post-icon"
+      ],
+      "dependencyGraph": {
+        "post-alert": [
+          "post-icon"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/post-collapsible/post-collapsible.tsx",
       "encapsulation": "shadow",
@@ -232,9 +384,15 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "dependents": [],
+      "dependents": [
+        "post-alert"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "post-alert": [
+          "post-icon"
+        ]
+      }
     },
     {
       "filePath": "./src/components/post-tab-header/post-tab-header.tsx",
@@ -365,6 +523,158 @@
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {}
+    },
+    {
+      "filePath": "./src/components/post-tooltip/post-tooltip.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-tooltip",
+      "readme": "# post-tooltip\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "backgroundColor",
+          "type": "\"primary\" | \"yellow\"",
+          "mutable": false,
+          "attr": "background-color",
+          "reflectToAttr": false,
+          "docs": "Defines the background color of the tooltip.\nChoose the one that provides the best contrast in your scenario.",
+          "docsTags": [],
+          "default": "'primary'",
+          "values": [
+            {
+              "value": "primary",
+              "type": "string"
+            },
+            {
+              "value": "yellow",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "placement",
+          "type": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "mutable": false,
+          "attr": "placement",
+          "reflectToAttr": false,
+          "docs": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries.",
+          "docsTags": [],
+          "default": "'top'",
+          "values": [
+            {
+              "value": "bottom",
+              "type": "string"
+            },
+            {
+              "value": "bottom-end",
+              "type": "string"
+            },
+            {
+              "value": "bottom-start",
+              "type": "string"
+            },
+            {
+              "value": "left",
+              "type": "string"
+            },
+            {
+              "value": "left-end",
+              "type": "string"
+            },
+            {
+              "value": "left-start",
+              "type": "string"
+            },
+            {
+              "value": "right",
+              "type": "string"
+            },
+            {
+              "value": "right-end",
+              "type": "string"
+            },
+            {
+              "value": "right-start",
+              "type": "string"
+            },
+            {
+              "value": "top",
+              "type": "string"
+            },
+            {
+              "value": "top-end",
+              "type": "string"
+            },
+            {
+              "value": "top-start",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "hide",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "hide() => Promise<void>",
+          "parameters": [],
+          "docs": "Programmatically hide this tooltip",
+          "docsTags": []
+        },
+        {
+          "name": "show",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "show(target: HTMLElement) => Promise<void>",
+          "parameters": [],
+          "docs": "Programmatically display the tooltip",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+            }
+          ]
+        },
+        {
+          "name": "toggle",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "toggle(target: HTMLElement, force?: boolean) => Promise<void>",
+          "parameters": [],
+          "docs": "Toggle tooltip display",
+          "docsTags": [
+            {
+              "name": "param",
+              "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+            },
+            {
+              "name": "param",
+              "text": "force Pass true to always show or false to always hide"
+            }
+          ]
+        }
+      ],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
     }
   ]
 }

package/dist/esm/check-one-of-ded5e15e.js

@@ -0,0 +1,8 @@
+function checkOneOf(value, possibleValues, error) {
+  if (!possibleValues.includes(value))
+    throw new Error(error);
+}
+
+export { checkOneOf as c };
+
+//# sourceMappingURL=check-one-of-ded5e15e.js.map

package/dist/esm/check-one-of-ded5e15e.js.map

@@ -0,0 +1 @@
+{"file":"check-one-of-ded5e15e.js","mappings":"SAAgB,UAAU,CAAI,KAAQ,EAAE,cAA4B,EAAE,KAAa;EACjF,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC9D;;;;","names":[],"sources":["./src/utils/property-checkers/check-one-of.ts"],"sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: readonly T[], error: string) {\n  if (!possibleValues.includes(value)) throw new Error(error);\n}\n"],"version":3}

package/dist/esm/{check-type-67411ed3.js → check-type-18ebb4e7.js}

@@ -1,8 +1,3 @@
-function checkOneOf(value, possibleValues, error) {
-  if (!possibleValues.includes(value))
-    throw new Error(error);
-}
-
 function checkType(value, type, error) {
   const typeIsArray = type === 'array';
   const valueIsArray = Array.isArray(value);
@@ -16,6 +11,6 @@ function checkType(value, type, error) {
   }
 }
 
-export { checkOneOf as a, checkType as c };
+export { checkType as c };
 
-//# sourceMappingURL=check-type-67411ed3.js.map
+//# sourceMappingURL=check-type-18ebb4e7.js.map

package/dist/esm/check-type-18ebb4e7.js.map

@@ -0,0 +1 @@
+{"file":"check-type-18ebb4e7.js","mappings":"SAQgB,SAAS,CAAC,KAAc,EAAE,IAAkB,EAAE,KAAa;EACzE,MAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC;EACrC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;EAE1C,IAAI,WAAW,IAAI,YAAY,EAAE;IAC/B,IAAI,YAAY,KAAK,WAAW;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GAC1D;OAAM;IACL,IAAI,OAAO,KAAK,KAAK,IAAI;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACnD;AACH;;;;","names":[],"sources":["./src/utils/property-checkers/check-type.ts"],"sourcesContent":["export type PropertyType =\n  | 'boolean'\n  | 'number'\n  | 'string'\n  | 'array'\n  | 'object'\n  | 'function';\n\nexport function checkType(value: unknown, type: PropertyType, error: string) {\n  const typeIsArray = type === 'array';\n  const valueIsArray = Array.isArray(value);\n\n  if (typeIsArray || valueIsArray) {\n    if (valueIsArray !== typeIsArray) throw new Error(error);\n  } else {\n    if (typeof value !== type) throw new Error(error);\n  }\n}\n"],"version":3}

package/dist/esm/fade-671f1489.js

@@ -0,0 +1,9 @@
+const fadeDuration = 200;
+const fadedOutKeyFrame = { opacity: '0' };
+const fadedInKeyFrame = { opacity: '1' };
+const fadeIn = (el) => el.animate([fadedOutKeyFrame, fadedInKeyFrame], { duration: fadeDuration });
+const fadeOut = (el) => el.animate([fadedInKeyFrame, fadedOutKeyFrame], { duration: fadeDuration });
+
+export { fadeIn as a, fadeOut as f };
+
+//# sourceMappingURL=fade-671f1489.js.map

package/dist/esm/fade-671f1489.js.map

@@ -0,0 +1 @@
+{"file":"fade-671f1489.js","mappings":"AAAA,MAAM,YAAY,GAAG,GAAG,CAAC;AACzB,MAAM,gBAAgB,GAAG,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;AACxC,MAAM,eAAe,GAAG,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;MAE1B,MAAM,GAAG,CAAC,EAAW,KAAgB,EAAE,CAAC,OAAO,CAC1D,CAAE,gBAAgB,EAAE,eAAe,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAC1B;MAEW,OAAO,GAAG,CAAC,EAAW,KAAgB,EAAE,CAAC,OAAO,CAC3D,CAAE,eAAe,EAAE,gBAAgB,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE;;;;","names":[],"sources":["./src/animations/fade.ts"],"sourcesContent":["const fadeDuration = 200;\nconst fadedOutKeyFrame = {opacity: '0'};\nconst fadedInKeyFrame = {opacity: '1'};\n\nexport const fadeIn = (el: Element): Animation => el.animate(\n  [ fadedOutKeyFrame, fadedInKeyFrame ],\n  { duration: fadeDuration }\n);\n\nexport const fadeOut = (el: Element): Animation => el.animate(\n  [ fadedInKeyFrame, fadedOutKeyFrame ],\n  { duration: fadeDuration }\n);\n"],"version":3}

package/dist/esm/{index-cc0e53f0.js → index-5611074b.js}

@@ -77,6 +77,7 @@ function queryNonceMetaTagContent(doc) {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let simple = false;
     let lastSimple = false;
     const vNodeChildren = [];
@@ -104,6 +105,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -125,6 +130,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     return vnode;
 };
 /**
@@ -146,6 +154,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     return vnode;
 };
 const Host = {};
@@ -404,6 +415,14 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'key')
+            ;
+        else if (memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -520,7 +539,11 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     let i = 0;
     let elm;
     let childNode;
-    {
+    if (newVNode.$text$ !== null) {
+        // create text node
+        elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
+    }
+    else {
         if (!isSvgMode) {
             isSvgMode = newVNode.$tag$ === 'svg';
         }
@@ -610,6 +633,7 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
         const vnode = vnodes[index];
         if (vnode) {
             const elm = vnode.$elm$;
+            nullifyVNodeRefs(vnode);
             if (elm) {
                 // remove the vnode's element from the dom
                 elm.remove();
@@ -688,6 +712,8 @@ const removeVnodes = (vnodes, startIdx, endIdx) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -695,6 +721,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // VNode might have been moved left
@@ -761,7 +788,41 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // Here we do some checks to match up old and new nodes based on the
+            // `$key$` attribute, which is set by putting a `key="my-key"` attribute
+            // in the JSX for a DOM element in the implementation of a Stencil
+            // component.
+            //
+            // First we check to see if there are any nodes in the array of old
+            // children which have the same key as the first node in the new
+            // children.
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                // We found a node in the old children which matches up with the first
+                // node in the new children! So let's deal with that
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    // the tag doesn't match so we'll need a new DOM element
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    // invalidate the matching old node so that we won't try to update it
+                    // again later on
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // We either didn't find an element in the old children that matches
                 // the key of the first new child OR the build is not using `key`
                 // attributes at all. In either case we need to create a new element
@@ -810,7 +871,10 @@ const isSameVnode = (leftVNode, rightVNode) => {
     // compare if two vnode to see if they're "technically" the same
     // need to have the same element tag, and same key to be the same
     if (leftVNode.$tag$ === rightVNode.$tag$) {
-        return true;
+        // this will be set if components in the build have `key` attrs set on them
+        {
+            return leftVNode.$key$ === rightVNode.$key$;
+        }
     }
     return false;
 };
@@ -827,7 +891,8 @@ const patch = (oldVNode, newVNode) => {
     const oldChildren = oldVNode.$children$;
     const newChildren = newVNode.$children$;
     const tag = newVNode.$tag$;
-    {
+    const text = newVNode.$text$;
+    if (text === null) {
         {
             // test if we're rendering an svg element, or still rendering nodes inside of one
             // only add this to the when the compiler sees we're using an svg somewhere
@@ -849,6 +914,11 @@ const patch = (oldVNode, newVNode) => {
             updateChildren(elm, oldChildren, newVNode, newChildren);
         }
         else if (newChildren !== null) {
+            // no old child vnodes, but there are new child vnodes to add
+            if (oldVNode.$text$ !== null) {
+                // the old vnode was text, so be sure to clear it out
+                elm.textContent = '';
+            }
             // add the new vnode children
             addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
         }
@@ -860,6 +930,24 @@ const patch = (oldVNode, newVNode) => {
             isSvgMode = false;
         }
     }
+    else if (oldVNode.$text$ !== text) {
+        // update the text content for the text only vnode
+        // and also only if the text is different than before
+        elm.data = text;
+    }
+};
+/**
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
+ * calling them with `null`. This signals that the DOM element corresponding to
+ * the VDom node has been removed from the DOM.
+ *
+ * @param vNode a virtual DOM node
+ */
+const nullifyVNodeRefs = (vNode) => {
+    {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+        vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+    }
 };
 /**
  * The main entry point for Stencil's virtual DOM-based rendering engine
@@ -1310,6 +1398,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
                 hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;
             }
             endNewInstance();
+            fireConnectedCallback(hostRef.$lazyInstance$);
         }
         if (Cstr.style) {
             // this component has styles but we haven't registered them yet
@@ -1338,6 +1427,11 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
         schedule();
     }
 };
+const fireConnectedCallback = (instance) => {
+    {
+        safeCall(instance, 'connectedCallback');
+    }
+};
 const connectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
@@ -1376,12 +1470,20 @@ const connectedCallback = (elm) => {
                 initializeComponent(elm, hostRef, cmpMeta);
             }
         }
+        else {
+            // fire off connectedCallback() on component instance
+            fireConnectedCallback(hostRef.$lazyInstance$);
+        }
         endConnected();
     }
 };
 const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
-        getHostRef(elm);
+        const hostRef = getHostRef(elm);
+        const instance = hostRef.$lazyInstance$ ;
+        {
+            safeCall(instance, 'disconnectedCallback');
+        }
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -1600,4 +1702,4 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-cc0e53f0.js.map
+//# sourceMappingURL=index-5611074b.js.map