@tet/tet-components 1.3.136-testing → 1.3.137-testing

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

@@ -0,0 +1,211 @@
+import { h, forceUpdate } from "@stencil/core";
+import { processTranslations, t } from "../../../../services/translations/index";
+import { EMailAddressValidator, PhoneNumberValidator, RequiredValidator } from "../../../../services/validators/index";
+/**
+ * A simple contact form for submitting company details and cart details.'
+ */
+export class TetAvailabilityContactForm {
+    constructor() {
+        this.language = 'lv';
+        this.theme = undefined;
+    }
+    /**
+     * The watch to update translations.
+     * @param language
+     */
+    onLanguageChange(language) {
+        processTranslations('tet-components', language).then(() => forceUpdate(this));
+    }
+    /** Method to open check out form */
+    /** Method to open check out form */
+    async open() {
+        await this.dialogElement.open();
+    }
+    /**
+     * Lifecycle method.
+     */
+    async componentWillLoad() {
+        await processTranslations('tet-components', this.language);
+        forceUpdate(this);
+    }
+    /**
+     *  Get validators for each input form and set error messages.
+     */
+    getValidators(label, isPhoneNr) {
+        const cleanLabel = label.trim().toLowerCase().replace(',', ' un');
+        let errorText = '';
+        switch (cleanLabel.charAt(cleanLabel.length - 1)) {
+            case 's':
+                {
+                    isPhoneNr ? (errorText = cleanLabel.replace('is', 'i')) : (errorText = cleanLabel.replace(/[s]\b/g, 'u'));
+                }
+                break;
+            case 'e':
+                {
+                    errorText = cleanLabel.replace(/[e]\b/g, 'i');
+                }
+                break;
+            default:
+                errorText = cleanLabel;
+        }
+        const errorMessage = `${t('components-b2b-check-out-form-validation-error')} ${this.language === 'lv' ? errorText : cleanLabel}`;
+        let validators = [new RequiredValidator(errorMessage)];
+        if (cleanLabel === 'e-pasts') {
+            validators = [
+                new RequiredValidator(errorMessage),
+                new EMailAddressValidator('components-b2b-check-out-form-email-validation-error')
+            ];
+        }
+        if (isPhoneNr) {
+            validators = [
+                new RequiredValidator(errorMessage),
+                new PhoneNumberValidator('components-validation-incorrect-phone')
+            ];
+        }
+        return validators;
+    }
+    /**
+     * Render Input 'tet-input' element.
+     * @param {string} id
+     * @param {string} label
+     * @param {string} placeholder
+     * @param {boolean} isPhoneNr
+     * @returns {HTMLTetInputElement}
+     * @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) })));
+    }
+    /** Validates all input fields and returns whether all of them are valid or not. */
+    async validateInputFields() {
+        const inputElements = Array.from(this.checkOutForm.getElementsByTagName('tet-input'));
+        const errorPromise = Object.values(inputElements).map(async (value) => value.validateInput());
+        const errors = (await Promise.all(errorPromise)).filter((data) => data && data.length > 0);
+        const checkBoxElement = Array.from(this.checkOutForm.getElementsByTagName('tet-checkbox'))[0];
+        checkBoxElement.setError(!checkBoxElement.checked);
+        const checkBoxError = !checkBoxElement.checked;
+        return errors.length === 0 && !checkBoxError;
+    }
+    /**
+     * Check validation and emit values on form submit
+     * @returns {Promise<void>}
+     * @private
+     */
+    async handleSubmit() {
+        const inputFieldsValid = await this.validateInputFields();
+        if (!inputFieldsValid) {
+            return;
+        }
+        const inputElements = Array.from(this.checkOutForm.getElementsByTagName('tet-input'));
+        let emitValue = {};
+        inputElements.forEach((item) => {
+            const value = item.querySelector('input').value;
+            emitValue = Object.assign(Object.assign({}, emitValue), { [item.id]: value });
+        });
+        this.submitCheckOutForm.emit(emitValue);
+    }
+    render() {
+        const { theme } = this;
+        return (h("tet-dialog", { key: '625a2ce1c2fea9989928bd28152bc82361c51415', class: "modal-form-card", headerTitle: t('components-b2b-check-out-form-header'), isOpen: true, theme: theme, closeOnOverlayClick: false, footerDisplay: "right", ref: (el) => {
+                this.dialogElement = el;
+            } }, h("div", { key: '7d2835b974036f7ccd96b9023b65ca5b24f52c36', class: { 'modal-form-card-content': true, [`${theme}`]: true } }, h("div", { key: '2a4108f8754926f29b8a95bbee90b3b932bfb765', class: "modal-form-card-content-header" }, h("div", { key: '550a049b61a1a73da0a95abffff491999ae0bf2c', class: "icon-wrapper" }, h("tet-icon", { key: 'ff6f639a24995a781ff69cca5f002c3b9e6769dc', class: "icon", name: "tc-company-1" })), h("span", { key: '7360e74b5031ebb57a38150436464bd2f173b552', class: "modal-form-card-content-header__title" }, t('components-b2b-check-out-form-title')), h("span", { key: '5533826b9de6c733e5e5db6e3b071991ea9836de', class: "modal-form-card-content-header__description" }, t('components-b2b-check-out-form-description'))), h("div", { key: 'ce30106966dab043ed0c413b598cd997847386c1', class: "modal-form-card-content-accordion-wrapper" }, h("slot", { key: '13f88a4745947b4d4080cb0200efce79097693f6', name: 'cart' })), h("form", { key: '31cab120f2affbeb55aa87d7096f2be77b2b2e72', id: "checkOutForm", class: "modal-form-card-form", ref: (ref) => (this.checkOutForm = ref) }, h("div", { key: '373f441cd918c771e5ed69d45d78bb6b0b7e93f4', class: "modal-form-card-input__row" }, this.renderInput('companyRegNr', t('components-b2b-check-out-form-company-registration-number-input-label'), '40000000001'), this.renderInput('companyName', t('components-b2b-check-out-form-company-name-input-label'))), this.renderInput('address', t('components-b2b-check-out-form-address-input-label'), t('components-b2b-check-out-form-address-input-placeholder')), this.renderInput('nameSurname', t('components-b2b-check-out-form-name-input-label')), h("div", { key: '009164222b176cd5dc1ef5979066d3b172a403c8', class: "modal-form-card-input__row" }, this.renderInput('email', t('components-b2b-check-out-form-email-input-label'), 'contact@company.com'), this.renderInput('phoneNr', t('components-b2b-check-out-form-phone-number-input-label'), '123456789', true)), h("tet-checkbox", { key: 'd2dd9e4dda4ef46b7e7fa781433e710c9fff0305', class: "modal-form-card-content-checkbox", label: t('components-check-out-form-privacy-policy'), theme: theme }))), h("div", { key: '6998bb68a9093aa5d651e3c188628b4b2049e2f9', slot: "footer", class: "modal-form-card-footer" }, h("tet-button", { key: '79e85571651f2b9638d61c7b55d6da22a8c0409c', type: "secondary", size: "medium", theme: theme, onClick: () => {
+                this.dialogElement.close();
+            } }, t('components-b2b-check-out-form-close-button-label')), h("tet-button", { key: '21446b2cb81d26ac6fcea843af2e4a232913e9d6', type: "primary", size: "medium", theme: theme, onClick: () => this.handleSubmit() }, t('components-b2b-check-out-form-submit-button-label')))));
+    }
+    static get is() { return "tet-b2b-check-out-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-b2b-check-out-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-b2b-check-out-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The translation language code for the component."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'lv'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for the form"
+                },
+                "attribute": "theme",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "submitCheckOutForm",
+                "name": "submit-check-out-form",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emit when form filled successfully"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to open check out form",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "language",
+                "methodName": "onLanguageChange"
+            }];
+    }
+}

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

@@ -64,7 +64,7 @@ export class TetContactForm {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h("div", { key: '9774149aa693d5229678c65f57b1a530107e08b5', class: { 'dark-theme': this.darkTheme } }, h("tet-container", { key: 'd7e345d2a8d7424643db834e9ac0c9f6b7c8d669', class: "container" }, this.showLoader && this.renderLoader(), h("div", { key: 'e4d8d8c23c70ba6255e45edde45b8c79b788eca3', class: "form-container" }, this.showTitle && h("h2", { key: 'b4f2acf590040f7dc400562d82d85955b0dc6953', class: "form-title" }, t('components-contact-form-title')), h("p", { key: '78fb23adeb197ae96e6a3f046e78b74e8fc757ea', class: "form-subtitle" }, t(this.subtitle)), h("tet-input", { key: '013ed3a12cc1aeb575fc0bd2dcb1401a2aeb843e', 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: 'b9866d69268b1f1106620f12637f1c5628dce4d7', class: "form-submit", type: "primary", clickCallback: this.createManualTask, innerHTML: t('components-contact-form-submit') }, this.submitButtonProps))))));
+        return (h("div", { key: '5337fe783b63b1459097a0161fcc763c31985d6e', class: { 'dark-theme': this.darkTheme } }, h("tet-container", { key: '7482718f33d5f8ebf0509ddfeeca8f39eb50bdb4', class: "container" }, this.showLoader && this.renderLoader(), h("div", { key: '321cb3744af611a77f20cf190343425ac6f4ed28', class: "form-container" }, this.showTitle && h("h2", { key: '075e557fd1cccb3e2f3f9bed6cbcee092cf588fe', class: "form-title" }, t('components-contact-form-title')), h("p", { key: '849598795be4ce3941a29e5bd20d7112cb37b4fa', class: "form-subtitle" }, t(this.subtitle)), h("tet-input", { key: '67756b83628a2ea5d53164d28317a58095a49dec', 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: 'a62d8c6641769ab7daefc6dfe4be705daf8e85b0', 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

@@ -32,7 +32,7 @@ export class TetTvGiftBlock {
         this.setContainerSize();
     }
     render() {
-        return (h(Host, { key: 'ca946b5563d3f0ed97056322ac4b1b30e2a4c0bb' }, h("div", { key: '1fd7c3d573abc6c43a2cc0a0726b40aba49aad2e', class: { 'tv-gift': true, [`tv-gift--${this.containerSize}`]: true } }, h("div", { key: 'e48b1378e7c5bfac6799d91a59ade532d7afa266', class: "tv-gift__header" }, h("slot", { key: '7e8419794f801684769579bfb50d88c1920fadaf', name: "header" }, this.headerImageSrc && h("img", { key: '79f53b9bef4f0832cc4a6978638b26c39f7bf273', class: "tv-gift__header__image", src: this.headerImageSrc }), h("div", { key: 'a35e422b3de9ed91960c79e087b57293339fdb77', class: "tv-gift__header-text" }, this.headerTitle))), h("div", { key: 'bd5e4a10739005b72cc6c0d324b04f03c90f3f8e', class: "tv-gift__content" }, h("slot", { key: '06431e7884030a8f022585b9fd85927182914ba5' })), h("div", { key: '46cc76411f6a8f0d38e471c0d6e0fd36d6368eff', class: "tv-gift__footer" }, h("slot", { key: 'c0e52f339f08cedcf821812ccc059411abebfa05', name: "footer" }, h("span", { key: '8c08c30b5d6b932e305a65f1ede1d1db31063464', class: "tv-gift__footer__title" }, this.footerTitle), h("span", { key: '531c4c4cafab9d284b6792f6dc44a1ccc6207229', class: "tv-gift__footer__text" }, this.footerText))))));
+        return (h(Host, { key: 'f52e7c4d06337ff2a3ee9a4401d38510f1d04a2c' }, h("div", { key: '0a513352081a17b9bae472df5a0aba40a9fa3ce2', class: { 'tv-gift': true, [`tv-gift--${this.containerSize}`]: true } }, h("div", { key: 'a047f3784cb12829fa67e3f848504332ee7549f6', class: "tv-gift__header" }, h("slot", { key: '853df25206c528d4f141cd1868ae45a8433c2abe', name: "header" }, this.headerImageSrc && h("img", { key: 'c63f7a65d9dfbb33cac7693791581a5d977bd781', class: "tv-gift__header__image", src: this.headerImageSrc }), h("div", { key: '6d9be04e54e83211f9e7763979c67589c3527f18', class: "tv-gift__header-text" }, this.headerTitle))), h("div", { key: '0dc796c85d1216630c788b28ccc9b32d7743dc7f', class: "tv-gift__content" }, h("slot", { key: '3379d6254cb7683a007f311a4957673f94d1dbc1' })), h("div", { key: '2d791b6152a5925a475170ef69a3b555ff4a2a20', class: "tv-gift__footer" }, h("slot", { key: '433f495e76106ba85a4d320ab8969cdafdaf5885', name: "footer" }, h("span", { key: 'bcc7f1c5a1c80ede10fa25ca6e450cbc57872518', class: "tv-gift__footer__title" }, this.footerTitle), h("span", { key: '7bbc60c57b99a81682e650d5bf0a6c85dd18e523', class: "tv-gift__footer__text" }, this.footerText))))));
     }
     static get is() { return "tet-tv-gift-block"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,11 +34,11 @@ export class TetTvGiftList {
         this.setContainerSize();
     }
     render() {
-        return (h(Host, { key: 'c5291d51b1874784b8ecf0e8dd8f5d1480f5b0d7' }, h("div", { key: '1347f2c03627550e52669dfda266a1ed9cbe9a27', class: {
+        return (h(Host, { key: 'e7aa7d57d3f13d7dfb6cbb60dac025e5a3cb4b8c' }, h("div", { key: 'c6492c2bf632b40e1d985557b25aa502c44e661b', class: {
                 'tv-gift-list': true,
                 [`tv-gift-list--${this.containerSize}`]: true,
                 'tv-gift-list--image-list': Boolean(this.imageSource),
-            } }, this.imageSource && (h("div", { key: 'ff86b7908cd5e83e23ecba120b6cab4e10141f78', class: "tv-gift-list__image__wrapper" }, h("img", { key: '4ededbed0da1ecbe36bbeac3980348fbb92ef887', class: "tv-gift-list__image", src: this.imageSource }))), h("div", { key: '93ee9a7bbb87b30cf2b0583753c874ff5df903ed', class: "tv-gift-list__list__wrapper" }, h("span", { key: '5c62bda439b140e06034340f3d37f4e5a4783c50', class: "tv-gift-list__list__header" }, this.header), h("ul", { key: 'fb6a2919ca5ce8e6c68b4696111b0a37ace28d64', class: "tv-gift-list__list" }, this.list.map(item => (h("li", { class: "tv-gift-list__list__item" }, h("tet-icon", { name: this.listBulletIcon }), item))))))));
+            } }, this.imageSource && (h("div", { key: '5a3a007d64e25a31a211b849700189898c6146ad', class: "tv-gift-list__image__wrapper" }, h("img", { key: 'a72082bcfef3122b807d800005276f7165f2b99a', class: "tv-gift-list__image", src: this.imageSource }))), h("div", { key: 'f917798eeaf114f5a10689f82021aa899dc5c4ca', class: "tv-gift-list__list__wrapper" }, h("span", { key: '7b26fee22611b25212904c28f9604ef0f09a8600', class: "tv-gift-list__list__header" }, this.header), h("ul", { key: 'd37925aa32c8c53581a25446556c1c8beced3e96', class: "tv-gift-list__list" }, this.list.map(item => (h("li", { class: "tv-gift-list__list__item" }, h("tet-icon", { name: this.listBulletIcon }), item))))))));
     }
     static get is() { return "tet-tv-gift-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-content/tet-tab-content.js

@@ -157,11 +157,11 @@ export class TetTabContent {
         this.selectedId = id;
     }
     render() {
-        return (h(Host, { key: '0d7e34fa68230b416e05573b6dffdb29beda6145' }, h("div", { key: '25d0204966c42a3229569b68ac1d117275ded002', class: {
+        return (h(Host, { key: '1580679fe80288da68795eb04ce918f4d8c6af64' }, h("div", { key: 'ebdd59fcbf34fe26e1afcb019235b17707368187', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility,
                 [this.theme]: true
-            } }, h("slot", { key: 'e59646b6425fa78dd649f39910e50849bcc39594' }))));
+            } }, h("slot", { key: '4e7ee562756fbea45495666f876da1baa810dfb3' }))));
     }
     static get is() { return "tet-tab-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.js

@@ -468,7 +468,7 @@ export class TetTabHeader {
         return {};
     }
     render() {
-        return (h(Host, { key: '0f4ba9430ef4d0ebf78f6bda500dec97305b6e0e', "data-id-suffix": this.idSuffix }, h("div", { key: 'd736ad3bd1735ecd8e9546bd8a9e685be8ba20c4', class: {
+        return (h(Host, { key: '8e9af5049a6bb8a859c244cb96dceca67d2fc556', "data-id-suffix": this.idSuffix }, h("div", { key: '894811c0f2bc7c99e64c1de93d1b515dbde20d87', class: {
                 'tabs': true,
                 'tabs--segmented': this.segmented,
                 'dark': this.darkMode,
@@ -476,7 +476,7 @@ export class TetTabHeader {
                 [this.theme]: true,
                 [this.sizing]: true,
                 [this.type]: !!this.type
-            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: "tablist" }, h("slot", { key: '878b5d64e8de05ae8b6d98093a9ed0eaa95859ac', ref: (slot) => (this.tabContainer = slot) })), h("div", { key: '74f70b87c2f4283d6cba19e46647656150fd8295', class: { 'tabs-line': !this.segmented, 'no-underline': this.hideHeaderUnderline } })));
+            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: "tablist" }, h("slot", { key: '84ed4fee9a29fcd2edf2c0b185b2b49a6b7e0b25', ref: (slot) => (this.tabContainer = slot) })), h("div", { key: 'fda7d023f752a285189ddb6115f9d077b1a69702', class: { 'tabs-line': !this.segmented, 'no-underline': this.hideHeaderUnderline } })));
     }
     static get is() { return "tet-tab-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,12 +20,12 @@ export class TetTag {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h(Host, { key: '19ae917ebe3dc94372dd98e4939ce4e1c81891d8' }, h("button", { key: '67dd55847f85777bf00f2599c5b78d146dc0f7d7', class: {
+        return (h(Host, { key: 'b6dffe961943e852133995f35073a563b024340e' }, h("button", { key: '48590aaad3bf03f9eff3690059deed93f4468314', class: {
                 tag: true,
                 'tag-active': this.active,
                 'tag--icon': this.showIcon,
                 [`theme-${this.theme}`]: true,
-            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: 'a07eef94c1f4633aaeab0e35c814430b318e4b51', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: 'bd10bf881a3cee28a0864da7ed87ffcc4c4f97f8', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '2af01f0b0a226e9421e9aaf4efaa8dcdb12aaf60', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
+            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: '9ddacbb44d1d26a8aef5a0be1dc121585055ecba', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: '67d5d37be4b670c6537f12884fd0c7aca57d64a5', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '67c35afca626a00be20ea8a0ad3b70c132dfb34a', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/carousel/tet-carousel/test/tet-carousel.spec.js

@@ -20,7 +20,9 @@ describe('tet-carousel', () => {
                 class="tet-carousel__gradient-right"
                 style="opacity: 0;"
               ></div>
-              <div class="tet-carousel__track" style="transform: translateX(0px); transition: transform 500ms cubic-bezier(0.77,0,0.175,1);">
+              <div
+                class="tet-carousel__track tet-carousel__track--center"
+                style="transform: translateX(0px); transition: transform 500ms cubic-bezier(0.77,0,0.175,1);">
                 <slot></slot>
               </div>
             </div>
@@ -47,7 +49,9 @@ describe('tet-carousel', () => {
                 class="tet-carousel__gradient-right"
                 style="opacity: 0;"
               ></div>
-              <div class="tet-carousel__track" style="transform: translateX(0px); transition: transform 500ms cubic-bezier(0.77,0,0.175,1);">
+              <div
+              class="tet-carousel__track tet-carousel__track--center"
+              style="transform: translateX(0px); transition: transform 500ms cubic-bezier(0.77,0,0.175,1);">
                 <slot></slot>
               </div>
             </div>

package/dist/collection/components/basic/carousel/tet-carousel/tet-carousel.css

@@ -383,6 +383,7 @@
   --carousel-gradient-light: var(--tc-background-primary);
   --carousel-gradient-dark: var(--tc-background-primary-dark);
   --carousel-gradient: var(--carousel-gradient-light);
+  -webkit-tap-highlight-color: transparent;
   display: inline-block;
   cursor: pointer;
   width: 100%;
@@ -430,6 +431,9 @@
   will-change: transform;
   gap: var(--carousel-track-gap);
 }
+.tet-carousel__track--center {
+  justify-content: center;
+}
 .tet-carousel__track > * {
   flex-shrink: 0;
   display: flex;

package/dist/collection/components/basic/carousel/tet-carousel/tet-carousel.js

@@ -9,6 +9,7 @@ export class TetCarousel {
         this.preventClickOnDocument = (ev) => {
             ev.preventDefault();
             ev.stopPropagation();
+            document.removeEventListener('click', this.preventClickOnDocument, { capture: true });
         };
         this.trackElement = null;
         this.dragStartX = 0;
@@ -23,16 +24,28 @@ export class TetCarousel {
             }
         };
         this.handlePrev = () => {
-            if (this.activeItem > 0) {
-                this.activeItem -= 1;
-            }
-            this.handleMove();
+            this.afterLayout(() => {
+                const visibleItems = Math.max(1, this.getFullyVisibleItemCount());
+                if (this.activeItem && this.activeItem < visibleItems) {
+                    this.activeItem -= this.activeItem;
+                }
+                else {
+                    this.activeItem -= visibleItems;
+                }
+                this.handleMove();
+            });
         };
         this.handleNext = () => {
-            if (this.activeItem < this.totalItems) {
-                this.activeItem += 1;
-            }
-            this.handleMove();
+            this.afterLayout(() => {
+                const visibleItems = Math.max(1, this.getFullyVisibleItemCount());
+                if (this.totalItems - this.activeItem < visibleItems) {
+                    this.activeItem = this.totalItems;
+                }
+                else {
+                    this.activeItem += visibleItems;
+                }
+                this.handleMove();
+            });
         };
         this.moveToLastScreen = () => {
             const wrapperWidth = this.getViewportWidth();
@@ -127,11 +140,17 @@ export class TetCarousel {
             // Let the once:true capture handler auto-remove itself. Clear flag after a tick.
             if (this.clickPreventAdded) {
                 setTimeout(() => {
+                    document.removeEventListener('click', this.preventClickOnDocument, { capture: true });
                     this.clickPreventAdded = false;
                 }, 0);
             }
             if (Math.abs(this.dragOffset - this.swipeStart) > this.swipeThreshold) {
-                this.moveToTarget(-this.dragOffset);
+                if (this.dragOffset - this.swipeStart < 0) {
+                    this.handleNext();
+                }
+                if (this.dragOffset - this.swipeStart > 0) {
+                    this.handlePrev();
+                }
             }
             document.body.style.userSelect = '';
             document.removeEventListener('pointermove', this.onPointerMove);
@@ -178,7 +197,7 @@ export class TetCarousel {
         let assigned = slot.assignedElements ? slot.assignedElements() : [];
         if (assigned.length === 0)
             return undefined;
-        if (assigned[0].className.includes("carousel-wrapper")) {
+        if (assigned[0].className.includes('carousel-wrapper')) {
             assigned = Array.from(assigned[0].children);
         }
         return assigned;
@@ -191,9 +210,13 @@ export class TetCarousel {
         var _a, _b;
         return ((_b = (_a = this.trackElement) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.offsetWidth) || window.innerWidth;
     }
+    // Run a callback after layout/paint to ensure DOM measurements are up to date
+    afterLayout(cb) {
+        requestAnimationFrame(() => requestAnimationFrame(cb));
+    }
     getDotScreenLength() {
         const totalWidth = this.getSlotClientWidth();
-        return (totalWidth / this.dotCount);
+        return totalWidth / this.dotCount;
     }
     isLast(lastScreenBorder, position) {
         const totalWidth = this.getSlotClientWidth();
@@ -209,6 +232,27 @@ export class TetCarousel {
         const lastScreenBorder = Math.max(dotScreenLength, viewportWidth);
         return this.isLast(lastScreenBorder, position);
     }
+    getFullyVisibleItemCount() {
+        const assigned = this.getSlotElements();
+        if (!assigned || assigned.length === 0)
+            return 0;
+        const viewportWidth = this.getViewportWidth();
+        const absOffset = Math.abs(this.dragOffset);
+        const visibleLeft = absOffset;
+        const visibleRight = absOffset + viewportWidth;
+        let count = 0;
+        for (const item of assigned) {
+            const rect = item.getBoundingClientRect();
+            const trackRect = this.trackElement.getBoundingClientRect();
+            const relativeLeft = rect.left - trackRect.left;
+            const relativeRight = relativeLeft + item.offsetWidth;
+            // Fully visible when the entire item falls inside the viewport window
+            if (relativeLeft >= visibleLeft && relativeRight <= visibleRight) {
+                count++;
+            }
+        }
+        return count;
+    }
     checkGradient() {
         if (this.showGradient) {
             const absOffset = Math.abs(this.dragOffset);
@@ -218,42 +262,37 @@ export class TetCarousel {
             if (rightEdgeDistance >= 0) {
                 const rightEdge = rightEdgeDistance < 16;
                 if (absOffset < 16) {
-                    this.leftGradientRef.style.opacity = "0";
-                    this.rightGradientRef.style.opacity = "1";
+                    this.leftGradientRef.style.opacity = '0';
+                    this.rightGradientRef.style.opacity = '1';
                 }
                 else if (rightEdge) {
-                    this.leftGradientRef.style.opacity = "1";
-                    this.rightGradientRef.style.opacity = "0";
+                    this.leftGradientRef.style.opacity = '1';
+                    this.rightGradientRef.style.opacity = '0';
                 }
                 else {
-                    this.leftGradientRef.style.opacity = "1";
-                    this.rightGradientRef.style.opacity = "1";
+                    this.leftGradientRef.style.opacity = '1';
+                    this.rightGradientRef.style.opacity = '1';
                 }
             }
         }
         else {
-            this.leftGradientRef.style.opacity = "0";
-            this.rightGradientRef.style.opacity = "0";
+            this.leftGradientRef.style.opacity = '0';
+            this.rightGradientRef.style.opacity = '0';
         }
     }
     getDotCount() {
         const assigned = this.getSlotElements();
-        if (!assigned)
+        if (!assigned) {
+            this.dotCount = 1;
+            this.totalItems = 0;
             return 1;
+        }
         this.totalItems = assigned.length;
         const viewportWidth = this.getViewportWidth();
         const totalWidth = this.getSlotClientWidth();
-        let count = 0;
-        assigned.forEach((el) => {
-            const rect = el.getBoundingClientRect();
-            const trackRect = this.trackElement.getBoundingClientRect();
-            let relativeLeft = rect.left - trackRect.left;
-            if (relativeLeft > totalWidth - viewportWidth) {
-                this.dotCount = Math.min(this === null || this === void 0 ? void 0 : this.maxDots, count + 1);
-                return;
-            }
-            count = Math.min(this === null || this === void 0 ? void 0 : this.maxDots, Math.ceil(relativeLeft / viewportWidth));
-        });
+        // Precise: add a dot whenever there's any overflow beyond a full viewport
+        const exactScreens = Math.ceil(totalWidth / Math.max(1, viewportWidth));
+        this.dotCount = Math.max(1, Math.min(this === null || this === void 0 ? void 0 : this.maxDots, exactScreens));
     }
     calculateGradient(item, relativeLeft) {
         const totalWidth = this.getSlotClientWidth();
@@ -264,6 +303,31 @@ export class TetCarousel {
         gradientOffset = relativeRight < 160 ? 0 : gradientOffset;
         return gradientOffset;
     }
+    // private disableTabIndex() {
+    //   const buttonComponents = this.container.querySelectorAll('tet-button');
+    //   buttonComponents.forEach((btnComponent) => {
+    //     const btn = btnComponent.shadowRoot.querySelector('button');
+    //     btn.setAttribute('tabIndex', '-1');
+    //   });
+    // }
+    _showButtons() {
+        if (!this.showButtons) {
+            return false;
+        }
+        if (this.getFullyVisibleItemCount() >= this.totalItems) {
+            return false;
+        }
+        return true;
+    }
+    _showDots() {
+        if (!this.showDots) {
+            return false;
+        }
+        if (this.getFullyVisibleItemCount() && this.getFullyVisibleItemCount() >= this.totalItems) {
+            return false;
+        }
+        return true;
+    }
     componentDidLoad() {
         this.getDotCount();
         window.addEventListener('resize', this.getDotCount.bind(this));
@@ -330,12 +394,16 @@ export class TetCarousel {
         window.removeEventListener('resize', this.getDotCount.bind(this));
     }
     render() {
-        return (h(Host, { key: '7830c1325db3efc8ac381328a4c85c675045eafd' }, h("div", { key: '2b1967da520ea3a3b02006c79b317f2443dfa419', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '40e737761684bf5c4fd6132602d80e071c7737a1', class: "tet-carousel__container" }, h("div", { key: '1d4eee7b9ae8831e117f975ffc7d660b5ae41613', class: "tet-carousel__gradient-left", ref: (el) => { this.leftGradientRef = el; } }), h("div", { key: '4c1804b5f50d79dd7adf72a4ecf679bf0cbc2f8e', class: "tet-carousel__gradient-right", ref: (el) => { this.rightGradientRef = el; } }), h("div", { key: '6333801810a9861af6aad1f69a96e31ad20f4ffe', class: "tet-carousel__track", ref: (el) => (this.trackElement = el), style: {
+        return (h(Host, { key: '2fb6cf4c78e60146bb31f2a1b869c34678127ccf' }, h("div", { key: '07b12ea6938caec2de4141f264ae6d70f0f72339', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '5909f4683c8503f5437026db0a9b0f08a1d1823b', class: "tet-carousel__container" }, h("div", { key: '82b3021f9fb3ad1c9cbbaa6407a8885e4e8eebf2', class: "tet-carousel__gradient-left", ref: (el) => {
+                this.leftGradientRef = el;
+            } }), h("div", { key: '2b22c2b12804f12a644725ef9378722025e0d143', class: "tet-carousel__gradient-right", ref: (el) => {
+                this.rightGradientRef = el;
+            } }), h("div", { key: 'e4615d0213134aeaff5e35235bc82af52f51ee22', class: `tet-carousel__track ${!this._showButtons() && !this._showDots() ? 'tet-carousel__track--center' : ''}`, ref: (el) => (this.trackElement = el), style: {
                 transform: `translateX(${this.dragOffset}px)`,
                 transition: this.isDragging ? 'none' : `transform ${this.transitionDuration}ms ${this.transitionTiming}`
-            }, onPointerDown: this.onPointerDown, onMouseMove: this.onPointerMove, onPointerUp: this.onPointerUp, onMouseLeave: this.onPointerUp }, h("slot", { key: 'e952ffea01c2aade62d816694dc8f1e10f1ddc48' }))), (this.showButtons || this.showDots) && (h("div", { key: '3bf958e474494153cd8636c4b99f5d4d8aa792be', class: "tet-carousel__controls" }, this.showButtons && (h("div", { key: '932770d5cda23b42890d7daeb7aa9282da70311d', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: '12c6620578154f6ff57153228ffd5eaf36015286', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, onClick: this.handlePrev, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }))), this.showDots && (h("div", { key: '4155f6a9ef692de6e0e6ded5d2a22128e11a29ab', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, onClick: () => this.handleDotClick(idx) }))))), this.showButtons && (h("div", { key: '9cde973cc05d2b9ad4f0a4a3ab898fd25d6a507a', class: "tet-carousel__buttons " }, h("tet-button", { key: 'fe11eb5e822b46bc470dcb7a3bbc0e7a8cb915d4', class: "tet-carousel__buttons--desktop tet-carousel__btn ", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, onClick: this.handlePrev, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }), h("tet-button", { key: 'd9a18573247d8c0f403ee0a040ba20c2be353e83', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, onClick: this.handleNext, "aria-label": t('components-carousel-next'), disabled: this.dotCount <= 1
-                || this.activeItem === this.totalItems - 1
-                || this.isLastViewport(-this.dragOffset) }))))))));
+            }, onPointerDown: this.onPointerDown, onMouseMove: this.onPointerMove, onPointerUp: this.onPointerUp, onMouseLeave: this.onPointerUp }, h("slot", { key: '490c22255126117175594c86b9338057266e5170' }))), (this._showButtons() || this._showDots()) && (h("div", { key: 'f6b2f9d092fd8958b2577fbfffe890be18c4d238', class: "tet-carousel__controls" }, this._showButtons() && (h("div", { key: 'e39c9c013ca4c0b2d1a062668c0addea084afb9c', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: '8c179655831cfd383ed98621aef152d3f45ee06e', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onClick: this.handlePrev, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }))), this._showDots() && (h("div", { key: '9b4140ae4f1070afe8a656ee2282766556f9aa8c', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, onClick: () => this.handleDotClick(idx) }))))), this._showButtons() && (h("div", { key: '153e2093dd5e9c521c324c501e73f4ed10c8edd0', class: "tet-carousel__buttons " }, h("tet-button", { key: 'fcd9e964507e75f29dccf3322274f5213937218c', class: "tet-carousel__buttons--desktop tet-carousel__btn ", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onClick: this.handlePrev, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }), h("tet-button", { key: '0622035344d0d0d3b7cf8a5726587bcddcd10c0a', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, tabIndex: -1, onClick: this.handleNext, "aria-label": t('components-carousel-next'), disabled: this.dotCount <= 1 ||
+                this.activeItem === this.totalItems - 1 ||
+                this.isLastViewport(-this.dragOffset) }))))))));
     }
     static get is() { return "tet-carousel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/icon/tet-icon.js

@@ -49,7 +49,7 @@ export class TetIcon {
         });
     }
     render() {
-        return (h("span", { key: '54ab31ceb8597ebb94fd12ca44d3c67ba2b45848', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", Object.assign({ key: 'cc82f58ce74ee97ee633c9b8720770b155b8ba1f', class: {
+        return (h("span", { key: 'bbfa5e3445bd0e22afbabd3efc071a39e8daeb21', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", Object.assign({ key: '6532eb075ead5b6514515ef9ecb09c687dd53e7b', class: {
                 'icon-container': true,
                 'default-color': this.shouldUseDefaultColor(),
                 [this.theme]: true,

package/dist/collection/components/basic/loaders/tet-loader/tet-loader.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TetLoader {
     render() {
-        return (h("div", { key: 'cece39cbe52a09491a05c4a03d4ab0a6c9bc1c86', class: "loader" }, h("div", { key: '16f3ea48c7e285a3f442518e6aaa3ade71ec6295', class: "loader-inner" })));
+        return (h("div", { key: '5dc2e7913b4f48ebfb62c51c720516eaf8c97879', class: "loader" }, h("div", { key: 'b5c647ff4b2388de51721391a4683c693e71492a', class: "loader-inner" })));
     }
     static get is() { return "tet-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/loaders/tet-placeholder/tet-placeholder.js

@@ -9,7 +9,7 @@ export class TetPlaceholder {
         this.darkTheme = false;
     }
     render() {
-        return (h(Host, { key: '86e6769bb28dceb43e9d9caabe82bdc39887ca32', style: { width: this.width, height: this.height } }, h("div", { key: '97ec2be704ea1dcd71f71c579ac156bed8d85c9a', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '76fd406b3075f8b119e234af334319c170edfc99', class: "placeholder", style: { height: this.height } }))));
+        return (h(Host, { key: '6125d88b58d055d2a5ab50db94eb33dddca1e310', style: { width: this.width, height: this.height } }, h("div", { key: '412a76beb20da0422e9c7fbc1149d0e6c6674c66', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '3357b6e00195897e85af833c8d1625087475da6d', class: "placeholder", style: { height: this.height } }))));
     }
     static get is() { return "tet-placeholder"; }
     static get encapsulation() { return "shadow"; }