@3t-transform/threeteeui 0.0.23 → 0.0.24

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-a4d9929a.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as n,H as s}from"./p-bbb7dbf7.js";const o=class{constructor(n){t(this,n),this.valueChanged=i(this,"valueChanged",7),this.focusChanged=i(this,"focusChanged",7),this.blurChanged=i(this,"blurChanged",7),this.invalidChanged=i(this,"invalidChanged",7),this.label=void 0,this.showerrormsg=void 0,this.errormsg=void 0,this.iconleft=void 0,this.iconright=void 0,this.inputAutocapitalize=void 0,this.inputAutofocus=void 0,this.inputKeyhint=void 0,this.inputIndex=void 0,this.inputTitle=void 0,this.autocomplete=void 0,this.checked=void 0,this.disabled=void 0,this.max=void 0,this.maxlength=void 0,this.min=void 0,this.minlength=void 0,this.name=void 0,this.pattern=void 0,this.placeholder=void 0,this.readonly=void 0,this.required=void 0,this.step=void 0,this.type="text",this.value=void 0}handleChange(t){const i=t.target;this.value=i.value,this.valueChanged.emit(i.value)}handleFocus(t){this.focusChanged.emit(t.target.value)}handleBlur(t){this.blurChanged.emit(t.target.value)}handleInvalid(t){t.preventDefault(),this.invalidChanged.emit(t.target.value)}render(){const t=["standalone",this.showerrormsg?"invalid":""].join(" ");return n(s,null,n("label",{class:"inputBlock"},this.label,this.required?"":n("span",{class:"optional"}," (optional)"),this.iconleft&&n("div",{class:"icon-left"},n("tttx-icon",{icon:this.iconleft,color:"grey"})),n("input",{class:t,autocapitalize:this.inputAutocapitalize,autofocus:this.inputAutofocus,enterkeyhint:this.inputKeyhint,tabindex:this.inputIndex,title:this.inputTitle,autocomplete:this.autocomplete,checked:this.checked,disabled:this.disabled,max:this.max,maxlength:this.maxlength,min:this.min,minlength:this.minlength,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readonly:this.readonly,required:this.required,step:this.step,type:this.type,value:this.value,onBlur:this.handleBlur.bind(this),onFocus:this.handleFocus.bind(this),onInput:this.handleChange.bind(this),onInvalid:this.handleInvalid.bind(this)}),this.iconright&&n("div",{class:"icon-right"},n("tttx-icon",{icon:this.iconright,color:"grey"})),n("span",{class:["errorBubble",this.showerrormsg&&this.errormsg?"visible":""].join(" ")},n("span",{class:"material-symbols-rounded validationicon"},"warning")," ",this.errormsg)))}};o.style='.material-symbols-rounded.sc-tttx-standalone-input{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24}.material-symbols-rounded.sc-tttx-standalone-input{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.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input{flex-basis:24px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input,.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-left:4px}.icon-right.sc-tttx-standalone-input span.sc-tttx-standalone-input{margin-right:4px}.icon-right.sc-tttx-standalone-input{margin-top:5px;margin-right:4px}.icon-left.sc-tttx-standalone-input{margin-top:5px;margin-left:4px}.iconleft.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-left:4px}.iconright.sc-tttx-standalone-input .input.sc-tttx-standalone-input{padding-right:4px}.focused.sc-tttx-standalone-input{border-color:#1479c6}.errormsg.sc-tttx-standalone-input{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.sc-tttx-standalone-input .validationicon.sc-tttx-standalone-input{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#dc0000}.danger.sc-tttx-standalone-input{color:#dc0000}.optional.sc-tttx-standalone-input{color:#757575;font-weight:normal}label.inputBlock.sc-tttx-standalone-input{display:block;position:relative;line-height:21px}label.sc-tttx-standalone-input{font-weight:500;font-size:16px}input.sc-tttx-standalone-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].sc-tttx-standalone-input{background:white;display:block;min-width:calc(100% - 18px);line-height:37px}input.invalid.sc-tttx-standalone-input:invalid,input.standalone.invalid.sc-tttx-standalone-input{border:1px solid #dc0000}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input{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.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input:not(.visible){visibility:hidden}input.sc-tttx-standalone-input~.errorBubble.sc-tttx-standalone-input span.sc-tttx-standalone-input{color:#dc0000;font-size:16px;margin-right:4px;height:16px}input.invalid.sc-tttx-standalone-input:invalid~.errorBubble.sc-tttx-standalone-input{position:relative;font-size:14px;font-weight:normal;width:100%;font-family:"Roboto", sans-serif;color:#dc0000;visibility:visible}input.sc-tttx-standalone-input:focus{border-color:#1479c6}.sc-tttx-standalone-input-h{display:block}';export{o as tttx_standalone_input}

package/dist/tttx/p-ad637dde.entry.js

@@ -1 +0,0 @@
-import{r as t,h as l,H as i}from"./p-bbb7dbf7.js";const d=class{constructor(l){t(this,l),this.keyvalues=void 0,this.horizontal=void 0}renderSingleElements(t){const i=Object.keys(t),d=[];for(let o=0;o<i.length;o++)this.horizontal?d.push(l("div",null,l("dt",null,i[o]),l("dd",null,t[i[o]]))):(d.push(l("dt",null,i[o])),d.push(l("dd",null,t[i[o]])));return d}renderArrayElements(t){const i=[];for(let d=0;d<t.length;d++){const o=t[d];this.horizontal?i.push(l("div",null,l("dt",{class:"mainTitle"},o.title),l("dt",{class:"subTitle"},o.subTitle),l("dd",null,o.data))):(i.push(l("dt",{class:"mainTitle"},o.title)),i.push(l("dt",{class:"subTitle"},o.subTitle)),i.push(l("dd",null,o.data)))}return i}render(){if(!this.keyvalues)return;let t,d;return t="string"==typeof this.keyvalues?JSON.parse(this.keyvalues):this.keyvalues,d=Array.isArray(t)?this.renderArrayElements(t):this.renderSingleElements(t),l(i,null,l("dl",{class:this.horizontal?"horizontal":null},d))}};d.style=':host{display:block}dl{margin:0;padding:0;font-family:"Roboto", sans-serif;cursor:default}dt{font-weight:400;line-height:21px;font-size:16px}dt,dt.subTitle{color:#757575}dt.mainTitle{color:#212121}dd{margin:0;font-weight:400;font-size:16px;color:#212121;line-height:21px;margin-bottom:18px}dl.horizontal{display:flex;flex-direction:row;width:100%}dl.horizontal div{flex-grow:1}@media (max-width: 769px){dl.horizontal{flex-wrap:wrap}dl.horizontal div{width:50%}}@media (max-width: 600px){dl.horizontal div{width:100%}}';export{d as tttx_keyvalue_block}

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}