@otto-de/b2b-core-components 1.5.0 → 1.6.1

package/dist/cjs/{index-496aa5dd.js → index-04e07a00.js}

@@ -793,16 +793,17 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
  * @param vnodes a list of virtual DOM nodes to remove
  * @param startIdx the index at which to start removing nodes (inclusive)
  * @param endIdx the index at which to stop removing nodes (inclusive)
- * @param vnode a VNode
- * @param elm an element
  */
-const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
-    for (; startIdx <= endIdx; ++startIdx) {
-        if ((vnode = vnodes[startIdx])) {
-            elm = vnode.$elm$;
-            callNodeRefs(vnode);
-            // remove the vnode's element from the dom
-            elm.remove();
+const removeVnodes = (vnodes, startIdx, endIdx) => {
+    for (let index = startIdx; index <= endIdx; ++index) {
+        const vnode = vnodes[index];
+        if (vnode) {
+            const elm = vnode.$elm$;
+            nullifyVNodeRefs(vnode);
+            if (elm) {
+                // remove the vnode's element from the dom
+                elm.remove();
+            }
         }
     }
 };
@@ -1061,10 +1062,17 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
-const callNodeRefs = (vNode) => {
+/**
+ * '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(callNodeRefs);
+        vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
     }
 };
 /**
@@ -1119,30 +1127,86 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
     const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
     return writeTask(dispatch) ;
 };
+/**
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
+ * component lifecycle methods like `componentWillLoad` as well as
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
+ *
+ * @param hostRef a reference to a host DOM node
+ * @param isInitialLoad whether we're on the initial load or not
+ * @returns an empty Promise which is used to enqueue a series of operations for
+ * the component
+ */
 const dispatchHooks = (hostRef, isInitialLoad) => {
     const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = hostRef.$lazyInstance$ ;
-    let promise;
+    // We're going to use this variable together with `enqueue` to implement a
+    // little promise-based queue. We start out with it `undefined`. When we add
+    // the first function to the queue we'll set this variable to be that
+    // function's return value. When we attempt to add subsequent values to the
+    // queue we'll check that value and, if it was a `Promise`, we'll then chain
+    // the new function off of that `Promise` using `.then()`. This will give our
+    // queue two nice properties:
+    //
+    // 1. If all functions added to the queue are synchronous they'll be called
+    //    synchronously right away.
+    // 2. If all functions added to the queue are asynchronous they'll all be
+    //    called in order after `dispatchHooks` exits.
+    let maybePromise;
     if (isInitialLoad) {
         {
             hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
             if (hostRef.$queuedListeners$) {
                 hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
-                hostRef.$queuedListeners$ = null;
+                hostRef.$queuedListeners$ = undefined;
             }
         }
         {
-            promise = safeCall(instance, 'componentWillLoad');
+            // If `componentWillLoad` returns a `Promise` then we want to wait on
+            // whatever's going on in that `Promise` before we launch into
+            // rendering the component, doing other lifecycle stuff, etc. So
+            // in that case we assign the returned promise to the variable we
+            // declared above to hold a possible 'queueing' Promise
+            maybePromise = safeCall(instance, 'componentWillLoad');
         }
     }
     {
-        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+        maybePromise = enqueue(maybePromise, () => safeCall(instance, 'componentWillRender'));
     }
     endSchedule();
-    return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
+    return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
+/**
+ * This function uses a Promise to implement a simple first-in, first-out queue
+ * of functions to be called.
+ *
+ * The queue is ordered on the basis of the first argument. If it's
+ * `undefined`, then nothing is on the queue yet, so the provided function can
+ * be called synchronously (although note that this function may return a
+ * `Promise`). The idea is that then the return value of that enqueueing
+ * operation is kept around, so that if it was a `Promise` then subsequent
+ * functions can be enqueued by calling this function again with that `Promise`
+ * as the first argument.
+ *
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
+ * @param fn a function to enqueue
+ * @returns either a `Promise` or the return value of the provided function
+ */
+const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
+/**
+ * Check that a value is a `Promise`. To check, we first see if the value is an
+ * instance of the `Promise` global. In a few circumstances, in particular if
+ * the global has been overwritten, this is could be misleading, so we also do
+ * a little 'duck typing' check to see if the `.then` property of the value is
+ * defined and a function.
+ *
+ * @param maybePromise it might be a promise!
+ * @returns whether it is or not
+ */
+const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
+    (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
-    // updateComponent
+    var _a;
     const elm = hostRef.$hostElement$;
     const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
     const rc = elm['s-rc'];
@@ -1164,7 +1228,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
     endRender();
     endUpdate();
     {
-        const childrenPromises = elm['s-p'];
+        const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
         const postUpdate = () => postUpdateComponent(hostRef);
         if (childrenPromises.length === 0) {
             postUpdate();
@@ -1268,9 +1332,6 @@ const safeCall = (instance, method, arg) => {
     }
     return undefined;
 };
-const then = (promise, thenFn) => {
-    return promise && promise.then ? promise.then(thenFn) : thenFn();
-};
 const addHydratedFlag = (elm) => elm.classList.add('hydrated')
     ;
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
@@ -1434,9 +1495,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
+        // Let the runtime know that the component has been initialized
+        hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
         {
-            // we haven't initialized this element yet
-            hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
             // lazy loaded components
             // request the component's implementation to be
             // wired up with the host element
@@ -1797,10 +1858,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './b2b-card.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-checkbox.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-checkbox.cjs.entry.js')); }).then(processMod, consoleError);
         case 'b2b-checkbox-group.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -1905,6 +1962,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './b2b-wizard-step.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'b2b-checkbox_3.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './b2b-checkbox_3.cjs.entry.js')); }).then(processMod, consoleError);
         case 'b2b-headline.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -1913,10 +1974,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './b2b-input-group_2.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'b2b-table-cell_2.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './b2b-table-cell_2.cjs.entry.js')); }).then(processMod, consoleError);
         case 'b2b-wizard-icon.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-496aa5dd.js');
+const index = require('./index-04e07a00.js');
 
 /*
- Stencil Client Patch Esm v3.0.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v3.4.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["b2b-search.cjs",[[1,"b2b-search",{"placeholder":[1],"optionsList":[16],"value":[1537],"disabled":[516],"closed":[32]},[[0,"keydown","handleKeyDown"]]]]],["b2b-table-row.cjs",[[1,"b2b-table-row",{"highlight":[4],"color":[1],"type":[1],"isOpen":[32],"toggleAccordion":[64]}]]],["b2b-wizard-step.cjs",[[1,"b2b-wizard-step",{"state":[1],"step":[1],"checkIcon":[4,"check-icon"]}]]],["b2b-modal.cjs",[[1,"b2b-modal",{"heading":[1],"opened":[1540],"backdropDismiss":[4,"backdrop-dismiss"],"escDismiss":[4,"esc-dismiss"],"variant":[1],"iconHover":[32],"isOpen":[32]},[[0,"keydown","handleKeypress"]]]]],["b2b-pagination.cjs",[[1,"b2b-pagination",{"totalPages":[2,"total-pages"],"activePage":[1538,"active-page"],"ariaLabelNextPage":[1,"aria-label-next-page"],"ariaLabelPreviousPage":[1,"aria-label-previous-page"]}]]],["b2b-alert.cjs",[[1,"b2b-alert",{"type":[1],"size":[1],"opened":[1028],"hasCloseButton":[4,"has-close-button"],"customIcon":[4,"custom-icon"]}]]],["b2b-checkbox.cjs",[[1,"b2b-checkbox",{"label":[1],"required":[516],"checked":[1540],"disabled":[516],"error":[1],"hint":[1],"name":[513],"value":[520],"invalid":[4]}]]],["b2b-checkbox-group.cjs",[[1,"b2b-checkbox-group",{"label":[1],"required":[4],"disabled":[4],"invalid":[4],"alignment":[1],"hint":[1],"error":[1]},[[0,"b2b-change","handleCheckboxChange"]]]]],["b2b-dropdown.cjs",[[1,"b2b-dropdown",{"label":[1],"required":[516],"name":[513],"disabled":[516],"invalid":[516],"hint":[1],"error":[1]}]]],["b2b-radio-button.cjs",[[1,"b2b-radio-button",{"label":[1],"required":[516],"name":[513],"checked":[1540],"disabled":[516],"invalid":[4],"value":[513],"hint":[1],"error":[1]}]]],["b2b-radio-group.cjs",[[1,"b2b-radio-group",{"name":[1],"label":[1],"required":[4],"alignment":[1],"disabled":[516],"invalid":[516],"hint":[1],"error":[1],"currentValue":[32]},[[0,"b2b-change","handleRadioButtonChange"]]]]],["b2b-required-separator.cjs",[[1,"b2b-required-separator",{"label":[1]}]]],["b2b-tab-group.cjs",[[1,"b2b-tab-group",{"useRouter":[4,"use-router"]},[[0,"click","handleClick"],[0,"keydown","handleKeydown"]]]]],["b2b-textarea.cjs",[[1,"b2b-textarea",{"label":[1],"required":[516],"placeholder":[513],"disabled":[516],"invalid":[516],"autofocus":[516],"resize":[513],"hint":[1],"error":[1],"value":[1537],"name":[513],"maxLength":[514,"max-length"]}]]],["b2b-anchor.cjs",[[1,"b2b-anchor",{"href":[1],"download":[1],"target":[1],"size":[1]}]]],["b2b-card.cjs",[[1,"b2b-card",{"disabled":[4],"href":[1],"target":[1]},[[0,"click","onClick"],[0,"keydown","onKeyDown"]]]]],["b2b-grid.cjs",[[1,"b2b-grid",{"margin":[2]}]]],["b2b-grid-col.cjs",[[1,"b2b-grid-col",{"span":[514],"textAlign":[1,"text-align"]}]]],["b2b-grid-row.cjs",[[1,"b2b-grid-row",{"columnGap":[2,"column-gap"],"rowGap":[2,"row-gap"],"alignItems":[1,"align-items"],"justify":[1]}]]],["b2b-label.cjs",[[1,"b2b-label",{"type":[1]}]]],["b2b-paragraph.cjs",[[1,"b2b-paragraph",{"weight":[1],"size":[1],"align":[1]}]]],["b2b-scrollable-container.cjs",[[1,"b2b-scrollable-container"]]],["b2b-tab.cjs",[[1,"b2b-tab",{"selected":[516],"disabled":[4],"invalid":[4]}]]],["b2b-tab-panel.cjs",[[1,"b2b-tab-panel"]]],["b2b-table.cjs",[[1,"b2b-table",{"size":[1]},[[0,"b2b-change","onColumnSelected"]]]]],["b2b-table-rowgroup.cjs",[[1,"b2b-table-rowgroup",{"type":[1],"accordion":[4],"opened":[516]},[[0,"b2b-open","handleOpenChange"]]]]],["b2b-toggle-button.cjs",[[1,"b2b-toggle-button",{"label":[1],"name":[513],"checked":[1540],"disabled":[516],"value":[513]}]]],["b2b-toggle-group.cjs",[[1,"b2b-toggle-group",{"name":[1],"disabled":[516],"currentValue":[32]},[[0,"b2b-change","handleToggleButtonChange"]]]]],["b2b-tooltip.cjs",[[1,"b2b-tooltip",{"position":[1],"content":[1],"trigger":[1],"opened":[1540]}]]],["b2b-wizard.cjs",[[1,"b2b-wizard",{"activeStep":[1,"active-step"],"custom":[4],"checkIcon":[4,"check-icon"]}]]],["b2b-wizard-icon.cjs",[[1,"b2b-wizard-icon",{"step":[1],"state":[1],"checkIcon":[4,"check-icon"]}]]],["b2b-headline.cjs",[[1,"b2b-headline",{"size":[1],"align":[1],"noMargin":[4,"no-margin"]}]]],["b2b-input-group_2.cjs",[[1,"b2b-input-list",{"label":[1],"required":[516],"placeholder":[513],"optionsList":[16],"value":[1537],"disabled":[516],"hasOptionList":[32],"isElementFocused":[32]},[[0,"keydown","handleKeyDown"]]],[1,"b2b-input-group",{"invalid":[4],"disabled":[4],"error":[1],"hint":[1],"initialDisabled":[32]}]]],["b2b-table-cell_2.cjs",[[1,"b2b-table-cell",{"textWrap":[516,"text-wrap"],"size":[1],"align":[1],"divider":[4],"color":[1],"useTextEllipsis":[32]}],[1,"b2b-table-header",{"divider":[4],"fixed":[4],"sortDirection":[1537,"sort-direction"],"sortId":[1,"sort-id"],"active":[32]}]]],["b2b-rounded-icon.cjs",[[1,"b2b-rounded-icon",{"color":[1],"borderColor":[1,"border-color"],"contentColor":[1,"content-color"]}]]],["b2b-separator.cjs",[[1,"b2b-separator",{"alignment":[1]}]]],["b2b-input_2.cjs",[[1,"b2b-input",{"label":[1],"required":[516],"type":[513],"disabled":[516],"invalid":[516],"placeholder":[513],"value":[1537],"name":[513],"hint":[1],"error":[1],"autofocus":[4],"hasFocus":[32],"hasTextPrefix":[32],"hasTextSuffix":[32],"setFocus":[64],"clearInput":[64]}],[0,"b2b-input-list-option",{"option":[1]},[[0,"keydown","handleKeyDown"]]]]],["b2b-button_2.cjs",[[1,"b2b-button",{"variant":[1],"type":[1],"size":[1],"disabled":[516],"loading":[4],"active":[516],"href":[1],"target":[1],"download":[1],"setFocus":[64]},[[2,"click","handleHostClick"]]],[1,"b2b-spinner",{"size":[1],"color":[1]}]]],["b2b-icon.cjs",[[1,"b2b-icon",{"icon":[1],"color":[1],"size":[1],"clickable":[4],"pathData":[32]}]]],["b2b-input-label.cjs",[[1,"b2b-input-label",{"required":[4],"disabled":[4]}]]]], options);
+  return index.bootstrapLazy([["b2b-search.cjs",[[1,"b2b-search",{"placeholder":[1],"optionsList":[16],"value":[1537],"disabled":[516],"closed":[32]},[[0,"keydown","handleKeyDown"]]]]],["b2b-table-row.cjs",[[1,"b2b-table-row",{"highlight":[4],"color":[1],"accordionType":[1,"accordion-type"],"selectable":[4],"value":[1],"indeterminate":[4],"checked":[1028],"isOpen":[32],"toggleAccordion":[64]},[[0,"b2b-change","toggleSelected"]]]]],["b2b-wizard-step.cjs",[[1,"b2b-wizard-step",{"state":[1],"step":[1],"checkIcon":[4,"check-icon"]}]]],["b2b-modal.cjs",[[1,"b2b-modal",{"heading":[1],"opened":[1540],"backdropDismiss":[4,"backdrop-dismiss"],"escDismiss":[4,"esc-dismiss"],"variant":[1],"iconHover":[32],"isOpen":[32]},[[0,"keydown","handleKeypress"]]]]],["b2b-pagination.cjs",[[1,"b2b-pagination",{"totalPages":[2,"total-pages"],"activePage":[1538,"active-page"],"ariaLabelNextPage":[1,"aria-label-next-page"],"ariaLabelPreviousPage":[1,"aria-label-previous-page"]}]]],["b2b-alert.cjs",[[1,"b2b-alert",{"type":[1],"size":[1],"opened":[1028],"hasCloseButton":[4,"has-close-button"],"customIcon":[4,"custom-icon"]}]]],["b2b-checkbox-group.cjs",[[1,"b2b-checkbox-group",{"label":[1],"required":[4],"disabled":[4],"invalid":[4],"alignment":[1],"hint":[1],"error":[1]},[[0,"b2b-change","handleCheckboxChange"]]]]],["b2b-dropdown.cjs",[[1,"b2b-dropdown",{"label":[1],"required":[516],"name":[513],"disabled":[516],"invalid":[516],"hint":[1],"error":[1]}]]],["b2b-radio-button.cjs",[[1,"b2b-radio-button",{"label":[1],"required":[516],"name":[513],"checked":[1540],"disabled":[516],"invalid":[4],"value":[513],"hint":[1],"error":[1]}]]],["b2b-radio-group.cjs",[[1,"b2b-radio-group",{"name":[1],"label":[1],"required":[4],"alignment":[1],"disabled":[516],"invalid":[516],"hint":[1],"error":[1],"currentValue":[32]},[[0,"b2b-change","handleRadioButtonChange"]]]]],["b2b-required-separator.cjs",[[1,"b2b-required-separator",{"label":[1]}]]],["b2b-tab-group.cjs",[[1,"b2b-tab-group",{"useRouter":[4,"use-router"]},[[0,"click","handleClick"],[0,"keydown","handleKeydown"]]]]],["b2b-textarea.cjs",[[1,"b2b-textarea",{"label":[1],"required":[516],"placeholder":[513],"disabled":[516],"invalid":[516],"autofocus":[516],"resize":[513],"hint":[1],"error":[1],"value":[1537],"name":[513],"maxLength":[514,"max-length"]}]]],["b2b-anchor.cjs",[[1,"b2b-anchor",{"href":[1],"download":[1],"target":[1],"size":[1]}]]],["b2b-card.cjs",[[1,"b2b-card",{"disabled":[4],"href":[1],"target":[1]},[[0,"click","onClick"],[0,"keydown","onKeyDown"]]]]],["b2b-grid.cjs",[[1,"b2b-grid",{"margin":[2]}]]],["b2b-grid-col.cjs",[[1,"b2b-grid-col",{"span":[514],"textAlign":[1,"text-align"]}]]],["b2b-grid-row.cjs",[[1,"b2b-grid-row",{"columnGap":[2,"column-gap"],"rowGap":[2,"row-gap"],"alignItems":[1,"align-items"],"justify":[1]}]]],["b2b-label.cjs",[[1,"b2b-label",{"type":[1]}]]],["b2b-paragraph.cjs",[[1,"b2b-paragraph",{"weight":[1],"size":[1],"align":[1]}]]],["b2b-scrollable-container.cjs",[[1,"b2b-scrollable-container"]]],["b2b-tab.cjs",[[1,"b2b-tab",{"selected":[516],"disabled":[4],"invalid":[4]}]]],["b2b-tab-panel.cjs",[[1,"b2b-tab-panel"]]],["b2b-table.cjs",[[1,"b2b-table",{"size":[1]},[[0,"b2b-change","onColumnSelected"]]]]],["b2b-table-rowgroup.cjs",[[1,"b2b-table-rowgroup",{"type":[1],"accordion":[4],"selectable":[4],"opened":[516],"selectedValues":[32],"indeterminate":[32]},[[0,"b2b-open","handleOpenChange"],[0,"b2b-row-selected","handleSelectedChange"]]]]],["b2b-toggle-button.cjs",[[1,"b2b-toggle-button",{"label":[1],"name":[513],"checked":[1540],"disabled":[516],"value":[513]}]]],["b2b-toggle-group.cjs",[[1,"b2b-toggle-group",{"name":[1],"disabled":[516],"currentValue":[32]},[[0,"b2b-change","handleToggleButtonChange"]]]]],["b2b-tooltip.cjs",[[1,"b2b-tooltip",{"position":[1],"content":[1],"trigger":[1],"opened":[1540]}]]],["b2b-wizard.cjs",[[1,"b2b-wizard",{"activeStep":[1,"active-step"],"custom":[4],"checkIcon":[4,"check-icon"]}]]],["b2b-wizard-icon.cjs",[[1,"b2b-wizard-icon",{"step":[1],"state":[1],"checkIcon":[4,"check-icon"]}]]],["b2b-headline.cjs",[[1,"b2b-headline",{"size":[1],"align":[1],"noMargin":[4,"no-margin"]}]]],["b2b-input-group_2.cjs",[[1,"b2b-input-list",{"label":[1],"required":[516],"placeholder":[513],"optionsList":[16],"value":[1537],"disabled":[516],"groupDisabled":[4,"group-disabled"],"hasOptionList":[32],"isElementFocused":[32]},[[0,"keydown","handleKeyDown"]]],[1,"b2b-input-group",{"invalid":[4],"disabled":[4],"error":[1],"hint":[1]}]]],["b2b-rounded-icon.cjs",[[1,"b2b-rounded-icon",{"color":[1],"borderColor":[1,"border-color"],"contentColor":[1,"content-color"]}]]],["b2b-separator.cjs",[[1,"b2b-separator",{"alignment":[1]}]]],["b2b-input-label.cjs",[[1,"b2b-input-label",{"required":[4],"disabled":[4]}]]],["b2b-checkbox_3.cjs",[[1,"b2b-checkbox",{"label":[1],"required":[516],"checked":[1540],"disabled":[516],"indeterminate":[1028],"error":[1],"hint":[1],"name":[513],"value":[520],"invalid":[4],"standalone":[4],"groupDisabled":[4,"group-disabled"]}],[1,"b2b-table-cell",{"textWrap":[516,"text-wrap"],"size":[1],"align":[1],"divider":[4],"color":[1],"useTextEllipsis":[32]}],[1,"b2b-table-header",{"divider":[4],"fixed":[4],"sortDirection":[1537,"sort-direction"],"sortId":[1,"sort-id"],"active":[32]}]]],["b2b-input_2.cjs",[[1,"b2b-input",{"label":[1],"required":[516],"type":[513],"disabled":[516],"invalid":[516],"placeholder":[513],"value":[1537],"name":[513],"hint":[1],"error":[1],"autofocus":[4],"groupDisabled":[4,"group-disabled"],"hasFocus":[32],"hasTextPrefix":[32],"hasTextSuffix":[32],"setFocus":[64],"clearInput":[64]}],[0,"b2b-input-list-option",{"option":[1]},[[0,"keydown","handleKeyDown"]]]]],["b2b-button_2.cjs",[[1,"b2b-button",{"variant":[1],"type":[1],"size":[1],"disabled":[516],"loading":[4],"active":[516],"href":[1],"target":[1],"download":[1],"groupDisabled":[4,"group-disabled"],"setFocus":[64]},[[2,"click","handleHostClick"]]],[1,"b2b-spinner",{"size":[1],"color":[1]}]]],["b2b-icon.cjs",[[1,"b2b-icon",{"icon":[1],"color":[1],"size":[1],"clickable":[4],"pathData":[32]}]]]], options);
   });
 };
 

package/dist/cjs/{table.types-bb0926c7.js → table.types-00c8228a.js}

@@ -19,7 +19,7 @@ const TableSortDirections = {
   ASC: 'ascending',
   DESC: 'descending',
 };
-const TableRowTypes = {
+const TableAccordionRowTypes = {
   PARENT: 'parent',
   CHILD: 'child',
   HEADER: 'header',
@@ -31,8 +31,8 @@ const TableColourOptions = {
 };
 
 exports.ContentAlignment = ContentAlignment;
+exports.TableAccordionRowTypes = TableAccordionRowTypes;
 exports.TableColourOptions = TableColourOptions;
-exports.TableRowTypes = TableRowTypes;
 exports.TableRowgroupTypes = TableRowgroupTypes;
 exports.TableSizes = TableSizes;
 exports.TableSortDirections = TableSortDirections;

package/dist/collection/collection-manifest.json

@@ -47,8 +47,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.0.1",
-    "typescriptVersion": "4.9.5"
+    "version": "3.4.2",
+    "typescriptVersion": "5.0.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/alert/alert.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -226,7 +226,7 @@
 .b2b-alert--info {
   background-color: var(--b2b-color-info-50);
 }
-.b2b-alert--info-icon {
+.b2b-alert--info__icon {
   color: var(--b2b-color-info-100);
 }
 .b2b-alert--warning {
@@ -239,10 +239,10 @@
 .b2b-alert--success {
   background-color: var(--b2b-color-success-50);
 }
-.b2b-alert--success-icon {
+.b2b-alert--success__icon {
   color: var(--b2b-color-success-100);
 }
-.b2b-alert-close-icon {
+.b2b-alert__close-icon {
   padding-top: var(--b2b-size-7);
   width: var(--b2b-size-30);
   height: var(--b2b-size-35);
@@ -250,13 +250,13 @@
   fill: var(--b2b-color-grey-400);
   flex-shrink: 0;
 }
-.b2b-alert-content {
+.b2b-alert__content {
   display: flex;
   align-items: center;
   flex: 2;
   gap: var(--b2b-size-30);
 }
-.b2b-alert-content p {
+.b2b-alert__content p {
   width: 100%;
   margin: 0;
   padding: var(--b2b-size-5) 0 var(--b2b-size-1) 0;

package/dist/collection/components/alert/alert.e2e.js

@@ -0,0 +1,67 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Alert', () => {
+  it('should render the alert component', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert></alert>`);
+    const element = await page.find('b2b-alert');
+    expect(element).not.toBeNull();
+  });
+  it('should not be visible by default', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert></alert>`);
+    const element = await page.find('b2b-alert >>> div.b2b-alert');
+    expect(element).not.toHaveClass('b2b-alert--open');
+    const alert = await page.find('b2b-alert');
+    expect(await alert.getProperty('opened')).toBe(false);
+  });
+  it('should open the alert', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened></b2b-alert>`);
+    const element = await page.find('b2b-alert >>> div');
+    expect(await element.isVisible()).toBe(true);
+  });
+  it('should not render text in a small alert', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened>test</b2b-alert>`);
+    const element = await page.find('b2b-alert >>> p');
+    expect(element).toBeNull();
+  });
+  it('should render a large alert with text', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened size={large}>test</b2b-alert>`);
+    const element = await page.find({ text: 'test' });
+    expect(element).not.toBeNull();
+  });
+  it('should render a close button by default in a large alert', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened size="large">test</b2b-alert>`);
+    const alert = await page.find('b2b-alert >>> div');
+    const element = await page.find('b2b-alert >>> div.b2b-alert__close-icon');
+    expect(element).not.toBeNull();
+    await page.evaluate(() => {
+      document
+        .querySelector('b2b-alert')
+        .shadowRoot.querySelector('.b2b-alert__close-icon').click();
+    });
+    await page.waitForChanges();
+    expect(await alert.isVisible()).toBeFalsy();
+  });
+  it('should not render a close button on an error alert', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened size="large" type="error">test</b2b-alert>`);
+    const element = await page.find('b2b-alert >>> div.b2b-alert__close-icon');
+    expect(element).toBeNull();
+  });
+  it('should not render a close button in a small alert', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened>test</b2b-alert>`);
+    const element = await page.find('b2b-alert >>> div.b2b-alert__close-icon');
+    expect(element).toBeNull();
+  });
+  it('should render with a custom icon', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<b2b-alert opened custom-icon><b2b-icon icon="b2b_icon-menu"></b2b-icon></b2b-alert>`);
+    const element = await page.find('b2b-icon');
+    expect(element).not.toBeNull();
+  });
+});

package/dist/collection/components/alert/alert.js

@@ -30,9 +30,9 @@ export class AlertComponent {
         [`b2b-alert--${this.type}`]: true,
         [`b2b-alert--${this.size}`]: true,
         'b2b-alert--open': this.opened,
-      } }, h("div", { class: "b2b-alert-content" }, h("span", { class: { [`b2b-alert--${this.type}-icon`]: true } }, this.canCustomizeIcon() ? h("slot", null) : this.chooseIcon()), this.size === 'large' && (h("p", null, h("slot", null)))), this.canClose() && (
+      } }, h("div", { class: "b2b-alert__content" }, h("span", { class: { [`b2b-alert--${this.type}__icon`]: true } }, this.canCustomizeIcon() ? h("slot", null) : this.chooseIcon()), this.size === 'large' && (h("p", null, h("slot", null)))), this.canClose() && (
     //using a custom icon as this component needs an icon size that is not supported in the icon component
-    h("div", { class: "b2b-alert-close-icon", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M17.886 16l8.057-8.057a1.333 1.333 0 1 0-1.885-1.886l-8.057 8.057-8.057-8.057a1.333 1.333 0 1 0-1.886 1.886L14.115 16l-8.057 8.057a1.332 1.332 0 1 0 1.886 1.885l8.057-8.057 8.057 8.057a1.331 1.331 0 0 0 1.886 0 1.332 1.332 0 0 0 0-1.885L17.887 16z" })))))));
+    h("div", { class: "b2b-alert__close-icon", onClick: this.close }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M17.886 16l8.057-8.057a1.333 1.333 0 1 0-1.885-1.886l-8.057 8.057-8.057-8.057a1.333 1.333 0 1 0-1.886 1.886L14.115 16l-8.057 8.057a1.332 1.332 0 1 0 1.886 1.885l8.057-8.057 8.057 8.057a1.331 1.331 0 0 0 1.886 0 1.332 1.332 0 0 0 0-1.885L17.887 16z" })))))));
   }
   static get is() { return "b2b-alert"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/anchor/anchor.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 12:55:37 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/anchor/anchor.spec.js

@@ -0,0 +1,68 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { AnchorComponent } from './anchor';
+const testRef = 'https://www.otto.de';
+it('should render the anchor component with default values', async () => {
+  const page = await newSpecPage({
+    components: [AnchorComponent],
+    template: () => (h("b2b-anchor", { href: testRef }, "This is a test anchor.")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
+  `);
+});
+it('should change the font size of the anchor component if specified', async () => {
+  const page = await newSpecPage({
+    components: [AnchorComponent],
+    template: () => (h("b2b-anchor", { href: testRef, size: "100" }, "This is a test anchor.")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--100" target="_self">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
+  `);
+});
+it('should change the download string if specified', async () => {
+  const page = await newSpecPage({
+    components: [AnchorComponent],
+    template: () => (h("b2b-anchor", { href: testRef, download: "This is a test download" }, "This is a test anchor.")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self" download="This is a test download">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
+  `);
+});
+it('should change the target property if specified', async () => {
+  const page = await newSpecPage({
+    components: [AnchorComponent],
+    template: () => (h("b2b-anchor", { href: testRef, target: "parent" }, "This is a test anchor.")),
+  });
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_parent">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
+  `);
+});