wcs-core 7.2.2 → 7.4.0

package/dist/collection/components/com-nav/com-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"com-nav.js","sourceRoot":"","sources":["../../../src/components/com-nav/com-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    forceUpdate,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { comNavDidLoadWithResizeObserver, registerCloseHandlerForFocusOutEventOn } from \"./com-nav-utils\";\nimport { inheritAriaAttributes, inheritAttributes, isEscapeKey } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { ComNavSize } from \"./com-nav-size\";\n\n\nconst COM_NAV_INHERITED_ATTRS = ['title'];\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n/**\n * *Part of communication design system*\n *\n * The com-nav component is a container for navigation links to external or internal pages of the website.\n *\n * @slot <no-name> - Default slot containing all the menu declarations\n * @slot app-name - (Optional) Extra slot for the application name\n * @slot actions - Slot for actions placed on the right part of the container\n * \n * @cssprop --wcs-com-nav-menu-bar-height - Height of the menu bar\n * @cssprop --wcs-com-nav-border-color - Border color of the bottom border of the com-nav\n * @cssprop --wcs-com-nav-border-width - Border width of the border below com-nav\n * @cssprop --wcs-com-nav-background-color - Background color of the com-nav;\n * @cssprop --wcs-com-nav-app-name-color - App name color\n * @cssprop --wcs-com-nav-app-name-font-weight - App name font-weight\n * @cssprop --wcs-com-nav-app-name-font-size - Font size of the App name text\n * @cssprop --wcs-com-nav-app-name-line-height - Line height of the App name text\n * @cssprop --wcs-com-nav-item-color - Color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-item-font-weight - Font weight of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-focus-outline-color - Focus outline color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-horizontal-padding - Horizontal padding of wcs-com-nav\n * @cssprop --wcs-com-nav-vertical-padding - Vertical padding of wcs-com-nav\n * @cssprop --wcs-com-nav-mobile-overlay-gap - Gap between each items section in mobile overlay\n * @cssprop --wcs-com-nav-mobile-overlay-padding - Padding inside mobile overlay\n * @cssprop --wcs-com-nav-mobile-menu-icon-border-color - Bar border color on the left of icon mobile menu\n * @cssprop --wcs-com-nav-mobile-menu-icon-gap- Gap between icon mobile menu and separator on the left\n * @cssprop --wcs-com-nav-mobile-menu-icon-margin-left - Margin left of icon mobile menu\n * @cssprop --wcs-com-nav-menu-bar-gap - Gap between each item inside menu-bar\n * @cssprop --wcs-com-nav-menu-bar-margin-left - Margin left between menu bar and the app-name section\n */\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsComNavElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() private mobileMenuOpen: boolean = false;\n    @State() public currentActiveSizing: ComNavSize;\n    private resizeObserver: ResizeObserver;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COM_NAV_INHERITED_ATTRS)\n        };\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidLoad(): void {\n        if(!this.resizeObserver) {\n            this.resizeObserver = comNavDidLoadWithResizeObserver(this);\n            this.resizeObserver.observe(document.body);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        // XXX: Special case on this component because of the desktop / mobile mode that re-renders the <nav> element,\n        // making it lose all its attribute\n        this.inheritedAttributes[attr] = value;\n        forceUpdate(this);\n    }\n\n    private closeMobileMenu() {\n        this.mobileMenuOpen = false;\n    }\n\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the submenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.closeMobileMenu();\n    }\n    \n    render() {\n        const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;\n        \n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">{this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        {this.currentActiveSizing === 'desktop' ?\n                            <nav role=\"navigation\" {...this.inheritedAttributes}>\n                                <div class=\"menu-bar\" role=\"list\">\n                                    {this.currentActiveSizing === 'desktop' \n                                        ? <slot/> \n                                        : null}\n                                </div>\n                            </nav>\n                            : null}\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        {this.currentActiveSizing === 'mobile' ?\n                            <nav id=\"wcs-com-nav-mobile-menu\" role=\"navigation\" {...this.inheritedAttributes}>\n                                <button id=\"mobile-menu-icon\"\n                                    aria-label={menuAriaLabel}\n                                    aria-expanded={this.mobileMenuOpen ? \"true\" : \"false\"}\n                                    aria-controls=\"wcs-com-nav-mobile-menu\"\n                                    onClick={() => this.mobileMenuIconClick()}></button>\n                                {this.currentActiveSizing === 'mobile'\n                                    ? <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen} role=\"list\"><slot /></div>\n                                    : null}\n                            </nav>\n                            : null}\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Close the mobile menu if the user press escape.\n     * @param evt keydown event on window target.\n     */\n    @Listen('keydown', {target: 'window'})\n    exitMobileMenuOnKeyDown(evt: KeyboardEvent) {\n        if (isEscapeKey(evt)) {\n            this.closeMobileMenu();\n        }\n    }\n}\n"]}
+{"version":3,"file":"com-nav.js","sourceRoot":"","sources":["../../../src/components/com-nav/com-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    forceUpdate,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { comNavDidLoadWithResizeObserver, registerCloseHandlerForFocusOutEventOn } from \"./com-nav-utils\";\nimport { inheritAriaAttributes, inheritAttributes, isEscapeKey } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { ComNavSize } from \"./com-nav-size\";\n\n\nconst COM_NAV_INHERITED_ATTRS = ['title'];\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n/**\n * *Part of communication design system*\n *\n * The com-nav component is a container for navigation links to external or internal pages of the website.\n *\n * @slot <no-name> - Default slot containing all the menu declarations\n * @slot app-name - (Optional) Extra slot for the application name\n * @slot actions - Slot for actions placed on the right part of the container\n * \n * @cssprop --wcs-com-nav-menu-bar-height - Height of the menu bar\n * @cssprop --wcs-com-nav-border-color - Border color of the bottom border of the com-nav\n * @cssprop --wcs-com-nav-border-width - Border width of the border below com-nav\n * @cssprop --wcs-com-nav-background-color - Background color of the com-nav;\n * @cssprop --wcs-com-nav-app-name-color - App name color\n * @cssprop --wcs-com-nav-app-name-font-weight - App name font-weight\n * @cssprop --wcs-com-nav-app-name-font-size - Font size of the App name text\n * @cssprop --wcs-com-nav-app-name-line-height - Line height of the App name text\n * @cssprop --wcs-com-nav-item-color - Color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-item-font-weight - Font weight of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-focus-outline-color - Focus outline color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-horizontal-padding - Horizontal padding of wcs-com-nav\n * @cssprop --wcs-com-nav-vertical-padding - Vertical padding of wcs-com-nav\n * @cssprop --wcs-com-nav-mobile-overlay-gap - Gap between each items section in mobile overlay\n * @cssprop --wcs-com-nav-mobile-overlay-padding - Padding inside mobile overlay\n * @cssprop --wcs-com-nav-mobile-menu-icon-border-color - Bar border color on the left of icon mobile menu\n * @cssprop --wcs-com-nav-mobile-menu-icon-gap- Gap between icon mobile menu and separator on the left\n * @cssprop --wcs-com-nav-mobile-menu-icon-margin-left - Margin left of icon mobile menu\n * @cssprop --wcs-com-nav-menu-bar-gap - Gap between each item inside menu-bar\n * @cssprop --wcs-com-nav-menu-bar-margin-left - Margin left between menu bar and the app-name section\n */\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsComNavElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() private mobileMenuOpen: boolean = false;\n    @State() public currentActiveSizing: ComNavSize;\n    private resizeObserver: ResizeObserver;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COM_NAV_INHERITED_ATTRS)\n        };\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidLoad(): void {\n        if(!this.resizeObserver) {\n            this.resizeObserver = comNavDidLoadWithResizeObserver(this);\n            this.resizeObserver.observe(document.body);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        // XXX: Special case on this component because of the desktop / mobile mode that re-renders the <nav> element,\n        // making it lose all its attribute\n        this.inheritedAttributes[attr] = value;\n        forceUpdate(this);\n    }\n\n    private closeMobileMenu() {\n        this.mobileMenuOpen = false;\n    }\n\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the submenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.closeMobileMenu();\n    }\n    \n    render() {\n        const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;\n        \n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">\n                            {this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        {this.currentActiveSizing === 'desktop' ?\n                            <nav role=\"navigation\" {...this.inheritedAttributes}>\n                                <div class=\"menu-bar\" role=\"list\">\n                                    {this.currentActiveSizing === 'desktop' \n                                        ? <slot/> \n                                        : null}\n                                </div>\n                            </nav>\n                            : null}\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        {this.currentActiveSizing === 'mobile' ?\n                            <nav id=\"wcs-com-nav-mobile-menu\" role=\"navigation\" {...this.inheritedAttributes}>\n                                <button id=\"mobile-menu-icon\"\n                                    aria-label={menuAriaLabel}\n                                    aria-expanded={this.mobileMenuOpen ? \"true\" : \"false\"}\n                                    aria-controls=\"wcs-com-nav-mobile-menu\"\n                                    onClick={() => this.mobileMenuIconClick()}></button>\n                                {this.currentActiveSizing === 'mobile'\n                                    ? <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen} role=\"list\"><slot /></div>\n                                    : null}\n                            </nav>\n                            : null}\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Close the mobile menu if the user press escape.\n     * @param evt keydown event on window target.\n     */\n    @Listen('keydown', {target: 'window'})\n    exitMobileMenuOnKeyDown(evt: KeyboardEvent) {\n        if (isEscapeKey(evt)) {\n            this.closeMobileMenu();\n        }\n    }\n}\n"]}

package/dist/collection/components/com-nav-category/com-nav-category.js

@@ -177,7 +177,7 @@ export class ComNavCategory {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",

package/dist/collection/components/com-nav-item/com-nav-item.css

@@ -5,7 +5,8 @@
 /**
     Applies all the outline properties useful to show a dashed-focus ring around a component.
     TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
- */ /* Default style and mobile behaviour */
+ */
+/* Default style and mobile behaviour */
 :host {
   --wcs-com-nav-item-gap: var(--wcs-semantic-spacing-base);
   --wcs-com-nav-item-font-size: var(--wcs-semantic-font-size-label-1);
@@ -29,7 +30,6 @@
   user-select: none;
   cursor: pointer;
   text-decoration: none;
-  font-size: var(--wcs-com-nav-item-font-size);
   color: inherit;
   font-weight: inherit;
   display: flex;

package/dist/collection/components/com-nav-submenu/com-nav-submenu.js

@@ -229,7 +229,7 @@ export class ComNavSubmenu {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",

package/dist/collection/components/counter/counter.e2e.playwright.js

@@ -0,0 +1,187 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('counter', () => {
+    test('should increment the counter when click on plus button', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter></wcs-counter>
+        `);
+        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');
+        const incrementButton = page.locator('wcs-counter wcs-button').last();
+        // When
+        await incrementButton.click();
+        await page.waitForChanges();
+        // Then
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: 1 });
+    });
+    test('should decrement the counter when click on minus button', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter></wcs-counter>
+        `);
+        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');
+        const decrementButton = page.locator('wcs-counter wcs-button').first();
+        // When
+        await decrementButton.click();
+        await page.waitForChanges();
+        // Then
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: -1 });
+    });
+    test('should have 0 as default value', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter></wcs-counter>
+        `);
+        const currentDisplayedValue = page.locator('wcs-counter .current-value');
+        // Then
+        await expect(currentDisplayedValue).toHaveText('0');
+    });
+    test('should respect the step attribute', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter step="5"></wcs-counter>
+        `);
+        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');
+        const incrementButton = page.locator('wcs-counter wcs-button').last();
+        // When
+        await incrementButton.click();
+        await page.waitForChanges();
+        // Then
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: 5 });
+    });
+    test('should respect the min attribute', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter min="-1" value="0"></wcs-counter>
+        `);
+        const changeSpy = await page.spyOnEvent('wcsChange');
+        const decrementButton = page.locator('wcs-counter wcs-button').first();
+        // When
+        await decrementButton.click();
+        await decrementButton.click();
+        await page.waitForChanges();
+        // Then - Should only emit once since second click would go below min
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: -1 });
+    });
+    test('should use the min attribute as default value when value is not set', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter min="5"></wcs-counter>
+        `);
+        const currentDisplayedValue = page.locator('wcs-counter .current-value');
+        // Then
+        await expect(currentDisplayedValue).toHaveText('5');
+    });
+    test('should respect the max attribute', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter max="1"></wcs-counter>
+        `);
+        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');
+        const incrementButton = page.locator('wcs-counter wcs-button').last();
+        // When
+        await incrementButton.click();
+        await incrementButton.click();
+        await page.waitForChanges();
+        // Then - Should only emit once since second click would go above max
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: 1 });
+    });
+    test('should respect the value attribute', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter value="5"></wcs-counter>
+        `);
+        const currentDisplayedValue = page.locator('wcs-counter .current-value');
+        // Then
+        await expect(currentDisplayedValue).toHaveText('5');
+    });
+    test('should use the min value as default when min is greater than 0', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter min="5"></wcs-counter>
+        `);
+        const currentDisplayedValue = page.locator('wcs-counter .current-value');
+        // Then
+        await expect(currentDisplayedValue).toHaveText('5');
+    });
+    test('should use the min value as default when min is greater than value', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter min="5" value="3"></wcs-counter>
+        `);
+        const currentDisplayedValue = page.locator('wcs-counter .current-value');
+        // Then
+        await expect(currentDisplayedValue).toHaveText('5');
+    });
+    test('should fire wcsBlur event when the counter loose focus', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <button id="first">first</button>
+            <wcs-counter></wcs-counter>
+            <button id="last">last</button>
+        `);
+        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');
+        const firstButton = page.locator('#first');
+        // When
+        await firstButton.click();
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        // Then
+        expect(blurSpy).toHaveReceivedEventTimes(1);
+    });
+    test('should fire wcsBlur event when the user click on decrement button and leave', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter></wcs-counter>
+            <button>last</button>
+        `);
+        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');
+        const decrementButton = page.locator('wcs-counter wcs-button').first();
+        const button = page.getByRole('button', { name: 'last' });
+        // When
+        await decrementButton.click();
+        await button.click();
+        await page.waitForChanges();
+        // Then
+        expect(blurSpy).toHaveReceivedEventTimes(1);
+    });
+    test('should fire wcsBlur event when the user click on increment button and leave', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter></wcs-counter>
+            <button>last</button>
+        `);
+        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');
+        const incrementButton = page.locator('wcs-counter wcs-button').last();
+        const button = page.getByRole('button', { name: 'last' });
+        // When
+        await incrementButton.click();
+        await button.click();
+        await page.waitForChanges();
+        // Then
+        expect(blurSpy).toHaveReceivedEventTimes(1);
+    });
+    test('should not be interactive when disabled', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter disabled="true"></wcs-counter>
+        `);
+        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');
+        const incrementButton = page.locator('wcs-counter wcs-button').last();
+        // When
+        await incrementButton.click({ force: true });
+        await page.waitForChanges();
+        // Then
+        expect(changeSpy).toHaveReceivedEventTimes(0);
+        await expect(page.locator('wcs-counter')).toHaveJSProperty('value', 0);
+        await expect(incrementButton).toHaveJSProperty('disabled', true);
+    });
+});
+//# sourceMappingURL=counter.e2e.playwright.js.map

package/dist/collection/components/counter/counter.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/counter/counter.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('counter', () => {\n    test('should increment the counter when click on plus button', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter></wcs-counter>\n        `);\n\n        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');\n\n        const incrementButton = page.locator('wcs-counter wcs-button').last();\n\n        // When\n        await incrementButton.click();\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: 1 });\n    });\n\n    test('should decrement the counter when click on minus button', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter></wcs-counter>\n        `);\n\n        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');\n\n        const decrementButton = page.locator('wcs-counter wcs-button').first();\n\n        // When\n        await decrementButton.click();\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: -1 });\n    });\n\n    test('should have 0 as default value', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter></wcs-counter>\n        `);\n\n        const currentDisplayedValue = page.locator('wcs-counter .current-value');\n\n        // Then\n        await expect(currentDisplayedValue).toHaveText('0');\n    });\n\n    test('should respect the step attribute', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter step=\"5\"></wcs-counter>\n        `);\n\n        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');\n\n        const incrementButton = page.locator('wcs-counter wcs-button').last();\n\n        // When\n        await incrementButton.click();\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: 5 });\n    });\n\n    test('should respect the min attribute', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter min=\"-1\" value=\"0\"></wcs-counter>\n        `);\n\n        const changeSpy = await page.spyOnEvent('wcsChange');\n\n        const decrementButton = page.locator('wcs-counter wcs-button').first();\n\n        // When\n        await decrementButton.click();\n        await decrementButton.click();\n        await page.waitForChanges();\n\n        // Then - Should only emit once since second click would go below min\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: -1 });\n    });\n\n    test('should use the min attribute as default value when value is not set', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter min=\"5\"></wcs-counter>\n        `);\n\n        const currentDisplayedValue = page.locator('wcs-counter .current-value');\n\n        // Then\n        await expect(currentDisplayedValue).toHaveText('5');\n    });\n\n    test('should respect the max attribute', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter max=\"1\"></wcs-counter>\n        `);\n\n        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');\n\n        const incrementButton = page.locator('wcs-counter wcs-button').last();\n\n        // When\n        await incrementButton.click();\n        await incrementButton.click();\n        await page.waitForChanges();\n\n        // Then - Should only emit once since second click would go above max\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: 1 });\n    });\n\n    test('should respect the value attribute', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter value=\"5\"></wcs-counter>\n        `);\n\n        const currentDisplayedValue = page.locator('wcs-counter .current-value');\n\n        // Then\n        await expect(currentDisplayedValue).toHaveText('5');\n    });\n\n    test('should use the min value as default when min is greater than 0', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter min=\"5\"></wcs-counter>\n        `);\n\n        const currentDisplayedValue = page.locator('wcs-counter .current-value');\n\n        // Then\n        await expect(currentDisplayedValue).toHaveText('5');\n    });\n\n    test('should use the min value as default when min is greater than value', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter min=\"5\" value=\"3\"></wcs-counter>\n        `);\n\n        const currentDisplayedValue = page.locator('wcs-counter .current-value');\n\n        // Then\n        await expect(currentDisplayedValue).toHaveText('5');\n    });\n\n    test('should fire wcsBlur event when the counter loose focus', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <button id=\"first\">first</button>\n            <wcs-counter></wcs-counter>\n            <button id=\"last\">last</button>\n        `);\n\n        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');\n\n        const firstButton = page.locator('#first');\n\n        // When\n        await firstButton.click();\n        await page.keyboard.press('Tab');\n        await page.keyboard.press('Tab');\n        await page.waitForChanges();\n\n        // Then\n        expect(blurSpy).toHaveReceivedEventTimes(1);\n    });\n\n    test('should fire wcsBlur event when the user click on decrement button and leave', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter></wcs-counter>\n            <button>last</button>\n        `);\n\n        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');\n\n        const decrementButton = page.locator('wcs-counter wcs-button').first();\n        const button = page.getByRole('button', { name: 'last' });\n\n        // When\n        await decrementButton.click();\n        await button.click();\n        await page.waitForChanges();\n\n        // Then\n        expect(blurSpy).toHaveReceivedEventTimes(1);\n    });\n\n    test('should fire wcsBlur event when the user click on increment button and leave', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter></wcs-counter>\n            <button>last</button>\n        `);\n\n        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');\n\n        const incrementButton = page.locator('wcs-counter wcs-button').last();\n        const button = page.getByRole('button', { name: 'last' });\n\n        // When\n        await incrementButton.click();\n        await button.click();\n        await page.waitForChanges();\n\n        // Then\n        expect(blurSpy).toHaveReceivedEventTimes(1);\n    });\n\n    test('should not be interactive when disabled', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter disabled=\"true\"></wcs-counter>\n        `);\n\n        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');\n\n        const incrementButton = page.locator('wcs-counter wcs-button').last();\n\n        // When\n        await incrementButton.click({ force: true });\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(0);\n        await expect(page.locator('wcs-counter')).toHaveJSProperty('value', 0);\n        await expect(incrementButton).toHaveJSProperty('disabled', true);\n    });\n});\n"]}

package/dist/collection/components/counter/counter.js

@@ -368,7 +368,7 @@ export class Counter {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",