Update custom elements manifest (#50)

* ignore non-public class members

* added jsdoc strings for slots

* added description at top level js doc comment

* added jsdoc strings for css variables

* added summary, mv note outside of jsdoc string

* ignore non-exported modules

* cleaned up src/index

* updated npm script analyze:

- target only desired modules

* recreated custom elements manifest json

* updated package.json files field:

- include custom-elements.json
- exclude build/test/ dir

package.json

@@ -8,7 +8,9 @@
   "types": "build/index.d.ts",
   "files": [
     "build/**/*.js",
-    "build/**/*.d.ts"
+    "build/**/*.d.ts",
+    "!build/test/*",
+    "custom-elements.json"
   ],
   "unpkg": "build/color-legend-element.umd.js",
   "jsdelivr": "build/color-legend-element.umd.js",
@@ -18,7 +20,7 @@
   },
   "customElements": "custom-elements.json",
   "scripts": {
-    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*_test.ts\"",
+    "analyze": "cem analyze --litelement --globs \"src/(color-legend-element|constants).ts\" --exclude \"src/**/*_test.ts\"",
     "analyze:watch": "npm run analyze -- --watch",
     "build": "tsc",
     "build:watch": "tsc --watch",

src/color-legend-element.ts

@@ -27,6 +27,39 @@ import {
   DEFAULT_TICK_SIZE,
 } from "./constants";
 
+// NOTE: the JS Doc strings that follow are used to create the custom-elements.json manifest
+// See [Open Web Components](https://custom-elements-manifest.open-wc.org/analyzer/getting-started/) for more info.
+/**
+ * @tagname color-legend
+ * @summary A custom element that renders a legend suitable for use with data visualizations.
+ *
+ * @slot subtitle - content to display below the main title
+ * @slot footer - content to display under the legend color bar or items
+ *
+ * @cssproperty [--cle-font-family = sans-serif] Font used for tick and legend item text
+ * @cssproperty [--cle-font-family-title = var(--cle-font-family)] Font used for the legend's title text
+ * @cssproperty [--cle-font-size = 0.75rem] Font size for the tick and legend item text
+ * @cssproperty [--cle-font-size-title = 0.875rem] Font size for the legend title text
+ * @cssproperty [--cle-letter-spacing = 0.3px] Letter spacing for tick and legend item text
+ * @cssproperty [--cle-letter-spacing-title = 0.25px] Letter spacing for the legend title text
+ * @cssproperty [--cle-font-weight = 400] Font weight for the tick and legend item text
+ * @cssproperty [--cle-font-weight-title = 500] Font weight for the title text
+ * @cssproperty [--cle-color = currentColor] Font color for all text and tick lines
+ * @cssproperty [--cle-background = #fff] Background color for the legend
+ * @cssproperty [--cle-padding = 0.375rem] Padding in the legend's container div
+ * @cssproperty [--cle-border = none] Border style of the legend's container div
+ * @cssproperty [--cle-border-radius = 0] Border radius of the legend's container div
+ * @cssproperty [--cle-box-sizing = content-box] Box-sizing property of the legend's container div
+ * @cssproperty [--cle-columns = 2] Number of columns for categorical legends
+ * @cssproperty [--cle-column-width = auto] Column width for categorical legends
+ * @cssproperty [--cle-item-margin = 0.375rem 0.75rem 0 0] Margin property for categorical legend items
+ * @cssproperty [--cle-line-width = 24px] Width of the "line" markType for categorical legends
+ * @cssproperty [--cle-line-height = 2px] Height of the "line" markType for categorical legends
+ * @cssproperty [--cle-swatch-size = 10px] Height & Width of "rect" and "circle" markTypes for categorical legends
+ * @cssproperty [--cle-swatch-width = var(--cle-swatch-size)] Width of the "rect" and "circle" markTypes for categorical legends
+ * @cssproperty [--cle-swatch-height = var(--cle-swatch-size)] Height of the "rect" and "circle" markTypes for categorical legends
+ * @cssproperty [--cle-swatch-margin = 0 0.5rem 0 0] Margin of the mark (line, square, circle) for categorical legends
+ **/
 @customElement("color-legend")
 export class ColorLegendElement extends LitElement {
   static override styles = [styles];
@@ -122,16 +155,21 @@ export class ColorLegendElement extends LitElement {
   tickValues: number[];
 
   /**
+   * @ignore
    * Reference to the SVG node
    */
   @query("svg")
   svg!: SVGSVGElement;
 
   /**
+   * @ignore
    * a color interpolator function such as one from d3-scale-chromatic
    */
   private _interpolator!: Interpolator<string>;
 
+  /**
+   * a color interpolator function such as one from d3-scale-chromatic
+   */
   @property({ attribute: false })
   get interpolator() {
     return this._interpolator;
@@ -148,10 +186,14 @@ export class ColorLegendElement extends LitElement {
   }
 
   /**
+   * @ignore
    * Function that formats the xAxis tick values, set internally but may also be set externally
    */
   private _tickFormatter!: TickFormatter;
 
+  /**
+   * Function that formats the xAxis tick values, set internally but may also be set externally
+   */
   @property({ attribute: false })
   get tickFormatter() {
     return this._tickFormatter;
@@ -168,11 +210,13 @@ export class ColorLegendElement extends LitElement {
   }
 
   /**
+   * @ignore
    * Handles configuring the colorScale
    */
   private colorScaleSetter = new ColorScaleSetter(this);
 
   /**
+   * @ignore
    * A type of d3-scale for applying color values to the legend item(s),
    * set internally by the colorScaleSetter.
    */
@@ -181,11 +225,13 @@ export class ColorLegendElement extends LitElement {
   }
 
   /**
+   * @ignore
    * Configures the x scale and axis ticks
    */
   private axisTickSetter = new AxisTicksSetter(this);
 
   /**
+   * @ignore
    * A d3 linear scale used for generating axis ticks,
    * set internally by the axisTickSetter
    */
@@ -194,6 +240,7 @@ export class ColorLegendElement extends LitElement {
   }
 
   /**
+   * @ignore
    * Handles rendering of HTML/SVG markup from the scaleType
    */
   private renderer = new Renderer(this);

src/color-scale.ts

@@ -11,6 +11,10 @@ import { ColorScale } from "./types";
 
 import { ColorLegendElement } from "./color-legend-element";
 
+/**
+ * handles setting the color scale for the color-legend
+ * @ignore - for custom-elements.json
+ */
 export class ColorScaleSetter {
   cle: ColorLegendElement;
 

src/index.ts

@@ -1,6 +1,4 @@
 import { ColorLegendElement } from "./color-legend-element";
-import { Renderer } from "./renderer";
-import { AxisTicksSetter } from "./x-scale-axis";
-import { ColorScaleSetter } from "./color-scale";
-export * from "./types";
-export { ColorLegendElement, ColorScaleSetter, AxisTicksSetter, Renderer };
+export type { Interpolator, TickFormatter, MarkType, ScaleType } from "./types";
+export { ColorLegendElement };
+export default ColorLegendElement;

src/renderer.ts

@@ -10,6 +10,9 @@ import {
   ScaleThreshold,
 } from "./types";
 
+/** handles rendering the HTML for the color-legend
+ * @ignore - for custom-elements.json
+ */
 export class Renderer {
   cle: ColorLegendElement;
 

src/styles.ts

@@ -1,5 +1,6 @@
 import { css } from "lit";
 
+/** @ignore - for custom-elements.json */
 export const styles = css`
   :host {
     --cle-font-family: sans-serif;

src/x-scale-axis.ts

@@ -4,6 +4,9 @@ import { ColorLegendElement } from "./color-legend-element";
 import { ScaleQuantize, XScale } from "./types";
 import { DEFAULT_TICKS, DEFAULT_TICK_FORMAT } from "./constants";
 
+/** handles configuring the x-scale and x-axis for non-categorical legends
+ * @ignore - for custom-elements.json
+ */
 export class AxisTicksSetter {
   cle: ColorLegendElement;