@otto-de/b2b-core-components 1.0.0

package/dist/cjs/b2b-icon.cjs.entry.js

@@ -0,0 +1,405 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f680aee0.js');
+
+const ICON_PATH = 'https://internal.otto.market/design-system/dist/b2b-core-components/icons';
+
+const iconContent = new Map();
+const requests = new Map();
+const fetchIcon = (icon) => {
+  // see if we already have a request for this url
+  let req = requests.get(icon);
+  if (req === undefined || null) {
+    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
+      // we don't already have a request
+      req = fetch(icon).then(rsp => {
+        if (rsp.ok) {
+          return rsp.text().then(svgContent => {
+            iconContent.set(icon, svgContent || '');
+          });
+        }
+        iconContent.set(icon, '');
+      });
+      // cache for the same requests
+      requests.set(icon, req);
+    }
+    else {
+      // set to empty for ssr scenarios and resolve promise
+      iconContent.set(icon, '');
+      return Promise.resolve();
+    }
+  }
+  return req;
+};
+const buildPath = (icon) => {
+  // fetch icons from local dir for development
+  {
+    return `${ICON_PATH}/${icon}.svg`;
+  }
+};
+
+/* eslint-disable prettier/prettier */
+const iconTypes = [
+  "b2b_icon-360-degree",
+  "b2b_icon-advice",
+  "b2b_icon-allergen-sulfur-dioxide-sulfite",
+  "b2b_icon-almond",
+  "b2b_icon-archive",
+  "b2b_icon-armchair",
+  "b2b_icon-arrow-down",
+  "b2b_icon-arrow-graph",
+  "b2b_icon-arrow-left",
+  "b2b_icon-arrow-right",
+  "b2b_icon-arrow-up",
+  "b2b_icon-assembly",
+  "b2b_icon-assortment",
+  "b2b_icon-attachment",
+  "b2b_icon-augmented-reality",
+  "b2b_icon-autonomous-team",
+  "b2b_icon-bank-details",
+  "b2b_icon-bar-graph-ascending",
+  "b2b_icon-bar-graph-axis",
+  "b2b_icon-barley",
+  "b2b_icon-basket-sale",
+  "b2b_icon-basket",
+  "b2b_icon-basketball",
+  "b2b_icon-bikini",
+  "b2b_icon-blogs",
+  "b2b_icon-brandshop",
+  "b2b_icon-brazil-nut",
+  "b2b_icon-browser-click",
+  "b2b_icon-browser-content",
+  "b2b_icon-browser-psm",
+  "b2b_icon-burger",
+  "b2b_icon-bus",
+  "b2b_icon-callback",
+  "b2b_icon-camera",
+  "b2b_icon-cashback",
+  "b2b_icon-cashew-nut",
+  "b2b_icon-catalogue",
+  "b2b_icon-categories",
+  "b2b_icon-celery",
+  "b2b_icon-certificate",
+  "b2b_icon-chair",
+  "b2b_icon-chat",
+  "b2b_icon-check-bold",
+  "b2b_icon-check",
+  "b2b_icon-chicken",
+  "b2b_icon-city",
+  "b2b_icon-clear",
+  "b2b_icon-close-bold",
+  "b2b_icon-close",
+  "b2b_icon-code-management",
+  "b2b_icon-contact-mail",
+  "b2b_icon-copy",
+  "b2b_icon-cow",
+  "b2b_icon-crab",
+  "b2b_icon-critique",
+  "b2b_icon-curtain",
+  "b2b_icon-cut-out",
+  "b2b_icon-dashboard",
+  "b2b_icon-deer",
+  "b2b_icon-delete",
+  "b2b_icon-delivery-24h",
+  "b2b_icon-delivery-desired-date-selection",
+  "b2b_icon-delivery-desired-date",
+  "b2b_icon-delivery-express",
+  "b2b_icon-delivery-flat",
+  "b2b_icon-delivery-on-hangers",
+  "b2b_icon-delivery-preferred-place",
+  "b2b_icon-desktop-phone-ads-click",
+  "b2b_icon-desktop-phone-ads",
+  "b2b_icon-desktop-phone",
+  "b2b_icon-desktop",
+  "b2b_icon-devices-monitor-laptop-tablet",
+  "b2b_icon-dish-feature-lactose-free",
+  "b2b_icon-dislike",
+  "b2b_icon-disposal",
+  "b2b_icon-document-sign",
+  "b2b_icon-downloads",
+  "b2b_icon-dress",
+  "b2b_icon-dungarees",
+  "b2b_icon-duration",
+  "b2b_icon-e-invoice",
+  "b2b_icon-edit-pad",
+  "b2b_icon-edit",
+  "b2b_icon-egg",
+  "b2b_icon-ellipsis",
+  "b2b_icon-email-verification-confirmed-safe",
+  "b2b_icon-email-verification-confirmed",
+  "b2b_icon-email-verification-sent-safe",
+  "b2b_icon-email-verification-sent",
+  "b2b_icon-empty-hint",
+  "b2b_icon-end-to-end",
+  "b2b_icon-error-article-image",
+  "b2b_icon-error",
+  "b2b_icon-euro",
+  "b2b_icon-event",
+  "b2b_icon-events",
+  "b2b_icon-expand",
+  "b2b_icon-faq",
+  "b2b_icon-feedback",
+  "b2b_icon-filter",
+  "b2b_icon-fish",
+  "b2b_icon-fitness",
+  "b2b_icon-flag-chequered",
+  "b2b_icon-flexible-work",
+  "b2b_icon-flip",
+  "b2b_icon-food-processor",
+  "b2b_icon-fullscreen",
+  "b2b_icon-gallery-view",
+  "b2b_icon-gamepad",
+  "b2b_icon-garlic",
+  "b2b_icon-gender-intersex",
+  "b2b_icon-globe",
+  "b2b_icon-gluten",
+  "b2b_icon-glutenfree",
+  "b2b_icon-handshake",
+  "b2b_icon-hashtag",
+  "b2b_icon-hazelnut",
+  "b2b_icon-hide",
+  "b2b_icon-high-heels",
+  "b2b_icon-home",
+  "b2b_icon-info-small",
+  "b2b_icon-info",
+  "b2b_icon-inplace-zoom-reverse",
+  "b2b_icon-inplace-zoom",
+  "b2b_icon-insurance",
+  "b2b_icon-kamut",
+  "b2b_icon-laptop-os",
+  "b2b_icon-laptop",
+  "b2b_icon-leaving-page",
+  "b2b_icon-light-bulb",
+  "b2b_icon-like-fingers",
+  "b2b_icon-like-product",
+  "b2b_icon-like",
+  "b2b_icon-line-graph",
+  "b2b_icon-list-view",
+  "b2b_icon-location",
+  "b2b_icon-lupine",
+  "b2b_icon-macadamia",
+  "b2b_icon-material-samples",
+  "b2b_icon-measurement",
+  "b2b_icon-megaphone",
+  "b2b_icon-menu",
+  "b2b_icon-mic",
+  "b2b_icon-milk",
+  "b2b_icon-minus",
+  "b2b_icon-module-operations",
+  "b2b_icon-money-coins",
+  "b2b_icon-money-document",
+  "b2b_icon-money-plus",
+  "b2b_icon-money-stack",
+  "b2b_icon-money",
+  "b2b_icon-move",
+  "b2b_icon-mustard",
+  "b2b_icon-nav",
+  "b2b_icon-new",
+  "b2b_icon-newsletter-sign-up",
+  "b2b_icon-notification",
+  "b2b_icon-nuts",
+  "b2b_icon-oat",
+  "b2b_icon-order-cancelled",
+  "b2b_icon-order-delivered",
+  "b2b_icon-order-form",
+  "b2b_icon-order-management",
+  "b2b_icon-order-misdirected",
+  "b2b_icon-order-on-road",
+  "b2b_icon-order-packed",
+  "b2b_icon-order-payment",
+  "b2b_icon-order-received",
+  "b2b_icon-order-return",
+  "b2b_icon-order-shipped",
+  "b2b_icon-order-state-unknown",
+  "b2b_icon-order-stored",
+  "b2b_icon-order",
+  "b2b_icon-otto-app",
+  "b2b_icon-otto-campus",
+  "b2b_icon-otto-company",
+  "b2b_icon-otto-laptop",
+  "b2b_icon-otto-logo",
+  "b2b_icon-otto-up-points",
+  "b2b_icon-otto-up",
+  "b2b_icon-paper-plane",
+  "b2b_icon-pause",
+  "b2b_icon-payment-credit-card",
+  "b2b_icon-payment-invoice",
+  "b2b_icon-payment-pause",
+  "b2b_icon-payment-plan-protection",
+  "b2b_icon-payment-plan",
+  "b2b_icon-pdf",
+  "b2b_icon-peanut",
+  "b2b_icon-pecan-nut",
+  "b2b_icon-pending",
+  "b2b_icon-person-access",
+  "b2b_icon-person-callcenter",
+  "b2b_icon-person-check",
+  "b2b_icon-person-colleagues",
+  "b2b_icon-person-community",
+  "b2b_icon-person-development",
+  "b2b_icon-person-female",
+  "b2b_icon-person-info",
+  "b2b_icon-person-male",
+  "b2b_icon-person-rating",
+  "b2b_icon-person-support",
+  "b2b_icon-person-switch",
+  "b2b_icon-person-workshop",
+  "b2b_icon-person",
+  "b2b_icon-phone-permission",
+  "b2b_icon-phone",
+  "b2b_icon-pig",
+  "b2b_icon-pin",
+  "b2b_icon-pinch-gesture",
+  "b2b_icon-pinch",
+  "b2b_icon-pistachio",
+  "b2b_icon-plant",
+  "b2b_icon-play-1",
+  "b2b_icon-play",
+  "b2b_icon-plus",
+  "b2b_icon-price-alert",
+  "b2b_icon-price-tag",
+  "b2b_icon-print",
+  "b2b_icon-puzzle",
+  "b2b_icon-qr-code",
+  "b2b_icon-question-hint",
+  "b2b_icon-question",
+  "b2b_icon-rating-empty",
+  "b2b_icon-rating-filled",
+  "b2b_icon-rating-half",
+  "b2b_icon-rating-order",
+  "b2b_icon-rating-payment",
+  "b2b_icon-remote-work",
+  "b2b_icon-repair",
+  "b2b_icon-reply",
+  "b2b_icon-retirement-provision",
+  "b2b_icon-rocket",
+  "b2b_icon-rye",
+  "b2b_icon-sabbatical",
+  "b2b_icon-sale",
+  "b2b_icon-save",
+  "b2b_icon-sea",
+  "b2b_icon-search-enter",
+  "b2b_icon-search",
+  "b2b_icon-seo",
+  "b2b_icon-service-info",
+  "b2b_icon-sesame",
+  "b2b_icon-settings",
+  "b2b_icon-share-ios",
+  "b2b_icon-share",
+  "b2b_icon-sheep",
+  "b2b_icon-shell",
+  "b2b_icon-shirt",
+  "b2b_icon-shopping-cart-euro",
+  "b2b_icon-shopping-cart",
+  "b2b_icon-show",
+  "b2b_icon-smiley-angry",
+  "b2b_icon-smiley-happy",
+  "b2b_icon-smiley-negative",
+  "b2b_icon-smiley-neutral",
+  "b2b_icon-smiley-positive",
+  "b2b_icon-sms-info",
+  "b2b_icon-sneaker",
+  "b2b_icon-sort-ascending",
+  "b2b_icon-sort-descending",
+  "b2b_icon-sort",
+  "b2b_icon-soy",
+  "b2b_icon-spelt",
+  "b2b_icon-stationary",
+  "b2b_icon-studies",
+  "b2b_icon-success",
+  "b2b_icon-sustainable-delivery",
+  "b2b_icon-sustainable-energy-efficient",
+  "b2b_icon-sustainable-production",
+  "b2b_icon-sustainable-recycling",
+  "b2b_icon-sustainable-resource",
+  "b2b_icon-swipe-gesture",
+  "b2b_icon-sync-device",
+  "b2b_icon-t-shirt",
+  "b2b_icon-tablet",
+  "b2b_icon-tableware",
+  "b2b_icon-target-group",
+  "b2b_icon-teddy",
+  "b2b_icon-test-result",
+  "b2b_icon-town",
+  "b2b_icon-trash",
+  "b2b_icon-trend-down",
+  "b2b_icon-trend-up",
+  "b2b_icon-trousers",
+  "b2b_icon-trusted",
+  "b2b_icon-unpin",
+  "b2b_icon-upload",
+  "b2b_icon-user-management",
+  "b2b_icon-vacation",
+  "b2b_icon-variant-content",
+  "b2b_icon-vegan",
+  "b2b_icon-vegetarian",
+  "b2b_icon-viewtoggle-tiles",
+  "b2b_icon-village",
+  "b2b_icon-volume-off",
+  "b2b_icon-volume-on",
+  "b2b_icon-voucher",
+  "b2b_icon-walnut",
+  "b2b_icon-warning",
+  "b2b_icon-warranty",
+  "b2b_icon-washing-machine",
+  "b2b_icon-whatsapp",
+  "b2b_icon-wheat",
+  "b2b_icon-wifi",
+  "b2b_icon-wishlist-active",
+  "b2b_icon-wishlist",
+  "b2b_icon-work-life",
+  "b2b_icon-workshop",
+  "b2b_icon-zoom-in",
+  "b2b_icon-zoom-out"
+];
+
+const iconCss = ":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-75:var(--b2b-size-30);--b2b-size-copy-50:var(--b2b-size-25);--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\")}:host{--b2b-icon-line-height:inherit;--b2b-icon-cursor:default}:host .b2b-icon{display:inline-flex;vertical-align:middle;line-height:var(--b2b-icon-line-height);cursor:var(--b2b-icon-cursor)}:host .b2b-icon.icon-50{width:var(--b2b-size-40);height:var(--b2b-size-40)}:host .b2b-icon.icon-100{width:var(--b2b-size-60);height:var(--b2b-size-60)}:host .b2b-icon.icon-200{width:var(--b2b-size-80);height:var(--b2b-size-80)}:host .b2b-icon.primary{fill:var(--b2b-color-black-100)}:host .b2b-icon.secondary{fill:var(--b2b-color-grey-200)}:host .b2b-icon.inverse{fill:var(--b2b-color-white-100)}:host .b2b-icon.inherit{fill:currentcolor}";
+
+const B2bIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.isIconSupported = () => {
+      return iconTypes.includes(this.icon);
+    };
+    this.icon = undefined;
+    this.color = 'inherit';
+    this.size = '100';
+    this.pathData = null;
+  }
+  connectedCallback() {
+    this.loadIconPathData();
+  }
+  render() {
+    if (!this.isIconSupported())
+      return null;
+    return (index.h(index.Host, null, index.h("div", { class: {
+        'b2b-icon': true,
+        [`icon-${this.size}`]: true,
+        [this.color]: true,
+      }, innerHTML: this.pathData })));
+  }
+  loadIconPathData() {
+    if (!this.isIconSupported()) {
+      console.warn('icon name: ' + this.icon + 'is not supported or might have a typo.');
+      return;
+    }
+    const icon = buildPath(this.icon);
+    {
+      if (iconContent.has(icon)) {
+        this.pathData = iconContent.get(icon);
+      }
+      else {
+        fetchIcon(icon).then(() => (this.pathData = iconContent.get(icon)));
+      }
+    }
+  }
+  static get assetsDirs() { return ["icons"]; }
+  static get watchers() { return {
+    "icon": ["loadIconPathData"]
+  }; }
+};
+B2bIcon.style = iconCss;
+
+exports.b2b_icon = B2bIcon;

package/dist/cjs/b2b-input-group_2.cjs.entry.js

@@ -0,0 +1,235 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f680aee0.js');
+
+const inputGroupCss = ":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-75:var(--b2b-size-30);--b2b-size-copy-50:var(--b2b-size-25);--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\")}:host .b2b-input-wrapper{display:flex;align-items:flex-end;width:100%;flex:0 0 auto}:host .b2b-input-wrapper-hint{font-size:var(--b2b-size-copy-75);line-height:var(--b2b-size-copy-line-height-75);display:block;margin-top:var(--b2b-size-10);color:var(--b2b-color-grey-300)}:host .b2b-input-wrapper-hint--error{color:var(--b2b-color-error-100)}::slotted(*[slot=start]){--b2b-border-radius:var(--b2b-size-border-radius-100) 0 0\n    var(--b2b-size-border-radius-100);--b2b-border-right:0}::slotted(*){--b2b-border-radius:0;--b2b-border-right:0}::slotted(*[slot=end]){--b2b-border-radius:0 var(--b2b-size-border-radius-100)\n    var(--b2b-size-border-radius-100) 0;--b2b-border-right:1px solid var(--b2b-color-grey-200)}";
+
+const B2BInputGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.removeText = () => {
+      const nodes = this.getChildNodes();
+      nodes.forEach(node => {
+        node.error = undefined;
+        node.hint = undefined;
+      });
+    };
+    this.toggleAllError = () => {
+      let nodes = this.getChildNodes();
+      if (this.invalid && !this.disabled) {
+        nodes.forEach(node => {
+          node.invalid = true;
+        });
+      }
+      else {
+        nodes.forEach(node => {
+          node.invalid = false;
+        });
+      }
+    };
+    this.toggleAllDisabled = () => {
+      let nodes = this.getChildNodes();
+      if (this.disabled) {
+        nodes.forEach(node => {
+          node.disabled = true;
+        });
+      }
+      else {
+        nodes.forEach(node => {
+          node.disabled = false;
+        });
+      }
+    };
+    this.getChildNodes = () => {
+      return Array.from(this.host.children);
+    };
+    this.invalid = false;
+    this.disabled = false;
+    this.error = undefined;
+    this.hint = undefined;
+  }
+  invalidChanged() {
+    this.toggleAllError();
+  }
+  disabledChanged() {
+    this.toggleAllDisabled();
+  }
+  connectedCallback() {
+    this.removeText();
+    this.toggleAllError();
+    this.toggleAllDisabled();
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: { 'b2b-input-wrapper': true } }, index.h("slot", { name: "start" }), index.h("slot", null), index.h("slot", { name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (index.h("span", { class: {
+        'b2b-input-wrapper-hint': true,
+        'b2b-input-wrapper-hint--error': this.invalid && !this.disabled,
+      } }, this.invalid && !this.disabled ? this.error : this.hint))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "invalid": ["invalidChanged"],
+    "disabled": ["disabledChanged"]
+  }; }
+};
+B2BInputGroup.style = inputGroupCss;
+
+const inputListCss = ":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-75:var(--b2b-size-30);--b2b-size-copy-50:var(--b2b-size-25);--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\")}:host{width:100%}.b2b-input-list{position:relative;display:flex;flex-direction:column;min-width:7rem;}.b2b-input-list.b2b-input-list__options-on b2b-input{--b2b-border-radius:var(--b2b-size-border-no-radius-bottom)}.b2b-input-list.b2b-group-input-start b2b-input{--b2b-border-radius:inherit;--b2b-border-right:inherit}.b2b-input-list.b2b-group-input-start.b2b-input-list__options-on b2b-input{--b2b-border-radius:var(--b2b-size-border-radius-100) 0 0 0}.b2b-input-list.b2b-group-input-middle b2b-input{--b2b-border-radius:inherit;--b2b-border-right:inherit}.b2b-input-list.b2b-group-input-end b2b-input{--b2b-border-radius:inherit;--b2b-border-right:inherit}.b2b-input-list.b2b-group-input-end.b2b-input-list__options-on b2b-input{--b2b-border-radius:0 var(--b2b-size-border-radius-100) 0 0}.b2b-input-list.b2b-input-list__options-on:focus{outline:none}.b2b-input-list .b2b-input-list__options-container{position:relative}.b2b-input-list .b2b-input-list__options{font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);position:absolute;width:100%;max-height:180px;overflow-y:auto;margin:0;cursor:pointer;background-color:#fff;box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.2);border:solid 1px var(--b2b-color-grey-300);box-sizing:border-box;z-index:10}.b2b-input-list .b2b-input-list__options .b2b-input-list__option{display:block;padding:var(--b2b-size-15) var(--b2b-size-30)}.b2b-input-list .b2b-input-list__options .b2b-input-list__option:hover,.b2b-input-list .b2b-input-list__options .b2b-input-list__option:focus{background-color:var(--b2b-color-table-selected-hover)}.b2b-input-list .b2b-input-list__options .b2b-input-list__option:first-child{padding-top:var(--b2b-size-20)}.b2b-input-list .b2b-input-list__options .b2b-input-list__option:last-child{padding-bottom:var(--b2b-size-20)}.b2b-input-list b2b-icon{--b2b-icon-cursor:pointer}.b2b-input-list .purge-css-include-variables{border-radius:var(--b2b-border-radius);border-right:var(--b2b-border-right);cursor:var(--b2b-icon-cursor)}::slotted(*){font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);position:absolute;width:100%;max-height:180px;overflow-y:auto;margin:0;background-color:var(--b2b-color-white-100);box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.2);border:solid 1px var(--b2b-color-grey-300);box-sizing:border-box;z-index:10}";
+
+const keys = {
+  ARROW_UP: 'ArrowUp',
+  ARROW_DOWN: 'ArrowDown',
+  HOME: 'Home',
+  END: 'End',
+  ESC: 'Escape',
+};
+const InputListComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onOptionSelected = event => {
+      this.setElementOnBlur();
+      this.value = event.detail.selectedOption;
+      this.resetAllOptions();
+    };
+    this.onEscapePress = () => {
+      this.setElementOnBlur();
+      this.hostElement.shadowRoot.querySelector('b2b-input').setFocus();
+      this.resetAllOptions();
+    };
+    // needed to trigger re-render
+    this.handleInput = event => {
+      this.value = event.detail.value;
+      if (this.value === '' || null || undefined) {
+        this.setElementOnBlur();
+      }
+      this.setElementOnFocus();
+    };
+    this.setElementOnFocus = () => {
+      this.isElementFocused = true;
+    };
+    this.setElementOnBlur = () => {
+      this.isElementFocused = false;
+    };
+    this.getGroupOrderClassName = () => {
+      var _a;
+      const parentNodeName = this.hostElement.parentNode.nodeName;
+      if (parentNodeName === 'B2B-INPUT-GROUP') {
+        const slotName = ((_a = this.hostElement.assignedSlot) === null || _a === void 0 ? void 0 : _a.name) || 'middle';
+        return `b2b-group-input-${slotName}`;
+      }
+    };
+    this.getAllOptions = () => {
+      return Array.from(this.hostElement.shadowRoot.querySelectorAll('b2b-input-list-option'));
+    };
+    this.getCurrentOption = () => {
+      const options = this.getAllOptions();
+      let currentOption = options.find(el => el.getAttribute('tabindex') === '0');
+      return currentOption;
+    };
+    this.setCurrentOption = (option) => {
+      const options = this.getAllOptions();
+      options.forEach(element => {
+        element.setAttribute('tabindex', element === option ? '0' : '-1');
+      });
+    };
+    this.resetAllOptions = () => {
+      const options = this.getAllOptions();
+      options.forEach(element => {
+        element.setAttribute('tabindex', '-1');
+      });
+    };
+    this.resetInput = (event) => {
+      if (event.type === 'keydown' && event.key === 'Enter') {
+        this.value = '';
+        /** Manually reset focus after blur to match mousedown behavior */
+        this.hostElement.shadowRoot.querySelector('b2b-input').setFocus();
+      }
+      else if (event.type === 'mousedown') {
+        /** Manual blurring to prevent browser focus stack & component state mismatch */
+        event.preventDefault();
+        event.stopPropagation();
+        this.hostElement.shadowRoot.querySelector('b2b-input').setFocus();
+        this.value = '';
+      }
+      return;
+    };
+    this.label = undefined;
+    this.required = false;
+    this.placeholder = undefined;
+    this.optionsList = [];
+    this.value = null;
+    this.hasOptionList = this.optionsList.length > 0;
+    this.isElementFocused = false;
+  }
+  handleKeyDown(event) {
+    /** we need to be informed when a user changes focus to the clear button
+     * without manually blurring the element, browser focus stack and the component's
+     * isElementFocused do not align, which causes a value change during rerender
+     */
+    if (event.key === 'Tab') {
+      this.setElementOnBlur();
+    }
+    else if (this.isElementFocused &&
+      this.optionsList &&
+      Object.values(keys).includes(event.key)) {
+      const options = this.getAllOptions();
+      const activeOption = this.getCurrentOption();
+      let index = options.indexOf(activeOption);
+      event.preventDefault();
+      switch (event.key) {
+        case keys.ARROW_UP:
+          index--;
+          break;
+        case keys.ARROW_DOWN:
+          index++;
+          break;
+        case keys.HOME:
+          index = 0;
+          break;
+        case keys.END:
+          index = options.length - 1;
+          break;
+        case keys.ESC:
+          this.onEscapePress();
+          return;
+        default:
+          return;
+      }
+      if (index < 0) {
+        index = options.length - 1;
+      }
+      if (index > options.length - 1) {
+        index = 0;
+      }
+      this.setCurrentOption(options[index]);
+      options[index].focus();
+    }
+  }
+  watchPropHandler(newList) {
+    this.hasOptionList = newList.length > 0;
+  }
+  /* Notes:
+    Needs onFocusin and onFocusout in the Host element so that the click would
+    be registered, otherwise, if placed in the input, it looses focus
+    on the input element and won't register the selection.
+  */
+  render() {
+    const groupOrderClass = this.getGroupOrderClassName() || '';
+    return (index.h(index.Host, { onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, index.h("div", { class: {
+        'b2b-input-list': true,
+        'b2b-input-list__options-on': this.hasOptionList &&
+          this.isElementFocused &&
+          Boolean(this.value),
+        [groupOrderClass]: true,
+      } }, index.h("b2b-input", { type: "text", label: this.label, value: this.value, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, Boolean(this.value) && (index.h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (index.h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (index.h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (index.h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (index.h("slot", null)))) : null)));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "optionsList": ["watchPropHandler"]
+  }; }
+};
+InputListComponent.style = inputListCss;
+
+exports.b2b_input_group = B2BInputGroup;
+exports.b2b_input_list = InputListComponent;