@scania/tegel 0.0.8 → 0.0.9

package/dist/types/components/stepper/step/step.d.ts

@@ -0,0 +1,17 @@
+import { InternalTdsStepperPropChange } from '../stepper';
+export declare class TdsStep {
+  /** Index of the step. Will be displayed in the step if the state is current/upcoming. */
+  index: string;
+  /** State of the Step */
+  state: 'current' | 'error' | 'success' | 'upcoming';
+  hideLabel: boolean;
+  size: 'sm' | 'lg';
+  orientation: 'horizontal' | 'vertical';
+  labelPosition: 'aside' | 'below';
+  el: HTMLElement;
+  private stepperEl;
+  private stepperId;
+  componentWillLoad(): void;
+  handlePropsChange(event: CustomEvent<InternalTdsStepperPropChange>): void;
+  render(): any;
+}

package/dist/types/components/stepper/stepper.d.ts

@@ -0,0 +1,36 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+type TdsStepperProps = {
+  orientation: 'horizontal' | 'vertical';
+  labelPosition: 'aside' | 'below';
+  size: 'sm' | 'lg';
+  hideLabels: boolean;
+};
+export type InternalTdsStepperPropChange = {
+  stepperId: string;
+  changed: Array<keyof TdsStepperProps>;
+} & Partial<TdsStepperProps>;
+export declare class TdsStepper {
+  host: HTMLElement;
+  /** The orientation the Steps */
+  orientation: 'horizontal' | 'vertical';
+  /** Text position, only available on a direction: horizontal */
+  labelPosition: 'aside' | 'below';
+  /** Size of the component and it's children. */
+  size: 'sm' | 'lg';
+  /** Hides the label for the child components if true. */
+  hideLabels: boolean;
+  /** ID used for internal Stepper functionality and events, must be unique.
+   *
+   * **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,
+   * as the default ID is random and will be different every time.
+   */
+  stepperId: string;
+  componentWillLoad(): void;
+  internalTdsPropsChange: EventEmitter<InternalTdsStepperPropChange>;
+  handleDirectionChange(): void;
+  handleLabelPositionChange(): void;
+  handleSizeChange(): void;
+  handleHideLabelsChange(): void;
+  render(): any;
+}
+export {};

package/dist/types/components/table/table/table.d.ts

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+type Props = {
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  enableMultiselect: boolean;
+  enableExpandableRows: boolean;
+  enableResponsive: boolean;
+  modeVariant: 'primary' | 'secondary' | null;
+  textAlign: string;
+};
+export type InternalTdsTablePropChange = {
+  tableId: string;
+  changed: Array<keyof Props>;
+} & Partial<Props>;
+export declare class TdsTable {
+  /** Enables style with vertical dividers between columns */
+  verticalDividers: boolean;
+  /** Enables style where Table toolbar, rows and footer are less high */
+  compactDesign: boolean;
+  /** Enables to customize width on Table columns */
+  noMinWidth: boolean;
+  /** Enables multiselect feature of Table */
+  enableMultiselect: boolean;
+  /** Enables extended row feature of Table */
+  enableExpandableRows: boolean;
+  /** Enables Table to take 100% available width with equal spacing of columns */
+  enableResponsive: boolean;
+  /** Variant of the component, based on current mode. */
+  modeVariant: 'primary' | 'secondary';
+  /** ID used for internal Table functionality and events, must be unique.
+   *
+   * **NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,
+   * as the default ID is random and will be different every time.
+   */
+  tableId: string;
+  host: HTMLElement;
+  /** @internal Broadcasts changes to the Table props */
+  internalTdsTablePropChange: EventEmitter<InternalTdsTablePropChange>;
+  emitInternalTdsPropChange(changedValueName: keyof Props, changedValue: Props[keyof Props]): void;
+  enableMultiselectChanged(newValue: boolean): void;
+  enableExpandableRowsChanged(newValue: boolean): void;
+  compactDesignChanged(newValue: boolean): void;
+  verticalDividersChanged(newValue: boolean): void;
+  noMinWidthChanged(newValue: boolean): void;
+  modeVariantChanged(newValue: 'primary' | 'secondary' | null): void;
+  render(): any;
+}
+export {};

package/dist/types/components/table/table-body/table-body.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableBody {
+  /** Prop to pass JSON string which enables automatic rendering of Table rows and cells  */
+  bodyData: any;
+  /** Prop for showcase of rendering JSON in body-data, just for presentation purposes */
+  enableDummyData: boolean;
+  jsonData: any;
+  host: HTMLElement;
+  rowsPerPage: number;
+  enableMultiselect: boolean;
+  enablePaginationTableBody: boolean;
+  enableExpandableRows: boolean;
+  innerBodyData: any[];
+  bodyDataManipulated: any[];
+  bodyDataOriginal: any[];
+  multiselectArray: any[];
+  multiselectArrayJSON: string;
+  mainCheckboxStatus: boolean;
+  columnsNumber: number;
+  disableAllSorting: boolean;
+  numberOfPages: number;
+  paginationValue: number;
+  tempPaginationDisable: boolean;
+  showNoResultsMessage: boolean;
+  tableId: string;
+  tableEl: HTMLTdsTableElement;
+  arrayDataWatcher(newValue: string): void;
+  /** @internal Event that sends unique Table identifier and enable/disable status for sorting functionality */
+  internalTdsSortingChange: EventEmitter<any>;
+  /** @internal Sends unique Table identifier and mainCheckbox status to all rows when multiselect feature is enabled */
+  internalTdsCheckboxChange: EventEmitter<any>;
+  /** @internal Sends unique Table identifier and status
+   * if mainCheckbox should change its state based on selection status of single rows
+   * when multiselect feature is used */
+  internalTdsMainCheckboxChange: EventEmitter<any>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  static compareValues(key: any, order?: string): (a: any, b: any) => number;
+  uncheckAll: () => void;
+  sortData(keyValue: any, sortingDirection: any): void;
+  updateOptionsContent(event: CustomEvent<any>): void;
+  selectedDataExporter: () => void;
+  headCheckboxListener(event: CustomEvent<any>): void;
+  bodyCheckBoxClicked: () => void;
+  bodyCheckboxListener(): void;
+  searchFunction(searchTerm: any): void;
+  /** Listens to internalTdsFilter from tableToolbar component */
+  tdsFilterListener(event: CustomEvent<{
+    tableId: string;
+    query: string;
+  }>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  render(): any;
+}

package/dist/types/components/table/table-body-cell/table-body-cell.d.ts

@@ -0,0 +1,24 @@
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableBodyCell {
+  /** Value that will be presented as text inside a cell */
+  cellValue: string | number;
+  /** Passing the same cell key for all body cells which is used in head cell enables features of text align and hovering */
+  cellKey: any;
+  /** Disables internal padding. Useful when passing other components to cell. */
+  disablePadding: boolean;
+  textAlignState: string;
+  activeSorting: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  internalTdsHoverListener(event: CustomEvent<any>): void;
+  internalTdsTextAlignListener(event: CustomEvent<any>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/table/table-body-row/table-body-row.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableBodyRow {
+  enableMultiselect: boolean;
+  bodyCheckBoxStatus: boolean;
+  mainCheckBoxStatus: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  modeVariant: 'primary' | 'secondary';
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  bodyCheckBoxClicked(event: any): void;
+  bodyCheckBoxStatusUpdater(status: any): void;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  /** @internal Send status of single row to the parent, tds-table component that hold logic for data export and main checkbox control */
+  internalTdsRowChange: EventEmitter<boolean>;
+  /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */
+  internalTdsPagination: EventEmitter<string>;
+  headCheckboxListener(event: CustomEvent<any>): void;
+  internalTdsCheckboxChangeListener(event: CustomEvent<any>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/table/table-body-row-expandable/table-body-row-expandable.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableBodyRowExpandable {
+  /** In case that automatic count of columns does not work, user can manually set this one.
+   *  Take in mind that expandable control is column too */
+  colSpan: number;
+  isExpanded: boolean;
+  tableId: string;
+  columnsNumber: number;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  modeVariant: 'primary' | 'secondary';
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** @internal Sends out expanded status which is used by the Table header component */
+  internalTdsRowExpanded: EventEmitter<any>;
+  /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */
+  internalTdsPagination: EventEmitter<string>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  sendValue(): void;
+  onChangeHandler(event: any): void;
+  render(): any;
+}

package/dist/types/components/table/table-footer/table-footer.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableFooter {
+  /** Enable pagination and show pagination controls  */
+  pagination: boolean;
+  /** Sets how many rows to display when pagination is enabled. */
+  rowsPerPage: number;
+  /** Sets the pagination number. */
+  paginationValue: number;
+  /** Prop for a client to set max number of pages. */
+  maxPages: number;
+  /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */
+  clientSetColumnsNumber: number;
+  /** State that memorize number of columns to display colSpan correctly - set from parent level */
+  columnsNumber: number;
+  /** Total number of pages, number of the rows divided with number of rows per page */
+  numberOfPages: number;
+  /** Temporarily disable pagination - due to search - set from parent level */
+  tempPaginationDisable: boolean;
+  compactDesign: boolean;
+  tableId: string;
+  host: HTMLElement;
+  private inputElement;
+  private tableEl;
+  /** Event to send current page value to tds-table-body component, can also be listened to in order to implement custom pagination logic. */
+  tdsPageChange: EventEmitter<{
+    tableId: string;
+    paginationValue: number;
+  }>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  private previousPage;
+  private nextPage;
+  private paginationInputChange;
+  tdsPaginationListener(event: CustomEvent<any>): void;
+  runPagination: () => void;
+  render(): any;
+}

package/dist/types/components/table/table-header/table-header.d.ts

@@ -0,0 +1,27 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableHeaderRow {
+  enableMultiselect: boolean;
+  enableExpandableRows: boolean;
+  mainCheckboxSelected: boolean;
+  mainExpendSelected: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  enableToolbarDesign: boolean;
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** @internal Send status of the main checkbox in header to the parent, tds-table component */
+  internalTdsMainCheckboxSelect: EventEmitter<any>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  internalTdsMainCheckboxChangeListener(event: CustomEvent<any>): void;
+  internalTdsRowExpandedListener(event: CustomEvent<any>): void;
+  bodyExpandClicked(): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  headCheckBoxClicked(event: any): void;
+  render(): any;
+}

package/dist/types/components/table/table-header-cell/table-header-cell.d.ts

@@ -0,0 +1,68 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableHeaderCell {
+  /** The value of column key, usually comes from JSON, needed for sorting */
+  columnKey: string;
+  /** Text that displays in column cell */
+  columnTitle: string;
+  /** In case noMinWidth setting, user has to specify width value for each column, for example, "150px" */
+  customWidth: string;
+  /** If passed as prop, enables sorting on that column */
+  sortable: boolean;
+  /** Setting for text align, default is left, but user can pass "right" as string - useful for numeric values */
+  textAlign: string;
+  textAlignState: string;
+  sortingDirection: 'asc' | 'desc';
+  sortedByMyKey: boolean;
+  disableSortingBtn: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  enableMultiselect: boolean;
+  enableToolbarDesign: boolean;
+  tableId: string;
+  enableExpandableRows: boolean;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** Sends unique Table identifier, column key and sorting direction to the tds-table-body component, can also be listened to in order to implement custom-sorting logic. */
+  tdsSortChange: EventEmitter<{
+    tableId: string;
+    columnKey: string;
+    sortingDirection: 'asc' | 'desc';
+  }>;
+  /** @internal Sends unique Table identifier, column key and sorting direction to the tds-table-body component,
+   * can also be listened to in order to implement custom-sorting logic. */
+  internalSortButtonClicked: EventEmitter<{
+    tableId: string;
+    key: string;
+  }>;
+  /** @internal Sends unique Table identifier, column key and sorting direction to the tds-table-body component,
+   *  can also be listened to in order to implement custom-sorting logic. */
+  internalTdsSortChange: EventEmitter<{
+    tableId: string;
+    columnKey: string;
+    sortingDirection: 'asc' | 'desc';
+  }>;
+  /** @internal Sends unique Table identifier,
+   * column key and text align value so the body cells with a same key take the same text alignment as header cell */
+  internalTdsTextAlign: EventEmitter<any>;
+  /** @internal Sends unique Table identifier,
+   * column key so the body cells with the same key change background when user hovers over header cell */
+  internalTdsHover: EventEmitter<{
+    tableId: string;
+    key: string;
+  }>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  internalTdsSortingChangeListener(event: CustomEvent<any>): void;
+  updateOptionsContent(event: CustomEvent<{
+    tableId: string;
+    key: string;
+  }>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  sortButtonClick: () => void;
+  headerCellContent: () => any;
+  onHeadCellHover: (key: any) => void;
+  render(): any;
+}

package/dist/types/components/table/table-toolbar/table-toolbar.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableToolbar {
+  /** Adds title to the Table */
+  tableTitle: string;
+  /** Enables preview of searchbar */
+  enableFiltering: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** Used for sending users' input to the main parent tds-table the component,
+   * can also be listened to in order to implement custom sorting logic. */
+  tdsFilterChange: EventEmitter<{
+    tableId: string;
+    query: string;
+  }>;
+  /** @internal Internal event to notify tds-table-body that a filter/search has been made. */
+  internalTdsFilter: EventEmitter<{
+    tableId: string;
+    query: string;
+  }>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  searchFunction(event: any): void;
+  render(): any;
+}

package/dist/types/components/tabs/folder-tabs/folder-tab/folder-tab.d.ts

@@ -0,0 +1,11 @@
+export declare class TdsFolderTab {
+  /** Disables the Tab. */
+  disabled: boolean;
+  selected: boolean;
+  tabWidth: number;
+  /** @internal Method to set the width of the tab. Used by the <tds-folder-tabs> */
+  setTabWidth(width: number): Promise<void>;
+  /** @internal Method to set the tab as selected. Used by the <tds-folder-tabs> */
+  setSelected(selected: boolean): Promise<void>;
+  render(): any;
+}

package/dist/types/components/tabs/folder-tabs/folder-tabs.d.ts

@@ -1,12 +1,12 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class InlineTabs {
+export declare class TdsFolderTabs {
   host: HTMLElement;
-  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+  /** Variant of the Tabs, primary= on white, secondary= on grey50 */
   modeVariant: 'primary' | 'secondary';
-  /** Sets the default selected tab. */
+  /** Sets the default selected Tab. */
   defaultSelectedIndex: number;
-  /** Sets the selected tab.
-   * If this is set all tab changes needs to be handled by the user. */
+  /** Sets the selected Tab.
+   * If this is set, all Tab changes need to be handled by the user. */
   selectedIndex: number;
   buttonWidth: number;
   showLeftScroll: boolean;
@@ -16,11 +16,11 @@ export declare class InlineTabs {
   private buttonsWidth;
   private scrollWidth;
   private children;
-  /** Event emitted when the selected tab is changed. */
-  sddsChange: EventEmitter<{
+  /** Event emitted when the selected Tab is changed. */
+  tdsChange: EventEmitter<{
     selectedTabIndex: number;
   }>;
-  /** Sets the passed tabindex as the selected tab. */
+  /** Sets the passed tabindex as the selected Tab. */
   selectTab(tabIndex: number): Promise<{
     selectedTabIndex: number;
   }>;

package/dist/types/components/tabs/inline-tabs/inline-tab/inline-tab.d.ts

@@ -0,0 +1,8 @@
+export declare class TdsInlineTab {
+  /** Disables the Tab. */
+  disabled: boolean;
+  selected: boolean;
+  /** @internal Method to set the Tab as selected. Used by the <tds-inline-tabs> */
+  setSelected(selected: boolean): Promise<void>;
+  render(): any;
+}

package/dist/types/components/tabs/inline-tabs/inline-tabs.d.ts

@@ -1,12 +1,12 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class InlineTabsFullbleed {
+export declare class TdsInlineTabs {
   host: HTMLElement;
-  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+  /** Variant of the Tabs, primary= on white, secondary= on grey50 */
   modeVariant: 'primary' | 'secondary';
-  /** Sets the default selected tab. */
+  /** Sets the default selected Tab. */
   defaultSelectedIndex: number;
-  /** Sets the selected tab.
-   * If this is set all tab changes needs to be handled by the user. */
+  /** Sets the selected Tab.
+   * If this is set, all Tab changes need to be handled by the user. */
   selectedIndex: number;
   showLeftScroll: boolean;
   showRightScroll: boolean;
@@ -16,10 +16,10 @@ export declare class InlineTabsFullbleed {
   private buttonsWidth;
   private scrollWidth;
   private children;
-  sddsChange: EventEmitter<{
+  tdsChange: EventEmitter<{
     selectedTabIndex: number;
   }>;
-  /** Selects a tab based on tabindex, will not select a disabled tab. */
+  /** Selects a Tab based on tabindex, will not select a disabled Tab. */
   selectTab(tabIndex: number): Promise<{
     selectedTabIndex: number;
   }>;

package/dist/types/components/tabs/navigation-tabs/navigation-tab/navigation-tab.d.ts

@@ -0,0 +1,8 @@
+export declare class TdsNavigationTab {
+  /** Disables the Tab. */
+  disabled: boolean;
+  selected: boolean;
+  /** @internal Method to set the Tab as selected. Used by the <tds-navigation-tabs> */
+  setSelected(selected: boolean): Promise<void>;
+  render(): any;
+}

package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts

@@ -1,13 +1,13 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-export declare class NavigationTabs {
-  /** Variant of the tabs, primary= on white, secondary= on grey50 */
+export declare class TdsNavigationTabs {
+  host: HTMLElement;
+  /** Variant of the Tabs, primary= on white, secondary= on grey50 */
   modeVariant: 'primary' | 'secondary';
-  /** Sets the default selected tab. */
+  /** Sets the default selected Tab. */
   defaultSelectedIndex: number;
-  /** Sets the selected tab.
-   * If this is set all tab changes needs to be handled by the user. */
+  /** Sets the selected Tab.
+   * If this is set, all Tab changes need to be handled by the user. */
   selectedIndex: number;
-  host: HTMLElement;
   showLeftScroll: boolean;
   showRightScroll: boolean;
   private navWrapperElement;
@@ -15,12 +15,12 @@ export declare class NavigationTabs {
   private buttonsWidth;
   private scrollWidth;
   private children;
-  /** Sets the passed tabindex as the selected tab. */
+  /** Sets the passed tabindex as the selected Tab. */
   selectTab(tabIndex: number): Promise<{
     selectedTabIndex: number;
   }>;
-  /** Event emitted when the selected tab is changed. */
-  sddsChange: EventEmitter<{
+  /** Event emitted when the selected Tab is changed. */
+  tdsChange: EventEmitter<{
     selectedTabIndex: number;
   }>;
   scrollRight(): void;

package/dist/types/components/text-field/text-field.d.ts

@@ -0,0 +1,52 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class TdsTextField {
+  /** Text input for focus state */
+  textInput?: HTMLInputElement;
+  /** Which input type, text, password or similar */
+  type: 'text' | 'password';
+  /** Position of the label for the Text Field. */
+  labelPosition: 'inside' | 'outside' | 'no-label';
+  /** Label text */
+  label: string;
+  /** Helper text */
+  helper: string;
+  /** Placeholder text */
+  placeholder: string;
+  /** Value of the input text */
+  value: string;
+  /** Set input in disabled state */
+  disabled: boolean;
+  /** Set input in readonly state */
+  readOnly: boolean;
+  /** Size of the input */
+  size: 'sm' | 'md' | 'lg';
+  /** Mode variant of the Text Field */
+  modeVariant: 'primary' | 'secondary';
+  /** With setting */
+  noMinWidth: boolean;
+  /** Name property */
+  name: string;
+  /** Error state of input */
+  state: 'error' | 'success' | 'default';
+  /** Max length of input */
+  maxLength: number;
+  /** Autofocus for input */
+  autofocus: boolean;
+  /** Listen to the focus state of the input */
+  focusInput: any;
+  /** Change event for the Text Field */
+  tdsChange: EventEmitter;
+  handleChange(event: any): void;
+  /** Input event for the Text Field */
+  tdsInput: EventEmitter<InputEvent>;
+  handleInput(event: any): void;
+  /** Focus event for the Text Field */
+  tdsFocus: EventEmitter<FocusEvent>;
+  /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
+  handleFocus(event: any): void;
+  /** Blur event for the Text Field */
+  tdsBlur: EventEmitter<FocusEvent>;
+  /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
+  handleBlur(event: any): void;
+  render(): any;
+}

package/dist/types/components/textarea/textarea.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export declare class Textarea {
-  /** Textinput for focus state */
+export declare class TdsTextarea {
+  /** Text input for focus state */
   textEl?: HTMLTextAreaElement;
   /** Label text */
   label: string;
@@ -12,7 +12,7 @@ export declare class Textarea {
   cols: number;
   /** Textarea rows attribute */
   rows: number;
-  /** Position of the label for the textfield. */
+  /** Position of the label for the Textarea. */
   labelPosition: 'inside' | 'outside' | 'no-label';
   /** Placeholder text */
   placeholder: string;
@@ -26,7 +26,7 @@ export declare class Textarea {
   state: 'error' | 'success' | 'default';
   /** Max length of input */
   maxLength: number;
-  /** Mode variant of the textarea */
+  /** Mode variant of the Textarea */
   modeVariant: 'primary' | 'secondary';
   /** Control of autofocus */
   autoFocus: boolean;
@@ -34,17 +34,17 @@ export declare class Textarea {
   noMinWidth: boolean;
   /** Listen to the focus state of the input */
   focusInput: any;
-  /** Change event for the textarea */
-  sddsChange: EventEmitter;
+  /** Change event for the Textarea */
+  tdsChange: EventEmitter;
   handleChange(event: any): void;
-  /** Blur event for the textarea */
-  sddsBlur: EventEmitter<FocusEvent>;
+  /** Blur event for the Textarea */
+  tdsBlur: EventEmitter<FocusEvent>;
   handleBlur(event: any): void;
-  /** Input event for the textarea */
-  sddsInput: EventEmitter<InputEvent>;
+  /** Input event for the Textarea */
+  tdsInput: EventEmitter<InputEvent>;
   handleInput(event: any): void;
-  /** Focus event for the textarea */
-  sddsFocus: EventEmitter<FocusEvent>;
+  /** Focus event for the Textarea */
+  tdsFocus: EventEmitter<FocusEvent>;
   handleFocus(event: any): void;
   render(): any;
 }