@tet/tet-components 1.3.157-testing → 1.4.0-production

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-multi-year-view/tet-datepicker-multi-year-view.js

@@ -1,33 +1,36 @@
 import { h } from "@stencil/core";
 export class TetDatepickerMultiYearView {
     constructor() {
-        this.getYears = (date) => {
-            const startYear = date.getFullYear();
-            return Array.from({ length: 12 }, (_, index) => startYear + index);
-        };
-        this.handleYearSelection = (year) => {
-            const newDate = new Date(this.internalDate.setFullYear(year));
-            this.internalDateChanged.emit(newDate);
-            this.datepickerViewChanged.emit('year');
-        };
-        this.isSelectedYear = (year) => {
-            var _a;
-            return ((_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.getFullYear()) === year;
-        };
-        this.getYearClasses = (year) => {
-            const currentYear = new Date().getFullYear();
-            return { year: true, current: year === currentYear, selected: this.isSelectedYear(year) };
-        };
         this.years = [];
         this.selectedDate = undefined;
         this.internalDate = undefined;
     }
+    /** Internal date changed event. */
+    internalDateChanged;
+    /** Datepicker view changed event. */
+    datepickerViewChanged;
     handleInternalDateChange(date) {
         this.years = this.getYears(date);
     }
     componentWillLoad() {
         this.years = this.getYears(this.internalDate);
     }
+    getYears = (date) => {
+        const startYear = date.getFullYear();
+        return Array.from({ length: 12 }, (_, index) => startYear + index);
+    };
+    handleYearSelection = (year) => {
+        const newDate = new Date(this.internalDate.setFullYear(year));
+        this.internalDateChanged.emit(newDate);
+        this.datepickerViewChanged.emit('year');
+    };
+    isSelectedYear = (year) => {
+        return this.selectedDate?.getFullYear() === year;
+    };
+    getYearClasses = (year) => {
+        const currentYear = new Date().getFullYear();
+        return { year: true, current: year === currentYear, selected: this.isSelectedYear(year) };
+    };
     render() {
         return (h("div", { key: '2650e159dca9c1e87086c07cdf7976d65a61000e', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
     }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-year-view/tet-datepicker-year-view.js

@@ -3,36 +3,41 @@ import { DATEPICKER_MONTHS } from "../../index";
 import { isUndefinedOrNull } from "../../../../../../services/utils/index";
 export class TetDatepickerYearView {
     constructor() {
-        this.months = DATEPICKER_MONTHS;
-        this.handleMonthSelection = (monthIndex) => {
-            const newDate = new Date(this.internalDate.setMonth(monthIndex));
-            this.internalDateChanged.emit(newDate);
-            this.datepickerViewChanged.emit('month');
-        };
-        this.isMonthSelected = (monthIndex) => {
-            if (isUndefinedOrNull(this.selectedDate)) {
-                return false;
-            }
-            const isSameYear = this.selectedDate.getFullYear() === this.internalDate.getFullYear();
-            const isSameMonth = this.selectedDate.getMonth() === monthIndex;
-            return isSameYear && isSameMonth;
-        };
-        this.getMonthClasses = (monthIndex) => {
-            return {
-                month: true,
-                current: this.isCurrentMonth(monthIndex),
-                selected: this.isMonthSelected(monthIndex)
-            };
-        };
         this.selectedDate = undefined;
         this.internalDate = undefined;
     }
+    months = DATEPICKER_MONTHS;
+    todayDate;
+    /** Event that will be emitted when the internal date will change. */
+    internalDateChanged;
+    /** Event that will be emitted when the datepicker view will change. */
+    datepickerViewChanged;
     componentWillLoad() {
         this.todayDate = new Date();
     }
     isCurrentMonth(monthIndex) {
         return this.todayDate.getMonth() === monthIndex;
     }
+    handleMonthSelection = (monthIndex) => {
+        const newDate = new Date(this.internalDate.setMonth(monthIndex));
+        this.internalDateChanged.emit(newDate);
+        this.datepickerViewChanged.emit('month');
+    };
+    isMonthSelected = (monthIndex) => {
+        if (isUndefinedOrNull(this.selectedDate)) {
+            return false;
+        }
+        const isSameYear = this.selectedDate.getFullYear() === this.internalDate.getFullYear();
+        const isSameMonth = this.selectedDate.getMonth() === monthIndex;
+        return isSameYear && isSameMonth;
+    };
+    getMonthClasses = (monthIndex) => {
+        return {
+            month: true,
+            current: this.isCurrentMonth(monthIndex),
+            selected: this.isMonthSelected(monthIndex)
+        };
+    };
     render() {
         return (h("div", { key: 'c758d4a508468b4424d87d49d169954d8cce83a6', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
     }

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

@@ -5,33 +5,6 @@ import { isUndefinedOrNull } from "../../../../services/utils/index";
  */
 export class TetDatepicker {
     constructor() {
-        this.isMobileScreenSize = () => {
-            return window.innerWidth <= 499;
-        };
-        this.positionDatepicker = () => {
-            const boundElementPosition = this.el.previousElementSibling.getBoundingClientRect();
-            const mobileDatepickerWidth = `${boundElementPosition.width}px`;
-            const desktopDatepickerWidth = '22rem';
-            const topOffsetInPx = 8;
-            if (this.isMobileScreenSize()) {
-                this.datepickerContainer.style.maxWidth = mobileDatepickerWidth;
-            }
-            else {
-                this.datepickerContainer.style.maxWidth = desktopDatepickerWidth;
-            }
-            this.datepickerContainer.style.left = `${boundElementPosition.left}px`;
-            this.datepickerContainer.style.top = `${boundElementPosition.bottom + topOffsetInPx}px`;
-        };
-        this.handleDatepickerClose = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            if (event.target === event.currentTarget) {
-                this.isOpen = false;
-            }
-        };
-        this.getOverlayClasses = () => {
-            return { overlay: true, closed: !this.isOpen, 'overlay-effect': this.overlayEffect };
-        };
         this.locale = 'lv-LV';
         this.overlayEffect = false;
         this.rangePickerMode = false;
@@ -41,6 +14,12 @@ export class TetDatepicker {
         this.rangeDates = {};
         this.internalDate = undefined;
     }
+    datepickerContainer;
+    el;
+    /** Event that will be emitted when date will change. */
+    dateChanged;
+    /** Event that will be emitted when at least one of the range dates will change. */
+    rangeDatesChanged;
     handleDateChanged(event) {
         this.date = event.detail;
     }
@@ -62,7 +41,7 @@ export class TetDatepicker {
         else {
             this.rangeDates.endDate = new Date(date);
         }
-        this.rangeDates = Object.assign({}, this.rangeDates);
+        this.rangeDates = { ...this.rangeDates };
     }
     handleDatepickerClosed() {
         if (!this.rangePickerMode) {
@@ -93,6 +72,33 @@ export class TetDatepicker {
     handleRangeDateChange(newDates) {
         this.rangeDatesChanged.emit(newDates);
     }
+    isMobileScreenSize = () => {
+        return window.innerWidth <= 499;
+    };
+    positionDatepicker = () => {
+        const boundElementPosition = this.el.previousElementSibling.getBoundingClientRect();
+        const mobileDatepickerWidth = `${boundElementPosition.width}px`;
+        const desktopDatepickerWidth = '22rem';
+        const topOffsetInPx = 8;
+        if (this.isMobileScreenSize()) {
+            this.datepickerContainer.style.maxWidth = mobileDatepickerWidth;
+        }
+        else {
+            this.datepickerContainer.style.maxWidth = desktopDatepickerWidth;
+        }
+        this.datepickerContainer.style.left = `${boundElementPosition.left}px`;
+        this.datepickerContainer.style.top = `${boundElementPosition.bottom + topOffsetInPx}px`;
+    };
+    handleDatepickerClose = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.target === event.currentTarget) {
+            this.isOpen = false;
+        }
+    };
+    getOverlayClasses = () => {
+        return { overlay: true, closed: !this.isOpen, 'overlay-effect': this.overlayEffect };
+    };
     render() {
         return (h("div", { key: '94dc6d3440fc038771e83327d796a0001cf63c02', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: 'a806c6be5d30e493e9112653f8cdfdcc30fc8a77', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '99f0e614d1be2c594530959cefe661badc0f898c', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
             h("tet-datepicker-month-view", { key: '5b333ed35cc86ce606e67859f0c6a8420c49a8d6', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&

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

@@ -21,7 +21,7 @@ function isWithinElement(element, x, y) {
  */
 function focusPreviousElement(element) {
     const previous = element.previousElementSibling;
-    previous === null || previous === void 0 ? void 0 : previous.focus();
+    previous?.focus();
 }
 /**
  * Utility function to focus the next element of an element.
@@ -30,19 +30,13 @@ function focusPreviousElement(element) {
  */
 function focusNextElement(element) {
     const next = element.nextElementSibling;
-    next === null || next === void 0 ? void 0 : next.focus();
+    next?.focus();
 }
 /**
  * A simple dropdown component.
  */
 export class TetDropdown {
     constructor() {
-        this.preselectOption = () => {
-            const preselectedOptionIndex = this.options.findIndex((option) => option.preselected);
-            if (preselectedOptionIndex >= 0) {
-                this.handleOptionSelect(preselectedOptionIndex, true)();
-            }
-        };
         this.label = '';
         this.labelLogo = '';
         this.labelLogoGrayscale = '';
@@ -60,6 +54,18 @@ export class TetDropdown {
         this.isOpen = false;
         this.isKeyboardFocus = false;
     }
+    /** Reference to the dropdown wrapper element, which contains the field label and button. */
+    dropdownWrapperElement;
+    /** Reference to the dropdown options menu, which contains the options items. */
+    dropdownOptionsElement;
+    /** Reference to the dropdown button element. */
+    dropdownButtonElement;
+    /** Triggers whenever a single option is selected and returns the option. */
+    optionSelected;
+    /** Triggers whenever a multi-selectable option is checked/unchecked. */
+    optionChecked;
+    /** Triggers whenever an option is changed and returns a list of all selected options. */
+    optionsChanged;
     componentWillLoad() {
         this.preselectOption();
     }
@@ -131,6 +137,12 @@ export class TetDropdown {
         this.isOpen = false;
         this.isKeyboardFocus = false;
     }
+    preselectOption = () => {
+        const preselectedOptionIndex = this.options.findIndex((option) => option.preselected);
+        if (preselectedOptionIndex >= 0) {
+            this.handleOptionSelect(preselectedOptionIndex, true)();
+        }
+    };
     /**
      * Renders the dropdown toggle button and label.
      */

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

@@ -11,76 +11,6 @@ const componentSizes = {
  */
 export class TetExpandableInput {
     constructor() {
-        /**
-         * The currently running animation
-         */
-        this.animation = null;
-        this.setupInput = () => {
-            this.handleInputEventListeners();
-            this.setupInputWidth();
-        };
-        /**
-         * The method to handle hasInputValue state.
-         */
-        this.handleHasInputValueState = (event) => {
-            const { target } = event;
-            if (target instanceof HTMLInputElement) {
-                this.hasInputValue = target.value.length > 0;
-            }
-        };
-        /**
-         * Handles closing the input when the Escape key is pressed and the input is expanded.
-         */
-        this.handleCloseInputOnEsc = (event) => {
-            if (this.expanded && event.key === 'Escape') {
-                this.host.blur();
-            }
-        };
-        /**
-         * Handles closing the input when the close button element is activated.
-         */
-        this.handleCloseButtonAction = (event) => {
-            if (event.type === 'click' ||
-                (event.type === 'keydown' && 'key' in event && (event.key === 'Enter' || event.key === ' '))) {
-                if (event.type === 'keydown') {
-                    event.preventDefault();
-                }
-                this.host.blur();
-            }
-        };
-        /**
-         * Handles the animation of the input.
-         * @param {number} animationStartWidth The width of the input before the animation.
-         * @param {number} animationEndWidth The width of the input after the animation.
-         */
-        this.animateWidth = async (animationStartWidth, animationEndWidth) => {
-            this.cancelAnimation();
-            const animationStartWidthPx = `${animationStartWidth}px`;
-            const animationEndWidthPx = `${animationEndWidth}px`;
-            const animation = this.inputWrapper.animate([
-                {
-                    width: animationStartWidthPx,
-                },
-                {
-                    // For mobile mode unexpanded width must be equal to input field height
-                    width: animationEndWidthPx,
-                },
-            ], {
-                duration: this.animationDuration,
-                fill: 'forwards',
-            });
-            this.animation = animation;
-            try {
-                if (await animation.finished) {
-                    // Commit styles on successful animation.
-                    animation.commitStyles();
-                }
-            }
-            catch (_a) {
-                // Finish animation in case of failure.
-                this.inputWrapper.style.width = animationEndWidthPx;
-            }
-        };
         this.expanded = false;
         this.hasInputValue = false;
         this.class = '';
@@ -102,6 +32,26 @@ export class TetExpandableInput {
         this.closeInputText = '';
         this.darkMode = false;
     }
+    /**
+     * Reference to the input element.
+     */
+    inputHtmlElement;
+    /**
+     * Reference to the input closing element.
+     */
+    closeInputHtmlElement;
+    /**
+     * Reference to the input wrapper element.
+     */
+    inputWrapper;
+    /**
+     * The currently running animation
+     */
+    animation = null;
+    /**
+     * Reference to the host element of the component.
+     */
+    host;
     onModeChange() {
         this.setState(this.expanded);
     }
@@ -132,19 +82,26 @@ export class TetExpandableInput {
      * @param changeState Determines whether the `expanded` state should be changed with animation. Optional parameter.
      */
     async setState(expanded) {
-        var _a, _b;
         if (this.disabled) {
             return;
         }
         if (expanded) {
             this.expand();
-            (_a = this.closeInputHtmlElement) === null || _a === void 0 ? void 0 : _a.classList.remove('hide');
+            this.closeInputHtmlElement?.classList.remove('hide');
         }
         else {
             this.shrink();
-            (_b = this.closeInputHtmlElement) === null || _b === void 0 ? void 0 : _b.classList.add('hide');
+            this.closeInputHtmlElement?.classList.add('hide');
         }
     }
+    /**
+     * The event emitted before the start of the expanding or shrinking animation of the input.
+     */
+    beforeStateChange;
+    /**
+     * The event emitted after the end of the expanding or shrinking animation of the input.
+     */
+    afterStateChange;
     /**
      * The handler method for the blur event.
      */
@@ -167,13 +124,16 @@ export class TetExpandableInput {
         this.inputHtmlElement.removeEventListener('keydown', this.handleCloseInputOnEsc);
         this.inputHtmlElement.removeEventListener('input', this.handleHasInputValueState);
     }
+    setupInput = () => {
+        this.handleInputEventListeners();
+        this.setupInputWidth();
+    };
     /**
      * The method to handle input width.
      */
     setupInputWidth() {
-        var _a;
         const minWidth = componentSizes[this.size] / 16 + 'rem';
-        (_a = this.animation) === null || _a === void 0 ? void 0 : _a.cancel();
+        this.animation?.cancel();
         this.inputWrapper.style.width =
             this.mode !== 'desktop-expanded' ? `${minWidth}` : `${getConvertedPixels(this.closedWidth) / 16}rem`;
     }
@@ -181,6 +141,35 @@ export class TetExpandableInput {
         this.inputHtmlElement.addEventListener('keydown', this.handleCloseInputOnEsc);
         this.inputHtmlElement.addEventListener('input', this.handleHasInputValueState);
     }
+    /**
+     * The method to handle hasInputValue state.
+     */
+    handleHasInputValueState = (event) => {
+        const { target } = event;
+        if (target instanceof HTMLInputElement) {
+            this.hasInputValue = target.value.length > 0;
+        }
+    };
+    /**
+     * Handles closing the input when the Escape key is pressed and the input is expanded.
+     */
+    handleCloseInputOnEsc = (event) => {
+        if (this.expanded && event.key === 'Escape') {
+            this.host.blur();
+        }
+    };
+    /**
+     * Handles closing the input when the close button element is activated.
+     */
+    handleCloseButtonAction = (event) => {
+        if (event.type === 'click' ||
+            (event.type === 'keydown' && 'key' in event && (event.key === 'Enter' || event.key === ' '))) {
+            if (event.type === 'keydown') {
+                event.preventDefault();
+            }
+            this.host.blur();
+        }
+    };
     /**
      * Expands the input to the width of the host element's width
      */
@@ -228,13 +217,45 @@ export class TetExpandableInput {
             });
         });
     }
+    /**
+     * Handles the animation of the input.
+     * @param {number} animationStartWidth The width of the input before the animation.
+     * @param {number} animationEndWidth The width of the input after the animation.
+     */
+    animateWidth = async (animationStartWidth, animationEndWidth) => {
+        this.cancelAnimation();
+        const animationStartWidthPx = `${animationStartWidth}px`;
+        const animationEndWidthPx = `${animationEndWidth}px`;
+        const animation = this.inputWrapper.animate([
+            {
+                width: animationStartWidthPx,
+            },
+            {
+                // For mobile mode unexpanded width must be equal to input field height
+                width: animationEndWidthPx,
+            },
+        ], {
+            duration: this.animationDuration,
+            fill: 'forwards',
+        });
+        this.animation = animation;
+        try {
+            if (await animation.finished) {
+                // Commit styles on successful animation.
+                animation.commitStyles();
+            }
+        }
+        catch {
+            // Finish animation in case of failure.
+            this.inputWrapper.style.width = animationEndWidthPx;
+        }
+    };
     /**
      * Persists current input wrapper's animation progress left between 0 and 1 and cancels it.
      */
     cancelAnimation() {
-        var _a, _b;
-        (_a = this.animation) === null || _a === void 0 ? void 0 : _a.commitStyles();
-        (_b = this.animation) === null || _b === void 0 ? void 0 : _b.cancel();
+        this.animation?.commitStyles();
+        this.animation?.cancel();
     }
     /**
      * Determines if the placeholder text and the action icon (right) must be rendered

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

@@ -8,34 +8,6 @@ import { a11yBtnClick } from "../../../../services/utils/a11y";
  */
 export class TetInput {
     constructor() {
-        /**
-         * Set Keyboard Focus State on Input if Tab key is pressed.
-         */
-        this.addKeyboardFocus = () => {
-            this.focusVisible = this.isKeyboardFocus;
-        };
-        /**
-         * Removes Keyboard Focus State.
-         */
-        this.removeKeyboardFocus = () => {
-            this.focusVisible = false;
-        };
-        this.validateInputValue = (value) => {
-            this.errorMessages = validate(value, this.validators);
-        };
-        this.renderIcon = (iconName, alignment, callback) => {
-            const clickable = Boolean(callback);
-            const classes = {
-                'icon': true,
-                'icon-left': alignment === 'left',
-                'icon-right': alignment === 'right',
-                'clickable': clickable
-            };
-            return (h("tet-icon", { name: iconName, class: classes, onClick: callback, accessibilityLabel: clickable ? 'Area label' : '', onKeyDown: a11yBtnClick }));
-        };
-        this.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))))));
-        };
         this.isPhoneNumber = false;
         this.errorMessages = [];
         this.class = '';
@@ -60,6 +32,8 @@ export class TetInput {
         this.isKeyboardFocus = true;
         this.focusVisible = false;
     }
+    /** Reference to the input element. */
+    inputHtmlElement;
     componentDidLoad() {
         if (!this.manualValidation) {
             this.inputHtmlElement.addEventListener('input', (event) => {
@@ -90,6 +64,18 @@ export class TetInput {
         this.isKeyboardFocus = false;
         this.focusVisible = false;
     }
+    /**
+     * Set Keyboard Focus State on Input if Tab key is pressed.
+     */
+    addKeyboardFocus = () => {
+        this.focusVisible = this.isKeyboardFocus;
+    };
+    /**
+     * Removes Keyboard Focus State.
+     */
+    removeKeyboardFocus = () => {
+        this.focusVisible = false;
+    };
     /**
      * Returns the list of validation errors.
      */
@@ -109,14 +95,38 @@ export class TetInput {
         this.validateInputValue(this.inputHtmlElement.value);
         return this.getErrors();
     }
+    validateInputValue = (value) => {
+        this.errorMessages = validate(value, this.validators);
+    };
+    renderIcon = (iconName, alignment, callback) => {
+        const clickable = Boolean(callback);
+        const classes = {
+            'icon': true,
+            'icon-left': alignment === 'left',
+            'icon-right': alignment === 'right',
+            'clickable': clickable
+        };
+        return (h("tet-icon", { name: iconName, class: classes, onClick: callback, accessibilityLabel: clickable ? 'Area label' : '', 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))))));
+    };
     render() {
-        var _a, _b;
-        const propClasses = (_b = (_a = this.class) === null || _a === void 0 ? void 0 : _a.split('w')) !== null && _b !== void 0 ? _b : [];
+        const propClasses = this.class?.split('w') ?? [];
         // Merges the values defined in the class attribute with the inner classes.
-        const inputClasses = Object.assign({ 'tet-input__base': true, [`tet-input__${this.theme}`]: true, 'with-icon--left': !!this.iconLeft, 'with-icon--right': !!this.iconRight, 'with-prefix': this.isPhoneNumber, 'error': this.error || this.errorMessages.length > 0, 'keyboard-focus': this.focusVisible }, propClasses.reduce((accumulator, value) => {
-            return Object.assign(Object.assign({}, accumulator), { [value]: true });
-        }, {}));
-        return (h(Host, null, h("label", { class: { [`${this.theme}`]: true } }, this.label && (h("span", { class: { 'tet-input__label': true, [`tet-input__${this.theme}`]: true } }, this.label)), h("div", { class: { 'input-container': true, [`tet-input__${this.theme}`]: true } }, this.isPhoneNumber && h("span", { class: "tet-input__prefix" }, "+371 |"), h("input", Object.assign({ onFocus: this.addKeyboardFocus, onFocusout: this.removeKeyboardFocus, class: inputClasses, placeholder: this.placeholder, type: this.type, value: this.value, ref: (el) => (this.inputHtmlElement = el), disabled: this.disabled, autoComplete: this.autocomplete ? this.autocomplete : 'off', maxlength: this.maxlength, readOnly: this.readonly }, (this.accessibilityLabel ? { 'aria-label': this.accessibilityLabel } : {}), (this.inputTabindex ? { tabindex: this.inputTabindex } : {}))), !!this.iconLeft && this.renderIcon(this.iconLeft, 'left', this.iconLeftClickCallback), !!this.iconRight && this.renderIcon(this.iconRight, 'right', this.iconRightClickCallback), h("slot", null))), this.errorMessages.length > 0 && this.renderErrorMessages()));
+        const inputClasses = {
+            'tet-input__base': true,
+            [`tet-input__${this.theme}`]: true,
+            'with-icon--left': !!this.iconLeft,
+            'with-icon--right': !!this.iconRight,
+            'with-prefix': this.isPhoneNumber,
+            'error': this.error || this.errorMessages.length > 0,
+            'keyboard-focus': this.focusVisible,
+            ...propClasses.reduce((accumulator, value) => {
+                return { ...accumulator, [value]: true };
+            }, {})
+        };
+        return (h(Host, null, h("label", { class: { [`${this.theme}`]: true } }, this.label && (h("span", { class: { 'tet-input__label': true, [`tet-input__${this.theme}`]: true } }, this.label)), h("div", { class: { 'input-container': true, [`tet-input__${this.theme}`]: true } }, this.isPhoneNumber && h("span", { class: "tet-input__prefix" }, "+371 |"), h("input", { onFocus: this.addKeyboardFocus, onFocusout: this.removeKeyboardFocus, class: inputClasses, placeholder: this.placeholder, type: this.type, value: this.value, ref: (el) => (this.inputHtmlElement = el), disabled: this.disabled, autoComplete: this.autocomplete ? this.autocomplete : 'off', maxlength: this.maxlength, readOnly: this.readonly, ...(this.accessibilityLabel ? { 'aria-label': this.accessibilityLabel } : {}), ...(this.inputTabindex ? { tabindex: this.inputTabindex } : {}) }), !!this.iconLeft && this.renderIcon(this.iconLeft, 'left', this.iconLeftClickCallback), !!this.iconRight && this.renderIcon(this.iconRight, 'right', this.iconRightClickCallback), h("slot", null))), this.errorMessages.length > 0 && this.renderErrorMessages()));
     }
     static get is() { return "tet-input"; }
     static get encapsulation() { return "scoped"; }