@3t-transform/threeteeui 0.0.22 → 0.0.24

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

@@ -1,51 +1,9 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-interface LoadEventOptions {
-  name: string;
-  items: object[];
-  lastPage: boolean;
-}
-interface ActionSelectedEventOptions {
-  name: string;
-  eventName: string;
-  removeRows: boolean;
-}
-interface GenericTemplateData {
-  text: string;
-  icon?: string;
-  iconColor?: string;
-}
+import { ListItem } from './interfaces';
 export declare class TttxList {
-  host: HTMLElement;
-  name: string;
-  selectable: boolean;
-  items: object[];
-  selectedIds: number[];
-  loading: boolean;
-  lastPage: boolean;
-  private template;
-  private scrollableParent;
-  private rowCount;
-  listLoadHandler(event: CustomEvent<LoadEventOptions>): void;
-  listPaginate: EventEmitter;
-  listPaginateHandler(): void;
-  listClearDataCacheHandler(event: CustomEvent): void;
-  listActionSelectedEventHandler(event: CustomEvent<ActionSelectedEventOptions>): void;
+  data: string | ListItem[];
   listSelectedEvent: EventEmitter;
-  removeSelectedRows(): void;
-  listItemClick: EventEmitter;
-  listItemClickHandler(itemData: object): void;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
-  listItemContainer(): Element;
-  scrollHandler(): Promise<void>;
-  isScrollable(node: HTMLElement): boolean;
-  getScrollableParent(node: HTMLElement): any;
-  appendRowCheckbox(rowContainer: HTMLElement): void;
-  appendSeededTemplate(rowData: object, rowContainer: HTMLElement): void;
-  appendGenericTemplate(rowData: GenericTemplateData, rowContainer: HTMLElement): void;
-  row(rowData: object): HTMLDivElement;
-  renderRows(batchData: object[]): void;
-  loadIndicator(): any;
+  private _data;
+  renderListItem(item: ListItem): any;
   render(): any;
 }
-export {};

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

@@ -1,13 +1,7 @@
 declare const _default: {
   title: string;
   component: string;
-  argTypes: {
-    selectable: {
-      control: {
-        type: string;
-      };
-    };
-  };
 };
 export default _default;
-export declare const ListWithGenericTemplate: (args: any) => string;
+export declare const BasicStringList: any;
+export declare const BasicObjectList: any;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,10 +1,10 @@
 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 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;

package/dist/types/components/molecules/tttx-table/test/tttx-table.e2e.d.ts

@@ -0,0 +1 @@
+export {};

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 { ListItem } from "./components/molecules/tttx-list/interfaces";
 import { MinMaxDates } from "./components/molecules/tttx-standalone-input/tttx-standalone-input";
 export namespace Components {
     interface TttxButton {
@@ -13,41 +14,21 @@ export namespace Components {
         "iconposition": 'left' | 'right';
         "notext": boolean;
     }
-    interface TttxCheckbox {
-        "label": string;
-        "required": boolean;
-        "value": boolean;
-    }
-    interface TttxForm {
-        "formschema": any;
-        "submitValue": any;
-    }
     interface TttxIcon {
         "color": string;
         "icon": string;
     }
-    interface TttxInputCalendar {
-        "months": boolean;
-        "years": boolean;
-    }
     interface TttxKeyvalueBlock {
         "horizontal": boolean;
         "keyvalues": any | any[] | string;
     }
     interface TttxList {
-        "name": string;
-        "selectable": boolean;
+        "data": string | ListItem[];
     }
     interface TttxLoadingSpinner {
         "loadingMessage": boolean;
         "size": 'small' | 'large';
     }
-    interface TttxPopoverContent {
-        "body": string;
-        "header": string;
-        "linkcontext": string;
-        "linktext": string;
-    }
     interface TttxStandaloneInput {
         "autocomplete": 'off' | 'on';
         "checked": boolean;
@@ -90,14 +71,6 @@ export namespace Components {
         "selected": number;
     }
 }
-export interface TttxCheckboxCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLTttxCheckboxElement;
-}
-export interface TttxFormCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLTttxFormElement;
-}
 export interface TttxListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLTttxListElement;
@@ -117,30 +90,12 @@ declare global {
         prototype: HTMLTttxButtonElement;
         new (): HTMLTttxButtonElement;
     };
-    interface HTMLTttxCheckboxElement extends Components.TttxCheckbox, HTMLStencilElement {
-    }
-    var HTMLTttxCheckboxElement: {
-        prototype: HTMLTttxCheckboxElement;
-        new (): HTMLTttxCheckboxElement;
-    };
-    interface HTMLTttxFormElement extends Components.TttxForm, HTMLStencilElement {
-    }
-    var HTMLTttxFormElement: {
-        prototype: HTMLTttxFormElement;
-        new (): HTMLTttxFormElement;
-    };
     interface HTMLTttxIconElement extends Components.TttxIcon, HTMLStencilElement {
     }
     var HTMLTttxIconElement: {
         prototype: HTMLTttxIconElement;
         new (): HTMLTttxIconElement;
     };
-    interface HTMLTttxInputCalendarElement extends Components.TttxInputCalendar, HTMLStencilElement {
-    }
-    var HTMLTttxInputCalendarElement: {
-        prototype: HTMLTttxInputCalendarElement;
-        new (): HTMLTttxInputCalendarElement;
-    };
     interface HTMLTttxKeyvalueBlockElement extends Components.TttxKeyvalueBlock, HTMLStencilElement {
     }
     var HTMLTttxKeyvalueBlockElement: {
@@ -159,12 +114,6 @@ declare global {
         prototype: HTMLTttxLoadingSpinnerElement;
         new (): HTMLTttxLoadingSpinnerElement;
     };
-    interface HTMLTttxPopoverContentElement extends Components.TttxPopoverContent, HTMLStencilElement {
-    }
-    var HTMLTttxPopoverContentElement: {
-        prototype: HTMLTttxPopoverContentElement;
-        new (): HTMLTttxPopoverContentElement;
-    };
     interface HTMLTttxStandaloneInputElement extends Components.TttxStandaloneInput, HTMLStencilElement {
     }
     var HTMLTttxStandaloneInputElement: {
@@ -179,14 +128,10 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "tttx-button": HTMLTttxButtonElement;
-        "tttx-checkbox": HTMLTttxCheckboxElement;
-        "tttx-form": HTMLTttxFormElement;
         "tttx-icon": HTMLTttxIconElement;
-        "tttx-input-calendar": HTMLTttxInputCalendarElement;
         "tttx-keyvalue-block": HTMLTttxKeyvalueBlockElement;
         "tttx-list": HTMLTttxListElement;
         "tttx-loading-spinner": HTMLTttxLoadingSpinnerElement;
-        "tttx-popover-content": HTMLTttxPopoverContentElement;
         "tttx-standalone-input": HTMLTttxStandaloneInputElement;
         "tttx-table": HTMLTttxTableElement;
     }
@@ -198,47 +143,22 @@ declare namespace LocalJSX {
         "iconposition"?: 'left' | 'right';
         "notext"?: boolean;
     }
-    interface TttxCheckbox {
-        "label"?: string;
-        "onValueChanged"?: (event: TttxCheckboxCustomEvent<boolean>) => void;
-        "required"?: boolean;
-        "value"?: boolean;
-    }
-    interface TttxForm {
-        "formschema"?: any;
-        "onDataChanged"?: (event: TttxFormCustomEvent<{ name: string, value: any }>) => void;
-        "onDataSubmitted"?: (event: TttxFormCustomEvent<FormData>) => void;
-        "submitValue"?: any;
-    }
     interface TttxIcon {
         "color"?: string;
         "icon"?: string;
     }
-    interface TttxInputCalendar {
-        "months"?: boolean;
-        "years"?: boolean;
-    }
     interface TttxKeyvalueBlock {
         "horizontal"?: boolean;
         "keyvalues"?: any | any[] | string;
     }
     interface TttxList {
-        "name"?: string;
+        "data"?: string | ListItem[];
         "onListItemClick"?: (event: TttxListCustomEvent<any>) => void;
-        "onListPaginate"?: (event: TttxListCustomEvent<any>) => void;
-        "onListSelectedEvent"?: (event: TttxListCustomEvent<any>) => void;
-        "selectable"?: boolean;
     }
     interface TttxLoadingSpinner {
         "loadingMessage"?: boolean;
         "size"?: 'small' | 'large';
     }
-    interface TttxPopoverContent {
-        "body"?: string;
-        "header"?: string;
-        "linkcontext"?: string;
-        "linktext"?: string;
-    }
     interface TttxStandaloneInput {
         "autocomplete"?: 'off' | 'on';
         "checked"?: boolean;
@@ -288,14 +208,10 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "tttx-button": TttxButton;
-        "tttx-checkbox": TttxCheckbox;
-        "tttx-form": TttxForm;
         "tttx-icon": TttxIcon;
-        "tttx-input-calendar": TttxInputCalendar;
         "tttx-keyvalue-block": TttxKeyvalueBlock;
         "tttx-list": TttxList;
         "tttx-loading-spinner": TttxLoadingSpinner;
-        "tttx-popover-content": TttxPopoverContent;
         "tttx-standalone-input": TttxStandaloneInput;
         "tttx-table": TttxTable;
     }
@@ -305,14 +221,10 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "tttx-button": LocalJSX.TttxButton & JSXBase.HTMLAttributes<HTMLTttxButtonElement>;
-            "tttx-checkbox": LocalJSX.TttxCheckbox & JSXBase.HTMLAttributes<HTMLTttxCheckboxElement>;
-            "tttx-form": LocalJSX.TttxForm & JSXBase.HTMLAttributes<HTMLTttxFormElement>;
             "tttx-icon": LocalJSX.TttxIcon & JSXBase.HTMLAttributes<HTMLTttxIconElement>;
-            "tttx-input-calendar": LocalJSX.TttxInputCalendar & JSXBase.HTMLAttributes<HTMLTttxInputCalendarElement>;
             "tttx-keyvalue-block": LocalJSX.TttxKeyvalueBlock & JSXBase.HTMLAttributes<HTMLTttxKeyvalueBlockElement>;
             "tttx-list": LocalJSX.TttxList & JSXBase.HTMLAttributes<HTMLTttxListElement>;
             "tttx-loading-spinner": LocalJSX.TttxLoadingSpinner & JSXBase.HTMLAttributes<HTMLTttxLoadingSpinnerElement>;
-            "tttx-popover-content": LocalJSX.TttxPopoverContent & JSXBase.HTMLAttributes<HTMLTttxPopoverContentElement>;
             "tttx-standalone-input": LocalJSX.TttxStandaloneInput & JSXBase.HTMLAttributes<HTMLTttxStandaloneInputElement>;
             "tttx-table": LocalJSX.TttxTable & JSXBase.HTMLAttributes<HTMLTttxTableElement>;
         }

package/dist/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export type ListenTargetOptions = 'body' | 'document' | 'window';
+export declare type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,8 +214,8 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
@@ -257,15 +257,6 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
-/**
- * Used to specify a nonce value that corresponds with an application's
- * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
- * When set, the nonce will be added to all dynamically created script and style tags at runtime.
- * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
- * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
- * @param nonce The value to be used for the nonce attribute.
- */
-export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
@@ -442,57 +433,13 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
-/**
- * Utilities for working with functional Stencil components. An object
- * conforming to this interface is passed by the Stencil runtime as the third
- * argument to a functional component, allowing component authors to work with
- * features like children.
- *
- * The children of a functional component will be passed as the second
- * argument, so a functional component which uses these utils to transform its
- * children might look like the following:
- *
- * ```ts
- * export const AddClass: FunctionalComponent = (_, children, utils) => (
- *  utils.map(children, child => ({
- *    ...child,
- *    vattrs: {
- *      ...child.vattrs,
- *      class: `${child.vattrs.class} add-class`
- *    }
- *  }))
- * );
- * ```
- *
- * For more see the Stencil documentation, here:
- * https://stenciljs.com/docs/functional-components
- */
 export interface FunctionalUtilities {
-    /**
-     * Utility for reading the children of a functional component at runtime.
-     * Since the Stencil runtime uses a different interface for children it is
-     * not recommendeded to read the children directly, and is preferable to use
-     * this utility to, for instance, perform a side effect for each child.
-     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
-    /**
-     * Utility for transforming the children of a functional component. Given an
-     * array of children and a callback this will return a list of the results of
-     * passing each child to the supplied callback.
-     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
-/**
- * A Child VDOM node
- *
- * This has most of the same properties as {@link VNode} but friendlier names
- * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
- * order to provide a friendlier public interface for users of the
- * {@link FunctionalUtilities}).
- */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -539,9 +486,6 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
-/**
- * A virtual DOM node
- */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;

package/loader/index.d.ts

@@ -10,12 +10,3 @@ export interface CustomElementsDefineOptions {
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<void>;
-
-/** 
- * Used to specify a nonce value that corresponds with an application's CSP.
- * When set, the nonce will be added to all dynamically created script and style tags at runtime.
- * Alternatively, the nonce value can be set on a meta tag in the DOM head
- * (<meta name="csp-nonce" content="{ nonce value here }" />) which
- * will result in the same behavior.
- */
-export declare function setNonce(nonce: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@3t-transform/threeteeui",
-    "version": "0.0.22",
+    "version": "0.0.24",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
@@ -18,7 +18,7 @@
         "build": "stencil build --docs",
         "start": "stencil build --watch --serve",
         "test": "stencil test --spec --e2e",
-        "coverage": "yarn test -- --coverage --no-cache",
+        "coverage": "yarn test --coverage --no-cache",
         "test.watch": "stencil test --spec --e2e --watchAll",
         "generate": "stencil generate",
         "storybook": "storybook dev -p 6006",
@@ -67,6 +67,7 @@
     "readme": "ERROR: No README data found!",
     "dependencies": {
         "@popperjs/core": "^2.11.7",
+        "dompurify": "^3.0.3",
         "storybook": "^7.0.6"
     }
 }

package/readme.md

@@ -87,3 +87,23 @@ The first step for all three of these strategies is to [publish to NPM](https://
 -   Run `npm install my-component --save`
 -   Add an import to the npm packages `import my-component;`
 -   Then you can use the element anywhere in your template, JSX, html etc
+
+### DOMPurify
+ 
+In some cases we may want to pass html to a component as a prop. In this case we can render it by pasing it to an element with the innerHTML attribute, which can be a security concern so before attaching it to the innerHTML attribute we first pass it through DOMPurify which should scan and removes moulious tags. 
+
+To use DOMPurify in your component you will need to import it and then use it in the render or a method called by the render function.
+
+#### imports
+``` typescript
+import { sanitize } from 'dompurify';
+import domSanitiserOptions from '../../../shared/domsanitiser.options';
+```
+#### Method
+``` typescript
+  render() {
+    return (
+      <div innerHTML={sanitize(this.html, domSanitiserOptions)}></div>
+    );
+  }
+```

package/dist/cjs/tttx-checkbox.cjs.entry.js

@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-bf777121.js');
-
-const tttxCheckboxCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#dc0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger{color:#dc0000}.optional{color:#757575;font-weight:normal}label.inputBlock{display:block;position:relative;line-height:21px}label{font-weight:500;font-size:16px}input:not([type=submit]){font-family:\"Roboto\", serif;box-sizing:border-box;width:100%;height:36px;padding:0 16px;font-size:16px;border:1px solid #d5d5d5;border-radius:4px;margin-top:4px}input[type=date]{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid:invalid,input.standalone.invalid{border:1px solid #dc0000}input~.errorBubble{min-height:27px;position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;display:flex;align-content:center;align-items:center;justify-items:center}input~.errorBubble:not(.visible){visibility:hidden}input~.errorBubble span{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid:invalid~.errorBubble{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:\"Roboto\", sans-serif;color:#dc0000;visibility:visible}input:focus{border-color:#1479c6}:host{display:block}.spacing{margin-bottom:16px}";
-
-const TttxCheckbox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.valueChanged = index.createEvent(this, "valueChanged", 7);
-    this.value = undefined;
-    this.label = undefined;
-    this.required = undefined;
-  }
-  handleClick(event) {
-    const target = event.target;
-    this.value = target.checked;
-    this.valueChanged.emit(target.checked);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "field spacing" }, this.label && (index.h("label", { class: "label" }, this.label, !this.required ? index.h("span", { class: "optional" }, " (optional)") : '')), index.h("input", { type: "checkbox", class: "input", onChange: event => this.handleClick(event), checked: this.value }))));
-  }
-};
-TttxCheckbox.style = tttxCheckboxCss;
-
-exports.tttx_checkbox = TttxCheckbox;