@otto-de/b2b-core-components 1.0.0

package/dist/collection/components/button/button.stories.js

@@ -0,0 +1,88 @@
+import { html } from 'lit-html';
+import buttonDocs from './button.docs.mdx';
+import { getArgTypes } from '../../docs/config/utils';
+const Template = ({ variant, size, disabled, loading, content, type, href, download, target, }) => {
+  const label = content ? content : 'Details';
+  return html `<b2b-button
+    variant="${variant}"
+    size="${size}"
+    disabled="${disabled}"
+    loading="${loading}"
+    type="${type}"
+    .href="${href}"
+    download="${download}"
+    target="${target}">
+    ${label}
+  </b2b-button>`;
+};
+const defaultArgs = {
+  variant: 'secondary',
+  size: '100',
+  disabled: false,
+  loading: false,
+  type: 'button',
+  href: undefined,
+  target: 'blank',
+  download: null,
+};
+export const story010Secondary = Template.bind({});
+story010Secondary.args = Object.assign({}, defaultArgs);
+story010Secondary.storyName = 'Secondary';
+export const story020Primary = Template.bind({});
+story020Primary.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', content: 'Primary' });
+story020Primary.storyName = 'Primary';
+export const story030Loading = Template.bind({});
+story030Loading.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', loading: true, content: 'Primary' });
+story030Loading.storyName = 'Loading';
+export const story040IconStart = Template.bind({});
+const iconStartContent = html `<b2b-icon
+    slot="start"
+    icon="b2b_icon-check"
+    size="100"
+    color="inherit"></b2b-icon>
+  Text`;
+story040IconStart.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', content: iconStartContent });
+story040IconStart.storyName = 'Button With Icon Start';
+export const story050IconEnd = Template.bind({});
+const iconEndContent = html `Text
+  <b2b-icon
+    slot="end"
+    icon="b2b_icon-check"
+    size="100"
+    color="inherit"></b2b-icon>`;
+story050IconEnd.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', content: iconEndContent });
+story050IconEnd.storyName = 'Button With Icon End';
+export const story055IconStartPali = Template.bind({});
+const iconStartPaliContent = html `<i class="obc_icon-check obc_mr-1"></i> Icon
+  Button`;
+story055IconStartPali.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', content: iconStartPaliContent });
+story055IconStartPali.storyName = 'Button With Pali Icon';
+export const story060IconSearch = Template.bind({});
+const iconSearchContent = html `<b2b-icon
+  icon="b2b_icon-check"
+  size="100"
+  color="primary"></b2b-icon>`;
+story060IconSearch.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'secondary', content: iconSearchContent });
+story060IconSearch.storyName = 'Icon Only Button';
+export const story070Disabled = Template.bind({});
+story070Disabled.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', disabled: true, content: 'Primary has grey color when disabled' });
+story070Disabled.storyName = 'Disabled';
+export const story080Anchor = Template.bind({});
+story080Anchor.args = Object.assign(Object.assign({}, defaultArgs), { href: 'https://www.otto.de', content: 'Anchor Button' });
+story080Anchor.storyName = 'Anchor Button';
+const controls = {
+  variant: 'radio',
+};
+const buttonArgs = getArgTypes('b2b-button', controls);
+export default {
+  title: 'Components/Interaction/Button',
+  argTypes: Object.assign(Object.assign({}, buttonArgs), { content: {
+      control: false,
+    } }),
+  viewMode: 'docs',
+  parameters: {
+    docs: {
+      page: buttonDocs,
+    },
+  },
+};

package/dist/collection/components/checkbox/checkbox.css

@@ -0,0 +1,299 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Apr 2023 14:13:51 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-table-expand-hover: #e6f4ff;
+  --b2b-color-table-selected-hover: #e6f4ff;
+  --b2b-color-table-selected-default: #cce9ff;
+  --b2b-color-table-hover: #e6f4ff;
+  --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
+  --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-45);
+  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-75: var(--b2b-size-30);
+  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Apr 2023 14:13:51 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+:root {
+  --b2b-checkbox-margin-bottom: 0;
+}
+.b2b-checkbox {
+  display: block;
+  font-family: var(--b2b-font-family-default);
+  font-size: var(--b2b-size-copy-100);
+  width: fit-content;
+  margin-bottom: var(--b2b-checkbox-margin-bottom);
+  margin-right: var(--b2b-size-60);
+}
+.b2b-checkbox-items {
+  display: flex;
+  justify-content: flex-start;
+}
+.b2b-checkbox-icon {
+  position: absolute;
+  fill: var(--b2b-color-white-100);
+  display: none;
+  margin-top: 3px;
+  margin-left: var(--b2b-size-1);
+  width: var(--b2b-size-35);
+  height: var(--b2b-size-35);
+  z-index: 1000;
+}
+.b2b-checkbox-input {
+  margin: 2px 6px 3px 0;
+  appearance: none;
+  background-color: var(--b2b-color-white-100);
+  border: 1px solid var(--b2b-color-grey-400);
+  border-radius: var(--b2b-size-border-radius-100);
+  display: inline-block;
+  position: relative;
+  vertical-align: top;
+  width: var(--b2b-size-40);
+  height: var(--b2b-size-40);
+  flex-shrink: 0;
+}
+.b2b-checkbox-checked .b2b-checkbox-icon {
+  display: inline-block;
+}
+.b2b-checkbox-checked .b2b-checkbox-input {
+  border-color: var(--b2b-color-black-100);
+  background-color: var(--b2b-color-black-100);
+}
+.b2b-checkbox b2b-input-label {
+  display: inline;
+  vertical-align: bottom;
+  user-select: none;
+}
+.b2b-checkbox span {
+  display: block;
+  font-size: var(--b2b-size-copy-75);
+  color: var(--b2b-color-grey-300);
+  line-height: var(--b2b-size-copy-line-height-75);
+  user-select: none;
+}
+.b2b-checkbox--error {
+  /* When an input is both checked AND has an error */
+}
+.b2b-checkbox--error .b2b-checkbox-input {
+  background-color: var(--b2b-color-error-50);
+  border: 1px solid var(--b2b-color-error-100);
+}
+.b2b-checkbox--error span {
+  color: var(--b2b-color-error-100);
+}
+.b2b-checkbox--error.b2b-checkbox-checked .b2b-checkbox-input {
+  background-color: var(--b2b-color-error-100);
+  border-color: var(--b2b-color-error-100);
+}
+.b2b-checkbox--disabled {
+  pointer-events: none;
+}
+.b2b-checkbox--disabled .b2b-checkbox-input {
+  background-color: var(--b2b-color-grey-25);
+  border-color: var(--b2b-color-grey-300);
+}
+/* stylelint-disable selector-class-pattern */
+.b2b-checkbox.b2b-checkbox--disabled.b2b-checkbox-checked .b2b-checkbox-input {
+  background-color: var(--b2b-color-grey-300);
+  border-color: var(--b2b-color-grey-300);
+}

package/dist/collection/components/checkbox/checkbox.js

@@ -0,0 +1,294 @@
+import { h, Host, } from '@stencil/core';
+export class CheckboxComponent {
+  constructor() {
+    this.handleFormData = (event) => {
+      if (this.name != undefined && this.checked) {
+        const value = this.value || 'on';
+        event.formData.append(this.name, value);
+      }
+    };
+    this.emitDetail = () => {
+      this.b2bChange.emit({
+        checked: this.checked,
+        value: this.value,
+      });
+      // Dispatches the native change event because it is not propagated beyond the shadow boundary
+      // globalThis to target the lib.dom Event and not Stencil Event
+      const changeEvent = new globalThis.Event('change');
+      this.hostElement.dispatchEvent(changeEvent);
+    };
+    this.onFocus = (ev) => {
+      this.b2bFocus.emit(ev);
+    };
+    this.onBlur = (ev) => {
+      this.b2bBlur.emit(ev);
+    };
+    this.onClick = (ev) => {
+      ev.preventDefault();
+      if (this.disabled) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.emitDetail();
+    };
+    this.label = undefined;
+    this.required = false;
+    this.checked = false;
+    this.disabled = false;
+    this.error = undefined;
+    this.hint = undefined;
+    this.name = undefined;
+    this.value = undefined;
+    this.invalid = false;
+  }
+  connectedCallback() {
+    const form = this.hostElement.closest('form');
+    if (form != null) {
+      form.addEventListener('formdata', this.handleFormData);
+    }
+  }
+  render() {
+    return (h(Host, { onClick: this.onClick }, h("div", { class: {
+        'b2b-checkbox': true,
+        'b2b-checkbox--error': this.invalid && !this.disabled,
+        'b2b-checkbox--disabled': this.disabled,
+        'b2b-checkbox-checked': this.checked,
+      } }, h("div", { class: "b2b-checkbox-items" }, h("svg", { class: "b2b-checkbox-icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" })), h("input", { class: "b2b-checkbox-input", "aria-labelledby": this.name, type: "checkbox", name: this.name, id: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur }), h("b2b-input-label", { id: this.name, required: this.required, disabled: this.disabled }, this.label)), (this.hint !== undefined && !this.invalid) ||
+      (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
+  }
+  static get is() { return "b2b-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["checkbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["checkbox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The checkbox label. This attribute is required."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds an asterisk at the end of the label to signify that the field is required."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the checkbox is checked. Default value is false and can be set to true if the checkbox should come pre-checked."
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the checkbox is disabled. The default value is false."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The error message. It is undefined by default. If a string is passed in, it will render the checkbox with error styles."
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "hint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "attribute": "hint",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The name of the checkbox. Per default it is undefined. Use this to programmatically group checkboxes together by giving them the same name."
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "value": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "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"
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the checkbox is rendered with error styles. Defaults to false."
+        },
+        "attribute": "invalid",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bFocus",
+        "name": "b2b-focus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits whenever the checkbox receives focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "b2bBlur",
+        "name": "b2b-blur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits whenever the checkbox loses focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "b2bChange",
+        "name": "b2b-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits the checkbox value when it's checked status changes."
+        },
+        "complexType": {
+          "original": "CheckboxEventDetail",
+          "resolved": "CheckboxEventDetail<any>",
+          "references": {
+            "CheckboxEventDetail": {
+              "location": "import",
+              "path": "../../utils/interfaces/form.interface"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}