@scania/tegel 1.21.1-config-for-china-beta.0 → 1.21.1-header-event-trigger-beta.0

package/dist/collection/components/header/header-launcher-grid-title/header-launcher-grid-title.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 .tds-header-launcher-grid-title {
   all: unset;
   box-sizing: border-box;

package/dist/collection/components/header/header-launcher-list-item/header-launcher-list-item.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   display: block;
   border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);

package/dist/collection/components/header/header-launcher-list-title/header-launcher-list-title.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 .tds-header-launcher-list-title {
   all: unset;
   box-sizing: border-box;

package/dist/collection/components/header/header-title/header-title.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 h4 {
   box-sizing: border-box;
   color: var(--tds-header-nav-item-color);

package/dist/collection/components/header/header.css

@@ -1,4 +1,4 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */ /*
+/*
   Contains spacing variables for the layout
 */
 :host {

package/dist/collection/components/icon/icon.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   display: inline-block;
   vertical-align: middle;

package/dist/collection/components/link/link.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   display: inline;
 }

package/dist/collection/components/message/message.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host .wrapper {
   display: flex;
   padding: 16px;

package/dist/collection/components/modal/modal.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 /* MIXINS */
 /* MODAL STYLING */
 .tds-modal {

package/dist/collection/components/popover-canvas/popover-canvas.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 .tds-popover-canvas {
   box-sizing: border-box;
   display: inline-block;

package/dist/collection/components/popover-menu/popover-menu-item/popover-menu-item.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   box-sizing: border-box;
   display: block;

package/dist/collection/components/popover-menu/popover-menu.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 .tds-popover-menu {
   box-sizing: border-box;
   overflow: hidden;

package/dist/collection/components/radio-button/radio-button.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 .tds-radio-button {
   box-sizing: border-box;
   display: flex;

package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host button {
   height: 64px;
   width: 100%;

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.css

@@ -1,4 +1,4 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */ /*
+/*
   Contains spacing variables for the layout
 */
 /** The breakpoint at which the layout changes from fixed size to full-width. */

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   display: block;
 }

package/dist/collection/components/side-menu/side-menu-dropdown-list/side-menu-dropdown-list.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   display: block;
   width: 190px;

package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   display: block;
   box-sizing: border-box;

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css

@@ -1,4 +1,4 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */ /*
+/*
   Contains spacing variables for the layout
 */
 :host {

package/dist/collection/components/side-menu/side-menu-overlay/side-menu-overlay.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   position: fixed;
   width: 100%;

package/dist/collection/components/side-menu/side-menu-user/side-menu-user.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   display: flex;
   align-items: center;

package/dist/collection/components/side-menu/side-menu-user-image/side-menu-user-image.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host img,
 :host ::slotted(*) {
   width: 34px;

package/dist/collection/components/side-menu/side-menu-user-label/side-menu-user-label.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   display: block;
   font: var(--tds-headline-07);

package/dist/collection/components/side-menu/side-menu.css

@@ -1,4 +1,4 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */ /*
+/*
   Contains spacing variables for the layout
 */
 :host {

package/dist/collection/components/slider/slider.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 tds-slider {
   box-sizing: border-box;
   width: 100%;

package/dist/collection/components/spinner/spinner.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :root {
   --tds-spinner-background: var(--tds-blue-400);
   --tds-spinner-background-inverted: var(--tds-white);

package/dist/collection/components/stepper/step/step.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   position: relative;
   display: table-cell;

package/dist/collection/components/stepper/stepper.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host [role=list] {
   display: flex;
   justify-content: space-evenly;

package/dist/collection/components/table/table/table.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   --tds-scrollbar-width-standard: thin;
   --tds-scrollbar-width: 10px;

package/dist/collection/components/table/table-body/table-body.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host,
 tds-table-body {
   box-sizing: border-box;

package/dist/collection/components/table/table-body-cell/table-body-cell.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host(.tds-table__body-cell) {
   box-sizing: border-box;
   font: var(--tds-detail-02);

package/dist/collection/components/table/table-body-input-wrapper/table-body-input-wrapper.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   position: relative;
 }

package/dist/collection/components/table/table-body-row/table-body-row.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host(.tds-table__row) {
   box-sizing: border-box;
   display: table-row;

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   box-sizing: border-box;
   display: contents;

package/dist/collection/components/table/table-footer/table-footer.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   box-sizing: border-box;
   display: table-footer-group;

package/dist/collection/components/table/table-header/table-header.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   box-sizing: border-box;
   display: table-header-group;

package/dist/collection/components/table/table-header-cell/table-header-cell.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host(.tds-table__header-cell) {
   box-sizing: border-box;
   font: var(--tds-headline-07);

package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   position: relative;
 }

package/dist/collection/components/table/table-toolbar/table-toolbar.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   box-sizing: border-box;
   display: table-caption;

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   box-sizing: border-box;
   position: relative;

package/dist/collection/components/tabs/folder-tabs/folder-tabs.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   box-sizing: border-box;
   overflow: hidden;

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   box-sizing: border-box;
   display: block;

package/dist/collection/components/tabs/inline-tabs/inline-tabs.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   box-sizing: border-box;
   display: flex;

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   box-sizing: border-box;
   display: block;

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host {
   box-sizing: border-box;
   display: flex;

package/dist/collection/components/text-field/text-field.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 .text-field-input-lg {
   all: unset;
   border-radius: 4px 4px 0 0;

package/dist/collection/components/text-field/text-field.js

@@ -1,5 +1,5 @@
-import { h } from "@stencil/core";
 import hasSlot from "../../utils/hasSlot";
+import { h } from "@stencil/core";
 /**
  * @slot prefix - Slot for the prefix in the component.
  * @slot suffix - Slot for the suffix in the component. Suffix is hidden when the input is in readonly state.
@@ -44,11 +44,17 @@ export class TdsTextField {
         this.focusInput = false;
         this.tdsBlur.emit(event);
     }
+    /** Method to handle focus */
+    async focusElement() {
+        if (this.textInput) {
+            this.textInput.focus();
+        }
+    }
     render() {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '614c64d5f56045d6056afcd3a16d7b78cbd3acc5', class: {
+        return (h("div", { key: 'fbbf85f381d4322a3806e26fd0d5fc99f418798d', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -62,12 +68,12 @@ export class TdsTextField {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: '0da2f0d7993ebd1e95e863cd11d40091a94d57f8', class: "text-field-label-outside" }, h("div", { key: '71650b98f03e02d01a04e9702ca4937e2cfd03ad' }, this.label))), h("div", { key: 'f518629dc4c49b87904be917e11505fd53ee04c0', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'a99ee8bd33a1f5d4cc46045300ef6876a8956cb9', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '56af5e0e26cd43abbbea49de990bc07c6bb5b18c', class: "text-field-label-outside" }, h("div", { key: '874e3561ccf253e30f6b09902d76174293a1f332' }, this.label))), h("div", { key: 'fc43c855f7f374a2761feda34a6374be1a37ff90', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '7b5590cf8cb856942e30fd80c3115bf133062998', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: 'baa1058fb32778494cbc18037292fb06912b825f', name: "prefix" }))), h("div", { key: 'b174c0f896119f19649fb51d92e387dcb9f76b96', class: "text-field-input-container" }, h("input", { key: '04bc2b5d71120d74e6180058b947af79261c2ab8', ref: (inputEl) => (this.textInput = inputEl), class: {
+            } }, h("slot", { key: 'df3ff67a7f8195e3317c6bef103ee19b98628fe3', name: "prefix" }))), h("div", { key: '7727642d6c2bc664785043f730d652a2ca21657c', class: "text-field-input-container" }, h("input", { key: '58ec947e5d401cc40224be16bd987c9d1a31237f', ref: (inputEl) => (this.textInput = inputEl), class: {
                 'text-field-input': true,
                 'text-field-input-sm': this.size === 'sm',
                 'text-field-input-md': this.size === 'md',
@@ -80,16 +86,16 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'aad5f749e3e65f8cd50b6a787d0cbef9e2b2c520', class: "text-field-label-inside" }, this.label))), h("div", { key: 'f51644bc25e9b38007473f93e4aa31465761b684', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'cae4d0baead1136b9ebaa3610eb0c32608c6dffa', class: {
+            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '4ff4a198eea2803a08f3336c860a07788a4f7ca1', class: "text-field-label-inside" }, this.label))), h("div", { key: '734de1fb01e8f9c0a270af04d567b2fe0d891172', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'acd385a1e926ac1c66e4185e156ab47f796d3c5f', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: 'c5ce94203125d2f8fe86070b4f0b18cbbe7ba3c9', name: "suffix" }))), h("span", { key: '826a4e72800da38b8530d0a06f6e65c668ef3ee6', class: "text-field-icon__readonly" }, h("tds-icon", { key: '3a5d69f23abf0239df9f9d1bae25a92e00f01c3a', name: "edit_inactive", size: "20px" })), h("span", { key: '0b6a09634157678f3e241d6e18e5c732e3bfeb58', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '1dc81988d18d27a89f33924d0ec2b1dad6cc289e', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '40dd671f70b273d7ce13f9207dc5c59d5416d19d', class: "text-field-helper-error-state" }, h("tds-icon", { key: 'b7d5be3a521a76a4384415dc76305f21f4281b36', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: 'c9ec54b60483412e9df0874cbae021da5337c555', class: {
+            } }, h("slot", { key: '98e3ad6a1083ace81fd102a4386236321372158f', name: "suffix" }))), h("span", { key: 'c1020a1fb2ea2ec06f1cc3478328ff09f5dde12f', class: "text-field-icon__readonly" }, h("tds-icon", { key: '2fa99d139b21034cff9699f8ca359b85333c048b', name: "edit_inactive", size: "20px" })), h("span", { key: '1bef6d45afd4586fca10e188b2ccadd4504750fc', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: 'b43c0ed2778672b5ea587214f45f353425030a45', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '6943b70f8ee2fe98a7ade493f62b1be9245c053b', class: "text-field-helper-error-state" }, h("tds-icon", { key: '1e4a5820aa41c0918aee84488476afa2d9bb27c4', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: 'e0f6a4ba6b781e1307f5abba906abba9a6631a74', class: {
                 'text-field-textcounter': true,
                 'text-field-textcounter-disabled': this.disabled,
-            } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'ca55f298722d315d8ebe20fc4e9f64aec9230576', class: {
+            } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'ae2a52268ca86705b853043fb35bc0da19c7e2ae', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, ' ', "/", ' '), this.maxLength))))));
@@ -495,5 +501,26 @@ export class TdsTextField {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "focusElement": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to handle focus",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/textarea/textarea.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 .textarea-container {
   border-radius: 4px 4px 0 0;
   position: relative;

package/dist/collection/components/toast/toast.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 :host(.hide) {
   display: none;
   visibility: hidden;

package/dist/collection/components/toggle/toggle.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 .tds-toggle .disabled {
   cursor: not-allowed;
 }

package/dist/collection/components/tooltip/tooltip.css

@@ -1,4 +1,3 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
 .tds-tooltip {
   box-sizing: border-box;
   font: var(--tds-detail-05);

package/dist/components/tds-header-dropdown.js

@@ -17,6 +17,7 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
         this.uuid = generateUniqueId();
         this.handleSlottedItemClick = (event) => {
             const eventSource = event.target.tagName.toLowerCase();
+            console.log('eventSource', eventSource);
             if (['a', 'button'].includes(eventSource)) {
                 this.open = false;
             }
@@ -38,20 +39,20 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
         this.open = !this.open;
     }
     render() {
-        return (h(Host, { key: '73a8e824b891f66806fad583470460a30af641de' }, h("div", { key: '81e78a9f21b152ae4698ec6f693ead79eb40f936', class: {
+        return (h(Host, { key: '6a363efc99f39507a0b976ac2c6281327d10c12a' }, h("div", { key: 'bc02acb96787385a8aaeb579bf89e0ff96e5951d', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: 'aab78709417d1fd623c9a9969246434d78bcc055', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'dff4234a39520177ba3cc058511144431facb944', ref: (el) => {
+            }, style: { backgroundColor: 'orange' } }, "hej 1", h("tds-header-item", { key: 'bf446a54de86061c05df34ef504dcc751780d245', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'b5e158cb5039d3e20556364727546963bf2a02de', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            } }, h("slot", { key: 'ec32e95833f0bc4a93a18c0058c7bea979cde638', name: "icon" }), this.label, h("slot", { key: 'ab077d925ecbc941446bb9f1f6755dccae26e0ae', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: 'eb45d913a11433c12e5add804c88fd7c33e343ea', class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { key: 'bc15799eeb488984d58abe21cfc27ba695a395a0', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("slot", { key: '424366c75df17c9a1b16435eaaf9c083a28f8297', name: "icon" }), this.label, h("slot", { key: '17186c0fa3ae56dc427c0a113fb97df0b307fc96', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: 'fe07b5fcc4870e010163f7c2c7c0ccb1b4b62340', class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { key: 'b7998b886c204b0f7754e07ba195f1dbb19c2c7c', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
                         fallbackPlacements: [],
                     },
                 },
-            ] }, this.open ? (h("span", { onClick: (e) => this.handleSlottedItemClick(e), onKeyDown: (e) => e.key === 'Enter' && this.handleSlottedItemClick(e) }, h("slot", null))) : null)))));
+            ] }, this.open ? (h("span", { onClick: (e) => this.handleSlottedItemClick(e), onKeyDown: (e) => e.key === 'Enter' && this.handleSlottedItemClick(e), style: { backgroundColor: 'green' } }, "hej 2", h("slot", null))) : null)))));
     }
     get host() { return this; }
     static get style() { return TdsHeaderDropdownStyle0; }

package/dist/components/tds-text-field.js

@@ -51,11 +51,17 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
         this.focusInput = false;
         this.tdsBlur.emit(event);
     }
+    /** Method to handle focus */
+    async focusElement() {
+        if (this.textInput) {
+            this.textInput.focus();
+        }
+    }
     render() {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '614c64d5f56045d6056afcd3a16d7b78cbd3acc5', class: {
+        return (h("div", { key: 'fbbf85f381d4322a3806e26fd0d5fc99f418798d', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -69,12 +75,12 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: '0da2f0d7993ebd1e95e863cd11d40091a94d57f8', class: "text-field-label-outside" }, h("div", { key: '71650b98f03e02d01a04e9702ca4937e2cfd03ad' }, this.label))), h("div", { key: 'f518629dc4c49b87904be917e11505fd53ee04c0', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'a99ee8bd33a1f5d4cc46045300ef6876a8956cb9', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '56af5e0e26cd43abbbea49de990bc07c6bb5b18c', class: "text-field-label-outside" }, h("div", { key: '874e3561ccf253e30f6b09902d76174293a1f332' }, this.label))), h("div", { key: 'fc43c855f7f374a2761feda34a6374be1a37ff90', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '7b5590cf8cb856942e30fd80c3115bf133062998', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: 'baa1058fb32778494cbc18037292fb06912b825f', name: "prefix" }))), h("div", { key: 'b174c0f896119f19649fb51d92e387dcb9f76b96', class: "text-field-input-container" }, h("input", { key: '04bc2b5d71120d74e6180058b947af79261c2ab8', ref: (inputEl) => (this.textInput = inputEl), class: {
+            } }, h("slot", { key: 'df3ff67a7f8195e3317c6bef103ee19b98628fe3', name: "prefix" }))), h("div", { key: '7727642d6c2bc664785043f730d652a2ca21657c', class: "text-field-input-container" }, h("input", { key: '58ec947e5d401cc40224be16bd987c9d1a31237f', ref: (inputEl) => (this.textInput = inputEl), class: {
                 'text-field-input': true,
                 'text-field-input-sm': this.size === 'sm',
                 'text-field-input-md': this.size === 'md',
@@ -87,16 +93,16 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'aad5f749e3e65f8cd50b6a787d0cbef9e2b2c520', class: "text-field-label-inside" }, this.label))), h("div", { key: 'f51644bc25e9b38007473f93e4aa31465761b684', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'cae4d0baead1136b9ebaa3610eb0c32608c6dffa', class: {
+            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '4ff4a198eea2803a08f3336c860a07788a4f7ca1', class: "text-field-label-inside" }, this.label))), h("div", { key: '734de1fb01e8f9c0a270af04d567b2fe0d891172', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'acd385a1e926ac1c66e4185e156ab47f796d3c5f', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: 'c5ce94203125d2f8fe86070b4f0b18cbbe7ba3c9', name: "suffix" }))), h("span", { key: '826a4e72800da38b8530d0a06f6e65c668ef3ee6', class: "text-field-icon__readonly" }, h("tds-icon", { key: '3a5d69f23abf0239df9f9d1bae25a92e00f01c3a', name: "edit_inactive", size: "20px" })), h("span", { key: '0b6a09634157678f3e241d6e18e5c732e3bfeb58', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '1dc81988d18d27a89f33924d0ec2b1dad6cc289e', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '40dd671f70b273d7ce13f9207dc5c59d5416d19d', class: "text-field-helper-error-state" }, h("tds-icon", { key: 'b7d5be3a521a76a4384415dc76305f21f4281b36', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: 'c9ec54b60483412e9df0874cbae021da5337c555', class: {
+            } }, h("slot", { key: '98e3ad6a1083ace81fd102a4386236321372158f', name: "suffix" }))), h("span", { key: 'c1020a1fb2ea2ec06f1cc3478328ff09f5dde12f', class: "text-field-icon__readonly" }, h("tds-icon", { key: '2fa99d139b21034cff9699f8ca359b85333c048b', name: "edit_inactive", size: "20px" })), h("span", { key: '1bef6d45afd4586fca10e188b2ccadd4504750fc', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: 'b43c0ed2778672b5ea587214f45f353425030a45', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '6943b70f8ee2fe98a7ade493f62b1be9245c053b', class: "text-field-helper-error-state" }, h("tds-icon", { key: '1e4a5820aa41c0918aee84488476afa2d9bb27c4', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: 'e0f6a4ba6b781e1307f5abba906abba9a6631a74', class: {
                 'text-field-textcounter': true,
                 'text-field-textcounter-disabled': this.disabled,
-            } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'ca55f298722d315d8ebe20fc4e9f64aec9230576', class: {
+            } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'ae2a52268ca86705b853043fb35bc0da19c7e2ae', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, ' ', "/", ' '), this.maxLength))))));
@@ -121,7 +127,8 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
         "state": [1],
         "maxLength": [2, "max-length"],
         "autofocus": [4],
-        "focusInput": [32]
+        "focusInput": [32],
+        "focusElement": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {