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

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

@@ -4,50 +4,6 @@ import { h, Host } from "@stencil/core";
  */
 export class TetThankYouView {
     constructor() {
-        /** The CTA button callback that emits the click event. */
-        this.ctaButtonCallback = () => this.ctaButtonClick.emit();
-        /**
-         * Renders the header toolbar slot if an HTML element is passed with the "header-toolbar" slot.
-         */
-        this.renderHeaderToolbar = () => {
-            return this.headerToolbarSlot && (h("div", { class: "thank-you-view-header" }, h("slot", { name: "header-toolbar" })));
-        };
-        /**
-         * Renders the icon block if the mainBlockIcon does not equal "none".
-         */
-        this.renderIconBlock = () => {
-            const mainBlockIconVisible = this.mainBlockIcon && this.mainBlockIcon !== 'none';
-            return mainBlockIconVisible && (h("div", { class: "thank-you-view-main-block-icon" }, h("em", { class: { 'icon': true, [`tet-${this.mainBlockIcon}`]: true } })));
-        };
-        /**
-         * Renders the info block containing the title and the description.
-         */
-        this.renderInfoBlock = () => {
-            return (h("div", { class: "thank-you-view-main-block-info" }, h("h1", { class: "thank-you-view-main-block-info-title" }, this.mainBlockTitle), h("div", { class: "thank-you-view-main-block-info-description", innerHTML: this.mainBlockDescription })));
-        };
-        /**
-         * Renders the stepper block if the stepperData has been provided with at least 1 entry.
-         */
-        this.renderStepperBlock = () => {
-            return this.stepperData && this.stepperData.length > 0 && (h("div", { class: "thank-you-view-main-block-stepper" }, h("tet-stepper", { class: "tet-stepper-override", stepperData: this.stepperData })));
-        };
-        /**
-         * Renders the CTA button block if the value for the ctaButtonLabel has been provided.
-         */
-        this.renderCTABlock = () => {
-            const descriptionBlock = this.ctaButtonDescription && (h("div", { class: "thank-you-view-main-block-cta-description", innerHTML: this.ctaButtonDescription }));
-            const ctaClasses = {
-                'thank-you-view-main-block-cta': true,
-                'no-stepper': this.stepperData === null || (this.stepperData && this.stepperData.length === 0)
-            };
-            return this.ctaButtonLabel && (h("div", { class: ctaClasses }, h("tet-button", { clickCallback: this.ctaButtonCallback, type: this.ctaButtonType, size: this.ctaButtonSize, theme: this.theme === 'dark' ? 'dark' : 'classic' }, this.ctaButtonLabel), descriptionBlock));
-        };
-        /**
-         * Renders the FAQ slot if an HTML element is passed with the "faq" slot.
-         */
-        this.renderFAQSlot = () => {
-            return this.faqSlot && (h("div", { class: "thank-you-view-faq-slot" }, h("slot", { name: "faq" })));
-        };
         this.stepperData = [];
         this.theme = 'light';
         this.mainBlockIcon = 'done';
@@ -58,10 +14,62 @@ export class TetThankYouView {
         this.ctaButtonDescription = undefined;
         this.ctaButtonType = 'primary';
     }
+    /** Host element */
+    hostElement;
+    /** The click event emitter of the CTA button. */
+    ctaButtonClick;
+    /** The property to determine the visibility of the header toolbar slot. */
+    headerToolbarSlot;
+    /** The property to determine the visibility of the FAQ slot. */
+    faqSlot;
     async componentWillLoad() {
         this.headerToolbarSlot = this.hostElement.querySelector('[slot="header-toolbar"]') !== null;
         this.faqSlot = this.hostElement.querySelector('[slot="faq"]') !== null;
     }
+    /** The CTA button callback that emits the click event. */
+    ctaButtonCallback = () => this.ctaButtonClick.emit();
+    /**
+     * Renders the header toolbar slot if an HTML element is passed with the "header-toolbar" slot.
+     */
+    renderHeaderToolbar = () => {
+        return this.headerToolbarSlot && (h("div", { class: "thank-you-view-header" }, h("slot", { name: "header-toolbar" })));
+    };
+    /**
+     * Renders the icon block if the mainBlockIcon does not equal "none".
+     */
+    renderIconBlock = () => {
+        const mainBlockIconVisible = this.mainBlockIcon && this.mainBlockIcon !== 'none';
+        return mainBlockIconVisible && (h("div", { class: "thank-you-view-main-block-icon" }, h("em", { class: { 'icon': true, [`tet-${this.mainBlockIcon}`]: true } })));
+    };
+    /**
+     * Renders the info block containing the title and the description.
+     */
+    renderInfoBlock = () => {
+        return (h("div", { class: "thank-you-view-main-block-info" }, h("h1", { class: "thank-you-view-main-block-info-title" }, this.mainBlockTitle), h("div", { class: "thank-you-view-main-block-info-description", innerHTML: this.mainBlockDescription })));
+    };
+    /**
+     * Renders the stepper block if the stepperData has been provided with at least 1 entry.
+     */
+    renderStepperBlock = () => {
+        return this.stepperData && this.stepperData.length > 0 && (h("div", { class: "thank-you-view-main-block-stepper" }, h("tet-stepper", { class: "tet-stepper-override", stepperData: this.stepperData })));
+    };
+    /**
+     * Renders the CTA button block if the value for the ctaButtonLabel has been provided.
+     */
+    renderCTABlock = () => {
+        const descriptionBlock = this.ctaButtonDescription && (h("div", { class: "thank-you-view-main-block-cta-description", innerHTML: this.ctaButtonDescription }));
+        const ctaClasses = {
+            'thank-you-view-main-block-cta': true,
+            'no-stepper': this.stepperData === null || (this.stepperData && this.stepperData.length === 0)
+        };
+        return this.ctaButtonLabel && (h("div", { class: ctaClasses }, h("tet-button", { clickCallback: this.ctaButtonCallback, type: this.ctaButtonType, size: this.ctaButtonSize, theme: this.theme === 'dark' ? 'dark' : 'classic' }, this.ctaButtonLabel), descriptionBlock));
+    };
+    /**
+     * Renders the FAQ slot if an HTML element is passed with the "faq" slot.
+     */
+    renderFAQSlot = () => {
+        return this.faqSlot && (h("div", { class: "thank-you-view-faq-slot" }, h("slot", { name: "faq" })));
+    };
     render() {
         const mainClasses = {
             'thank-you-view': true,

package/dist/collection/components/views/tet-thank-you-view-v2/tet-thank-you-view-v2.js

@@ -5,33 +5,6 @@ import { processTranslations, t } from "../../../services/translations/index";
  */
 export class TetThankYouViewV2 {
     constructor() {
-        /** The CTA button callback that emits the click event. */
-        this.ctaButtonCallback = () => this.ctaButtonClick.emit();
-        /**
-         * Renders the icon if the icon prop does not equal "none".
-         */
-        this.renderIcon = () => {
-            return this.icon && this.icon !== 'none' && h("tet-icon", { class: "thank-you-view-v2-icon", name: this.icon, "aria-hidden": "true" });
-        };
-        /**
-         * Renders the info description block.
-         */
-        this.renderInfoBlock = () => {
-            const descriptionBlock = this.mainBlockDescription && (h("div", { class: "thank-you-view-v2-info-block-description", innerHTML: this.mainBlockDescription && t(this.mainBlockDescription) }));
-            return (h("div", { class: "thank-you-view-v2-info-block" }, this.renderIcon(), h("div", { class: "thank-you-view-v2-info-block-text" }, this.mainBlockTitle && h("h1", { class: "thank-you-view-v2-info-block-title" }, t(this.mainBlockTitle)), descriptionBlock)));
-        };
-        /**
-         * Renders the CTA button if the value for the "ctaButtonLabel" has been provided.
-         */
-        this.renderCTAButton = () => {
-            return (this.ctaButtonLabel && (h("nav", { class: "thank-you-view-v2-cta-button", "aria-label": "CTA" }, h("tet-button", { clickCallback: this.ctaButtonCallback, type: this.ctaButtonType, theme: this.ctaButtonTheme ? this.ctaButtonTheme : this.theme, "element-id": this.ctaButtonId, size: this.ctaButtonSize, accessibilityLabel: t(this.ctaButtonLabel) }, this.ctaButtonLabel && t(this.ctaButtonLabel)))));
-        };
-        /**
-         * Renders the FAQ slot if an HTML element is passed with the "faq" slot.
-         */
-        this.renderFAQSlot = () => {
-            return this.faqSlot && (h("section", { class: "thank-you-view-v2-faq-slot", "aria-label": "FAQ" }, h("slot", { name: "faq" })));
-        };
         this.stepperData = [];
         this.icon = 'check';
         this.mainBlockTitle = undefined;
@@ -45,6 +18,10 @@ export class TetThankYouViewV2 {
         this.translationGroup = '';
         this.theme = 'light';
     }
+    /** Host element */
+    hostElement;
+    /** The click event emitter of the CTA button. */
+    ctaButtonClick;
     /**
      * Watches the `language` prop for changes.
      *
@@ -53,6 +30,8 @@ export class TetThankYouViewV2 {
     async onLanguageChange(value) {
         await processTranslations(this.translationGroup, value).then(() => forceUpdate(this));
     }
+    /** The property to determine the visibility of the FAQ slot. */
+    faqSlot;
     async componentWillLoad() {
         this.faqSlot = this.hostElement.querySelector('[slot="faq"]') !== null;
     }
@@ -60,13 +39,39 @@ export class TetThankYouViewV2 {
     componentDidLoad() {
         processTranslations(this.translationGroup, this.language).then(() => forceUpdate(this));
     }
+    /** The CTA button callback that emits the click event. */
+    ctaButtonCallback = () => this.ctaButtonClick.emit();
+    /**
+     * Renders the icon if the icon prop does not equal "none".
+     */
+    renderIcon = () => {
+        return this.icon && this.icon !== 'none' && h("tet-icon", { class: "thank-you-view-v2-icon", name: this.icon, "aria-hidden": "true" });
+    };
+    /**
+     * Renders the info description block.
+     */
+    renderInfoBlock = () => {
+        const descriptionBlock = this.mainBlockDescription && (h("div", { class: "thank-you-view-v2-info-block-description", innerHTML: this.mainBlockDescription && t(this.mainBlockDescription) }));
+        return (h("div", { class: "thank-you-view-v2-info-block" }, this.renderIcon(), h("div", { class: "thank-you-view-v2-info-block-text" }, this.mainBlockTitle && h("h1", { class: "thank-you-view-v2-info-block-title" }, t(this.mainBlockTitle)), descriptionBlock)));
+    };
     /**
      * Renders the stepper block if the "stepperData" has been provided with at least 1 entry.
      */
     renderStepper() {
-        var _a;
-        return (((_a = this.stepperData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "thank-you-view-v2-stepper" }, h("tet-stepper-v2", { stepperData: this.stepperData, theme: this.theme }))));
+        return (this.stepperData?.length > 0 && (h("div", { class: "thank-you-view-v2-stepper" }, h("tet-stepper-v2", { stepperData: this.stepperData, theme: this.theme }))));
     }
+    /**
+     * Renders the CTA button if the value for the "ctaButtonLabel" has been provided.
+     */
+    renderCTAButton = () => {
+        return (this.ctaButtonLabel && (h("nav", { class: "thank-you-view-v2-cta-button", "aria-label": "CTA" }, h("tet-button", { clickCallback: this.ctaButtonCallback, type: this.ctaButtonType, theme: this.ctaButtonTheme ? this.ctaButtonTheme : this.theme, "element-id": this.ctaButtonId, size: this.ctaButtonSize, accessibilityLabel: t(this.ctaButtonLabel) }, this.ctaButtonLabel && t(this.ctaButtonLabel)))));
+    };
+    /**
+     * Renders the FAQ slot if an HTML element is passed with the "faq" slot.
+     */
+    renderFAQSlot = () => {
+        return this.faqSlot && (h("section", { class: "thank-you-view-v2-faq-slot", "aria-label": "FAQ" }, h("slot", { name: "faq" })));
+    };
     render() {
         return (h(Host, { key: '6f6ca372d2f77fe3acc92e8bc695fd40a747286c' }, h("div", { key: '3daa98aabc1bae5a4eaea3faed1a6cc56c9c5124', class: {
                 'thank-you-view-v2': true,

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

@@ -5,33 +5,6 @@ import { processTranslations, t } from "../../../services/translations/index";
  */
 export class TetThankYouViewV3 {
     constructor() {
-        /** The CTA button callback that emits the click event. */
-        this.ctaButtonCallback = () => this.ctaButtonClick.emit();
-        /**
-         * Renders the icon if the icon prop does not equal "none".
-         */
-        this.renderIcon = () => {
-            return this.icon && this.icon !== 'none' && h("tet-icon", { class: "thank-you-view-v3-icon", name: this.icon, "aria-hidden": "true" });
-        };
-        /**
-         * Renders the info description block.
-         */
-        this.renderInfoBlock = () => {
-            const descriptionBlock = this.mainBlockDescription && (h("div", { class: "thank-you-view-v3-info-block-description", innerHTML: this.mainBlockDescription && t(this.mainBlockDescription) }));
-            return (h("div", { class: "thank-you-view-v3-info-block" }, this.renderIcon(), h("div", { class: "thank-you-view-v3-info-block-text" }, this.mainBlockTitle && h("h1", { class: "thank-you-view-v3-info-block-title" }, t(this.mainBlockTitle)), descriptionBlock)));
-        };
-        /**
-         * Renders the CTA button if the value for the "ctaButtonLabel" has been provided.
-         */
-        this.renderCTAButton = () => {
-            return (this.ctaButtonLabel && (h("nav", { class: "thank-you-view-v3-cta-button", "aria-label": "CTA" }, h("tet-button", { clickCallback: this.ctaButtonCallback, type: this.ctaButtonType, theme: this.ctaButtonTheme ? this.ctaButtonTheme : this.theme, "element-id": this.ctaButtonId, size: this.ctaButtonSize, accessibilityLabel: t(this.ctaButtonLabel) }, this.ctaButtonLabel && t(this.ctaButtonLabel)))));
-        };
-        /**
-         * Renders the FAQ slot if an HTML element is passed with the "faq" slot.
-         */
-        this.renderFAQSlot = () => {
-            return this.faqSlot && (h("section", { class: "thank-you-view-v3-faq-slot", "aria-label": "FAQ" }, h("slot", { name: "faq" })));
-        };
         this.stepperData = [];
         this.icon = 'check';
         this.mainBlockTitle = undefined;
@@ -45,6 +18,10 @@ export class TetThankYouViewV3 {
         this.translationGroup = '';
         this.theme = 'light';
     }
+    /** Host element */
+    hostElement;
+    /** The click event emitter of the CTA button. */
+    ctaButtonClick;
     /**
      * Watches the `language` prop for changes.
      *
@@ -53,6 +30,8 @@ export class TetThankYouViewV3 {
     async onLanguageChange(value) {
         await processTranslations(this.translationGroup, value).then(() => forceUpdate(this));
     }
+    /** The property to determine the visibility of the FAQ slot. */
+    faqSlot;
     async componentWillLoad() {
         this.faqSlot = this.hostElement.querySelector('[slot="faq"]') !== null;
     }
@@ -60,13 +39,39 @@ export class TetThankYouViewV3 {
     componentDidLoad() {
         processTranslations(this.translationGroup, this.language).then(() => forceUpdate(this));
     }
+    /** The CTA button callback that emits the click event. */
+    ctaButtonCallback = () => this.ctaButtonClick.emit();
+    /**
+     * Renders the icon if the icon prop does not equal "none".
+     */
+    renderIcon = () => {
+        return this.icon && this.icon !== 'none' && h("tet-icon", { class: "thank-you-view-v3-icon", name: this.icon, "aria-hidden": "true" });
+    };
+    /**
+     * Renders the info description block.
+     */
+    renderInfoBlock = () => {
+        const descriptionBlock = this.mainBlockDescription && (h("div", { class: "thank-you-view-v3-info-block-description", innerHTML: this.mainBlockDescription && t(this.mainBlockDescription) }));
+        return (h("div", { class: "thank-you-view-v3-info-block" }, this.renderIcon(), h("div", { class: "thank-you-view-v3-info-block-text" }, this.mainBlockTitle && h("h1", { class: "thank-you-view-v3-info-block-title" }, t(this.mainBlockTitle)), descriptionBlock)));
+    };
     /**
      * Renders the stepper block if the "stepperData" has been provided with at least 1 entry.
      */
     renderStepper() {
-        var _a;
-        return (((_a = this.stepperData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "thank-you-view-v3-stepper" }, h("tet-stepper-v3", { stepperData: this.stepperData, theme: this.theme }))));
+        return (this.stepperData?.length > 0 && (h("div", { class: "thank-you-view-v3-stepper" }, h("tet-stepper-v3", { stepperData: this.stepperData, theme: this.theme }))));
     }
+    /**
+     * Renders the CTA button if the value for the "ctaButtonLabel" has been provided.
+     */
+    renderCTAButton = () => {
+        return (this.ctaButtonLabel && (h("nav", { class: "thank-you-view-v3-cta-button", "aria-label": "CTA" }, h("tet-button", { clickCallback: this.ctaButtonCallback, type: this.ctaButtonType, theme: this.ctaButtonTheme ? this.ctaButtonTheme : this.theme, "element-id": this.ctaButtonId, size: this.ctaButtonSize, accessibilityLabel: t(this.ctaButtonLabel) }, this.ctaButtonLabel && t(this.ctaButtonLabel)))));
+    };
+    /**
+     * Renders the FAQ slot if an HTML element is passed with the "faq" slot.
+     */
+    renderFAQSlot = () => {
+        return this.faqSlot && (h("section", { class: "thank-you-view-v3-faq-slot", "aria-label": "FAQ" }, h("slot", { name: "faq" })));
+    };
     render() {
         return (h(Host, { key: '8ddc0d0fd3dfd7a0c66715cc17dcc0ef066bcf28' }, h("div", { key: 'a1d4a6b253f90c435e5555bd944fbe63a544d8cf', class: {
                 'thank-you-view-v3': true,

package/dist/collection/config/bradcasting.js

@@ -1,4 +1,3 @@
-var _a;
 import { Env } from "@stencil/core";
 import broadcastingJson from "./broadcasting.json";
-export const broadcasting = (_a = broadcastingJson[Env.environment]) !== null && _a !== void 0 ? _a : {};
+export const broadcasting = broadcastingJson[Env.environment] ?? {};

package/dist/collection/config/endpoints.js

@@ -1,10 +1,12 @@
-var _a;
 import { Env } from "@stencil/core";
 import endpointsJson from "./endpoints.json";
 const allEndpoints = endpointsJson.endpoints;
-const envConfig = (_a = endpointsJson[Env.environment]) !== null && _a !== void 0 ? _a : {};
+const envConfig = endpointsJson[Env.environment] ?? {};
 // Combines the value of the base URL with the path of each endpoint.
-const fullEndpointUrls = Object.keys(allEndpoints !== null && allEndpoints !== void 0 ? allEndpoints : []).reduce((accumulator, endpointKey) => {
-    return Object.assign(Object.assign({}, accumulator), { [endpointKey]: `${envConfig.baseUrl}${allEndpoints[endpointKey]}` });
+const fullEndpointUrls = Object.keys(allEndpoints ?? []).reduce((accumulator, endpointKey) => {
+    return {
+        ...accumulator,
+        [endpointKey]: `${envConfig.baseUrl}${allEndpoints[endpointKey]}`
+    };
 }, {});
-export const endpoints = fullEndpointUrls !== null && fullEndpointUrls !== void 0 ? fullEndpointUrls : {};
+export const endpoints = fullEndpointUrls ?? {};

package/dist/collection/config/forms-portal.js

@@ -1,4 +1,3 @@
-var _a;
 import { Env } from "@stencil/core";
 import formsPortalJson from "./forms-portal.json";
-export const formsPortal = (_a = formsPortalJson[Env.environment]) !== null && _a !== void 0 ? _a : {};
+export const formsPortal = formsPortalJson[Env.environment] ?? {};

package/dist/collection/config/landing-pages.js

@@ -1,4 +1,3 @@
-var _a;
 import { Env } from "@stencil/core";
 import landingPagesJson from "./landing-pages.json";
-export const landingPages = (_a = landingPagesJson[Env.environment]) !== null && _a !== void 0 ? _a : {};
+export const landingPages = landingPagesJson[Env.environment] ?? {};

package/dist/collection/config/mytet-portal.js

@@ -1,4 +1,3 @@
-var _a;
 import { Env } from "@stencil/core";
 import mytetPortalJson from "./mytet-portal.json";
-export const mytetPortal = (_a = mytetPortalJson[Env.environment]) !== null && _a !== void 0 ? _a : {};
+export const mytetPortal = mytetPortalJson[Env.environment] ?? {};

package/dist/collection/docs/styling/colors/tet-colors.js

@@ -1,50 +1,50 @@
 import { h, Host } from "@stencil/core";
 export class TetColors {
     constructor() {
-        this.colorSections = {
-            blue: {
-                title: 'Blue',
-                colors: ['blue80', 'blue70', 'blue60', 'blue50', 'blue40', 'blue30', 'blue20', 'blue10', 'blue00']
-            },
-            green: {
-                title: 'Green',
-                colors: ['green80', 'green70', 'green60', 'green50', 'green40', 'green30', 'green20', 'green10', 'green00']
-            },
-            yellow: {
-                title: 'Yellow',
-                colors: ['yellow80', 'yellow70', 'yellow60', 'yellow50', 'yellow40', 'yellow30', 'yellow20', 'yellow10', 'yellow00'],
-            },
-            red: {
-                title: 'Red',
-                colors: ['red80', 'red70', 'red60', 'red50', 'red40', 'red30', 'red20', 'red10', 'red00'],
-            },
-            violet: {
-                title: 'Violet',
-                colors: ['violet80', 'violet70', 'violet60', 'violet50', 'violet40', 'violet30', 'violet20', 'violet10', 'violet00'],
-            },
-            grey: {
-                title: 'Grey',
-                colors: ['grey110', 'grey100', 'grey90', 'grey80', 'grey70', 'grey60', 'grey50', 'grey40', 'grey30', 'grey20', 'grey10', 'grey00'],
-            },
-            foundation: {
-                title: 'Foundation',
-                colors: ['blue', 'violet', 'green', 'yellow', 'red', 'black', 'white'],
-            },
-        };
-        // Render a single color item
-        this.renderColorItem = (colorName) => {
-            const colorCode = `tet-color__${colorName}`;
-            const colorBackgroundClass = `${colorCode}--background`;
-            const label = colorName.replace(/([a-z])(\d+)/, '$1 $2');
-            return (h("div", { class: "section-color" }, h("div", { class: `color ${colorBackgroundClass}` }), h("div", { class: "color-name" }, colorCode), label));
-        };
-        // Render a color section
-        this.renderColorSection = (sectionKey, section) => {
-            return (h("div", { class: `section section-${sectionKey}` }, h("div", { class: "section__title" }, section.title), section.colors.map((color) => this.renderColorItem(color))));
-        };
         this.showVariables = false;
         this.darkTheme = false;
     }
+    colorSections = {
+        blue: {
+            title: 'Blue',
+            colors: ['blue80', 'blue70', 'blue60', 'blue50', 'blue40', 'blue30', 'blue20', 'blue10', 'blue00']
+        },
+        green: {
+            title: 'Green',
+            colors: ['green80', 'green70', 'green60', 'green50', 'green40', 'green30', 'green20', 'green10', 'green00']
+        },
+        yellow: {
+            title: 'Yellow',
+            colors: ['yellow80', 'yellow70', 'yellow60', 'yellow50', 'yellow40', 'yellow30', 'yellow20', 'yellow10', 'yellow00'],
+        },
+        red: {
+            title: 'Red',
+            colors: ['red80', 'red70', 'red60', 'red50', 'red40', 'red30', 'red20', 'red10', 'red00'],
+        },
+        violet: {
+            title: 'Violet',
+            colors: ['violet80', 'violet70', 'violet60', 'violet50', 'violet40', 'violet30', 'violet20', 'violet10', 'violet00'],
+        },
+        grey: {
+            title: 'Grey',
+            colors: ['grey110', 'grey100', 'grey90', 'grey80', 'grey70', 'grey60', 'grey50', 'grey40', 'grey30', 'grey20', 'grey10', 'grey00'],
+        },
+        foundation: {
+            title: 'Foundation',
+            colors: ['blue', 'violet', 'green', 'yellow', 'red', 'black', 'white'],
+        },
+    };
+    // Render a single color item
+    renderColorItem = (colorName) => {
+        const colorCode = `tet-color__${colorName}`;
+        const colorBackgroundClass = `${colorCode}--background`;
+        const label = colorName.replace(/([a-z])(\d+)/, '$1 $2');
+        return (h("div", { class: "section-color" }, h("div", { class: `color ${colorBackgroundClass}` }), h("div", { class: "color-name" }, colorCode), label));
+    };
+    // Render a color section
+    renderColorSection = (sectionKey, section) => {
+        return (h("div", { class: `section section-${sectionKey}` }, h("div", { class: "section__title" }, section.title), section.colors.map((color) => this.renderColorItem(color))));
+    };
     render() {
         return (h(Host, { key: 'cac8414fefa6e300d17d4baa6cf52968d81c622a' }, h("div", { key: '9060ef225ce2964e5f60966853959c011dfd71b3', class: {
                 'dark': this.darkTheme

package/dist/collection/services/api/async-request.js

@@ -13,28 +13,30 @@ import { AsyncApiRequestError } from "./errors/async-api-request-error";
  * and the channel (WebSocket) connection will be closed.
  */
 class AsyncApiRequest {
-    constructor() {
-        /**
-         * The time in milliseconds after which the Websocket connection should be closed if the data is not received.
-         */
-        this.socketTimeoutInMilliseconds = 60000;
-        this.maxPollingAttempts = 45;
-        this.dataRetrievalMethod = 'polling';
-        this.defaultOptions = {
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-            }
-        };
-        /**
-         * The header name of the response operation ID.
-         */
-        this.operationIdHeader = 'X-Operation';
-        /**
-         * The event name of the operation data stream.
-         */
-        this.operationEventName = '.operation.status';
-    }
+    url;
+    options;
+    data;
+    errorFallbackValue;
+    /**
+     * The time in milliseconds after which the Websocket connection should be closed if the data is not received.
+     */
+    socketTimeoutInMilliseconds = 60000;
+    maxPollingAttempts = 45;
+    dataRetrievalMethod = 'polling';
+    defaultOptions = {
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        }
+    };
+    /**
+     * The header name of the response operation ID.
+     */
+    operationIdHeader = 'X-Operation';
+    /**
+     * The event name of the operation data stream.
+     */
+    operationEventName = '.operation.status';
     /**
      * Sets the URL.
      *
@@ -78,8 +80,7 @@ class AsyncApiRequest {
      * @param response
      */
     getOperationId(response) {
-        var _a;
-        return (_a = response.headers.get(this.operationIdHeader)) !== null && _a !== void 0 ? _a : '';
+        return response.headers.get(this.operationIdHeader) ?? '';
     }
     /**
      * Handles caught error.
@@ -159,7 +160,7 @@ class AsyncApiRequest {
         const apiRequest = new ApiRequest()
             .setUrl(this.url)
             .setData(this.data)
-            .setOptions(Object.assign(Object.assign({}, this.defaultOptions), this.options));
+            .setOptions({ ...this.defaultOptions, ...this.options });
         let response;
         try {
             response = await apiRequest.execute(true);

package/dist/collection/services/api/request.js

@@ -2,14 +2,16 @@
  * Generic class for creating & executing API requests.
  */
 class ApiRequest {
-    constructor() {
-        /**
-         * The default request options.
-         */
-        this.defaultOptions = {
-            mode: 'cors'
-        };
-    }
+    url;
+    options;
+    data;
+    errorFallbackValue;
+    /**
+     * The default request options.
+     */
+    defaultOptions = {
+        mode: 'cors'
+    };
     /**
      * Sets the URL.
      *
@@ -53,9 +55,12 @@ class ApiRequest {
      * @param fullResponse
      */
     execute(fullResponse = false) {
-        return fetch(this.url, Object.assign(Object.assign(Object.assign({}, this.defaultOptions), this.options), { body: JSON.stringify(this.data) })).then(async (response) => {
-            var _a;
-            return fullResponse ? response : (_a = (await response.json())) === null || _a === void 0 ? void 0 : _a.data;
+        return fetch(this.url, {
+            ...this.defaultOptions,
+            ...this.options,
+            body: JSON.stringify(this.data)
+        }).then(async (response) => {
+            return fullResponse ? response : (await response.json())?.data;
         }).catch((error) => {
             if (undefined !== this.errorFallbackValue) {
                 return this.errorFallbackValue;