@otto-de/b2b-core-components 1.4.0 → 1.6.0

package/dist/types/components.d.ts

@@ -9,12 +9,18 @@ import { CheckboxEventDetail, InputChangeEvent, InputClear, OptionSelectedEventD
 import { IconName } from "./components/icon/types";
 import { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
 import { ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
-import { ContentAlignment, TableColourOptions, TableRowgroupTypes, TableRowTypes, TableSizes, TableSortDirections } from "./components/table/types";
+import { ContentAlignment, TableAccordionRowTypes, TableColourOptions, TableRowgroupTypes, TableSizes, TableSortDirections } from "./utils/types/table.types";
+import { CheckboxEventDetail as CheckboxEventDetail1 } from "./components";
+import { TableAccordionSelectedEventDetail } from "./utils/interfaces/content.interface";
+import { WizardStatus, WizardSteps } from "./utils/types/wizard.types";
 export { CheckboxEventDetail, InputChangeEvent, InputClear, OptionSelectedEventDetail, RadioEventDetail, SearchClickEventDetail, ToggleButtonEventDetail } from "./utils/interfaces/form.interface";
 export { IconName } from "./components/icon/types";
 export { BeforeCloseEventDetail } from "./utils/interfaces/status.interface";
 export { ColumnSortChangeEventDetail, PageChangeEventDetail, TabChangeEventDetail } from "./utils/interfaces/interaction.interface";
-export { ContentAlignment, TableColourOptions, TableRowgroupTypes, TableRowTypes, TableSizes, TableSortDirections } from "./components/table/types";
+export { ContentAlignment, TableAccordionRowTypes, TableColourOptions, TableRowgroupTypes, TableSizes, TableSortDirections } from "./utils/types/table.types";
+export { CheckboxEventDetail as CheckboxEventDetail1 } from "./components";
+export { TableAccordionSelectedEventDetail } from "./utils/interfaces/content.interface";
+export { WizardStatus, WizardSteps } from "./utils/types/wizard.types";
 export namespace Components {
     interface B2bAlert {
         /**
@@ -69,6 +75,7 @@ export namespace Components {
           * 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;
+        "groupDisabled": boolean;
         /**
           * An optional anchor. If specified, the button will render an anchor element that can be use for navigation or download files
          */
@@ -125,10 +132,15 @@ export namespace Components {
           * The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles.
          */
         "error"?: string;
+        "groupDisabled": boolean;
         /**
           * 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;
+        /**
+          * If used in combination with other checkboxes, this state indicates that some checkboxes are checked, but not all. Per default, it is false.
+         */
+        "indeterminate": boolean;
         /**
           * Whether or not the checkbox is rendered with error styles. Defaults to false.
          */
@@ -136,7 +148,7 @@ export namespace Components {
         /**
           * The checkbox label. This attribute is required.
          */
-        "label": string;
+        "label"?: string;
         /**
           * The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name.
          */
@@ -145,6 +157,10 @@ export namespace Components {
           * Adds an asterisk at the end of the label to signify that the field is required.
          */
         "required": boolean;
+        /**
+          * If true, renders a standalone inline checkbox with no label and hint/error.
+         */
+        "standalone": boolean;
         /**
           * 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
          */
@@ -317,6 +333,7 @@ export namespace Components {
           * The error message that is shown if the input is invalid.
          */
         "error"?: string;
+        "groupDisabled": boolean;
         /**
           * The hint text that appears underneath the input field.
          */
@@ -393,6 +410,7 @@ export namespace Components {
           * Whether or not the input is disabled. Default is false.
          */
         "disabled": boolean;
+        "groupDisabled": boolean;
         /**
           * The input label.
          */
@@ -567,6 +585,10 @@ export namespace Components {
         "label": string;
     }
     interface B2bRoundedIcon {
+        /**
+          * The color of the border of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string
+         */
+        "borderColor": string;
         /**
           * The color of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string
          */
@@ -685,6 +707,11 @@ export namespace Components {
         "sortId"?: string;
     }
     interface B2bTableRow {
+        "accordionType": TableAccordionRowTypes;
+        /**
+          * If a selectable row is currently checked. Per default, it is false.
+         */
+        "checked": boolean;
         /**
           * Background color of the row. Use it semantically. This color selection have hover states *
          */
@@ -693,14 +720,19 @@ export namespace Components {
           * Whether the row will be highlighted on mouse over *
          */
         "highlight": boolean;
+        /**
+          * If a selectable row is a parent for an accordion, it becomes indeterminate when some of it's children are checked, but not all.
+         */
+        "indeterminate": boolean;
+        "selectable": boolean;
         /**
           * Will toggle the accordion opened or closed.
          */
-        "toggleAccordion": (isOpen: any) => Promise<void>;
+        "toggleAccordion": (isOpen: boolean) => Promise<void>;
         /**
-          * Determined by the parent rowgroup for accordion rowgroups. Do not set manually.
+          * The unique identifier for a selectable row. It is emitted when the row is selected.
          */
-        "type": TableRowTypes;
+        "value"?: string;
     }
     interface B2bTableRowgroup {
         /**
@@ -711,6 +743,10 @@ export namespace Components {
           * Only use when accordion property is true. Will render the accordion opened if set to true. By default, is false.
          */
         "opened": boolean;
+        /**
+          * If the rows in the rowgroup can be selected via checkmark. Per default, it is false.
+         */
+        "selectable": boolean;
         /**
           * Rowgroup allows grouping rows by context: header, body or footer. Header rows are by default not highlightable on mouse over.
          */
@@ -827,15 +863,47 @@ export namespace Components {
          */
         "trigger": 'hover' | 'focus' | 'custom';
     }
+    interface B2bWizard {
+        /**
+          * The current active step
+         */
+        "activeStep": WizardSteps | '0';
+        /**
+          * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
+         */
+        "checkIcon": boolean;
+        /**
+          * By default, is false, where the wizard will handle steps states. If set to true, steps state must be handled manually.
+         */
+        "custom": boolean;
+    }
     interface B2bWizardIcon {
+        /**
+          * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
+         */
+        "checkIcon": boolean;
         /**
           * The state of the step
          */
-        "state": 'completed' | 'pending' | 'disabled';
+        "state": WizardStatus;
         /**
           * The step number
          */
-        "step": '1' | '2' | '3' | '4' | '5' | '6';
+        "step": WizardSteps;
+    }
+    interface B2bWizardStep {
+        /**
+          * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
+         */
+        "checkIcon": boolean;
+        /**
+          * 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;
     }
 }
 export interface B2bAlertCustomEvent<T> extends CustomEvent<T> {
@@ -910,6 +978,10 @@ export interface B2bTableRowCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bTableRowElement;
 }
+export interface B2bTableRowgroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLB2bTableRowgroupElement;
+}
 export interface B2bTextareaCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLB2bTextareaElement;
@@ -1197,12 +1269,24 @@ declare global {
         prototype: HTMLB2bTooltipElement;
         new (): HTMLB2bTooltipElement;
     };
+    interface HTMLB2bWizardElement extends Components.B2bWizard, HTMLStencilElement {
+    }
+    var HTMLB2bWizardElement: {
+        prototype: HTMLB2bWizardElement;
+        new (): HTMLB2bWizardElement;
+    };
     interface HTMLB2bWizardIconElement extends Components.B2bWizardIcon, HTMLStencilElement {
     }
     var HTMLB2bWizardIconElement: {
         prototype: HTMLB2bWizardIconElement;
         new (): HTMLB2bWizardIconElement;
     };
+    interface HTMLB2bWizardStepElement extends Components.B2bWizardStep, HTMLStencilElement {
+    }
+    var HTMLB2bWizardStepElement: {
+        prototype: HTMLB2bWizardStepElement;
+        new (): HTMLB2bWizardStepElement;
+    };
     interface HTMLElementTagNameMap {
         "b2b-alert": HTMLB2bAlertElement;
         "b2b-anchor": HTMLB2bAnchorElement;
@@ -1245,7 +1329,9 @@ declare global {
         "b2b-toggle-button": HTMLB2bToggleButtonElement;
         "b2b-toggle-group": HTMLB2bToggleGroupElement;
         "b2b-tooltip": HTMLB2bTooltipElement;
+        "b2b-wizard": HTMLB2bWizardElement;
         "b2b-wizard-icon": HTMLB2bWizardIconElement;
+        "b2b-wizard-step": HTMLB2bWizardStepElement;
     }
 }
 declare namespace LocalJSX {
@@ -1366,6 +1452,10 @@ declare namespace LocalJSX {
           * 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;
+        /**
+          * If used in combination with other checkboxes, this state indicates that some checkboxes are checked, but not all. Per default, it is false.
+         */
+        "indeterminate"?: boolean;
         /**
           * Whether or not the checkbox is rendered with error styles. Defaults to false.
          */
@@ -1373,7 +1463,7 @@ declare namespace LocalJSX {
         /**
           * The checkbox label. This attribute is required.
          */
-        "label": string;
+        "label"?: string;
         /**
           * The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name.
          */
@@ -1394,6 +1484,10 @@ declare namespace LocalJSX {
           * Adds an asterisk at the end of the label to signify that the field is required.
          */
         "required"?: boolean;
+        /**
+          * If true, renders a standalone inline checkbox with no label and hint/error.
+         */
+        "standalone"?: boolean;
         /**
           * 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
          */
@@ -1872,6 +1966,10 @@ declare namespace LocalJSX {
         "label"?: string;
     }
     interface B2bRoundedIcon {
+        /**
+          * The color of the border of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string
+         */
+        "borderColor"?: string;
         /**
           * The color of the circle around the icon or text. Use any type including hex, rgb or css custom properties as long as you pass it as a string
          */
@@ -2010,6 +2108,10 @@ declare namespace LocalJSX {
         "sortId"?: string;
     }
     interface B2bTableRow {
+        /**
+          * If a selectable row is currently checked. Per default, it is false.
+         */
+        "checked"?: boolean;
         /**
           * Background color of the row. Use it semantically. This color selection have hover states *
          */
@@ -2018,24 +2120,40 @@ declare namespace LocalJSX {
           * Whether the row will be highlighted on mouse over *
          */
         "highlight"?: boolean;
+        /**
+          * If a selectable row is a parent for an accordion, it becomes indeterminate when some of it's children are checked, but not all.
+         */
+        "indeterminate"?: boolean;
         /**
           * Emits if the parent rowgroup is an accordion and the row is a top-level accordion row. Determines if the child rows will be shown.
          */
         "onB2b-open"?: (event: B2bTableRowCustomEvent<boolean>) => void;
         /**
-          * Determined by the parent rowgroup for accordion rowgroups. Do not set manually.
+          * Emits if the row is selectable and it is selected or unselected. Emits both unique value and the checkbox status.
          */
-        "type"?: TableRowTypes;
+        "onB2b-row-selected"?: (event: B2bTableRowCustomEvent<CheckboxEventDetail1>) => void;
+        /**
+          * The unique identifier for a selectable row. It is emitted when the row is selected.
+         */
+        "value"?: string;
     }
     interface B2bTableRowgroup {
         /**
           * Renders the rowgroup as an accordion. Both header and body must have accordion set to true. One table can contain multiple rowgroups of type body, each of which represents an accordion row with children.
          */
         "accordion"?: boolean;
+        /**
+          * Emits when the rowgroup as a whole is selected.
+         */
+        "onB2b-group-selected"?: (event: B2bTableRowgroupCustomEvent<TableAccordionSelectedEventDetail>) => void;
         /**
           * Only use when accordion property is true. Will render the accordion opened if set to true. By default, is false.
          */
         "opened"?: boolean;
+        /**
+          * If the rows in the rowgroup can be selected via checkmark. Per default, it is false.
+         */
+        "selectable"?: boolean;
         /**
           * Rowgroup allows grouping rows by context: header, body or footer. Header rows are by default not highlightable on mouse over.
          */
@@ -2172,15 +2290,47 @@ declare namespace LocalJSX {
          */
         "trigger"?: 'hover' | 'focus' | 'custom';
     }
+    interface B2bWizard {
+        /**
+          * The current active step
+         */
+        "activeStep"?: WizardSteps | '0';
+        /**
+          * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
+         */
+        "checkIcon"?: boolean;
+        /**
+          * By default, is false, where the wizard will handle steps states. If set to true, steps state must be handled manually.
+         */
+        "custom"?: boolean;
+    }
     interface B2bWizardIcon {
+        /**
+          * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
+         */
+        "checkIcon"?: boolean;
         /**
           * The state of the step
          */
-        "state"?: 'completed' | 'pending' | 'disabled';
+        "state"?: WizardStatus;
         /**
           * The step number
          */
-        "step"?: '1' | '2' | '3' | '4' | '5' | '6';
+        "step"?: WizardSteps;
+    }
+    interface B2bWizardStep {
+        /**
+          * Defaults to true. It will show a checkmark icon when a step is completed. Set as false to show the step number
+         */
+        "checkIcon"?: boolean;
+        /**
+          * 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;
     }
     interface IntrinsicElements {
         "b2b-alert": B2bAlert;
@@ -2224,7 +2374,9 @@ declare namespace LocalJSX {
         "b2b-toggle-button": B2bToggleButton;
         "b2b-toggle-group": B2bToggleGroup;
         "b2b-tooltip": B2bTooltip;
+        "b2b-wizard": B2bWizard;
         "b2b-wizard-icon": B2bWizardIcon;
+        "b2b-wizard-step": B2bWizardStep;
     }
 }
 export { LocalJSX as JSX };
@@ -2300,7 +2452,9 @@ declare module "@stencil/core" {
              * a specific trigger.
              */
             "b2b-tooltip": LocalJSX.B2bTooltip & JSXBase.HTMLAttributes<HTMLB2bTooltipElement>;
+            "b2b-wizard": LocalJSX.B2bWizard & JSXBase.HTMLAttributes<HTMLB2bWizardElement>;
             "b2b-wizard-icon": LocalJSX.B2bWizardIcon & JSXBase.HTMLAttributes<HTMLB2bWizardIconElement>;
+            "b2b-wizard-step": LocalJSX.B2bWizardStep & JSXBase.HTMLAttributes<HTMLB2bWizardStepElement>;
         }
     }
 }

package/dist/types/docs/tokens/color.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/web-components';
 import './styles.css';
 export declare const story010ColorTokens: any;
-declare const _default: Meta<import("@storybook/web-components").Args>;
+declare const _default: Meta;
 export default _default;

package/dist/types/docs/tokens/font.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/web-components';
 import './styles.css';
 export declare const story010FontTokens: any;
-declare const _default: Meta<import("@storybook/web-components").Args>;
+declare const _default: Meta;
 export default _default;

package/dist/types/docs/tokens/size.stories.d.ts

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

package/dist/types/stencil-public-runtime.d.ts

@@ -812,6 +812,7 @@ export declare namespace JSXBase {
         datetime?: string;
     }
     interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
+        onCancel?: (event: Event) => void;
         onClose?: (event: Event) => void;
         open?: boolean;
         returnValue?: string;
@@ -1130,6 +1131,8 @@ export declare namespace JSXBase {
         summary?: string;
     }
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
+        autoComplete?: string;
+        autocomplete?: string;
         autoFocus?: boolean;
         autofocus?: boolean | string;
         cols?: number;

package/dist/types/utils/interfaces/content.interface.d.ts

@@ -0,0 +1,4 @@
+export interface TableAccordionSelectedEventDetail {
+  group: string;
+  values: string[];
+}

package/dist/types/utils/interfaces/form.interface.d.ts

@@ -27,6 +27,7 @@ export interface HTMLB2bFormElement {
   invalid?: boolean;
   disabled?: boolean;
   hint?: string;
+  groupDisabled?: boolean;
 }
 
 export interface ToggleButtonEventDetail<T = any> {

package/dist/types/{components/table/types.d.ts → utils/types/table.types.d.ts}

@@ -21,12 +21,17 @@ export declare const TableSortDirections: {
   readonly DESC: "descending";
 };
 export type TableSortDirections = (typeof TableSortDirections)[keyof typeof TableSortDirections];
-export declare const TableRowTypes: {
+export declare const TableAccordionRowTypes: {
   readonly PARENT: "parent";
   readonly CHILD: "child";
   readonly HEADER: "header";
 };
-export type TableRowTypes = (typeof TableRowTypes)[keyof typeof TableRowTypes];
+export type TableAccordionRowTypes = (typeof TableAccordionRowTypes)[keyof typeof TableAccordionRowTypes];
+export declare const TableCheckboxTypes: {
+  readonly HEADER: "header";
+  readonly ROW: "row";
+};
+export type TableCheckboxTypes = (typeof TableCheckboxTypes)[keyof typeof TableCheckboxTypes];
 export declare const TableColourOptions: {
   readonly DEFAULT: "default";
   readonly SELECTED: "selected";

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

@@ -0,0 +1,8 @@
+export type WizardSteps = '1' | '2' | '3' | '4' | '5' | '6';
+export declare const WizardStatus: {
+  readonly DEFAULT: "default";
+  readonly COMPLETED: "completed";
+  readonly PENDING: "pending";
+  readonly DISABLED: "disabled";
+};
+export type WizardStatus = (typeof WizardStatus)[keyof typeof WizardStatus];