@tet/tet-components 1.4.33-testing → 1.4.34-staging

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

@@ -14,8 +14,10 @@ export class TetSupportSearch {
         this.disabled = false;
         this.searchApiUrl = '';
         this.maxSearchResults = 5;
+        this.searchQuery = '';
         this.inputIconRight = '';
         this.inputValueLength = 0;
+        this.inputValue = '';
         this.isLoading = false;
     }
     /** The event that is emitted when the user clicks the search button. */
@@ -26,10 +28,13 @@ export class TetSupportSearch {
     nativeInput;
     /** The reference to the tet-input element. */
     inputComponent;
+    /** The reference to the autocomplete element. */
+    autocompleteComponent;
     /** Pre-bound callback references to preserve component context when passing methods as handlers. */
     boundOptionsFilterFunction = this.optionsFilterFunction.bind(this);
     boundFinishedLoadingFunction = this.finishedLoading.bind(this);
     boundHandleAutocompleteOptionSelection = this.handleAutocompleteOptionSelection.bind(this);
+    boundHandleClearInput = this.handleClearInput.bind(this);
     boundHandleSearchSubmit = this.handleSearchSubmit.bind(this);
     boundHandleInputRightIcon = this.handleInputRightIcon.bind(this);
     boundRenderOption = this.renderOption.bind(this);
@@ -46,29 +51,44 @@ export class TetSupportSearch {
         if (this.nativeInput) {
             this.nativeInput.value = '';
         }
+        this.inputValue = '';
         this.inputValueLength = 0;
         this.isLoading = false;
         this.removeIconRight();
     }
+    componentWillLoad() {
+        this.initializeInputValue();
+    }
     async componentDidLoad() {
-        this.nativeInput = await this.inputComponent.getInputHtmlElement();
+        this.nativeInput = await this.inputComponent?.getInputHtmlElement();
         this.nativeInput?.addEventListener('input', this.boundHandleInputRightIcon);
     }
     disconnectedCallback() {
         this.nativeInput?.removeEventListener('input', this.boundHandleInputRightIcon);
     }
+    /** Initializes local input state from the initial `searchQuery` value. */
+    initializeInputValue() {
+        this.inputValue = this.searchQuery;
+        const normalizedInputValue = normalize(this.inputValue);
+        this.inputValueLength = normalizedInputValue.length;
+        if (normalizedInputValue.length > 0) {
+            this.addClearIcon();
+        }
+    }
     handleInputRightIcon({ target }) {
-        const value = normalize(target.value);
-        this.inputValueLength = value.length;
+        const value = target.value;
+        this.inputValue = value;
+        const normalizedValue = normalize(value);
+        this.inputValueLength = normalizedValue.length;
         if (this.inputValueLength >= this.minSearchLength) {
             this.addLoadIcon();
             this.removeIconRight();
             return;
         }
-        if (value && !this.inputIconRight) {
+        if (normalizedValue && !this.inputIconRight) {
             this.addClearIcon();
         }
-        if (!value && this.inputIconRight) {
+        if (!normalizedValue && this.inputIconRight) {
             this.removeIconRight();
         }
     }
@@ -127,6 +147,9 @@ export class TetSupportSearch {
     handleAutocompleteOptionSelection(event) {
         event.stopPropagation();
         const { label, value, _originalEvent } = event.detail;
+        this.inputValue = label;
+        this.inputValueLength = normalize(label).length;
+        this.addClearIcon();
         const detail = {
             label,
             id: value.id,
@@ -138,19 +161,26 @@ export class TetSupportSearch {
     handleSearchSubmit() {
         this.searchSubmitted.emit(this.nativeInput?.value ?? '');
     }
+    async handleClearInput() {
+        if (typeof this.autocompleteComponent?.clear === 'function') {
+            await this.autocompleteComponent.clear(false);
+            return;
+        }
+        await this.resetInputState();
+    }
     renderOption(option) {
         const { description, categories, htmlLabel } = option.value;
-        return (h("div", { part: "dropdown-option" }, h("tet-icon", { part: "option-icon", class: "icon", name: "tc-arrow-right" }), h("div", { part: "dropdown-option-content" }, h("div", { part: "option-label", innerHTML: htmlLabel }), description && (h("div", { part: "option-description", innerHTML: description })), categories?.length && (h("div", { part: "option-categories" }, categories.map((category, i) => ([
+        return (h("div", { part: "dropdown-option" }, h("tet-icon", { part: "option-icon", class: "icon", name: "tc-arrow-right" }), h("div", { part: "dropdown-option-content" }, h("div", { part: "option-label", innerHTML: htmlLabel }), description && (h("div", { part: "option-description", innerHTML: description })), categories?.length > 0 && (h("div", { part: "option-categories" }, categories.map((category, i) => ([
             h("span", { innerHTML: category }),
             (i < categories.length - 1) && (h("tet-icon", { name: "tc-chevron-right-small", theme: this.theme, type: "secondary", part: "option-category-separator" }))
         ])))))));
     }
     render() {
-        return (h(Host, { key: '832a673607e9e8429f10c19a88b9fd7076ddba13', class: {
+        return (h(Host, { key: 'c19a59f10bcbbf3a22332a4dbdba6ef80ca3ea25', class: {
                 "search-container": true,
                 [this.theme]: true,
-            } }, h("div", { key: '0f641ab51548063dfd6b777801ea40448ee6289f', class: "search-container__inner-wrapper" }, h("tet-autocomplete", { key: 'e88d357d4b0765f286ab0d114968a2be4a04845b', optionsFilterAction: this.debounceOptionsFilter, onOptionSelected: this.boundHandleAutocompleteOptionSelection, noOptionsMessage: this.labels.notFoundMessage, customOptionRenderFunction: this.boundRenderOption, finishedLoading: this.boundFinishedLoadingFunction, darkTheme: this.theme === 'dark', newStyle: true }, h("tet-input", { key: '986f6223d66efd470aec5290a929b44a45974c5d', class: "search-container__input", "input-class": `autocomplete-input search-container__input ${this.isLoading ? 'with-loader' : ''}`, "input-placeholder": this.labels.placeholder, "input-disabled": this.disabled, label: this.showInputLabel ? this.labels.label : undefined, accessibilityLabel: this.showInputLabel ? undefined : this.labels.label, iconLeft: "tc-search-short", iconRight: this.inputIconRight, iconRightClickCallback: () => this.resetInputState(), iconRightAccessibilityLabel: this.labels.clearButtonLabel, theme: this.theme, ref: (el) => (this.inputComponent = el), autocomplete: "off" }, this.isLoading &&
-            h("tet-spinner", { key: '1a6c92007123d984ee705c36cdfebf51fed8abce', theme: this.theme, class: "search-container__spinner", size: "small" }))), h("tet-button", { key: 'ea80f77f7f92f6cea202ae463f37a7d6df856770', class: "search-container__button search-container__button--mobile", theme: this.theme, size: "small", "accessibility-label": this.labels.searchButtonLabel, iconName: "tc-arrow-right", iconMode: true, disabled: this.disabled, onClick: this.boundHandleSearchSubmit }), h("tet-button", { key: '5b9f945d4dae43e811083e1f39e8241f5986a5a8', class: "search-container__button search-container__button--desktop", theme: this.theme, size: "large", disabled: this.disabled, onClick: this.boundHandleSearchSubmit }, this.labels.searchButtonLabel))));
+            } }, h("div", { key: 'a95d76001fae0b8e80a1786952b7dc7c68437a3b', class: "search-container__inner-wrapper" }, h("tet-autocomplete", { key: 'e707e6f968e5bd54cdc88caea3b2d4d16091de0d', optionsFilterAction: this.debounceOptionsFilter, onOptionSelected: this.boundHandleAutocompleteOptionSelection, noOptionsMessage: this.labels.notFoundMessage, customOptionRenderFunction: this.boundRenderOption, finishedLoading: this.boundFinishedLoadingFunction, clearCallback: () => this.resetInputState(), darkTheme: this.theme === 'dark', newStyle: true, ref: (el) => (this.autocompleteComponent = el) }, h("tet-input", { key: 'ad8b177a7155bd2c84d6415dd8ecdb945433a19f', class: "search-container__input", "input-class": `autocomplete-input search-container__input ${this.isLoading ? 'with-loader' : ''}`, "input-placeholder": this.labels.placeholder, "input-disabled": this.disabled, label: this.showInputLabel ? this.labels.label : undefined, accessibilityLabel: this.showInputLabel ? undefined : this.labels.label, iconLeft: "tc-search-short", iconRight: this.inputIconRight, iconRightClickCallback: this.boundHandleClearInput, iconRightAccessibilityLabel: this.labels.clearButtonLabel, theme: this.theme, ref: (el) => (this.inputComponent = el), autocomplete: "off", "input-value": this.inputValue }, this.isLoading &&
+            h("tet-spinner", { key: '331c80ed0008613872cfd3838d4e38e2bde4887a', theme: this.theme, class: "search-container__spinner", size: "small" }))), h("tet-button", { key: '97dbefee1f3d006a311eaed3b819aaefa73dcd8c', class: "search-container__button search-container__button--mobile", theme: this.theme, size: "small", "accessibility-label": this.labels.searchButtonLabel, iconName: "tc-arrow-right", iconMode: true, disabled: this.disabled, onClick: this.boundHandleSearchSubmit }), h("tet-button", { key: 'd2db672ed4f0dc01f1a7301a812b9cde1d89dde4', class: "search-container__button search-container__button--desktop", theme: this.theme, size: "medium", disabled: this.disabled, onClick: this.boundHandleSearchSubmit }, this.labels.searchButtonLabel))));
     }
     static get is() { return "tet-support-search"; }
     static get encapsulation() { return "shadow"; }
@@ -234,7 +264,7 @@ export class TetSupportSearch {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -294,6 +324,24 @@ export class TetSupportSearch {
                 "attribute": "max-search-results",
                 "reflect": false,
                 "defaultValue": "5"
+            },
+            "searchQuery": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial search query shown in the input."
+                },
+                "attribute": "search-query",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }
@@ -301,6 +349,7 @@ export class TetSupportSearch {
         return {
             "inputIconRight": {},
             "inputValueLength": {},
+            "inputValue": {},
             "isLoading": {}
         };
     }

package/dist/collection/components/basic/buttons/tet-button/tet-button.css

@@ -386,6 +386,8 @@
 
 .button {
   --button-icon-mode-padding-internal: 0.75rem;
+  min-width: 7.5rem;
+  line-height: 1.5rem;
   --button-text-color-current: var(--button-text-color);
   --button-border-color-current: var(--button-border-color);
   --button-background-current: var(--button-background);
@@ -437,11 +439,14 @@
   --button-font-size: var(--button-font-size-small);
   --button-padding: var(--button-padding-small);
   --button-icon-mode-padding-internal: 0.375rem;
+  min-width: 6.25rem;
+  line-height: 1.25rem;
 }
 .button--medium {
   --button-font-size: var(--button-font-size-medium);
   --button-padding: var(--button-padding-medium);
   --button-icon-mode-padding-internal: 0.625rem;
+  min-width: 6.875rem;
 }
 .button__content {
   display: flex;
@@ -799,4 +804,5 @@
   padding: var(--button-icon-mode-padding, var(--button-icon-mode-padding-internal));
   aspect-ratio: 1;
   border-radius: 50%;
+  min-width: auto;
 }

package/dist/collection/components/simple/inputs/tet-input/tet-input.js

@@ -100,6 +100,9 @@ export class TetInput {
     validateInputValue = (value) => {
         this.errorMessages = validate(value, this.validators);
     };
+    preventIconMouseDown(event) {
+        event.preventDefault();
+    }
     renderIcon = (iconName, alignment, callback) => {
         const clickable = Boolean(callback);
         const accessibilityLabel = alignment === 'left'
@@ -111,7 +114,7 @@ export class TetInput {
             'icon-right': alignment === 'right',
             'clickable': clickable
         };
-        return (h("tet-icon", { name: iconName, class: classes, onClick: callback, accessibilityLabel: clickable ? accessibilityLabel : '', onKeyDown: a11yBtnClick }));
+        return (h("tet-icon", { name: iconName, class: classes, onMouseDown: clickable ? this.preventIconMouseDown : undefined, onClick: callback, accessibilityLabel: clickable ? accessibilityLabel : '', onKeyDown: a11yBtnClick }));
     };
     renderErrorMessages = () => {
         return (h("div", { class: { 'errors': true, [`tet-input__${this.theme}`]: true, 'errors--hidden': this.disabled } }, this.errorMessages.map((message) => (h("p", { class: "tet-input__error-message" }, t(message))))));

package/dist/collection/components/simple/inputs/tet-range-slider/tet-range-slider.css

@@ -414,7 +414,7 @@
   margin: -0.25rem;
 }
 .range-slider__control {
-  --button-padding: 0.25rem;
+  --button-icon-mode-padding: 0.25rem;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -115,7 +115,7 @@
   transition: width 2s;
 }
 @media screen and (max-width: 63.9375rem) {
-  .business-navigation {
+  .business-navigation:not(.expandable) {
     flex-direction: row;
     gap: 0.5rem;
     max-width: 100%;
@@ -126,6 +126,7 @@
   }
 }
 .business-navigation.light {
+  --tet-business-navigation-background-color: var(--tc-layer-primary);
   --tet-business-navigation-item-background-color: var(--tc-layer-primary);
   --tet-business-navigation-item-mobile-screen-background-color: var(--tc-layer-secondary);
   --tet-business-navigation-item-hover-background-color: var(--tc-menu-item-hover);
@@ -147,6 +148,7 @@
   transition: outline 0s;
 }
 .business-navigation.dark {
+  --tet-business-navigation-background-color: var(--tc-layer-primary-dark);
   --tet-business-navigation-item-background-color: var(--tc-layer-primary-dark);
   --tet-business-navigation-item-mobile-screen-background-color: var(--tc-layer-secondary-dark);
   --tet-business-navigation-item-hover-background-color: var(--tc-menu-item-hover-dark);
@@ -173,13 +175,9 @@
   padding: 1.5rem;
   box-shadow: var(--tet-expandable-business-navigation-border-shadow);
   border: 0.0625rem solid var(--tet-expandable-business-navigation-border-color);
+  background-color: var(--tet-business-navigation-background-color);
   transition: width 2s;
 }
-@media screen and (max-width: 63.9375rem) {
-  .business-navigation.expandable {
-    display: none;
-  }
-}
 .business-navigation.expandable.closed {
   width: auto;
   padding: 1.5rem 1rem;
@@ -235,7 +233,7 @@
   cursor: pointer;
 }
 @media screen and (max-width: 63.9375rem) {
-  .business-navigation-item {
+  .business-navigation:where(:not(.expandable)) .business-navigation-item {
     display: inline-flex;
     padding: 0.375rem 0.75rem;
     min-width: max-content;
@@ -262,12 +260,12 @@
   height: 100%;
 }
 @media screen and (max-width: 63.9375rem) {
-  .business-navigation-item__wrapper:first-child {
+  .business-navigation:not(.expandable) .business-navigation-item__wrapper:first-child {
     margin-left: 1.5rem;
   }
 }
 @media screen and (max-width: 63.9375rem) {
-  .business-navigation-item__wrapper:last-child {
+  .business-navigation:not(.expandable) .business-navigation-item__wrapper:last-child {
     margin-right: 1.5rem;
   }
 }
@@ -284,7 +282,7 @@
   --icon-color: var(--tet-business-navigation-label-color);
 }
 @media screen and (max-width: 63.9375rem) {
-  .business-navigation-item__icon {
+  .business-navigation:not(.expandable) .business-navigation-item__icon {
     --icon-size: 1.25rem;
   }
 }

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

@@ -14,7 +14,7 @@ export class TetBusinessNavigation {
         this.openedMenuIds = new Set();
     }
     navigationContainer;
-    isPointerDown;
+    isPointerDown = false;
     /** Event emitter for the menu item click passing menu id */
     menuClickEvent;
     componentWillLoad() {
@@ -61,6 +61,9 @@ export class TetBusinessNavigation {
      */
     onContainerMouseDown = (event) => {
         this.isPointerDown = true;
+        if (!this.navigationContainer) {
+            return;
+        }
         this.positions = {
             scrollLeft: this.navigationContainer.scrollLeft,
             mouseX: event.clientX
@@ -82,13 +85,16 @@ export class TetBusinessNavigation {
             return;
         }
         const deltaX = e.clientX - this.positions.mouseX;
-        this.navigationContainer.scrollTo(this.positions.scrollLeft - deltaX, 0);
+        this.navigationContainer?.scrollTo(this.positions.scrollLeft - deltaX, 0);
     };
     /**
      * Removes mouse drag events.
      */
     onContainerMouseUp = () => {
         this.isPointerDown = false;
+        if (!this.navigationContainer) {
+            return;
+        }
         this.navigationContainer.removeEventListener('mousemove', this.onContainerMouseMove);
         this.navigationContainer.removeEventListener('mouseup', this.onContainerMouseUp);
         this.navigationContainer.removeEventListener('mouseleave', this.onContainerMouseUp);
@@ -109,6 +115,7 @@ export class TetBusinessNavigation {
     toggleSublevels = (id) => {
         if (this.selectedItemId !== id) {
             this.selectedItemId = id;
+            this.menuClickEvent.emit({ id });
         }
         const newSet = new Set(this.openedMenuIds);
         newSet.has(id) ? newSet.delete(id) : newSet.add(id);
@@ -140,7 +147,7 @@ export class TetBusinessNavigation {
     /** Render Functional Component*/
     render() {
         const { menuItems, theme, expandable } = this;
-        return (h("div", { key: '7d9c836c1d13e3b7d010946a9ba7e772a1f41987', class: { 'business-navigation': true, [`${theme}`]: true, 'expandable': expandable, 'closed': !this.expanded }, role: "group", onMouseDown: this.onContainerMouseDown, ref: (ref) => (this.navigationContainer = ref) }, this.renderExpandButton(), expandable && h("hr", { key: 'e1dfb7594222452bd8cd2cad8bbfe5e80cefff0e', class: "business-navigation-divider" }), menuItems && menuItems.map(this.renderMenuItem)));
+        return (h("div", { key: 'ba4c02855e8335bf7b32bcb22b7c8858fdfb35bc', class: { 'business-navigation': true, [`${theme}`]: true, 'expandable': expandable, 'closed': !this.expanded }, role: "group", onMouseDown: this.onContainerMouseDown, ref: (ref) => (this.navigationContainer = ref) }, this.renderExpandButton(), expandable && h("hr", { key: 'd209c8db158e5ab23d2a5224335e8421170ff2e0', class: "business-navigation-divider" }), menuItems && menuItems.map(this.renderMenuItem)));
     }
     static get is() { return "tet-business-navigation"; }
     static get encapsulation() { return "shadow"; }
@@ -174,7 +181,7 @@ export class TetBusinessNavigation {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -208,7 +215,7 @@ export class TetBusinessNavigation {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Defines menu is expandable and minimize."

package/dist/collection/components/simple/structural/tet-floating-block/tet-floating-block.css

@@ -393,7 +393,7 @@
   outline-offset: 0rem;
   transition: outline 0s;
 }
-@media only screen and (max-width: 48rem) {
+@media only screen and (max-width: 74.99rem) {
   .floating-block {
     width: 100%;
     max-width: 100%;
@@ -415,11 +415,7 @@
   --accordion-header-mobile-padding: 0.625rem;
   --accordion-header-align-items: center;
   --accordion-header-text-desktop-margin-right: 0.5rem;
-}
-@media only screen and (max-width: 48rem) {
-  .floating-block__accordion {
-    width: 100%;
-  }
+  width: 100%;
 }
 .floating-block__content {
   padding: 0.125rem 0.625rem 0.625rem;

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

@@ -469,7 +469,7 @@
 .search-block-button.mobile {
   display: none;
   --button-icon-size: 1.5rem;
-  --button-padding-small: .5rem;
+  --button-icon-mode-padding: 0.5rem;
 }
 @media screen and (max-width: 48rem) {
   .search-block-button.mobile {

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

@@ -106,7 +106,7 @@ export class TetAddressOffersView {
      */
     renderAddressSearch() {
         const clickCallback = this.checkServiceAvailability.bind(this);
-        return (h("div", { class: "search-block" }, h("tet-address-search", { class: "search-block-input", newStyle: true, theme: this.theme, addressKey: this.addressKey, onAddressSelected: ({ detail }) => this.selectAddress(detail), language: this.language, ...(this.accessibilityLabel ? { "accessibility-label": this.accessibilityLabel } : {}) }), h("tet-button", { class: "search-block-button", theme: this.theme, size: "medium", clickCallback: clickCallback }, h("span", null, t('components-address-offers-view-check'))), h("tet-button", { class: "search-block-button mobile", theme: this.theme, size: "small", iconMode: true, clickCallback: clickCallback, iconName: "arrow-right" })));
+        return (h("div", { class: "search-block" }, h("tet-address-search", { class: "search-block-input", newStyle: true, theme: this.theme, addressKey: this.addressKey, onAddressSelected: ({ detail }) => this.selectAddress(detail), language: this.language, ...(this.accessibilityLabel ? { "accessibility-label": this.accessibilityLabel } : {}) }), h("tet-button", { class: "search-block-button", theme: this.theme, size: "medium", clickCallback: clickCallback }, h("span", null, t('components-address-offers-view-check'))), h("tet-button", { class: "search-block-button mobile", theme: this.theme, iconMode: true, clickCallback: clickCallback, iconName: "arrow-right" })));
     }
     /**
      * Renders address offer available filters.
@@ -137,7 +137,7 @@ export class TetAddressOffersView {
         return h(Fragment, null);
     }
     render() {
-        return (h(Host, { key: 'f9a53d79c3b7d0bf16ed5c42e425af243c4c6f32' }, this.renderContactForm(), this.renderHeader(), this.address && this.renderBody()));
+        return (h(Host, { key: 'f2ecc4fc6b8a72a9f028aa9bfe37fa0d3ead91bf' }, this.renderContactForm(), this.renderHeader(), this.address && this.renderBody()));
     }
     static get is() { return "tet-address-offers-view"; }
     static get encapsulation() { return "shadow"; }