proto-table-wc 0.0.389 → 0.0.391

package/dist/collection/components/demo-table/demo-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo-table.js","sourceRoot":"","sources":["../../../src/components/demo-table/demo-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,SAAS;EALtB;IA4DE,WAAM,GAAG;MACP,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE;MAC/B,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE;MACtC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE;MACxC,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE;KAC7C,CAAC;IAEF,UAAK,GAAG,EAAE,CAAC;IACX,UAAK,GAAG,SAAS,CAAC;IAElB,kBAAa,GAAG,IAAI,CAAC,EAAE;MACrB,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC;MAE3B,OAAO,CACL,WAAK,KAAK,EAAC,eAAe;QACxB;UAAO,IAAI,CAAC,MAAM;wBAAmB;QACrC,cACG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,cAAK,GAAG,CAAM,CACf,CAAC,CACC,CACD,CACP,CAAC;IACJ,CAAC,CAAC;GAKH;EAlFC,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAG;MACX;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC;OAC9B;MACD;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC;OACrB;MACD;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,UAAU;OAClB;MACD;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC;OACxC;MACD;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC;OACxB;MACD;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;OAC5B;KACF,CAAC;EACJ,CAAC;EAED,gBAAgB;IACd,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAEtC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;IACnB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC;EACrC,CAAC;EA2BD,MAAM;IACJ,OAAO,mBAAa,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAAI,CAAC;EACvD,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'demo-table',\n  styleUrl: 'demo-table.css',\n  shadow: true,\n})\nexport class DemoTable {\n  componentWillLoad() {\n    this.items = [\n      {\n        date: '08/30/2020',\n        price: '$24,000',\n        market: '98%',\n        score: 'No Score',\n        tags: ['one', 'two', 'three'],\n      },\n      {\n        date: '08/31/2020',\n        price: '$24,000',\n        market: '99%',\n        score: 'No Score',\n        tags: ['uno', 'duo'],\n      },\n      {\n        date: '09/01/2020',\n        price: '$27,000',\n        market: '102%',\n        score: 'Platinum',\n      },\n      {\n        date: '09/02/2020',\n        price: '$27,423',\n        market: '104%',\n        score: 'Platinum',\n        tags: ['dog', 'cat', 'fish', 'hamster'],\n      },\n      {\n        date: '09/03/2020',\n        price: '$27,521',\n        market: '106%',\n        score: 'Platinum',\n        tags: ['4wd', 'sports'],\n      },\n      {\n        date: '09/04/2020',\n        price: '$27,687',\n        market: '107%',\n        score: 'Platinum',\n        tags: ['leather', 'chrome'],\n      },\n    ];\n  }\n\n  componentDidLoad() {\n    const { table, items, fields } = this;\n\n    table.data = items;\n    table.fields = fields;\n    table.details = this.renderDetails;\n  }\n\n  fields = [\n    { label: 'Date', prop: 'date' },\n    { label: 'List Price', prop: 'price' },\n    { label: '% of Market', prop: 'market' },\n    { label: 'ProfitTime Score', prop: 'score' },\n  ];\n\n  items = [];\n  table = undefined;\n\n  renderDetails = item => {\n    const { tags = [] } = item;\n\n    return (\n      <div class=\"detailWrapper\">\n        <span>{tags.length} details...</span>\n        <ul>\n          {tags.map(tag => (\n            <li>{tag}</li>\n          ))}\n        </ul>\n      </div>\n    );\n  };\n\n  render() {\n    return <proto-table ref={el => (this.table = el)} />;\n  }\n}\n"]}

package/dist/collection/components/proto-table/iconPaths.js

@@ -9,3 +9,4 @@ const iconPaths = {
 };
 export { iconPaths };
 export default iconPaths;
+//# sourceMappingURL=iconPaths.js.map

package/dist/collection/components/proto-table/iconPaths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconPaths.js","sourceRoot":"","sources":["../../../src/components/proto-table/iconPaths.ts"],"names":[],"mappings":"AAAA,MAAM,SAAS,GAAG;EAChB,MAAM,EAAE,wCAAwC;EAChD,IAAI,EAAE,0CAA0C;EAChD,MAAM,EAAE,yCAAyC;EACjD,OAAO,EAAE,yCAAyC;EAClD,MAAM,EAAE,6FAA6F;EACrG,UAAU,EAAE,yDAAyD;EACrE,YAAY,EAAE,+DAA+D;CAC9E,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,eAAe,SAAS,CAAC","sourcesContent":["const iconPaths = {\n  'down': 'M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z',\n  'up': 'M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z',\n  'left': 'M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z',\n  'right': 'M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z',\n  'more': 'M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',\n  'arrow-up': 'M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z',\n  'arrow-down': 'M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z',\n};\n\nexport { iconPaths };\nexport default iconPaths;\n"]}

package/dist/collection/components/proto-table/proto-table.js

@@ -143,3 +143,4 @@ export class ProtoTable {
     };
   }
 }
+//# sourceMappingURL=proto-table.js.map

package/dist/collection/components/proto-table/proto-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"proto-table.js","sourceRoot":"","sources":["../../../src/components/proto-table/proto-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { iconPaths } from './iconPaths';\n\nconst iconAliases = {\n  'right': 'show',\n  'down': 'hide',\n  'arrow-up': 'sort',\n  'arrow-down': 'sort',\n};\n\nconst aliasFor = name => {\n  return iconAliases[name];\n};\n\n@Component({\n  tag: 'proto-table',\n  styleUrl: 'proto-table.css',\n})\nexport class ProtoTable {\n  @Prop() data = [];\n  @Prop() details = undefined;\n  @Prop() fields = [];\n  @State() expanded = undefined;\n  @State() sort = undefined;\n  @State() clicks = 0;\n\n  protoIcon = (name, hex = undefined, size = 24) => {\n    const path = iconPaths[name];\n    return (\n      <svg width={size} height={size} viewBox=\"0 0 24 24\" role=\"img\" aria-labelledby=\"title\">\n        <title>{aliasFor(name)}</title>\n        <g fill={hex}>\n          <path d={path} />\n        </g>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      </svg>\n    );\n  };\n\n  handleCellClick = (index, row) => {\n    return () => {\n      if (index === 0) {\n        this.expanded = this.expanded === row ? undefined : row;\n      }\n    };\n  };\n\n  handleSortClick = index => {\n    // NOTE:  small state machine for dealing with sorting...\n    return () => {\n      if (this.sort === index) {\n        if (this.clicks === 2) {\n          this.clicks = 0;\n          this.sort = undefined;\n        } else {\n          this.clicks = this.clicks + 1;\n        }\n      } else {\n        this.sort = index;\n        this.clicks = 1;\n      }\n    };\n  };\n\n  iconFor = column => {\n    return this.sort === column && this.clicks === 2 ? 'arrow-up' : 'arrow-down';\n  };\n\n  header = () => {\n    const { fields, iconFor, protoIcon } = this;\n    return (\n      <div class=\"header\">\n        {fields.map(({ label }, index) => {\n          const cellClass = index === this.sort ? 'headerCell sort' : 'headerCell';\n          const ikon = iconFor(index);\n          return (\n            <div class={cellClass} onClick={this.handleSortClick(index)}>\n              {protoIcon(ikon)}\n              <span>{label}</span>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  row = (data, row) => {\n    const { fields, protoIcon } = this;\n    const rowClass = this.expanded === row ? 'row expanded' : 'row';\n    return (\n      <div class=\"rowContainer\">\n        <div class={rowClass}>\n          {fields.map(({ prop }, index) => {\n            const cellClass = index === this.sort ? 'cell sort' : 'cell';\n            return (\n              <div class={cellClass} onClick={this.handleCellClick(index, row)}>\n                {index === 0 && this.details ? protoIcon(this.expanded === row ? 'down' : 'right') : protoIcon('pad')}\n                {data[prop]}\n              </div>\n            );\n          })}\n        </div>\n\n        {this.details && this.expanded === row && this.details(data)}\n      </div>\n    );\n  };\n\n  render() {\n    const items = this.data || [];\n    return (\n      <div class=\"table\">\n        {this.header()}\n        {items.map((item, index) => this.row(item, index))}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"","sourcesContent":["export { Components, JSX } from './components';\n"]}

package/dist/esm/demo-table_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-851629b1.js';
+import { r as registerInstance, h } from './index-f60c9fab.js';
 
 const demoTableCss = ".detailWrapper{font-weight:100;font-size:13px;display:flex;flex-direction:column;justify-items:start;padding:5px;padding-left:30px}";
 
@@ -162,3 +162,5 @@ const ProtoTable = class {
 ProtoTable.style = protoTableCss;
 
 export { DemoTable as demo_table, ProtoTable as proto_table };
+
+//# sourceMappingURL=demo-table_2.entry.js.map

package/dist/esm/demo-table_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"demo-table.proto-table.entry.js","mappings":"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","names":[],"sources":["./src/components/demo-table/demo-table.css?tag=demo-table&encapsulation=shadow","./src/components/demo-table/demo-table.tsx","./src/components/proto-table/iconPaths.ts","./src/components/proto-table/proto-table.css?tag=proto-table","./src/components/proto-table/proto-table.tsx"],"sourcesContent":[".detailWrapper {\n  font-weight: 100;\n  font-size: 13px;\n  display: flex;\n  flex-direction: column;\n  justify-items: start;\n  padding: 5px;\n  padding-left: 30px;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'demo-table',\n  styleUrl: 'demo-table.css',\n  shadow: true,\n})\nexport class DemoTable {\n  componentWillLoad() {\n    this.items = [\n      {\n        date: '08/30/2020',\n        price: '$24,000',\n        market: '98%',\n        score: 'No Score',\n        tags: ['one', 'two', 'three'],\n      },\n      {\n        date: '08/31/2020',\n        price: '$24,000',\n        market: '99%',\n        score: 'No Score',\n        tags: ['uno', 'duo'],\n      },\n      {\n        date: '09/01/2020',\n        price: '$27,000',\n        market: '102%',\n        score: 'Platinum',\n      },\n      {\n        date: '09/02/2020',\n        price: '$27,423',\n        market: '104%',\n        score: 'Platinum',\n        tags: ['dog', 'cat', 'fish', 'hamster'],\n      },\n      {\n        date: '09/03/2020',\n        price: '$27,521',\n        market: '106%',\n        score: 'Platinum',\n        tags: ['4wd', 'sports'],\n      },\n      {\n        date: '09/04/2020',\n        price: '$27,687',\n        market: '107%',\n        score: 'Platinum',\n        tags: ['leather', 'chrome'],\n      },\n    ];\n  }\n\n  componentDidLoad() {\n    const { table, items, fields } = this;\n\n    table.data = items;\n    table.fields = fields;\n    table.details = this.renderDetails;\n  }\n\n  fields = [\n    { label: 'Date', prop: 'date' },\n    { label: 'List Price', prop: 'price' },\n    { label: '% of Market', prop: 'market' },\n    { label: 'ProfitTime Score', prop: 'score' },\n  ];\n\n  items = [];\n  table = undefined;\n\n  renderDetails = item => {\n    const { tags = [] } = item;\n\n    return (\n      <div class=\"detailWrapper\">\n        <span>{tags.length} details...</span>\n        <ul>\n          {tags.map(tag => (\n            <li>{tag}</li>\n          ))}\n        </ul>\n      </div>\n    );\n  };\n\n  render() {\n    return <proto-table ref={el => (this.table = el)} />;\n  }\n}\n","const iconPaths = {\n  'down': 'M12 15.4L6.6 10 8 8.6l4 4 4-4 1.4 1.4z',\n  'up': 'M16 15.4l-4-4-4 4L6.6 14 12 8.6l5.4 5.4z',\n  'left': 'M14 17.4L8.6 12 14 6.6 15.4 8l-4 4 4 4z',\n  'right': 'M10 17.4L8.6 16l4-4-4-4L10 6.6l5.4 5.4z',\n  'more': 'M12 14a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z',\n  'arrow-up': 'M5.3 10.7l1.4 1.4L11 7.8V20h2V7.8l4.3 4.3 1.4-1.4L12 4z',\n  'arrow-down': 'M18.7 13.3l-1.4-1.4-4.3 4.3V4h-2v12.2l-4.3-4.3-1.4 1.4L12 20z',\n};\n\nexport { iconPaths };\nexport default iconPaths;\n",".table {\n  font-weight: 400;\n  font-size: 13px;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  border: 1px solid var(--clrs-navy);\n  border-radius: 2px;\n}\n\n.table svg {\n  fill: var(--clrs-navy);\n}\n\n.header {\n  display: flex;\n}\n\n.headerCell {\n  flex-basis: 100%;\n  display: flex;\n  align-items: center;\n  justify-items: start;\n  border-right: 1px solid var(--clrs-navy);\n  border-bottom: 1px solid var(--clrs-navy);\n  padding: 5px;\n  cursor: pointer;\n}\n\n.headerCell svg g {\n  display: none;\n}\n\n.headerCell.sort svg g {\n  display: inline;\n}\n\n.headerCell:hover svg g {\n  display: inline;\n}\n\n.headerCell:hover {\n  background-color: var(--clrs-silver);\n}\n\n.headerCell:last-child {\n  border-right: none;\n}\n\n.cell {\n  flex-basis: 100%;\n  display: flex;\n  align-items: center;\n  justify-items: start;\n  padding: 5px;\n}\n\n.cell:first-child svg {\n  cursor: pointer;\n}\n\n.sort {\n  background-color: var(--cx-column-sort);\n}\n\n.row {\n  display: flex;\n  justify-items: stretch;\n  width: 100%;\n}\n\n.row.expanded {\n  background-color: var(--cx-row-expanded);\n}\n\n.row.expanded svg {\n  fill: var(--clrs-red);\n}\n\n.row:hover {\n  background-color: var(--cx-row-hover);\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { iconPaths } from './iconPaths';\n\nconst iconAliases = {\n  'right': 'show',\n  'down': 'hide',\n  'arrow-up': 'sort',\n  'arrow-down': 'sort',\n};\n\nconst aliasFor = name => {\n  return iconAliases[name];\n};\n\n@Component({\n  tag: 'proto-table',\n  styleUrl: 'proto-table.css',\n})\nexport class ProtoTable {\n  @Prop() data = [];\n  @Prop() details = undefined;\n  @Prop() fields = [];\n  @State() expanded = undefined;\n  @State() sort = undefined;\n  @State() clicks = 0;\n\n  protoIcon = (name, hex = undefined, size = 24) => {\n    const path = iconPaths[name];\n    return (\n      <svg width={size} height={size} viewBox=\"0 0 24 24\" role=\"img\" aria-labelledby=\"title\">\n        <title>{aliasFor(name)}</title>\n        <g fill={hex}>\n          <path d={path} />\n        </g>\n        <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      </svg>\n    );\n  };\n\n  handleCellClick = (index, row) => {\n    return () => {\n      if (index === 0) {\n        this.expanded = this.expanded === row ? undefined : row;\n      }\n    };\n  };\n\n  handleSortClick = index => {\n    // NOTE:  small state machine for dealing with sorting...\n    return () => {\n      if (this.sort === index) {\n        if (this.clicks === 2) {\n          this.clicks = 0;\n          this.sort = undefined;\n        } else {\n          this.clicks = this.clicks + 1;\n        }\n      } else {\n        this.sort = index;\n        this.clicks = 1;\n      }\n    };\n  };\n\n  iconFor = column => {\n    return this.sort === column && this.clicks === 2 ? 'arrow-up' : 'arrow-down';\n  };\n\n  header = () => {\n    const { fields, iconFor, protoIcon } = this;\n    return (\n      <div class=\"header\">\n        {fields.map(({ label }, index) => {\n          const cellClass = index === this.sort ? 'headerCell sort' : 'headerCell';\n          const ikon = iconFor(index);\n          return (\n            <div class={cellClass} onClick={this.handleSortClick(index)}>\n              {protoIcon(ikon)}\n              <span>{label}</span>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  row = (data, row) => {\n    const { fields, protoIcon } = this;\n    const rowClass = this.expanded === row ? 'row expanded' : 'row';\n    return (\n      <div class=\"rowContainer\">\n        <div class={rowClass}>\n          {fields.map(({ prop }, index) => {\n            const cellClass = index === this.sort ? 'cell sort' : 'cell';\n            return (\n              <div class={cellClass} onClick={this.handleCellClick(index, row)}>\n                {index === 0 && this.details ? protoIcon(this.expanded === row ? 'down' : 'right') : protoIcon('pad')}\n                {data[prop]}\n              </div>\n            );\n          })}\n        </div>\n\n        {this.details && this.expanded === row && this.details(data)}\n      </div>\n    );\n  };\n\n  render() {\n    const items = this.data || [];\n    return (\n      <div class=\"table\">\n        {this.header()}\n        {items.map((item, index) => this.row(item, index))}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/{index-851629b1.js → index-f60c9fab.js}

@@ -116,6 +116,14 @@ const h = (nodeName, vnodeData, ...children) => {
     }
     return vnode;
 };
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
 const newVNode = (tag, text) => {
     const vnode = {
         $flags$: 0,
@@ -130,6 +138,12 @@ const newVNode = (tag, text) => {
     return vnode;
 };
 const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
 const isHost = (node) => node && node.$tag$ === Host;
 /**
  * Parse a new property value for a given property type.
@@ -210,6 +224,7 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
             }
             if (!appliedStyles.has(scopeId)) {
                 {
+                    // TODO(STENCIL-659): Remove code implementing the CSS variable shim
                     {
                         styleElm = doc.createElement('style');
                         styleElm.innerHTML = style;
@@ -238,6 +253,7 @@ const attachStyles = (hostRef) => {
     const flags = cmpMeta.$flags$;
     const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
     const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
+    // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
     if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
         // only required when we're NOT using native shadow dom (slot)
         // or this browser doesn't support native shadow dom
@@ -440,6 +456,21 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     return elm;
 };
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = (parentElm);
     let childNode;
@@ -456,6 +487,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -648,7 +692,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -724,6 +769,18 @@ const callNodeRefs = (vNode) => {
         vNode.$children$ && vNode.$children$.map(callNodeRefs);
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -1346,3 +1403,5 @@ const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
 export { bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };
+
+//# sourceMappingURL=index-f60c9fab.js.map