@otto-de/b2b-core-components 1.0.0

package/dist/scripts/stencil/generate-vue-web-types.js

@@ -0,0 +1,88 @@
+/*
+This script is used by Stencil to output from component docs to the WebTypes
+format used by IntelliJ IDEs, to help with code completion and syntax.
+For more information you can see https://github.com/JetBrains/web-types
+*/
+import fs from 'fs';
+const formatValues = propValues => propValues
+  .split('|')
+  .map(s => s.trim())
+  .join(', ');
+const generateVueWebTypes = (docsData) => {
+  const components = [];
+  docsData.components.map((component) => {
+    const componentName = component.tag;
+    const attributes = [];
+    const slots = [];
+    const events = [];
+    const docUrl = 'https://internal.otto.market/design-system/?path=/story/overview--page';
+    component.props.map((prop) => {
+      const name = prop.attr || prop.name;
+      const valuesString = `\r\nValues: ${formatValues(prop.type)}`;
+      attributes.push({
+        name: name,
+        description: prop.docs + `${valuesString}`,
+        required: prop.required,
+        default: prop.default,
+        value: {
+          kind: 'expression',
+          type: prop.type,
+        },
+      });
+    });
+    component.events.map((event) => {
+      let eventName = event.event;
+      if (eventName.toLowerCase().startsWith(componentName.toLowerCase())) {
+        eventName = 'on' + eventName.substring(componentName.length);
+      }
+      events.push({
+        name: eventName,
+        description: event.docs,
+        arguments: [
+          {
+            name: 'detail',
+            type: event.detail,
+          },
+        ],
+      });
+    });
+    component.slots.map((slot) => {
+      slots.push({
+        name: slot.name === '' ? 'default' : slot.name,
+        description: slot.docs,
+      });
+    });
+    components.push({
+      'name': componentName,
+      'doc-url': docUrl,
+      'description': component.docs,
+      'source': {
+        module: '@otto-de/b2b-core-components' +
+          component.filePath
+            .replace('./src/', '/dist/types/')
+            .replace('.tsx', '.d.ts'),
+        symbol: componentName.substring(3),
+      },
+      attributes,
+      slots,
+      events,
+    });
+  });
+  /* tags is deprecated in favour of elements. Unfortunately whe using
+  elements Jetbrains does ot suggest value for props */
+  const webTypes = {
+    '$schema': 'http://json.schemastore.org/web-types',
+    'framework': 'vue',
+    'name': '@otto-de/b2b-core-components',
+    'version': require('../../package.json').version,
+    'js-types-syntax': 'typescript',
+    'description-markup': 'markdown',
+    'contributions': {
+      html: {
+        tags: components,
+      },
+    },
+  };
+  fs.writeFileSync('./dist/web-types.json', JSON.stringify(webTypes, null, 2));
+};
+export default generateVueWebTypes;

package/dist/types/components/alert/alert.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class AlertComponent {
+  /** The type of alert. Per default it is info. */
+  type: 'info' | 'success' | 'warning' | 'error';
+  /** The size of the alert. Per default it is large. If set to small, the alert will only have an icon. */
+  size: 'large' | 'small';
+  /** Whether the alert is currently open. Set to true to display the alert. */
+  opened: boolean;
+  /** Whether or not the alert has a close button. Per default it is true. Note that errors and small alerts cannot be closed. */
+  hasCloseButton: boolean;
+  /** Whether or not you want to use a custom icon. Per default, it is false. */
+  customIcon: boolean;
+  /** Emits whenever the alert is closed. */
+  b2bClose: EventEmitter<void>;
+  openedChanged(newValue: boolean): void;
+  private chooseIcon;
+  private close;
+  private canClose;
+  private canCustomizeIcon;
+  render(): any;
+}

package/dist/types/components/alert/alert.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Info: any;
+export declare const story020Success: any;
+export declare const story030Warning: any;
+export declare const story040Error: any;
+export declare const story050Small: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/anchor/anchor.d.ts

@@ -0,0 +1,12 @@
+export declare class AnchorComponent {
+  /** The URL or URL fragment the anchor points to. This is required. */
+  href: string;
+  /** If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file
+   * defaults to the URL string, but can be changed by the user. */
+  download: string;
+  /** The target the URL will be opened into. The default is self. */
+  target: 'self' | 'blank' | 'parent' | 'top';
+  /** The size of the link. Per default, it is inherited from the parent element. If specified to 100, the font size is 14px. */
+  size: 'inherit' | '100';
+  render(): any;
+}

package/dist/types/components/anchor/anchor.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Size100: any;
+export declare const story030TargetBlank: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/button/button.d.ts

@@ -0,0 +1,34 @@
+export declare class ButtonComponent {
+  hostElement: HTMLB2bButtonElement;
+  /** The button variant. If not specified, the button will be the secondary variant. */
+  variant: 'primary' | 'secondary';
+  /** The button type. Matches native HTML types. The default type is 'button'. */
+  type: 'button' | 'submit' | 'reset';
+  /** The size of the button, 100 is the default state */
+  size: '100' | '50';
+  /** Whether the button is disabled. */
+  disabled: boolean;
+  /** Whether the button is currently loading. Set to true to hide text and display loading spinner instead */
+  loading: boolean;
+  /** Whether the button is currently active. Set to true when using the button to signify a permanent active state */
+  active: boolean;
+  /** An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files  */
+  href?: string;
+  /** The target of the button if it should behave like an anchor. Per default it is self. */
+  target?: 'self' | 'blank';
+  /** If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file
+   * defaults to the URL string, but can be changed by the user. */
+  download?: string;
+  private focusableElement;
+  /** Manually set focus to button element */
+  setFocus(): Promise<void>;
+  /**
+   * Prevent clicks from being emitted from the host
+   * when the component is `disabled`. (Taken from Telecom)
+   */
+  handleHostClick(event: Event): void;
+  private canLoad;
+  private checkIcon;
+  protected spinner(): any;
+  render(): any;
+}

package/dist/types/components/button/button.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Secondary: any;
+export declare const story020Primary: any;
+export declare const story030Loading: any;
+export declare const story040IconStart: any;
+export declare const story050IconEnd: any;
+export declare const story055IconStartPali: any;
+export declare const story060IconSearch: any;
+export declare const story070Disabled: any;
+export declare const story080Anchor: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/checkbox/checkbox.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { CheckboxEventDetail } from '../../utils/interfaces/form.interface';
+export declare class CheckboxComponent {
+  hostElement: HTMLB2bCheckboxElement;
+  /** The checkbox label. This attribute is required. */
+  label: string;
+  /** Adds an asterisk at the end of the label to signify that the field is required. */
+  required: boolean;
+  /** Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked. */
+  checked: boolean;
+  /** Whether or not the checkbox is disabled. The default value is false. */
+  disabled: boolean;
+  /** The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles. */
+  error?: string;
+  /** The hint text belonging to the checkbox. It is undefined by default. If an error is specified, it will be shown instead of the hint. */
+  hint?: string;
+  /** The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name. */
+  name?: string;
+  /** The value of the checkbox. This is not the same as the checked property. It is only used when the checkbox participates in a checkbox group */
+  value?: any;
+  /** Whether or not the checkbox is rendered with error styles. Defaults to false. */
+  invalid?: boolean;
+  /** Emits whenever the checkbox receives focus. */
+  b2bFocus: EventEmitter<FocusEvent>;
+  /** Emits whenever the checkbox loses focus. */
+  b2bBlur: EventEmitter<FocusEvent>;
+  /** Emits the checkbox value when it's checked status changes. */
+  b2bChange: EventEmitter<CheckboxEventDetail>;
+  connectedCallback(): void;
+  private handleFormData;
+  private emitDetail;
+  private onFocus;
+  private onBlur;
+  private onClick;
+  render(): any;
+}

package/dist/types/components/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Checked: any;
+export declare const story030Hint: any;
+export declare const story040Error: any;
+export declare const story050Disabled: any;
+export declare const story060Required: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { CheckboxEventDetail } from '../../utils/interfaces/form.interface';
+export declare class CheckboxGroupComponent {
+  host: HTMLB2bCheckboxGroupElement;
+  /** The label for the checkbox group. This is optional. */
+  label: string;
+  /** Adds an asterisk at the end of the label to signify that the field is required. */
+  required: boolean;
+  /** Whether or not the checkbox group as a whole is disabled. Default state is false. */
+  disabled: boolean;
+  /** Whether or not the checkbox group as a whole is invalid. Set to true to display a group error. */
+  invalid: boolean;
+  /** The alignment of the checkbox group. Per default it is vertical */
+  alignment: 'vertical' | 'horizontal';
+  /** The checkbox group hint text. */
+  hint?: string;
+  /** The checkbox group error message. Is displayed when invalid is set to true. */
+  error?: string;
+  /** Emits whenever a checkbox within the group is checked or unchecked. */
+  b2bGroupChange: EventEmitter<CheckboxEventDetail>;
+  handleCheckboxChange(ev: CustomEvent<CheckboxEventDetail>): void;
+  protected disabledChanged(): void;
+  protected invalidChanged(): void;
+  private getChildNodes;
+  private toggleAllDisabled;
+  private toggleAllError;
+  private removeChildText;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/checkbox-group/checkbox-group.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Hint: any;
+export declare const story030Error: any;
+export declare const story040Disabled: any;
+export declare const story050Horizontal: any;
+export declare const story060Required: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/dropdown/dropdown.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class DropdownComponent {
+  hostElement: HTMLB2bDropdownElement;
+  /** The dropdown label. */
+  label: string;
+  /** Adds an asterisk at the end of the label to signify that the field is required. */
+  required: boolean;
+  /** The name of the select. This is used to associate the label to the dropdown element. It is important for accessibility. */
+  name?: string;
+  /** Whether the select as a whole is disabled. Per default it is false. */
+  disabled: boolean;
+  /** Whether the select is currently invalid. Per default it is false. */
+  invalid: boolean;
+  /** An optional hint text for the dropdown. */
+  hint?: string;
+  /** An optional error message for the dropdown. This will only appear if invalid is set to true. */
+  error?: string;
+  /** Emits the option whenever a new option is chosen. */
+  b2bChange: EventEmitter<string>;
+  /** Emits whenever the dropdown receives focus. */
+  b2bFocus: EventEmitter<FocusEvent>;
+  /** Emits whenever the dropdown loses focus. */
+  b2bBlur: EventEmitter<FocusEvent>;
+  private onSelect;
+  private onFocus;
+  private onBlur;
+  private getSelectElement;
+  connectedCallback(): void;
+  private handleFormData;
+  componentDidRender(): void;
+  render(): any;
+}

package/dist/types/components/dropdown/dropdown.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Disabled: any;
+export declare const story030Error: any;
+export declare const story040Required: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/grid/column.d.ts

@@ -0,0 +1,9 @@
+export declare class B2bGridColumnComponent {
+  hostElement: HTMLB2bGridColElement;
+  /** How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row. */
+  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  /** The alignment of text placed inside of a column. Note that this will apply to all children. */
+  textAlign: 'left' | 'center' | 'right';
+  private calculateGrowDimension;
+  render(): any;
+}

package/dist/types/components/grid/grid.d.ts

@@ -0,0 +1,6 @@
+export declare class B2bGridComponent {
+  hostElement: HTMLB2bGridElement;
+  /** The inner padding of the grid container measured in px. */
+  margin: number;
+  render(): any;
+}

package/dist/types/components/grid/grid.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Grid: any;
+export declare const story020AlignItems: any;
+export declare const story030TextAlign: any;
+export declare const story040Justify: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/grid/row.d.ts

@@ -0,0 +1,12 @@
+export declare class B2bGridRowComponent {
+  hostElement: HTMLB2bGridRowElement;
+  /** The spacing in between individual columns in px. The higher the gap, the smaller the columns will be. */
+  columnGap: number;
+  /** The spacing between individual rows in px. */
+  rowGap: number;
+  /** Vertical alignment of columns. This requires the row to have a defined height. */
+  alignItems: 'stretch' | 'flex-start' | 'center' | 'flex-end';
+  /** Horizontal alignment of columns. */
+  justify: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+  render(): any;
+}

package/dist/types/components/headline/headline.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Headline component to render hading tags content.
+ * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-46
+ */
+export declare class HeadlineComponent {
+  /** Each variant has a different hierarchical order, where 1 is the highest level. 400 will render to `<h1>`, 200 to `<h2>` and 100 to `<h3>` */
+  size: '400' | '200' | '100';
+  /** The alignment of the headline. */
+  align: 'left' | 'right' | 'center';
+  /** Whether the headline should have a margin. Per default, margins are enabled. */
+  noMargin: boolean;
+  render(): any;
+}

package/dist/types/components/headline/headline.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story030Size200: any;
+export declare const story040Size100: any;
+export declare const story050Center: any;
+export declare const story060Right: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/icon/icon.d.ts

@@ -0,0 +1,14 @@
+import { IconName } from './types';
+export declare class B2bIcon {
+  /** The name of the icon */
+  icon: IconName;
+  /** The color of the icon */
+  color: 'primary' | 'secondary' | 'inverse' | 'inherit';
+  /** The size of the icon */
+  size: '50' | '100' | '200';
+  private pathData;
+  connectedCallback(): void;
+  private isIconSupported;
+  render(): any;
+  private loadIconPathData;
+}

package/dist/types/components/icon/icon.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/web-components';
+import './icon.stories.scss';
+export declare const story010Primary: any;
+export declare const story020Secondary: any;
+export declare const story030Inverse: any;
+export declare const story035Inherit: Story;
+export declare const story040Size50: any;
+export declare const story050Size100: any;
+export declare const story060Size200: any;
+export declare const story070AllIcons: Story;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/icon/request.d.ts

@@ -0,0 +1,3 @@
+export declare const iconContent: Map<string, string>;
+export declare const fetchIcon: (icon: string) => Promise<any>;
+export declare const buildPath: (icon: string) => string;

package/dist/types/components/icon/types.d.ts

@@ -0,0 +1,2 @@
+export declare const iconTypes: readonly ["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"];
+export type IconName = typeof iconTypes[number];

package/dist/types/components/input/input.d.ts

@@ -0,0 +1,50 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { InputChangeEvent } from '../../utils/interfaces/form.interface';
+/** Input component
+ * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
+ */
+export declare class InputComponent {
+  hostElement: HTMLB2bInputElement;
+  /** The input label. */
+  label: string;
+  /** Adds an asterisk at the end of the label to signify that the field is required. */
+  required: boolean;
+  /** The type of the input. All native HTML types except date or month are supported. Default is text. */
+  type: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url';
+  /** Whether or not the input is disabled. Default is false. */
+  disabled: boolean;
+  /** Whether the input is currently invalid. If true, the input is rendered with error styles. Per default it is false. */
+  invalid: boolean;
+  /** A placeholder for the input field. Per default, it is null. */
+  placeholder: string;
+  /** The default value of the input field. If defined, it will prefill the input. */
+  value: string;
+  /** The name of the input. Use it to group label and input together and make it more accessible. */
+  name?: string;
+  /** The hint text that appears underneath the input field. */
+  hint?: string;
+  /** The error message that is shown if the input is invalid. */
+  error?: string;
+  /** When setting the autofocus to true, the input element will be focused when the page loads. */
+  autofocus: boolean;
+  /** Emits whenever the input receives focus. */
+  b2bFocus: EventEmitter<FocusEvent>;
+  /** Emits whenever the input loses focus. */
+  b2bBlur: EventEmitter<FocusEvent>;
+  /** Emits whenever the input value changes. */
+  b2bInput: EventEmitter<InputChangeEvent>;
+  hasFocus: boolean;
+  hasTextPrefix: boolean;
+  hasTextSuffix: boolean;
+  private focusableElement;
+  /** Manually set focus to the element */
+  setFocus(): Promise<void>;
+  connectedCallback(): void;
+  private handleFormData;
+  private onFocus;
+  private onBlur;
+  private onInput;
+  private getSlottedText;
+  private hasText;
+  render(): any;
+}

package/dist/types/components/input/input.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Placeholder: any;
+export declare const story030Disabled: any;
+export declare const story040Hint: any;
+export declare const story050Error: any;
+export declare const story055Required: any;
+export declare const story060IconEnd: any;
+export declare const story080Prefix: any;
+export declare const story090PrefixSuffix: any;
+export declare const story070AllArgs: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/input-group/input-group.d.ts

@@ -0,0 +1,19 @@
+export declare class B2BInputGroup {
+  host: HTMLB2bInputGroupElement;
+  /** Whether or not the input group is invalid and should be rendered with error styles as a whole. Per default it is false. */
+  invalid: boolean;
+  /** Whether or not the input group is disabled as a whole. Per default it is false. */
+  disabled: boolean;
+  /** A group error text. It will only show if invalid is set to true. */
+  error?: string;
+  /** The hint text that appears underneath the input group. */
+  hint?: string;
+  protected invalidChanged(): void;
+  protected disabledChanged(): void;
+  connectedCallback(): void;
+  private removeText;
+  private toggleAllError;
+  private toggleAllDisabled;
+  private getChildNodes;
+  render(): any;
+}

package/dist/types/components/input-group/input-group.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Default: any;
+export declare const story020Disabled: any;
+export declare const story030Error: any;
+export declare const story040Complex: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/input-label/input-label.d.ts

@@ -0,0 +1,8 @@
+export declare class InputLabelComponent {
+  hostElement: HTMLB2bInputLabelElement;
+  /** Adds an asterisk at the end of the label to signify that the field is required. */
+  required: boolean;
+  /** Will render the label with a disabled style. The default value is false. */
+  disabled: boolean;
+  render(): any;
+}

package/dist/types/components/input-list/input-list-option.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { OptionSelectedEventDetail } from '../../utils/interfaces/form.interface';
+export declare class InputListOptionComponent {
+  /** The option name. */
+  option: string;
+  /** Emits the option as a string whenever an option is selected. */
+  b2bOptionSelected: EventEmitter<OptionSelectedEventDetail>;
+  handleKeyDown(event: KeyboardEvent): void;
+  private handleClick;
+  render(): any;
+}

package/dist/types/components/input-list/input-list.d.ts

@@ -0,0 +1,29 @@
+export declare class InputListComponent {
+  hostElement: HTMLB2bInputListElement;
+  /** The input label. */
+  label: string;
+  /** Adds an asterisk at the end of the label to signify that the field is required. */
+  required: boolean;
+  /** The placeholder shown in the input field. */
+  placeholder: string;
+  /** The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire. */
+  optionsList: string[];
+  /** The default value of the input field. If defined, it will prefill the input. */
+  value: string;
+  hasOptionList: boolean;
+  isElementFocused: boolean;
+  private onOptionSelected;
+  private onEscapePress;
+  private handleInput;
+  handleKeyDown(event: KeyboardEvent): void;
+  watchPropHandler(newList: string[]): void;
+  private setElementOnFocus;
+  private setElementOnBlur;
+  private getGroupOrderClassName;
+  private getAllOptions;
+  private getCurrentOption;
+  private setCurrentOption;
+  private resetAllOptions;
+  private resetInput;
+  render(): any;
+}

package/dist/types/components/input-list/input-list.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010InputList: any;
+export declare const story020InputListFocused: any;
+export declare const story030CustomList: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;

package/dist/types/components/label/label.d.ts

@@ -0,0 +1,5 @@
+export declare class LabelComponent {
+  /** The type of the label. Per default it is neutral. */
+  type: 'neutral' | 'info' | 'success' | 'warning' | 'error';
+  render(): any;
+}

package/dist/types/components/label/label.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/web-components';
+export declare const story010Neutral: any;
+export declare const story020Info: any;
+export declare const story030Success: any;
+export declare const story040Warning: any;
+export declare const story050Error: any;
+declare const _default: Meta<import("@storybook/web-components").Args>;
+export default _default;