@tet/tet-components 1.3.55-testing → 1.3.56-production

package/dist/collection/components/advanced/address/tet-address-search/tet-address-search.js

@@ -13,6 +13,18 @@ import { a11yBtnClick } from "../../../../services/utils/a11y";
  */
 export class TetAddressSearch {
     constructor() {
+        this.handleClick = () => {
+            this.elementActive = true;
+            this.focusVisible = false;
+        };
+        this.handleInputTyping = (event) => {
+            if (event === null || event === void 0 ? void 0 : event.data) {
+                this.focusVisible = false;
+            }
+        };
+        this.handleActiveStateChange = (event) => {
+            this.elementActive = event.detail !== null;
+        };
         /**
          * Toggles the icon on the right side of the input based on the current input value.
          *
@@ -124,6 +136,13 @@ export class TetAddressSearch {
                 postalCode: event.detail.value.postalCode
             });
         };
+        /**
+         * Handles the search button click.
+         */
+        this.handleSearchSubmit = () => {
+            var _a;
+            this.searchSubmitted.emit((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.value);
+        };
         /**
          * Renders the content that is shown when there are no matching addresses.
          */
@@ -138,6 +157,7 @@ export class TetAddressSearch {
         this.addressKey = '';
         this.newStyle = false;
         this.newFormsStyle = false;
+        this.redesignedStyle = false;
         this.theme = 'classic';
         this.manualAddressTriggers = false;
         this.isInputInvalid = false;
@@ -145,6 +165,11 @@ export class TetAddressSearch {
         this.inputIconRight = '';
         this.inputValueLength = 0;
         this.isLoading = false;
+        this.isKeyboardFocus = true;
+        this.focusVisible = false;
+        this.elementActive = false;
+        this.searchButtonText = 'Parbaudīt';
+        this.closeButtonText = 'Aizvert';
     }
     onLanguageChanged(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
@@ -177,16 +202,31 @@ export class TetAddressSearch {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     async componentDidLoad() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         this.nativeInput = await ((_a = this.inputComponent) === null || _a === void 0 ? void 0 : _a.getInputHtmlElement());
         (_b = this.nativeInput) === null || _b === void 0 ? void 0 : _b.addEventListener('input', this.toggleInputClearIcon);
+        (_c = this.nativeInput) === null || _c === void 0 ? void 0 : _c.addEventListener('input', this.handleInputTyping);
+        (_d = this.nativeInput) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.handleClick);
+        (_e = this.autocomplete) === null || _e === void 0 ? void 0 : _e.addEventListener('activeComponentStateChanged', this.handleActiveStateChange);
         if (this.addressKey) {
             await this.searchByAddressKey();
         }
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b, _c, _d;
         (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', this.toggleInputClearIcon);
+        (_b = this.nativeInput) === null || _b === void 0 ? void 0 : _b.removeEventListener('input', this.handleInputTyping);
+        (_c = this.nativeInput) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.handleClick);
+        (_d = this.autocomplete) === null || _d === void 0 ? void 0 : _d.removeEventListener('activeComponentStateChanged', this.handleActiveStateChange);
+    }
+    /**
+     * Listen for Tab key event.
+     */
+    onKeyDown(event) {
+        var _a;
+        if (event.key === 'Tab' && !((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.value)) {
+            this.focusVisible = true;
+        }
     }
     /**
      * Initiates the address search by the address key and sets the value of the input field.
@@ -212,17 +252,29 @@ export class TetAddressSearch {
     }
     render() {
         const inputClasses = ['autocomplete-input'];
+        if (this.redesignedStyle) {
+            inputClasses.push('address-search--redesigned__input-field');
+        }
         if (this.newStyle) {
             inputClasses.push('address-search__input--rounded');
         }
         if (this.newFormsStyle) {
             inputClasses.push('address-search__input--forms');
         }
-        return (h(Host, { key: '1fbaedcc532afd50a5182bdf2c91cb16953b86fc', class: {
+        return (h(Host, { key: '8759d0569a75559a9e9bf5f6124aa5f1b0d8e90c', class: {
                 "address-search": true,
+                "address-search--redesigned": this.redesignedStyle,
+                "keyboard-focus": this.focusVisible,
+                "active": this.elementActive,
                 [this.theme]: true,
-            } }, h("tet-autocomplete", { key: '33ac486acae60a766920e8089771add99fd0b7c2', part: "autocomplete", optionsFilterAction: this.debounceAddressFilter, onOptionSelected: this.handleAutocompleteOptionSelection, noOptionsMessage: t('components-address-search-not-found-message'), noOptionsRenderFunction: this.manualAddressTriggers ? this.renderManualAddressInputNoOptionsMessage : undefined, clearCallback: this.autocompleteClearInputCallback, finishedLoading: this.finishedLoading, darkTheme: this.theme === 'dark' || this.theme === 'mint-original', newStyle: this.newStyle, ref: (el) => (this.autocomplete = el), optionsIcon: "location" }, h("tet-input", { key: 'c6a059f5bba8cb92b1d34d8b6f527e5ac5058c5e', class: "address-search__input", part: "input", "input-class": inputClasses.join(' '), "input-placeholder": this.placeholder, "input-disabled": this.inputDisabled, label: this.label, accessibilityLabel: this.accessibilityLabel, iconLeft: this.newFormsStyle ? '' : 'search', iconRight: this.inputIconRight, iconRightClickCallback: this.clearInputAction, theme: this.theme, ref: (el) => (this.inputComponent = el), error: this.isInputInvalid, autocomplete: "off" }, this.isLoading &&
-            h("tet-spinner", { key: 'ea6503122607ed935d97b03bd4c7b3fbdb2d12e3', theme: this.theme === 'dark' ? 'dark' : 'light', class: "address-search__spinner", size: "small" })))));
+            } }, h("tet-autocomplete", { key: 'b13a385aee69b5bc67122d13f63be394d8ad6df7', class: `address-search--redesigned__autocomplete
+            ${this.theme === 'dark' || this.theme === 'mint-original' ? 'dark' : ''}
+          `, part: "autocomplete", optionsFilterAction: this.debounceAddressFilter, onOptionSelected: this.handleAutocompleteOptionSelection, noOptionsMessage: t('components-address-search-not-found-message'), noOptionsRenderFunction: this.manualAddressTriggers ? this.renderManualAddressInputNoOptionsMessage : undefined, clearCallback: this.autocompleteClearInputCallback, finishedLoading: this.finishedLoading, darkTheme: this.theme === 'dark' || this.theme === 'mint-original', newStyle: this.newStyle, ref: (el) => (this.autocomplete = el), optionsIcon: "location", redesignedStyle: this.redesignedStyle }, this.redesignedStyle ? (h("div", { class: "address-search--redesigned__autocomplete-content" }, h("div", { class: `address-search--redesigned__input-wrapper
+                ${this.theme === 'dark' || this.theme === 'mint-original' ? 'dark' : ''}` }, h("tet-input", { class: `address-search__input address-search--redesigned__input
+                    ${this.theme === 'dark' || this.theme === 'mint-original' ? 'dark' : ''}`, part: "input", "input-class": inputClasses.join(' '), "input-placeholder": this.placeholder, "input-disabled": this.inputDisabled, label: this.label, accessibilityLabel: this.accessibilityLabel, iconLeft: this.newFormsStyle ? '' : 'search', iconRight: this.inputIconRight, iconRightClickCallback: this.clearInputAction, ref: (el) => (this.inputComponent = el), error: this.isInputInvalid, autocomplete: "off" }, this.isLoading &&
+            h("tet-spinner", { theme: this.theme === 'dark' || this.theme === 'mint-original' ? 'dark' : 'light', class: "address-search__spinner", size: "small" }))), h("div", { class: `address-search--redesigned__button-wrapper
+                ${this.theme === 'dark' || this.theme === 'mint-original' ? 'dark' : ''}` }, h("tet-button", { class: "submit-address js-button-mobile button-icon", type: "primary", "accessibility-label": t('components-address-search-search'), iconName: "arrow-right", iconMode: true, onClick: this.handleSearchSubmit }), h("tet-button", { class: "submit-address button js-button", type: "primary", size: "medium", onClick: this.handleSearchSubmit }, this.searchButtonText)))) : (h("tet-input", { class: "address-search__input", part: "input", "input-class": inputClasses.join(' '), "input-placeholder": this.placeholder, "input-disabled": this.inputDisabled, label: this.label, accessibilityLabel: this.accessibilityLabel, iconLeft: this.newFormsStyle ? '' : 'search', iconRight: this.inputIconRight, iconRightClickCallback: this.clearInputAction, theme: this.theme, ref: (el) => (this.inputComponent = el), error: this.isInputInvalid, autocomplete: "off" }, this.isLoading &&
+            h("tet-spinner", { theme: this.theme === 'dark' ? 'dark' : 'light', class: "address-search__spinner", size: "small" })))), this.redesignedStyle && (h("div", { key: '96f244673d34ff30d5f6ad8ae1b7e3627795994c', class: "address-search--redesigned__close-button" }, h("tet-button", { key: '4f611ef81d01191839b6e601e76b798414c8a061', type: "link", iconName: "close", theme: "dark" }, this.closeButtonText)))));
     }
     static get is() { return "tet-address-search"; }
     static get encapsulation() { return "shadow"; }
@@ -388,6 +440,24 @@ export class TetAddressSearch {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "redesignedStyle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the redesigned style."
+                },
+                "attribute": "redesigned-style",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,
@@ -459,6 +529,42 @@ export class TetAddressSearch {
                 "attribute": "input-disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "searchButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text for the search button. Defaults to \"Parbaud\u012Bt\"."
+                },
+                "attribute": "search-button-text",
+                "reflect": false,
+                "defaultValue": "'Parbaud\u012Bt'"
+            },
+            "closeButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text for the close button. Defaults to \"Aizvert\"."
+                },
+                "attribute": "close-button-text",
+                "reflect": false,
+                "defaultValue": "'Aizvert'"
             }
         };
     }
@@ -466,7 +572,10 @@ export class TetAddressSearch {
         return {
             "inputIconRight": {},
             "inputValueLength": {},
-            "isLoading": {}
+            "isLoading": {},
+            "isKeyboardFocus": {},
+            "focusVisible": {},
+            "elementActive": {}
         };
     }
     static get events() {
@@ -521,6 +630,21 @@ export class TetAddressSearch {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "searchSubmitted",
+                "name": "searchSubmitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The event that is emitted when the user clicks the search button."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -556,4 +680,13 @@ export class TetAddressSearch {
                 "methodName": "onInputDisabledStateChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/advanced/address/tet-autocomplete/test/tet-autocomplete.spec.js

@@ -69,7 +69,7 @@ describe('tet-autocomplete', () => {
       <tet-autocomplete class="autocomplete">
         <mock:shadow-root>
           <slot></slot>
-          <div class="autocomplete-options-container" role="combobox" aria-expanded>
+          <div class="autocomplete-options-container" role="combobox" aria-expanded part="autocomplete-options-container">
             <ul class="autocomplete-options" role="listbox" tabindex="-1">
               <li class="autocomplete-options-item" id="randomString-0" role="option"><span>Test Value</span></li>
               <li class="autocomplete-options-item" id="randomString-1" role="option"><span>test value</span></li>
@@ -96,7 +96,7 @@ describe('tet-autocomplete', () => {
       <tet-autocomplete class="autocomplete">
         <mock:shadow-root>
           <slot></slot>
-          <div class="autocomplete-options-container" role="combobox" aria-expanded>
+          <div class="autocomplete-options-container" role="combobox" aria-expanded part="autocomplete-options-container">
             <ul class="autocomplete-options" role="listbox" tabindex="-1">
               <li class="autocomplete-options-item" id="randomString-0" role="option"><span>This is the first label</span></li>
               <li class="autocomplete-options-item" id="randomString-1" role="option"><span>THIS IS ALSO A LABEL</span></li>

package/dist/collection/components/advanced/address/tet-autocomplete/tet-autocomplete.css

@@ -492,6 +492,34 @@
   padding-bottom: 0;
   margin-bottom: 0.375rem;
 }
+.autocomplete-options-container.redesigned-style .autocomplete-options {
+  margin-right: 0.25rem;
+}
+.autocomplete-options-container.redesigned-style .autocomplete-options::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+.autocomplete-options-container.redesigned-style .autocomplete-options::-webkit-scrollbar-thumb {
+  background: var(--tc-border-quaternary);
+  border-radius: 0.5rem;
+}
+.autocomplete-options-container.redesigned-style .autocomplete-options::-webkit-scrollbar-track {
+  background: var(--tc-layer-primary);
+}
+.autocomplete-options-container.redesigned-style.dark .autocomplete-options {
+  margin-right: 0.25rem;
+}
+.autocomplete-options-container.redesigned-style.dark .autocomplete-options::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+.autocomplete-options-container.redesigned-style.dark .autocomplete-options::-webkit-scrollbar-thumb {
+  background: var(--tc-border-quaternary-dark);
+  border-radius: 0.5rem;
+}
+.autocomplete-options-container.redesigned-style.dark .autocomplete-options::-webkit-scrollbar-track {
+  background: var(--tc-layer-primary-dark);
+}
 .autocomplete-options-container .autocomplete-options-item {
   margin: 0 0.375rem;
 }

package/dist/collection/components/advanced/address/tet-autocomplete/tet-autocomplete.js

@@ -120,7 +120,7 @@ export class TetAutocomplete {
             return this.noOptionsMessage;
         };
         this.renderOptionsLoader = () => {
-            if (!this.showLoader || this.newStyle) {
+            if (!this.showLoader || this.newStyle || this.redesignedStyle) {
                 return;
             }
             return (h("ul", { class: "autocomplete-options" }, h("li", { class: { 'autocomplete-options-loader': true, 'dark': this.darkTheme } }, h("tet-loader", null))));
@@ -156,10 +156,13 @@ export class TetAutocomplete {
                 });
             }
             return (h("li", { class: { 'autocomplete-options-item': true,
-                    'active': option === this.activeOption, 'dark': this.darkTheme, 'focus-visible': (option === this.activeOption && this.isKeyboardFocus) }, part: cssPart, onClick: onClickAction, ref: (element) => option === this.activeOption && (this.activeOptionElement = element), id: `${this.internalUniqueId}-${idx}`, role: "option" }, option.value === 'manual-input'
+                    'active': option === this.activeOption, 'dark': this.darkTheme, 'focus-visible': (option === this.activeOption && this.isKeyboardFocus) }, part: cssPart, onClick: onClickAction, onKeyDown: (event) => {
+                    if (event.key === 'Enter')
+                        onClickAction(option);
+                }, ref: (element) => option === this.activeOption && (this.activeOptionElement = element), id: `${this.internalUniqueId}-${idx}`, role: "option" }, option.value === 'manual-input'
                 ? h("a", { class: { 'tet-link': true, 'dark': this.darkTheme, 'manual-input': true }, innerHTML: optionLabel })
                 : [
-                    this.optionsIcon && this.newStyle && (h("tet-icon", { class: "icon", name: this.optionsIcon })),
+                    this.optionsIcon && (this.newStyle || this.redesignedStyle) && (h("tet-icon", { class: "icon", name: this.optionsIcon })),
                     h("span", { innerHTML: optionLabel })
                 ]));
         };
@@ -176,8 +179,9 @@ export class TetAutocomplete {
             return (h("div", { class: {
                     'autocomplete-options-container': true,
                     'dark': this.darkTheme,
-                    'new-style': this.newStyle,
-                }, role: "combobox", "aria-expanded": this.showOptions, "aria-activedescendant": this.activeOption ? `${this.internalUniqueId}-${this.filteredOptions.indexOf(this.activeOption)}` : undefined }, h("ul", { class: "autocomplete-options", ref: (el) => (this.optionsContainer = el), role: "listbox", tabindex: "-1" }, showNoOptionsMessage && this.renderNoOptionsMessage(), options.map(this.renderOption))));
+                    'new-style': this.newStyle || this.redesignedStyle,
+                    'redesigned-style': this.redesignedStyle,
+                }, part: "autocomplete-options-container", role: "combobox", "aria-expanded": this.showOptions, "aria-activedescendant": this.activeOption ? `${this.internalUniqueId}-${this.filteredOptions.indexOf(this.activeOption)}` : undefined }, h("ul", { class: "autocomplete-options", ref: (el) => (this.optionsContainer = el), role: "listbox", tabindex: "-1" }, showNoOptionsMessage && this.renderNoOptionsMessage(), options.map(this.renderOption))));
         };
         this.showOptionsOnEscapeClear = false;
         this.defaultOptions = [];
@@ -191,6 +195,7 @@ export class TetAutocomplete {
         this.highlightOptionsKeyword = true;
         this.darkTheme = false;
         this.optionsIcon = '';
+        this.redesignedStyle = false;
         this.filteredOptions = [];
         this.activeOption = undefined;
         this.showOptions = false;
@@ -373,10 +378,10 @@ export class TetAutocomplete {
         }
     }
     render() {
-        return (h(Host, { key: 'a9b1ddb0fda9684c441cb35b3356c31af5f44936', class: {
+        return (h(Host, { key: '32cf8dabcce07274ae091b07fcc4baaf6f5d34cd', class: {
                 'autocomplete': true,
                 'dark': this.darkTheme,
-            } }, h("slot", { key: '66f8c2dc5cb4d5a2e4698099147208351cf35673' }), this.renderOptionsLoader(), this.renderOptions(this.filteredOptions)));
+            } }, h("slot", { key: '08720835a9b06a1196d11e5734a1d1a8a43fa192' }), this.renderOptionsLoader(), this.renderOptions(this.filteredOptions)));
     }
     static get is() { return "tet-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -610,6 +615,24 @@ export class TetAutocomplete {
                 "attribute": "options-icon",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "redesignedStyle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the redesigned style."
+                },
+                "attribute": "redesigned-style",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/advanced/cards/tet-compare-card/tet-compare-card.js

@@ -212,7 +212,7 @@ export class TetCompareCard {
      */
     renderCard() {
         var _a, _b, _c, _d;
-        return (h("div", { onClick: this.clickCallback, class: {
+        return (h("div", { onClick: this.clickCallback, onKeyDown: () => { }, class: {
                 'card': true,
                 [`${this.currentCardType}`]: true,
                 [`${this.theme}`]: true,

package/dist/components/index.js

@@ -84,7 +84,7 @@ import { TetThankYouViewV3 } from './tet-thank-you-view-v3.js';
 import { TetTooltip } from './tet-tooltip.js';
 import { TetTvGiftBlock } from './tet-tv-gift-block.js';
 import { TetTvGiftList } from './tet-tv-gift-list.js';
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-37ed3ebb.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-599035b8.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {