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

package/dist/collection/components/simple/tables-and-graphs/tet-table/tet-table.js

@@ -6,140 +6,6 @@ import { TooltipPosition } from "../../text-blocks/tet-tooltip/enums/TooltipPosi
  */
 export class TetTable {
     constructor() {
-        /**
-         * Renders the desktop specific table header.
-         *
-         * @param label
-         * @param columnIndex
-         */
-        this.renderDesktopHeader = (data, options, columnIndex) => {
-            const className = this.getColumnCellInnerClassName(columnIndex);
-            const color = this.getColumnColor(columnIndex);
-            const style = {};
-            if (color) {
-                style['--table-header-background-color'] = color;
-            }
-            if (options && options.textAlign !== 'left') {
-                style['--table-cell-text-align'] = options.textAlign;
-            }
-            if (options && options.width) {
-                style['--table-cell-width'] = options.width;
-            }
-            return (h("th", { class: className, style: style, colSpan: (options === null || options === void 0 ? void 0 : options.columnSpan) || 1, scope: "col" }, (data.value || data.tooltip) && (h("div", { class: "cell-content-wrapper" }, data.value, data.tooltip && this.renderTooltip(data.tooltip)))));
-        };
-        /**
-         * Renders the mobile specific table header.
-         *
-         * @param row
-         */
-        this.renderMobileHeader = (row) => {
-            return (h("th", { scope: "col", colSpan: 2 }, h("div", { class: "mobile-table-header" }, h("p", { innerHTML: row.label }), (!!row.subLabel && !row.tooltip) && this.renderTooltip(row.subLabel), row.tooltip && this.renderTooltip(row.tooltip))));
-        };
-        /**
-         * Renders a single data row.
-         *
-         * @param row
-         */
-        this.renderRowData = (row, rowIndex) => {
-            const rowHeaderStyle = {};
-            if (this.tableHeaderTextAlign !== 'left') {
-                rowHeaderStyle['--table-cell-text-align'] = this.tableHeaderTextAlign;
-            }
-            if (this.tableHeaderWidth) {
-                rowHeaderStyle['--table-cell-width'] = this.tableHeaderWidth;
-            }
-            return (h("tr", null, h("th", { scope: "row", style: rowHeaderStyle, colSpan: this.tableHeaderColumnSpan || 1 }, h("p", { class: "title" }, h("span", { innerHTML: row.label }), row.tooltip && this.renderTooltip(row.tooltip)), (row.subLabel && !row.tooltip) && h("p", { class: "subtitle", innerHTML: row.subLabel })), row.cells.map((cell, index) => this.renderDesktopCellData(cell, index, rowIndex))));
-        };
-        /**
-         * Renders a tooltip element displaying informational text.
-         *
-         * @param value - The text content to display inside the tooltip.
-         * @returns JSX element containing an info icon and tooltip.
-         */
-        this.renderTooltip = (value) => {
-            return (h("span", { class: "tooltip-wrapper" }, h("tet-icon", { theme: this.theme, type: "secondary", class: "info-icon", name: "info-circle", tabindex: "0" }), h("tet-tooltip", { position: TooltipPosition.TOP, theme: this.theme }, value)));
-        };
-        /**
-         * Renders a single data cell for desktop size table.
-         *
-         * @param cell
-         * @param columnIndex
-         */
-        this.renderDesktopCellData = (cell, columnIndex, rowIndex) => {
-            const rowOptions = this.tableData.rowOptions && this.tableData.rowOptions[rowIndex];
-            if (rowOptions && rowOptions.mobileShow) {
-                return null;
-            }
-            if (cell.options && cell.options.mobileShow) {
-                return null;
-            }
-            const className = this.getColumnCellInnerClassName(columnIndex);
-            const color = this.getColumnColor(columnIndex);
-            const options = cell.options;
-            const style = {};
-            if (color) {
-                style['--table-cell-overlay-color'] = `${color}4D`;
-            }
-            if (options && options.textAlign !== 'left') {
-                style['--table-cell-text-align'] = options.textAlign;
-            }
-            return (h("td", { class: className, style: style, colSpan: (options === null || options === void 0 ? void 0 : options.columnSpan) || 1 }, h("div", { class: "cell-content-wrapper" }, h("span", { innerHTML: cell.value }), cell.tooltip && this.renderTooltip(cell.tooltip))));
-        };
-        /**
-         * Renders a single data cell for mobile size table.
-         *
-         * @param cell
-         * @param index
-         */
-        this.renderMobileCellData = (cell, index, rowIndex) => {
-            var _a, _b;
-            const cellOptions = cell.options;
-            const rowOptions = this.getRowOption(rowIndex);
-            const mobileColumn = this.getMobileColumn(rowIndex, index);
-            if (rowOptions && rowOptions.mobileHide) {
-                return null;
-            }
-            if (cellOptions && cellOptions.mobileHide) {
-                return null;
-            }
-            return (h("tr", null, h("th", null, h("div", { class: "cell-content-wrapper" }, mobileColumn || ((_a = this.normalizedColumns[index]) === null || _a === void 0 ? void 0 : _a.value), ((_b = this.normalizedColumns[index]) === null || _b === void 0 ? void 0 : _b.tooltip) && this.renderTooltip(this.normalizedColumns[index].tooltip))), h("td", null, h("div", { class: "cell-content-wrapper" }, h("span", { innerHTML: cell.value }), cell.tooltip && this.renderTooltip(cell.tooltip)))));
-        };
-        /**
-         * Renders the large screen size table.
-         */
-        this.renderLargeScreenTable = () => {
-            var _a, _b;
-            const getColumnHeaderOption = (columnIndex) => {
-                return this.tableData.columnHeaderOptions && this.tableData.columnHeaderOptions[columnIndex];
-            };
-            const headerColumnOption = {
-                columnSpan: this.tableHeaderColumnSpan,
-                textAlign: this.tableHeaderTextAlign,
-                width: this.tableHeaderWidth
-            };
-            return (h("table", { class: {
-                    table: true,
-                    'table--gapped-columns': this.gappedColumnLayout,
-                    [this.theme]: true,
-                } }, this.caption && h("caption", null, this.caption), h("thead", null, h("tr", null, this.renderDesktopHeader({ value: this.tableHeader, tooltip: '' }, headerColumnOption), (_a = this.normalizedColumns) === null || _a === void 0 ? void 0 :
-                _a.map((columnData, columnIndex) => this.renderDesktopHeader(columnData, getColumnHeaderOption(columnIndex), columnIndex)))), h("tbody", null, (_b = this.tableData.rows) === null || _b === void 0 ? void 0 : _b.map((row, rowIndex) => this.renderRowData(row, rowIndex)))));
-        };
-        /**
-         * Renders the small screen size table.
-         */
-        this.renderMobileScreenTable = () => {
-            var _a;
-            return (h("div", { class: "mobile-table-wrapper" }, (_a = this.tableData.rows) === null || _a === void 0 ? void 0 : _a.map((row, rowIndex) => {
-                var _a;
-                if ((_a = this.getRowOption(rowIndex)) === null || _a === void 0 ? void 0 : _a.mobileHide) {
-                    return null;
-                }
-                return (h("table", { class: {
-                        'mobile-table': true,
-                        [this.theme]: true,
-                    } }, h("thead", null, h("tr", null, this.renderMobileHeader(row))), h("tbody", null, row.cells.map((cell, columnIndex) => this.renderMobileCellData(cell, columnIndex, rowIndex)))));
-            })));
-        };
         this.caption = '';
         this.cellTextAlign = 'left';
         this.tableHeader = '';
@@ -153,6 +19,8 @@ export class TetTable {
         this.theme = 'light';
         this.normalizedColumns = [];
     }
+    /** The reference to the host element of the component. */
+    host;
     /** Update normalized columns when tableData changes */
     onTableDataChange() {
         this.normalizedColumns = this.transformColumns(this.tableData.columns);
@@ -220,10 +88,9 @@ export class TetTable {
             const defaultMobileColumns = JSON.parse(tableBody.getAttribute('data-mobile-columns'));
             const rows = tableBody.querySelectorAll('tr');
             rows.forEach((row) => {
-                var _a;
                 const rowOptions = this.getRowOptions(row, defaultMobileColumns);
                 const rowData = {
-                    label: ((_a = row.querySelector('th')) === null || _a === void 0 ? void 0 : _a.innerHTML) || '',
+                    label: row.querySelector('th')?.innerHTML || '',
                     cells: []
                 };
                 const columns = row.querySelectorAll('td');
@@ -237,6 +104,135 @@ export class TetTable {
         }
         this.tableData = tableData;
     }
+    /**
+     * Renders the desktop specific table header.
+     *
+     * @param label
+     * @param columnIndex
+     */
+    renderDesktopHeader = (data, options, columnIndex) => {
+        const className = this.getColumnCellInnerClassName(columnIndex);
+        const color = this.getColumnColor(columnIndex);
+        const style = {};
+        if (color) {
+            style['--table-header-background-color'] = color;
+        }
+        if (options && options.textAlign !== 'left') {
+            style['--table-cell-text-align'] = options.textAlign;
+        }
+        if (options && options.width) {
+            style['--table-cell-width'] = options.width;
+        }
+        return (h("th", { class: className, style: style, colSpan: options?.columnSpan || 1, scope: "col" }, (data.value || data.tooltip) && (h("div", { class: "cell-content-wrapper" }, data.value, data.tooltip && this.renderTooltip(data.tooltip)))));
+    };
+    /**
+     * Renders the mobile specific table header.
+     *
+     * @param row
+     */
+    renderMobileHeader = (row) => {
+        return (h("th", { scope: "col", colSpan: 2 }, h("div", { class: "mobile-table-header" }, h("p", { innerHTML: row.label }), (!!row.subLabel && !row.tooltip) && this.renderTooltip(row.subLabel), row.tooltip && this.renderTooltip(row.tooltip))));
+    };
+    /**
+     * Renders a single data row.
+     *
+     * @param row
+     */
+    renderRowData = (row, rowIndex) => {
+        const rowHeaderStyle = {};
+        if (this.tableHeaderTextAlign !== 'left') {
+            rowHeaderStyle['--table-cell-text-align'] = this.tableHeaderTextAlign;
+        }
+        if (this.tableHeaderWidth) {
+            rowHeaderStyle['--table-cell-width'] = this.tableHeaderWidth;
+        }
+        return (h("tr", null, h("th", { scope: "row", style: rowHeaderStyle, colSpan: this.tableHeaderColumnSpan || 1 }, h("p", { class: "title" }, h("span", { innerHTML: row.label }), row.tooltip && this.renderTooltip(row.tooltip)), (row.subLabel && !row.tooltip) && h("p", { class: "subtitle", innerHTML: row.subLabel })), row.cells.map((cell, index) => this.renderDesktopCellData(cell, index, rowIndex))));
+    };
+    /**
+     * Renders a tooltip element displaying informational text.
+     *
+     * @param value - The text content to display inside the tooltip.
+     * @returns JSX element containing an info icon and tooltip.
+     */
+    renderTooltip = (value) => {
+        return (h("span", { class: "tooltip-wrapper" }, h("tet-icon", { theme: this.theme, type: "secondary", class: "info-icon", name: "info-circle", tabindex: "0" }), h("tet-tooltip", { position: TooltipPosition.TOP, theme: this.theme }, value)));
+    };
+    /**
+     * Renders a single data cell for desktop size table.
+     *
+     * @param cell
+     * @param columnIndex
+     */
+    renderDesktopCellData = (cell, columnIndex, rowIndex) => {
+        const rowOptions = this.tableData.rowOptions && this.tableData.rowOptions[rowIndex];
+        if (rowOptions && rowOptions.mobileShow) {
+            return null;
+        }
+        if (cell.options && cell.options.mobileShow) {
+            return null;
+        }
+        const className = this.getColumnCellInnerClassName(columnIndex);
+        const color = this.getColumnColor(columnIndex);
+        const options = cell.options;
+        const style = {};
+        if (color) {
+            style['--table-cell-overlay-color'] = `${color}4D`;
+        }
+        if (options && options.textAlign !== 'left') {
+            style['--table-cell-text-align'] = options.textAlign;
+        }
+        return (h("td", { class: className, style: style, colSpan: options?.columnSpan || 1 }, h("div", { class: "cell-content-wrapper" }, h("span", { innerHTML: cell.value }), cell.tooltip && this.renderTooltip(cell.tooltip))));
+    };
+    /**
+     * Renders a single data cell for mobile size table.
+     *
+     * @param cell
+     * @param index
+     */
+    renderMobileCellData = (cell, index, rowIndex) => {
+        const cellOptions = cell.options;
+        const rowOptions = this.getRowOption(rowIndex);
+        const mobileColumn = this.getMobileColumn(rowIndex, index);
+        if (rowOptions && rowOptions.mobileHide) {
+            return null;
+        }
+        if (cellOptions && cellOptions.mobileHide) {
+            return null;
+        }
+        return (h("tr", null, h("th", null, h("div", { class: "cell-content-wrapper" }, mobileColumn || this.normalizedColumns[index]?.value, this.normalizedColumns[index]?.tooltip && this.renderTooltip(this.normalizedColumns[index].tooltip))), h("td", null, h("div", { class: "cell-content-wrapper" }, h("span", { innerHTML: cell.value }), cell.tooltip && this.renderTooltip(cell.tooltip)))));
+    };
+    /**
+     * Renders the large screen size table.
+     */
+    renderLargeScreenTable = () => {
+        const getColumnHeaderOption = (columnIndex) => {
+            return this.tableData.columnHeaderOptions && this.tableData.columnHeaderOptions[columnIndex];
+        };
+        const headerColumnOption = {
+            columnSpan: this.tableHeaderColumnSpan,
+            textAlign: this.tableHeaderTextAlign,
+            width: this.tableHeaderWidth
+        };
+        return (h("table", { class: {
+                table: true,
+                'table--gapped-columns': this.gappedColumnLayout,
+                [this.theme]: true,
+            } }, this.caption && h("caption", null, this.caption), h("thead", null, h("tr", null, this.renderDesktopHeader({ value: this.tableHeader, tooltip: '' }, headerColumnOption), this.normalizedColumns?.map((columnData, columnIndex) => this.renderDesktopHeader(columnData, getColumnHeaderOption(columnIndex), columnIndex)))), h("tbody", null, this.tableData.rows?.map((row, rowIndex) => this.renderRowData(row, rowIndex)))));
+    };
+    /**
+     * Renders the small screen size table.
+     */
+    renderMobileScreenTable = () => {
+        return (h("div", { class: "mobile-table-wrapper" }, this.tableData.rows?.map((row, rowIndex) => {
+            if (this.getRowOption(rowIndex)?.mobileHide) {
+                return null;
+            }
+            return (h("table", { class: {
+                    'mobile-table': true,
+                    [this.theme]: true,
+                } }, h("thead", null, h("tr", null, this.renderMobileHeader(row))), h("tbody", null, row.cells.map((cell, columnIndex) => this.renderMobileCellData(cell, columnIndex, rowIndex)))));
+        })));
+    };
     /**
      * Gets the mobile column string for a specific cell from a row & column index.
      *

package/dist/collection/components/simple/text-blocks/tet-cloud-application-form-dialog/tet-cloud-application-form-dialog.js

@@ -16,6 +16,20 @@ export class TetApplicationFormDialog {
         this.language = 'lv';
         this.theme = 'light';
     }
+    /** The application form's `tet-dialog` element. */
+    dialogElement;
+    /** The extra field slot element. */
+    extraFieldSlotElement;
+    /** The company name field `tet-input` element. */
+    companyNameInputElement;
+    /** The name/surname field `tet-input` element. */
+    nameSurnameInputElement;
+    /** The email field `tet-input` element. */
+    emailInputElement;
+    /** The phone number field `tet-input` element. */
+    phoneNumberInputElement;
+    /** The privacy policy `tet-checkbox` element. */
+    privacyPolicyElement;
     /**
      * Watches the `language` prop for changes.
      *
@@ -27,6 +41,12 @@ export class TetApplicationFormDialog {
         this.validateInputFields();
         forceUpdate(this);
     }
+    /** The event that is emitted whenever application form is successfully submitted. */
+    submitted;
+    /** The event to be emitted on the `close` icon click, overlay click or the `esc` key press. */
+    closeDialog;
+    /** The event to be emitted when the dialog is opened. */
+    openDialog;
     /** Event called once after component is fully loaded */
     componentDidLoad() {
         this.initInputValidators();
@@ -150,7 +170,13 @@ export class TetApplicationFormDialog {
         if (!inputFieldsValid) {
             return;
         }
-        this.submitted.emit(Object.assign({ companyName: this.getInputElementValue(this.companyNameInputElement), nameSurname: this.getInputElementValue(this.nameSurnameInputElement), email: this.getInputElementValue(this.emailInputElement), phoneNumber: this.getInputElementValue(this.phoneNumberInputElement) }, this.extraFieldSubmissionData));
+        this.submitted.emit({
+            companyName: this.getInputElementValue(this.companyNameInputElement),
+            nameSurname: this.getInputElementValue(this.nameSurnameInputElement),
+            email: this.getInputElementValue(this.emailInputElement),
+            phoneNumber: this.getInputElementValue(this.phoneNumberInputElement),
+            ...this.extraFieldSubmissionData
+        });
     }
     /** Renders the application form loading and custom overlays. */
     renderOverlay() {

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

@@ -14,37 +14,6 @@ import { Host, h } from "@stencil/core";
  */
 export class TetDialog {
     constructor() {
-        /**
-         * Handles the direct overlay clicks, triggers the `closeDialog` event.
-         *
-         * @param event
-         */
-        this.handleClickOverlay = (event) => {
-            if (event.target === event.currentTarget && this.closeOnOverlayClick) {
-                this.onClose(event);
-            }
-        };
-        /**
-         * Handles the dialog closing, triggers the `closeDialog` event.
-         *
-         * @param event
-         */
-        this.onClose = (event) => {
-            event.stopPropagation();
-            if (this.preventDefaultClose) {
-                return;
-            }
-            this.close();
-            this.resetBodyScroll();
-            this.dialogContainer.close();
-            this.closeDialog.emit(event);
-        };
-        /**
-         * Resets the body scroll position.
-         */
-        this.resetBodyScroll = () => {
-            this.el.shadowRoot.querySelector('.dialog__body').scrollTop = 0;
-        };
         this.headerTitle = undefined;
         this.isOpen = false;
         this.theme = 'classic';
@@ -57,6 +26,14 @@ export class TetDialog {
         this.hideHeader = false;
         this.titleId = `dialog-title-${Math.floor(Math.random() * 1000)}`;
     }
+    /** The host element. */
+    el;
+    /** Wrapper for the dialog component, the purpose is to delegate accessibility handling to the browser */
+    dialogContainer;
+    /** The event to be emitted on the `close` icon click, overlay click or the `esc` key press. */
+    closeDialog;
+    /** The event to be emitted when the dialog is opened. */
+    openDialog;
     /**
      * Watches the `isOpen` state on dialog and emits event when it is opened.
      *
@@ -92,6 +69,37 @@ export class TetDialog {
             this.openDialog.emit(eventData);
         }
     }
+    /**
+     * Handles the direct overlay clicks, triggers the `closeDialog` event.
+     *
+     * @param event
+     */
+    handleClickOverlay = (event) => {
+        if (event.target === event.currentTarget && this.closeOnOverlayClick) {
+            this.onClose(event);
+        }
+    };
+    /**
+     * Handles the dialog closing, triggers the `closeDialog` event.
+     *
+     * @param event
+     */
+    onClose = (event) => {
+        event.stopPropagation();
+        if (this.preventDefaultClose) {
+            return;
+        }
+        this.close();
+        this.resetBodyScroll();
+        this.dialogContainer.close();
+        this.closeDialog.emit(event);
+    };
+    /**
+     * Resets the body scroll position.
+     */
+    resetBodyScroll = () => {
+        this.el.shadowRoot.querySelector('.dialog__body').scrollTop = 0;
+    };
     /**
      * Sets the dialog component to be shown.
      */

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

@@ -4,15 +4,15 @@ import { h } from "@stencil/core";
  */
 export class TetInlineMessage {
     constructor() {
-        this.iconMapping = {
-            attention: 'attention',
-            info: 'info-circle',
-            danger: 'close-circle',
-            success: 'check-circle'
-        };
         this.variant = 'attention';
         this.theme = 'light';
     }
+    iconMapping = {
+        attention: 'attention',
+        info: 'info-circle',
+        danger: 'close-circle',
+        success: 'check-circle'
+    };
     render() {
         return (h("div", { key: 'c28617d98f11fe01df16f0d8b9c5a45065c48804', class: {
                 "container": true,

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

@@ -4,29 +4,6 @@ import { Host, h } from "@stencil/core";
  */
 export class TetNotification {
     constructor() {
-        this.THEME_DEFAULT = 'classic';
-        this.TYPE_NEUTRAL = 'neutral';
-        this.TYPE_INFO = 'info';
-        this.TYPE_WARNING = 'warning';
-        this.TYPE_SUCCESS = 'success';
-        this.TYPE_DANGER = 'danger';
-        this.ICON_CIRCLE = 'info-circle';
-        this.ICON_CHECK = 'check-circle';
-        this.ICON_ATTENTION = 'attention';
-        this.ICON_CLOSE = 'close-circle';
-        /**
-         * Close the notification by onclose event
-         * @param event
-         */
-        this.onClose = (event) => {
-            event.stopPropagation();
-            if (event instanceof MouseEvent) {
-                this.close();
-            }
-            else if (event instanceof KeyboardEvent && ['Space', 'Enter'].includes(event.code)) {
-                this.close();
-            }
-        };
         this.icon = undefined;
         this.headerTitle = '';
         this.content = '';
@@ -35,6 +12,20 @@ export class TetNotification {
         this.theme = this.THEME_DEFAULT;
         this.animationDuration = 450;
     }
+    THEME_DEFAULT = 'classic';
+    TYPE_NEUTRAL = 'neutral';
+    TYPE_INFO = 'info';
+    TYPE_WARNING = 'warning';
+    TYPE_SUCCESS = 'success';
+    TYPE_DANGER = 'danger';
+    ICON_CIRCLE = 'info-circle';
+    ICON_CHECK = 'check-circle';
+    ICON_ATTENTION = 'attention';
+    ICON_CLOSE = 'close-circle';
+    /**
+     * The root element of the stepper component.
+     */
+    host;
     /**
      * Check the notification is allowed to be closed
      * @private
@@ -47,6 +38,19 @@ export class TetNotification {
         // Custom set
         return this.allowClose;
     }
+    /**
+     * Close the notification by onclose event
+     * @param event
+     */
+    onClose = (event) => {
+        event.stopPropagation();
+        if (event instanceof MouseEvent) {
+            this.close();
+        }
+        else if (event instanceof KeyboardEvent && ['Space', 'Enter'].includes(event.code)) {
+            this.close();
+        }
+    };
     /**
      * Get icon name assignable to icon component by notification type
      * @private