@3t-transform/threeteeui 0.0.23 → 0.0.25

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.23",
+    "version": "0.0.25",
     "description": "3t Design System",
     "main": "dist/index.cjs.js",
     "module": "dist/index.js",
@@ -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/tttx/p-bbb7dbf7.js

@@ -1,2 +0,0 @@
-let e,t,n=!1;const l={},o=e=>"object"==(e=typeof e)||"function"===e;function s(e){var t,n,l;return null!==(l=null===(n=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===n?void 0:n.getAttribute("content"))&&void 0!==l?l:void 0}const c=(e,t,...n)=>{let l=null,s=!1,c=!1;const r=[],u=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?u(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!o(l))&&(l+=""),s&&c?r[r.length-1].t+=l:r.push(s?i(null,l):l),c=s)};if(u(n),t){const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}const a=i(e,null);return a.l=t,r.length>0&&(a.o=r),a},i=(e,t)=>({i:0,u:e,t,$:null,o:null,l:null}),r={},u=(e,t,n)=>{const l=(e=>H(e).m)(e);return{emit:e=>a(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},a=(e,t,n)=>{const l=G.ce(t,n);return e.dispatchEvent(l),l},f=new WeakMap,d=e=>"sc-"+e.h,$=(e,t,n,l,s,c)=>{if(n!==l){let i=q(e,t),r=t.toLowerCase();if("class"===t){const t=e.classList,o=h(n),s=h(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if(i||"o"!==t[0]||"n"!==t[1]){const r=o(l);if((i||r&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||(e[t]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&c||s)&&!r&&e.setAttribute(t,l=!0===l?"":l)}else t="-"===t[2]?t.slice(3):q(B,r)?r.slice(2):r[2]+t.slice(3),n&&G.rel(e,t,n,!1),l&&G.ael(e,t,l,!1)}},m=/\s/,h=e=>e?e.split(m):[],p=(e,t,n,o)=>{const s=11===t.$.nodeType&&t.$.host?t.$.host:t.$,c=e&&e.l||l,i=t.l||l;for(o in c)o in i||$(s,o,c[o],void 0,n,t.i);for(o in i)$(s,o,c[o],i[o],n,t.i)},y=(t,n,l)=>{const o=n.o[l];let s,c,i=0;if(null!==o.t)s=o.$=D.createTextNode(o.t);else if(s=o.$=D.createElement(o.u),p(null,o,!1),null!=e&&s["s-si"]!==e&&s.classList.add(s["s-si"]=e),o.o)for(i=0;i<o.o.length;++i)c=y(t,o,i),c&&s.appendChild(c);return s},b=(e,n,l,o,s,c)=>{let i,r=e;for(r.shadowRoot&&r.tagName===t&&(r=r.shadowRoot);s<=c;++s)o[s]&&(i=y(null,l,s),i&&(o[s].$=i,r.insertBefore(i,n)))},w=(e,t,n,l)=>{for(;t<=n;++t)(l=e[t])&&l.$.remove()},v=(e,t)=>e.u===t.u,S=(e,t)=>{const n=t.$=e.$,l=e.o,o=t.o,s=t.t;null===s?("slot"===t.u||p(e,t,!1),null!==l&&null!==o?((e,t,n,l)=>{let o,s=0,c=0,i=t.length-1,r=t[0],u=t[i],a=l.length-1,f=l[0],d=l[a];for(;s<=i&&c<=a;)null==r?r=t[++s]:null==u?u=t[--i]:null==f?f=l[++c]:null==d?d=l[--a]:v(r,f)?(S(r,f),r=t[++s],f=l[++c]):v(u,d)?(S(u,d),u=t[--i],d=l[--a]):v(r,d)?(S(r,d),e.insertBefore(r.$,u.$.nextSibling),r=t[++s],d=l[--a]):v(u,f)?(S(u,f),e.insertBefore(u.$,r.$),u=t[--i],f=l[++c]):(o=y(t&&t[c],n,c),f=l[++c],o&&r.$.parentNode.insertBefore(o,r.$));s>i?b(e,null==l[a+1]?null:l[a+1].$,n,l,c,a):c>a&&w(t,s,i)})(n,l,t,o):null!==o?(null!==e.t&&(n.textContent=""),b(n,null,t,o,0,o.length-1)):null!==l&&w(l,0,l.length-1)):e.t!==s&&(n.data=s)},g=(e,t)=>{t&&!e.p&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.p=t)))},j=(e,t)=>{if(e.i|=16,!(4&e.i))return g(e,e.v),te((()=>M(e,t)));e.i|=512},M=(e,t)=>{const n=e.S;let l;return t&&(l=P(n,"componentWillLoad")),E(l,(()=>k(e,n,t)))},k=async(e,t,n)=>{const l=e.m,o=l["s-rc"];n&&(e=>{const t=e.g,n=e.m,l=t.i,o=((e,t)=>{var n;let l=d(t);const o=z.get(l);if(e=11===e.nodeType?e:D,o)if("string"==typeof o){let t,c=f.get(e=e.head||e);if(c||f.set(e,c=new Set),!c.has(l)){{t=D.createElement("style"),t.innerHTML=o;const l=null!==(n=G.j)&&void 0!==n?n:s(D);null!=l&&t.setAttribute("nonce",l),e.insertBefore(t,e.querySelector("link"))}c&&c.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"),2&l&&n.classList.add(o+"-s"))})(e);C(e,t),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const t=l["s-p"],n=()=>O(e);0===t.length?n():(Promise.all(t).then(n),e.i|=4,t.length=0)}},C=(n,l)=>{try{l=l.render(),n.i&=-17,n.i|=2,((n,l)=>{const o=n.m,s=n.M||i(null,null),u=(e=>e&&e.u===r)(l)?l:c(null,null,l);t=o.tagName,u.u=null,u.i|=4,n.M=u,u.$=s.$=o.shadowRoot||o,e=o["s-sc"],S(s,u)})(n,l)}catch(e){F(e,n.m)}return null},O=e=>{const t=e.m,n=e.v;64&e.i||(e.i|=64,L(t),e.k(t),n||x()),e.p&&(e.p(),e.p=void 0),512&e.i&&ee((()=>j(e,!1))),e.i&=-517},x=()=>{L(D.documentElement),ee((()=>a(B,"appload",{detail:{namespace:"tttx"}})))},P=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){F(e)}},E=(e,t)=>e&&e.then?e.then(t):t(),L=e=>e.classList.add("hydrated"),N=(e,t,n)=>{if(t.C){const l=Object.entries(t.C),s=e.prototype;if(l.map((([e,[l]])=>{(31&l||2&n&&32&l)&&Object.defineProperty(s,e,{get(){return((e,t)=>H(this).O.get(t))(0,e)},set(n){((e,t,n,l)=>{const s=H(e),c=s.O.get(t),i=s.i,r=s.S;n=((e,t)=>null==e||o(e)?e:4&t?"false"!==e&&(""===e||!!e):1&t?e+"":e)(n,l.C[t][0]),8&i&&void 0!==c||n===c||Number.isNaN(c)&&Number.isNaN(n)||(s.O.set(t,n),r&&2==(18&i)&&j(s,!1))})(this,e,n,t)},configurable:!0,enumerable:!0})})),1&n){const t=new Map;s.attributeChangedCallback=function(e,n,l){G.jmp((()=>{const n=t.get(e);if(this.hasOwnProperty(n))l=this[n],delete this[n];else if(s.hasOwnProperty(n)&&"number"==typeof this[n]&&this[n]==l)return;this[n]=(null!==l||"boolean"!=typeof this[n])&&l}))},e.observedAttributes=l.filter((([e,t])=>15&t[0])).map((([e,n])=>{const l=n[1]||e;return t.set(l,e),l}))}}return e},T=(e,t={})=>{var n;const l=[],o=t.exclude||[],c=B.customElements,i=D.head,r=i.querySelector("meta[charset]"),u=D.createElement("style"),a=[];let f,$=!0;Object.assign(G,t),G.P=new URL(t.resourcesUrl||"./",D.baseURI).href,e.map((e=>{e[1].map((t=>{const n={i:t[0],h:t[1],C:t[2],L:t[3]};n.C=t[2];const s=n.h,i=class extends HTMLElement{constructor(e){super(e),U(e=this,n),1&n.i&&e.attachShadow({mode:"open"})}connectedCallback(){f&&(clearTimeout(f),f=null),$?a.push(this):G.jmp((()=>(e=>{if(0==(1&G.i)){const t=H(e),n=t.g,l=()=>{};if(!(1&t.i)){t.i|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){g(t,t.v=n);break}}n.C&&Object.entries(n.C).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n,l,o)=>{if(0==(32&t.i)){{if(t.i|=32,(o=_(n)).then){const e=()=>{};o=await o,e()}o.isProxied||(N(o,n,2),o.isProxied=!0);const e=()=>{};t.i|=8;try{new o(t)}catch(e){F(e)}t.i&=-9,e()}if(o.style){let e=o.style;const t=d(n);if(!z.has(t)){const l=()=>{};((e,t,n)=>{let l=z.get(e);J&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,z.set(e,l)})(t,e,!!(1&n.i)),l()}}}const s=t.v,c=()=>j(t,!0);s&&s["s-rc"]?s["s-rc"].push(c):c()})(0,t,n)}l()}})(this)))}disconnectedCallback(){G.jmp((()=>{}))}componentOnReady(){return H(this).N}};n.T=e[0],o.includes(s)||c.get(s)||(l.push(s),c.define(s,N(i,n,1)))}))}));{u.innerHTML=l+"{visibility:hidden}.hydrated{visibility:inherit}",u.setAttribute("data-styles","");const e=null!==(n=G.j)&&void 0!==n?n:s(D);null!=e&&u.setAttribute("nonce",e),i.insertBefore(u,r?r.nextSibling:i.firstChild)}$=!1,a.length?a.map((e=>e.connectedCallback())):G.jmp((()=>f=setTimeout(x,30)))},W=e=>G.j=e,A=new WeakMap,H=e=>A.get(e),R=(e,t)=>A.set(t.S=e,t),U=(e,t)=>{const n={i:0,m:e,g:t,O:new Map};return n.N=new Promise((e=>n.k=e)),e["s-p"]=[],e["s-rc"]=[],A.set(e,n)},q=(e,t)=>t in e,F=(e,t)=>(0,console.error)(e,t),V=new Map,_=e=>{const t=e.h.replace(/-/g,"_"),n=e.T,l=V.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(V.set(n,e),e[t])),F)
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},z=new Map,B="undefined"!=typeof window?window:{},D=B.document||{head:{}},G={i:0,P:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},I=e=>Promise.resolve(e),J=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),K=[],Q=[],X=(e,t)=>l=>{e.push(l),n||(n=!0,t&&4&G.i?ee(Z):G.raf(Z))},Y=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){F(e)}e.length=0},Z=()=>{Y(K),Y(Q),(n=K.length>0)&&G.raf(Z)},ee=e=>I().then(e),te=X(Q,!0);export{r as H,T as b,u as c,c as h,I as p,R as r,W as s}