@3t-transform/threeteeui 0.1.21 → 0.1.22

package/dist/types/components/molecules/tttx-filter/tttx-filter.stories.d.ts

@@ -1,43 +1,43 @@
-declare const _default: {
-  title: string;
-  component: string;
-  argTypes: {
-    filterButtonStyle: {
-      control: {
-        type: string;
-      };
-      options: string[];
-    };
-    showSearchField: {
-      control: {
-        type: string;
-      };
-    };
-    showSelectAll: {
-      control: {
-        type: string;
-      };
-    };
-    showOptionIcons: {
-      control: {
-        type: string;
-      };
-    };
-    filterHeader: {
-      control: {
-        type: string;
-      };
-    };
-  };
-  parameters: {
-    actions: {
-      handles: string[];
-    };
-  };
-  decorators: import("@storybook/types").Addon_DecoratorFunction<unknown>[];
-};
-export default _default;
-export declare const ExampleFilter: (args: any) => string;
-export declare const ListFilterWithoutSearchField: (args: any) => string;
-export declare const TableIconWithoutOptionIconsOrSelectAll: (args: any) => string;
-export declare const ListIconWithoutSearchField: (args: any) => string;
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    filterButtonStyle: {
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+    showSearchField: {
+      control: {
+        type: string;
+      };
+    };
+    showSelectAll: {
+      control: {
+        type: string;
+      };
+    };
+    showOptionIcons: {
+      control: {
+        type: string;
+      };
+    };
+    filterHeader: {
+      control: {
+        type: string;
+      };
+    };
+  };
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+  decorators: import("@storybook/types").Addon_DecoratorFunction<unknown>[];
+};
+export default _default;
+export declare const ExampleFilter: (args: any) => string;
+export declare const ListFilterWithoutSearchField: (args: any) => string;
+export declare const TableIconWithoutOptionIconsOrSelectAll: (args: any) => string;
+export declare const ListIconWithoutSearchField: (args: any) => string;

package/dist/types/components/molecules/tttx-form/lib/setErrorState.d.ts

@@ -1,13 +1,13 @@
-/**
- * Sets the error state of an input field by updating its class and error message.
- * If an error was detected, it sets the input field's class to "invalid" and
- * displays the error message in an error bubble. If no error was detected,
- * it removes the "invalid" class from the input field and clears the error bubble.
- *
- * @param {HTMLInputElement} target - The input field to update.
- * @param {boolean} hasError - Whether an error was detected in the field.
- * @param {string} errorMessage - The error message to display (if any).
- * @return {void}
- */
-declare function setErrorState(target: any, hasError: any, errorMessage: any): void;
-export default setErrorState;
+/**
+ * Sets the error state of an input field by updating its class and error message.
+ * If an error was detected, it sets the input field's class to "invalid" and
+ * displays the error message in an error bubble. If no error was detected,
+ * it removes the "invalid" class from the input field and clears the error bubble.
+ *
+ * @param {HTMLInputElement} target - The input field to update.
+ * @param {boolean} hasError - Whether an error was detected in the field.
+ * @param {string} errorMessage - The error message to display (if any).
+ * @return {void}
+ */
+declare function setErrorState(target: any, hasError: any, errorMessage: any): void;
+export default setErrorState;

package/dist/types/components/molecules/tttx-form/lib/validityCheck.d.ts

@@ -1,17 +1,17 @@
-/**
- * Validates the input field on focusout event by checking its validity state,
- * sets an error message if there's an issue, and emits a "dataChanged" event to
- * the parent component with the field name and its new value.
- *
- * @param {Event} event - The focusout event triggered by the input field.
- * @return {void}
- */
-declare function validityCheck(event: {
-  target: any;
-  preventDefault: Function;
-}): {
-  target: any;
-  hasError: boolean;
-  errorMessage: string;
-};
-export default validityCheck;
+/**
+ * Validates the input field on focusout event by checking its validity state,
+ * sets an error message if there's an issue, and emits a "dataChanged" event to
+ * the parent component with the field name and its new value.
+ *
+ * @param {Event} event - The focusout event triggered by the input field.
+ * @return {void}
+ */
+declare function validityCheck(event: {
+  target: any;
+  preventDefault: Function;
+}): {
+  target: any;
+  hasError: boolean;
+  errorMessage: string;
+};
+export default validityCheck;

package/dist/types/components/molecules/tttx-form/tttx-form.d.ts

@@ -1,114 +1,114 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-import { ChangeEvent } from 'react';
-export declare class TttxForm {
-  private fieldset;
-  private template;
-  private _formSchema;
-  formschema: any;
-  submitValue: any;
-  dataSubmitted: EventEmitter<FormData>;
-  dataChanged: EventEmitter<{
-    name: string;
-    value: any;
-  }>;
-  onFormSchemaChange(newValue: any): void;
-  /**
-   * Handles the focus event for a form field and emits a "dataChanged" event
-   * to the parent component with the field name and its new value.
-   *
-   * @param {ChangeEvent} event - The focus event triggered by the field.
-   * @return {void}
-   */
-  fieldChanged(event: ChangeEvent): void;
-  /**
-   * Submits the form data to the server.
-   *
-   * @param {SubmitEvent} event - The event object for the form submission.
-   * @returns {void}
-   *
-   * @example
-   * const form = document.getElementById('myForm');
-   * form.addEventListener('submit', (event) => {
-   *   doSubmit(event);
-   * });
-   */
-  doSubmit(event: SubmitEvent): void;
-  componentWillLoad(): void;
-  componentWillRender(): void;
-  /**
-   * Creates a new HTMLInputElement with the specified name, type, and placeholder (if any),
-   * and sets its autocomplete and autocapitalization properties to off.
-   *
-   * @param {string} formKey - The name of the input field, as specified in the form schema.
-   * @param {Object} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
-   * @param {string} formProperties.type - The type of the input field (e.g., "text", "email", "number", etc.).
-   * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
-   * @return {HTMLInputElement} - The new input element.
-   */
-  createInput(formKey: any, formProperties: any): HTMLInputElement;
-  /**
-   * Applies validation attributes to an input element based on the specified validation object.
-   * If a certain property is present in the object, it will set the corresponding attribute on
-   * the input element (e.g., "required" will set the "required" and "data-required" attributes,
-   * "pattern" will set the "pattern" and "data-pattern" attributes, etc.).
-   *
-   * @param {HTMLInputElement} input - The input element to apply validation attributes to.
-   * @param {Object} validation - An object containing the validation rules for the input field.
-   * @param {Object} [validation.required] - An object containing a "message" property to display if the field is required.
-   * @param {Object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
-   * @param {Object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
-   * @param {Object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
-   * @param {string} [validation.maxlength] - The maximum length of the input field.
-   * @return {void}
-   */
-  applyValidation(input: any, validation: any): void;
-  createErrorBubble(): HTMLDivElement;
-  /**
-   * Creates a new <label> element with the "inputBlock" class and the specified label text,
-   * and appends the input element and error bubble element to it. If the form property has
-   * no validation object, it adds an "optional" span element to the label.
-   *
-   * @param {Object} formProperties - An object containing properties for the form field, including its label text and validation rules.
-   * @param {HTMLInputElement} input - The input element to associate with the label.
-   * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
-   * @return {HTMLLabelElement} - The new label element.
-   */
-  createLabel(formProperties: any, input: any, errorBubble: any): HTMLLabelElement;
-  /**
-   * Creates a new <input> element with the "submit" type, the "primary-blue" class, and the
-   * specified label text (i.e., "Save" by default), and returns the new submit button element.
-   *
-   * @return {HTMLInputElement} - The new submit button element.
-   */
-  createSubmitButton(): HTMLInputElement;
-  /**
-   * Populates the form template with input fields and labels based on the properties of the
-   * current form schema. For each property in the schema, it creates an input element, applies
-   * any validation rules to it, creates an error bubble and label element, and appends them
-   * to the form template. Finally, it creates and appends a submit button element to the form.
-   *
-   * @return {void}
-   */
-  populateFormFromSchema(): void;
-  /**
-   * Clones the form template and binds event listeners to its input elements. First, it checks if
-   * there is a form schema present. If so, it clones the template's content, binds events to form
-   * input elements, and appends the cloned form elements to the fieldset. The event listeners include
-   * "oninvalid" (to check input validity on submit), "onblur" (to check input validity on blur),
-   * "onkeyup" (to handle changes in input fields), and "onchange" (to handle changes in select fields).
-   *
-   * @return {void}
-   */
-  componentDidRender(): void;
-  validityCheckWrapper(event: any): void;
-  /**
-   * Renders the component's template as a form element with a fieldset container. The form's
-   * "onSubmit" event is bound to the "doSubmit" function, which handles the form submission
-   * and emits a "dataSubmitted" event with the form data. The fieldset element is assigned
-   * to the "fieldset" instance variable using a ref, so it can be populated with form elements
-   * later on.
-   *
-   * @return {JSX.Element} - The rendered form template as a JSX element.
-   */
-  render(): any;
-}
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { ChangeEvent } from 'react';
+export declare class TttxForm {
+  private fieldset;
+  private template;
+  private _formSchema;
+  formschema: any;
+  submitValue: any;
+  dataSubmitted: EventEmitter<FormData>;
+  dataChanged: EventEmitter<{
+    name: string;
+    value: any;
+  }>;
+  onFormSchemaChange(newValue: any): void;
+  /**
+   * Handles the focus event for a form field and emits a "dataChanged" event
+   * to the parent component with the field name and its new value.
+   *
+   * @param {ChangeEvent} event - The focus event triggered by the field.
+   * @return {void}
+   */
+  fieldChanged(event: ChangeEvent): void;
+  /**
+   * Submits the form data to the server.
+   *
+   * @param {SubmitEvent} event - The event object for the form submission.
+   * @returns {void}
+   *
+   * @example
+   * const form = document.getElementById('myForm');
+   * form.addEventListener('submit', (event) => {
+   *   doSubmit(event);
+   * });
+   */
+  doSubmit(event: SubmitEvent): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  /**
+   * Creates a new HTMLInputElement with the specified name, type, and placeholder (if any),
+   * and sets its autocomplete and autocapitalization properties to off.
+   *
+   * @param {string} formKey - The name of the input field, as specified in the form schema.
+   * @param {Object} formProperties - An object containing additional properties for the input field, such as its type and placeholder value.
+   * @param {string} formProperties.type - The type of the input field (e.g., "text", "email", "number", etc.).
+   * @param {string} [formProperties.placeholder] - An optional placeholder value to display in the input field.
+   * @return {HTMLInputElement} - The new input element.
+   */
+  createInput(formKey: any, formProperties: any): HTMLInputElement;
+  /**
+   * Applies validation attributes to an input element based on the specified validation object.
+   * If a certain property is present in the object, it will set the corresponding attribute on
+   * the input element (e.g., "required" will set the "required" and "data-required" attributes,
+   * "pattern" will set the "pattern" and "data-pattern" attributes, etc.).
+   *
+   * @param {HTMLInputElement} input - The input element to apply validation attributes to.
+   * @param {Object} validation - An object containing the validation rules for the input field.
+   * @param {Object} [validation.required] - An object containing a "message" property to display if the field is required.
+   * @param {Object} [validation.pattern] - An object containing a "pattern" property to match against the field value, and a "message" property to display if the pattern doesn't match.
+   * @param {Object} [validation.badInput] - An object containing a "message" property to display if the field value is invalid.
+   * @param {Object} [validation.minmax] - An object containing "min" and "max" properties to validate the field value against, and a "message" property to display if the value is out of range.
+   * @param {string} [validation.maxlength] - The maximum length of the input field.
+   * @return {void}
+   */
+  applyValidation(input: any, validation: any): void;
+  createErrorBubble(): HTMLDivElement;
+  /**
+   * Creates a new <label> element with the "inputBlock" class and the specified label text,
+   * and appends the input element and error bubble element to it. If the form property has
+   * no validation object, it adds an "optional" span element to the label.
+   *
+   * @param {Object} formProperties - An object containing properties for the form field, including its label text and validation rules.
+   * @param {HTMLInputElement} input - The input element to associate with the label.
+   * @param {HTMLDivElement} errorBubble - The error bubble element to display error messages in.
+   * @return {HTMLLabelElement} - The new label element.
+   */
+  createLabel(formProperties: any, input: any, errorBubble: any): HTMLLabelElement;
+  /**
+   * Creates a new <input> element with the "submit" type, the "primary-blue" class, and the
+   * specified label text (i.e., "Save" by default), and returns the new submit button element.
+   *
+   * @return {HTMLInputElement} - The new submit button element.
+   */
+  createSubmitButton(): HTMLInputElement;
+  /**
+   * Populates the form template with input fields and labels based on the properties of the
+   * current form schema. For each property in the schema, it creates an input element, applies
+   * any validation rules to it, creates an error bubble and label element, and appends them
+   * to the form template. Finally, it creates and appends a submit button element to the form.
+   *
+   * @return {void}
+   */
+  populateFormFromSchema(): void;
+  /**
+   * Clones the form template and binds event listeners to its input elements. First, it checks if
+   * there is a form schema present. If so, it clones the template's content, binds events to form
+   * input elements, and appends the cloned form elements to the fieldset. The event listeners include
+   * "oninvalid" (to check input validity on submit), "onblur" (to check input validity on blur),
+   * "onkeyup" (to handle changes in input fields), and "onchange" (to handle changes in select fields).
+   *
+   * @return {void}
+   */
+  componentDidRender(): void;
+  validityCheckWrapper(event: any): void;
+  /**
+   * Renders the component's template as a form element with a fieldset container. The form's
+   * "onSubmit" event is bound to the "doSubmit" function, which handles the form submission
+   * and emits a "dataSubmitted" event with the form data. The fieldset element is assigned
+   * to the "fieldset" instance variable using a ref, so it can be populated with form elements
+   * later on.
+   *
+   * @return {JSX.Element} - The rendered form template as a JSX element.
+   */
+  render(): any;
+}

package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts

@@ -1,13 +1,13 @@
-declare const _default: {
-  title: string;
-  component: string;
-  parameters: {
-    actions: {
-      handles: string[];
-    };
-  };
-  decorators: import("@storybook/types").Addon_DecoratorFunction<unknown>[];
-};
-export default _default;
-export declare const ExampleFormFromJSON: () => string;
-export declare const SingleFormItem: () => string;
+declare const _default: {
+  title: string;
+  component: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+  decorators: import("@storybook/types").Addon_DecoratorFunction<unknown>[];
+};
+export default _default;
+export declare const ExampleFormFromJSON: () => string;
+export declare const SingleFormItem: () => string;

package/dist/types/components/molecules/tttx-list/tttx-list.d.ts

@@ -1,11 +1,11 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-import { ListItem } from './interfaces';
-export declare class TttxList {
-  data: string | ListItem[];
-  name: string;
-  rowClick: EventEmitter;
-  private _data;
-  onRowClickHandler(item: ListItem): void;
-  renderListItem(item: ListItem): any;
-  render(): any;
-}
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { ListItem } from './interfaces';
+export declare class TttxList {
+  data: string | ListItem[];
+  name: string;
+  rowClick: EventEmitter;
+  private _data;
+  onRowClickHandler(item: ListItem): void;
+  renderListItem(item: ListItem): any;
+  render(): any;
+}

package/dist/types/components/molecules/tttx-list/tttx-list.stories.d.ts

@@ -1,14 +1,14 @@
-declare const _default: {
-  title: string;
-  component: string;
-  parameters: {
-    actions: {
-      handles: string[];
-    };
-  };
-  decorators: import("@storybook/types").Addon_DecoratorFunction<unknown>[];
-};
-export default _default;
-export declare const BasicStringList: any;
-export declare const BasicObjectList: any;
-export declare const BasicClickableList: any;
+declare const _default: {
+  title: string;
+  component: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+  decorators: import("@storybook/types").Addon_DecoratorFunction<unknown>[];
+};
+export default _default;
+export declare const BasicStringList: any;
+export declare const BasicObjectList: any;
+export declare const BasicClickableList: any;

package/dist/types/components/molecules/tttx-sorter/interfaces.d.ts

@@ -0,0 +1,9 @@
+export interface SorterData {
+    sorterOptions: { optionLabel: string }[];
+}
+
+export interface SorterChangeEvent {
+    sorterKey: string;
+    sorterDirection: 'ascending' | 'descending';
+    sortField: string;
+}

package/dist/types/components/molecules/tttx-sorter/tttx-sorter.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { SorterData, SorterChangeEvent } from './interfaces';
+export declare class TttxSorter {
+  sorterKey: string;
+  defaultSortDirection: 'ascending' | 'descending';
+  fieldOptionsData: string | SorterData;
+  defaultOption: string;
+  selectedField: string;
+  sortDirection: 'ascending' | 'descending';
+  dropdownExpand: boolean;
+  dropdownOptions: HTMLElement[];
+  sorterChangeEvent: EventEmitter<SorterChangeEvent>;
+  el: any;
+  emitSortEvent(): void;
+  onSortToggleClick(event: Event): void;
+  onDropdownClicked(): void;
+  onDropdownSelected(event: Event): void;
+  render(): any;
+}

package/dist/types/components/molecules/tttx-sorter/tttx-sorter.stories.d.ts

@@ -0,0 +1,30 @@
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    fieldOptionsData: {
+      control: {
+        type: string;
+      };
+    };
+    defaultOption: {
+      control: {
+        type: string;
+      };
+    };
+    sorterKey: {
+      control: {
+        type: string;
+      };
+    };
+  };
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+  decorators: import("@storybook/types").Addon_DecoratorFunction<unknown>[];
+};
+export default _default;
+export declare const BasicSorter: any;
+export declare const AnotherSorter: any;

package/dist/types/components/molecules/tttx-standalone-input/tttx-standalone-input.d.ts

@@ -1,56 +1,56 @@
-import { EventEmitter } from '../../../stencil-public-runtime';
-export type DateSyntax = `${number}${number}${number}${number}-${number}${number}-${number}${number}`;
-export type MonthSyntax = `${number}${number}${number}${number}-${number}${number}`;
-export type WeekSyntax = `${number}${number}${number}${number}-W${number}${number}`;
-export type TimeSyntax = `${number}${number}:${number}${number}`;
-export type DateTimeLocalSyntax = `${number}${number}${number}${number}-${number}${number}-${number}${number}T${number}${number}:${number}${number}`;
-export type MinMaxDates = DateSyntax | MonthSyntax | WeekSyntax | TimeSyntax | DateTimeLocalSyntax;
-export declare class TttxInput {
-  label: string;
-  showerrormsg: boolean;
-  showerrorbubble: boolean;
-  errormsg: string;
-  iconleft: string;
-  iconright: string;
-  inputicon: string;
-  inline: boolean;
-  inputAutocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
-  inputAutofocus: boolean;
-  /**
-   * Defines what action to present for the enter key on virtual keyboards
-   */
-  inputKeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
-  /**
-   * tabindex - Allows the HTML elements to be focusable
-   * @example <caption>In HTML (like `index.html`)</caption>
-   * <tttx-standalone-input input-index="1" />
-   * @example <caption>In TSX files</caption>
-   * <tttx-standalone-input inputIndex={1} />
-   */
-  inputIndex: string | number;
-  inputTitle: string;
-  autocomplete: 'off' | 'on';
-  checked: boolean;
-  disabled: boolean;
-  max: MinMaxDates | number;
-  maxlength: string | number;
-  min: MinMaxDates | number;
-  minlength: string | number;
-  name: string;
-  pattern: string;
-  placeholder: string;
-  readonly: string | boolean;
-  required: boolean;
-  step: string | number;
-  type: string;
-  value: string | number;
-  valueChanged: EventEmitter<string>;
-  handleChange(event: Event | InputEvent): void;
-  focusChanged: EventEmitter<string>;
-  handleFocus(event: Event | InputEvent): void;
-  blurChanged: EventEmitter<string>;
-  handleBlur(event: Event | InputEvent): void;
-  invalidChanged: EventEmitter<string>;
-  handleInvalid(event: Event | InputEvent): void;
-  render(): any;
-}
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare type DateSyntax = `${number}${number}${number}${number}-${number}${number}-${number}${number}`;
+export declare type MonthSyntax = `${number}${number}${number}${number}-${number}${number}`;
+export declare type WeekSyntax = `${number}${number}${number}${number}-W${number}${number}`;
+export declare type TimeSyntax = `${number}${number}:${number}${number}`;
+export declare type DateTimeLocalSyntax = `${number}${number}${number}${number}-${number}${number}-${number}${number}T${number}${number}:${number}${number}`;
+export declare type MinMaxDates = DateSyntax | MonthSyntax | WeekSyntax | TimeSyntax | DateTimeLocalSyntax;
+export declare class TttxInput {
+  label: string;
+  showerrormsg: boolean;
+  showerrorbubble: boolean;
+  errormsg: string;
+  iconleft: string;
+  iconright: string;
+  inputicon: string;
+  inline: boolean;
+  inputAutocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+  inputAutofocus: boolean;
+  /**
+   * Defines what action to present for the enter key on virtual keyboards
+   */
+  inputKeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+  /**
+   * tabindex - Allows the HTML elements to be focusable
+   * @example <caption>In HTML (like `index.html`)</caption>
+   * <tttx-standalone-input input-index="1" />
+   * @example <caption>In TSX files</caption>
+   * <tttx-standalone-input inputIndex={1} />
+   */
+  inputIndex: string | number;
+  inputTitle: string;
+  autocomplete: 'off' | 'on';
+  checked: boolean;
+  disabled: boolean;
+  max: MinMaxDates | number;
+  maxlength: string | number;
+  min: MinMaxDates | number;
+  minlength: string | number;
+  name: string;
+  pattern: string;
+  placeholder: string;
+  readonly: string | boolean;
+  required: boolean;
+  step: string | number;
+  type: string;
+  value: string | number;
+  valueChanged: EventEmitter<string>;
+  handleChange(event: Event | InputEvent): void;
+  focusChanged: EventEmitter<string>;
+  handleFocus(event: Event | InputEvent): void;
+  blurChanged: EventEmitter<string>;
+  handleBlur(event: Event | InputEvent): void;
+  invalidChanged: EventEmitter<string>;
+  handleInvalid(event: Event | InputEvent): void;
+  render(): any;
+}