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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@covalent/components",
-  "version": "8.15.0-beta.10",
+  "version": "8.15.0-beta.12",
   "description": "a catalog of material components for covalent",
   "main": "./index.js",
   "module": "./index.mjs",
@@ -41,10 +41,10 @@
       "import": "./button.mjs",
       "require": "./button.js"
     },
-    "./cell": {
-      "types": "./cell/cell.d.ts",
-      "import": "./cell.mjs",
-      "require": "./cell.js"
+    "./notebook-cell": {
+      "types": "./notebook-cell/notebook-cell.d.ts",
+      "import": "./notebook-cell.mjs",
+      "require": "./notebook-cell.js"
     },
     "./checkbox": {
       "types": "./checkbox/checkbox.d.ts",

package/cell/cell.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/cell.js

@@ -1,29 +0,0 @@
-"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
-          @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}"
-          >${this.code}</cv-code-snippet
-        >`,r=i.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>
-        </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;

package/cell.mjs

@@ -1,147 +0,0 @@
-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 { 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";
-import "./utils-dc65fdc9.mjs";
-import "./state-b5e865db.mjs";
-import "./query-d843aa92.mjs";
-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%}
-`;
-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;
-};
-let i = class extends u {
-  constructor() {
-    super(...arguments), this.code = "", this.language = "", this.selected = !1, this.timesExecuted = 0, this.showEditor = !0, this._editorFocused = !1, this.editorOptions = {
-      minimap: { enabled: !1 },
-      // Disable minimap to save space
-      wordWrap: "on",
-      // Enable word wrap to avoid horizontal scroll
-      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, d;
-    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;
-      else {
-        const t = (d = this.shadowRoot) == null ? void 0 : d.querySelector("cv-code-snippet");
-        t && !this.selected && (t.language = this.language);
-      }
-    }
-  }
-  renderEditor() {
-    const e = this.selected ? 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>` : c`<cv-code-snippet hideHeader .language="${this.language}"
-          >${this.code}</cv-code-snippet
-        >`, o = c`<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 : ""}`;
-  }
-  render() {
-    const e = {
-      cell: !0,
-      selected: this.selected,
-      focused: this._editorFocused
-    };
-    return c`
-      <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>
-        </div>
-      </div>
-    `;
-  }
-};
-i.styles = [
-  p`
-      ${h(v)}
-    `
-];
-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([
-  m("cv-cell")
-], i);
-const I = i;
-export {
-  i as CovalentCell,
-  I as default
-};