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

package/dist/collection/components/input-group/input-group.stories.js

@@ -1,33 +1,32 @@
-import { html } from 'lit-html';
-import inputGroupDocs from './input-group.docs.mdx';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ invalid, disabled, error, hint, additionalSlot, }) => {
   return additionalSlot
-    ? html ` <div style="width: 380px">
-        <b2b-input-group
-          invalid="${invalid}"
-          disabled="${disabled}"
-          error="${error}"
-          hint="${hint}">
-          <b2b-input slot="start" label="Search Term"></b2b-input>
-          <b2b-dropdown style="width: 90px;">
-            <option value="one">€</option>
-            <option value="two">$</option>
-          </b2b-dropdown>
-          <b2b-button slot="end" variant="primary">
-            <b2b-icon icon="b2b_icon-search"></b2b-icon>
-          </b2b-button>
-        </b2b-input-group>
+    ? html ` <div style="width: 380px">
+        <b2b-input-group
+          invalid="${invalid}"
+          disabled="${disabled}"
+          error="${error}"
+          hint="${hint}">
+          <b2b-input slot="start" label="Search Term"></b2b-input>
+          <b2b-dropdown style="width: 90px;">
+            <option value="one">€</option>
+            <option value="two">$</option>
+          </b2b-dropdown>
+          <b2b-button slot="end" variant="primary">
+            <b2b-icon icon="b2b_icon-search"></b2b-icon>
+          </b2b-button>
+        </b2b-input-group>
       </div>`
-    : html `<div style="width: 280px">
-        <b2b-input-group invalid="${invalid}" disabled="${disabled}" error="${error}" hint="${hint}">
-          <b2b-input slot="start" label="Search Term"></b2b-input>
-          <b2b-dropdown slot="end" style="width: fit-content;">
-            <option value="one">€</option>
-            <option value="two">$</option>
-          </b2b-dropdown>
-        </b2b-input-group>
-      </div>
+    : html `<div style="width: 280px">
+        <b2b-input-group invalid="${invalid}" disabled="${disabled}" error="${error}" hint="${hint}">
+          <b2b-input slot="start" label="Search Term"></b2b-input>
+          <b2b-dropdown slot="end" style="width: fit-content;">
+            <option value="one">€</option>
+            <option value="two">$</option>
+          </b2b-dropdown>
+        </b2b-input-group>
+      </div>
     </div>`;
 };
 const defaultArgs = {
@@ -55,9 +54,4 @@ export default {
       control: false,
     } }),
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: inputGroupDocs,
-    },
-  },
 };

package/dist/collection/components/input-label/input-label.e2e.js

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('b2b-input-label', () => {
   it('renders', async () => {
     const page = await newE2EPage();

package/dist/collection/components/input-label/input-label.js

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class InputLabelComponent {
   constructor() {
     this.required = false;

package/dist/collection/components/input-list/input-list-option.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class InputListOptionComponent {
   constructor() {
     this.handleClick = () => {
@@ -63,7 +63,8 @@ export class InputListOptionComponent {
           "references": {
             "OptionSelectedEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::OptionSelectedEventDetail"
             }
           }
         }

package/dist/collection/components/input-list/input-list.css

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

package/dist/collection/components/input-list/input-list.e2e.js

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-InputList', () => {
   let page;
   const optionsList = ['option1', 'option2', 'option3'];
@@ -16,8 +16,8 @@ describe('B2B-InputList', () => {
   };
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-      <b2b-input-list placeholder='some text'></b2b-input-list>
+    await page.setContent(`
+      <b2b-input-list placeholder='some text'></b2b-input-list>
     `);
   });
   it('should register input text when enabled', async () => {

package/dist/collection/components/input-list/input-list.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 const keys = {
   ARROW_UP: 'ArrowUp',
   ARROW_DOWN: 'ArrowDown',
@@ -314,7 +314,8 @@ export class InputListComponent {
           "references": {
             "InputClear": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::InputClear"
             }
           }
         }

package/dist/collection/components/input-list/input-list.stories.js

@@ -1,69 +1,85 @@
-import { getArgTypes } from '../../docs/config/utils';
-import { html } from 'lit-html';
-import inputListDocs from './input-list.docs.mdx';
-import { userEvent } from '@storybook/testing-library';
-const Template = ({ label, required, placeholder, optionsList, customMarkup, disabled, }) => {
-  return html `<div style="height: 130px; width: 300px">
-    <b2b-input-list
-      data-testid="element"
-      label="${label}"
-      required="${required}"
-      placeholder="${placeholder}"
-      disabled="${disabled}"
-      .optionsList=${optionsList}
-      >${customMarkup}</b2b-input-list
-    >
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
+import { userEvent } from "@storybook/testing-library";
+const meta = {
+  title: 'Components/Form/Input List',
+  component: 'b2b-input-list',
+  args: {
+    label: '',
+    required: false,
+    placeholder: 'Search here',
+    optionsList: ['option1', 'option2', 'option3'],
+    disabled: false,
+  },
+  argTypes: getArgTypes('b2b-input-list'),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<div style="height: 130px; width: 300px">
+    <b2b-input-list
+      data-testid="element"
+      label="${args.label}"
+      required="${args.required}"
+      placeholder="${args.placeholder}"
+      disabled="${args.disabled}"
+      .optionsList=${args.optionsList}></b2b-input-list>
   </div>`;
+  },
 };
-const defaultArgs = {
-  label: '',
-  required: false,
-  placeholder: 'Search here',
-  optionsList: ['option1', 'option2', 'option3'],
-  disabled: false,
+export default meta;
+export const InputList = {
+  args: Object.assign({}, meta.args),
 };
-export const story010InputList = Template.bind({});
-story010InputList.args = Object.assign({}, defaultArgs);
-story010InputList.storyName = 'Input List';
-export const story020InputListFocused = Template.bind({});
-story020InputListFocused.args = Object.assign({}, defaultArgs);
-story020InputListFocused.storyName = 'Focused';
-export const story025InputListDisabled = Template.bind({});
-story025InputListDisabled.args = Object.assign(Object.assign({}, defaultArgs), { disabled: true });
-story025InputListDisabled.storyName = 'Disabled';
-export const story030CustomList = Template.bind({});
-const list = html `<ul>
-  <li>Option 1</li>
-  <li>
-    Option 2
-    <ul>
-      <li>Option 2.1</li>
-      <li>Option 2.2</li>
-    </ul>
-  </li>
-  <li>Option 3</li>
-</ul>`;
-story030CustomList.args = Object.assign(Object.assign({}, defaultArgs), { optionsList: [], customMarkup: list });
-story030CustomList.storyName = 'Custom List Content';
-story020InputListFocused.play = async ({ canvasElement }) => {
-  setTimeout(async () => {
-    var _a, _b;
-    const inputList = await canvasElement.querySelector('b2b-input-list');
-    const b2bInput = (_a = inputList.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('b2b-input');
-    const input = (_b = b2bInput === null || b2bInput === void 0 ? void 0 : b2bInput.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
-    userEvent.type(input, 'op');
-  }, 500);
+export const Focused = {
+  args: Object.assign({}, meta.args),
+  play: async ({ canvasElement }) => {
+    setTimeout(async () => {
+      var _a, _b;
+      const inputList = await canvasElement.querySelector('b2b-input-list');
+      const b2bInput = (_a = inputList.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('b2b-input');
+      const input = (_b = b2bInput === null || b2bInput === void 0 ? void 0 : b2bInput.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+      userEvent.type(input, 'op');
+    }, 500);
+  },
 };
-const controls = {};
-const searchArgs = getArgTypes('b2b-input-list', controls);
-export default {
-  title: 'Components/Form/Input List',
-  argTypes: Object.assign({}, searchArgs),
-  viewmode: 'docs',
-  parameters: {
-    controls: { expanded: true },
-    docs: {
-      page: inputListDocs,
-    },
+export const Disabled = {
+  args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
+};
+export const CustomList = {
+  args: Object.assign({}, meta.args),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<div style="height: 130px; width: 300px">
+    <b2b-input-list
+      data-testid="element"
+      label="${args.label}"
+      required="${args.required}"
+      placeholder="${args.placeholder}"
+      disabled="${args.disabled}"
+      .optionsList=${args.optionsList}
+      ><ul>
+        <li>Option 1</li>
+        <li>
+          Option 2
+          <ul>
+            <li>Option 2.1</li>
+            <li>Option 2.2</li>
+          </ul>
+        </li>
+        <li>Option 3</li>
+      </ul></b2b-input-list
+    >
+  </div>`;
   },
 };

package/dist/collection/components/label/label.css

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

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

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Label', () => {
   let page;
   beforeEach(async () => {

package/dist/collection/components/label/label.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class LabelComponent {
   constructor() {
     this.type = 'neutral';

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

@@ -1,15 +1,15 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { h } from '@stencil/core';
-import { LabelComponent } from './label';
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { LabelComponent } from "./label";
 it('should render the label component with default values', async () => {
   const page = await newSpecPage({
     components: [LabelComponent],
     template: () => h("b2b-label", null, "Neutral"),
   });
-  expect(page.root.shadowRoot).toEqualHtml(`
-        <span class="b2b-label b2b-label--neutral">
-            <slot></slot>
-        </span>
+  expect(page.root.shadowRoot).toEqualHtml(`
+        <span class="b2b-label b2b-label--neutral">
+            <slot></slot>
+        </span>
     `);
 });
 it('should render the label component with info styles', async () => {
@@ -17,10 +17,10 @@ it('should render the label component with info styles', async () => {
     components: [LabelComponent],
     template: () => h("b2b-label", { type: "info" }, "Neutral"),
   });
-  expect(page.root.shadowRoot).toEqualHtml(`
-          <span class="b2b-label b2b-label--info">
-              <slot></slot>
-          </span>
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--info">
+              <slot></slot>
+          </span>
       `);
 });
 it('should render the label component with success styles', async () => {
@@ -28,10 +28,10 @@ it('should render the label component with success styles', async () => {
     components: [LabelComponent],
     template: () => h("b2b-label", { type: "success" }, "Neutral"),
   });
-  expect(page.root.shadowRoot).toEqualHtml(`
-          <span class="b2b-label b2b-label--success">
-              <slot></slot>
-          </span>
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--success">
+              <slot></slot>
+          </span>
       `);
 });
 it('should render the label component with warning styles', async () => {
@@ -39,10 +39,10 @@ it('should render the label component with warning styles', async () => {
     components: [LabelComponent],
     template: () => h("b2b-label", { type: "warning" }, "Neutral"),
   });
-  expect(page.root.shadowRoot).toEqualHtml(`
-          <span class="b2b-label b2b-label--warning">
-              <slot></slot>
-          </span>
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--warning">
+              <slot></slot>
+          </span>
       `);
 });
 it('should render the label component with error styles', async () => {
@@ -50,9 +50,9 @@ it('should render the label component with error styles', async () => {
     components: [LabelComponent],
     template: () => h("b2b-label", { type: "error" }, "Neutral"),
   });
-  expect(page.root.shadowRoot).toEqualHtml(`
-          <span class="b2b-label b2b-label--error">
-              <slot></slot>
-          </span>
+  expect(page.root.shadowRoot).toEqualHtml(`
+          <span class="b2b-label b2b-label--error">
+              <slot></slot>
+          </span>
       `);
 });

package/dist/collection/components/label/label.stories.js

@@ -1,6 +1,5 @@
-import { html } from 'lit-html';
-import docs from './label.docs.mdx';
-import { getArgTypes } from '../../docs/config/utils';
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ type }) => {
   return html `<b2b-label type="${type}">Label</b2b-label>`;
 };
@@ -27,9 +26,4 @@ export default {
   title: 'Components/Status & Feedback/Label',
   argTypes: argTypes,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: docs,
-    },
-  },
 };

package/dist/collection/components/modal/modal.css

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

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

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('b2b-modal', () => {
   it('renders', async () => {
     const page = await newE2EPage();

package/dist/collection/components/modal/modal.js

@@ -1,5 +1,5 @@
-import { h, Host, } from '@stencil/core';
-import { isFocusable, isHidden, queryShadowRoot } from '../../utils/focus-trap';
+import { h, Host, } from "@stencil/core";
+import { isFocusable, isHidden, queryShadowRoot } from "../../utils/focus-trap";
 /** Modal component
  * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
  */
@@ -148,7 +148,7 @@ export class ModalComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "A boolean that indicates whether the modal can be dismissed by clicking\nin the backdrop outside the modal."
+          "text": "A boolean that indicates whether the modal can be dismissed by clicking\r\nin the backdrop outside the modal."
         },
         "attribute": "backdrop-dismiss",
         "reflect": false,
@@ -166,7 +166,7 @@ export class ModalComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "A boolean to indicate whether the modal can be dismissed by pressing\nthe escape key on the keyboard"
+          "text": "A boolean to indicate whether the modal can be dismissed by pressing\r\nthe escape key on the keyboard"
         },
         "attribute": "esc-dismiss",
         "reflect": false,
@@ -230,7 +230,8 @@ export class ModalComponent {
           "references": {
             "BeforeCloseEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/status.interface"
+              "path": "../../utils/interfaces/status.interface",
+              "id": "src/utils/interfaces/status.interface.d.ts::BeforeCloseEventDetail"
             }
           }
         }

package/dist/collection/components/modal/modal.stories.js

@@ -1,8 +1,7 @@
-import { screen } from '@storybook/testing-library';
-import { getArgTypes } from '../../docs/config/utils';
-import { useArgs } from '@storybook/client-api';
-import { html } from 'lit-html';
-import modalDocs from './modal.docs.mdx';
+import { screen } from "@storybook/testing-library";
+import { getArgTypes } from "../../docs/config/utils";
+import { useArgs } from "@storybook/preview-api";
+import { html } from "lit-html";
 const Template = ({ opened, variant, heading, backdropDismiss, escDismiss, content, }) => {
   const [_, updateArgs] = useArgs();
   const openModal = () => {
@@ -17,22 +16,22 @@ const Template = ({ opened, variant, heading, backdropDismiss, escDismiss, conte
       escDismiss,
     });
   };
-  return html `
-    <b2b-button variant="primary" @click=${openModal}>Open Modal</b2b-button>
-
-    <b2b-modal
-      @b2b-close=${closeModal}
-      id="modal"
-      opened="${opened}"
-      variant="${variant}"
-      heading="${heading}"
-      backdrop-dismiss="${backdropDismiss}"
-      esc-dismiss="${escDismiss}">
-      <div>${content}</div>
-      <b2b-paragraph slot="footer-left">* Left Slot</b2b-paragraph>
-      <b2b-button @click=${closeModal} slot="footer-right">Close</b2b-button>
-      <b2b-button slot="footer-right" variant="primary">Save</b2b-button>
-    </b2b-modal>
+  return html `
+    <b2b-button variant="primary" @click=${openModal}>Open Modal</b2b-button>
+
+    <b2b-modal
+      @b2b-close=${closeModal}
+      id="modal"
+      opened="${opened}"
+      variant="${variant}"
+      heading="${heading}"
+      backdrop-dismiss="${backdropDismiss}"
+      esc-dismiss="${escDismiss}">
+      <div>${content}</div>
+      <b2b-paragraph slot="footer-left">* Left Slot</b2b-paragraph>
+      <b2b-button @click=${closeModal} slot="footer-right">Close</b2b-button>
+      <b2b-button slot="footer-right" variant="primary">Save</b2b-button>
+    </b2b-modal>
   `;
 };
 const defaultArgs = {
@@ -73,9 +72,4 @@ export default {
   title: 'Components/Status & Feedback/Modal',
   argTypes: modalArgs,
   viewmode: 'docs',
-  parameters: {
-    docs: {
-      page: modalDocs,
-    },
-  },
 };

package/dist/collection/components/pagination/pagination.css

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

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

@@ -1,5 +1,5 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { PaginationConstants } from './pagination.constants';
+import { newE2EPage } from "@stencil/core/testing";
+import { PaginationConstants } from "./pagination.constants";
 describe('B2B-Pagination', () => {
   let page;
   const getPaginationElement = async (page) => await page.find('b2b-pagination >>> nav');

package/dist/collection/components/pagination/pagination.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { PaginationConstants } from './pagination.constants';
+import { h } from "@stencil/core";
+import { PaginationConstants } from "./pagination.constants";
 export class PaginationComponent {
   constructor() {
     this.firstPageIndex = 1;
@@ -194,7 +194,7 @@ export class PaginationComponent {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Will emit every time a page changes, by clicking back, next or any specific page. \\\nEmits a PageChangeEventDetail that includes lastSelectedPage, currentPage\nand direction. Direction is only when clicking back or next."
+          "text": "Will emit every time a page changes, by clicking back, next or any specific page. \\\r\nEmits a PageChangeEventDetail that includes lastSelectedPage, currentPage\r\nand direction. Direction is only when clicking back or next."
         },
         "complexType": {
           "original": "PageChangeEventDetail",
@@ -202,7 +202,8 @@ export class PaginationComponent {
           "references": {
             "PageChangeEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/interaction.interface"
+              "path": "../../utils/interfaces/interaction.interface",
+              "id": "src/utils/interfaces/interaction.interface.d.ts::PageChangeEventDetail"
             }
           }
         }

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

@@ -1,6 +1,6 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { PaginationComponent } from './pagination';
-import { PaginationConstants } from './pagination.constants';
+import { newSpecPage } from "@stencil/core/testing";
+import { PaginationComponent } from "./pagination";
+import { PaginationConstants } from "./pagination.constants";
 describe('B2B-Pagination', () => {
   const backAndForwardItems = 2;
   const getItem = (page, itemText) => {