@coderundebug/ui-web/ui-code.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as s}from"./ui-tools.js";export class UiCode extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiCode.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiCode.uiCssStyleSheet],this.t=this.shadowRoot.getElementById("formatted"),this.o=this.o.bind(this),this.i=new MutationObserver(this.o),this.i.observe(this,{childList:!0})}connectedCallback(){!1===this.hasAttribute("src")&&(this.l=this.p(),this.u())}async attributeChangedCallback(s,a,t){if("src"===s){const s=await fetch(t);this.l=await s.text(),this.u()}}static get observedAttributes(){return["src"]}o(s,a){this.l=this.p(),this.u()}p(){let s;for(let a=0;a<this.childNodes.length;a++){const t=this.childNodes[a];if(t.nodeType===Node.COMMENT_NODE){s=t.nodeValue;break}}if(!s)return"";s=s.replace(UiCode.m,"\n"),s=s.replace("\r","\n"),s=s.replace("\t","  ");const a=s.split("\n");0!==a.length&&0===a[0].trim().length&&a.splice(0,1),0!==a.length&&0===a[a.length-1].trim().length&&a.splice(a.length-1,1);let t=-1;if(a.forEach((s=>{if(!s)return;if(!s.trimStart())return;let a=0;for(let t=0;t<s.length&&" "===s.charAt(t);t++)a++;-1!==t?a<t&&(t=a):t=a})),t<=0)return a.join("\n");const e=[];return a.forEach((s=>{const a=s.substring(t);e.push(a)})),e.join("\n")}u(){let s;s=!0===this.hasAttribute("html")?UiCode.v(this.l):!0===this.hasAttribute("css")?UiCode.h(this.l):!0===this.hasAttribute("javascript")?UiCode.j(this.l):!0===this.hasAttribute("sql")?UiCode.C(this.l):!0===this.hasAttribute("json")?UiCode.U(this.l):UiCode.k(this.l),this.t.innerHTML=s}static v(s){return s.replace(UiCode.q,(function(s,a,t){return a?'<span class="html-comment">'+UiCode.k(a)+"</span>":t?UiCode._(t):s}))}static _(s){return s.replace(UiCode.L,(function(s,a,t,e,o,c,r){return a&&1===a.length?'<span class="html-tag-open">&lt;</span>':a&&2===a.length?'<span class="html-tag-open">&lt;/</span>':t?'<span class="html-tag-close">&gt;</span>':e?'<span class="html-tag-name">'+UiCode.k(e)+"</span>":o?'<span class="html-attribute">'+o+"</span>":c?'<span class="html-value">'+UiCode.k(c)+"</span>":r?'<span class="html-value">'+UiCode.k(r)+"</span>":s}))}static h(s){return s.replace(UiCode.R,(function(s,a,t,e,o,c,r,n,i,l){return a?'<span class="css-comment">'+UiCode.k(a)+"</span>":t?'<span class="css-property">'+t+"</span>":e?UiCode.M(e):o?'<span class="css-class">'+o+"</span>":c?'<span class="css-class">'+c+"</span>":r?'<span class="css-id">'+r+"</span>":n?'<span class="css-tag">'+n+"</span>":i?'<span class="css-attribute">'+i+"</span>":l?'<span class="css-text">'+UiCode.k(l)+"</span>":s}))}static M(s){return s.replace(UiCode.S,(function(s,a,t,e,o,c,r){return a?'<span class="css-function">'+a+"</span>":t?'<span class="css-color">'+t+"</span>":e?'<span class="css-variable">'+e+"</span>":o?'<span class="css-variable">'+o+"</span>":c?'<span class="css-variable">'+c+"</span>":r?'<span class="css-constant">'+r+"</span>":s}))}static j(s){return s.replace(UiCode.N,(function(s,a,t,e,o,c,r,n,i,l,p,d,u){return a?'<span class="javascript-comment">'+UiCode.k(a)+"</span>":t?'<span class="javascript-comment">'+UiCode.k(t)+"</span>":e?'<span class="javascript-keyword" keyword="'+e+'">'+e+"</span>":o?'<span class="javascript-text">'+UiCode.k(o)+"</span>":c?'<span class="javascript-text">'+UiCode.k(c)+"</span>":r?'<span class="javascript-text">'+UiCode.k(r)+"</span>":n?'<span class="javascript-numeric">'+n+"</span>":i?'<span class="javascript-numeric">'+i+"</span>":l?'<span class="javascript-function">'+l+"</span>":p?'<span class="javascript-function">'+p+"</span>":d?'<span class="javascript-property">'+d+"</span>":u?'<span class="javascript-class">'+u+"</span>":s}))}static C(s){return s.replace(UiCode.T,(function(s,a,t,e,o,c,r,n,i,l,p,d,u){return a?'<span class="sql-comment">'+UiCode.k(a)+"</span>":t?'<span class="sql-comment">'+UiCode.k(t)+"</span>":e?'<span class="sql-comment">'+UiCode.k(e)+"</span>":o?'<span class="sql-command">'+o+"</span>":c?'<span class="sql-constant">'+c+"</span>":r?'<span class="sql-command">'+r+"</span>":n?'<span class="sql-identifier">'+n+"</span>":i?'<span class="sql-text">'+UiCode.k(i)+"</span>":l?'<span class="sql-text">'+UiCode.k(l)+"</span>":p?'<span class="sql-text">'+UiCode.k(p)+"</span>":d?'<span class="sql-numeric">'+d+"</span>":u?'<span class="sql-operator">'+u+"</span>":s}))}static U(s){return s.replace(UiCode.$,(function(s,a,t,e,o,c,r,n,i){return a?'<span class="json-property">'+a+"</span>":t?'<span class="json-text">'+UiCode.k(t)+"</span>":e?'<span class="json-literal">'+e+"</span>":o?'<span class="json-constant">'+o+"</span>":c?'<span class="json-colon">:</span>':r?'<span class="json-comma">,</span>':n?'<span class="json-curly-brackets">'+n+"</span>":i?'<span class="json-square-brackets">'+i+"</span>":s}))}static k(s){return s.replace(UiCode.A,(function(s,a){switch(a){case"<":return"&lt;";case">":return"&gt;";case"&":return"&amp;"}return s}))}static m=new RegExp("\r\n","g");static A=RegExp("(?<htmlEscape><|>|&)","g");static q=new RegExp("(?<comment>\x3c!--[\\s\\S]*?--\x3e)|(?<tag><[\\w|\\/][\\s\\S]*?>)","g");static L=new RegExp("(?<tagOpen>\\</?)|(?<tagClose>\\>)|(?<=\\</?)(?<tagName>[\\w|!|\\/][\\w-]*)|(?<=\\s)(?<attributeName>[\\w\\-_]+)(?==|\\s|\\>)|(?<==)(?<attributeSingleValue>['][^']+['])|(?<==)(?<attributeDoubleValue>[\"][^\"]+[\"])","g");static R=new RegExp("(?<commentBlock>\\/\\*[^\\/]*\\/)|(?<=\\s|^)(?<property>[\\w|-][\\w|-]*)(?=:\\s)|(?<=:\\s*)(?<value>[^;]*)(?=;)|(?<selectorClass>\\.[\\w\\d-]+)(?=\\s|\\.|#|\\[)|(?<selectorPseudoClass>\\::?[\\w\\d-]+)|(?<selectorId>\\#[\\w\\d-]+)(?=\\s|\\.|#|\\[)|(?<=^|\\s)(?<selectorTag>[\\w\\d-]+)(?=\\s*[{#\\[\\.\\S])|(?<=\\[)(?<selectorAttribute>[\\w\\d-]+)(?==|\\])|(?<text>[\"|'][\\w\\d-]+[\"|'])","g");static S=new RegExp("(?<functionCall>[\\w-]+)(?=\\()|(?<hexColor>#[\\w\\d]+)|(?<=\\d)(?<numericUnit>%|cm|mm|in|px|pt|rem|em|ex|vh|vw|vmin|vmax|vi|vb|lh|lvw|lvh|lvi|lvb|lvmin|lvmax|svw|svh|svi|svb|svmin|svmax|cqw|cqh|cqi|cqb|cqmin|cqmax)|(?<numeric>-?\\d+\\.\\d+[e|E][+|-]\\d+|-?\\d+\\.\\d+|-?\\d+)|(?<variable>--[\\w\\d-]+)|(?<constant>[\\w][\\w-\\d]*)","g");static N=RegExp("(?<commentBlock>\\/\\*[^\\/]*\\/)|(?<commentLine>\\/\\/.*)(?=\\r|\\n)|(?<=^|\\W)(?<keyword>abstract|arguments|async|await|boolean|break|byte|case|catch|char|class|const|constructor|continue|debugger|default|delete|do|double|else|enum|eval|export|extends|false|final|finally|float|for|from|function|get|goto|if|implements|import|in|instanceof|int|interface|let|long|native|new|null|package|private|protected|public|return|set|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|var|void|volatile|while|with|yield)(?=$|\\W)|(?<stringLiteralSingle>'(?:[^'\\\\]|\\\\.)*')|(?<stringLiteralDouble>\"(?:[^\"\\\\]|\\\\.)*\")|(?<stringLiteralTemplate>\\`[^\\`]*\\`)|(?<=^|\\s|\\()(?<numericHexLiteral>-?0[x|X][\\d|a|b|c|d|e|f|A|B|C|D|E|F|_]+)|(?<=^|\\s|\\()(?<numericLiteral>-?\\d+\\.\\d+[e|E][+|-]\\d+|-?\\d+\\.\\d+|-?\\d+)|(?<=\\.)(?<functionName>[\\w\\-_\\$]+)(?=\\()|(?<=\\s)(?<functionDeclare>[\\w\\d]+)(?=\\()|(?<=\\.)(?<property>[\\w\\d]+)(?=\\s|\\.|\\))|(?<=^|\\W)(?<className>[A-Z][\\w\\d\\-_\\$]+)(?=$|\\W)","g");static T=RegExp("(?<commentBlock>\\/\\*[^\\/]*\\/)|(?<commentLineHash>#.*)(?=\\r|\\n)|(?<commentLineDash>--.*)(?=\\r|\\n)|(?<=\\s)(?<notNull>NOT NULL)(?=\\s|,|;)|(?<=^|\\s|,|=|<|>|\\()(?<constant>true|TRUE|false|FALSE|null|NULL)(?=\\s|$|\\)|;|,)|(?<=^|\\s)(?<command>[A-Z]*)(?=\\s|$|\\(|;|,)|(?<=^|\\s|\\()(?<identifier>[a-z_][a-z\\d_]*)(?=\\s|$|\\(|;|,|\\)|=|>|<|!)|(?<stringLiteralSingle>'(?:[^'\\\\]|\\\\.)*')|(?<stringLiteralDouble>\"(?:[^\"\\\\]|\\\\.)*\")|(?<stringLiteralTemplate>\\`[^\\`]*\\`)|(?<=^|\\s|\\(|=|>|<)(?<numericLiteral>-?\\d+\\.\\d+[e|E][+|-]\\d+|-?\\d+\\.\\d+|-?\\d+)|(?<operator>==|=|!=|<>|>=|<=|>|<)","g");static $=RegExp('(?<property>"[^"]*")(?=\\s*:)|(?<stringLiteral>"(?:[^"\\\\]|\\\\.)*")|(?<=\\s)(?<numericLiteral>-?\\d+\\.\\d+[e|E][+|-]\\d+|-?\\d+\\.\\d+|-?\\d+)|(?<=\\s)(?<constant>true|false|null)|(?<colon>:)|(?<comma>,)|(?<curlyBrackets>{|})|(?<squareBrackets>\\[|\\])',"g")}UiCode.uiCss=':host{display:block;direction:ltr;--ui-code-default-font-family:SFMono-Medium, "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Consolas, \'Courier New\', Courier, monospace;font-family:var(--ui-code-font-family, SFMono-Medium, "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Consolas, \'Courier New\', Courier, monospace);font-size:var(--ui-code-font-size, var(--ui-font-size-normal, 16px));background:var(--ui-code-background, var(--ui-midground, hsl(0 0% 90% / 1)));}.html-comment{color:var(--ui-code-html-comment, #008000);}.html-tag-open, .html-tag-close{color:var(--ui-code-html-tag-bracket, #900000);}.html-tag-name{color:var(--ui-code-html-tag-name, #900000);}.html-attribute{color:var(--ui-code-html-attribute, #e50000);}.html-value{color:var(--ui-code-html-value, #0000ff);}.css-comment{color:var(--ui-code-css-comment, #008000);}.css-class{color:var(--ui-code-css-class, #900000);}.css-id{color:var(--ui-code-css-id, #900000);}.css-tag{color:var(--ui-code-css-tag, #900000);}.css-attribute{color:var(--ui-code-css-attribute, #e50000);}.css-text{color:var(--ui-code-css-text, #a31515);}.css-function{color:var(--ui-code-css-function, #a45e26);}.css-property{color:var(--ui-code-css-property, #e50000);}.css-value{color:var(--ui-code-css-value, #0451a5);}.css-color{color:var(--ui-code-css-value, #0451a5);}.css-variable{color:var(--ui-code-css-variable, #098658);}.css-constant{color:var(--ui-code-css-constant, #0451a5);}.javascript-comment{color:var(--ui-code-javascript-comment, #008000);}.javascript-keyword{color:var(--ui-code-javascript-keyword, #0000ff);}.javascript-keyword[keyword="export"], .javascript-keyword[keyword="import"], .javascript-keyword[keyword="from"], .javascript-keyword[keyword="default"], .javascript-keyword[keyword="while"], .javascript-keyword[keyword="if"], .javascript-keyword[keyword="else"], .javascript-keyword[keyword="break"], .javascript-keyword[keyword="continue"], .javascript-keyword[keyword="return"]{color:var(--ui-code-javascript-declaration, #b700db);}.javascript-property{color:var(--ui-code-javascript-property, #001080);}.javascript-class{color:var(--ui-code-javascript-class, #267f99);}.javascript-function{color:var(--ui-code-javascript-function, #795e26);}.javascript-text{color:var(--ui-code-javascript-text, #a31515);}.javascript-numeric{color:var(--ui-code-javascript-numeric, #098658);}.sql-comment{color:var(--ui-code-sql-comment, #008000);}.sql-command{color:var(--ui-code-sql-command, #0000ff);}.sql-text{color:var(--ui-code-sql-text, #ac1515);}.sql-numeric{color:var(--ui-code-sql-numeric, #098658);}.sql-identifier{color:var(--ui-code-sql-identifier, #3b3b3b);}.sql-constant{color:var(--ui-code-sql-constant, #098658);}.sql-operator{color:var(--ui-code-sql-operator, #000000);}.json-property{color:var(--ui-code-json-property, #0451a5);}.json-text{color:var(--ui-code-json-text, #a31515);}.json-literal{color:var(--ui-code-json-literal, #098658);}.json-constant{color:var(--ui-code-json-constant, #0000ff);}.json-colon{color:var(--ui-code-json-colon, #3b3b3b);}.json-comma{color:var(--ui-code-json-comma, #3b3b3b);}.json-curly-brackets{color:var(--ui-code-json-curly-brackets, #3b3b3b);}.json-square-brackets{color:var(--ui-code-json-square-brackets, #3b3b3b);}pre{margin:0;padding:0.5rem;color:var(--ui-code-foreground, black);font-family:inherit;overflow-x:auto;}',UiCode.uiHtml='<pre id="formatted"></pre>',s.createUi(UiCode,"ui-code",import.meta.url);