@tet/tet-components 1.3.46-testing → 1.3.47-production

package/dist/collection/components/basic/steppers/tet-stepper-v3/tet-stepper-v3.js

@@ -0,0 +1,89 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A simple stepper component.
+ */
+export class TetStepperV3 {
+    constructor() {
+        this.renderStep = (step, index) => {
+            var _a;
+            const nextStepActive = (_a = this.stepperData[index + 1]) === null || _a === void 0 ? void 0 : _a.active;
+            return (h("li", { class: "step" }, h("div", { class: { 'status-wrapper': true, 'active': step.active } }, h("div", { class: "line top" }), h("div", { class: { 'line': true, 'bottom': true, 'next-step-active': nextStepActive } }), this.renderStepIcon(step.icon)), h("div", { class: "content" }, this.renderStepTitle(step === null || step === void 0 ? void 0 : step.title), this.renderStepDescription(step === null || step === void 0 ? void 0 : step.description))));
+        };
+        this.renderStepIcon = (icon) => {
+            if (icon === 'check') {
+                return (h("div", { class: "check-icon" }, h("tet-icon", { class: "check", name: "check" })));
+            }
+            return h("div", { class: "circle" });
+        };
+        this.renderStepTitle = (title) => {
+            return title ? h("div", { class: "content-title", innerHTML: title }) : null;
+        };
+        this.renderStepDescription = (description) => {
+            return description ? h("div", { class: "content-description", innerHTML: description }) : null;
+        };
+        this.stepperData = [];
+        this.theme = 'light';
+    }
+    render() {
+        return (h(Host, { key: 'dece3c166882cf3b80550bf563c240a74873dcae' }, h("ol", { key: '91bfd3c1f28dae1ae4b56721a0d695b250ed2f94', class: {
+                stepper: true,
+                [this.theme]: true
+            } }, this.stepperData.map(this.renderStep.bind(this)))));
+    }
+    static get is() { return "tet-stepper-v3"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-stepper-v3.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-stepper-v3.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "stepperData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepperV3StepInterface[]",
+                    "resolved": "StepperV3StepInterface[]",
+                    "references": {
+                        "StepperV3StepInterface": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/basic/steppers/tet-stepper-v3/tet-stepper-v3.tsx",
+                            "id": "src/components/basic/steppers/tet-stepper-v3/tet-stepper-v3.tsx::StepperV3StepInterface"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of data to show in the stepper"
+                },
+                "defaultValue": "[]"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            }
+        };
+    }
+}

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

@@ -51,9 +51,9 @@ export class TetDatepickerHeader {
         this.internalDateChanged.emit(newDate);
     }
     render() {
-        return (h("div", { key: 'b728519049d5a6c66d0f43c8997bf4ff25202b4b', class: "header" }, this.datepickerView !== 'year'
+        return (h("div", { key: 'e7ba3f37861a2885daa91d83931f54806d35e5d9', class: "header" }, this.datepickerView !== 'year'
             ? (h("div", { class: "icon-container", onClick: () => this.subtractDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-left" })))
-            : h("div", null), h("div", { key: 'e1b999d9bed5be2eec5c7c7c083b82f4a71b8573', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: '1d98c85536c4f917d11608d4f6c7aa60a10ac96f', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
+            : h("div", null), h("div", { key: '42893ca05833946f33455cba0b28689d9dfb1fee', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: 'a9b275586ae2e30c678bbfd73ed291a4a950e1eb', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
             ? (h("div", { class: "icon-container", onClick: () => this.addDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-right" })))
             : h("div", null)));
     }

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

@@ -156,7 +156,7 @@ export class TetDatepickerMonthView {
         return date.toDateString() === this.currentDate.toDateString();
     }
     render() {
-        return (h(Host, { key: 'd22c70e154ea1533c3e5609ef9acb7dac0422f50' }, h("div", { key: '13eb00c8c00a78e0c1ecdc43920b1dc912226d06', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: '9ad78ab1bcb98c269bfc7c4bc06cad05b005d8c5', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
+        return (h(Host, { key: 'fe427edbdc99dd540cc676934c15af21ecd63448' }, h("div", { key: '6f79b0b63d2feaa82b03c87458ff56513eda24e0', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: 'b0c9afeb4a4002af751575d4a4e17c2ca775df1a', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
     }
     static get is() { return "tet-datepicker-month-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class TetDatepickerMultiYearView {
         this.years = this.getYears(this.internalDate);
     }
     render() {
-        return (h("div", { key: '768970c71b22cccb2141c409a75272f8735e7ad2', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
+        return (h("div", { key: '5d44d96f15909feb53a1d47e65abbfcbe0113fff', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
     }
     static get is() { return "tet-datepicker-multi-year-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,7 +34,7 @@ export class TetDatepickerYearView {
         return this.todayDate.getMonth() === monthIndex;
     }
     render() {
-        return (h("div", { key: '915baeab946c5d9c3d41dd92146cf2533d2cf01a', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
+        return (h("div", { key: '1b139e987779fb41d1aa70bcfc66e993527d1dcb', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
     }
     static get is() { return "tet-datepicker-year-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,10 +94,10 @@ export class TetDatepicker {
         this.rangeDatesChanged.emit(newDates);
     }
     render() {
-        return (h("div", { key: 'cf214d36e68a59d50a57f0b324ddd77480f28ae5', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '6131eccac4608725d9177da82337bc4cbc4ee835', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '121e1c38b34ede7e6f0f88aa5ee6df96b634b5f9', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
-            h("tet-datepicker-month-view", { key: 'c1f5a49dd3762f93ed4e9ac0099ca1756e813560', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
-            h("tet-datepicker-multi-year-view", { key: '268736bee10084216fe1fdfa8558028a5a8f4e26', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
-            h("tet-datepicker-year-view", { key: '92201bd1de3471c5ce3f0bc9bf2a2be894131296', selectedDate: this.date, internalDate: this.internalDate }))));
+        return (h("div", { key: 'ec1cfcb4cb61607d6fde08d72f5d8ec67960e2fd', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '380dd06ac2eef3763d487f1f3402d5aa319152f2', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '829dfca521223b2a7295af97c8b5a1a0415a24bb', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
+            h("tet-datepicker-month-view", { key: '07570e6f6a97936ab39254f7b7abc4102a709dec', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
+            h("tet-datepicker-multi-year-view", { key: 'e3341301d62e62f2ab41e1c65a0500cf531cddd9', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
+            h("tet-datepicker-year-view", { key: '2c4ce88a9b0130530ede910d4499d4682cc00f01', selectedDate: this.date, internalDate: this.internalDate }))));
     }
     static get is() { return "tet-datepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -747,31 +747,31 @@ export class TetRangeSlider {
         this.updateProgress();
     }
     render() {
-        return (h(Host, { key: '40d5bac2a2edc5e21bfea9078189df1a9d924779' }, h("div", { key: '85bbcd7fc16fa3ced276b1b8fcaaa1c996ec83d3', class: {
+        return (h(Host, { key: '76cadf4c30e046936d1103a8ec3be587301fa2e5' }, h("div", { key: '14a5b23d881f9eea91d36dac4033ae716ec74b95', class: {
                 'range-slider': true,
                 [`range-slider--${this.containerSize}`]: true,
                 [`range-slider--${this.type}`]: true,
                 'range-slider--no-controls': !this.withControls,
                 'range-slider--no-input': !this.withInput,
                 [this.theme]: true,
-            } }, h("div", { key: 'f367ab40fc73fe420f5c6d9dd39b6ed4ba83c9e4', class: {
+            } }, h("div", { key: '3deb90476beaba909352d3e373261d445987161c', class: {
                 'range-slider__input-container': true,
                 'hidden': !this.withInput,
-            } }, h("tet-input", Object.assign({ key: '81bff2d45e9788cc43d3943c4e5e5af58ece1418', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: 'dc248bece909a8c60c9369a5c02710c19739771e', class: "range-slider__container" }, h("tet-button", Object.assign({ key: '5f52d74c30c1aacf25ceca9adf2576539f1d2f9a', theme: this.theme, iconMode: true, class: {
+            } }, h("tet-input", Object.assign({ key: '71b554750afb371a9b9d6d4301d70e9903b81b71', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: '940c744414295ecbe9395e51d193ec234929e4bc', class: "range-slider__container" }, h("tet-button", Object.assign({ key: '41d4a79a194a643b57a7fafe267ea1fd6bc85659', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--left': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: '5b37183063a25de34acad0d17ffd691ad2b56e29', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '6be4b469d69587f17c401aa64491c94562479566', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '02898b552f0d33b0eb26561d3fa7b5059ea21615', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: '19641b9cc8e0e8080b8cc72b71f7bfd479d69f78', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: '68189c42742aac7c0da40c7dd78169b30236d5fc', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'db1d944cb587fb9e3b25d8feff9c006040a8fcb8', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: '53b661cc8295b8c08add52f8c0f73be041c3af40', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '556517fc1a060d7364d065484a249a66b680de09', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: '9fb67d645785bf8e19216ef6cfb7f25d3cdd2b05', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '7bd9584baf224e8b32643c01f9482405ccdd0b73', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '58594cf3c4c7faefdd7e1fd60fc16e85b4165860', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: 'b91c6f5c4be9d49ab30021478d9d08aade4429ae', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: '6569ccb69b5db541bb0f59e5c26d9892b7b7bf1f', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'ac951e15df9660b44f23c2a3ac6140074bfee08f', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: '110050353c13290324668064cecfc57745aedb9b', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '6852068928121c4b4c4fec2cc55c574b4654eb06', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
                 'range-slider__data-label-container': true,
                 'hidden': this.type === 'secondary' && this.containerSize === 'small',
-            } })), h("div", { key: '29ca9411beb351bb133c08d8380a9787b8cc421b', class: {
+            } })), h("div", { key: 'a5d78efeeb02a3e168f56bd6d5e5f42e5719a703', class: {
                 'range-slider__current-step-container': true,
                 'hidden': !this.withCurrentStepCounter,
-            } }, h("div", { key: '571823123eafeda4a30de58fc12b706972a454a2', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: 'f33f2621104bf4ea7f8ed6c753892ef6211ef2b6', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '60bde733268c730b940be50f507565ac4ecb642d', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: '63e3f16c1715d0fdd18aae37de5481e416cab8d5', theme: this.theme, iconMode: true, class: {
+            } }, h("div", { key: '054dc3008e90133e00edbdca4c98bdcb55a7db1f', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '0c305adacd23d17ca2323848d05874cdaebc7f17', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '93d40d8b94c508a176bdcead35f72662a4ac6ca0', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: '5fad29d0e1df28073d1e6e05b4a2fc085721f46d', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--right': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: 'b981e749c91150f944d022701310e2a64fb3f3b9', name: "add", class: "range-slider__control--icon" }))))));
+            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: '623fa80cff859e6b95284a1e3bd3077e54a78805', name: "add", class: "range-slider__control--icon" }))))));
     }
     static get is() { return "tet-range-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,7 +121,7 @@ export class TetStepperInput {
      */
     render() {
         const { onMinusClick, value, onPlusClick } = this;
-        return (h("div", { key: '228c8f85f8e54f6f02e32f2ff9b9866f1b938fcd', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: '21ecbebfdb2d09c805be8c673c30bdd6884ada93', type: "secondary", iconMode: true, theme: this.theme, size: 'small', "aria-label": t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: '3db5d37c729ba70c16f00d1af6bc9da6d4795ad1', name: "remove", onClick: onMinusClick })), h("input", Object.assign({ key: '290b9ce9cc812c11501e4e2a161ef0c16cf0fa0f', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("tet-button", { key: '1e854519dff317cf704306d3e7a4027ef5bd066b', type: "secondary", iconMode: true, theme: this.theme, size: 'small', "aria-label": t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: '3d09a2773a6e1b8407a1290d74a1b1f3e9d5d1e3', name: "add", onClick: onPlusClick }))));
+        return (h("div", { key: 'e0d5f6335a018289de417ef8429e9721b322b254', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: 'b0cf8e4764ef907d8131429d8142453c86b70991', type: "secondary", iconMode: true, theme: this.theme, size: 'small', "aria-label": t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: 'fab8bf2e83054bd219cb8a599a9e885871003be2', name: "remove", onClick: onMinusClick })), h("input", Object.assign({ key: '32dc412f591c027a01b47a700ef6656c9251e300', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number" }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}))), h("tet-button", { key: 'bb7ef44dd5b96cf4790fb7fe7ddbd1d79e95e299', type: "secondary", iconMode: true, theme: this.theme, size: 'small', "aria-label": t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: '9b8bb509a7bdbec818705d7a073b80d34d5eaa4c', name: "add", onClick: onPlusClick }))));
     }
     static get is() { return "tet-stepper-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,8 +50,8 @@ export class TetTextarea {
             'error': (errorMessages.length > 0),
             'keyboard-focus': this.focusVisible,
         };
-        return (h(Host, { key: 'f34b954b1d38ae335fda3c21d032a8dea5d1ac4f' }, h("label", { key: 'c680c4240522092485f1b9cbb859b35f2996065e', class: { [`${theme}`]: true } }, label &&
-            h("span", { key: '7a6874afd2b70c10433eb31b6030c48920db287f', class: { 'tet-textarea__label': true, [`tet-textarea__${theme}`]: true } }, label), h("div", { key: '9e99848011730901eecbfaca8e4bda285ed05726', class: { 'textarea-container': true, [`tet-textarea__${theme}`]: true } }, h("textarea", { key: 'b3285c7be1698d51c75c8cfd428bbfabc414f09c', onFocus: this.addKeyboardFocus, onFocusout: this.removeKeyboardFocus, id: "textarea", class: textareaClasses, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value))), (this.errorMessages.length > 0) && renderErrorMessages()));
+        return (h(Host, { key: '28bf5cfd5f3867f508dce68066f106e5592d52c7' }, h("label", { key: 'fb89908d3d13a78d102f499d861638391360538a', class: { [`${theme}`]: true } }, label &&
+            h("span", { key: '81666647b11d90ebf318d9ab61c0d1744916439f', class: { 'tet-textarea__label': true, [`tet-textarea__${theme}`]: true } }, label), h("div", { key: '9702343afd9cdaa3209d4e8d92077d6f388340ad', class: { 'textarea-container': true, [`tet-textarea__${theme}`]: true } }, h("textarea", { key: 'e4925894380d6b2e303ebf82ae9a520df33bdab6', onFocus: this.addKeyboardFocus, onFocusout: this.removeKeyboardFocus, id: "textarea", class: textareaClasses, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value))), (this.errorMessages.length > 0) && renderErrorMessages()));
     }
     static get is() { return "tet-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/lists/tet-news-card-list/tet-news-card-list.js

@@ -65,7 +65,7 @@ export class TetNewsCardList {
             scrollFullWidth,
             controlScrollAmount,
         };
-        return (h(Host, { key: 'bcd09c25fda55e021587039003f93cddd96420dc' }, h("tet-card-list", Object.assign({ key: '0ac5b52b0cdf5b34e5c1a4954c5e9fa3f6f8f2d0', theme: this.theme, part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true }, props), this.items.map((item, index) => this.renderListCard(item, index)))));
+        return (h(Host, { key: 'eb67f9ed052ece63eae8a3c62de1046d48c11d0a' }, h("tet-card-list", Object.assign({ key: '1e6c3844d003a156216b8825e9b642dc3ab8b077', theme: this.theme, part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true }, props), this.items.map((item, index) => this.renderListCard(item, index)))));
     }
     static get is() { return "tet-news-card-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,13 +54,13 @@ export class TetNavigationMobile {
         this.mainDropdownToggle.emit(isTogglerExpanded);
     }
     render() {
-        return (h(Host, { key: 'cc1b1aa87ee611a0d92eaa398470d9964e4c8c84' }, h("navigation", { key: 'a67966c59f534a61e63f213b8dd67e9eb57cfb60', class: {
+        return (h(Host, { key: 'af6c79548d6485a9d58c5d80d7dfb5b37e043d13' }, h("navigation", { key: '6488df2c7585f8b9abdb8df0bacee585b11a24ae', class: {
                 'navigation': true,
                 'navigation--dark': this.darkMode
-            } }, h("div", { key: '97bfb7048844941518783e4b80066d4ff34ed316', class: "navigation__nav-bar" }, h("slot", { key: 'dbb827d5afb985136b8c2543f9610d60dcdb1c77' })), this.isTogglerVisible && (h("span", { key: '1ec147a08db09250dce57ed38cceae0a893a4251', class: "navigation__toggler", onClick: this.onTogglerClick, onKeyDown: (e) => this.handleKeyDown(e), tabIndex: 0 }, !this.isTogglerExpanded && h("tet-icon", { key: '28778de9eba097c4fd597937518bc1d22f8f1a93', class: "navigation__toggler navigation__toggler--burger", name: "burger" }), this.isTogglerExpanded && h("tet-icon", { key: 'c9a66785961b66676ef0b18e61b7cc1cf8072f49', class: "navigation__toggler navigation__toggler--close", name: "close" }))), h("div", { key: 'ea2162d16872548b201588e959c89a4f42c41521', class: {
+            } }, h("div", { key: 'f436c49f377e85d2ee28975de8d74a9352c6b36d', class: "navigation__nav-bar" }, h("slot", { key: '00369719e17b78dac10342ac3cbe85f3de5f3a62' })), this.isTogglerVisible && (h("span", { key: '2f083b097d13e75444a393d38c53794d8a44ec5d', class: "navigation__toggler", onClick: this.onTogglerClick, onKeyDown: (e) => this.handleKeyDown(e), tabIndex: 0 }, !this.isTogglerExpanded && h("tet-icon", { key: 'ea89d24f6505dff0be6586a1434fad2bf61ead37', class: "navigation__toggler navigation__toggler--burger", name: "burger" }), this.isTogglerExpanded && h("tet-icon", { key: 'bd4f487e345d714af1c61cf6925b08157cb9d975', class: "navigation__toggler navigation__toggler--close", name: "close" }))), h("div", { key: '00b6d30fbab39f40a7b6c998664a80842bf40e1e', class: {
                 'navigation__dropdown': true,
                 'navigation__dropdown--expanded': this.isTogglerExpanded,
-            } }, h("slot", { key: '5d1651e6dfe715f33520f1e3d5a738b137161b1d', name: "dropdown" })))));
+            } }, h("slot", { key: 'afaee2dcda1306c0c66477c82de4cec7398e6c21', name: "dropdown" })))));
     }
     static get is() { return "tet-navigation-mobile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/structural/tet-accordion/tet-accordion.js

@@ -107,22 +107,22 @@ export class TetAccordion {
         }
     }
     render() {
-        return (h(Host, { key: '85a5bfbe20b0d3c91b0cea9dd80c556acc8ffcd0' }, h("div", { key: 'c0a3dc2e9f094a99c4092a5b4f357c8899c2edfb', class: {
+        return (h(Host, { key: '22f614b05425d827ab0291dc8e909ee2305a4b24' }, h("div", { key: '6934bfe52243c5511ae0614a7f87c2aeded1193e', class: {
                 'tet-accordion': true,
                 'tet-accordion--border': this.withBorder,
                 [`${this.theme}-theme`]: true,
                 [`tet-accordion--breakpoint-${this.breakpoint}`]: true,
                 'transparent-bg': this.transparentBackground,
-            } }, h("div", { key: 'd273da7ffc6c06569b1ee7f48b998e05585fb49e', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, this.headerImageSrc && this.headerImageSrc !== '' &&
-            h("img", { key: '9b5fe55af2c878e7e136bc007c30422c7b1bb959', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" }), this.renderHeading(), h("tet-icon", { key: '2770e5abee56e385de90e3cf41978d13ada03c15', name: "chevron-down", class: {
+            } }, h("div", { key: '41a21eb1771f0d46b6ab25bd8920d5ed4afc4b07', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, this.headerImageSrc && this.headerImageSrc !== '' &&
+            h("img", { key: '9c68453e65ab6c7f33a4e90e2e79439b5dacf8e4', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" }), this.renderHeading(), h("tet-icon", { key: '015014ccf317e2e96cd62387e58d765e02081218', name: "chevron-down", class: {
                 'tet-accordion__icon': true,
                 'open': this.isOpen
-            } })), h("div", { key: 'a60885eec3d86e94482703b356cbaca38976697e', ref: (element) => (this.contentWrapperElement = element), class: {
+            } })), h("div", { key: '2bc9512a21706383fbe66b6c394a3189719bf8d2', ref: (element) => (this.contentWrapperElement = element), class: {
                 'tet-accordion__content-wrapper': true,
                 'visible': this.isOpen
-            }, inert: !this.isOpen }, h("div", { key: '6bdaf1a8f1d80889ed2d68156b8312048134be7b', ref: (element) => (this.contentElement = element), class: {
+            }, inert: !this.isOpen }, h("div", { key: '656b232c7288dc19b2afdc8409589d2d1e8530af', ref: (element) => (this.contentElement = element), class: {
                 'tet-accordion__content': true
-            } }, h("slot", { key: '79c31ec5233e8db9c4209ea9cb37fbf97b61e893' }))))));
+            } }, h("slot", { key: '252e86d4b56b5732b298064ac5b65fc9fc93f351' }))))));
     }
     static get is() { return "tet-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/structural/tet-expansion-panel/tet-expansion-panel.js

@@ -63,7 +63,7 @@ export class TetExpansionPanel {
         return this.state;
     }
     render() {
-        return (h("div", { key: '8d3a43d63d7a147bc794f8faca7285cd21eb4ae5', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: 'ac084397487be7a1a158b3890993fdc1d1b25494', class: "tet-expansion-panel-content" }, h("slot", { key: '8cf593d96b9e238309bb128f77b22c0980c85d96' }))));
+        return (h("div", { key: '3973c801ae3263f2b80443bf95d9b95b0bf42828', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: '45aefcd2caf2b753a0202fd5a973cdc16d87e03d', class: "tet-expansion-panel-content" }, h("slot", { key: '04d3e119069ecc5252a22100951aa88272ee072e' }))));
     }
     static get is() { return "tet-expansion-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/text-blocks/tet-notification/tet-notification.js

@@ -116,7 +116,7 @@ export class TetNotification {
     }
     render() {
         const { headerTitle, content } = this;
-        return (h(Host, { key: 'f47e2e40fc38b631376fc995c95b6b17ef9a7926' }, h("div", { key: 'f28de4ca9913b891e0c196a3c1705da8895c85bd', class: { notification: true, [this.theme]: true } }, h("div", { key: '0eac189810dbc1d0483a5099e2ffd63fd5c508f2', class: { item: true, [this.type]: true } }, h("div", { key: '36e18f24247faa7227eabb3a3538c14d51661cb8', class: "header" }, this.renderTypeIcon(), h("div", { key: 'ac722222084c3a16fe2a0a59c25110cd2573f980', class: "title" }, headerTitle), this.renderCloseButton()), h("div", { key: '558e257d50da78129470e03dec4363921aad2c94', class: "content" }, h("span", { key: '3f738797645a9fd06bd1529f8d1eeb114f434d2d', innerHTML: content }), h("div", { key: '08e3d2adb10f55394082c80dc59919ad7f8a31a9' }, h("slot", { key: '5d2c46da0b437c8208aa08cae3613292c16f14ac', name: "button" })))))));
+        return (h(Host, { key: 'ea68910ea921dcba94876825c2dd40ab4bb28e8b' }, h("div", { key: 'a88679392d728d7ac8e72c75aa2ea2adfe6ad50c', class: { notification: true, [this.theme]: true } }, h("div", { key: '53107485961bba50156440e9fe40ffd4e62a0c10', class: { item: true, [this.type]: true } }, h("div", { key: '2c89c4727d0573de9c3aab088f2d183be29aa78d', class: "header" }, this.renderTypeIcon(), h("div", { key: '40d008233eb2485e9cb79920724c7cc42dce656a', class: "title" }, headerTitle), this.renderCloseButton()), h("div", { key: '616a22392fb38522845a92912879478e28903563', class: "content" }, h("span", { key: '7e9d4fb1f2ac2149730aef2f4cf8def11e5cecfa', innerHTML: content }), h("div", { key: '4ccc156029288222be0662ba3a0944ac1468970a' }, h("slot", { key: 'b62acbd076c74470c120037848dba7b9624daf9c', name: "button" })))))));
     }
     static get is() { return "tet-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/text-blocks/tet-tooltip/tet-tooltip.js

@@ -351,7 +351,7 @@ export class TetTooltip {
         return isTooltipOutOfBounds;
     }
     render() {
-        return h(Host, { key: 'b6b7767977d2fe74bcb72087a7a438c3f70a75d2', class: { visible: this.showTooltip } }, this.renderTooltip());
+        return h(Host, { key: '6f2107dbd51105a5724c4624d0459736544779dd', class: { visible: this.showTooltip } }, this.renderTooltip());
     }
     static get is() { return "tet-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -129,7 +129,7 @@ export class TetAddressOffersView {
         return h(Fragment, null);
     }
     render() {
-        return (h(Host, { key: '67a2379ba57c996cfecb21e6640c16e7e11071c2' }, this.renderContactForm(), this.renderHeader(), this.address && this.renderBody()));
+        return (h(Host, { key: 'eb7b887a1fca3a0600f1cbedf988da5358240e9b' }, this.renderContactForm(), this.renderHeader(), this.address && this.renderBody()));
     }
     static get is() { return "tet-address-offers-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-b2b-service-calculator/tet-b2b-service-calculator.js

@@ -51,7 +51,7 @@ export class TetB2bServiceCalculator {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h("section", { key: '8cda85f25ae16f047aaebba17cf5b09a5ba0108a', class: "container" }, h("div", { key: 'ae274f3c35a2757636dc200731788b7fc2b4bd4c', class: "title-block" }, t('components-b2b-calculator-title')), h("div", { key: '69f0978da2ef1e1a76ee9693a8dc114bfc39e469', class: "calculator-block" }, h("p", { key: 'e6ccf402ed96cc735da3d8ea7395be1e27d7628e', class: "slider-title" }, t('components-b2b-calculator-computer-count')), h("tet-range-slider", { key: '263f051eae4f7d06b830d61e63ccc1b1b22534d6', class: "slider", size: "large", type: "primary", defaultValue: 75, maxValue: 100, withControls: false, withInput: false, dataPoints: [1, 20, 40, 60, 80, 100], displayDataPoints: [1, 20, 40, 60, 80, 100], lockToDataPoint: false }), h("div", { key: '99b23da4d8d13786556eef06e1b04afc8a35f081', class: "control-container" }, h("div", { key: 'bfa319bf2daff7cc8b9e4f1f65a782569657fc4a', class: "control" }, h("tet-checkbox", { key: '0bfc8eba56e1eca62fbbe9e7879a9034ba22bea4', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, t('components-b2b-calculator-it-admin-checkbox-label'))), h("div", { key: '73fd15a359b09e2e5094a2b0534ffc63fc5d5dbd', class: "control" }, h("tet-switch", { key: '667a14871e68615f5ca7c9180939c2b3a7b676b1', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, t('components-b2b-calculator-in-person-support-switch-label')))), h("div", { key: 'a5d8ea4cbd3035344f4aaf336627ff327d3761b9', class: "monthly-payment-block" }, h("p", { key: '054e81603ab5db3fe159df169e9b54e22f385da5', class: "title" }, t('components-b2b-calculator-potential-monthly-payment')), h("p", { key: 'b65b239ac7c6f63ca4ddcb1c99d03d17c857814e' }, h("span", { key: 'afce3dfee4426188c9e2f28a6e2ff639754721b4', class: "price" }, this.totalPrice), h("span", { key: 'e49f0eacccb635be66fdfbd213ba6415e81e1053', class: "currency" }, t('components-euro-per-month')))))));
+        return (h("section", { key: '4a0cae9a6c92e56daab2179816535f626b6b91e4', class: "container" }, h("div", { key: '74ac98a2c919c61486ffa561d765c7851e416498', class: "title-block" }, t('components-b2b-calculator-title')), h("div", { key: '93422557e4cfa64b108af608d973976e17bdf4df', class: "calculator-block" }, h("p", { key: '02641f328325cd750435da8fe52f298f64fde409', class: "slider-title" }, t('components-b2b-calculator-computer-count')), h("tet-range-slider", { key: '8c91d0070d7c2e3909f85ddd964e232cbdde1723', class: "slider", size: "large", type: "primary", defaultValue: 75, maxValue: 100, withControls: false, withInput: false, dataPoints: [1, 20, 40, 60, 80, 100], displayDataPoints: [1, 20, 40, 60, 80, 100], lockToDataPoint: false }), h("div", { key: '0b97bb2ab85d823b8dfacea52af226fb8d2dc939', class: "control-container" }, h("div", { key: '0650a9f5be57662c6f2d285565aa6cfddd93f5c7', class: "control" }, h("tet-checkbox", { key: '14a580ad3ae90dcd782e5587a2b88fb5620840c7', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, t('components-b2b-calculator-it-admin-checkbox-label'))), h("div", { key: '768d6a300bdd9d087dc0d0108c88bd5f0ae25a51', class: "control" }, h("tet-switch", { key: '954efdd4249c798f81f4d74610e8ab9a86657bf1', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, t('components-b2b-calculator-in-person-support-switch-label')))), h("div", { key: '7902cf23ad4cdcc8233c1f08c03a55c0dbca15db', class: "monthly-payment-block" }, h("p", { key: 'e9db88a81af29275364d5ace234f38c6d1804624', class: "title" }, t('components-b2b-calculator-potential-monthly-payment')), h("p", { key: '4585df1658a18717d640583cb8a56e475af3d7b3' }, h("span", { key: '9c3fdefe74748100dc7d6dffa0eb3e0276565804', class: "price" }, this.totalPrice), h("span", { key: 'f5e4c952bf64b0dc7e58fbb23fd8a5a3c306d6f8', class: "currency" }, t('components-euro-per-month')))))));
     }
     static get is() { return "tet-b2b-service-calculator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-business-lines/tet-business-lines.js

@@ -46,7 +46,7 @@ export class TetBusinessLines {
     }
     render() {
         var _a;
-        return (h("div", { key: '18fc1ef0574e27d2983bd44d7718dbe1ac4e793f', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: 'b5b31380a2a12a0458ae6532f92db7618e3fa22a', class: "business-line-wrapper" }, (_a = this.businessLines) === null || _a === void 0 ? void 0 : _a.map(this.renderBusinessLineItem))));
+        return (h("div", { key: 'cef949ef5ed1b55e430413bc9ac8f2780723fde0', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: '3aa8858a5a3f621aa9b9be5bac9abd496581a8db', class: "business-line-wrapper" }, (_a = this.businessLines) === null || _a === void 0 ? void 0 : _a.map(this.renderBusinessLineItem))));
     }
     static get is() { return "tet-business-lines"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-thank-you-view-v3/test/tet-thank-you-view-v3.spec.js

@@ -0,0 +1,175 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { TetStepperV3 } from "../../../basic/steppers/tet-stepper-v3/tet-stepper-v3";
+import { TetThankYouViewV3 } from "../tet-thank-you-view-v3";
+describe('tet-thank-you-view-v3', () => {
+    it('renders an empty thank you view when no data provided', async () => {
+        const page = await newSpecPage({
+            components: [TetThankYouViewV3],
+            template: () => h("tet-thank-you-view-v3", null)
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-thank-you-view-v3>
+        <mock:shadow-root>
+         <div class="thank-you-view-v3 light">
+           <div class="thank-you-view-v3-info-block">
+             <tet-icon aria-hidden="true" class="thank-you-view-v3-icon" name="check"></tet-icon>
+             <div class="thank-you-view-v3-info-block-text">
+             </div>
+           </div>
+         </div>
+        </mock:shadow-root>
+      </tet-thank-you-view-v3>
+    `);
+    });
+    it('renders the thank you view without icon', async () => {
+        const page = await newSpecPage({
+            components: [TetThankYouViewV3],
+            template: () => h("tet-thank-you-view-v3", { icon: "none" })
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-thank-you-view-v3>
+       <mock:shadow-root>
+        <div class="thank-you-view-v3 light">
+          <div class="thank-you-view-v3-info-block">
+            <div class="thank-you-view-v3-info-block-text">
+            </div>
+          </div>
+        </div>
+       </mock:shadow-root>
+      </tet-thank-you-view-v3>
+    `);
+    });
+    it('renders the thank you view with description', async () => {
+        const props = {
+            mainBlockTitle: 'mainBlockTitle',
+            mainBlockDescription: 'mainBlockDescription'
+        };
+        const page = await newSpecPage({
+            components: [TetThankYouViewV3],
+            template: () => h("tet-thank-you-view-v3", Object.assign({}, props))
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-thank-you-view-v3>
+        <mock:shadow-root>
+         <div class="thank-you-view-v3 light">
+           <div class="thank-you-view-v3-info-block">
+              <tet-icon aria-hidden="true" class="thank-you-view-v3-icon" name="check"></tet-icon>
+              <div class="thank-you-view-v3-info-block-text">
+                <h1 class="thank-you-view-v3-info-block-title">
+                  mainBlockTitle
+                </h1>
+                <div class="thank-you-view-v3-info-block-description">
+                  mainBlockDescription
+                </div>
+              </div>
+           </div>
+         </div>
+        </mock:shadow-root>
+      </tet-thank-you-view-v3>
+    `);
+    });
+    it.skip('renders the thank you view with stepper', async () => {
+        const props = {
+            stepperData: [
+                {
+                    icon: 'check',
+                    active: true,
+                    title: 'Tikko',
+                    description: 'Pieteikums nosūtīts'
+                },
+                {
+                    icon: 'check',
+                    active: true,
+                    title: 'Tikko',
+                    description: 'Pieteikums Saņemts'
+                }
+            ],
+            icon: 'check'
+        };
+        const page = await newSpecPage({
+            components: [TetThankYouViewV3, TetStepperV3],
+            template: () => h("tet-thank-you-view-v3", Object.assign({}, props))
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-thank-you-view-v3>
+        <mock:shadow-root>
+         <div class="thank-you-view-v3">
+           <div class="thank-you-view-v3-info-block">
+             <tet-icon class="thank-you-view-v3-icon" name="check"></tet-icon>
+             <div class="thank-you-view-v3-info-block-text">
+             </div>
+           </div>
+           <div class="thank-you-view-v3-stepper">
+             <tet-stepper-v3>
+               <mock:shadow-root>
+                 <ol class="stepper">
+                   <li class="stepper-step">
+                     <li class="active stepper-line"></li>
+                     <div class="stepper-step-wrapper">
+                       <div class="stepper-step-wrapper-icon">
+                         <div class="check-icon">
+                           <tet-icon class="check" name="check"></tet-icon>
+                         </div>
+                       </div>
+                       <div class="stepper-step-wrapper-content">
+                         <div class="stepper-step-wrapper-content-title">
+                           Tikko
+                         </div>
+                         <div class="stepper-step-wrapper-content-description">
+                           Pieteikums nosūtīts
+                         </div>
+                       </div>
+                     </div>
+                   </li>
+                   <li class="stepper-step">
+                     <div class="stepper-step-wrapper">
+                       <div class="stepper-step-wrapper-icon">
+                         <div class="check-icon">
+                           <tet-icon class="check" name="check"></tet-icon>
+                         </div>
+                       </div>
+                       <div class="stepper-step-wrapper-content">
+                         <div class="stepper-step-wrapper-content-title">
+                           Tikko
+                         </div>
+                         <div class="stepper-step-wrapper-content-description">
+                           Pieteikums Saņemts
+                         </div>
+                       </div>
+                     </div>
+                   </li>
+                 </ol>
+               </mock:shadow-root>
+             </tet-stepper-v3>
+           </div>
+         </div>
+       </mock:shadow-root>
+      </tet-thank-you-view-v3>
+    `);
+    });
+    it('renders the thank you view with cta button and dark theme', async () => {
+        const page = await newSpecPage({
+            components: [TetThankYouViewV3],
+            template: () => h("tet-thank-you-view-v3", { ctaButtonLabel: "ctaButtonLabel", theme: "dark" })
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-thank-you-view-v3>
+        <mock:shadow-root>
+         <div class="thank-you-view-v3 dark">
+           <div class="thank-you-view-v3-info-block">
+             <tet-icon aria-hidden="true" class="thank-you-view-v3-icon" name="check"></tet-icon>
+             <div class="thank-you-view-v3-info-block-text">
+             </div>
+           </div>
+           <nav class="thank-you-view-v3-cta-button" aria-label="CTA">
+            <tet-button accessibilitylabel="ctaButtonLabel" element-id="thankYouBackButton" size="large" theme="dark" type="primary">
+              ctaButtonLabel
+            </tet-button>
+          </nav>
+         </div>
+       </mock:shadow-root>
+      </tet-thank-you-view-v3>
+    `);
+    });
+});