@tet/tet-components 1.3.112-testing → 1.3.113-staging

package/dist/collection/components/simple/menu/tet-business-navigation/tet-business-navigation.js

@@ -0,0 +1,177 @@
+import { h } from "@stencil/core";
+export class TetBusinessNavigation {
+    constructor() {
+        /**
+         * Initialises the mouse drag.
+         * @param {MouseEvent} event Current mouse event.
+         */
+        this.onContainerMouseDown = (event) => {
+            this.isPointerDown = true;
+            this.positions = {
+                scrollLeft: this.navigationContainer.scrollLeft,
+                mouseX: event.clientX
+            };
+            this.navigationContainer.addEventListener('mousemove', this.onContainerMouseMove);
+            this.navigationContainer.addEventListener('mouseup', this.onContainerMouseUp);
+            this.navigationContainer.addEventListener('mouseleave', this.onContainerMouseUp);
+        };
+        /**
+         * Scrolls the `navigationContainer` on mouse drag.
+         * @param {MouseEvent} e Current mouse event.
+         */
+        this.onContainerMouseMove = (e) => {
+            e.preventDefault();
+            const mouseButton = e.buttons;
+            this.isPointerDown = mouseButton === 1;
+            if (!this.isPointerDown) {
+                this.onContainerMouseUp();
+                return;
+            }
+            const deltaX = e.clientX - this.positions.mouseX;
+            this.navigationContainer.scrollTo(this.positions.scrollLeft - deltaX, 0);
+        };
+        /**
+         * Removes mouse drag events.
+         */
+        this.onContainerMouseUp = () => {
+            this.isPointerDown = false;
+            this.navigationContainer.removeEventListener('mousemove', this.onContainerMouseMove);
+            this.navigationContainer.removeEventListener('mouseup', this.onContainerMouseUp);
+            this.navigationContainer.removeEventListener('mouseleave', this.onContainerMouseUp);
+        };
+        /** Render menu item */
+        this.renderMenuItem = (menuItem) => {
+            const { id, icon, name } = menuItem;
+            return (h("button", { key: id, class: { 'business-navigation-item': true, 'selected': this.selectedItemId === id }, onClick: () => this.selectMenuItem(id) }, icon && h("tet-icon", { class: "business-navigation-item__icon", name: icon }), h("span", { class: "business-navigation-item__title" }, name)));
+        };
+        this.menuItems = undefined;
+        this.theme = 'light';
+        this.selectedItemId = undefined;
+        this.positions = { scrollLeft: 0, mouseX: 0 };
+    }
+    /** Method to run on menu item selection */
+    async selectMenuItem(id) {
+        this.selectedItemId = id;
+        this.menuClickEvent.emit({ id });
+    }
+    componentWillLoad() {
+        var _a;
+        if (!this.menuItems || this.menuItems.length === 0) {
+            return;
+        }
+        this.selectedItemId = ((_a = this.menuItems.find((item) => item.selected === true)) === null || _a === void 0 ? void 0 : _a.id) || this.menuItems[0].id;
+    }
+    /** Render Functional Component*/
+    render() {
+        const { menuItems, theme } = this;
+        return (h("div", { key: '6ddc63074feeaa530c108024b46091f98560f333', class: { 'business-navigation': true, [`${theme}`]: true }, role: "group", onMouseDown: this.onContainerMouseDown, ref: (ref) => (this.navigationContainer = ref) }, menuItems && menuItems.map(this.renderMenuItem)));
+    }
+    static get is() { return "tet-business-navigation"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-business-navigation.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-business-navigation.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "menuItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<BusinessMenuItem>",
+                    "resolved": "BusinessMenuItem[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "BusinessMenuItem": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/simple/menu/tet-business-navigation/tet-business-navigation.tsx",
+                            "id": "src/components/simple/menu/tet-business-navigation/tet-business-navigation.tsx::BusinessMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data for menu rendering"
+                }
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the menu"
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedItemId": {},
+            "positions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "menuClickEvent",
+                "name": "menu-click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitter for menu item click passing menu id"
+                },
+                "complexType": {
+                    "original": "{ id: number }",
+                    "resolved": "{ id: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "selectMenuItem": {
+                "complexType": {
+                    "signature": "(id: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to run on menu item selection",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/simple/menu/tet-navigation-mobile/tet-navigation-mobile.js

@@ -54,13 +54,13 @@ export class TetNavigationMobile {
         this.mainDropdownToggle.emit(isTogglerExpanded);
     }
     render() {
-        return (h(Host, { key: '5104216bb2edc64c0e7ab9910ae2d86ed2990ac5' }, h("navigation", { key: '742543100a07201af74e360151329e15abfe062e', class: {
+        return (h(Host, { key: '35606e40e1827864f56e1487083b9baa54eda823' }, h("navigation", { key: '9e304ec60cd13e6a8f19511be5d3dc68e3b41172', class: {
                 'navigation': true,
                 'navigation--dark': this.darkMode
-            } }, h("div", { key: '16452725edd7d74481f7d153b2de80016fac0972', class: "navigation__nav-bar" }, h("slot", { key: '27c9dcc512c71dd156255e2a8d5db2785a6e29da' })), this.isTogglerVisible && (h("span", { key: '33191a9c67089497b64d2bf26c6131a6850c42e2', class: "navigation__toggler", onClick: this.onTogglerClick, onKeyDown: (e) => this.handleKeyDown(e), tabIndex: 0 }, h("tet-icon", { key: '1d5a80d83c3d82c71ec0b34c6f657f3037c66fb8', theme: this.darkMode ? "dark" : "light", name: this.isTogglerExpanded ? "close" : "burger" }))), h("div", { key: '9e00f24ae88eb72879981fbcc1a0ef02677e5b9c', class: {
+            } }, h("div", { key: '3b790bc9a70db3e62cb83186483244cc81acc67c', class: "navigation__nav-bar" }, h("slot", { key: 'bf606c7b0e8963fec3ba9dbb004e0c2d0e67038f' })), this.isTogglerVisible && (h("span", { key: 'ee24cbc7cffc73a71bcaf85487fefeccfadb6afc', class: "navigation__toggler", onClick: this.onTogglerClick, onKeyDown: (e) => this.handleKeyDown(e), tabIndex: 0 }, h("tet-icon", { key: 'ccf44b81a4835a4124f73f254d718e65e6ea3a02', theme: this.darkMode ? "dark" : "light", name: this.isTogglerExpanded ? "close" : "burger" }))), h("div", { key: '9f11db71e69bf08a54d5cc9219fe74e6c18cc28f', class: {
                 'navigation__dropdown': true,
                 'navigation__dropdown--expanded': this.isTogglerExpanded,
-            }, inert: !this.isTogglerExpanded }, h("slot", { key: '8ba827dbb17a138f93bb0d84724e8fab350846f4', name: "dropdown" })))));
+            }, inert: !this.isTogglerExpanded }, h("slot", { key: '20d2992eee10f4546cd3fb7f84b76eab17650d44', name: "dropdown" })))));
     }
     static get is() { return "tet-navigation-mobile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/structural/tet-accordion/test/tet-accordion.spec.js

@@ -11,8 +11,10 @@ describe('tet-accordion', () => {
       <mock:shadow-root>
         <div class="tet-accordion light-theme tet-accordion--breakpoint-tablet">
           <div class="light tet-accordion__header" tabindex="0">
-            <span class="tet-accordion__header__text">test-header</span>
-            <tet-icon class="tet-accordion__icon" name="chevron-down"></tet-icon>
+            <slot name="header">
+              <span class="tet-accordion__header__text">test-header</span>
+              <tet-icon class="tet-accordion__icon" name="chevron-down"></tet-icon>
+            </slot>
           </div>
           <div class="tet-accordion__content-wrapper" inert="">
             <div class="tet-accordion__content">
@@ -35,8 +37,10 @@ describe('tet-accordion', () => {
       <mock:shadow-root>
         <div class="tet-accordion light-theme tet-accordion--breakpoint-tablet">
           <div class="light tet-accordion__header" tabindex="0">
-            <span class="tet-accordion__header__text">test-header</span>
-            <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
+            <slot name="header">
+              <span class="tet-accordion__header__text">test-header</span>
+              <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
+            </slot>
           </div>
           <div class="tet-accordion__content-wrapper visible">
             <div class="tet-accordion__content">
@@ -59,8 +63,10 @@ describe('tet-accordion', () => {
       <mock:shadow-root>
         <div class="tet-accordion light-theme tet-accordion--border tet-accordion--breakpoint-tablet">
           <div class="light tet-accordion__header" tabindex="0">
-           <span class="tet-accordion__header__text">test-header</span>
-           <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
+            <slot name="header">
+              <span class="tet-accordion__header__text">test-header</span>
+              <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
+            </slot>
           </div>
           <div class="tet-accordion__content-wrapper visible">
             <div class="tet-accordion__content">
@@ -83,8 +89,10 @@ describe('tet-accordion', () => {
       <mock:shadow-root>
         <div class="tet-accordion light-theme tet-accordion--border tet-accordion--breakpoint-tablet">
           <div class="light tet-accordion__header" tabindex="0">
-           <h1 class="tet-accordion__header__text">test-header</h1>
-           <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
+            <slot name="header">
+              <h1 class="tet-accordion__header__text">test-header</h1>
+              <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
+            </slot>
           </div>
           <div class="tet-accordion__content-wrapper visible">
             <div class="tet-accordion__content">

package/dist/collection/components/simple/structural/tet-accordion/tet-accordion.css

@@ -367,8 +367,10 @@
   --accordion-text-color: var(--tc-text-primary);
   --accordion-border-bottom-width: 0.0625rem;
   --accordion-border-color: var(--tc-border-quaternary);
+  --accordion-border-radius: 0;
   --accordion-break-point: 64rem;
   --accordion-header-font: 500 1.5rem/1.75rem Gilroy, Gilroy, Arial, sans-serif;
+  --accordion-header-display: flex;
 }
 
 .dark-theme {
@@ -387,6 +389,7 @@
   color: var(--accordion-text-color);
   background-color: var(--accordion-background-color);
   border-color: var(--accordion-border-color);
+  border-radius: var(--accordion-border-radius);
 }
 .tet-accordion.transparent-bg {
   --accordion-background-color: transparent;
@@ -401,22 +404,22 @@
   font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
   padding: var(--accordion-header-mobile-padding);
   cursor: pointer;
-  display: flex;
+  display: var(--accordion-header-display);
   line-height: 1.5rem;
   width: 100%;
   border-radius: 0.125rem;
 }
 @media all and (min-width: 31.25rem) {
   .tet-accordion--breakpoint-tablet .tet-accordion__header {
-    font: var(--accordion-header-font);
     line-height: 1.75rem;
+    font: var(--accordion-header-font);
     padding: var(--accordion-header-padding);
   }
 }
 @media all and (min-width: 64rem) {
   .tet-accordion--breakpoint-desktop .tet-accordion__header {
-    font: var(--accordion-header-font);
     line-height: 1.75rem;
+    font: var(--accordion-header-font);
     padding: var(--accordion-header-padding);
   }
 }

package/dist/collection/components/simple/structural/tet-accordion/tet-accordion.js

@@ -75,6 +75,7 @@ export class TetAccordion {
             clearTimeout(this.animationCallback);
         }
         this.isOpen = opened;
+        this.openChanged.emit(opened);
         if (opened) {
             this.contentWrapperElement.style.height = `${this.contentElement.offsetHeight}px`;
         }
@@ -107,22 +108,21 @@ export class TetAccordion {
         }
     }
     render() {
-        return (h(Host, { key: '5cb8be76c90bfcee5020fc7ba3166366f55a838a' }, h("div", { key: '6032b98136706761264615dee0d298fc5a7b5870', class: {
+        return (h(Host, { key: '886fb4f83faa94ad7410f2d47acc7f035a64336b' }, h("div", { key: 'e56bd24d010d3fb274acddb59e7199c332b5026e', class: {
                 'tet-accordion': true,
                 'tet-accordion--border': this.withBorder,
                 [`${this.theme}-theme`]: true,
                 [`tet-accordion--breakpoint-${this.breakpoint}`]: true,
                 'transparent-bg': this.transparentBackground,
-            } }, h("div", { key: 'bcc2ef67d8940b2afba99052d078dace1a4ebf49', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, this.headerImageSrc && this.headerImageSrc !== '' &&
-            h("img", { key: 'ec033c9757fda386dd0fe1ded3a5fdc0012eaedb', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" }), this.renderHeading(), h("tet-icon", { key: '8b6c987ec3c13df70ea2f3cb1c87d7817d7ce0e9', name: "chevron-down", class: {
+            } }, h("div", { key: '8c88be9d31f4ded0c621895f0623cef4ecd712d0', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, h("slot", { key: '2b7e74f5e1731bc1507ed5803b0789f9eb0a8828', name: "header" }, this.headerImageSrc && this.headerImageSrc !== '' && (h("img", { key: '44ec72bd3a6bd2817b9c3f488202fc864247cef7', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" })), this.renderHeading(), h("tet-icon", { key: 'bf57af59c57a0721484a3f9319262f5319cd4a32', name: "chevron-down", class: {
                 'tet-accordion__icon': true,
                 'open': this.isOpen
-            } })), h("div", { key: '3bb5f8201adfcf87871d7858e0ab7089c02d0ca6', ref: (element) => (this.contentWrapperElement = element), class: {
+            } }))), h("div", { key: '2f471629b97b55e5a0c000ba722d72418030e74f', ref: (element) => (this.contentWrapperElement = element), class: {
                 'tet-accordion__content-wrapper': true,
                 'visible': this.isOpen
-            }, inert: !this.isOpen }, h("div", { key: '7666d3ecd3f521ac4c1598a66d1562699f18d338', ref: (element) => (this.contentElement = element), class: {
+            }, inert: !this.isOpen }, h("div", { key: '27eb3e6358c0e8175a4816c4c8038ee5ca3a6e51', ref: (element) => (this.contentElement = element), class: {
                 'tet-accordion__content': true
-            } }, h("slot", { key: '4ea0c348cebe14755c72682e81196a353ab0387d' }))))));
+            } }, h("slot", { key: '9bb502e80dce98845000de3ca80fae819691f222' }))))));
     }
     static get is() { return "tet-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -320,6 +320,24 @@ export class TetAccordion {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "openChanged",
+                "name": "openChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The event to be emitted on the `isOpen` value change."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
     static get methods() {
         return {
             "open": {

package/dist/collection/components/simple/structural/tet-expansion-panel/tet-expansion-panel.js

@@ -63,7 +63,7 @@ export class TetExpansionPanel {
         return this.state;
     }
     render() {
-        return (h("div", { key: '9186bd22d801591e5f4812b51d694cd75344e6d1', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: '02529a3c3c8477bd4bf076089c899353a96c9868', class: "tet-expansion-panel-content" }, h("slot", { key: '68a1000b0b95c066098df6554d30da7e04dfd695' }))));
+        return (h("div", { key: '1bdf3e7d94331f22f566fdb87c94931840def4a5', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: '6c839184d43404b150ae12cb76b721cb50356510', class: "tet-expansion-panel-content" }, h("slot", { key: '5bfab5ebbb8af4f113168062514c4330c7c8991b' }))));
     }
     static get is() { return "tet-expansion-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/text-blocks/tet-notification/tet-notification.js

@@ -116,7 +116,7 @@ export class TetNotification {
     }
     render() {
         const { headerTitle, content } = this;
-        return (h(Host, { key: 'f75c38654ccf516dae630d24500ae4012dc4f77e' }, h("div", { key: 'a8e871419362e0e7def12d0a58543a4b64ce273b', class: { notification: true, [this.theme]: true } }, h("div", { key: '28c58aef658453f79832dcc0dffd688b25f82af5', class: { item: true, [this.type]: true } }, h("div", { key: '0710a4d2866e88e2969313d1b15624a4c3535887', class: "header" }, this.renderTypeIcon(), h("div", { key: '9732db810950abad8979e07f78290aa801489a89', class: "title" }, headerTitle), this.renderCloseButton()), h("div", { key: 'b2f2d0503048107ae7682d5e13494eda9100a246', class: "content" }, h("span", { key: 'd44ef580deee0543f6dbe715e2045d578d47a890', innerHTML: content }), h("div", { key: 'fdec8f65aeb485938925b36cc802160f294a2d20' }, h("slot", { key: '9712b8dbf5ea112ea3c24e3eb1ab0c494f64839a', name: "button" })))))));
+        return (h(Host, { key: '86ab02bbd92be83e9a17affb1784e003728679d0' }, h("div", { key: '9a7b72c6c084413e38943ba82b4146a33c856ebc', class: { notification: true, [this.theme]: true } }, h("div", { key: 'a1e4b4223cbcfeb373b41c3e942db2750545ea8b', class: { item: true, [this.type]: true } }, h("div", { key: '0609d2e9df415ae37af0c0c7f06706c1e56aa0a7', class: "header" }, this.renderTypeIcon(), h("div", { key: '1949b0d2bd0dc5a7da2d8af2f8d3a62454dd29d1', class: "title" }, headerTitle), this.renderCloseButton()), h("div", { key: '06edb64c557c79a5f27454304a6ade73d429674e', class: "content" }, h("span", { key: '79e27b6efc08612d320fe70b2b5a9544956d3bb9', innerHTML: content }), h("div", { key: '28d8a855084487f335abcee1708688492313a354' }, h("slot", { key: 'd0250421071514146aee9c5193c278f23d74d89a', name: "button" })))))));
     }
     static get is() { return "tet-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/text-blocks/tet-tooltip/tet-tooltip.js

@@ -351,7 +351,7 @@ export class TetTooltip {
         return isTooltipOutOfBounds;
     }
     render() {
-        return h(Host, { key: 'e48a0a26063b3622c0084ec75a59994e198a737e', class: { visible: this.showTooltip } }, this.renderTooltip());
+        return h(Host, { key: '5e7dce81750f672a0162b5ecc5ae024bb189bec9', class: { visible: this.showTooltip } }, this.renderTooltip());
     }
     static get is() { return "tet-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-address-offers-view/tet-address-offers-view.js

@@ -129,7 +129,7 @@ export class TetAddressOffersView {
         return h(Fragment, null);
     }
     render() {
-        return (h(Host, { key: '34724aedfb30487a9665b06ae310365a878ebe76' }, this.renderContactForm(), this.renderHeader(), this.address && this.renderBody()));
+        return (h(Host, { key: '3cb215cbb47dc17f0e7f04ffe7fab0f1671c07ed' }, this.renderContactForm(), this.renderHeader(), this.address && this.renderBody()));
     }
     static get is() { return "tet-address-offers-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-b2b-configurator/partials/tet-b2b-configurator-cart/test/tet-b2b-configurator-cart.spec.js

@@ -0,0 +1,41 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TetB2bConfiguratorCart } from "../tet-b2b-configurator-cart";
+describe('tet-b2b-configurator-cart', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [TetB2bConfiguratorCart],
+            html: `<tet-b2b-configurator-cart></tet-b2b-configurator-cart>`
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-b2b-configurator-cart>
+        <mock:shadow-root>
+          <div class="cart edit light">
+            <tet-accordion 
+              class="cart__accordion cart__accordion--edit cart__accordion--rounded" 
+              header="components-b2b-cart-title" 
+              isopen="" 
+              theme="light" 
+              transparentbackground="" 
+              withborder=""
+            >
+              <div class="cart__title--edit">
+                components-b2b-cart-title
+              </div>
+              <div class="cart__content">
+                <div class="empty-cart">
+                  <tet-icon class="empty-cart__icon" name="tc-empty" theme="light"></tet-icon>
+                  <div class="empty-cart__title">
+                    components-b2b-cart-empty-title
+                  </div>
+                  <div class="empty-cart__description">
+                    components-b2b-cart-empty-description
+                  </div>
+                </div>
+              </div>
+            </tet-accordion>
+          </div>
+        </mock:shadow-root>
+      </tet-b2b-configurator-cart>
+    `);
+    });
+});