@baloise/ds-core 19.9.5 → 20.0.0-next.4

package/dist/collection/components/toggle/test/toggle.a11y.play.js

@@ -0,0 +1,28 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+test('default', async ({ page, a11y }) => {
+    await page.mount(`<ds-toggle value="on">Toggle</ds-toggle>`);
+    await a11y('ds-toggle');
+});
+test('checked', async ({ page, a11y }) => {
+    await page.mount(`<ds-toggle value="on" checked>Toggle</ds-toggle>`);
+    await a11y('ds-toggle');
+});
+test('disabled', async ({ page, a11y }) => {
+    await page.mount(`<ds-toggle value="on" disabled>Toggle</ds-toggle>`);
+    await a11y('ds-toggle');
+});
+test('invalid', async ({ page, a11y }) => {
+    await page.mount(`<ds-toggle value="on" invalid>Toggle</ds-toggle>`);
+    await a11y('ds-toggle');
+});
+test('required', async ({ page, a11y }) => {
+    await page.mount(`<ds-toggle value="on" required>Toggle</ds-toggle>`);
+    await a11y('ds-toggle');
+});
+test('label position left', async ({ page, a11y }) => {
+    await page.mount(`<ds-toggle value="on" label-position="left">Toggle</ds-toggle>`);
+    await a11y('ds-toggle');
+});

package/dist/collection/components/toggle/test/toggle.component.play.js

@@ -0,0 +1,90 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsToggle, expect, test } from "../../../../../../playwright/src/index";
+test.describe('dsChange', () => {
+    test('should fire dsChange with true when checked', async ({ page }) => {
+        await page.mount(`<ds-toggle value="on">Toggle</ds-toggle>`);
+        const toggle = new DsToggle(page.locator('ds-toggle'));
+        const changeSpy = await toggle.el.spyOnEvent('dsChange');
+        await toggle.check();
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail(true);
+    });
+    test('should fire dsChange with false when unchecked', async ({ page }) => {
+        await page.mount(`<ds-toggle value="on" checked>Toggle</ds-toggle>`);
+        const toggle = new DsToggle(page.locator('ds-toggle'));
+        const changeSpy = await toggle.el.spyOnEvent('dsChange');
+        await toggle.uncheck();
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail(false);
+    });
+});
+test.describe('dsFocus and dsBlur', () => {
+    test('should fire dsFocus on focus', async ({ page }) => {
+        await page.mount(`<ds-toggle value="on">Toggle</ds-toggle>`);
+        const toggle = new DsToggle(page.locator('ds-toggle'));
+        const focusSpy = await toggle.el.spyOnEvent('dsFocus');
+        await toggle.nativeInput.focus();
+        expect(focusSpy).toHaveReceivedEventTimes(1);
+    });
+    test('should fire dsBlur on blur', async ({ page }) => {
+        await page.mount(`<ds-toggle value="on">Toggle</ds-toggle>`);
+        const toggle = new DsToggle(page.locator('ds-toggle'));
+        const blurSpy = await toggle.el.spyOnEvent('dsBlur');
+        await toggle.nativeInput.focus();
+        await toggle.nativeInput.blur();
+        expect(blurSpy).toHaveReceivedEventTimes(1);
+    });
+});
+test.describe('disabled', () => {
+    test('native input should be disabled', async ({ page }) => {
+        await page.mount(`<ds-toggle value="on" disabled>Toggle</ds-toggle>`);
+        const toggle = new DsToggle(page.locator('ds-toggle'));
+        const changeSpy = await toggle.el.spyOnEvent('dsChange');
+        await toggle.assertToBeDisabled();
+        expect(changeSpy).toHaveReceivedEventTimes(0);
+    });
+    test('should not fire dsFocus or dsBlur when disabled', async ({ page }) => {
+        await page.mount(`<ds-toggle value="on" disabled>Toggle</ds-toggle>`);
+        const toggle = new DsToggle(page.locator('ds-toggle'));
+        const focusSpy = await toggle.el.spyOnEvent('dsFocus');
+        const blurSpy = await toggle.el.spyOnEvent('dsBlur');
+        expect(focusSpy).toHaveReceivedEventTimes(0);
+        expect(blurSpy).toHaveReceivedEventTimes(0);
+    });
+});
+test.describe('readonly', () => {
+    test('native input should be disabled when readonly', async ({ page }) => {
+        await page.mount(`<ds-toggle value="on" readonly>Toggle</ds-toggle>`);
+        const toggle = new DsToggle(page.locator('ds-toggle'));
+        await toggle.assertToBeDisabled();
+    });
+});
+test.describe('checked', () => {
+    test('should reflect checked prop', async ({ page }) => {
+        await page.mount(`<ds-toggle value="on" checked>Toggle</ds-toggle>`);
+        const toggle = new DsToggle(page.locator('ds-toggle'));
+        await toggle.assertToBeChecked();
+    });
+    test('should be unchecked by default', async ({ page }) => {
+        await page.mount(`<ds-toggle value="on">Toggle</ds-toggle>`);
+        const toggle = new DsToggle(page.locator('ds-toggle'));
+        await toggle.assertToBeUnchecked();
+    });
+});
+test.describe('form reset', () => {
+    test('should reset to initial checked state', async ({ page }) => {
+        await page.mount(`
+      <form>
+        <ds-toggle name="terms" value="accepted">Accept terms</ds-toggle>
+        <button type="reset" data-testid="reset">Reset</button>
+      </form>
+    `);
+        const toggle = new DsToggle(page.locator('ds-toggle'));
+        await toggle.check();
+        await toggle.assertToBeChecked();
+        await page.getByTestId('reset').click();
+        await toggle.assertToBeUnchecked();
+    });
+});

package/dist/collection/components/toggle/test/toggle.visual.play.js

@@ -0,0 +1,30 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'toggle';
+const STYLE_VARIANTS = ['basic', 'no-label', 'disabled', 'invalid', 'invalid-disabled', 'required', 'field', 'form'];
+const HOST_VARIANTS = ['basic', 'no-label', 'disabled', 'invalid', 'invalid-disabled', 'required', 'form'];
+const image = screenshot(TAG);
+test.describe('style', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.style.html`);
+    });
+    STYLE_VARIANTS.forEach(variant => {
+        test(variant, async ({ page }) => {
+            const el = page.getByTestId(variant);
+            await expectScreenshot(el, image(`style-${variant}`));
+        });
+    });
+});
+test.describe('host', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+    });
+    HOST_VARIANTS.forEach(variant => {
+        test(variant, async ({ page }) => {
+            const el = page.getByTestId(variant);
+            await expectScreenshot(el, image(variant));
+        });
+    });
+});

package/dist/collection/components/toggle/toggle.host.css

@@ -0,0 +1 @@
+:host{--_toggle-gap: var(--toggle-gap, var(--mod-toggle-gap, 0.5rem));--_toggle-label-base-color: var(--toggle-label-base-color, var(--mod-toggle-label-base-color, inherit));--_toggle-label-hover-color: var(--toggle-label-hover-color, var(--mod-toggle-label-hover-color, var(--ds-global-color-sky-5)));--_toggle-label-active-color: var(--toggle-label-active-color, var(--mod-toggle-label-active-color, var(--ds-global-color-primary-6)));--_toggle-height: var(--toggle-height, var(--mod-toggle-height, 1.5rem));--_toggle-width: var(--toggle-width, var(--mod-toggle-width, 2.5rem));--_toggle-border-width: var(--toggle-border-width, var(--mod-toggle-border-width, var(--ds-alias-border-width-base)));--_toggle-radius: var(--toggle-radius, var(--mod-toggle-radius, var(--ds-alias-radius-rounded)));--_toggle-padding-y: var(--toggle-padding-y, var(--mod-toggle-padding-y, 0.25rem));--_toggle-min-height: var(--toggle-min-height, var(--mod-toggle-min-height, 3rem));--_toggle-tile-radius: var(--toggle-tile-radius, var(--mod-toggle-tile-radius, var(--ds-alias-radius-base)));--_toggle-tile-padding: var(--toggle-tile-padding, var(--mod-toggle-tile-padding, 1rem));--_toggle-tile-border-width: var(--toggle-tile-border-width, var(--mod-toggle-tile-border-width, var(--ds-alias-border-width-base)));--_toggle-tile-base-background-color: var(--toggle-tile-base-background-color, var(--mod-toggle-tile-base-background-color, inherit));--_toggle-tile-base-border-color: var(--toggle-tile-base-border-color, var(--mod-toggle-tile-base-border-color, var(--ds-global-color-grey-3)));--_toggle-tile-hover-background-color: var(--toggle-tile-hover-background-color, var(--mod-toggle-tile-hover-background-color, var(--ds-global-color-grey-2)));--_toggle-tile-hover-border-color: var(--toggle-tile-hover-border-color, var(--mod-toggle-tile-hover-border-color, var(--ds-global-color-sky-5)));--_toggle-tile-active-background-color: var(--toggle-tile-active-background-color, var(--mod-toggle-tile-active-background-color, var(--ds-global-color-grey-2)));--_toggle-tile-active-border-color: var(--toggle-tile-active-border-color, var(--mod-toggle-tile-active-border-color, var(--ds-global-color-primary-6)));--_toggle-unchecked-base-color-background: var(--toggle-unchecked-base-color-background, var(--mod-toggle-unchecked-base-color-background, var(--ds-global-color-grey-3)));--_toggle-unchecked-base-color-tick: var(--toggle-unchecked-base-color-tick, var(--mod-toggle-unchecked-base-color-tick, var(--ds-global-color-primary-5)));--_toggle-unchecked-hover-color-background: var(--toggle-unchecked-hover-color-background, var(--mod-toggle-unchecked-hover-color-background, var(--ds-global-color-grey-3)));--_toggle-unchecked-hover-color-tick: var(--toggle-unchecked-hover-color-tick, var(--mod-toggle-unchecked-hover-color-tick, var(--ds-global-color-sky-5)));--_toggle-unchecked-active-color-background: var(--toggle-unchecked-active-color-background, var(--mod-toggle-unchecked-active-color-background, var(--ds-global-color-grey-3)));--_toggle-unchecked-active-color-tick: var(--toggle-unchecked-active-color-tick, var(--mod-toggle-unchecked-active-color-tick, var(--ds-global-color-primary-6)));--_toggle-checked-base-color-background: var(--toggle-checked-base-color-background, var(--mod-toggle-checked-base-color-background, var(--ds-global-color-success-4)));--_toggle-checked-base-color-tick: var(--toggle-checked-base-color-tick, var(--mod-toggle-checked-base-color-tick, var(--ds-global-color-white)));--_toggle-checked-base-color-icon: var(--toggle-checked-base-color-icon, var(--mod-toggle-checked-base-color-icon, var(--ds-global-color-white)));--_toggle-checked-hover-color-background: var(--toggle-checked-hover-color-background, var(--mod-toggle-checked-hover-color-background, var(--ds-global-color-success-5)));--_toggle-checked-hover-color-tick: var(--toggle-checked-hover-color-tick, var(--mod-toggle-checked-hover-color-tick, var(--ds-global-color-white)));--_toggle-checked-active-color-background: var(--toggle-checked-active-color-background, var(--mod-toggle-checked-active-color-background, var(--ds-global-color-success-6)));--_toggle-checked-active-color-tick: var(--toggle-checked-active-color-tick, var(--mod-toggle-checked-active-color-tick, var(--ds-global-color-white)))}:host{display:inline-block;box-sizing:border-box !important;outline:none}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:inline-flex;align-items:center;gap:var(--_toggle-gap);cursor:pointer;user-select:none;color:var(--_toggle-label-base-color);font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base);padding-top:var(--_toggle-padding-y);padding-bottom:var(--_toggle-padding-y);min-height:var(--_toggle-min-height)}@media(hover: hover)and (pointer: fine){label:hover{color:var(--_toggle-label-hover-color)}}label:active{color:var(--_toggle-label-active-color)}:host input[type=checkbox]{position:relative;justify-content:flex-start;align-items:center;padding:4px;appearance:none;flex:none;display:inline-flex;width:var(--_toggle-width);height:var(--_toggle-height);background:var(--_toggle-unchecked-base-color-background);border:var(--_toggle-border-width) solid var(--_toggle-unchecked-base-color-border);border-radius:var(--_toggle-radius);vertical-align:top;cursor:pointer}:host input[type=checkbox]:disabled{cursor:default}:host input[type=checkbox]:focus-visible{outline:var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);outline-offset:2px;border-radius:var(--_toggle-radius)}:host input[type=checkbox]:not(:disabled):hover,:host:hover input[type=checkbox]:not(:disabled):not(:checked){background:var(--_toggle-unchecked-hover-color-background)}:host input[type=checkbox]:not(:disabled):hover::before,:host:hover input[type=checkbox]:not(:disabled):not(:checked)::before{background:var(--_toggle-unchecked-hover-color-tick)}:host input[type=checkbox]:not(:disabled):active,:host:active input[type=checkbox]:not(:disabled):not(:checked){background:var(--_toggle-unchecked-active-color-background)}:host input[type=checkbox]:not(:disabled):active::before,:host:active input[type=checkbox]:not(:disabled):not(:checked)::before{background:var(--_toggle-unchecked-active-color-tick)}:host input[type=checkbox]:checked{background:var(--_toggle-checked-base-color-background)}:host input[type=checkbox]:checked::before{background:var(--_toggle-checked-base-color-tick)}:host input[type=checkbox]:checked:not(:disabled):hover,:host:hover input[type=checkbox]:checked:not(:disabled){background:var(--_toggle-checked-hover-color-background)}:host input[type=checkbox]:checked:not(:disabled):hover::before,:host:hover input[type=checkbox]:checked:not(:disabled)::before{background:var(--_toggle-checked-hover-color-tick)}:host input[type=checkbox]:checked:not(:disabled):active,:host:active input[type=checkbox]:checked:not(:disabled){background:var(--_toggle-checked-active-color-background)}:host input[type=checkbox]:checked:not(:disabled):active::before,:host:active input[type=checkbox]:checked:not(:disabled)::before{background:var(--_toggle-checked-active-color-tick)}:host input[type=checkbox]::before{display:block;content:"";width:1rem;height:1rem;background:var(--_toggle-unchecked-base-color-tick);border-radius:var(--_toggle-radius);transition:transform .3s ease-in-out;z-index:1}:host input[type=checkbox]:checked::before{transform:translateX(100%)}:host input[type=checkbox]::after{position:absolute;display:block;content:"";mask-size:100%;mask-repeat:no-repeat;mask-position:center;left:5px;width:12px;height:12px;transition:opacity .3s ease-in-out;opacity:0;z-index:0}:host input[type=checkbox]:checked::after{opacity:1;background-color:var(--_toggle-checked-base-color-icon);mask-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>")}:host(.is-dense){--mod-toggle-min-height: 2rem;--mod-toggle-padding-y: 0}:host(.is-invalid:not(.is-disabled)){--mod-toggle-label-base-color: var(--ds-global-color-danger-4);--mod-toggle-label-hover-color: var(--ds-global-color-danger-5);--mod-toggle-label-active-color: var(--ds-global-color-danger-6);--mod-toggle-unchecked-base-color-background: var(--ds-global-color-danger-1);--mod-toggle-unchecked-base-color-tick: var(--ds-global-color-danger-4);--mod-toggle-unchecked-hover-color-background: var(--ds-global-color-danger-1);--mod-toggle-unchecked-hover-color-tick: var(--ds-global-color-danger-5);--mod-toggle-unchecked-active-color-background: var(--ds-global-color-danger-1);--mod-toggle-unchecked-active-color-tick: var(--ds-global-color-danger-6);--mod-toggle-checked-base-color-background: var(--ds-global-color-danger-4);--mod-toggle-checked-base-color-tick: var(--ds-global-color-white);--mod-toggle-checked-hover-color-background: var(--ds-global-color-danger-5);--mod-toggle-checked-hover-color-tick: var(--ds-global-color-white);--mod-toggle-checked-active-color-background: var(--ds-global-color-danger-6);--mod-toggle-checked-active-color-tick: var(--ds-global-color-white)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-toggle-label-base-color: var(--ds-global-color-grey-5);--mod-toggle-label-hover-color: var(--ds-global-color-grey-5);--mod-toggle-label-active-color: var(--ds-global-color-grey-5);--mod-toggle-unchecked-base-color-background: var(--ds-global-color-grey-3);--mod-toggle-unchecked-base-color-tick: var(--ds-global-color-grey-5);--mod-toggle-checked-base-color-background: var(--ds-global-color-grey-5);--mod-toggle-checked-base-color-tick: var(--ds-global-color-grey-3)}:host(.has-label-left) label{flex-direction:row-reverse}:host(.has-label-top) label{flex-direction:column-reverse}:host(.is-tile){display:block;flex:0 0 100%}:host(.is-tile) label{width:100%;height:100%;padding:var(--_toggle-tile-padding);border-style:solid;border-width:var(--_toggle-tile-border-width);border-radius:var(--_toggle-tile-radius);border-color:var(--_toggle-tile-base-border-color);background:var(--_toggle-tile-base-background-color)}@media(hover: hover)and (pointer: fine){:host(.is-tile) label:hover{border-color:var(--_toggle-tile-hover-border-color);background:var(--_toggle-tile-hover-background-color)}}:host(.is-tile) label:active{border-color:var(--_toggle-tile-active-border-color);background:var(--_toggle-tile-active-background-color)}:host(.is-tile.is-checked){--mod-toggle-tile-base-border-color: var(--_toggle-checked-base-color-background)}:host(.is-tile.is-disabled){--icon-brand-color: var(--ds-global-color-grey-5)}:host(.is-tile.is-invalid){--mod-toggle-tile-hover-background-color: var(--ds-global-color-danger-1);--mod-toggle-tile-active-background-color: var(--ds-global-color-danger-1);--mod-toggle-tile-hover-border-color: var(--ds-global-color-danger-5);--mod-toggle-tile-active-border-color: var(--ds-global-color-danger-6)}:host(.is-tile.is-invalid) label{--icon-brand-color: var(--ds-global-color-danger-4)}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-invalid) label:hover{--icon-brand-color: var(--ds-global-color-danger-5)}}:host(.is-tile.is-invalid) label:active{--icon-brand-color: var(--ds-global-color-danger-6)}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (max-width: 768px){:host(.is-tile.has-cols-2-mobile){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2-tablet){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 1024px){:host(.is-tile.has-cols-2-desktop){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}

package/dist/collection/components/toggle/toggle.interfaces.js

@@ -0,0 +1,16 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const TOGGLE_GROUP_COLUMNS = [1, 2, 3, 4];
+export const TOGGLE_TILE_COLORS = ['', 'purple', 'green', 'yellow', 'red'];
+export const TOGGLE_LABEL_POSITIONS = ['left', 'top', 'right'];
+// export interface ToggleGroupCustomEvent<T> extends CustomEvent<T> {
+//   detail: T
+//   target: HTMLDsToggleGroupElement
+// }
+// export type ToggleGroupChangeDetail = boolean
+// export type ToggleGroupChange = ToggleGroupCustomEvent<ToggleGroupChangeDetail>
+// export type ToggleGroupFocusDetail = FocusEvent
+// export type ToggleGroupFocus = ToggleGroupCustomEvent<ToggleGroupFocusDetail>
+// export type ToggleGroupBlurDetail = FocusEvent
+// export type ToggleGroupBlur = ToggleGroupCustomEvent<ToggleGroupBlurDetail>