@otto-de/b2b-core-components 1.9.0-beta.2 → 1.10.0

package/dist/esm/b2b-modal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f0a4762b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ab9eb36d.js';
 
 /**
  * Copy/pasted from https://github.com/andreasbm/focus-trap
@@ -16,82 +16,82 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
  * @returns {HTMLElement[]}
  */
 function queryShadowRoot(root, skipNode, isMatch, maxDepth = 20, depth = 0) {
-  const matches = [];
-  // If the depth is above the max depth, abort the searching here.
-  if (depth >= maxDepth) {
-    return matches;
-  }
-  // Traverses a slot element
-  const traverseSlot = ($slot) => {
-    // Only check nodes that are of the type Node.ELEMENT_NODE
-    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
-    const assignedNodes = $slot
-      .assignedNodes()
-      .filter(node => node.nodeType === 1);
-    if (assignedNodes.length > 0) {
-      const $slotParent = assignedNodes[0].parentElement;
-      return queryShadowRoot($slotParent, skipNode, isMatch, maxDepth, depth + 1);
-    }
-    return [];
-  };
-  // Go through each child and continue the traversing if necessary
-  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.
-  // Therefore we fallback to an empty array if it is undefined.
-  const children = Array.from(root.children || []);
-  for (const $child of children) {
-    // Check if the element and its descendants should be skipped
-    if (skipNode($child)) {
-      // console.log('-- SKIP', $child);
-      continue;
-    }
-    // console.log('$child', $child);
-    // If the element matches we always add it
-    if (isMatch($child)) {
-      matches.push($child);
-    }
-    if ($child.shadowRoot != null) {
-      // If the element has a shadow root we need to traverse it
-      matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));
-    }
-    else if ($child.tagName === 'SLOT') {
-      // If the child is a slot we need to traverse each assigned node
-      matches.push(...traverseSlot($child));
+    const matches = [];
+    // If the depth is above the max depth, abort the searching here.
+    if (depth >= maxDepth) {
+        return matches;
     }
-    else {
-      // Traverse the children of the element
-      matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));
+    // Traverses a slot element
+    const traverseSlot = ($slot) => {
+        // Only check nodes that are of the type Node.ELEMENT_NODE
+        // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+        const assignedNodes = $slot
+            .assignedNodes()
+            .filter(node => node.nodeType === 1);
+        if (assignedNodes.length > 0) {
+            const $slotParent = assignedNodes[0].parentElement;
+            return queryShadowRoot($slotParent, skipNode, isMatch, maxDepth, depth + 1);
+        }
+        return [];
+    };
+    // Go through each child and continue the traversing if necessary
+    // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.
+    // Therefore we fallback to an empty array if it is undefined.
+    const children = Array.from(root.children || []);
+    for (const $child of children) {
+        // Check if the element and its descendants should be skipped
+        if (skipNode($child)) {
+            // console.log('-- SKIP', $child);
+            continue;
+        }
+        // console.log('$child', $child);
+        // If the element matches we always add it
+        if (isMatch($child)) {
+            matches.push($child);
+        }
+        if ($child.shadowRoot != null) {
+            // If the element has a shadow root we need to traverse it
+            matches.push(...queryShadowRoot($child.shadowRoot, skipNode, isMatch, maxDepth, depth + 1));
+        }
+        else if ($child.tagName === 'SLOT') {
+            // If the child is a slot we need to traverse each assigned node
+            matches.push(...traverseSlot($child));
+        }
+        else {
+            // Traverse the children of the element
+            matches.push(...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1));
+        }
     }
-  }
-  return matches;
+    return matches;
 }
 /**
  * Returns whether the element is hidden.
  * @param $elem
  */
 function isHidden($elem) {
-  return ($elem.hasAttribute('hidden') ||
-    ($elem.hasAttribute('aria-hidden') &&
-      $elem.getAttribute('aria-hidden') !== 'false') ||
-    // A quick and dirty way to check whether the element is hidden.
-    // For a more fine-grained check we could use "window.getComputedStyle" but we don't because of bad performance.
-    // If the element has visibility set to "hidden" or "collapse", display set to "none" or opacity set to "0" through CSS
-    // we won't be able to catch it here. We accept it due to the huge performance benefits.
-    $elem.style.display === `none` ||
-    $elem.style.opacity === `0` ||
-    $elem.style.visibility === `hidden` ||
-    $elem.style.visibility === `collapse`);
-  // If offsetParent is null we can assume that the element is hidden
-  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null
-  // || $elem.offsetParent == null;
+    return ($elem.hasAttribute('hidden') ||
+        ($elem.hasAttribute('aria-hidden') &&
+            $elem.getAttribute('aria-hidden') !== 'false') ||
+        // A quick and dirty way to check whether the element is hidden.
+        // For a more fine-grained check we could use "window.getComputedStyle" but we don't because of bad performance.
+        // If the element has visibility set to "hidden" or "collapse", display set to "none" or opacity set to "0" through CSS
+        // we won't be able to catch it here. We accept it due to the huge performance benefits.
+        $elem.style.display === `none` ||
+        $elem.style.opacity === `0` ||
+        $elem.style.visibility === `hidden` ||
+        $elem.style.visibility === `collapse`);
+    // If offsetParent is null we can assume that the element is hidden
+    // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null
+    // || $elem.offsetParent == null;
 }
 /**
  * Returns whether the element is disabled.
  * @param $elem
  */
 function isDisabled($elem) {
-  return ($elem.hasAttribute('disabled') ||
-    ($elem.hasAttribute('aria-disabled') &&
-      $elem.getAttribute('aria-disabled') !== 'false'));
+    return ($elem.hasAttribute('disabled') ||
+        ($elem.hasAttribute('aria-disabled') &&
+            $elem.getAttribute('aria-disabled') !== 'false'));
 }
 /**
  * Determines whether an element is focusable.
@@ -100,121 +100,122 @@ function isDisabled($elem) {
  * @param $elem
  */
 function isFocusable($elem) {
-  // Discard elements that are removed from the tab order.
-  if ($elem.getAttribute('tabindex') === '-1' ||
-    isHidden($elem) ||
-    isDisabled($elem)) {
-    return false;
-  }
-  return (
-  // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists
-  $elem.hasAttribute('tabindex') ||
-    // Anchor tags or area tags with a href set
-    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&
-      $elem.hasAttribute('href')) ||
-    // Form elements which are not disabled
-    $elem instanceof HTMLButtonElement ||
-    $elem instanceof HTMLInputElement ||
-    $elem instanceof HTMLTextAreaElement ||
-    $elem instanceof HTMLSelectElement ||
-    // IFrames
-    $elem instanceof HTMLIFrameElement);
+    // Discard elements that are removed from the tab order.
+    if ($elem.getAttribute('tabindex') === '-1' ||
+        isHidden($elem) ||
+        isDisabled($elem)) {
+        return false;
+    }
+    return (
+    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists
+    $elem.hasAttribute('tabindex') ||
+        // Anchor tags or area tags with a href set
+        (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&
+            $elem.hasAttribute('href')) ||
+        // Form elements which are not disabled
+        $elem instanceof HTMLButtonElement ||
+        $elem instanceof HTMLInputElement ||
+        $elem instanceof HTMLTextAreaElement ||
+        $elem instanceof HTMLSelectElement ||
+        // IFrames
+        $elem instanceof HTMLIFrameElement);
 }
 
-const modalCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:root,:host{--b2b-component-modal-large-max-width:800px;--b2b-component-modal-default-max-width:600px;--b2b-component-modal-default-min-width:360px}:host .b2b-modal{top:0;left:0;bottom:0;width:100%;z-index:1000;display:none;position:fixed;background-color:var(--b2b-color-background-overlay-transparent-80);box-sizing:border-box;align-items:center;justify-content:center}:host .b2b-modal--open{display:flex}:host .b2b-modal__backdrop{top:0;left:0;z-index:0;width:100%;height:100%;position:absolute}:host .b2b-modal__dialog{z-index:1;position:relative;min-width:var(--b2b-component-modal-default-min-width);max-width:var(--b2b-component-modal-default-max-width);padding:calc(var(--b2b-size-space-75) * 1.5) calc(var(--b2b-size-space-150)) calc(var(--b2b-size-space-150));background-color:var(--b2b-color-background-box);box-shadow:0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);margin:auto}:host .b2b-modal__dialog__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--b2b-size-space-75)}:host .b2b-modal__dialog__close{cursor:pointer;background:transparent;padding:0;border:none}:host .b2b-modal__dialog__close b2b-icon{transition:all 0.3s ease}:host .b2b-modal__dialog__footer{display:flex;justify-content:space-between;padding-top:calc(var(--b2b-size-space-75) * 2);margin-top:calc(var(--b2b-size-space-75) * 2);border-top:var(--b2b-size-1) solid var(--b2b-color-border-100)}:host .b2b-modal__dialog__footer-left{display:flex;justify-content:flex-start}:host .b2b-modal__dialog__footer-right{display:flex;justify-content:flex-end}:host .b2b-modal__dialog--large{max-width:var(--b2b-component-modal-large-max-width)}@media only screen and (max-width: var(--b2b-component-modal-large-max-width)){:host .b2b-modal__dialog--large{left:0;width:auto;max-width:var(--b2b-component-modal-large-max-width)}}@media only screen and (max-width: var(--b2b-component-modal-default-max-width)){:host .b2b-modal__dialog{left:0;width:auto;max-width:var(--b2b-component-modal-default-max-width)}}::slotted(b2b-button[slot=footer-right]){margin-left:var(--b2b-size-space-75)}";
+const modalCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--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;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:root,:host{--b2b-component-modal-large-max-width:800px;--b2b-component-modal-default-max-width:600px;--b2b-component-modal-default-min-width:360px}:host .b2b-modal{top:0;left:0;bottom:0;width:100%;z-index:1000;display:none;position:fixed;background-color:var(--b2b-color-background-overlay-transparent-80);box-sizing:border-box;align-items:center;justify-content:center}:host .b2b-modal--open{display:flex}:host .b2b-modal__backdrop{top:0;left:0;z-index:0;width:100%;height:100%;position:absolute}:host .b2b-modal__dialog{z-index:1;position:relative;min-width:var(--b2b-component-modal-default-min-width);max-width:var(--b2b-component-modal-default-max-width);padding:calc(var(--b2b-size-space-75) * 1.5) calc(var(--b2b-size-space-150)) calc(var(--b2b-size-space-150));background-color:var(--b2b-color-background-box);box-shadow:0 3px 8px 0 var(--b2b-color-background-overlay-transparent-40);margin:auto}:host .b2b-modal__dialog__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--b2b-size-space-75)}:host .b2b-modal__dialog__close{cursor:pointer;background:transparent;padding:0;border:none}:host .b2b-modal__dialog__close b2b-icon{transition:all 0.3s ease}:host .b2b-modal__dialog__footer{display:flex;justify-content:space-between;padding-top:calc(var(--b2b-size-space-75) * 2);margin-top:calc(var(--b2b-size-space-75) * 2);border-top:var(--b2b-size-1) solid var(--b2b-color-border-100)}:host .b2b-modal__dialog__footer-left{display:flex;justify-content:flex-start}:host .b2b-modal__dialog__footer-right{display:flex;justify-content:flex-end}:host .b2b-modal__dialog--large{max-width:var(--b2b-component-modal-large-max-width)}@media only screen and (max-width: var(--b2b-component-modal-large-max-width)){:host .b2b-modal__dialog--large{left:0;width:auto;max-width:var(--b2b-component-modal-large-max-width)}}@media only screen and (max-width: var(--b2b-component-modal-default-max-width)){:host .b2b-modal__dialog{left:0;width:auto;max-width:var(--b2b-component-modal-default-max-width)}}::slotted(b2b-button[slot=footer-right]){margin-left:var(--b2b-size-space-75)}";
+const B2bModalStyle0 = modalCss;
 
 const ModalComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.b2bClose = createEvent(this, "b2b-close", 7);
-    this.b2bBeforeClose = createEvent(this, "b2b-before-close", 7);
-    this.focusableElements = [];
-    this.toggleIconHover = () => {
-      this.iconHover = !this.iconHover;
-    };
-    this.emitBeforeClose = (trigger) => {
-      const customEvent = this.b2bBeforeClose.emit({ trigger });
-      const prevented = customEvent.defaultPrevented;
-      if (!prevented) {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.b2bClose = createEvent(this, "b2b-close", 7);
+        this.b2bBeforeClose = createEvent(this, "b2b-before-close", 7);
+        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;
+    }
+    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();
+        }
+        else {
+            this.close();
+        }
+    }
+    attemptFocus(element) {
+        if (element === undefined || element === null) {
+            this.closeButton.focus();
+            return;
+        }
+        element.focus();
+    }
+    open() {
+        this.isOpen = true;
+    }
+    close() {
+        this.isOpen = false;
+        this.b2bClose.emit();
+    }
+    getFirstFocusableElement() {
+        return this.focusableElements[0];
     }
-    if (event.key === 'Escape') {
-      this.emitBeforeClose('ESCAPE_KEY');
-      event.stopPropagation();
+    getLastFocusableElement() {
+        return this.focusableElements[this.focusableElements.length - 1];
     }
-  }
-  openedChanged(newValue) {
-    if (newValue === true) {
-      this.open();
+    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);
     }
-    else {
-      this.close();
+    componentDidRender() {
+        this.attemptFocus(this.getFirstFocusableElement());
     }
-  }
-  attemptFocus(element) {
-    if (element === undefined || element === null) {
-      this.closeButton.focus();
-      return;
+    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 }))));
     }
-    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 }))));
-  }
-  get hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "opened": ["openedChanged"]
-  }; }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "opened": ["openedChanged"]
+    }; }
 };
-ModalComponent.style = modalCss;
+ModalComponent.style = B2bModalStyle0;
 
 export { ModalComponent as b2b_modal };

package/dist/esm/b2b-multiselect-dropdown.entry.js

@@ -0,0 +1,163 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ab9eb36d.js';
+
+const multiselectDropdownCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--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;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:500;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-250:#850012;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:host{width:100%}:host b2b-input-label{margin-bottom:var(--b2b-size-10);display:block}:host .b2b-multiselect-dropdown{position:relative;display:flex;justify-content:space-between;min-width:20rem;overflow:hidden;border:1px solid var(--b2b-color-grey-200);border-radius:var(--b2b-size-border-radius-100);padding:var(--b2b-size-15) var(--b2b-size-25);max-height:104px;background-color:var(--b2b-color-white-100)}:host .b2b-multiselect-dropdown--open{border-radius:var(--b2b-size-border-no-radius-bottom);border-bottom:0}:host .b2b-multiselect-dropdown__placeholder{color:var(--b2b-color-black-100);user-select:none;cursor:default;font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);font-family:var(--b2b-font-family-default)}:host .b2b-multiselect-dropdown__chip-container{display:flex;flex-flow:row wrap;gap:4px 0;width:calc(100% - 24px)}:host .b2b-multiselect-dropdown__options-container{position:relative;display:none}:host .b2b-multiselect-dropdown__options-container--visible{display:block}:host .b2b-multiselect-dropdown__options{position:absolute;width:100%;max-height:312px;overflow-y:auto;margin:0;background-color:var(--b2b-color-white-100);border:solid 1px var(--b2b-color-grey-200);box-sizing:border-box;z-index:10}:host .b2b-multiselect-dropdown__option__search{width:100%}:host .b2b-multiselect-dropdown__option__search__input{width:calc(100% - 16px);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);font-family:var(--b2b-font-family-default);outline:none;border-bottom:1px solid var(--b2b-color-grey-200);border-top:0;border-left:0;border-right:0;padding:8px 8px 10px}:host .b2b-multiselect-dropdown__option__select-all{border-bottom:1px solid var(--b2b-color-grey-200)}:host .b2b-multiselect-dropdown__option__show-more-button{cursor:pointer}";
+const B2bMultiselectDropdownStyle0 = multiselectDropdownCss;
+
+const B2bMultiSelectDropdown = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.b2bChange = createEvent(this, "b2b-selected", 7);
+        this.handleInput = event => {
+            this.value = event.target.value.toLowerCase();
+            if (this.value !== '') {
+                const filteredList = this.optionsList.filter(option => option.toLowerCase().indexOf(this.value) > -1);
+                this.currentList = filteredList;
+            }
+            else if (this.value === '') {
+                this.currentList = this.optionsList;
+            }
+        };
+        this.getOptions = () => {
+            return Array.from(this.hostElement.shadowRoot.querySelectorAll('b2b-multiselect-option')).slice(1);
+        };
+        this.renderChips = () => {
+            return this.selectedValues.map((option, index) => {
+                if (index < this.maxOptionsVisible) {
+                    return (h("b2b-chip-component", { label: option, value: option, "onB2b-close": this.handleChipClose }));
+                }
+                else if (index === this.maxOptionsVisible) {
+                    return (h("b2b-chip-component", { label: "...", class: "b2b-multiselect-dropdown__option--show-more-button", "has-close-button": "false", onClick: this.handleOverflowOptionsClick }));
+                }
+                else {
+                    return;
+                }
+            });
+        };
+        this.handleOverflowOptionsClick = () => {
+            if (!this.isElementFocused) {
+                this.setElementOnFocus();
+            }
+        };
+        this.handleSelectedChange = event => {
+            const newOption = event.detail.selectedOption;
+            if (event.detail.selected) {
+                this.selectedValues = [...this.selectedValues, newOption];
+            }
+            else {
+                this.selectedValues = this.selectedValues.filter(el => el !== newOption);
+            }
+        };
+        this.handleChipClose = event => {
+            this.selectedValues = this.selectedValues.filter(el => el !== event.detail.value);
+            this.updateOption(event.detail.value);
+            this.resetFocus();
+        };
+        this.updateOption = (option) => {
+            const options = this.getOptions();
+            const optionToUpdate = options.find(el => el.option === option);
+            optionToUpdate.selected = false;
+        };
+        this.updateAllOptions = options => {
+            // Deselect all to avoid caching issues in Vue
+            options.forEach(option => (option.selected = false));
+            options
+                .filter(option => this.selectedValues.includes(option.option))
+                .forEach(option => (option.selected = true));
+        };
+        this.setElementOnFocus = () => {
+            this.isElementFocused = true;
+        };
+        this.setElementOnBlur = () => {
+            this.isElementFocused = false;
+        };
+        this.resetFocus = () => {
+            const el = this.hostElement.shadowRoot.querySelector('.b2b-multiselect-dropdown');
+            el.focus();
+        };
+        this.handleMouseDown = (event) => {
+            /** Keep dropdown open if a tag is removed */
+            if (this.isElementFocused) {
+                event.preventDefault();
+            }
+            else {
+                this.resetFocus();
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.resetFocus();
+            }
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.setElementOnBlur();
+            }
+        };
+        this.handleSelectAll = event => {
+            const newVal = event.detail.selected;
+            const options = this.getOptions();
+            const newVals = options.map(el => el.option);
+            for (let i = 0, n = options.length; i < n; i++) {
+                options[i].selected = newVal;
+            }
+            if (newVal) {
+                // filter out duplicates
+                this.selectedValues = Array.from(new Set([...this.selectedValues, ...newVals]));
+            }
+            else {
+                this.selectedValues = this.selectedValues.filter(option => !newVals.includes(option));
+            }
+        };
+        this.updateSelectAll = (options) => {
+            let someSelected = options.some(option => option.selected === true);
+            let everySelected = options.every(option => option.selected === true);
+            const checkbox = this.hostElement.shadowRoot.querySelector('b2b-multiselect-option');
+            checkbox.selected = everySelected;
+            checkbox.indeterminate = someSelected && !everySelected;
+        };
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.optionsList = [];
+        this.searchPlaceholder = undefined;
+        this.selectAllLabel = undefined;
+        this.maxOptionsVisible = 8;
+        this.selectedValues = [];
+        this.currentList = this.optionsList;
+        this.value = '';
+        this.isElementFocused = false;
+        this.hasOptionList = this.optionsList.length > 0;
+    }
+    /** Needed to trigger a re-render for async data */
+    watchPropHandler(newList) {
+        this.hasOptionList = newList.length > 0;
+        if (this.hasOptionList) {
+            this.currentList = newList;
+        }
+    }
+    handleSelectedValuesChange() {
+        this.b2bChange.emit(this.selectedValues);
+    }
+    componentDidUpdate() {
+        const options = this.getOptions();
+        this.updateAllOptions(options);
+        this.updateSelectAll(options);
+    }
+    render() {
+        return (h(Host, { key: 'a01e7a1db6fe845102241a1a14f8b7b42daa1126', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '0f66b87fb86ba9f8ce7beb7815b7f833a1d8b47a' }, this.label), h("div", { key: '73afbf22d4144a84d2240b4669ecf88535909a2e', class: {
+                'b2b-multiselect-dropdown': true,
+                'b2b-multiselect-dropdown--open': this.isElementFocused,
+            }, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.selectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon", { key: '973d9487ef8f3a746f657c08ff602e1dd733bf08', icon: "b2b_icon-arrow-down" })), h("div", { key: 'f2f8a4a5daf4695d31b7939c645fe86bda08a3fb', class: {
+                'b2b-multiselect-dropdown__options-container': true,
+                'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
+            } }, h("div", { key: 'c3bbbb71e2ee3d300ed73d952c648efffa85464c', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '2f7ce035dff0657e306ac34f4bc6b81df7c05493', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '8b9e9427f8304545645d5b39ba0c8bde8afb8422', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '2a1a39302b3a7e1576d19fcffd47d7a3fffb6031', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option })))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "optionsList": ["watchPropHandler"],
+        "selectedValues": ["handleSelectedValuesChange"]
+    }; }
+};
+B2bMultiSelectDropdown.style = B2bMultiselectDropdownStyle0;
+
+export { B2bMultiSelectDropdown as b2b_multiselect_dropdown };