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

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

@@ -4,51 +4,51 @@ import { InputChangeEvent } from '../../utils/interfaces/form.interface';
  * 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;
-  /** @internal Whether the parent input group is disabled. Per default, it is false. */
-  groupDisabled: 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>;
-  /** Simulate the native behavior of type="search" to emit an empty string when the input is cleared */
-  clearInput(): Promise<void>;
-  connectedCallback(): void;
-  private handleFormData;
-  private onFocus;
-  private onBlur;
-  private onInput;
-  private getSlottedText;
-  private hasText;
-  render(): any;
+    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;
+    /** @internal Whether the parent input group is disabled. Per default, it is false. */
+    groupDisabled: 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>;
+    /** Simulate the native behavior of type="search" to emit an empty string when the input is cleared */
+    clearInput(): Promise<void>;
+    connectedCallback(): void;
+    private handleFormData;
+    private onFocus;
+    private onBlur;
+    private onInput;
+    private getSlottedText;
+    private hasText;
+    render(): any;
 }

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

@@ -1,19 +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;
+    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-label/input-label.d.ts

@@ -1,8 +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;
+    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

@@ -1,11 +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;
+    /** 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

@@ -1,37 +1,37 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { InputClear } from '../../utils/interfaces/form.interface';
 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;
-  /** Whether or not the input is disabled. Default is false. */
-  disabled: boolean;
-  /** @internal Whether the parent input group is disabled. Per default, it is false. */
-  groupDisabled: boolean;
-  /** Emits when the user clicks the clear button. */
-  b2bClear: EventEmitter<InputClear>;
-  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;
+    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;
+    /** Whether or not the input is disabled. Default is false. */
+    disabled: boolean;
+    /** @internal Whether the parent input group is disabled. Per default, it is false. */
+    groupDisabled: boolean;
+    /** Emits when the user clicks the clear button. */
+    b2bClear: EventEmitter<InputClear>;
+    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

@@ -4,5 +4,6 @@ export default meta;
 type Story = StoryObj;
 export declare const InputList: Story;
 export declare const Focused: Story;
-export declare const Disabled: Story;
 export declare const CustomList: Story;
+export declare const DisabledWithoutSelectedOption: Story;
+export declare const disabledWithSelectedOption: Story;

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

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

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

@@ -4,41 +4,41 @@ import { BeforeCloseEventDetail } from '../../utils/interfaces/status.interface'
  * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-53
  */
 export declare class ModalComponent {
-  hostElement: HTMLB2bModalElement;
-  /** The title for the modal. This is required. */
-  heading: string;
-  /** Whether the modal is shown or not. Default is false */
-  opened: boolean;
-  /** A boolean that indicates whether the modal can be dismissed by clicking
-   in the backdrop outside the modal. */
-  backdropDismiss: boolean;
-  /** A boolean to indicate whether the modal can be dismissed by pressing
-   the escape key on the keyboard */
-  escDismiss: boolean;
-  /** The size of the modal. If not specified, will assume the default size */
-  variant: 'default' | 'large';
-  /** This even will be triggered when the modal is closed */
-  b2bClose: EventEmitter<void>;
-  /** This even will be triggered before the modal is closed */
-  b2bBeforeClose: EventEmitter<BeforeCloseEventDetail>;
-  iconHover: boolean;
-  isOpen: boolean;
-  private closeButton;
-  private focusableElements;
-  private toggleIconHover;
-  private emitBeforeClose;
-  handleKeypress(event: KeyboardEvent): void;
-  private handleBackdropDismiss;
-  private handleClickDismiss;
-  openedChanged(newValue: boolean): void;
-  private handleTopFocus;
-  private handleBottomFocus;
-  private attemptFocus;
-  private open;
-  private close;
-  private getFirstFocusableElement;
-  private getLastFocusableElement;
-  componentDidLoad(): void;
-  componentDidRender(): void;
-  render(): any;
+    hostElement: HTMLB2bModalElement;
+    /** The title for the modal. This is required. */
+    heading: string;
+    /** Whether the modal is shown or not. Default is false */
+    opened: boolean;
+    /** A boolean that indicates whether the modal can be dismissed by clicking
+     in the backdrop outside the modal. */
+    backdropDismiss: boolean;
+    /** A boolean to indicate whether the modal can be dismissed by pressing
+     the escape key on the keyboard */
+    escDismiss: boolean;
+    /** The size of the modal. If not specified, will assume the default size */
+    variant: 'default' | 'large';
+    /** This even will be triggered when the modal is closed */
+    b2bClose: EventEmitter<void>;
+    /** This even will be triggered before the modal is closed */
+    b2bBeforeClose: EventEmitter<BeforeCloseEventDetail>;
+    iconHover: boolean;
+    isOpen: boolean;
+    private closeButton;
+    private focusableElements;
+    private toggleIconHover;
+    private emitBeforeClose;
+    handleKeypress(event: KeyboardEvent): void;
+    private handleBackdropDismiss;
+    private handleClickDismiss;
+    openedChanged(newValue: boolean): void;
+    private handleTopFocus;
+    private handleBottomFocus;
+    private attemptFocus;
+    private open;
+    private close;
+    private getFirstFocusableElement;
+    private getLastFocusableElement;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    render(): any;
 }

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

@@ -0,0 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class B2bMultiSelectDropdown {
+    hostElement: HTMLB2bMultiselectDropdownElement;
+    /** The input label. */
+    label: string;
+    /** 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 placeholder shown in the search bar. */
+    searchPlaceholder: string;
+    /** The string displayed as the select all label. */
+    selectAllLabel: string;
+    /** The maximum amount of chips visible. Adjust this depending on available size of the dropdown. */
+    maxOptionsVisible: number;
+    /** Emits when there is a change to the currently selected values. */
+    b2bChange: EventEmitter<string[]>;
+    selectedValues: any[];
+    currentList: string[];
+    value: string;
+    isElementFocused: boolean;
+    hasOptionList: boolean;
+    /** Needed to trigger a re-render for async data */
+    watchPropHandler(newList: string[]): void;
+    handleSelectedValuesChange(): void;
+    componentDidUpdate(): void;
+    private handleInput;
+    private getOptions;
+    private renderChips;
+    private handleOverflowOptionsClick;
+    private handleSelectedChange;
+    private handleChipClose;
+    private updateOption;
+    private updateAllOptions;
+    private setElementOnFocus;
+    private setElementOnBlur;
+    private resetFocus;
+    private handleMouseDown;
+    private handleKeyDown;
+    private handleSelectAll;
+    private updateSelectAll;
+    render(): any;
+}

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

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+type Story = StoryObj;
+declare const meta: Meta;
+export default meta;
+export declare const Default: Story;

package/dist/types/components/multiselect-dropdown/multiselect-option/multiselect-option.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { MultiSelectOptionEventDetail } from '../../../utils/interfaces/form.interface';
+export declare class B2bMultiSelectOption {
+    /** The label of the option. */
+    option: string;
+    /** Emits the option as a string whenever an option is selected. */
+    b2bOptionSelected: EventEmitter<MultiSelectOptionEventDetail>;
+    /** Whether the option is currently selected. */
+    selected: boolean;
+    /** @internal Whether the checkbox is in indeterminate state. */
+    indeterminate?: boolean;
+    private handleCheckboxChange;
+    render(): any;
+}

package/dist/types/components/pagination/pagination.constants.d.ts

@@ -1,5 +1,5 @@
 export declare enum PaginationConstants {
-  DOTS = "...",
-  BACK = "\u2039",
-  NEXT = "Weiter \u203A"
+    DOTS = "...",
+    BACK = "\u2039",
+    NEXT = "Weiter \u203A"
 }

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

@@ -1,30 +1,30 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { PageChangeEventDetail } from '../../utils/interfaces/interaction.interface';
 export declare class PaginationComponent {
-  /** The total number of pages to calculate the length of pagination component */
-  totalPages: number;
-  /** Use this property to set programmatically the active page */
-  activePage: number;
-  /** (optional) translation to 'Go to next page'  */
-  ariaLabelNextPage: string;
-  /** (optional) translation to 'Go to previous page'  */
-  ariaLabelPreviousPage: string;
-  /** Will emit every time a page changes, by clicking back, next or any specific page. \
-   * Emits a PageChangeEventDetail that includes lastSelectedPage, currentPage
-   * and direction. Direction is only when clicking back or next.
-   **/
-  b2bPageChange: EventEmitter<PageChangeEventDetail>;
-  private firstPageIndex;
-  private navItems;
-  connectedCallback(): void;
-  onTotalPagesChange(newValue: number): void;
-  onActivePageChange(newValue: number): void;
-  private selectNextPage;
-  private selectPreviousPage;
-  private setSelectedPage;
-  private updateState;
-  private getNavItems;
-  private getArrayFrom;
-  private getItemClass;
-  render(): any;
+    /** The total number of pages to calculate the length of pagination component */
+    totalPages: number;
+    /** Use this property to set programmatically the active page */
+    activePage: number;
+    /** (optional) translation to 'Go to next page'  */
+    ariaLabelNextPage: string;
+    /** (optional) translation to 'Go to previous page'  */
+    ariaLabelPreviousPage: string;
+    /** Will emit every time a page changes, by clicking back, next or any specific page. \
+     * Emits a PageChangeEventDetail that includes lastSelectedPage, currentPage
+     * and direction. Direction is only when clicking back or next.
+     **/
+    b2bPageChange: EventEmitter<PageChangeEventDetail>;
+    private firstPageIndex;
+    private navItems;
+    connectedCallback(): void;
+    onTotalPagesChange(newValue: number): void;
+    onActivePageChange(newValue: number): void;
+    private selectNextPage;
+    private selectPreviousPage;
+    private setSelectedPage;
+    private updateState;
+    private getNavItems;
+    private getArrayFrom;
+    private getItemClass;
+    render(): any;
 }

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

@@ -3,11 +3,11 @@
  * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-45
  */
 export declare class ParagraphComponent {
-  /** The weight of the text. */
-  weight: 'bold' | 'normal';
-  /** The size of the text. */
-  size: '50' | '100';
-  /** The alignment of the text. */
-  align: 'left' | 'right' | 'center';
-  render(): any;
+    /** The weight of the text. */
+    weight: 'bold' | 'normal';
+    /** The size of the text. */
+    size: '50' | '100';
+    /** The alignment of the text. */
+    align: 'left' | 'right' | 'center';
+    render(): any;
 }

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,13 @@
+export declare class ProgressBarComponent {
+    hostElement: HTMLB2bProgressBarElement;
+    /** The percentage of progress from 0 to 100. */
+    progress: number;
+    /** The label of the progress bar. */
+    label?: string;
+    /** Whether the label should be displayed below or on the side of the progress bar. */
+    labelType?: 'below' | 'side';
+    /** Whether the label should be displayed on the right or left of the progress bar. */
+    labelPosition?: 'left' | 'right';
+    private getProgress;
+    render(): any;
+}

package/dist/types/components/progress-bar/progress-bar.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const story010Default: Story;
+export declare const story020LabelOnBottomLeft: Story;
+export declare const story030LabelOnBottomRight: Story;
+export declare const story040LabelOnLeftSide: Story;
+export declare const story050LabelOnRightSide: Story;

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

@@ -1,37 +1,37 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { RadioEventDetail } from '../../utils/interfaces/form.interface';
 export declare class B2bRadioButtonComponent {
-  host: HTMLB2bRadioButtonElement;
-  /** The label of the radio button. This is required */
-  label: string;
-  /** Adds an asterisk at the end of the label to signify that the field is required. */
-  required: boolean;
-  /** The name of the radio button. Use it to group radio buttons together and assign the label to the input element for better accessibility. This is required. */
-  name: string;
-  /** Whether or not the radio button is currently checked. Per default it is false. */
-  checked: boolean;
-  /** Whether or not the radio button is currently disabled. Per default it is false. */
-  disabled: boolean;
-  /** Whether or not the radio button should be rendered with error styles. Per default it is false. */
-  invalid: boolean;
-  /** The value of the radio button. This will be emitted when the radio button is clicked. */
-  value?: string;
-  /** A hint to give additional information on the radio button. */
-  hint?: string;
-  /** An error text. It will only show if invalid is set to true.  */
-  error?: string;
-  /** Emits whenever the radio button receives focus. */
-  b2bFocus: EventEmitter<FocusEvent>;
-  /** Emits whenever the radio button loses focus. */
-  b2bBlur: EventEmitter<FocusEvent>;
-  /** Emitted whenever the radio button is clicked.  */
-  b2bChange: EventEmitter<RadioEventDetail>;
-  connectedCallback(): void;
-  private handleFormData;
-  private onClick;
-  private uncheckSiblings;
-  private getSiblingRadios;
-  private onBlur;
-  private onFocus;
-  render(): any;
+    host: HTMLB2bRadioButtonElement;
+    /** The label of the radio button. This is required */
+    label: string;
+    /** Adds an asterisk at the end of the label to signify that the field is required. */
+    required: boolean;
+    /** The name of the radio button. Use it to group radio buttons together and assign the label to the input element for better accessibility. This is required. */
+    name: string;
+    /** Whether or not the radio button is currently checked. Per default it is false. */
+    checked: boolean;
+    /** Whether or not the radio button is currently disabled. Per default it is false. */
+    disabled: boolean;
+    /** Whether or not the radio button should be rendered with error styles. Per default it is false. */
+    invalid: boolean;
+    /** The value of the radio button. This will be emitted when the radio button is clicked. */
+    value?: string;
+    /** A hint to give additional information on the radio button. */
+    hint?: string;
+    /** An error text. It will only show if invalid is set to true.  */
+    error?: string;
+    /** Emits whenever the radio button receives focus. */
+    b2bFocus: EventEmitter<FocusEvent>;
+    /** Emits whenever the radio button loses focus. */
+    b2bBlur: EventEmitter<FocusEvent>;
+    /** Emitted whenever the radio button is clicked.  */
+    b2bChange: EventEmitter<RadioEventDetail>;
+    connectedCallback(): void;
+    private handleFormData;
+    private onClick;
+    private uncheckSiblings;
+    private getSiblingRadios;
+    private onBlur;
+    private onFocus;
+    render(): any;
 }