@tet/tet-components 1.4.73-testing → 1.4.74-production

package/dist/collection/components/basic/buttons/tet-radio-blocks/tet-radio-blocks.css

@@ -0,0 +1,459 @@
+/* Tet design styles */
+:host {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+:host {
+  --color-gray-light: #cdd2de;
+  --color-ta070: #f5f6f8;
+  --color-ta080: #e6e8ee;
+  --color-ta100: #cdd2de;
+  --color-ta200: #9ba5be;
+  --color-ta300: #69789c;
+  --color-ta500: #1e356a;
+  --color-ta600: #051d59;
+  --color-tc090: #d6e6fd;
+  --color-tc100: #d1dffe;
+  --color-tc300: #75a1fb;
+  --color-tc500: #1a70f6;
+  --color-tc600: #0060f5;
+  --color-td500: #00F1F2;
+  --color-td600: #01cbe0;
+  --color-tf600: #f53b2a;
+  --color-tg300: #2b3036;
+  --color-tg400: #1d2128;
+  --color-tg500: #12171e;
+  --color-tg600: #01050c;
+  --color-th500: #f5f5f5;
+  --color-ti500: #869198;
+  --color-ti600: #aeb7bc;
+  --text-font: Gilroy, serif;
+  --text-color-darker: var(--color-ta600);
+  --text-color-dark: var(--color-ta500);
+  --text-color-dark-theme: var(--color-th500);
+  --icons-font: Tet Icons, serif;
+}
+
+.icon.tet-search {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-search::before {
+  content: "\e86e";
+}
+.icon.tet-close-circled {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-close-circled::before {
+  content: "\e85a";
+}
+.icon.tet-close {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-close::before {
+  content: "\e85b";
+}
+.icon.tet-check-circled {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-check-circled::before {
+  content: "\e86c";
+}
+.icon.tet-check {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-check::before {
+  content: "\e855";
+}
+.icon.tet-chevron-up {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-chevron-up::before {
+  content: "\e859";
+}
+.icon.tet-chevron-down {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-chevron-down::before {
+  content: "\e856";
+}
+.icon.tet-clipboard {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-clipboard::before {
+  content: "\e86a";
+}
+.icon.tet-info {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-info::before {
+  content: "\e81d";
+}
+.icon.tet-done {
+  font-family: var(--icons-font);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.25rem;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon.tet-done::before {
+  content: "\e867";
+}
+
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Medium.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Semibold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Semibold.woff") format("woff");
+}
+@font-face {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("assets/fonts/Gilroy-W05-Bold.woff2") format("woff2"), url("assets/fonts/Gilroy-W05-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Regular.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("assets/fonts/Inter-Medium.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+:host {
+  --font-family-fallback: Gilroy, Arial, sans-serif;
+  --font-family-headline: Gilroy;
+  --font-family-content: Inter, var(--font-family-fallback);
+  font-family: var(--font-family-content);
+}
+
+:host {
+  /**
+    * @prop --radio-block-text-color: Sets text color for block label and description.
+    * @prop --radio-block-border-color: Sets default border color of radio block.
+    * @prop --radio-block-background-color: Sets default background color of radio block.
+    * @prop --radio-block-hover-border-color: Sets border color of radio block on hover state.
+    * @prop --radio-block-hover-background-color: Sets background color of radio block on hover state.
+    * @prop --radio-block-pressed-border-color: Sets border color on pressed state of radio block.
+    * @prop --radio-block-pressed-background-color: Sets background color on pressed state of radio block.
+    * @prop --radio-block-checked-border-color: Sets border color of radio block when its checked.
+    * @prop --radio-block-checked-background-color: Sets background color of radio block when its checked.
+    * @prop --radio-block-focused-border-color: Sets outline color of radio block when focused with keyboard;
+   */
+  display: block;
+  position: relative;
+}
+
+.radio-block {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.75rem;
+  border-radius: 0.5rem;
+  border: 0.0625rem solid var(--radio-block-border-color);
+  background-color: var(--radio-block-background-color);
+  cursor: pointer;
+}
+.radio-block-dark-theme {
+  --radio-block-text-color: var(--tc-text-primary-dark);
+  --radio-block-border-color: var(--tc-border-quaternary-dark);
+  --radio-block-background-color: var(--tc-layer-permanent-black-dark);
+  --radio-block-hover-border-color: var(--tc-border-tertiary-dark);
+  --radio-block-hover-background-color: var(--tc-brown-80);
+  --radio-block-pressed-border-color: var(--tc-border-secondary-dark);
+  --radio-block-pressed-background-color: var(--tc-brown-60);
+  --radio-block-checked-border-color: var(--tc-brown-30);
+  --radio-block-checked-background-color: var(--tc-brown-50-dark);
+  --radio-block-focused-border-color: var(--tc-blue-40-dark);
+}
+.radio-block-light-theme {
+  --radio-block-text-color: var(--tc-text-primary);
+  --radio-block-border-color: var(--tc-border-quaternary);
+  --radio-block-background-color: var(--tc-layer-permanent-white);
+  --radio-block-hover-border-color: var(--tc-border-tertiary);
+  --radio-block-hover-background-color: var(--tc-yellow-10);
+  --radio-block-pressed-border-color: var(--tc-border-secondary);
+  --radio-block-pressed-background-color: var(--tc-yellow-20);
+  --radio-block-checked-border-color: var(--tc-yellow-60);
+  --radio-block-checked-background-color: var(--tc-yellow-40);
+  --radio-block-focused-border-color: var(--tc-blue-40);
+}
+.radio-block.small {
+  padding: 1.25rem 0.75rem;
+  flex-direction: row;
+  gap: 0.75rem;
+}
+.radio-block.large {
+  align-items: flex-start;
+  padding: 1.25rem;
+  flex-direction: column;
+  gap: 1rem;
+}
+.radio-block__container {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 1rem;
+}
+@media screen and (min-width: 31.25rem) {
+  .radio-block__container.row-of-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media screen and (min-width: 31.25rem) {
+  .radio-block__container.row-of-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.radio-block__icon {
+  --icon-size: 1.5rem;
+}
+.radio-block__label {
+  font: 500 1.25rem/1.5rem "Gilroy", "Gilroy, Arial, sans-serif";
+  color: var(--radio-block-text-color);
+}
+@media screen and (min-width: 31.25rem) {
+  .radio-block__label {
+    font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  }
+}
+.radio-block__description {
+  font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
+  color: var(--radio-block-text-color);
+  text-align: start;
+}
+.radio-block:hover {
+  border-color: var(--radio-block-hover-border-color);
+  background-color: var(--radio-block-hover-background-color);
+}
+.radio-block:active {
+  border-color: var(--radio-block-pressed-border-color);
+  background-color: var(--radio-block-pressed-background-color);
+}
+.radio-block.checked {
+  border-color: var(--radio-block-checked-border-color);
+  background-color: var(--radio-block-checked-background-color);
+}
+.radio-block:focus-visible {
+  border: 0.125rem solid var(--radio-block-focused-border-color);
+}

package/dist/collection/components/basic/buttons/tet-radio-blocks/tet-radio-blocks.js

@@ -0,0 +1,236 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A simple radio block component.
+ */
+export class TetRadioBlocks {
+    constructor() {
+        this.blocks = undefined;
+        this.blocksPerRow = 2;
+        this.blockType = 'small';
+        this.theme = 'light';
+        this.accessibilityLabel = '';
+        this.checked = undefined;
+    }
+    /** The event that is emitted whenever the control element is checked. */
+    check;
+    /**
+     * Changes the checked prop of the block.
+     *
+     * @param id
+     * @param value
+     */
+    async setChecked(id, value) {
+        this.blocks.forEach((block) => {
+            block.checked = block.id === id;
+            this.checked = id;
+        });
+        this.check.emit({ id, value });
+    }
+    componentWillLoad() {
+        this.blocks.forEach((block) => {
+            if (block.checked) {
+                this.checked = block.id;
+            }
+        });
+    }
+    /** Render icon of b;lock type is small. */
+    renderIcon(iconName) {
+        if (this.blockType === 'large' || !iconName) {
+            return null;
+        }
+        return h("tet-icon", { class: "radio-block__icon", name: iconName, theme: this.theme });
+    }
+    /** Render description if blockType set to large. */
+    renderDescription(description) {
+        if (this.blockType === 'small' || !description) {
+            return '';
+        }
+        return h("span", { class: "radio-block__description" }, description);
+    }
+    /** Function to render one Single block based on block info. */
+    renderSingleBlock(block) {
+        const { id, value, iconName, label, description } = block;
+        return (h("button", { class: { 'radio-block': true, [this.blockType]: true, 'checked': this.checked === id }, onClick: () => this.setChecked(id, value) }, this.renderIcon(iconName), h("span", { class: "radio-block__label" }, label), this.renderDescription(description)));
+    }
+    render() {
+        const { theme, blocks } = this;
+        return (h(Host, { key: '1f5dfb6b3362881e71cf89c87becae9a59558172' }, h("div", { key: 'b2c253f6b1e5b9380b1ad3cdcc268db7d7fdd935', class: {
+                'radio-block__container': true,
+                [`radio-block-${theme}-theme`]: true,
+                [`row-of-${this.blocksPerRow}`]: !!this.blocksPerRow
+            } }, blocks.map((block) => this.renderSingleBlock(block)))));
+    }
+    static get is() { return "tet-radio-blocks"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-radio-blocks.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-radio-blocks.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "blocks": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioBlockInterface[]",
+                    "resolved": "RadioBlockInterface[]",
+                    "references": {
+                        "RadioBlockInterface": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/basic/buttons/tet-radio-blocks/tet-radio-blocks.tsx",
+                            "id": "src/components/basic/buttons/tet-radio-blocks/tet-radio-blocks.tsx::RadioBlockInterface"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The array of items to render as radio blocks."
+                }
+            },
+            "blocksPerRow": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "2 | 3",
+                    "resolved": "2 | 3",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of blocks to render in one row."
+                },
+                "attribute": "blocks-per-row",
+                "reflect": false,
+                "defaultValue": "2"
+            },
+            "blockType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'large'",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of the block."
+                },
+                "attribute": "block-type",
+                "reflect": false,
+                "defaultValue": "'small'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the radio block."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "accessibilityLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the aria label."
+                },
+                "attribute": "accessibility-label",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "checked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "check",
+                "name": "check",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The event that is emitted whenever the control element is checked."
+                },
+                "complexType": {
+                    "original": "RadioBlockCheckEventInterface",
+                    "resolved": "RadioBlockCheckEventInterface",
+                    "references": {
+                        "RadioBlockCheckEventInterface": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/basic/buttons/tet-radio-blocks/tet-radio-blocks.tsx",
+                            "id": "src/components/basic/buttons/tet-radio-blocks/tet-radio-blocks.tsx::RadioBlockCheckEventInterface"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setChecked": {
+                "complexType": {
+                    "signature": "(id: string, value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Changes the checked prop of the block.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "id"
+                        }, {
+                            "name": "param",
+                            "text": "value"
+                        }]
+                }
+            }
+        };
+    }
+}

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

@@ -161,11 +161,11 @@ export class TetTabContent {
         this.selectedId = id;
     }
     render() {
-        return (h(Host, { key: 'a567d620d93075119d2ea82a9aae9776ccc40cf8' }, h("div", { key: 'f43642bac52e9c0445f8ad14b23f8abbf4e1bd09', class: {
+        return (h(Host, { key: '9238d9fdd8e736303f1d18bb78e2e25c67df24d5' }, h("div", { key: 'f6660092be87c90ed5eedfd9f306e81e7ea5098d', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility,
                 [this.theme]: true
-            } }, h("slot", { key: 'a38441ae67caf017c2e56fec1238bee39602cad1' }))));
+            } }, h("slot", { key: 'c81cd361992840cf7f510a2ae7bb6c8a6ea854e0' }))));
     }
     static get is() { return "tet-tab-content"; }
     static get encapsulation() { return "shadow"; }