@tet/tet-components 1.3.16-testing → 1.3.17-staging

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

@@ -396,11 +396,21 @@
   --expandable-input-disabled-background-color: rgba(88, 99, 116, 0.08);
   --expandable-input-container-justify-content: flex-end;
   --expandable-input-container-min-width: 2.75rem;
+  --expandable-input-container-height: 2.75rem;
+  --expandable-input-container-close-padding: 0.75rem;
   --expandable-input-close-button-text-color: rgb(10, 11, 13);
 }
 
+:host(.small) {
+  --expandable-input-container-min-width: 2.25rem;
+  --expandable-input-container-height: 2.25rem;
+  --expandable-input-container-close-padding: 0.5rem;
+}
+
 .container {
   min-width: var(--expandable-input-container-min-width);
+  min-height: var(--expandable-input-container-height);
+  height: var(--expandable-input-container-height);
   display: flex;
   flex-direction: row;
   justify-content: var(--expandable-input-container-justify-content);
@@ -424,7 +434,7 @@
   left: 0.625rem !important;
 }
 .container .input-close {
-  padding: 0.75rem;
+  padding: var(--expandable-input-container-close-padding);
   margin-left: 0.25rem;
   cursor: pointer;
   color: var(--expandable-input-close-button-text-color);
@@ -457,10 +467,17 @@
 }
 .container.mobile.expanded .input-wrapper {
   width: 100%;
+  height: 100%;
 }
 .container.mobile.expanded .tet-input {
   --input-border-color: transparent;
 }
+.container.mobile.expanded .input-wrapper,
+.container.mobile.expanded tet-input.tet-input,
+.container.mobile.expanded input {
+  min-height: var(--expandable-input-container-height);
+  height: var(--expandable-input-container-height);
+}
 .container.mobile.expanded .icon {
   transition: opacity 300ms;
 }
@@ -473,34 +490,28 @@
 .container.desktop .icon {
   transition: opacity 300ms, color 300ms;
 }
-.container.desktop .icon.icon-left {
-  --input-icon-color: rgb(153, 160, 174);
-}
-.container.desktop .icon.icon-right {
-  opacity: 0;
-}
 .container.desktop.expanded ::placeholder,
 .container.desktop.expanded :-ms-input-placeholder,
 .container.desktop.expanded ::-ms-input-placeholder {
-  color: black;
+  color: var(--expandable-input-icon-color);
 }
 .container.desktop.expanded .input.with-icon--left.sc-tet-input {
   padding-left: 2.5rem;
-  color: black;
+  color: var(--expandable-input-icon-color);
 }
 .container.desktop.expanded .input-wrapper {
   width: 100%;
+  height: 100%;
+}
+.container.desktop.expanded .input-wrapper,
+.container.desktop.expanded tet-input.tet-input,
+.container.desktop.expanded input {
+  min-height: var(--expandable-input-container-height);
+  height: var(--expandable-input-container-height);
 }
 .container.desktop.expanded .icon {
   transition: opacity 300ms, color 300ms;
 }
-.container.desktop.expanded .icon.icon-left {
-  --input-icon-color: black;
-}
-.container.desktop.expanded .icon.icon-right {
-  opacity: 1;
-  --input-icon-color: rgb(153, 160, 174);
-}
 .container.dark {
   --expandable-input-background-color: rgb(10, 11, 13);
   --expandable-input-icon-color: rgb(247, 247, 247);
@@ -556,4 +567,14 @@ tet-input.tet-input {
   --input-disabled-text-color: var(--expandable-input-disabled-text-color);
   --input-border-disabled: var(--expandable-input-border-disabled);
   --input-disabled-background-color: var(--expandable-input-disabled-background-color);
+  --input-disabled-icon-color: var(--expandable-input-border-disabled);
+}
+
+.tet-input__base.keyboard-focus.sc-tet-input:focus {
+  outline-offset: 0rem;
+  border: 0.125 solid var(--input-focus-border-color);
+}
+
+.tet-input__base.sc-tet-input {
+  border: 0.0625rem solid var(--input-focus-border-color);
 }

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

@@ -24,6 +24,8 @@ export class TetExpandableInput {
             this.host.tabIndex = 0;
             const minWidth = getConvertedPixels(getComputedStyle(this.host).getPropertyValue('--expandable-input-container-min-width'));
             this.mobileClosedSize = Math.max(this.inputHtmlElement.offsetHeight, minWidth);
+            const minHeight = getConvertedPixels(getComputedStyle(this.host).getPropertyValue('--expandable-input-container-height'));
+            this.mobileClosedSize = Math.max(this.inputHtmlElement.offsetHeight, minHeight);
             this.inputWrapper.style.width =
                 this.mode === 'mobile' ? `${this.mobileClosedSize}px` : `${getConvertedPixels(this.closedWidth)}px`;
         };
@@ -80,6 +82,7 @@ export class TetExpandableInput {
         this.validators = [];
         this.manualValidation = false;
         this.theme = 'classic';
+        this.size = 'default';
         this.closeInputText = '';
         this.darkMode = false;
     }
@@ -222,12 +225,12 @@ export class TetExpandableInput {
         return '';
     }
     render() {
-        return (h(Host, { key: '37562d6a8f52f2863511c189d212a64ab3493969' }, h("div", { key: '17884b2b8c0658b09bb7af74cc8df4f723fdefea', class: {
+        return (h(Host, { key: '966f0c513c9af74accb2c9ac05106ea2fb9b2ec2', class: { small: this.size === 'small' } }, h("div", { key: '3181be4bba55614b2d538469f2d4d7c7a7bfdfd9', class: {
                 container: true,
                 expanded: this.expanded,
                 [this.mode]: true,
                 dark: this.darkMode
-            } }, h("div", { key: '76e7f5bc4e7d3b8fe18cc744644b6ee5821462e9', class: "input-wrapper", ref: (element) => (this.inputWrapper = element) }, h("tet-input", { key: '19133005cfbfdaabd0a4b23c3d2466c678fac576', class: "tet-input", label: this.label, "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-type": this.type, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.renderInputContent ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.theme, ref: (inputElement) => (this.inputHtmlElement = inputElement) }), this.closeButton))));
+            } }, h("div", { key: 'a50105b3fc8d3b34fe3b9fa13b0afc46b639ff10', class: "input-wrapper", ref: (element) => (this.inputWrapper = element) }, h("tet-input", { key: '8cb1ec1d74fc7b87062b988ce63b8794e887182e', class: "tet-input", label: this.label, "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-type": this.type, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.renderInputContent ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.theme, ref: (inputElement) => (this.inputHtmlElement = inputElement) }), this.closeButton))));
     }
     static get is() { return "tet-expandable-input"; }
     static get encapsulation() { return "shadow"; }
@@ -583,6 +586,24 @@ export class TetExpandableInput {
                 "reflect": false,
                 "defaultValue": "'classic'"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'small'",
+                    "resolved": "\"default\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the input field."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
             "closeInputText": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/simple/lists/tet-text-list/tet-text-list.css

@@ -5182,6 +5182,7 @@
   --tc-text-primary-dark: var(--tc-grey-100-dark);
   --tc-text-secondary-dark: var(--tc-grey-70-dark);
   --tc-text-tertiary-dark: var(--tc-grey-60-dark);
+  --tc-text-blue-grey-dark: var(--tc-grey-50-dark);
   --tc-text-link-dark: var(--tc-blue-40-dark);
   --tc-background-primary-dark: var(--tc-grey-00-dark);
   --tc-background-secondary-dark: var(--tc-grey-10-dark);
@@ -5425,7 +5426,9 @@
   --tc-text-primary: var(--tc-grey-100);
   --tc-text-secondary: var(--tc-grey-70);
   --tc-text-tertiary: var(--tc-grey-60);
+  --tc-text-blue-grey: var(--tc-grey-50);
   --tc-text-link: var(--tc-blue-40);
+  --tc-text-inverse-primary: var(--tc-grey-00);
   --tc-background-primary: var(--tc-grey-00);
   --tc-background-secondary: var(--tc-grey-10);
   --tc-background-tertiary: var(--tc-grey-20);

package/dist/collection/components/views/tet-cloud-configurator/tet-cloud-configurator.css

@@ -355,6 +355,16 @@
   * @prop --tet-cloud-calculator-border-radius: The border radius of the main container.
   */
   --tet-cloud-calculator-border-radius: none;
+  --tet-cloud-calculator-background-primary-color: var(--tc-background-primary);
+  --tet-cloud-calculator-background-secondary-color: var(--tc-background-secondary);
+  --tet-cloud-calculator-background-tertiary-color:var(--tc-background-tertiary);
+  --tet-cloud-calculator-background-floating-summary: var(--tc-layer-inverse-primary);
+  --tet-cloud-calculator-text-primary-color: var(--tc-text-primary);
+  --tet-cloud-calculator-text-secondary-color: var(--tc-text-secondary);
+  --tet-cloud-calculator-text-inverse-primary: var(--tc-text-inverse-primary);
+  --tet-cloud-calculator-border-bottom-color:var(--tc-border-quaternary);
+  --tet-cloud-calculator-tertiary: var(--tc-text-tertiary);
+  --tet-cloud-calculator-text-blue-grey: var(--tc-text-blue-grey);
   display: block;
   height: 100%;
   width: 100%;
@@ -363,12 +373,24 @@
 .cloud-configurator {
   position: relative;
   border-radius: var(--tet-cloud-calculator-border-radius);
-  background-color: rgb(255, 255, 255);
+  background-color: var(--tet-cloud-calculator-background-primary-color);
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
-  color: rgb(10, 11, 13);
+  color: var(--tet-cloud-calculator-text-primary-color);
+}
+.cloud-configurator.dark {
+  --tet-cloud-calculator-background-primary-color: var(--tc-background-primary-dark);
+  --tet-cloud-calculator-background-secondary-color: var(--tc-background-secondary-dark);
+  --tet-cloud-calculator-background-tertiary-color:var(--tc-background-tertiary-dark);
+  --tet-cloud-calculator-background-floating-summary: var(--tc-background-tertiary-dark);
+  --tet-cloud-calculator-text-primary-color: var(--tc-text-primary-dark);
+  --tet-cloud-calculator-text-secondary-color: var(--tc-text-secondary-dark);
+  --tet-cloud-calculator-text-inverse-primary: var(--tc-text-primary-dark);
+  --tet-cloud-calculator-border-bottom-color:var(--tc-border-quaternary-dark);
+  --tet-cloud-calculator-tertiary: var(--tc-text-tertiary-dark);
+  --tet-cloud-calculator-text-blue-grey: var(--tc-text-blue-grey-dark);
 }
 .cloud-configurator .header {
   position: -webkit-sticky;
@@ -390,7 +412,7 @@
   justify-content: center;
   width: 100%;
   padding: 0.75rem 0;
-  background-color: rgb(255, 255, 255);
+  background-color: var(--tet-cloud-calculator-background-primary-color);
 }
 .cloud-configurator .header--is-pinned .inner-wrapper {
   -moz-box-shadow: 0 0.063rem 0.25rem rgba(0, 0, 0, 0.1);
@@ -408,7 +430,7 @@
 }
 .cloud-configurator .content__subtitle {
   font: 400 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;
-  color: rgb(67, 75, 86);
+  color: var(--tet-cloud-calculator-text-secondary-color);
   text-align: center;
   margin: 0 auto 3.5rem;
   max-width: 29.25rem;
@@ -425,7 +447,7 @@
   row-gap: 1.5rem;
   column-gap: 2.5rem;
   padding-bottom: 2rem;
-  border-bottom: 0.031rem solid rgb(215, 219, 224);
+  border-bottom: 0.031rem solid var(--tet-cloud-calculator-border-bottom-color);
   justify-content: center;
 }
 .cloud-configurator .form__group-label {
@@ -452,7 +474,7 @@
 }
 .cloud-configurator .form__checkbox-helper {
   font: 400 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif;
-  color: rgb(67, 75, 86);
+  color: var(--tet-cloud-calculator-text-secondary-color);
   margin-left: 2rem;
   max-width: 36.563rem;
 }
@@ -470,7 +492,7 @@
   flex-direction: row;
   width: 100%;
   padding-bottom: 0.5rem;
-  border-bottom: 0.031rem solid rgb(192, 197, 206);
+  border-bottom: 0.031rem solid var(--tet-cloud-calculator-border-bottom-color);
 }
 .cloud-configurator .expandable-list .expandable-item:nth-child(n+4) {
   display: none;
@@ -482,11 +504,11 @@
 }
 .cloud-configurator .expandable-list .expandable-item__label {
   font: 400 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;
-  color: rgb(10, 11, 13);
+  color: var(--tet-cloud-calculator-text-primary-color);
 }
 .cloud-configurator .expandable-list .expandable-item__helper {
   font: 400 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif;
-  color: rgb(67, 75, 86);
+  color: var(--tet-cloud-calculator-text-secondary-color);
 }
 .cloud-configurator .expandable-list__toggle-row {
   display: flex;
@@ -502,27 +524,28 @@
   padding: 0.5rem 0;
   text-decoration: underline;
   cursor: pointer;
-  color: rgb(10, 11, 13);
+  color: var(--tet-cloud-calculator-text-primary-color);
   border-color: transparent;
   background: transparent;
   font-size: inherit;
 }
 .cloud-configurator .expandable-list__toggle:visited, .cloud-configurator .expandable-list__link:visited {
-  color: rgb(10, 11, 13);
+  color: var(--tet-cloud-calculator-text-primary-color);
 }
 .cloud-configurator .expandable-list__toggle:hover, .cloud-configurator .expandable-list__link:hover {
-  color: rgb(88, 99, 116);
+  color: var(--tet-cloud-calculator-tertiary);
 }
 .cloud-configurator .expandable-list__toggle:hover tet-icon, .cloud-configurator .expandable-list__link:hover tet-icon {
-  --icon-color: rgb(88, 99, 116);
+  --icon-color: var(--tet-cloud-calculator-tertiary);
 }
 .cloud-configurator .expandable-list__link tet-icon {
   padding-bottom: 0.125rem;
+  --icon-color: var(--tet-cloud-calculator-text-primary-color);
 }
 .cloud-configurator .summary {
   margin: 2.5rem 0 0;
   padding-bottom: 1rem;
-  border-bottom: 0.031rem solid rgb(215, 219, 224);
+  border-bottom: 0.031rem solid var(--tet-cloud-calculator-border-bottom-color);
 }
 .cloud-configurator .summary__title {
   font: 500 1.25rem/1.5rem Inter, Gilroy, Arial, sans-serif;
@@ -533,19 +556,19 @@
   padding-bottom: 1.5rem;
   justify-content: flex-start;
   margin: 1.5rem 0 1rem;
-  border-bottom: 0.031rem solid rgb(215, 219, 224);
+  border-bottom: 0.031rem solid var(--tet-cloud-calculator-border-bottom-color);
 }
 .cloud-configurator .summary-table {
   display: grid;
   grid-template-columns: 3fr 1fr;
   width: 100%;
-  background-color: rgb(255, 255, 255);
+  background-color: var(--tet-cloud-calculator-background-primary-color);
 }
 .cloud-configurator .summary-table__row {
   display: contents;
 }
 .cloud-configurator .summary-table__row:nth-child(2n) > * {
-  background-color: rgb(247, 247, 247);
+  background-color: var(--tet-cloud-calculator-background-secondary-color);
 }
 .cloud-configurator .summary-table__row > * {
   height: 100%;
@@ -579,7 +602,7 @@
   grid-column: 1;
   font: 400 1rem/1.5rem Inter, Gilroy, Arial, sans-serif;
   text-align: left;
-  color: rgb(67, 75, 86);
+  color: var(--tet-cloud-calculator-text-secondary-color);
   white-space: nowrap;
   min-width: 10rem;
   display: flex;
@@ -604,12 +627,12 @@
   position: sticky;
   z-index: 1;
   bottom: 0;
-  background-color: rgb(255, 255, 255);
-  color: rgb(10, 11, 13);
+  background-color: var(--tet-cloud-calculator-background-primary-color);
+  color: var(--tet-cloud-calculator-text-primary-color);
 }
 .cloud-configurator .floating-summary--is-pinned {
-  background-color: rgb(10, 11, 13);
-  color: rgb(255, 255, 255);
+  background-color: var(--tet-cloud-calculator-background-floating-summary);
+  color: var(--tet-cloud-calculator-text-inverse-primary);
 }
 .cloud-configurator .floating-summary__container {
   padding: 0.5rem 1.5rem;
@@ -630,10 +653,10 @@
   font: 400 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif;
 }
 .cloud-configurator .floating-summary--is-pinned .floating-summary__count--item {
-  color: rgb(153, 160, 174);
+  color: var(--tet-cloud-calculator-text-blue-grey);
 }
 .cloud-configurator .floating-summary--is-pinned .floating-summary__count--other {
-  color: rgb(215, 219, 224);
+  color: var(--tet-cloud-calculator-text-inverse-primary);
 }
 .cloud-configurator .floating-summary--is-pinned .floating-summary__count--break {
   flex-basis: 100%;

package/dist/collection/components/views/tet-cloud-configurator/tet-cloud-configurator.js

@@ -109,6 +109,7 @@ export class TetCloudConfigurator {
         };
         this.language = 'lv';
         this.containerSelector = '';
+        this.theme = 'light';
         this.selectOnFocus = undefined;
         this.isLoading = true;
         this.headerRef = undefined;
@@ -277,7 +278,7 @@ export class TetCloudConfigurator {
         if ((options === null || options === void 0 ? void 0 : options.hidden) === true) {
             return null;
         }
-        return (h("div", { class: "form__input" }, h("tet-number-input", { min: this.getMinValue(fieldKey), max: this.getMaxValue(fieldKey), label: this.getLabel(fieldKey), "accessibility-label": this.getHelperText(fieldKey), "button-accessibility-label": getSuffixOptionTitle(fieldKey), helperText: this.getHelperText(fieldKey), value: (_a = this.formValues[fieldKey]) === null || _a === void 0 ? void 0 : _a.value, disabled: options === null || options === void 0 ? void 0 : options.disabled, suffixes: getSuffixes(fieldKey), onInputValueChanged: (event) => this.onNumberValueChanged(event.detail, fieldKey), selectOnFocus: this.selectOnFocus, tabIndex: 0 })));
+        return (h("div", { class: "form__input" }, h("tet-number-input", { min: this.getMinValue(fieldKey), max: this.getMaxValue(fieldKey), label: this.getLabel(fieldKey), "accessibility-label": this.getHelperText(fieldKey), "button-accessibility-label": getSuffixOptionTitle(fieldKey), helperText: this.getHelperText(fieldKey), value: (_a = this.formValues[fieldKey]) === null || _a === void 0 ? void 0 : _a.value, disabled: options === null || options === void 0 ? void 0 : options.disabled, suffixes: getSuffixes(fieldKey), onInputValueChanged: (event) => this.onNumberValueChanged(event.detail, fieldKey), selectOnFocus: this.selectOnFocus, tabIndex: 0, theme: this.theme })));
     }
     /**
      * Renders a row for the expandable list using the `fields` configuration and the `formValues` objects.
@@ -287,7 +288,7 @@ export class TetCloudConfigurator {
     renderExpandableItem(fieldKey) {
         var _a;
         const field = this.fields[fieldKey];
-        return (h("div", { class: "expandable-item" }, h("div", { class: "expandable-item__description" }, h("div", { class: "expandable-item__title" }, field.name[this.language]), h("div", { class: "expandable-item__helper" }, field.description[this.language])), h("tet-stepper-input", { min: this.getMinValue(fieldKey), max: this.getMaxValue(fieldKey), step: 1, value: (_a = this.formValues[fieldKey]) === null || _a === void 0 ? void 0 : _a.value, onInputValueChanged: (event) => this.onNumberValueChanged({ value: event.detail }, fieldKey), selectOnFocus: this.selectOnFocus, "accessibility-label": field.name[this.language] })));
+        return (h("div", { class: "expandable-item" }, h("div", { class: "expandable-item__description" }, h("div", { class: "expandable-item__title" }, field.name[this.language]), h("div", { class: "expandable-item__helper" }, field.description[this.language])), h("tet-stepper-input", { min: this.getMinValue(fieldKey), max: this.getMaxValue(fieldKey), step: 1, value: (_a = this.formValues[fieldKey]) === null || _a === void 0 ? void 0 : _a.value, onInputValueChanged: (event) => this.onNumberValueChanged({ value: event.detail }, fieldKey), selectOnFocus: this.selectOnFocus, "accessibility-label": field.name[this.language], theme: this.theme })));
     }
     /** Renders the table for the `summary` part. */
     renderSummaryTable() {
@@ -404,12 +405,12 @@ export class TetCloudConfigurator {
             return this.renderPlaceholder();
         }
         processTranslations('cloud-configurator', this.language);
-        return (h(Host, null, h("div", { class: "cloud-configurator" }, h("div", { class: "header", part: "header", ref: (el) => (this.headerRef = el) }, h("div", { class: "inner-wrapper" }, h("tet-tab-header", { class: "header__segment-switch", segmented: true, position: "center", defaultTab: "small", onTabSelected: this.onTabSelected }, h("button", { "data-name": CloudTabName.SMALL }, h("p", null, t('components-cloud-configurator-type-small'))), h("button", { "data-name": CloudTabName.AVERAGE }, h("p", null, t('components-cloud-configurator-type-average'))), h("button", { "data-name": CloudTabName.LARGE }, h("p", null, t('components-cloud-configurator-type-large'))), h("button", { "data-name": CloudTabName.INDIVIDUAL }, h("p", null, t('components-cloud-configurator-type-custom')))))), h("div", { class: "content", part: "content" }, this.renderTitle(), h("div", { class: "form", part: "form" }, h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-vcpu')), this.renderNumberInput('v_cpu_standard'), this.renderNumberInput('v_cpu_performance')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-vram')), this.renderNumberInput('v_ram'), h("div", { class: "form__input" })), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-storage')), this.renderNumberInput('storage_bronze'), this.renderNumberInput('storage_silver'), this.renderNumberInput('storage_gold'), this.renderNumberInput('storage_platinum')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-extra-storage')), this.renderNumberInput('storage_backup'), this.renderNumberInput('storage_object')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-license')), this.renderNumberInput('license_windows'), this.renderNumberInput('license_veeam')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-ms-license')), h("div", { class: { 'expandable-list': true, 'expanded': this.isListExpanded } }, this.renderExpandableItem('sql_server_standard_core'), this.renderExpandableItem('win_rds'), this.renderExpandableItem('win_server_standard_core'), this.renderExpandableItem('win_server_dc_core'), this.renderExpandableItem('sql_server_standard'), this.renderExpandableItem('office_standard'), this.renderExpandableItem('office_professional_plus'), this.renderExpandableItem('cis_suite_standard_core'), this.renderExpandableItem('project_standard'), this.renderExpandableItem('sharepoint_server'), h("div", { class: "expandable-list__toggle-row" }, this.isListExpanded && (h(Fragment, null, h("button", { class: "expandable-list__toggle", onClick: this.onExpandableListToggle, tabIndex: 0 }, t('components-cloud-configurator-ms-license-collapse'), " ", h("tet-icon", { name: "chevron-up" })), h("div", { innerHTML: t('components-cloud-configurator-ms-license-full-list') }))), !this.isListExpanded && (h("button", { class: "expandable-list__toggle", onClick: this.onExpandableListToggle, tabIndex: 0 }, t('components-cloud-configurator-ms-license-expand'), " ", h("tet-icon", { name: "chevron-down" })))))), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-bandwidth')), this.renderNumberInput('bandwidth_ip'), this.renderNumberInput('bandwidth_router'), this.renderNumberInput('bandwidth_capacity', {
+        return (h(Host, null, h("div", { class: { 'cloud-configurator': true, [this.theme]: !!this.theme } }, h("div", { class: { 'header': true, [this.theme]: !!this.theme }, part: "header", ref: (el) => (this.headerRef = el) }, h("div", { class: "inner-wrapper" }, h("tet-tab-header", { class: "header__segment-switch", segmented: true, position: "center", defaultTab: "small", theme: this.theme, onTabSelected: this.onTabSelected }, h("button", { "data-name": CloudTabName.SMALL }, h("p", null, t('components-cloud-configurator-type-small'))), h("button", { "data-name": CloudTabName.AVERAGE }, h("p", null, t('components-cloud-configurator-type-average'))), h("button", { "data-name": CloudTabName.LARGE }, h("p", null, t('components-cloud-configurator-type-large'))), h("button", { "data-name": CloudTabName.INDIVIDUAL }, h("p", null, t('components-cloud-configurator-type-custom')))))), h("div", { class: "content", part: "content" }, this.renderTitle(), h("div", { class: "form", part: "form" }, h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-vcpu')), this.renderNumberInput('v_cpu_standard'), this.renderNumberInput('v_cpu_performance')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-vram')), this.renderNumberInput('v_ram'), h("div", { class: "form__input" })), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-storage')), this.renderNumberInput('storage_bronze'), this.renderNumberInput('storage_silver'), this.renderNumberInput('storage_gold'), this.renderNumberInput('storage_platinum')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-extra-storage')), this.renderNumberInput('storage_backup'), this.renderNumberInput('storage_object')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-license')), this.renderNumberInput('license_windows'), this.renderNumberInput('license_veeam')), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-ms-license')), h("div", { class: { 'expandable-list': true, 'expanded': this.isListExpanded } }, this.renderExpandableItem('sql_server_standard_core'), this.renderExpandableItem('win_rds'), this.renderExpandableItem('win_server_standard_core'), this.renderExpandableItem('win_server_dc_core'), this.renderExpandableItem('sql_server_standard'), this.renderExpandableItem('office_standard'), this.renderExpandableItem('office_professional_plus'), this.renderExpandableItem('cis_suite_standard_core'), this.renderExpandableItem('project_standard'), this.renderExpandableItem('sharepoint_server'), h("div", { class: "expandable-list__toggle-row" }, this.isListExpanded && (h(Fragment, null, h("button", { class: "expandable-list__toggle", onClick: this.onExpandableListToggle, tabIndex: 0 }, t('components-cloud-configurator-ms-license-collapse'), " ", h("tet-icon", { name: "chevron-up", theme: this.theme })), h("div", { innerHTML: t('components-cloud-configurator-ms-license-full-list') }))), !this.isListExpanded && (h("button", { class: "expandable-list__toggle", onClick: this.onExpandableListToggle, tabIndex: 0 }, t('components-cloud-configurator-ms-license-expand'), " ", h("tet-icon", { name: "chevron-down", theme: this.theme })))))), h("div", { class: "form__group" }, h("h3", { class: "form__group-label" }, t('components-cloud-configurator-group-bandwidth')), this.renderNumberInput('bandwidth_ip'), this.renderNumberInput('bandwidth_router'), this.renderNumberInput('bandwidth_capacity', {
             disabled: true,
             hidden: Boolean((_a = this.formValues['ddos_protection_enabled']) === null || _a === void 0 ? void 0 : _a.value)
         }), this.renderNumberInput('ddos_protection_bandwidth', {
             hidden: !Boolean((_b = this.formValues['ddos_protection_enabled']) === null || _b === void 0 ? void 0 : _b.value)
-        }), h("div", { class: "form__input" }), h("div", { class: "form__checkbox" }, h("tet-checkbox", { label: this.getLabel('ddos_protection_enabled'), value: (_c = this.formValues['ddos_protection_enabled']) === null || _c === void 0 ? void 0 : _c.value, checked: !!((_d = this.formValues['ddos_protection_enabled']) === null || _d === void 0 ? void 0 : _d.value), onCheck: this.onDdosProtectionEnabledCheck }), h("p", { class: "form__checkbox-helper" }, this.getHelperText('ddos_protection_enabled'))))), h("div", { class: "summary", part: "summary" }, h("h2", { class: "summary__title" }, t('components-cloud-configurator-group-summary')), h("div", { class: "summary__toggle", role: "radiogroup" }, h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.MONTHLY, checked: this.selectedPeriod === CloudSummaryPeriod.MONTHLY, label: t('components-cloud-configurator-summary-period-monthly'), theme: "classic", onCheck: this.onSummaryPeriodChange }), h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.HOURLY, checked: this.selectedPeriod === CloudSummaryPeriod.HOURLY, label: t('components-cloud-configurator-summary-period-hourly'), theme: "classic", onCheck: this.onSummaryPeriodChange })), this.renderSummaryTable())), h("div", { class: { 'floating-summary': true, 'floating-summary--is-pinned': this.isFloatingSummary }, part: "floating-summary" }, this.renderFloatingSummary()), h("div", { part: "footer", class: "footer", ref: (el) => (this.footerRef = el) }, h("tet-button", { class: "footer__button", size: "large", type: "primary", theme: "light", onClick: this.onFormSubmit }, t('components-cloud-configurator-submit'))))));
+        }), h("div", { class: "form__input" }), h("div", { class: "form__checkbox" }, h("tet-checkbox", { label: this.getLabel('ddos_protection_enabled'), value: (_c = this.formValues['ddos_protection_enabled']) === null || _c === void 0 ? void 0 : _c.value, checked: !!((_d = this.formValues['ddos_protection_enabled']) === null || _d === void 0 ? void 0 : _d.value), onCheck: this.onDdosProtectionEnabledCheck, theme: this.theme }), h("p", { class: "form__checkbox-helper" }, this.getHelperText('ddos_protection_enabled'))))), h("div", { class: "summary", part: "summary" }, h("h2", { class: "summary__title" }, t('components-cloud-configurator-group-summary')), h("div", { class: "summary__toggle", role: "radiogroup" }, h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.MONTHLY, checked: this.selectedPeriod === CloudSummaryPeriod.MONTHLY, label: t('components-cloud-configurator-summary-period-monthly'), theme: this.theme, onCheck: this.onSummaryPeriodChange }), h("tet-radio", { name: "summary-period", value: CloudSummaryPeriod.HOURLY, checked: this.selectedPeriod === CloudSummaryPeriod.HOURLY, label: t('components-cloud-configurator-summary-period-hourly'), theme: this.theme, onCheck: this.onSummaryPeriodChange })), this.renderSummaryTable())), h("div", { class: { 'floating-summary': true, 'floating-summary--is-pinned': this.isFloatingSummary }, part: "floating-summary" }, this.renderFloatingSummary()), h("div", { part: "footer", class: "footer", ref: (el) => (this.footerRef = el) }, h("tet-button", { class: "footer__button", size: "large", type: "primary", theme: this.theme, onClick: this.onFormSubmit }, t('components-cloud-configurator-submit'))))));
     }
     static get is() { return "tet-cloud-configurator"; }
     static get encapsulation() { return "shadow"; }
@@ -461,6 +462,24 @@ export class TetCloudConfigurator {
                 "reflect": false,
                 "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 input."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
             "selectOnFocus": {
                 "type": "boolean",
                 "mutable": false,