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

package/cell/cell.d.ts

@@ -21,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
      */
@@ -59,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;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,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;IAenD,YAAY;IA2BZ,SAAS,CAAC,MAAM;CAsBjB;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,29 +1,25 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./query-assigned-elements-f623705d.js"),n=require("./property-57f6f6fe.js"),d=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}.selection-indicator{background-color:var(--cv-theme-primary);border-radius:2px;margin-top:2px;visibility:hidden;min-width:8px}.timesExecuted{color:var(--cv-theme-outline-variant);margin:0 2rem;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:100%}.cellCodeWrapper{align-items:flex-start;display:flex;justify-content:space-between}.cellOutputWrapper{width:calc(100% - 96px)}.output{margin:.75rem .25rem .5rem;max-width:100%}
-`;var p=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(a,e,r,o)=>{for(var t=o>1?void 0:o?h(e,r):e,l=a.length-1,c;l>=0;l--)(c=a[l])&&(t=(o?c(e,r,t):c(t))||t);return o&&t&&p(e,r,t),t};exports.CovalentCell=class extends i.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",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 r,o;if(e.has("code")||e.has("language")){const t=(r=this.shadowRoot)==null?void 0:r.querySelector("cv-code-editor");if(t)t.code=this.code,t.language=this.language;else{const l=(o=this.shadowRoot)==null?void 0:o.querySelector("cv-code-snippet");l&&!this.selected&&(l.language=this.language)}}}renderEditor(){const e=this.selected?i.x`<cv-code-editor
+"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>`:i.x`<cv-code-snippet hideHeader .language="${this.language}"
+        ></cv-code-editor>`:t.x`<cv-code-snippet hideHeader .language="${this.language}"
           >${this.code}</cv-code-snippet
-        >`,r=i.x`<slot name="error"></slot>
+        >`,o=t.x`<slot name="error"></slot>
       <cv-typography class="output" scale="body1">
         <slot name="output"></slot>
         <slot name="input"></slot>
-      </cv-typography>`;return i.x`${this.showEditor?e:""}${!this.showEditor&&this.language==="markdown"||this.language!=="markdown"?r:""}`}render(){const e={cell:!0,selected:this.selected,focused:this._editorFocused};return i.x`
-      <div class="${d.o(e)}">
-        <span class="selection-indicator"></span>
-        <div class="cellWrapper">
-          <div class="cellCodeWrapper">
-            <span class="timesExecuted">
-              ${this.showEditor?i.x`[${this.timesExecuted?this.timesExecuted:"  "}]:`:""}
-            </span>
-            <div class="cellOutputWrapper">${this.renderEditor()}</div>
-          </div>
+      </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=[i.i`
-      ${i.r(u)}
-    `];s([n.n({type:Number})],exports.CovalentCell.prototype,"index",2);s([n.n({type:String})],exports.CovalentCell.prototype,"code",2);s([n.n({type:String})],exports.CovalentCell.prototype,"language",2);s([n.n({type:Boolean,reflect:!0})],exports.CovalentCell.prototype,"selected",2);s([n.n({type:Number})],exports.CovalentCell.prototype,"timesExecuted",2);s([n.n({type:Boolean,reflect:!0})],exports.CovalentCell.prototype,"showEditor",2);exports.CovalentCell=s([i.e("cv-cell")],exports.CovalentCell);const v=exports.CovalentCell;exports.default=v;
+    `}};exports.CovalentCell.styles=[t.i`
+      ${t.r(u)}
+    `];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,5 +1,5 @@
-import { i as p, r as h, s as u, x as c, e as m } from "./query-assigned-elements-4a39219d.mjs";
-import { n as l } from "./property-9b6ea53b.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";
@@ -20,16 +20,16 @@ import "./style-map-e7ec6d41.mjs";
 import "./aria-property-fa2717fe.mjs";
 import "./event-options-78d6cf94.mjs";
 import "./if-defined-c367f208.mjs";
-const v = `: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}.selection-indicator{background-color:var(--cv-theme-primary);border-radius:2px;margin-top:2px;visibility:hidden;min-width:8px}.timesExecuted{color:var(--cv-theme-outline-variant);margin:0 2rem;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:100%}.cellCodeWrapper{align-items:flex-start;display:flex;justify-content:space-between}.cellOutputWrapper{width:calc(100% - 96px)}.output{margin:.75rem .25rem .5rem;max-width:100%}
+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 f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (e, o, d, r) => {
-  for (var t = r > 1 ? void 0 : r ? y(o, d) : o, a = e.length - 1, n; a >= 0; a--)
-    (n = e[a]) && (t = (r ? n(o, d, t) : n(t)) || t);
-  return r && t && f(o, d, t), t;
+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 i = class extends u {
+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",
@@ -65,33 +65,38 @@ let i = class extends u {
     this._editorFocused = e, this.requestUpdate();
   }
   updated(e) {
-    var o, d;
+    var i, l;
     if (e.has("code") || e.has("language")) {
-      const r = (o = this.shadowRoot) == null ? void 0 : o.querySelector("cv-code-editor");
-      if (r)
-        r.code = this.code, r.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 t = (d = this.shadowRoot) == null ? void 0 : d.querySelector("cv-code-snippet");
-        t && !this.selected && (t.language = this.language);
+        const o = (l = this.shadowRoot) == null ? void 0 : l.querySelector("cv-code-snippet");
+        o && !this.selected && o.highlight();
       }
     }
+    super.updated(e);
   }
   renderEditor() {
-    const e = this.selected ? c`<cv-code-editor
+    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>` : c`<cv-code-snippet hideHeader .language="${this.language}"
+        ></cv-code-editor>` : r`<cv-code-snippet hideHeader .language="${this.language}"
           >${this.code}</cv-code-snippet
-        >`, o = c`<slot name="error"></slot>
+        >`, i = r`<slot name="error"></slot>
       <cv-typography class="output" scale="body1">
         <slot name="output"></slot>
         <slot name="input"></slot>
       </cv-typography>`;
-    return c`${this.showEditor ? e : ""}${!this.showEditor && this.language === "markdown" || this.language !== "markdown" ? o : ""}`;
+    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 = {
@@ -99,49 +104,48 @@ let i = class extends u {
       selected: this.selected,
       focused: this._editorFocused
     };
-    return c`
+    return r`
       <div class="${g(e)}">
-        <span class="selection-indicator"></span>
-        <div class="cellWrapper">
-          <div class="cellCodeWrapper">
-            <span class="timesExecuted">
-              ${this.showEditor ? c`[${this.timesExecuted ? this.timesExecuted : "  "}]:` : ""}
-            </span>
-            <div class="cellOutputWrapper">${this.renderEditor()}</div>
-          </div>
+        <span class="selectionIndicator"></span>
+        <div class="cellCodeWrapper">
+          <span class="timesExecuted">${this.renderExecutionCount()}</span>
+          <div class="cellOutputWrapper">${this.renderEditor()}</div>
         </div>
       </div>
     `;
   }
 };
-i.styles = [
+t.styles = [
   p`
-      ${h(v)}
+      ${h(y)}
     `
 ];
-s([
-  l({ type: Number })
-], i.prototype, "index", 2);
-s([
-  l({ type: String })
-], i.prototype, "code", 2);
-s([
-  l({ type: String })
-], i.prototype, "language", 2);
-s([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "selected", 2);
-s([
-  l({ type: Number })
-], i.prototype, "timesExecuted", 2);
-s([
-  l({ type: Boolean, reflect: !0 })
-], i.prototype, "showEditor", 2);
-i = s([
+d([
+  n({ type: Number })
+], t.prototype, "index", 2);
+d([
+  n({ type: String })
+], t.prototype, "code", 2);
+d([
+  n({ type: String })
+], t.prototype, "language", 2);
+d([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
+d([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "selected", 2);
+d([
+  n({ type: Number })
+], t.prototype, "timesExecuted", 2);
+d([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "showEditor", 2);
+t = d([
   m("cv-cell")
-], i);
-const I = i;
+], t);
+const P = t;
 export {
-  i as CovalentCell,
-  I as default
+  t as CovalentCell,
+  P as default
 };

package/notebook/notebook.d.ts

@@ -19,6 +19,7 @@ interface CellData {
         prompt: string;
     }[];
     language: string;
+    loading?: boolean;
     outputs?: {
         data: {
             [key: string]: string;

package/notebook/notebook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../../../libs/components/src/notebook/notebook.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"notebook.d.ts","sourceRoot":"","sources":["../../../../libs/components/src/notebook/notebook.ts"],"names":[],"mappings":"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"}

package/notebook.js

@@ -67,6 +67,7 @@
               .language="${t.language}"
               .showEditor="${t.showEditor!==!1}"
               .timesExecuted="${t.timesExecuted}"
+              .loading="${t.loading}"
               id="cell-${r}"
               draggable="true"
               @dragstart="${i=>this.handleDragStart(i,r)}"

package/notebook.mjs

@@ -3338,6 +3338,7 @@ let j = class extends w0 {
               .language="${e.language}"
               .showEditor="${e.showEditor !== !1}"
               .timesExecuted="${e.timesExecuted}"
+              .loading="${e.loading}"
               id="cell-${t}"
               draggable="true"
               @dragstart="${(c) => this.handleDragStart(c, t)}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@covalent/components",
-  "version": "8.15.0-beta.10",
+  "version": "8.15.0-beta.11",
   "description": "a catalog of material components for covalent",
   "main": "./index.js",
   "module": "./index.mjs",