@3t-transform/threeteeui 0.0.9 → 0.0.11

package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts

@@ -0,0 +1,17 @@
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    loadingMessage: {
+      control: string;
+    };
+    size: {
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+  };
+};
+export default _default;
+export declare const Example: (args: any) => string;

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

@@ -1,11 +1,18 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class TttxForm {
-  el: HTMLElement;
-  dataAttribute: string;
-  functionAttribute: string;
-  formSubmit: EventEmitter;
-  fetchFormData: () => {};
-  validateFormField(element: HTMLInputElement): boolean;
-  componentDidLoad(): void;
+  private fieldset;
+  private template;
+  private _formSchema;
+  formschema: any;
+  submitValue: any;
+  submitEvent: EventEmitter<FormData>;
+  onFormSchemaChange(newValue: any): void;
+  validityCheck(event: FocusEvent): void;
+  doSubmit(event: SubmitEvent): void;
+  fieldsetChange(event: Event): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  populateFormFromSchema(): void;
+  componentDidRender(): void;
   render(): any;
 }

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

@@ -1,13 +1,6 @@
 declare const _default: {
   title: string;
   component: string;
-  parameters: {
-    actions: {
-      handles: string[];
-    };
-  };
 };
 export default _default;
-export declare const CreateUserTemplate: () => string;
-export declare const LoginTemplate: () => string;
-export declare const TextBoxExample: () => string;
+export declare const ExampleFormFromJSON: () => string;

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

@@ -0,0 +1,38 @@
+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 {
+  isfocused: boolean;
+  label: string;
+  valid: boolean;
+  showerrormsg: boolean;
+  errormsg: string;
+  iconleft: string;
+  iconright: string;
+  autocapitalize: string;
+  autocomplete: 'off' | 'on';
+  autofocus: boolean;
+  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;
+  handleFocus(): void;
+  handleBlur(): void;
+  render(): any;
+}

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

@@ -0,0 +1,106 @@
+declare const _default: {
+  title: string;
+  component: string;
+  argTypes: {
+    iconleft: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    iconright: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    label: {
+      control: {
+        type: string;
+      };
+    };
+    errormsg: {
+      control: {
+        type: string;
+      };
+    };
+    showerrormsg: {
+      control: {
+        type: string;
+      };
+    };
+    checked: {
+      control: {
+        type: string;
+      };
+    };
+    disabled: {
+      control: {
+        type: string;
+      };
+    };
+    max: {
+      control: {
+        type: string;
+      };
+    };
+    maxlength: {
+      control: {
+        type: string;
+      };
+    };
+    min: {
+      control: {
+        type: string;
+      };
+    };
+    minlength: {
+      control: {
+        type: string;
+      };
+    };
+    name: {
+      control: {
+        type: string;
+      };
+    };
+    pattern: {
+      control: {
+        type: string;
+      };
+    };
+    placeholder: {
+      control: {
+        type: string;
+      };
+    };
+    readonly: {
+      control: {
+        type: string;
+      };
+    };
+    required: {
+      control: {
+        type: string;
+      };
+    };
+    step: {
+      control: {
+        type: string;
+      };
+    };
+    type: {
+      options: string[];
+      control: {
+        type: string;
+      };
+    };
+    value: {
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const InputField: any;

package/dist/types/components.d.ts

@@ -5,6 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { MinMaxDates } from "./components/molecules/tttx-standalone-input/tttx-standalone-input";
 export namespace Components {
     interface TttxButton {
         "buttonStyle": string;
@@ -16,31 +17,47 @@ export namespace Components {
         "value": boolean;
     }
     interface TttxForm {
-        "dataAttribute": string;
-        "functionAttribute": string;
+        "formschema": any;
+        "submitValue": any;
     }
     interface TttxIcon {
         "colour": string;
         "icon": string;
     }
-    interface TttxInput {
+    interface TttxLoadingSpinner {
+        "loadingMessage": boolean;
+        "size": 'small' | 'large';
+    }
+    interface TttxPopoverContent {
+        "body": string;
+        "header": string;
+        "linkcontext": string;
+        "linktext": string;
+    }
+    interface TttxStandaloneInput {
+        "autocapitalize": string;
+        "autocomplete": 'off' | 'on';
+        "autofocus": boolean;
+        "checked": boolean;
+        "disabled": boolean;
         "errormsg": string;
         "iconleft": string;
         "iconright": string;
         "label": string;
+        "max": MinMaxDates | number;
+        "maxlength": string | number;
+        "min": MinMaxDates | number;
+        "minlength": string | number;
+        "name": string;
         "pattern": string;
         "placeholder": string;
+        "readonly": string | boolean;
         "required": boolean;
         "showerrormsg": boolean;
+        "step": string | number;
         "type": string;
         "valid": boolean;
-        "value": string;
-    }
-    interface TttxPopoverContent {
-        "body": string;
-        "header": string;
-        "linkcontext": string;
-        "linktext": string;
+        "value": string | number;
     }
 }
 export interface TttxButtonCustomEvent<T> extends CustomEvent<T> {
@@ -55,9 +72,9 @@ export interface TttxFormCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxFormElement;
 }
-export interface TttxInputCustomEvent<T> extends CustomEvent<T> {
+export interface TttxStandaloneInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLTttxInputElement;
+    target: HTMLTttxStandaloneInputElement;
 }
 declare global {
     interface HTMLTttxButtonElement extends Components.TttxButton, HTMLStencilElement {
@@ -84,11 +101,11 @@ declare global {
         prototype: HTMLTttxIconElement;
         new (): HTMLTttxIconElement;
     };
-    interface HTMLTttxInputElement extends Components.TttxInput, HTMLStencilElement {
+    interface HTMLTttxLoadingSpinnerElement extends Components.TttxLoadingSpinner, HTMLStencilElement {
     }
-    var HTMLTttxInputElement: {
-        prototype: HTMLTttxInputElement;
-        new (): HTMLTttxInputElement;
+    var HTMLTttxLoadingSpinnerElement: {
+        prototype: HTMLTttxLoadingSpinnerElement;
+        new (): HTMLTttxLoadingSpinnerElement;
     };
     interface HTMLTttxPopoverContentElement extends Components.TttxPopoverContent, HTMLStencilElement {
     }
@@ -96,13 +113,20 @@ declare global {
         prototype: HTMLTttxPopoverContentElement;
         new (): HTMLTttxPopoverContentElement;
     };
+    interface HTMLTttxStandaloneInputElement extends Components.TttxStandaloneInput, HTMLStencilElement {
+    }
+    var HTMLTttxStandaloneInputElement: {
+        prototype: HTMLTttxStandaloneInputElement;
+        new (): HTMLTttxStandaloneInputElement;
+    };
     interface HTMLElementTagNameMap {
         "tttx-button": HTMLTttxButtonElement;
         "tttx-checkbox": HTMLTttxCheckboxElement;
         "tttx-form": HTMLTttxFormElement;
         "tttx-icon": HTMLTttxIconElement;
-        "tttx-input": HTMLTttxInputElement;
+        "tttx-loading-spinner": HTMLTttxLoadingSpinnerElement;
         "tttx-popover-content": HTMLTttxPopoverContentElement;
+        "tttx-standalone-input": HTMLTttxStandaloneInputElement;
     }
 }
 declare namespace LocalJSX {
@@ -118,41 +142,58 @@ declare namespace LocalJSX {
         "value"?: boolean;
     }
     interface TttxForm {
-        "dataAttribute"?: string;
-        "functionAttribute"?: string;
-        "onFormSubmit"?: (event: TttxFormCustomEvent<any>) => void;
+        "formschema"?: any;
+        "onSubmitEvent"?: (event: TttxFormCustomEvent<FormData>) => void;
+        "submitValue"?: any;
     }
     interface TttxIcon {
         "colour"?: string;
         "icon"?: string;
     }
-    interface TttxInput {
+    interface TttxLoadingSpinner {
+        "loadingMessage"?: boolean;
+        "size"?: 'small' | 'large';
+    }
+    interface TttxPopoverContent {
+        "body"?: string;
+        "header"?: string;
+        "linkcontext"?: string;
+        "linktext"?: string;
+    }
+    interface TttxStandaloneInput {
+        "autocapitalize"?: string;
+        "autocomplete"?: 'off' | 'on';
+        "autofocus"?: boolean;
+        "checked"?: boolean;
+        "disabled"?: boolean;
         "errormsg"?: string;
         "iconleft"?: string;
         "iconright"?: string;
         "label"?: string;
-        "onValueChanged"?: (event: TttxInputCustomEvent<string>) => void;
+        "max"?: MinMaxDates | number;
+        "maxlength"?: string | number;
+        "min"?: MinMaxDates | number;
+        "minlength"?: string | number;
+        "name"?: string;
+        "onValueChanged"?: (event: TttxStandaloneInputCustomEvent<string>) => void;
         "pattern"?: string;
         "placeholder"?: string;
+        "readonly"?: string | boolean;
         "required"?: boolean;
         "showerrormsg"?: boolean;
+        "step"?: string | number;
         "type"?: string;
         "valid"?: boolean;
-        "value"?: string;
-    }
-    interface TttxPopoverContent {
-        "body"?: string;
-        "header"?: string;
-        "linkcontext"?: string;
-        "linktext"?: string;
+        "value"?: string | number;
     }
     interface IntrinsicElements {
         "tttx-button": TttxButton;
         "tttx-checkbox": TttxCheckbox;
         "tttx-form": TttxForm;
         "tttx-icon": TttxIcon;
-        "tttx-input": TttxInput;
+        "tttx-loading-spinner": TttxLoadingSpinner;
         "tttx-popover-content": TttxPopoverContent;
+        "tttx-standalone-input": TttxStandaloneInput;
     }
 }
 export { LocalJSX as JSX };
@@ -163,8 +204,9 @@ declare module "@stencil/core" {
             "tttx-checkbox": LocalJSX.TttxCheckbox & JSXBase.HTMLAttributes<HTMLTttxCheckboxElement>;
             "tttx-form": LocalJSX.TttxForm & JSXBase.HTMLAttributes<HTMLTttxFormElement>;
             "tttx-icon": LocalJSX.TttxIcon & JSXBase.HTMLAttributes<HTMLTttxIconElement>;
-            "tttx-input": LocalJSX.TttxInput & JSXBase.HTMLAttributes<HTMLTttxInputElement>;
+            "tttx-loading-spinner": LocalJSX.TttxLoadingSpinner & JSXBase.HTMLAttributes<HTMLTttxLoadingSpinnerElement>;
             "tttx-popover-content": LocalJSX.TttxPopoverContent & JSXBase.HTMLAttributes<HTMLTttxPopoverContentElement>;
+            "tttx-standalone-input": LocalJSX.TttxStandaloneInput & JSXBase.HTMLAttributes<HTMLTttxStandaloneInputElement>;
         }
     }
 }

package/package.json

@@ -1,67 +1,69 @@
 {
-  "name": "@3t-transform/threeteeui",
-  "version": "0.0.9",
-  "description": "3t Design System",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/3tui/3tui.esm.js",
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "build": "stencil build --docs",
-    "start": "stencil build --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=531b962b0be5 --exit-zero-on-changes --exit-once-uploaded",
-    "lint:generate": "eslint --ext .tsx -o output.eslint.json -f json"
-  },
-  "resolutions": {
-    "@types/babel__traverse": "7.0.6"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/preset-env": "^7.21.4",
-    "@mdx-js/react": "^2.1.5",
-    "@rollup/plugin-commonjs": "^23.0.3",
-    "@stencil/core": "^2.20.0",
-    "@stencil/sass": "^1.5.2",
-    "@storybook/addon-actions": "^7.0.6",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-links": "^7.0.6",
-    "@storybook/addon-mdx-gfm": "^7.0.6",
-    "@storybook/html": "^7.0.6",
-    "@storybook/html-webpack5": "^7.0.6",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/web-components": "^7.0.6",
-    "@types/jest": "^27.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "chromatic": "^6.7.4",
-    "eslint": "^8.38.0",
-    "jest": "^27.4.5",
-    "jest-cli": "^27.4.5",
-    "less": "^4.1.3",
-    "lit-html": "^2.7.0",
-    "puppeteer": "^10.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass": "^1.56.1"
-  },
-  "license": "UNLICENSED",
-  "readme": "ERROR: No README data found!",
-  "dependencies": {
-    "@popperjs/core": "^2.11.7",
-    "storybook": "^7.0.6"
-  }
+    "name": "@3t-transform/threeteeui",
+    "version": "0.0.11",
+    "description": "3t Design System",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.js",
+    "es2015": "dist/esm/index.mjs",
+    "es2017": "dist/esm/index.mjs",
+    "types": "dist/types/index.d.ts",
+    "collection": "dist/collection/collection-manifest.json",
+    "collection:main": "dist/collection/index.js",
+    "unpkg": "dist/3tui/3tui.esm.js",
+    "files": [
+        "dist/",
+        "loader/"
+    ],
+    "scripts": {
+        "build": "stencil build --docs",
+        "start": "stencil build --watch --serve",
+        "test": "stencil test --spec --e2e",
+        "test.watch": "stencil test --spec --e2e --watchAll",
+        "generate": "stencil generate",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "chromatic": "npx chromatic --project-token=531b962b0be5 --exit-zero-on-changes --exit-once-uploaded",
+        "lint:generate": "eslint --ext .tsx -o output.eslint.json -f json"
+    },
+    "resolutions": {
+        "@types/babel__traverse": "7.0.6"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.18.10",
+        "@babel/preset-env": "^7.21.4",
+        "@mdx-js/react": "^2.1.5",
+        "@rollup/plugin-commonjs": "^23.0.3",
+        "@stencil/core": "^2.20.0",
+        "@stencil/sass": "^1.5.2",
+        "@storybook/addon-actions": "^7.0.6",
+        "@storybook/addon-essentials": "^7.0.6",
+        "@storybook/addon-interactions": "^7.0.6",
+        "@storybook/addon-links": "^7.0.6",
+        "@storybook/addon-mdx-gfm": "^7.0.6",
+        "@storybook/html": "^7.0.6",
+        "@storybook/html-webpack5": "^7.0.6",
+        "@storybook/testing-library": "^0.1.0",
+        "@storybook/web-components": "^7.0.6",
+        "@types/jest": "^27.0.3",
+        "@typescript-eslint/eslint-plugin": "^5.59.0",
+        "@typescript-eslint/parser": "^5.59.0",
+        "chromatic": "^6.7.4",
+        "eslint": "^8.38.0",
+        "jest": "^27.4.5",
+        "jest-cli": "^27.4.5",
+        "less": "^4.1.3",
+        "lit": "^2.7.3",
+        "lit-html": "^2.7.0",
+        "puppeteer": "^10.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.56.1",
+        "typescript": "^5.0.4"
+    },
+    "license": "UNLICENSED",
+    "readme": "ERROR: No README data found!",
+    "dependencies": {
+        "@popperjs/core": "^2.11.7",
+        "storybook": "^7.0.6"
+    }
 }