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

package/dist/collection/components/advanced/dialog/tet-multi-step-dialog/tet-multi-step-dialog.js

@@ -5,71 +5,6 @@ import { processTranslations, t } from "../../../../services/translations/index"
  */
 export class TetMultiStepDialog {
     constructor() {
-        /**
-         * Array of the step block HTML elements.
-         */
-        this.stepBlocks = [];
-        /**
-         * Adds step blocks to an array.
-         */
-        this.setStepBlocks = (element) => {
-            if (element) {
-                this.stepBlocks.push(element);
-            }
-        };
-        /**
-         * Changes the active step forwards or backwards.
-         */
-        this.setActive = (reverse) => {
-            const currentActiveStep = Array.from(this.stepBlocks).find(node => node.classList.contains('active'));
-            const currentStep = currentActiveStep ? Number(currentActiveStep.getAttribute('data-step')) : 0;
-            const newStep = reverse ? currentStep - 1 : currentStep + 1;
-            const stepBlocksArray = Array.from(this.stepBlocks);
-            const newActiveStep = stepBlocksArray.find(node => Number(node.getAttribute('data-step')) === newStep);
-            if (newActiveStep) {
-                this.stepBlocks.forEach(block => {
-                    block.style.display = 'none';
-                    block.classList.remove('active');
-                });
-                newActiveStep.classList.add('active');
-                newActiveStep.style.display = 'block';
-                this.updateButtonVisibility(newStep, stepBlocksArray);
-            }
-        };
-        /**
-         * Hides the "previous" and "next" buttons if there are no more blocks to lead to.
-         */
-        this.updateButtonVisibility = (newStep, stepBlocksArray) => {
-            const nextStep = stepBlocksArray.find(node => Number(node.getAttribute('data-step')) === newStep + 1);
-            const prevStep = stepBlocksArray.find(node => Number(node.getAttribute('data-step')) === newStep - 1);
-            this.nextButton.style.display = nextStep ? 'block' : 'none';
-            this.prevButton.style.display = prevStep ? 'block' : 'none';
-            if (!nextStep) {
-                this.tetDialog.setAttribute('footer-display', 'left');
-            }
-            else if (!prevStep) {
-                this.tetDialog.setAttribute('footer-display', 'right');
-            }
-            else {
-                this.tetDialog.setAttribute('footer-display', 'between');
-            }
-        };
-        /**
-         * Keydown event Handler on button click
-         */
-        this.handleKeydownEvent = (event) => {
-            if (['Enter', ' '].includes(event.key)) {
-                this.isKeydownFocus = true;
-            }
-        };
-        this.handleCloseDialog = (event) => {
-            event.stopPropagation();
-            this.closeDialog.emit(event.detail);
-        };
-        this.handleOpenDialog = (event) => {
-            event.stopPropagation();
-            this.openDialog.emit(event.detail);
-        };
         this.content = '';
         this.steps = [];
         this.isOpen = false;
@@ -79,6 +14,26 @@ export class TetMultiStepDialog {
         this.isKeydownFocus = false;
         this.theme = 'light';
     }
+    /**
+     * Array of the step block HTML elements.
+     */
+    stepBlocks = [];
+    /**
+     * Stores the reference of the "previous" button HTML element.
+     */
+    prevButton;
+    /**
+     * Stores the reference of the "next" button HTML element.
+     */
+    nextButton;
+    /**
+     * Stores the reference of the tet-dialog HTML element.
+     */
+    tetDialog;
+    /** The event to be emitted on the `close` icon click, overlay click or the `esc` key press. */
+    closeDialog;
+    /** The event to be emitted when the dialog is opened. */
+    openDialog;
     /**
      * Lifecycle method.
      */
@@ -91,24 +46,83 @@ export class TetMultiStepDialog {
     componentDidLoad() {
         this.setActive(false);
         this.prevButton.addEventListener('click', () => {
-            var _a;
             this.setActive(true);
-            (_a = this.prevButton.shadowRoot.querySelector('button')) === null || _a === void 0 ? void 0 : _a.blur();
+            this.prevButton.shadowRoot.querySelector('button')?.blur();
             if (this.isKeydownFocus) {
                 this.prevButton.style.display !== 'none'
                     ? this.prevButton.focus() : this.nextButton.focus();
             }
         });
         this.nextButton.addEventListener('click', () => {
-            var _a;
             this.setActive(false);
-            (_a = this.nextButton.shadowRoot.querySelector('button')) === null || _a === void 0 ? void 0 : _a.blur();
+            this.nextButton.shadowRoot.querySelector('button')?.blur();
             if (this.isKeydownFocus) {
                 this.nextButton.style.display !== 'none'
                     ? this.nextButton.focus() : this.prevButton.focus();
             }
         });
     }
+    /**
+     * Adds step blocks to an array.
+     */
+    setStepBlocks = (element) => {
+        if (element) {
+            this.stepBlocks.push(element);
+        }
+    };
+    /**
+     * Changes the active step forwards or backwards.
+     */
+    setActive = (reverse) => {
+        const currentActiveStep = Array.from(this.stepBlocks).find(node => node.classList.contains('active'));
+        const currentStep = currentActiveStep ? Number(currentActiveStep.getAttribute('data-step')) : 0;
+        const newStep = reverse ? currentStep - 1 : currentStep + 1;
+        const stepBlocksArray = Array.from(this.stepBlocks);
+        const newActiveStep = stepBlocksArray.find(node => Number(node.getAttribute('data-step')) === newStep);
+        if (newActiveStep) {
+            this.stepBlocks.forEach(block => {
+                block.style.display = 'none';
+                block.classList.remove('active');
+            });
+            newActiveStep.classList.add('active');
+            newActiveStep.style.display = 'block';
+            this.updateButtonVisibility(newStep, stepBlocksArray);
+        }
+    };
+    /**
+     * Hides the "previous" and "next" buttons if there are no more blocks to lead to.
+     */
+    updateButtonVisibility = (newStep, stepBlocksArray) => {
+        const nextStep = stepBlocksArray.find(node => Number(node.getAttribute('data-step')) === newStep + 1);
+        const prevStep = stepBlocksArray.find(node => Number(node.getAttribute('data-step')) === newStep - 1);
+        this.nextButton.style.display = nextStep ? 'block' : 'none';
+        this.prevButton.style.display = prevStep ? 'block' : 'none';
+        if (!nextStep) {
+            this.tetDialog.setAttribute('footer-display', 'left');
+        }
+        else if (!prevStep) {
+            this.tetDialog.setAttribute('footer-display', 'right');
+        }
+        else {
+            this.tetDialog.setAttribute('footer-display', 'between');
+        }
+    };
+    /**
+     * Keydown event Handler on button click
+     */
+    handleKeydownEvent = (event) => {
+        if (['Enter', ' '].includes(event.key)) {
+            this.isKeydownFocus = true;
+        }
+    };
+    handleCloseDialog = (event) => {
+        event.stopPropagation();
+        this.closeDialog.emit(event.detail);
+    };
+    handleOpenDialog = (event) => {
+        event.stopPropagation();
+        this.openDialog.emit(event.detail);
+    };
     /**
      * Renders the step HTML.
      */

package/dist/collection/components/advanced/forms/tet-availability-contact-form/tet-availability-contact-form.js

@@ -8,48 +8,6 @@ import { PhoneNumberValidator, RequiredValidator } from "../../../../services/va
  */
 export class TetAvailabilityContactForm {
     constructor() {
-        /** The list of validators to apply to the input field. */
-        this.validators = [
-            new PhoneNumberValidator('components-validation-incorrect-phone'),
-            new RequiredValidator('components-validation-required')
-        ];
-        /**
-         * Method to close dialog element.
-         */
-        this.closeDialogElement = async () => {
-            await this.dialogElement.close();
-        };
-        /**
-         * Method to open dialog element.
-         */
-        this.openDialogElement = async () => {
-            await this.dialogElement.open();
-        };
-        /**
-         * Method to create task for call center.
-         */
-        this.createManualTask = async () => {
-            this.showLoader = true;
-            const phoneInputElement = await this.phoneInput.getInputHtmlElement();
-            const errors = await this.phoneInput.validateInput();
-            if (errors.length) {
-                this.showLoader = false;
-                return;
-            }
-            try {
-                const data = await createCallCenterTask(this.getTaskOptions(phoneInputElement.value));
-                if (data && data.TaskId) {
-                    this.taskCreationSuccess.emit(data.TaskId);
-                }
-                else {
-                    this.taskCreationFailed.emit();
-                }
-            }
-            catch (error) {
-                this.taskCreationFailed.emit(error);
-            }
-            this.showLoader = false;
-        };
         this.showLoader = false;
         this.language = 'lv';
         this.taskOptions = undefined;
@@ -62,6 +20,15 @@ export class TetAvailabilityContactForm {
         this.showAvailabilityContactForm = false;
         this.subtitle = 'components-contact-form-subtitle';
     }
+    /** The input component. */
+    phoneInput;
+    /** The dialog component. */
+    dialogElement;
+    /** The list of validators to apply to the input field. */
+    validators = [
+        new PhoneNumberValidator('components-validation-incorrect-phone'),
+        new RequiredValidator('components-validation-required')
+    ];
     /**
      * The watch to update translations.
      * @param language
@@ -69,6 +36,10 @@ export class TetAvailabilityContactForm {
     onLanguageChange(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
+    /** The event emitted if the task creation was successful. */
+    taskCreationSuccess;
+    /** The event emitted if the task creation failed. */
+    taskCreationFailed;
     /**
      * Listen for task creation success event.
      * @param event
@@ -91,6 +62,43 @@ export class TetAvailabilityContactForm {
         await processTranslations('tet-components', this.language);
         forceUpdate(this);
     }
+    /**
+     * Method to close dialog element.
+     */
+    closeDialogElement = async () => {
+        await this.dialogElement.close();
+    };
+    /**
+     * Method to open dialog element.
+     */
+    openDialogElement = async () => {
+        await this.dialogElement.open();
+    };
+    /**
+     * Method to create task for call center.
+     */
+    createManualTask = async () => {
+        this.showLoader = true;
+        const phoneInputElement = await this.phoneInput.getInputHtmlElement();
+        const errors = await this.phoneInput.validateInput();
+        if (errors.length) {
+            this.showLoader = false;
+            return;
+        }
+        try {
+            const data = await createCallCenterTask(this.getTaskOptions(phoneInputElement.value));
+            if (data && data.TaskId) {
+                this.taskCreationSuccess.emit(data.TaskId);
+            }
+            else {
+                this.taskCreationFailed.emit();
+            }
+        }
+        catch (error) {
+            this.taskCreationFailed.emit(error);
+        }
+        this.showLoader = false;
+    };
     /**
      * Appends the submitted phone number to the task description and returns the options.
      *
@@ -98,7 +106,10 @@ export class TetAvailabilityContactForm {
      */
     getTaskOptions(phoneNumber) {
         const { taskDescription } = this.taskOptions;
-        return Object.assign(Object.assign({}, this.taskOptions), { taskDescription: [taskDescription.trim(), `Phone: ${phoneNumber}`].join(' ') });
+        return {
+            ...this.taskOptions,
+            taskDescription: [taskDescription.trim(), `Phone: ${phoneNumber}`].join(' ')
+        };
     }
     ;
     /**

package/dist/collection/components/advanced/forms/tet-b2b-check-out-form/tet-b2b-check-out-form.js

@@ -9,6 +9,14 @@ export class TetAvailabilityContactForm {
         this.language = 'lv';
         this.theme = undefined;
     }
+    /** Form element of component */
+    checkOutForm;
+    /** The application 'tet-dialog' element. */
+    dialogElement;
+    /** The extra field slot element. */
+    extraFieldsSlotElement;
+    /** Event emit when form filled successfully */
+    submitCheckOutForm;
     /**
      * The watch to update translations.
      * @param language
@@ -77,7 +85,7 @@ export class TetAvailabilityContactForm {
      * @private
      */
     renderInput(id, label, placeholder, isPhoneNr) {
-        return (h("tet-input", Object.assign({ id: id, class: "modal-form-card__input", theme: this.theme, label: `${label} *`, placeholder: placeholder || label }, (isPhoneNr && { isPhoneNumber: true }), { validators: this.getValidators(label, isPhoneNr) })));
+        return (h("tet-input", { id: id, class: "modal-form-card__input", theme: this.theme, label: `${label} *`, placeholder: placeholder || label, ...(isPhoneNr && { isPhoneNumber: true }), validators: this.getValidators(label, isPhoneNr) }));
     }
     /** Validates all input fields and returns whether all of them are valid or not. */
     async validateInputFields() {
@@ -103,9 +111,9 @@ export class TetAvailabilityContactForm {
         let emitValue = {};
         inputElements.forEach((item) => {
             const value = item.querySelector('input').value;
-            emitValue = Object.assign(Object.assign({}, emitValue), { [item.id]: value });
+            emitValue = { ...emitValue, [item.id]: value };
         });
-        this.submitCheckOutForm.emit(Object.assign(Object.assign({}, emitValue), this.extraFieldsSubmissionData));
+        this.submitCheckOutForm.emit({ ...emitValue, ...this.extraFieldsSubmissionData });
     }
     /** Returns the slotted `extra-fields` input elements with a provided id attribute. */
     get extraFieldsElements() {

package/dist/collection/components/advanced/forms/tet-contact-form/tet-contact-form.js

@@ -8,45 +8,6 @@ import { PhoneNumberValidator, RequiredValidator } from "../../../../services/va
  */
 export class TetContactForm {
     constructor() {
-        /** The list of validators to apply to the input field. */
-        this.validators = [
-            new PhoneNumberValidator('components-validation-incorrect-phone'),
-            new RequiredValidator('components-validation-required')
-        ];
-        this.createManualTask = async () => {
-            this.showLoader = true;
-            const phoneInputElement = await this.phoneInput.getInputHtmlElement();
-            const errors = await this.phoneInput.validateInput();
-            if (errors.length) {
-                this.showLoader = false;
-                return;
-            }
-            try {
-                const data = await createCallCenterTask(this.getTaskOptions(phoneInputElement.value));
-                if (data === null || data === void 0 ? void 0 : data.TaskId) {
-                    this.taskCreationSuccess.emit(data.TaskId);
-                }
-                else {
-                    this.taskCreationFailed.emit();
-                }
-            }
-            catch (error) {
-                this.taskCreationFailed.emit(error);
-            }
-            this.showLoader = false;
-        };
-        /**
-         * Appends the submitted phone number to the task description and returns the options.
-         *
-         * @param phoneNumber
-         */
-        this.getTaskOptions = (phoneNumber) => {
-            const { taskDescription } = this.taskOptions;
-            return Object.assign(Object.assign({}, this.taskOptions), { taskDescription: [taskDescription.trim(), `Phone: ${phoneNumber}`].join(' ') });
-        };
-        this.renderLoader = () => {
-            return (h("div", { class: "loader-overlay" }, h("tet-loader", { class: "loader" })));
-        };
         this.language = 'lv';
         this.taskOptions = undefined;
         this.submitButtonProps = {};
@@ -57,14 +18,62 @@ export class TetContactForm {
         this.subtitle = 'components-contact-form-subtitle';
         this.showLoader = false;
     }
+    /** The input component. */
+    phoneInput;
+    /** The list of validators to apply to the input field. */
+    validators = [
+        new PhoneNumberValidator('components-validation-incorrect-phone'),
+        new RequiredValidator('components-validation-required')
+    ];
     onLanguageChange(language) {
         processTranslations('tet-components', language).then(() => forceUpdate(this));
     }
+    /** The event emitted if the task creation was successful. */
+    taskCreationSuccess;
+    /** The event emitted if the task creation failed. */
+    taskCreationFailed;
     componentWillLoad() {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
+    createManualTask = async () => {
+        this.showLoader = true;
+        const phoneInputElement = await this.phoneInput.getInputHtmlElement();
+        const errors = await this.phoneInput.validateInput();
+        if (errors.length) {
+            this.showLoader = false;
+            return;
+        }
+        try {
+            const data = await createCallCenterTask(this.getTaskOptions(phoneInputElement.value));
+            if (data?.TaskId) {
+                this.taskCreationSuccess.emit(data.TaskId);
+            }
+            else {
+                this.taskCreationFailed.emit();
+            }
+        }
+        catch (error) {
+            this.taskCreationFailed.emit(error);
+        }
+        this.showLoader = false;
+    };
+    /**
+     * Appends the submitted phone number to the task description and returns the options.
+     *
+     * @param phoneNumber
+     */
+    getTaskOptions = (phoneNumber) => {
+        const { taskDescription } = this.taskOptions;
+        return {
+            ...this.taskOptions,
+            taskDescription: [taskDescription.trim(), `Phone: ${phoneNumber}`].join(' ')
+        };
+    };
+    renderLoader = () => {
+        return (h("div", { class: "loader-overlay" }, h("tet-loader", { class: "loader" })));
+    };
     render() {
-        return (h("div", { key: '886c6ef5822d0d53364c9a7e7bc02bba782f3c89', class: { 'dark-theme': this.darkTheme } }, h("tet-container", { key: 'fdf8d3941c929b26e7eeac8db306aeb7a7fe6b9b', class: "container" }, this.showLoader && this.renderLoader(), h("div", { key: '59b16df587203700305db941b1d4e7338951a917', class: "form-container" }, this.showTitle && h("h2", { key: '5bb4027d3283eaee280d00b5c00ac4c3d06abeb5', class: "form-title" }, t('components-contact-form-title')), h("p", { key: '412a2eb7db28f83116dbb0789763179572efe814', class: "form-subtitle" }, t(this.subtitle)), h("tet-input", { key: 'edf241a9f00772b9651f37da935a7a0ec8639278', class: "form-input", placeholder: "+37122345678", ref: (element) => this.phoneInput = element, validators: this.validators, label: this.showInputLabel ? t('components-contact-form-input-label') : null, theme: this.darkTheme ? 'dark' : 'classic' }), h("tet-button", Object.assign({ key: 'e886d3a0c7ecbf510d60d39c29cb6e088bd0ee14', class: "form-submit", type: "primary", clickCallback: this.createManualTask, innerHTML: t('components-contact-form-submit') }, this.submitButtonProps))))));
+        return (h("div", { key: '886c6ef5822d0d53364c9a7e7bc02bba782f3c89', class: { 'dark-theme': this.darkTheme } }, h("tet-container", { key: 'fdf8d3941c929b26e7eeac8db306aeb7a7fe6b9b', class: "container" }, this.showLoader && this.renderLoader(), h("div", { key: '59b16df587203700305db941b1d4e7338951a917', class: "form-container" }, this.showTitle && h("h2", { key: '5bb4027d3283eaee280d00b5c00ac4c3d06abeb5', class: "form-title" }, t('components-contact-form-title')), h("p", { key: '412a2eb7db28f83116dbb0789763179572efe814', class: "form-subtitle" }, t(this.subtitle)), h("tet-input", { key: 'edf241a9f00772b9651f37da935a7a0ec8639278', class: "form-input", placeholder: "+37122345678", ref: (element) => this.phoneInput = element, validators: this.validators, label: this.showInputLabel ? t('components-contact-form-input-label') : null, theme: this.darkTheme ? 'dark' : 'classic' }), h("tet-button", { key: 'e886d3a0c7ecbf510d60d39c29cb6e088bd0ee14', class: "form-submit", type: "primary", clickCallback: this.createManualTask, innerHTML: t('components-contact-form-submit'), ...this.submitButtonProps })))));
     }
     static get is() { return "tet-contact-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/promotions/tv-gift/tet-tv-gift-block/tet-tv-gift-block.js

@@ -4,25 +4,13 @@ import { Host, h } from "@stencil/core";
  */
 export class TetTvGiftBlock {
     constructor() {
-        /** Sets the `containerSize` state depending on the `element` width. */
-        this.setContainerSize = () => {
-            const elementWidth = this.element.getBoundingClientRect().width;
-            if (elementWidth <= 500) {
-                this.containerSize = 'small';
-            }
-            else if (elementWidth <= 768) {
-                this.containerSize = 'medium';
-            }
-            else {
-                this.containerSize = 'large';
-            }
-        };
         this.headerTitle = '';
         this.headerImageSrc = '';
         this.footerTitle = '';
         this.footerText = '';
         this.containerSize = 'small';
     }
+    element;
     /** Window resize event listener. Sets `containerSize` state on window resize. */
     onWindowResize() {
         this.setContainerSize();
@@ -31,6 +19,19 @@ export class TetTvGiftBlock {
     componentDidLoad() {
         this.setContainerSize();
     }
+    /** Sets the `containerSize` state depending on the `element` width. */
+    setContainerSize = () => {
+        const elementWidth = this.element.getBoundingClientRect().width;
+        if (elementWidth <= 500) {
+            this.containerSize = 'small';
+        }
+        else if (elementWidth <= 768) {
+            this.containerSize = 'medium';
+        }
+        else {
+            this.containerSize = 'large';
+        }
+    };
     render() {
         return (h(Host, { key: '4a6bf183305f006113d88a4045fc3fdc898e7eca' }, h("div", { key: 'e1232a2f945855ef38a787ad5664b85b18213f27', class: { 'tv-gift': true, [`tv-gift--${this.containerSize}`]: true } }, h("div", { key: '04e0198da362ff3b8a407f8dbf7684f1b91af18e', class: "tv-gift__header" }, h("slot", { key: '1b40bf340188469127b90f53e10b5c903a557b55', name: "header" }, this.headerImageSrc && h("img", { key: '34bee651cc8aeb75d75b5819fc26a5b6fcff7b6c', class: "tv-gift__header__image", src: this.headerImageSrc }), h("div", { key: '378d55b82b2477dc008a228aa6d031eca559bfe5', class: "tv-gift__header-text" }, this.headerTitle))), h("div", { key: '744a87d47367041d40199ef88d3731b02f71b611', class: "tv-gift__content" }, h("slot", { key: '47a8c445d97bc98066c6f2936cb6c7bf89b38ca4' })), h("div", { key: 'f286a0133e4122d0d8e392771d0667e313b46944', class: "tv-gift__footer" }, h("slot", { key: 'be0467c109af6daf741cd757a7fddea541967683', name: "footer" }, h("span", { key: 'da4bf20bccbfcee5c4639f6b20aeef584eca51f6', class: "tv-gift__footer__title" }, this.footerTitle), h("span", { key: 'ded6387068b80dbb85bec1a723fe63e96ed820e0', class: "tv-gift__footer__text" }, this.footerText))))));
     }

package/dist/collection/components/advanced/promotions/tv-gift/tet-tv-gift-list/tet-tv-gift-list.js

@@ -4,25 +4,14 @@ import { Host, h } from "@stencil/core";
  */
 export class TetTvGiftList {
     constructor() {
-        /** Sets the `containerSize` state depending on the `element` width. */
-        this.setContainerSize = () => {
-            const elementWidth = this.element.getBoundingClientRect().width;
-            if (elementWidth <= 436) {
-                this.containerSize = 'small';
-            }
-            else if (elementWidth <= 656) {
-                this.containerSize = 'medium';
-            }
-            else {
-                this.containerSize = 'large';
-            }
-        };
         this.header = '';
         this.listBulletIcon = '';
         this.imageSource = '';
         this.list = [];
         this.containerSize = 'small';
     }
+    /** The root element of the component. */
+    element;
     /**
      * Window resize event listener. Sets `containerSize` state on window resize.
      */
@@ -33,6 +22,19 @@ export class TetTvGiftList {
     componentDidLoad() {
         this.setContainerSize();
     }
+    /** Sets the `containerSize` state depending on the `element` width. */
+    setContainerSize = () => {
+        const elementWidth = this.element.getBoundingClientRect().width;
+        if (elementWidth <= 436) {
+            this.containerSize = 'small';
+        }
+        else if (elementWidth <= 656) {
+            this.containerSize = 'medium';
+        }
+        else {
+            this.containerSize = 'large';
+        }
+    };
     render() {
         return (h(Host, { key: 'd7ca800e6ba25b464ca314db93e45c4364b6d3fd' }, h("div", { key: 'a4f37664e71edd5ca917f5273ce9210531956de4', class: {
                 'tv-gift-list': true,

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

@@ -6,12 +6,6 @@ import { Host, h } from "@stencil/core";
  */
 export class TetButton {
     constructor() {
-        this.handleClick = () => {
-            this.clickCallback();
-            if (!this.url)
-                return;
-            window.open(this.url, this.urlTarget, this.urlTarget === '_blank' ? 'noopener,noreferrer' : undefined);
-        };
         this.clickCallback = () => null;
         this.size = 'large';
         this.type = 'primary';
@@ -34,15 +28,21 @@ export class TetButton {
         }
         return (h("div", { class: "button__content" }, h("slot", null), h("tet-icon", { name: this.iconName })));
     }
+    handleClick = () => {
+        this.clickCallback();
+        if (!this.url)
+            return;
+        window.open(this.url, this.urlTarget, this.urlTarget === '_blank' ? 'noopener,noreferrer' : undefined);
+    };
     render() {
-        return (h(Host, { key: '7adccbc8b3035550420d5e0eac1d46f68052526d' }, h("button", Object.assign({ key: '6d6732ed5e7d2c55e200aa7421f8ae2c54015a31', part: "button", onClick: this.handleClick, id: this.elementId, class: {
+        return (h(Host, { key: '7adccbc8b3035550420d5e0eac1d46f68052526d' }, h("button", { key: '6d6732ed5e7d2c55e200aa7421f8ae2c54015a31', part: "button", onClick: this.handleClick, id: this.elementId, class: {
                 button: true,
                 [`button-${this.size}`]: true,
                 [`button--type-${this.type}`]: true,
                 [`button-${this.theme}-theme`]: true,
                 'icon-mode': this.iconMode,
                 'with-icon': !!this.iconName,
-            }, disabled: this.disabled }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}), { tabindex: 0 }), (!!this.iconName && this.iconMode)
+            }, disabled: this.disabled, ...(this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}), tabindex: 0 }, (!!this.iconName && this.iconMode)
             ? h("tet-icon", { name: this.iconName })
             : !!this.iconName
                 ? this.renderButtonWithIcon(this.iconPosition)

package/dist/collection/components/basic/buttons/tet-checkbox/tet-checkbox.js

@@ -6,16 +6,6 @@ import { Host, h } from "@stencil/core";
  */
 export class TetCheckbox {
     constructor() {
-        /**
-         * Handles change on the html input element.
-         */
-        this.handleChange = ({ target }) => {
-            const { checked, indeterminate, error, value } = this;
-            const element = target;
-            this.checked = element.checked;
-            this.indeterminate = element.indeterminate;
-            this.check.emit({ checked: !checked, indeterminate, error, value });
-        };
         this.theme = 'light';
         this.label = undefined;
         this.name = undefined;
@@ -25,12 +15,26 @@ export class TetCheckbox {
         this.error = false;
         this.indeterminate = false;
     }
+    /** The HTML input element. */
+    inputEl;
+    /** The event that is emitted whenever the control element is checked. */
+    check;
     /**
      * Updates the indeterminate state whenever the component mounts or updates.
      */
     updateIndeterminateState() {
         this.inputEl.indeterminate = this.indeterminate;
     }
+    /**
+     * Handles change on the html input element.
+     */
+    handleChange = ({ target }) => {
+        const { checked, indeterminate, error, value } = this;
+        const element = target;
+        this.checked = element.checked;
+        this.indeterminate = element.indeterminate;
+        this.check.emit({ checked: !checked, indeterminate, error, value });
+    };
     /**
      * Changes the checked prop of the component.
      *