@covalent/components 8.15.0-beta.1 → 8.15.0-beta.11

package/cell/cell.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
 import '../code-editor/code-editor';
+import '../code-snippet/code-snippet';
 import '../icon-button/icon-button';
 import '../typography/typography';
 declare global {
@@ -20,6 +21,10 @@ export declare class CovalentCell extends LitElement {
      * Language of the code
      */
     language: string;
+    /**
+     * Whether the cell is loading
+     */
+    loading: boolean;
     /**
      * Whether the cell is selected
      */
@@ -45,6 +50,12 @@ export declare class CovalentCell extends LitElement {
         lineDecorationsWidth: number;
         lineNumbersMinChars: number;
         renderLineHighlight: string;
+        overviewRulerLanes: number;
+        hideCursorInOverviewRuler: boolean;
+        scrollbar: {
+            alwaysConsumeMouseWheel: boolean;
+            vertical: string;
+        };
     };
     static styles: import("lit").CSSResult[];
     handleCodeChange(e: CustomEvent): void;
@@ -52,6 +63,7 @@ export declare class CovalentCell extends LitElement {
     setEditorFocus(setFocus: boolean): void;
     protected updated(changedProperties: PropertyValues): void;
     renderEditor(): import("lit-html").TemplateResult<1>;
+    renderExecutionCount(): import("lit-html").TemplateResult<1>;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 export default CovalentCell;

package/cell/cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../../../libs/components/src/cell/cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAIvE,OAAO,4BAA4B,CAAC;AACpC,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAElC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,YAAY,CAAC;KACzB;CACF;AAMD,qBACa,YAAa,SAAQ,UAAU;IAC1C;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,aAAa,SAAK;IAElB;;OAEG;IAEH,UAAU,CAAC,sBAAQ;IAEnB,cAAc,UAAS;IAEvB,aAAa;;;;;;;;;;;;MAUX;IAEF,OAAgB,MAAM,4BAIpB;IAEF,gBAAgB,CAAC,CAAC,EAAE,WAAW;IAI/B,SAAS;IAUT,cAAc,CAAC,QAAQ,EAAE,OAAO;IAKhC,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAUnD,YAAY;IAqBZ,SAAS,CAAC,MAAM;CAwBjB;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../../../libs/components/src/cell/cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAKvE,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAElC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,YAAY,CAAC;KACzB;CACF;AAMD,qBACa,YAAa,SAAQ,UAAU;IAC1C;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,aAAa,SAAK;IAElB;;OAEG;IAEH,UAAU,CAAC,sBAAQ;IAEnB,cAAc,UAAS;IAEvB,aAAa;;;;;;;;;;;;;;;;;;MAgBX;IAEF,OAAgB,MAAM,4BAIpB;IAEF,gBAAgB,CAAC,CAAC,EAAE,WAAW;IAI/B,SAAS;IAUT,cAAc,CAAC,QAAQ,EAAE,OAAO;IAKhC,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAgBnD,YAAY;IA2BZ,oBAAoB;IAYpB,SAAS,CAAC,MAAM;CAgBjB;AAED,eAAe,YAAY,CAAC"}

package/cell.js

@@ -1,25 +1,25 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./query-assigned-elements-f623705d.js"),l=require("./property-57f6f6fe.js"),a=require("./class-map-0a4c6ca9.js");require("./code-editor-4cce5e5d.js");require("./icon-button.js");require("./typography.js");require("./directive-1186bc23.js");require("./async-directive-4a34f75e.js");require("./directive-helpers-0ce1f995.js");require("./tslib.es6-98719205.js");require("./ripple-handlers-9fb4a31a.js");require("./base-element-58a3f9ea.js");require("./utils-a8190a39.js");require("./state-0974a8e5.js");require("./query-680f1868.js");require("./style-map-a135c6ab.js");require("./aria-property-849c8816.js");require("./event-options-3f5eb195.js");require("./if-defined-f1c45245.js");const u=`:host{--mdc-icon-button-size: 24px;font-family:var(--mdc-typography-body1-font-family);height:100%;width:100%}.selection-indicator{background-color:var(--cv-theme-primary);border-radius:2px;margin-top:2px;visibility:hidden;width:8px}.timesExecuted{color:var(--cv-theme-outline-variant);min-height:var(--mdc-icon-button-size);min-width:var(--mdc-icon-button-size)}.cell{box-sizing:border-box;display:flex;justify-content:space-between}.cell:hover .selection-indicator,.cell.focused .selection-indicator,.cell.selected .selection-indicator{visibility:visible}.cell:hover .timesExecuted,.cell.focused .timesExecuted,.cell.selected .timesExecuted{color:var(--cv-theme-primary)}.cellWrapper{display:flex;flex-direction:column;width:95%}.cellCodeWrapper{align-items:flex-start;display:flex;justify-content:space-between}.cellCodeWrapper .editor-output-wrapper{width:calc(95% - 8px)}.output{margin:.5rem .25rem}
-`;var p=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(n,e,i,o)=>{for(var r=o>1?void 0:o?h(e,i):e,d=n.length-1,c;d>=0;d--)(c=n[d])&&(r=(o?c(e,i,r):c(r))||r);return o&&r&&p(e,i,r),r};exports.CovalentCell=class extends t.s{constructor(){super(...arguments),this.code="",this.language="",this.selected=!1,this.timesExecuted=0,this.showEditor=!0,this._editorFocused=!1,this.editorOptions={minimap:{enabled:!1},wordWrap:"on",fontSize:"14px",glyphMargin:!1,folding:!1,lineNumbers:"off",lineDecorationsWidth:0,lineNumbersMinChars:0,renderLineHighlight:"none"}}handleCodeChange(e){this.code=e.detail.code}handleRun(){this.dispatchEvent(new CustomEvent("cell-run-code",{detail:{index:this.index,code:this.code},bubbles:!0,composed:!0}))}setEditorFocus(e){this._editorFocused=e,this.requestUpdate()}updated(e){var i;if(e.has("code")||e.has("language")){const o=(i=this.shadowRoot)==null?void 0:i.querySelector("cv-code-editor");o&&(o.code=this.code,o.language=this.language)}}renderEditor(){const e=t.x`<cv-code-editor
-      @code-change="${this.handleCodeChange}"
-      @editor-focus="${()=>this.setEditorFocus(!0)}"
-      @editor-blur="${()=>this.setEditorFocus(!1)}"
-      .code="${this.code}"
-      .language="${this.language}"
-      .options="${this.editorOptions}"
-    ></cv-code-editor>`,i=t.x`<cv-typography class="output" scale="body1">
-      <slot name="output"></slot>
-    </cv-typography>`;return t.x`${this.showEditor?e:""}${!this.showEditor&&this.language==="markdown"||this.language!=="markdown"?i:""}`}render(){const e={cell:!0,selected:this.selected,focused:this._editorFocused};return t.x`
-      <div class="${a.o(e)}">
-        <span class="selection-indicator"></span>
-        <div class="cellWrapper">
-          <div class="cellCodeWrapper">
-            <span class="timesExecuted">
-              ${this.showEditor?t.x`[${this.timesExecuted===0?"  ":this.timesExecuted}]:`:""}
-            </span>
-            <div class="editor-output-wrapper">${this.renderEditor()}</div>
-          </div>
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./query-assigned-elements-f623705d.js"),l=require("./property-57f6f6fe.js"),c=require("./class-map-0a4c6ca9.js");require("./code-editor-3a09cbf1.js");require("./code-snippet.js");require("./icon-button.js");require("./typography.js");require("./directive-1186bc23.js");require("./async-directive-4a34f75e.js");require("./directive-helpers-0ce1f995.js");require("./query-assigned-nodes-99eae71d.js");require("./_commonjsHelpers-2367a3a2.js");require("./tslib.es6-98719205.js");require("./ripple-handlers-9fb4a31a.js");require("./base-element-58a3f9ea.js");require("./utils-a8190a39.js");require("./state-0974a8e5.js");require("./query-680f1868.js");require("./style-map-a135c6ab.js");require("./aria-property-849c8816.js");require("./event-options-3f5eb195.js");require("./if-defined-f1c45245.js");const u=`:host{--mdc-icon-button-size: 24px;font-family:var(--mdc-typography-body1-font-family);width:100%}cv-code-snippet{background-color:var(--cv-theme-surface-container-high);border-radius:0;box-sizing:border-box;min-height:21px;padding:0 .25rem}cv-code-snippet::part(code){font-size:var(--mdc-typography-body2-font-size);line-height:var(--mdc-typography-body2-line-height);padding:1px 0;white-space:pre-wrap}cv-code-editor{margin-top:-1px}.selectionIndicator{background-color:var(--cv-theme-primary);border-radius:2px;margin-top:2px;visibility:hidden;min-width:8px}.timesExecuted{color:var(--cv-theme-outline-variant);display:inline-flex;font-family:var(--mdc-typography-body2-font-family);font-size:var(--mdc-typography-body2-font-size);justify-content:end;line-height:var(--mdc-typography-body2-line-height);padding:0 .75rem;min-width:8%;max-width:8%}.timesExecuted .executionCount{box-sizing:border-box;display:inline-block;max-width:70%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timesExecuted .loading{font-size:var(--mdc-typography-headline6-font-size);position:relative;top:.275rem}.cell{box-sizing:border-box;display:flex;justify-content:space-between}.cell:hover .selectionIndicator,.cell.focused .selectionIndicator,.cell.selected .selectionIndicator{visibility:visible}.cell:hover .timesExecuted,.cell.focused .timesExecuted,.cell.selected .timesExecuted{color:var(--cv-theme-primary)}.cellWrapper{display:flex;flex-direction:column;width:100%}.cellCodeWrapper{align-items:flex-start;display:flex;justify-content:space-between;width:calc(100% - 8px)}.cellOutputWrapper{max-width:90%;min-width:90%}.output{margin:.75rem .25rem .5rem;max-width:100%}
+`;var p=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(d,e,o,s)=>{for(var i=s>1?void 0:s?h(e,o):e,n=d.length-1,a;n>=0;n--)(a=d[n])&&(i=(s?a(e,o,i):a(i))||i);return s&&i&&p(e,o,i),i};exports.CovalentCell=class extends t.s{constructor(){super(...arguments),this.code="",this.language="",this.loading=!1,this.selected=!1,this.timesExecuted=0,this.showEditor=!0,this._editorFocused=!1,this.editorOptions={minimap:{enabled:!1},wordWrap:"on",fontSize:"14px",glyphMargin:!1,folding:!1,lineNumbers:"off",lineDecorationsWidth:0,lineNumbersMinChars:0,renderLineHighlight:"none",overviewRulerLanes:0,hideCursorInOverviewRuler:!0,scrollbar:{alwaysConsumeMouseWheel:!1,vertical:"hidden"}}}handleCodeChange(e){this.code=e.detail.code}handleRun(){this.dispatchEvent(new CustomEvent("cell-run-code",{detail:{index:this.index,code:this.code},bubbles:!0,composed:!0}))}setEditorFocus(e){this._editorFocused=e,this.requestUpdate()}updated(e){var o,s;if(e.has("code")||e.has("language")){const i=(o=this.shadowRoot)==null?void 0:o.querySelector("cv-code-editor");if(i)i.code=this.code,i.language=this.language;else{const n=(s=this.shadowRoot)==null?void 0:s.querySelector("cv-code-snippet");n&&!this.selected&&n.highlight()}}super.updated(e)}renderEditor(){const e=this.selected?t.x`<cv-code-editor
+          @code-change="${this.handleCodeChange}"
+          @editor-focus="${()=>this.setEditorFocus(!0)}"
+          @editor-blur="${()=>this.setEditorFocus(!1)}"
+          .code="${this.code}"
+          .language="${this.language}"
+          .options="${this.editorOptions}"
+        ></cv-code-editor>`:t.x`<cv-code-snippet hideHeader .language="${this.language}"
+          >${this.code}</cv-code-snippet
+        >`,o=t.x`<slot name="error"></slot>
+      <cv-typography class="output" scale="body1">
+        <slot name="output"></slot>
+        <slot name="input"></slot>
+      </cv-typography>`;return t.x`${this.showEditor?e:""}${!this.showEditor&&this.language==="markdown"||this.language!=="markdown"?o:""}`}renderExecutionCount(){let e=t.x`&nbsp;`;return this.showEditor&&(this.loading?e=t.x`<span class="loading">*</span>`:this.timesExecuted&&(e=t.x`${this.timesExecuted}`)),t.x`[<span class="executionCount">${e}</span>] :`}render(){const e={cell:!0,selected:this.selected,focused:this._editorFocused};return t.x`
+      <div class="${c.o(e)}">
+        <span class="selectionIndicator"></span>
+        <div class="cellCodeWrapper">
+          <span class="timesExecuted">${this.renderExecutionCount()}</span>
+          <div class="cellOutputWrapper">${this.renderEditor()}</div>
         </div>
       </div>
     `}};exports.CovalentCell.styles=[t.i`
       ${t.r(u)}
-    `];s([l.n({type:Number})],exports.CovalentCell.prototype,"index",2);s([l.n({type:String})],exports.CovalentCell.prototype,"code",2);s([l.n({type:String})],exports.CovalentCell.prototype,"language",2);s([l.n({type:Boolean,reflect:!0})],exports.CovalentCell.prototype,"selected",2);s([l.n({type:Number})],exports.CovalentCell.prototype,"timesExecuted",2);s([l.n({type:Boolean,reflect:!0})],exports.CovalentCell.prototype,"showEditor",2);exports.CovalentCell=s([t.e("cv-cell")],exports.CovalentCell);const v=exports.CovalentCell;exports.default=v;
+    `];r([l.n({type:Number})],exports.CovalentCell.prototype,"index",2);r([l.n({type:String})],exports.CovalentCell.prototype,"code",2);r([l.n({type:String})],exports.CovalentCell.prototype,"language",2);r([l.n({type:Boolean,reflect:!0})],exports.CovalentCell.prototype,"loading",2);r([l.n({type:Boolean,reflect:!0})],exports.CovalentCell.prototype,"selected",2);r([l.n({type:Number})],exports.CovalentCell.prototype,"timesExecuted",2);r([l.n({type:Boolean,reflect:!0})],exports.CovalentCell.prototype,"showEditor",2);exports.CovalentCell=r([t.e("cv-cell")],exports.CovalentCell);const v=exports.CovalentCell;exports.default=v;

package/cell.mjs

@@ -1,12 +1,15 @@
-import { i as p, r as u, s as h, x as c, e as m } from "./query-assigned-elements-4a39219d.mjs";
-import { n as d } from "./property-9b6ea53b.mjs";
-import { o as v } from "./class-map-6e504a9a.mjs";
-import "./code-editor-383a8fae.mjs";
+import { i as p, r as h, s as u, x as r, e as m } from "./query-assigned-elements-4a39219d.mjs";
+import { n } from "./property-9b6ea53b.mjs";
+import { o as g } from "./class-map-6e504a9a.mjs";
+import "./code-editor-ce557bd5.mjs";
+import "./code-snippet.mjs";
 import "./icon-button.mjs";
 import "./typography.mjs";
 import "./directive-daf4e9b6.mjs";
 import "./async-directive-99a01ec7.mjs";
 import "./directive-helpers-e3ea6592.mjs";
+import "./query-assigned-nodes-df691e78.mjs";
+import "./_commonjsHelpers-2f131a27.mjs";
 import "./tslib.es6-c4b0f3b1.mjs";
 import "./ripple-handlers-8883e893.mjs";
 import "./base-element-acf30176.mjs";
@@ -17,16 +20,16 @@ import "./style-map-e7ec6d41.mjs";
 import "./aria-property-fa2717fe.mjs";
 import "./event-options-78d6cf94.mjs";
 import "./if-defined-c367f208.mjs";
-const f = `:host{--mdc-icon-button-size: 24px;font-family:var(--mdc-typography-body1-font-family);height:100%;width:100%}.selection-indicator{background-color:var(--cv-theme-primary);border-radius:2px;margin-top:2px;visibility:hidden;width:8px}.timesExecuted{color:var(--cv-theme-outline-variant);min-height:var(--mdc-icon-button-size);min-width:var(--mdc-icon-button-size)}.cell{box-sizing:border-box;display:flex;justify-content:space-between}.cell:hover .selection-indicator,.cell.focused .selection-indicator,.cell.selected .selection-indicator{visibility:visible}.cell:hover .timesExecuted,.cell.focused .timesExecuted,.cell.selected .timesExecuted{color:var(--cv-theme-primary)}.cellWrapper{display:flex;flex-direction:column;width:95%}.cellCodeWrapper{align-items:flex-start;display:flex;justify-content:space-between}.cellCodeWrapper .editor-output-wrapper{width:calc(95% - 8px)}.output{margin:.5rem .25rem}
+const y = `:host{--mdc-icon-button-size: 24px;font-family:var(--mdc-typography-body1-font-family);width:100%}cv-code-snippet{background-color:var(--cv-theme-surface-container-high);border-radius:0;box-sizing:border-box;min-height:21px;padding:0 .25rem}cv-code-snippet::part(code){font-size:var(--mdc-typography-body2-font-size);line-height:var(--mdc-typography-body2-line-height);padding:1px 0;white-space:pre-wrap}cv-code-editor{margin-top:-1px}.selectionIndicator{background-color:var(--cv-theme-primary);border-radius:2px;margin-top:2px;visibility:hidden;min-width:8px}.timesExecuted{color:var(--cv-theme-outline-variant);display:inline-flex;font-family:var(--mdc-typography-body2-font-family);font-size:var(--mdc-typography-body2-font-size);justify-content:end;line-height:var(--mdc-typography-body2-line-height);padding:0 .75rem;min-width:8%;max-width:8%}.timesExecuted .executionCount{box-sizing:border-box;display:inline-block;max-width:70%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timesExecuted .loading{font-size:var(--mdc-typography-headline6-font-size);position:relative;top:.275rem}.cell{box-sizing:border-box;display:flex;justify-content:space-between}.cell:hover .selectionIndicator,.cell.focused .selectionIndicator,.cell.selected .selectionIndicator{visibility:visible}.cell:hover .timesExecuted,.cell.focused .timesExecuted,.cell.selected .timesExecuted{color:var(--cv-theme-primary)}.cellWrapper{display:flex;flex-direction:column;width:100%}.cellCodeWrapper{align-items:flex-start;display:flex;justify-content:space-between;width:calc(100% - 8px)}.cellOutputWrapper{max-width:90%;min-width:90%}.output{margin:.75rem .25rem .5rem;max-width:100%}
 `;
-var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (e, o, i, l) => {
-  for (var r = l > 1 ? void 0 : l ? y(o, i) : o, a = e.length - 1, n; a >= 0; a--)
-    (n = e[a]) && (r = (l ? n(o, i, r) : n(r)) || r);
-  return l && r && g(o, i, r), r;
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, d = (e, i, l, s) => {
+  for (var o = s > 1 ? void 0 : s ? v(i, l) : i, a = e.length - 1, c; a >= 0; a--)
+    (c = e[a]) && (o = (s ? c(i, l, o) : c(o)) || o);
+  return s && o && f(i, l, o), o;
 };
-let t = class extends h {
+let t = class extends u {
   constructor() {
-    super(...arguments), this.code = "", this.language = "", this.selected = !1, this.timesExecuted = 0, this.showEditor = !0, this._editorFocused = !1, this.editorOptions = {
+    super(...arguments), this.code = "", this.language = "", this.loading = !1, this.selected = !1, this.timesExecuted = 0, this.showEditor = !0, this._editorFocused = !1, this.editorOptions = {
       minimap: { enabled: !1 },
       // Disable minimap to save space
       wordWrap: "on",
@@ -37,7 +40,13 @@ let t = class extends h {
       lineNumbers: "off",
       lineDecorationsWidth: 0,
       lineNumbersMinChars: 0,
-      renderLineHighlight: "none"
+      renderLineHighlight: "none",
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: !0,
+      scrollbar: {
+        alwaysConsumeMouseWheel: !1,
+        vertical: "hidden"
+      }
     };
   }
   handleCodeChange(e) {
@@ -56,24 +65,38 @@ let t = class extends h {
     this._editorFocused = e, this.requestUpdate();
   }
   updated(e) {
-    var o;
+    var i, l;
     if (e.has("code") || e.has("language")) {
-      const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector("cv-code-editor");
-      i && (i.code = this.code, i.language = this.language);
+      const s = (i = this.shadowRoot) == null ? void 0 : i.querySelector("cv-code-editor");
+      if (s)
+        s.code = this.code, s.language = this.language;
+      else {
+        const o = (l = this.shadowRoot) == null ? void 0 : l.querySelector("cv-code-snippet");
+        o && !this.selected && o.highlight();
+      }
     }
+    super.updated(e);
   }
   renderEditor() {
-    const e = c`<cv-code-editor
-      @code-change="${this.handleCodeChange}"
-      @editor-focus="${() => this.setEditorFocus(!0)}"
-      @editor-blur="${() => this.setEditorFocus(!1)}"
-      .code="${this.code}"
-      .language="${this.language}"
-      .options="${this.editorOptions}"
-    ></cv-code-editor>`, o = c`<cv-typography class="output" scale="body1">
-      <slot name="output"></slot>
-    </cv-typography>`;
-    return c`${this.showEditor ? e : ""}${!this.showEditor && this.language === "markdown" || this.language !== "markdown" ? o : ""}`;
+    const e = this.selected ? r`<cv-code-editor
+          @code-change="${this.handleCodeChange}"
+          @editor-focus="${() => this.setEditorFocus(!0)}"
+          @editor-blur="${() => this.setEditorFocus(!1)}"
+          .code="${this.code}"
+          .language="${this.language}"
+          .options="${this.editorOptions}"
+        ></cv-code-editor>` : r`<cv-code-snippet hideHeader .language="${this.language}"
+          >${this.code}</cv-code-snippet
+        >`, i = r`<slot name="error"></slot>
+      <cv-typography class="output" scale="body1">
+        <slot name="output"></slot>
+        <slot name="input"></slot>
+      </cv-typography>`;
+    return r`${this.showEditor ? e : ""}${!this.showEditor && this.language === "markdown" || this.language !== "markdown" ? i : ""}`;
+  }
+  renderExecutionCount() {
+    let e = r`&nbsp;`;
+    return this.showEditor && (this.loading ? e = r`<span class="loading">*</span>` : this.timesExecuted && (e = r`${this.timesExecuted}`)), r`[<span class="executionCount">${e}</span>] :`;
   }
   render() {
     const e = {
@@ -81,16 +104,12 @@ let t = class extends h {
       selected: this.selected,
       focused: this._editorFocused
     };
-    return c`
-      <div class="${v(e)}">
-        <span class="selection-indicator"></span>
-        <div class="cellWrapper">
-          <div class="cellCodeWrapper">
-            <span class="timesExecuted">
-              ${this.showEditor ? c`[${this.timesExecuted === 0 ? "  " : this.timesExecuted}]:` : ""}
-            </span>
-            <div class="editor-output-wrapper">${this.renderEditor()}</div>
-          </div>
+    return r`
+      <div class="${g(e)}">
+        <span class="selectionIndicator"></span>
+        <div class="cellCodeWrapper">
+          <span class="timesExecuted">${this.renderExecutionCount()}</span>
+          <div class="cellOutputWrapper">${this.renderEditor()}</div>
         </div>
       </div>
     `;
@@ -98,32 +117,35 @@ let t = class extends h {
 };
 t.styles = [
   p`
-      ${u(f)}
+      ${h(y)}
     `
 ];
-s([
-  d({ type: Number })
+d([
+  n({ type: Number })
 ], t.prototype, "index", 2);
-s([
-  d({ type: String })
+d([
+  n({ type: String })
 ], t.prototype, "code", 2);
-s([
-  d({ type: String })
+d([
+  n({ type: String })
 ], t.prototype, "language", 2);
-s([
-  d({ type: Boolean, reflect: !0 })
+d([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
+d([
+  n({ type: Boolean, reflect: !0 })
 ], t.prototype, "selected", 2);
-s([
-  d({ type: Number })
+d([
+  n({ type: Number })
 ], t.prototype, "timesExecuted", 2);
-s([
-  d({ type: Boolean, reflect: !0 })
+d([
+  n({ type: Boolean, reflect: !0 })
 ], t.prototype, "showEditor", 2);
-t = s([
+t = d([
   m("cv-cell")
 ], t);
-const R = t;
+const P = t;
 export {
   t as CovalentCell,
-  R as default
+  P as default
 };

package/code-editor/code-editor.d.ts

@@ -1,5 +1,27 @@
 import { LitElement, PropertyValues } from 'lit';
-import * as monaco from 'monaco-editor';
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api.js';
+import 'monaco-editor/esm/vs/basic-languages/html/html.contribution';
+import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
+import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
+import 'monaco-editor/esm/vs/basic-languages/java/java.contribution';
+import 'monaco-editor/esm/vs/basic-languages/csharp/csharp.contribution';
+import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
+import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';
+import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution';
+import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution';
+import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
+import 'monaco-editor/esm/vs/basic-languages/go/go.contribution';
+import 'monaco-editor/esm/vs/basic-languages/r/r.contribution';
+import 'monaco-editor/esm/vs/basic-languages/cpp/cpp.contribution';
+import 'monaco-editor/esm/vs/basic-languages/rust/rust.contribution';
+import 'monaco-editor/esm/vs/basic-languages/kotlin/kotlin.contribution';
+import 'monaco-editor/esm/vs/basic-languages/swift/swift.contribution';
+import 'monaco-editor/esm/vs/basic-languages/lua/lua.contribution';
+import 'monaco-editor/esm/vs/basic-languages/scala/scala.contribution';
+import 'monaco-editor/esm/vs/basic-languages/dart/dart.contribution';
+import 'monaco-editor/esm/vs/basic-languages/php/php.contribution';
 export declare class CovalentCodeEditor extends LitElement {
     /**
      * The container where editor will be created
@@ -8,7 +30,7 @@ export declare class CovalentCodeEditor extends LitElement {
     /**
      * Editor instance
      */
-    editor?: monaco.editor.IStandaloneCodeEditor;
+    editor?: editor.IStandaloneCodeEditor;
     /**
      * Theme of the editor
      */
@@ -24,22 +46,22 @@ export declare class CovalentCodeEditor extends LitElement {
     /**
      * Options that can be ste for the editor
      */
-    options?: monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions;
+    options?: editor.IEditorOptions & editor.IGlobalEditorOptions;
     static styles: import("lit").CSSResult[];
     private getFile;
     private getCode;
     private getLang;
     private getTheme;
     private isDark;
-    setValue(value: string): void;
-    getValue(): string | undefined;
+    private setTheme;
     adjustHeight(): void;
     createEditor(container: HTMLElement): void;
-    onModelChange(): void;
     firstUpdated(): void;
-    updated(changedProperties: PropertyValues): void;
+    getValue(): string | undefined;
+    onModelChange(): void;
     render(): import("lit-html").TemplateResult<1>;
-    private _setTheme;
+    setValue(value: string): void;
+    updated(changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
 }
 declare global {

package/code-editor/code-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-editor.d.ts","sourceRoot":"","sources":["../../../../libs/components/src/code-editor/code-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAOvE,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAgCxC,qBACa,kBAAmB,SAAQ,UAAU;IAChD;;OAEG;IACH,OAAO,CAAC,SAAS,CAAiC;IAClD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,qBAAqB,CAAC;IAC7C;;OAEG;IACS,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACS,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACS,IAAI,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACyB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,GAChE,MAAM,CAAC,MAAM,CAAC,oBAAoB,CAAC;IAErC,MAAM,CAAC,MAAM,4BAIX;IAEF,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,MAAM;IAOd,QAAQ,CAAC,KAAK,EAAE,MAAM;IAItB,QAAQ;IAKR,YAAY;IAQZ,YAAY,CAAC,SAAS,EAAE,WAAW;IAmBnC,aAAa;IAcb,YAAY;IA8BZ,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAezC,MAAM;IAIN,OAAO,CAAC,SAAS,CAEf;IAEO,oBAAoB,IAAI,IAAI;CAKtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,kBAAkB,CAAC;KACtC;CACF;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"code-editor.d.ts","sourceRoot":"","sources":["../../../../libs/components/src/code-editor/code-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAOvE,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAInE,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AACnE,OAAO,yEAAyE,CAAC;AACjF,OAAO,yEAAyE,CAAC;AACjF,OAAO,iEAAiE,CAAC;AACzE,OAAO,6DAA6D,CAAC;AACrE,OAAO,iEAAiE,CAAC;AACzE,OAAO,2DAA2D,CAAC;AACnE,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AACnE,OAAO,qEAAqE,CAAC;AAC7E,OAAO,+DAA+D,CAAC;AACvE,OAAO,yDAAyD,CAAC;AACjE,OAAO,uDAAuD,CAAC;AAC/D,OAAO,2DAA2D,CAAC;AACnE,OAAO,6DAA6D,CAAC;AACrE,OAAO,iEAAiE,CAAC;AACzE,OAAO,+DAA+D,CAAC;AACvE,OAAO,2DAA2D,CAAC;AACnE,OAAO,+DAA+D,CAAC;AACvE,OAAO,6DAA6D,CAAC;AACrE,OAAO,2DAA2D,CAAC;AAEnE,qBACa,kBAAmB,SAAQ,UAAU;IAChD;;OAEG;IACH,OAAO,CAAC,SAAS,CAAiC;IAClD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,qBAAqB,CAAC;IACtC;;OAEG;IACS,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACS,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACS,IAAI,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACyB,OAAO,CAAC,EAAE,MAAM,CAAC,cAAc,GACzD,MAAM,CAAC,oBAAoB,CAAC;IAE9B,MAAM,CAAC,MAAM,4BAIX;IAEF,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,QAAQ,CAEd;IAEF,YAAY;IAQZ,YAAY,CAAC,SAAS,EAAE,WAAW;IAqBnC,YAAY;IAmCZ,QAAQ;IAKR,aAAa;IAab,MAAM;IAIN,QAAQ,CAAC,KAAK,EAAE,MAAM;IAItB,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAehC,oBAAoB,IAAI,IAAI;CAKtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,kBAAkB,CAAC;KACtC;CACF;AAED,eAAe,kBAAkB,CAAC"}