@scania/tegel 0.0.5 → 0.0.6

package/dist/esm/{index-fdfb114c.js → index-2d8c4bc9.js}

@@ -31,6 +31,7 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
 /**
  * Default style mode id
  */
@@ -81,6 +82,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 slotName = null;
     let simple = false;
     let lastSimple = false;
@@ -109,6 +111,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         if (vnodeData.name) {
             slotName = vnodeData.name;
         }
@@ -124,11 +130,18 @@ const h = (nodeName, vnodeData, ...children) => {
             }
         }
     }
+    if (typeof nodeName === 'function') {
+        // nodeName is a functional component
+        return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
+    }
     const vnode = newVNode(nodeName, null);
     vnode.$attrs$ = vnodeData;
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     {
         vnode.$name$ = slotName;
     }
@@ -153,6 +166,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     {
         vnode.$name$ = null;
     }
@@ -166,6 +182,59 @@ const Host = {};
  * @returns whether it's a Host node or not
  */
 const isHost = (node) => node && node.$tag$ === Host;
+/**
+ * Implementation of {@link d.FunctionalUtilities} for Stencil's VDom.
+ *
+ * Note that these functions convert from {@link d.VNode} to
+ * {@link d.ChildNode} to give functional component developers a friendly
+ * interface.
+ */
+const vdomFnUtils = {
+    forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
+    map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),
+};
+/**
+ * Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a
+ * friendlier public interface (hence, 'convertToPublic').
+ *
+ * @param node the virtual DOM node to convert
+ * @returns a converted child node
+ */
+const convertToPublic = (node) => ({
+    vattrs: node.$attrs$,
+    vchildren: node.$children$,
+    vkey: node.$key$,
+    vname: node.$name$,
+    vtag: node.$tag$,
+    vtext: node.$text$,
+});
+/**
+ * Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in
+ * order to use the resulting object in the virtual DOM. The initial object was
+ * likely created as part of presenting a public API, so converting it back
+ * involved making it 'private' again (hence, `convertToPrivate`).
+ *
+ * @param node the child node to convert
+ * @returns a converted virtual DOM node
+ */
+const convertToPrivate = (node) => {
+    if (typeof node.vtag === 'function') {
+        const vnodeData = Object.assign({}, node.vattrs);
+        if (node.vkey) {
+            vnodeData.key = node.vkey;
+        }
+        if (node.vname) {
+            vnodeData.name = node.vname;
+        }
+        return h(node.vtag, vnodeData, ...(node.vchildren || []));
+    }
+    const vnode = newVNode(node.vtag, node.vtext);
+    vnode.$attrs$ = node.vattrs;
+    vnode.$children$ = node.vchildren;
+    vnode.$key$ = node.vkey;
+    vnode.$name$ = node.vname;
+    return vnode;
+};
 /**
  * Parse a new property value for a given property type.
  *
@@ -364,6 +433,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'key')
+            ;
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -430,16 +501,36 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
                 catch (e) { }
             }
+            /**
+             * Need to manually update attribute if:
+             * - memberName is not an attribute
+             * - if we are rendering the host element in order to reflect attribute
+             * - if it's a SVG, since properties might not work in <svg>
+             * - if the newValue is null/undefined or 'false'.
+             */
+            let xlink = false;
+            {
+                if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) {
+                    memberName = ln;
+                    xlink = true;
+                }
+            }
             if (newValue == null || newValue === false) {
                 if (newValue !== false || elm.getAttribute(memberName) === '') {
-                    {
+                    if (xlink) {
+                        elm.removeAttributeNS(XLINK_NS, memberName);
+                    }
+                    else {
                         elm.removeAttribute(memberName);
                     }
                 }
             }
             else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {
                 newValue = newValue === true ? '' : newValue;
-                {
+                if (xlink) {
+                    elm.setAttributeNS(XLINK_NS, memberName, newValue);
+                }
+                else {
                     elm.setAttribute(memberName, newValue);
                 }
             }
@@ -737,6 +828,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 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];
@@ -744,6 +837,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
@@ -845,7 +939,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, parentElm);
+                }
+                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
@@ -897,7 +1025,10 @@ const isSameVnode = (leftVNode, rightVNode) => {
         if (leftVNode.$tag$ === 'slot') {
             return leftVNode.$name$ === rightVNode.$name$;
         }
-        return true;
+        // this will be set if components in the build have `key` attrs set on them
+        {
+            return leftVNode.$key$ === rightVNode.$key$;
+        }
     }
     return false;
 };
@@ -1831,6 +1962,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
+const Fragment = (_, children) => children;
 const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
     if (listeners) {
         listeners.map(([flags, name, method]) => {
@@ -1940,10 +2072,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './sdds-breadcrumb.entry.js').then(processMod, consoleError);
-        case 'sdds-breadcrumb-link':
+        case 'sdds-breadcrumb-item':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-breadcrumb-link.entry.js').then(processMod, consoleError);
+            './sdds-breadcrumb-item.entry.js').then(processMod, consoleError);
         case 'sdds-button':
           return import(
             /* webpackMode: "lazy" */
@@ -1956,6 +2088,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './sdds-checkbox.entry.js').then(processMod, consoleError);
+        case 'sdds-chip':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-chip.entry.js').then(processMod, consoleError);
         case 'sdds-datetime':
           return import(
             /* webpackMode: "lazy" */
@@ -1968,46 +2104,94 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './sdds-dropdown-filter.entry.js').then(processMod, consoleError);
+        case 'sdds-folder-tab':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-folder-tab.entry.js').then(processMod, consoleError);
         case 'sdds-folder-tabs':
           return import(
             /* webpackMode: "lazy" */
             './sdds-folder-tabs.entry.js').then(processMod, consoleError);
-        case 'sdds-folder-tabs-button':
+        case 'sdds-footer':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-folder-tabs-button.entry.js').then(processMod, consoleError);
-        case 'sdds-folder-tabs-link':
+            './sdds-footer.entry.js').then(processMod, consoleError);
+        case 'sdds-footer-group':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-folder-tabs-link.entry.js').then(processMod, consoleError);
-        case 'sdds-footer':
+            './sdds-footer-group.entry.js').then(processMod, consoleError);
+        case 'sdds-footer-item':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-footer.entry.js').then(processMod, consoleError);
-        case 'sdds-footer-link':
+            './sdds-footer-item.entry.js').then(processMod, consoleError);
+        case 'sdds-header':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-footer-link.entry.js').then(processMod, consoleError);
-        case 'sdds-footer-link-group':
+            './sdds-header.entry.js').then(processMod, consoleError);
+        case 'sdds-header-brand-symbol':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-footer-link-group.entry.js').then(processMod, consoleError);
+            './sdds-header-brand-symbol.entry.js').then(processMod, consoleError);
         case 'sdds-header-cell':
           return import(
             /* webpackMode: "lazy" */
             './sdds-header-cell.entry.js').then(processMod, consoleError);
-        case 'sdds-inline-tabs':
+        case 'sdds-header-dropdown':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-inline-tabs.entry.js').then(processMod, consoleError);
-        case 'sdds-inline-tabs-button':
+            './sdds-header-dropdown.entry.js').then(processMod, consoleError);
+        case 'sdds-header-dropdown-list-user':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-header-dropdown-list-user.entry.js').then(processMod, consoleError);
+        case 'sdds-header-hamburger':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-header-hamburger.entry.js').then(processMod, consoleError);
+        case 'sdds-header-launcher':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-header-launcher.entry.js').then(processMod, consoleError);
+        case 'sdds-header-launcher-grid':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-inline-tabs-button.entry.js').then(processMod, consoleError);
-        case 'sdds-inline-tabs-link':
+            './sdds-header-launcher-grid.entry.js').then(processMod, consoleError);
+        case 'sdds-header-launcher-grid-item':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-inline-tabs-link.entry.js').then(processMod, consoleError);
+            './sdds-header-launcher-grid-item.entry.js').then(processMod, consoleError);
+        case 'sdds-header-launcher-grid-title':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-header-launcher-grid-title.entry.js').then(processMod, consoleError);
+        case 'sdds-header-launcher-list':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-header-launcher-list.entry.js').then(processMod, consoleError);
+        case 'sdds-header-launcher-list-item':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-header-launcher-list-item.entry.js').then(processMod, consoleError);
+        case 'sdds-header-launcher-list-title':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-header-launcher-list-title.entry.js').then(processMod, consoleError);
+        case 'sdds-header-title':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-header-title.entry.js').then(processMod, consoleError);
+        case 'sdds-inline-tab':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-inline-tab.entry.js').then(processMod, consoleError);
+        case 'sdds-inline-tabs':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-inline-tabs.entry.js').then(processMod, consoleError);
+        case 'sdds-link':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-link.entry.js').then(processMod, consoleError);
         case 'sdds-message':
           return import(
             /* webpackMode: "lazy" */
@@ -2016,30 +2200,54 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './sdds-modal.entry.js').then(processMod, consoleError);
+        case 'sdds-navigation-tab':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-navigation-tab.entry.js').then(processMod, consoleError);
         case 'sdds-navigation-tabs':
           return import(
             /* webpackMode: "lazy" */
             './sdds-navigation-tabs.entry.js').then(processMod, consoleError);
-        case 'sdds-navigation-tabs-button':
+        case 'sdds-popover-menu':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-navigation-tabs-button.entry.js').then(processMod, consoleError);
-        case 'sdds-navigation-tabs-link':
+            './sdds-popover-menu.entry.js').then(processMod, consoleError);
+        case 'sdds-radio-button':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-navigation-tabs-link.entry.js').then(processMod, consoleError);
-        case 'sdds-popover-canvas':
+            './sdds-radio-button.entry.js').then(processMod, consoleError);
+        case 'sdds-side-menu':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-popover-canvas.entry.js').then(processMod, consoleError);
-        case 'sdds-popover-menu':
+            './sdds-side-menu.entry.js').then(processMod, consoleError);
+        case 'sdds-side-menu-close-button':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-popover-menu.entry.js').then(processMod, consoleError);
-        case 'sdds-radio-button':
+            './sdds-side-menu-close-button.entry.js').then(processMod, consoleError);
+        case 'sdds-side-menu-collapse-button':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-radio-button.entry.js').then(processMod, consoleError);
+            './sdds-side-menu-collapse-button.entry.js').then(processMod, consoleError);
+        case 'sdds-side-menu-dropdown':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-side-menu-dropdown.entry.js').then(processMod, consoleError);
+        case 'sdds-side-menu-dropdown-list':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-side-menu-dropdown-list.entry.js').then(processMod, consoleError);
+        case 'sdds-side-menu-dropdown-list-item':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-side-menu-dropdown-list-item.entry.js').then(processMod, consoleError);
+        case 'sdds-side-menu-overlay':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-side-menu-overlay.entry.js').then(processMod, consoleError);
+        case 'sdds-side-menu-user':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-side-menu-user.entry.js').then(processMod, consoleError);
         case 'sdds-slider':
           return import(
             /* webpackMode: "lazy" */
@@ -2108,10 +2316,34 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './sdds-dropdown_2.entry.js').then(processMod, consoleError);
-        case 'sdds-link':
+        case 'sdds-header-dropdown-list':
           return import(
             /* webpackMode: "lazy" */
-            './sdds-link.entry.js').then(processMod, consoleError);
+            './sdds-header-dropdown-list.entry.js').then(processMod, consoleError);
+        case 'sdds-header-dropdown-list-item':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-header-dropdown-list-item.entry.js').then(processMod, consoleError);
+        case 'sdds-header-launcher-button':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-header-launcher-button.entry.js').then(processMod, consoleError);
+        case 'sdds-side-menu-user-image_2':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-side-menu-user-image_2.entry.js').then(processMod, consoleError);
+        case 'sdds-popover-canvas':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-popover-canvas.entry.js').then(processMod, consoleError);
+        case 'sdds-side-menu-item':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-side-menu-item.entry.js').then(processMod, consoleError);
+        case 'sdds-core-header-item_2':
+          return import(
+            /* webpackMode: "lazy" */
+            './sdds-core-header-item_2.entry.js').then(processMod, consoleError);
         case 'sdds-icon':
           return import(
             /* webpackMode: "lazy" */
@@ -2195,6 +2427,6 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 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 };
+export { Fragment as F, Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-fdfb114c.js.map
+//# sourceMappingURL=index-2d8c4bc9.js.map