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

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

@@ -4,43 +4,43 @@ import { InputChangeEvent } from '../../utils/interfaces/form.interface';
  * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96
  */
 export declare class B2BTextareaComponent {
-  hostElement: HTMLB2bTextareaElement;
-  /** The textarea label. This is optional. */
-  label: string;
-  /** Adds an asterisk at the end of the label to signify that the field is required. */
-  required: boolean;
-  /** The textarea placeholder. It is optional and undefined by default. */
-  placeholder?: string;
-  /** Whether or not the textarea is disabled. Per default it is false.  */
-  disabled: boolean;
-  /** Whether or not the textarea should be displayed with error styles. Per default it is false. */
-  invalid: boolean;
-  /** Whether or not the textarea should be automatically focused on page load. Per default it is false. */
-  autofocus: boolean;
-  /** If and how the textarea is resizable. Per default it is resizable in both directions. */
-  resize?: 'unset' | 'none' | 'vertical' | 'horizontal';
-  /** An optional hint for the textarea. Per default it is undefined. */
-  hint?: string;
-  /** An optional error message that is displayed when the textarea is invalid. Per default it is undefined. */
-  error?: string;
-  /** The value of the textarea. Per default it is null. */
-  value: string;
-  /** The name of the textarea. This is used to programmatically group it into a form. */
-  name?: string;
-  /** The maximum input length. Characters entered after that will not be appended to the input value. */
-  maxLength?: number;
-  /** The height of the text area */
-  height?: string;
-  /** Emits whenever the textarea receives focus. */
-  b2bFocus: EventEmitter<FocusEvent>;
-  /** Emits whenever the textarea loses focus. */
-  b2bBlur: EventEmitter<FocusEvent>;
-  /** Emits whenever the textarea's input changes. */
-  b2bInput: EventEmitter<InputChangeEvent>;
-  connectedCallback(): void;
-  private handleFormData;
-  private onFocus;
-  private onBlur;
-  private onInput;
-  render(): any;
+    hostElement: HTMLB2bTextareaElement;
+    /** The textarea label. This is optional. */
+    label: string;
+    /** Adds an asterisk at the end of the label to signify that the field is required. */
+    required: boolean;
+    /** The textarea placeholder. It is optional and undefined by default. */
+    placeholder?: string;
+    /** Whether or not the textarea is disabled. Per default it is false.  */
+    disabled: boolean;
+    /** Whether or not the textarea should be displayed with error styles. Per default it is false. */
+    invalid: boolean;
+    /** Whether or not the textarea should be automatically focused on page load. Per default it is false. */
+    autofocus: boolean;
+    /** If and how the textarea is resizable. Per default it is resizable in both directions. */
+    resize?: 'unset' | 'none' | 'vertical' | 'horizontal';
+    /** An optional hint for the textarea. Per default it is undefined. */
+    hint?: string;
+    /** An optional error message that is displayed when the textarea is invalid. Per default it is undefined. */
+    error?: string;
+    /** The value of the textarea. Per default it is null. */
+    value: string;
+    /** The name of the textarea. This is used to programmatically group it into a form. */
+    name?: string;
+    /** The maximum input length. Characters entered after that will not be appended to the input value. */
+    maxLength?: number;
+    /** The height of the text area */
+    height?: string;
+    /** Emits whenever the textarea receives focus. */
+    b2bFocus: EventEmitter<FocusEvent>;
+    /** Emits whenever the textarea loses focus. */
+    b2bBlur: EventEmitter<FocusEvent>;
+    /** Emits whenever the textarea's input changes. */
+    b2bInput: EventEmitter<InputChangeEvent>;
+    connectedCallback(): void;
+    private handleFormData;
+    private onFocus;
+    private onBlur;
+    private onInput;
+    render(): any;
 }

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

@@ -1,21 +1,21 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ToggleButtonEventDetail } from '../../utils/interfaces/form.interface';
 export declare class B2bToggleButtonComponent {
-  host: HTMLB2bToggleButtonElement;
-  /** The label of the toggle button. This is required */
-  label: string;
-  /** The name of the toggle button. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. */
-  name: string;
-  /** Whether or not the toggle button is currently checked. Per default it is false. */
-  checked: boolean;
-  /** Whether or not the toggle button is currently disabled. Per default it is false. */
-  disabled: boolean;
-  /** The value of the toggle button. This will be emitted when the toggle button is clicked. This is required */
-  value: string;
-  /** Emitted whenever the toggle button is clicked.  */
-  b2bChange: EventEmitter<ToggleButtonEventDetail>;
-  private onClick;
-  private uncheckSiblings;
-  private getSiblingToggles;
-  render(): any;
+    host: HTMLB2bToggleButtonElement;
+    /** The label of the toggle button. This is required */
+    label: string;
+    /** The name of the toggle button. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. */
+    name: string;
+    /** Whether or not the toggle button is currently checked. Per default it is false. */
+    checked: boolean;
+    /** Whether or not the toggle button is currently disabled. Per default it is false. */
+    disabled: boolean;
+    /** The value of the toggle button. This will be emitted when the toggle button is clicked. This is required */
+    value: string;
+    /** Emitted whenever the toggle button is clicked.  */
+    b2bChange: EventEmitter<ToggleButtonEventDetail>;
+    private onClick;
+    private uncheckSiblings;
+    private getSiblingToggles;
+    render(): any;
 }

package/dist/types/components/toggle-chip/toggle-chip.d.ts

@@ -1,21 +1,21 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ToggleChipEventDetail } from '../../utils/interfaces/interaction.interface';
 export declare class B2BToggleChipComponent {
-  /** The chip's label. This is required. */
-  label: string;
-  /** The value associated with the toggle chip. This is emitted when the chip is interacted with. */
-  value: any;
-  /** The name of the toggle chip. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. */
-  name: string;
-  /** The color scheme of the toggle button. Use white for grey backgrounds and grey for white backgrounds. Per default, it is grey*/
-  variant: 'grey' | 'white';
-  /** Whether or not the chip is currently active. Per default, it is false. */
-  active: boolean;
-  /** Whether or not the chip is currently disabled. Per default it is false. */
-  disabled: boolean;
-  /** Emits the value whenever the toggle chip is selected. */
-  b2bSelected: EventEmitter<ToggleChipEventDetail>;
-  private onClick;
-  private onKeyDown;
-  render(): any;
+    /** The chip's label. This is required. */
+    label: string;
+    /** The value associated with the toggle chip. This is emitted when the chip is interacted with. */
+    value: any;
+    /** The name of the toggle chip. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required. */
+    name: string;
+    /** The color scheme of the toggle button. Use white for grey backgrounds and grey for white backgrounds. Per default, it is grey*/
+    variant: 'grey' | 'white';
+    /** Whether or not the chip is currently active. Per default, it is false. */
+    active: boolean;
+    /** Whether or not the chip is currently disabled. Per default it is false. */
+    disabled: boolean;
+    /** Emits the value whenever the toggle chip is selected. */
+    b2bSelected: EventEmitter<ToggleChipEventDetail>;
+    private onClick;
+    private onKeyDown;
+    render(): any;
 }

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

@@ -1,19 +1,19 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ToggleButtonEventDetail } from '../../utils/interfaces/form.interface';
 export declare class B2BToggleGroup {
-  host: HTMLB2bToggleGroupElement;
-  /** The toggle group name used to group them together programmatically. This is required. */
-  name: string;
-  /** Whether or not the toggle group is disabled as a whole. Per default it is false. */
-  disabled: boolean;
-  /** Emitted whenever a toggle button in the group is clicked. Will emit the value of the currently selected radio button. */
-  b2bGroupChange: EventEmitter<ToggleButtonEventDetail>;
-  currentValue: any;
-  handleToggleButtonChange(ev: CustomEvent<ToggleButtonEventDetail>): void;
-  protected disabledChanged(): void;
-  private toggleAllDisabled;
-  private setFirstActiveOnInit;
-  private getChildNodes;
-  componentDidLoad(): void;
-  render(): any;
+    host: HTMLB2bToggleGroupElement;
+    /** The toggle group name used to group them together programmatically. This is required. */
+    name: string;
+    /** Whether or not the toggle group is disabled as a whole. Per default it is false. */
+    disabled: boolean;
+    /** Emitted whenever a toggle button in the group is clicked. Will emit the value of the currently selected radio button. */
+    b2bGroupChange: EventEmitter<ToggleButtonEventDetail>;
+    currentValue: any;
+    handleToggleButtonChange(ev: CustomEvent<ToggleButtonEventDetail>): void;
+    protected disabledChanged(): void;
+    private toggleAllDisabled;
+    private setFirstActiveOnInit;
+    private getChildNodes;
+    componentDidLoad(): void;
+    render(): any;
 }

package/dist/types/components/toggle-switch/toggle-switch.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ToggleSwitchEventDetail } from '../../utils/interfaces/interaction.interface';
+export declare class B2bToggleSwitchComponent {
+    host: HTMLB2bToggleSwitchElement;
+    /** An optional label for the toggle switch. */
+    label?: string;
+    /**The toggle name. Use this if the toggle switch is used in a form group. */
+    name?: string;
+    /** The alignment of the toggle switch label. */
+    labelPosition: 'left' | 'right';
+    /** Whether or not the toggle button is currently disabled. Per default it is false. */
+    disabled: boolean;
+    /** Whether or not the toggle button is currently on or off. Per default it is off. */
+    state: boolean;
+    /** Emits the toggle switch value when it's state changes. */
+    b2bChange: EventEmitter<ToggleSwitchEventDetail>;
+    private emitDetail;
+    private onClick;
+    private onKeyDown;
+    render(): any;
+}

package/dist/types/components/toggle-switch/toggle-switch.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const SwitchOn: Story;
+export declare const SwitchOff: Story;
+export declare const SwitchOnDisabled: Story;
+export declare const SwitchOffDisabled: Story;

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

@@ -5,23 +5,23 @@
  * @slot content - Use to pass custom content to the tooltip, like an icon or a link.
  */
 export declare class B2BTooltipComponent {
-  host: HTMLB2bTooltipElement;
-  /** Position of the tooltip. */
-  position: 'left' | 'right' | 'top' | 'bottom';
-  /** The content of the tooltip. Should be a string. If you need custom content like a b2b-link, use the named slot content. */
-  content: string;
-  /** The trigger for the tooltip. Can be on hover, on focus or custom, i.e. for an onboarding sequence. Per default it is hover. */
-  trigger: 'hover' | 'focus' | 'custom';
-  /** Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility. */
-  opened: boolean;
-  private triggerEl;
-  handleOpenedChange(newValue: boolean): void;
-  private onFocus;
-  private onBlur;
-  private onMouseEnter;
-  private onMouseLeave;
-  private getTrigger;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  render(): any;
+    host: HTMLB2bTooltipElement;
+    /** Position of the tooltip. */
+    position: 'left' | 'right' | 'top' | 'bottom';
+    /** The content of the tooltip. Should be a string. If you need custom content like a b2b-link, use the named slot content. */
+    content: string;
+    /** The trigger for the tooltip. Can be on hover, on focus or custom, i.e. for an onboarding sequence. Per default it is hover. */
+    trigger: 'hover' | 'focus' | 'custom';
+    /** Whether the tooltip is currently opened or not. When the trigger is set to custom, changing this prop will change the tooltip's visibility. */
+    opened: boolean;
+    private triggerEl;
+    handleOpenedChange(newValue: boolean): void;
+    private onFocus;
+    private onBlur;
+    private onMouseEnter;
+    private onMouseLeave;
+    private getTrigger;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): any;
 }

package/dist/types/components/wizard/wizard-step.d.ts

@@ -1,11 +1,11 @@
 import { WizardSteps, WizardStatus } from '../../utils/types/wizard.types';
 export declare class WizardStepComponent {
-  /** Use when wizard has property custom true. The state of the step */
-  state: WizardStatus;
-  /** Use when wizard has property custom true. The step number */
-  step: WizardSteps;
-  /** Defaults to true. It will show a checkmark icon when a step is completed.
-   * Set as false to show the step number */
-  checkIcon: boolean;
-  render(): any;
+    /** Use when wizard has property custom true. The state of the step */
+    state: WizardStatus;
+    /** Use when wizard has property custom true. The step number */
+    step: WizardSteps;
+    /** Defaults to true. It will show a checkmark icon when a step is completed.
+     * Set as false to show the step number */
+    checkIcon: boolean;
+    render(): any;
 }

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

@@ -1,19 +1,19 @@
 import { WizardSteps } from '../../utils/types/wizard.types';
 export declare class WizardComponent {
-  host: HTMLB2bWizardElement;
-  /** The current active step */
-  activeStep: WizardSteps | '0';
-  /** By default, is false, where the wizard will handle steps states.
-   * If set to true, steps state must be handled manually.  */
-  custom: boolean;
-  /** Defaults to true. It will show a checkmark icon when a step is completed.
-   * Set as false to show the step number */
-  checkIcon: boolean;
-  private MAX_STEP_AMOUNT;
-  componentWillLoad(): void;
-  componentWillRender(): void;
-  private getChildSteps;
-  private setStepsState;
-  private getStepState;
-  render(): any;
+    host: HTMLB2bWizardElement;
+    /** The current active step */
+    activeStep: WizardSteps | '0';
+    /** By default, is false, where the wizard will handle steps states.
+     * If set to true, steps state must be handled manually.  */
+    custom: boolean;
+    /** Defaults to true. It will show a checkmark icon when a step is completed.
+     * Set as false to show the step number */
+    checkIcon: boolean;
+    private MAX_STEP_AMOUNT;
+    componentWillLoad(): void;
+    componentWillRender(): void;
+    private getChildSteps;
+    private setStepsState;
+    private getStepState;
+    render(): any;
 }

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

@@ -1,11 +1,11 @@
 import { WizardStatus, WizardSteps } from '../../utils/types/wizard.types';
 export declare class WizardIconComponent {
-  /** The step number */
-  step: WizardSteps;
-  /** The state of the step */
-  state: WizardStatus;
-  /** Defaults to true. It will show a checkmark icon when a step is completed.
-   * Set as false to show the step number */
-  checkIcon: boolean;
-  render(): any;
+    /** The step number */
+    step: WizardSteps;
+    /** The state of the step */
+    state: WizardStatus;
+    /** Defaults to true. It will show a checkmark icon when a step is completed.
+     * Set as false to show the step number */
+    checkIcon: boolean;
+    render(): any;
 }