@otto-de/b2b-core-components 1.9.0 → 1.10.1

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

@@ -4,253 +4,253 @@ import { isFocusable, isHidden, queryShadowRoot } from "../../utils/focus-trap";
  * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
  */
 export class ModalComponent {
-  constructor() {
-    this.focusableElements = [];
-    this.toggleIconHover = () => {
-      this.iconHover = !this.iconHover;
-    };
-    this.emitBeforeClose = (trigger) => {
-      const customEvent = this.b2bBeforeClose.emit({ trigger });
-      const prevented = customEvent.defaultPrevented;
-      if (!prevented) {
+    constructor() {
+        this.focusableElements = [];
+        this.toggleIconHover = () => {
+            this.iconHover = !this.iconHover;
+        };
+        this.emitBeforeClose = (trigger) => {
+            const customEvent = this.b2bBeforeClose.emit({ trigger });
+            const prevented = customEvent.defaultPrevented;
+            if (!prevented) {
+                this.opened = false;
+            }
+        };
+        this.handleBackdropDismiss = () => {
+            this.backdropDismiss && this.emitBeforeClose('BACKDROP');
+        };
+        this.handleClickDismiss = () => {
+            this.emitBeforeClose('CLOSE_BUTTON');
+        };
+        this.handleTopFocus = () => {
+            this.attemptFocus(this.getLastFocusableElement());
+        };
+        this.handleBottomFocus = () => {
+            this.attemptFocus(this.getFirstFocusableElement());
+        };
+        this.heading = undefined;
         this.opened = false;
-      }
-    };
-    this.handleBackdropDismiss = () => {
-      this.backdropDismiss && this.emitBeforeClose('BACKDROP');
-    };
-    this.handleClickDismiss = () => {
-      this.emitBeforeClose('CLOSE_BUTTON');
-    };
-    this.handleTopFocus = () => {
-      this.attemptFocus(this.getLastFocusableElement());
-    };
-    this.handleBottomFocus = () => {
-      this.attemptFocus(this.getFirstFocusableElement());
-    };
-    this.heading = undefined;
-    this.opened = false;
-    this.backdropDismiss = false;
-    this.escDismiss = true;
-    this.variant = 'default';
-    this.iconHover = false;
-    this.isOpen = this.opened || false;
-  }
-  handleKeypress(event) {
-    if (!this.isOpen || !this.escDismiss) {
-      return;
+        this.backdropDismiss = false;
+        this.escDismiss = true;
+        this.variant = 'default';
+        this.iconHover = false;
+        this.isOpen = this.opened || false;
     }
-    if (event.key === 'Escape') {
-      this.emitBeforeClose('ESCAPE_KEY');
-      event.stopPropagation();
+    handleKeypress(event) {
+        if (!this.isOpen || !this.escDismiss) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            this.emitBeforeClose('ESCAPE_KEY');
+            event.stopPropagation();
+        }
     }
-  }
-  openedChanged(newValue) {
-    if (newValue === true) {
-      this.open();
+    openedChanged(newValue) {
+        if (newValue === true) {
+            this.open();
+        }
+        else {
+            this.close();
+        }
     }
-    else {
-      this.close();
+    attemptFocus(element) {
+        if (element === undefined || element === null) {
+            this.closeButton.focus();
+            return;
+        }
+        element.focus();
     }
-  }
-  attemptFocus(element) {
-    if (element === undefined || element === null) {
-      this.closeButton.focus();
-      return;
+    open() {
+        this.isOpen = true;
     }
-    element.focus();
-  }
-  open() {
-    this.isOpen = true;
-  }
-  close() {
-    this.isOpen = false;
-    this.b2bClose.emit();
-  }
-  getFirstFocusableElement() {
-    return this.focusableElements[0];
-  }
-  getLastFocusableElement() {
-    return this.focusableElements[this.focusableElements.length - 1];
-  }
-  componentDidLoad() {
-    // Query all focusable elements and store them in `focusableElements`.
-    // Needed for the "focus trap" functionality.
-    this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, el => isHidden(el) || el.matches('[data-focus-trap-edge]'), isFocusable);
-  }
-  componentDidRender() {
-    this.attemptFocus(this.getFirstFocusableElement());
-  }
-  render() {
-    return (h(Host, null, h("div", { class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { class: {
-        'b2b-modal__dialog': true,
-        [`b2b-modal__dialog--${this.variant}`]: true,
-      } }, h("div", { class: "b2b-modal__dialog__header" }, h("b2b-headline", { align: "center", size: "200", noMargin: true }, this.heading), h("button", { type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' }))), h("div", { class: "b2b-modal__dialog__body" }, h("slot", null)), h("div", { class: "b2b-modal__dialog__footer" }, h("div", { class: "b2b-modal__dialog__footer-left" }, h("slot", { name: "footer-left" })), h("div", { class: "b2b-modal__dialog__footer-right" }, h("slot", { name: "footer-right" })))), h("div", { "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
-  }
-  static get is() { return "b2b-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["modal.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["modal.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "heading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The title for the modal. This is required."
-        },
-        "attribute": "heading",
-        "reflect": false
-      },
-      "opened": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the modal is shown or not. Default is false"
-        },
-        "attribute": "opened",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "backdropDismiss": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A boolean that indicates whether the modal can be dismissed by clicking\nin the backdrop outside the modal."
-        },
-        "attribute": "backdrop-dismiss",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "escDismiss": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A boolean to indicate whether the modal can be dismissed by pressing\nthe escape key on the keyboard"
-        },
-        "attribute": "esc-dismiss",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'default' | 'large'",
-          "resolved": "\"default\" | \"large\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of the modal. If not specified, will assume the default size"
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'default'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "iconHover": {},
-      "isOpen": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "b2bClose",
-        "name": "b2b-close",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "This even will be triggered when the modal is closed"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
-        "method": "b2bBeforeClose",
-        "name": "b2b-before-close",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "This even will be triggered before the modal is closed"
-        },
-        "complexType": {
-          "original": "BeforeCloseEventDetail",
-          "resolved": "BeforeCloseEventDetail",
-          "references": {
-            "BeforeCloseEventDetail": {
-              "location": "import",
-              "path": "../../utils/interfaces/status.interface",
-              "id": "src/utils/interfaces/status.interface.d.ts::BeforeCloseEventDetail"
+    close() {
+        this.isOpen = false;
+        this.b2bClose.emit();
+    }
+    getFirstFocusableElement() {
+        return this.focusableElements[0];
+    }
+    getLastFocusableElement() {
+        return this.focusableElements[this.focusableElements.length - 1];
+    }
+    componentDidLoad() {
+        // Query all focusable elements and store them in `focusableElements`.
+        // Needed for the "focus trap" functionality.
+        this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, el => isHidden(el) || el.matches('[data-focus-trap-edge]'), isFocusable);
+    }
+    componentDidRender() {
+        this.attemptFocus(this.getFirstFocusableElement());
+    }
+    render() {
+        return (h(Host, { key: 'cf595eff0dbf9c8dc64b3ea59162bdb22e360c05' }, h("div", { key: 'a37aed1991400c2edddfba890ccaa9f911f2bc23', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'e7dd0c793f0f96b7d3d7800f413ff905906aa901', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '124a652a8595965664fdb9e9553f38624f7b41da', class: {
+                'b2b-modal__dialog': true,
+                [`b2b-modal__dialog--${this.variant}`]: true,
+            } }, h("div", { key: '5ffa9b863cae63bb15676f436eef48d87612950f', class: "b2b-modal__dialog__header" }, h("b2b-headline", { key: 'd61c84b09cc56a07952bbe7ac5268bb401410cf8', align: "center", size: "200", noMargin: true }, this.heading), h("button", { key: 'f192f9bb57f9c76ff0db171a0fda3bab6cbe1d99', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { key: 'eb5104084731932b280a723d13fd66e829cf87ee', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' }))), h("div", { key: '40cf975800b48f87835247c4822d2231e1f904e1', class: "b2b-modal__dialog__body" }, h("slot", { key: '1be31545480d4835d88bb2c87dd8f37930a1410c' })), h("div", { key: '923f36a1de98c30c0493375e976b928e70a7670b', class: "b2b-modal__dialog__footer" }, h("div", { key: '892537a57cb64977dbfe420593d3396ef693e6bb', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '53973995e6e8e94d7abd409fa1bb3d9c9f27e04b', name: "footer-left" })), h("div", { key: '02799b049346f9957d267d2a541ed7d4df6cd197', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '67a84d094edfdb6c635dc3cce49ba053832fa715', name: "footer-right" })))), h("div", { key: 'a17b435389631b97b868ce310c3f29384b02894e', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '0b6f907c3f0d9997411b2b77226b4a324a72bda3', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
+    }
+    static get is() { return "b2b-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title for the modal. This is required."
+                },
+                "attribute": "heading",
+                "reflect": false
+            },
+            "opened": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal is shown or not. Default is false"
+                },
+                "attribute": "opened",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "backdropDismiss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean that indicates whether the modal can be dismissed by clicking\nin the backdrop outside the modal."
+                },
+                "attribute": "backdrop-dismiss",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "escDismiss": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean to indicate whether the modal can be dismissed by pressing\nthe escape key on the keyboard"
+                },
+                "attribute": "esc-dismiss",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'large'",
+                    "resolved": "\"default\" | \"large\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the modal. If not specified, will assume the default size"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "opened",
-        "methodName": "openedChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeypress",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "iconHover": {},
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bClose",
+                "name": "b2b-close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This even will be triggered when the modal is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "b2bBeforeClose",
+                "name": "b2b-before-close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This even will be triggered before the modal is closed"
+                },
+                "complexType": {
+                    "original": "BeforeCloseEventDetail",
+                    "resolved": "BeforeCloseEventDetail",
+                    "references": {
+                        "BeforeCloseEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/status.interface",
+                            "id": "src/utils/interfaces/status.interface.d.ts::BeforeCloseEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "opened",
+                "methodName": "openedChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeypress",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -3,20 +3,20 @@ 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 = () => {
-    updateArgs({ opened: true, variant, heading, backdropDismiss, escDismiss });
-  };
-  const closeModal = () => {
-    updateArgs({
-      opened: false,
-      variant,
-      heading,
-      backdropDismiss,
-      escDismiss,
-    });
-  };
-  return html `
+    const [_, updateArgs] = useArgs();
+    const openModal = () => {
+        updateArgs({ opened: true, variant, heading, backdropDismiss, escDismiss });
+    };
+    const closeModal = () => {
+        updateArgs({
+            opened: false,
+            variant,
+            heading,
+            backdropDismiss,
+            escDismiss,
+        });
+    };
+    return html `
     <b2b-button variant="primary" @click=${openModal}>Open Modal</b2b-button>
 
     <b2b-modal
@@ -35,18 +35,18 @@ const Template = ({ opened, variant, heading, backdropDismiss, escDismiss, conte
   `;
 };
 const defaultArgs = {
-  heading: 'Modal Title',
-  opened: false,
-  escDismiss: false,
-  backdropDismiss: false,
-  variant: 'default',
-  content: 'This is a test modal*',
+    heading: 'Modal Title',
+    opened: false,
+    escDismiss: false,
+    backdropDismiss: false,
+    variant: 'default',
+    content: 'This is a test modal*',
 };
 const largeContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum*.';
 // This play function is implemented for visual regression tests, so we can test modals opened
 const openModal = async () => {
-  const openModalButton = screen.getByText('Open Modal');
-  await openModalButton.click();
+    const openModalButton = screen.getByText('Open Modal');
+    await openModalButton.click();
 };
 export const story010BackdropDismiss = Template.bind({});
 story010BackdropDismiss.args = Object.assign(Object.assign({}, defaultArgs), { backdropDismiss: true, heading: 'Modal with Backdrop Dismiss' });
@@ -58,18 +58,18 @@ export const story030Default = Template.bind({});
 story030Default.args = Object.assign(Object.assign({}, defaultArgs), { heading: 'Default Modal Title' });
 story030Default.storyName = 'Default (small)';
 story030Default.play = async () => {
-  await openModal();
+    await openModal();
 };
 export const story040Large = Template.bind({});
 story040Large.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'large', heading: 'Large Modal Title', content: largeContent });
 story040Large.storyName = 'Large';
 story040Large.play = async () => {
-  await openModal();
+    await openModal();
 };
 const controls = {};
 const modalArgs = getArgTypes('b2b-modal', controls);
 export default {
-  title: 'Components/Status & Feedback/Modal',
-  argTypes: modalArgs,
-  viewmode: 'docs',
+    title: 'Components/Status & Feedback/Modal',
+    argTypes: modalArgs,
+    viewmode: 'docs',
 };

package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ * Generated on Thu, 09 May 2024 10:53:08 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -28,7 +28,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ * Generated on Thu, 09 May 2024 10:53:08 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -151,7 +151,7 @@
   --b2b-size-5: 0.125rem; /* 2px */
   --b2b-size-1: 0.0625rem; /* 1px */
   --b2b-font-weight-bold: 700;
-  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-info-100: #003264;