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

package/dist/collection/components/toggle-switch/toggle-switch.js

@@ -0,0 +1,185 @@
+import { Host, h, } from "@stencil/core";
+export class B2bToggleSwitchComponent {
+    constructor() {
+        this.emitDetail = () => {
+            this.b2bChange.emit({
+                value: this.state,
+            });
+            // 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.host.dispatchEvent(changeEvent);
+        };
+        this.onClick = (ev) => {
+            ev.preventDefault();
+            if (this.disabled) {
+                return;
+            }
+            else {
+                this.state = !this.state;
+            }
+            this.emitDetail();
+        };
+        this.onKeyDown = (ev) => {
+            if (ev.key != 'Enter' || this.disabled) {
+                return;
+            }
+            else {
+                this.state = !this.state;
+            }
+            this.emitDetail();
+        };
+        this.label = undefined;
+        this.name = undefined;
+        this.labelPosition = 'left';
+        this.disabled = false;
+        this.state = false;
+    }
+    render() {
+        // workaround for purgecss as safelist doesn't work
+        const isLeft = this.labelPosition === 'left';
+        return (h(Host, { key: '492af45bc2e18076699774c38a2380ce613d0f20' }, h("div", { key: '1bbdd7b22a228f1a99064d74cc1a06730f59165d', class: {
+                'b2b-toggle': true,
+                'b2b-toggle--disabled': this.disabled,
+                'b2b-toggle--checked': this.state,
+            } }, h("div", { key: '8776fbd74c5c4a55b6f3ce26f6b9052143825dff', class: {
+                'b2b-toggle__label': true,
+                'b2b-toggle__label--left': isLeft,
+            } }, h("span", { key: '636cbbe665b9110fba74a22b4883ed532d32bbc7', class: "b2b-toggle__switch", role: "switch", tabIndex: 0, onKeyDown: this.onKeyDown, onClick: this.onClick }, h("svg", { key: 'ea1ab53257132ea21af3fbb8747cce467bdabc8a', class: {
+                'b2b-toggle__icon': true,
+                'b2b-toggle__icon--show': this.state,
+            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 30 30" }, h("path", { key: '21177e7f309265aabcc97e23d604bfedb024e700', 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" }))), this.label && (h("span", { class: {
+                'b2b-toggle__text': true,
+                'b2b-toggle__text--left': isLeft,
+            } }, this.label))))));
+    }
+    static get is() { return "b2b-toggle-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["toggle-switch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["toggle-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional label for the toggle switch."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The toggle name. Use this if the toggle switch is used in a form group."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The alignment of the toggle switch label."
+                },
+                "attribute": "label-position",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the toggle button is currently disabled. Per default it is false."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "state": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the toggle button is currently on or off. Per default it is off."
+                },
+                "attribute": "state",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "b2bChange",
+                "name": "b2b-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the toggle switch value when it's state changes."
+                },
+                "complexType": {
+                    "original": "ToggleSwitchEventDetail",
+                    "resolved": "ToggleSwitchEventDetail<boolean>",
+                    "references": {
+                        "ToggleSwitchEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/interfaces/interaction.interface",
+                            "id": "src/utils/interfaces/interaction.interface.d.ts::ToggleSwitchEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/toggle-switch/toggle-switch.stories.js

@@ -0,0 +1,46 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
+const meta = {
+    title: 'Components/Interaction/Toggle Switch',
+    component: 'b2b-toggle-switch',
+    args: {
+        label: 'Label',
+        disabled: 'false',
+        labelPosition: 'left',
+        state: true,
+    },
+    argTypes: getArgTypes('b2b-toggle-switch'),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<b2b-toggle-switch
+    label="${args.label}"
+    disabled="${args.disabled}"
+    label-position="${args.labelPosition}"
+    state="${args.state}" />`;
+    },
+};
+export default meta;
+export const SwitchOn = {
+    args: Object.assign({}, meta.args),
+};
+export const SwitchOff = {
+    args: Object.assign(Object.assign({}, meta.args), { disabled: false, state: false }),
+};
+export const SwitchOnDisabled = {
+    args: Object.assign(Object.assign({}, meta.args), { state: true, disabled: true }),
+};
+export const SwitchOffDisabled = {
+    args: Object.assign(Object.assign({}, meta.args), { state: false, disabled: true }),
+};

package/dist/collection/components/tooltip/tooltip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -28,7 +28,7 @@
   --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-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-table-expand-hover: #e6f4ff;
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 15 Feb 2024 09:42:32 GMT
+ * Generated on Tue, 07 May 2024 10:21:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -151,7 +151,7 @@
   --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-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-color-info-100: #003264;

package/dist/collection/components/tooltip/tooltip.e2e.js

@@ -1,64 +1,64 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe('B2B Tooltip', () => {
-  const expectToBeVisibleAfterTransition = async (page, tooltipDiv) => {
-    await page.$eval('b2b-tooltip', el => {
-      const tooltipElm = el.shadowRoot.querySelector('div');
-      tooltipElm.addEventListener('transitionend', () => {
-        expect(tooltipDiv.isVisible()).toBe(true);
-      });
+    const expectToBeVisibleAfterTransition = async (page, tooltipDiv) => {
+        await page.$eval('b2b-tooltip', el => {
+            const tooltipElm = el.shadowRoot.querySelector('div');
+            tooltipElm.addEventListener('transitioned', () => {
+                expect(tooltipDiv.isVisible()).toBe(true);
+            });
+        });
+    };
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip">trigger</b2b-tooltip>');
+        const element = await page.find('b2b-tooltip');
+        expect(element).toHaveClass('hydrated');
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        expect(await tooltipDiv.isVisible()).toBe(false);
+    });
+    it('appears on hover when no trigger is specified', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip">trigger</b2b-tooltip>');
+        const trigger = await page.find('b2b-tooltip >>> span');
+        await trigger.hover();
+        await page.waitForChanges();
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        expect(await tooltipDiv.isVisible()).toBe(true);
+    });
+    it('appears on focus when a focusable element is slotted and the trigger is set to focus', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="focus"><button>Focus me</button></b2b-tooltip>');
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        expect(await tooltipDiv.isVisible()).toBe(false);
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        await expectToBeVisibleAfterTransition(page, tooltipDiv);
+    });
+    it('does not appear on hover when the trigger is set to focus', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="focus"><button>Focus me</button></b2b-tooltip>');
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        const trigger = await page.find('b2b-tooltip >>> span');
+        await trigger.hover();
+        await page.waitForChanges();
+        expect(await tooltipDiv.isVisible()).toBe(false);
+    });
+    it('does not appear on hover when the trigger is set to custom', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="custom"><button>Focus me</button></b2b-tooltip>');
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        const trigger = await page.find('b2b-tooltip >>> span');
+        await trigger.hover();
+        await page.waitForChanges();
+        expect(await tooltipDiv.isVisible()).toBe(false);
+    });
+    it('appears when the trigger is set to custom and the opened property changes', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="custom" opened="false"><button>Focus me</button></b2b-tooltip>');
+        const element = await page.find('b2b-tooltip');
+        const tooltipDiv = await page.find('b2b-tooltip >>> div');
+        element.setAttribute('opened', true);
+        await page.waitForChanges();
+        await expectToBeVisibleAfterTransition(page, tooltipDiv);
     });
-  };
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<b2b-tooltip content="I am a tooltip">trigger</b2b-tooltip>');
-    const element = await page.find('b2b-tooltip');
-    expect(element).toHaveClass('hydrated');
-    const tooltipDiv = await page.find('b2b-tooltip >>> div');
-    expect(await tooltipDiv.isVisible()).toBe(false);
-  });
-  it('appears on hover when no trigger is specified', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<b2b-tooltip content="I am a tooltip">trigger</b2b-tooltip>');
-    const trigger = await page.find('b2b-tooltip >>> span');
-    await trigger.hover();
-    await page.waitForChanges();
-    const tooltipDiv = await page.find('b2b-tooltip >>> div');
-    expect(await tooltipDiv.isVisible()).toBe(true);
-  });
-  it('appears on focus when a focusable element is slotted and the trigger is set to focus', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="focus"><button>Focus me</button></b2b-tooltip>');
-    const tooltipDiv = await page.find('b2b-tooltip >>> div');
-    expect(await tooltipDiv.isVisible()).toBe(false);
-    await page.keyboard.press('Tab');
-    await page.waitForChanges();
-    await expectToBeVisibleAfterTransition(page, tooltipDiv);
-  });
-  it('does not appear on hover when the trigger is set to focus', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="focus"><button>Focus me</button></b2b-tooltip>');
-    const tooltipDiv = await page.find('b2b-tooltip >>> div');
-    const trigger = await page.find('b2b-tooltip >>> span');
-    await trigger.hover();
-    await page.waitForChanges();
-    expect(await tooltipDiv.isVisible()).toBe(false);
-  });
-  it('does not appear on hover when the trigger is set to custom', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="custom"><button>Focus me</button></b2b-tooltip>');
-    const tooltipDiv = await page.find('b2b-tooltip >>> div');
-    const trigger = await page.find('b2b-tooltip >>> span');
-    await trigger.hover();
-    await page.waitForChanges();
-    expect(await tooltipDiv.isVisible()).toBe(false);
-  });
-  it('appears when the trigger is set to custom and the opened property changes', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="custom" opened="false"><button>Focus me</button></b2b-tooltip>');
-    const element = await page.find('b2b-tooltip');
-    const tooltipDiv = await page.find('b2b-tooltip >>> div');
-    element.setAttribute('opened', true);
-    await page.waitForChanges();
-    await expectToBeVisibleAfterTransition(page, tooltipDiv);
-  });
 });