@loadbare/widgets 0.5.0 → 0.7.0

package/README.md

@@ -10,8 +10,13 @@ Inventory:
 | [`lb-select`](docs/lb-select.md) | a control wrapping a `<select>` whose options the page writes |
 | [`lb-options`](docs/lb-options.md) | a control wrapping a `<select>` whose options come from a query |
 | [`lb-picker`](docs/lb-picker.md) | `lb-options` with the row template built in |
-| [`lb-table`](docs/lb-table.md) | a `<table>` supplying its own scaffolding |
+| [`lb-table`](docs/lb-table.md) | a `<table>` supplying its own scaffolding and a ghost row |
 | [`lb-unknown-page`](docs/lb-unknown-page.md) | the chrome's dialog for a URL that names no page |
+| [`lb-confirm`](docs/lb-confirm.md) | a button that asks before it sends |
+| [`lb-form`](docs/lb-form.md) | a form over one row, which saves per control once the row is on record |
+| [`lb-insert-dialog`](docs/lb-insert-dialog.md) | a row entered in a modal dialog, chosen in the picker that opened it |
+| [`lb-master`](docs/lb-master.md) | a set, one of its rows, and the buttons that act on the set |
+| [`lb-checkbox`](docs/lb-checkbox.md) | a checkbox and its label, as markup to style |
 
 ## Installing
 

package/dist/control.d.ts

@@ -1,5 +1,3 @@
-/** The native controls a widget wraps. */
-type Inner = HTMLInputElement | HTMLSelectElement;
 /**
  * A form-associated custom element wrapping one native control, which makes
  * the widget itself the control: the hub sets its `value` when a column
@@ -16,14 +14,14 @@ type Inner = HTMLInputElement | HTMLSelectElement;
  */
 export declare abstract class WrappedControl extends HTMLElement {
     static formAssociated: boolean;
-    /** `<input>` or `<select>`: what this widget wraps. */
-    protected abstract readonly inner: "input" | "select";
+    /** The tag of the native control this widget wraps. */
+    protected abstract inner: string;
     /**
      * Null where the DOM implementation offers no form value, which includes
      * jsdom: the widget still works as a control, and a native form submission
      * leaves it out.
      */
-    private readonly internals;
+    private internals;
     /** Whether the widget has connected once. */
     private connected;
     constructor();
@@ -39,7 +37,7 @@ export declare abstract class WrappedControl extends HTMLElement {
      */
     connectedCallback(): void;
     /** The native control this widget wraps, once it is there. */
-    protected get control(): Inner | null;
+    protected get control(): HTMLInputElement | HTMLSelectElement | null;
     get value(): string;
     set value(value: string);
     /**
@@ -48,10 +46,20 @@ export declare abstract class WrappedControl extends HTMLElement {
      * form its value once the control has been reset.
      */
     formResetCallback(): void;
+    /**
+     * A message the hub sets when a handler refuses this control's column. It
+     * goes on the native control inside, which is what the form checks before
+     * it submits, what the browser shows the message beside, and what takes
+     * focus when it is reported.
+     */
+    setCustomValidity(message: string): void;
+    /** Show the native control's message, and focus it. */
+    reportValidity(): boolean;
+    /** The native control's message, empty when it has none. */
+    get validationMessage(): string;
     /** The inner control changed, before the widget fires its own `change`. */
     protected changed(): void;
     /** Tell the form owner the value, where the implementation allows it. */
     protected formValue(): void;
 }
-export {};
 //# sourceMappingURL=control.d.ts.map

package/dist/control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../widgets/control.ts"],"names":[],"mappings":"AAIA,0CAA0C;AAC1C,KAAK,KAAK,GAAG,gBAAgB,GAAG,iBAAiB,CAAC;AAElD;;;;;;;;;;;;;GAaG;AACH,8BAAsB,cAAe,SAAQ,WAAW;IACtD,MAAM,CAAC,cAAc,UAAQ;IAE7B,uDAAuD;IACvD,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC;IAEtD;;;;OAIG;IACH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA0B;IAEpD,6CAA6C;IAC7C,OAAO,CAAC,SAAS,CAAS;;IAa1B;;;;;;;;;OASG;IACH,iBAAiB,IAAI,IAAI;IASzB,8DAA8D;IAC9D,SAAS,KAAK,OAAO,IAAI,KAAK,GAAG,IAAI,CAEpC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAUtB;IAED;;;;OAIG;IACH,iBAAiB,IAAI,IAAI;IAIzB,2EAA2E;IAC3E,SAAS,CAAC,OAAO,IAAI,IAAI;IAIzB,yEAAyE;IACzE,SAAS,CAAC,SAAS,IAAI,IAAI;CAG5B"}
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../widgets/control.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AACH,8BAAsB,cAAe,SAAQ,WAAW;IACtD,MAAM,CAAC,cAAc,UAAQ;IAE7B,uDAAuD;IACvD,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAEjC;;;;OAIG;IACH,OAAO,CAAC,SAAS,CAAqB;IAEtC,6CAA6C;IAC7C,OAAO,CAAC,SAAS,CAAS;;IAY1B;;;;;;;;;OASG;IACH,iBAAiB,IAAI,IAAI;IASzB,8DAA8D;IAC9D,SAAS,KAAK,OAAO,IAAI,gBAAgB,GAAG,iBAAiB,GAAG,IAAI,CAEnE;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAUtB;IAED;;;;OAIG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;;;;OAKG;IACH,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC,uDAAuD;IACvD,cAAc,IAAI,OAAO;IAIzB,4DAA4D;IAC5D,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,2EAA2E;IAC3E,SAAS,CAAC,OAAO,IAAI,IAAI;IAIzB,yEAAyE;IACzE,SAAS,CAAC,SAAS,IAAI,IAAI;CAG5B"}

package/dist/control.js

@@ -21,12 +21,11 @@ export class WrappedControl extends HTMLElement {
      * jsdom: the widget still works as a control, and a native form submission
      * leaves it out.
      */
-    internals;
+    internals = internalsOf(this);
     /** Whether the widget has connected once. */
     connected = false;
     constructor() {
         super();
-        this.internals = internalsOf(this);
         this.addEventListener("change", (e) => {
             if (e.target === this || e.target !== this.control)
                 return;
@@ -69,7 +68,7 @@ export class WrappedControl extends HTMLElement {
             console.error(`${this.localName}: no <${this.inner}> to receive the value`);
             return;
         }
-        control.value = value;
+        control.value = value ?? "";
         this.formValue();
     }
     /**
@@ -80,6 +79,23 @@ export class WrappedControl extends HTMLElement {
     formResetCallback() {
         queueMicrotask(() => this.formValue());
     }
+    /**
+     * A message the hub sets when a handler refuses this control's column. It
+     * goes on the native control inside, which is what the form checks before
+     * it submits, what the browser shows the message beside, and what takes
+     * focus when it is reported.
+     */
+    setCustomValidity(message) {
+        this.control?.setCustomValidity(message);
+    }
+    /** Show the native control's message, and focus it. */
+    reportValidity() {
+        return this.control?.reportValidity() ?? true;
+    }
+    /** The native control's message, empty when it has none. */
+    get validationMessage() {
+        return this.control?.validationMessage ?? "";
+    }
     /** The inner control changed, before the widget fires its own `change`. */
     changed() {
         this.formValue();

package/dist/control.js.map

@@ -1 +1 @@
-{"version":3,"file":"control.js","sourceRoot":"","sources":["../widgets/control.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAK5D;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAgB,cAAe,SAAQ,WAAW;IACtD,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;IAK7B;;;;OAIG;IACc,SAAS,CAA0B;IAEpD,6CAA6C;IACrC,SAAS,GAAG,KAAK,CAAC;IAE1B;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACpC,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,OAAO;gBAAE,OAAO;YAC3D,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;;;;;;OASG;IACH,iBAAiB;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACvC,IAAI,IAAI,KAAK,IAAI;YAAE,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAC5D,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACrD,IAAI,OAAO,KAAK,IAAI;YAAE,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;IAC7C,CAAC;IAED,8DAA8D;IAC9D,IAAc,OAAO;QACnB,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC;IACnC,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CACX,GAAG,IAAI,CAAC,SAAS,SAAS,IAAI,CAAC,KAAK,wBAAwB,CAC7D,CAAC;YACF,OAAO;QACT,CAAC;QACD,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED;;;;OAIG;IACH,iBAAiB;QACf,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;IACzC,CAAC;IAED,2EAA2E;IACjE,OAAO;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,yEAAyE;IAC/D,SAAS;QACjB,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;;AAGH,SAAS,WAAW,CAAC,EAAe;IAClC,IAAI,CAAC;QACH,MAAM,SAAS,GAAG,EAAE,CAAC,eAAe,EAAE,CAAC;QACvC,OAAO,OAAO,SAAS,CAAC,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;IACzE,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { ATTR_COLUMN_VALUE } from \"@loadbare/app/constants\";\n\n/** The native controls a widget wraps. */\ntype Inner = HTMLInputElement | HTMLSelectElement;\n\n/**\n * A form-associated custom element wrapping one native control, which makes\n * the widget itself the control: the hub sets its `value` when a column\n * lands, reads it back when a request gathers, and commits it on `change`\n * when it carries `lb-request`. Nothing about a request is the widget's.\n *\n * The native control inside is an implementation detail. Its `change` is\n * stopped and fired again on the widget, so a listener sees one control and\n * one event per edit.\n *\n * Not a widget itself, so the file carries no `.browser` and no `lb-` name:\n * a consumer's builder passes it over, and each widget that extends it\n * brings it along.\n */\nexport abstract class WrappedControl extends HTMLElement {\n  static formAssociated = true;\n\n  /** `<input>` or `<select>`: what this widget wraps. */\n  protected abstract readonly inner: \"input\" | \"select\";\n\n  /**\n   * Null where the DOM implementation offers no form value, which includes\n   * jsdom: the widget still works as a control, and a native form submission\n   * leaves it out.\n   */\n  private readonly internals: ElementInternals | null;\n\n  /** Whether the widget has connected once. */\n  private connected = false;\n\n  constructor() {\n    super();\n    this.internals = internalsOf(this);\n    this.addEventListener(\"change\", (e) => {\n      if (e.target === this || e.target !== this.control) return;\n      e.stopPropagation();\n      this.changed();\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    });\n  }\n\n  /**\n   * A value that landed before this widget's definition did is only a\n   * stamp, since the hub sets `value` on a control and the element was not\n   * one yet. It is taken up the first time the widget connects, and never\n   * again: after that the hub sets `value` itself, and a later move must not\n   * undo an edit.\n   *\n   * The native control follows the widget's `form` attribute, so a form\n   * this widget joins by id resets the control inside it too.\n   */\n  connectedCallback(): void {\n    const form = this.getAttribute(\"form\");\n    if (form !== null) this.control?.setAttribute(\"form\", form);\n    if (this.connected) return;\n    this.connected = true;\n    const stamped = this.getAttribute(ATTR_COLUMN_VALUE);\n    if (stamped !== null) this.value = stamped;\n  }\n\n  /** The native control this widget wraps, once it is there. */\n  protected get control(): Inner | null {\n    return this.querySelector(this.inner);\n  }\n\n  get value(): string {\n    return this.control?.value ?? \"\";\n  }\n\n  set value(value: string) {\n    const control = this.control;\n    if (!control) {\n      console.error(\n        `${this.localName}: no <${this.inner}> to receive the value`,\n      );\n      return;\n    }\n    control.value = value;\n    this.formValue();\n  }\n\n  /**\n   * The native control is the form's too, and the form resets it by HTML's\n   * own algorithm. This widget comes first in tree order, so it tells the\n   * form its value once the control has been reset.\n   */\n  formResetCallback(): void {\n    queueMicrotask(() => this.formValue());\n  }\n\n  /** The inner control changed, before the widget fires its own `change`. */\n  protected changed(): void {\n    this.formValue();\n  }\n\n  /** Tell the form owner the value, where the implementation allows it. */\n  protected formValue(): void {\n    this.internals?.setFormValue(this.value);\n  }\n}\n\nfunction internalsOf(el: HTMLElement): ElementInternals | null {\n  try {\n    const internals = el.attachInternals();\n    return typeof internals.setFormValue === \"function\" ? internals : null;\n  } catch {\n    return null;\n  }\n}\n"]}
+{"version":3,"file":"control.js","sourceRoot":"","sources":["../widgets/control.ts"],"names":[],"mappings":"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","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { ATTR_COLUMN_VALUE } from \"@loadbare/app/constants\";\n\n/**\n * A form-associated custom element wrapping one native control, which makes\n * the widget itself the control: the hub sets its `value` when a column\n * lands, reads it back when a request gathers, and commits it on `change`\n * when it carries `lb-request`. Nothing about a request is the widget's.\n *\n * The native control inside is an implementation detail. Its `change` is\n * stopped and fired again on the widget, so a listener sees one control and\n * one event per edit.\n *\n * Not a widget itself, so the file carries no `.browser` and no `lb-` name:\n * a consumer's builder passes it over, and each widget that extends it\n * brings it along.\n */\nexport abstract class WrappedControl extends HTMLElement {\n  static formAssociated = true;\n\n  /** The tag of the native control this widget wraps. */\n  protected abstract inner: string;\n\n  /**\n   * Null where the DOM implementation offers no form value, which includes\n   * jsdom: the widget still works as a control, and a native form submission\n   * leaves it out.\n   */\n  private internals = internalsOf(this);\n\n  /** Whether the widget has connected once. */\n  private connected = false;\n\n  constructor() {\n    super();\n    this.addEventListener(\"change\", (e) => {\n      if (e.target === this || e.target !== this.control) return;\n      e.stopPropagation();\n      this.changed();\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    });\n  }\n\n  /**\n   * A value that landed before this widget's definition did is only a\n   * stamp, since the hub sets `value` on a control and the element was not\n   * one yet. It is taken up the first time the widget connects, and never\n   * again: after that the hub sets `value` itself, and a later move must not\n   * undo an edit.\n   *\n   * The native control follows the widget's `form` attribute, so a form\n   * this widget joins by id resets the control inside it too.\n   */\n  connectedCallback(): void {\n    const form = this.getAttribute(\"form\");\n    if (form !== null) this.control?.setAttribute(\"form\", form);\n    if (this.connected) return;\n    this.connected = true;\n    const stamped = this.getAttribute(ATTR_COLUMN_VALUE);\n    if (stamped !== null) this.value = stamped;\n  }\n\n  /** The native control this widget wraps, once it is there. */\n  protected get control(): HTMLInputElement | HTMLSelectElement | null {\n    return this.querySelector(this.inner);\n  }\n\n  get value(): string {\n    return this.control?.value ?? \"\";\n  }\n\n  set value(value: string) {\n    const control = this.control;\n    if (!control) {\n      console.error(\n        `${this.localName}: no <${this.inner}> to receive the value`,\n      );\n      return;\n    }\n    control.value = value ?? \"\";\n    this.formValue();\n  }\n\n  /**\n   * The native control is the form's too, and the form resets it by HTML's\n   * own algorithm. This widget comes first in tree order, so it tells the\n   * form its value once the control has been reset.\n   */\n  formResetCallback(): void {\n    queueMicrotask(() => this.formValue());\n  }\n\n  /**\n   * A message the hub sets when a handler refuses this control's column. It\n   * goes on the native control inside, which is what the form checks before\n   * it submits, what the browser shows the message beside, and what takes\n   * focus when it is reported.\n   */\n  setCustomValidity(message: string): void {\n    this.control?.setCustomValidity(message);\n  }\n\n  /** Show the native control's message, and focus it. */\n  reportValidity(): boolean {\n    return this.control?.reportValidity() ?? true;\n  }\n\n  /** The native control's message, empty when it has none. */\n  get validationMessage(): string {\n    return this.control?.validationMessage ?? \"\";\n  }\n\n  /** The inner control changed, before the widget fires its own `change`. */\n  protected changed(): void {\n    this.formValue();\n  }\n\n  /** Tell the form owner the value, where the implementation allows it. */\n  protected formValue(): void {\n    this.internals?.setFormValue(this.value);\n  }\n}\n\nfunction internalsOf(el: HTMLElement): ElementInternals | null {\n  try {\n    const internals = el.attachInternals();\n    return typeof internals.setFormValue === \"function\" ? internals : null;\n  } catch {\n    return null;\n  }\n}\n"]}

package/dist/index.d.ts

@@ -3,4 +3,6 @@ import "./lb-select.browser.js";
 import "./lb-options.browser.js";
 import "./lb-table.browser.js";
 import "./lb-picker.browser.js";
+import "./lb-confirm.browser.js";
+import "./lb-insert-dialog.browser.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC"}

package/dist/index.js

@@ -3,4 +3,6 @@ import "./lb-select.browser.js";
 import "./lb-options.browser.js";
 import "./lb-table.browser.js";
 import "./lb-picker.browser.js";
+import "./lb-confirm.browser.js";
+import "./lb-insert-dialog.browser.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC","sourcesContent":["import \"./lb-input.browser.js\";\nimport \"./lb-select.browser.js\";\nimport \"./lb-options.browser.js\";\nimport \"./lb-table.browser.js\";\nimport \"./lb-picker.browser.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC","sourcesContent":["import \"./lb-input.browser.js\";\nimport \"./lb-select.browser.js\";\nimport \"./lb-options.browser.js\";\nimport \"./lb-table.browser.js\";\nimport \"./lb-picker.browser.js\";\nimport \"./lb-confirm.browser.js\";\nimport \"./lb-insert-dialog.browser.js\";\n"]}

package/dist/lb-checkbox.html

@@ -0,0 +1,13 @@
+<!--
+  A checkbox with its label, as markup alone. The hub treats a native
+  checkbox as a control, so there is nothing for script to do: the widget
+  gives the box and its text one element an application styles.
+
+  The column and request go on the checkbox inside, since that is the
+  control, so they arrive as exp-column and exp-request rather than as
+  lb-column and lb-request on the tag.
+-->
+<label>
+  <input type="checkbox" lb-column="{{column}}" lb-request="{{request}}" />
+  <span>{{label}}</span>
+</label>

package/dist/lb-confirm.browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=lb-confirm.browser.d.ts.map

package/dist/lb-confirm.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-confirm.browser.d.ts","sourceRoot":"","sources":["../widgets/lb-confirm.browser.ts"],"names":[],"mappings":""}

package/dist/lb-confirm.browser.js

@@ -0,0 +1,36 @@
+/// <reference lib="dom" />
+import { LB_DONE_EVENT_NAME } from "@loadbare/app/constants";
+/**
+ * Opens and closes its own dialog, and nothing else.
+ *
+ * The dialog is found by position rather than by id, because ids repeat when
+ * the tag sits in a row template and the hub clones it once per row. HTML's
+ * own `commandfor` would open it with no script, but only by id.
+ *
+ * The confirm button carries `lb-request`, and the hub commits it. This code
+ * never touches the request; it closes the dialog when `lb-request-done` says
+ * the request succeeded. A refused request leaves the dialog open, with the
+ * hub's `lb-request-error` on the confirm button, so the user sees the
+ * refusal where they asked and can cancel or try again.
+ */
+class LbConfirm extends HTMLElement {
+    constructor() {
+        super();
+        this.addEventListener("click", (e) => {
+            const target = e.target;
+            if (target.closest("[data-open]"))
+                this.dialog.showModal();
+            else if (target.closest("[data-close]"))
+                this.dialog.close();
+        });
+        this.addEventListener(LB_DONE_EVENT_NAME, (e) => {
+            if (!e.detail.error)
+                this.dialog.close();
+        });
+    }
+    get dialog() {
+        return this.querySelector("dialog");
+    }
+}
+customElements.define("lb-confirm", LbConfirm);
+//# sourceMappingURL=lb-confirm.browser.js.map

package/dist/lb-confirm.browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-confirm.browser.js","sourceRoot":"","sources":["../widgets/lb-confirm.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D;;;;;;;;;;;;GAYG;AACH,MAAM,SAAU,SAAQ,WAAW;IACjC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACnC,MAAM,MAAM,GAAG,CAAC,CAAC,MAAiB,CAAC;YACnC,IAAI,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC;gBAAE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;iBACtD,IAAI,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC;gBAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QAC/D,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE;YAC9C,IAAI,CAAE,CAAiC,CAAC,MAAM,CAAC,KAAK;gBAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QAC5E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAY,MAAM;QAChB,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC;IACvC,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { LB_DONE_EVENT_NAME } from \"@loadbare/app/constants\";\nimport type { HubRequestDone } from \"@loadbare/app/types\";\n\n/**\n * Opens and closes its own dialog, and nothing else.\n *\n * The dialog is found by position rather than by id, because ids repeat when\n * the tag sits in a row template and the hub clones it once per row. HTML's\n * own `commandfor` would open it with no script, but only by id.\n *\n * The confirm button carries `lb-request`, and the hub commits it. This code\n * never touches the request; it closes the dialog when `lb-request-done` says\n * the request succeeded. A refused request leaves the dialog open, with the\n * hub's `lb-request-error` on the confirm button, so the user sees the\n * refusal where they asked and can cancel or try again.\n */\nclass LbConfirm extends HTMLElement {\n  constructor() {\n    super();\n    this.addEventListener(\"click\", (e) => {\n      const target = e.target as Element;\n      if (target.closest(\"[data-open]\")) this.dialog.showModal();\n      else if (target.closest(\"[data-close]\")) this.dialog.close();\n    });\n    this.addEventListener(LB_DONE_EVENT_NAME, (e) => {\n      if (!(e as CustomEvent<HubRequestDone>).detail.error) this.dialog.close();\n    });\n  }\n\n  private get dialog(): HTMLDialogElement {\n    return this.querySelector(\"dialog\")!;\n  }\n}\n\ncustomElements.define(\"lb-confirm\", LbConfirm);\n"]}

package/dist/lb-confirm.html

@@ -0,0 +1,27 @@
+<!--
+  A button that asks before it sends. The request is on the dialog's confirm
+  button, never on the tag: nothing reaches the hub until the user says yes,
+  so there is no request to catch and send again.
+
+  The dialog is in the page like any other element, inside whatever row the
+  tag sits in, so the confirm button's query and key are that row's, and the
+  message written inside the tag can show the row's columns with lb-column.
+
+  Cancel comes first and takes focus, so Enter on a dialog opened by accident
+  does nothing harmful. The confirm button does not close the dialog; the
+  widget does, once the request has succeeded.
+-->
+<button type="button" class="lb-confirm-open" data-open>{{label}}</button>
+<dialog class="lb-confirm-dialog">
+  <div class="lb-confirm-message" lb-exp-slot></div>
+  <div class="lb-confirm-buttons">
+    <button type="button" data-close autofocus>Cancel</button>
+    <button
+      type="button"
+      class="lb-confirm-yes"
+      lb-request="{{request}}"
+    >
+      {{confirm|Confirm}}
+    </button>
+  </div>
+</dialog>

package/dist/lb-form.html

@@ -0,0 +1,7 @@
+<!--
+  One row's controls, and nothing else. A button that acts on the row as a
+  whole adds a row to a set or takes one out, so it belongs to whatever holds
+  the set, and reaches the form from there the way HTML lets any button reach
+  any form: by `form="<id>"`.
+-->
+<form id="{{id}}" class="lb-form" lb-exp-slot></form>

package/dist/lb-input.browser.js

@@ -1,14 +1,14 @@
 /// <reference lib="dom" />
 import { WrappedControl } from "./control.js";
 /**
- * A control wrapping an `<input>`. The hub sets its `value` from the column
- * its `lb-column` names, and gathers it back under the same name.
+ * An `<input>` with its label, as one control. The hub sets its `value` from
+ * the column its `lb-column` names, and gathers it back under the same name.
  *
- * It issues nothing on its own. With `lb-request` it commits on `change`, and
- * the hub sends that request with this input's column alone: an
- * `lb-row-update` reaches the server with the query and key of the row it
- * sits in. Without `lb-request` an edit waits for the form or row around it,
- * because committing per field is one editing model and not the only one.
+ * Without `lb-request` a change commits nothing, which is what an input inside
+ * a form or a ghost row wants: the form gathers it on submit, and one that also
+ * sent its own request would write the same edit twice.
+ *
+ * Its definition takes `exp-type`, the input's `type`, `text` when absent.
  */
 class LbInput extends WrappedControl {
     inner = "input";

package/dist/lb-input.browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"lb-input.browser.js","sourceRoot":"","sources":["../widgets/lb-input.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;GASG;AACH,MAAM,OAAQ,SAAQ,cAAc;IACf,KAAK,GAAG,OAAO,CAAC;CACpC;AAED,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { WrappedControl } from \"./control.js\";\n\n/**\n * A control wrapping an `<input>`. The hub sets its `value` from the column\n * its `lb-column` names, and gathers it back under the same name.\n *\n * It issues nothing on its own. With `lb-request` it commits on `change`, and\n * the hub sends that request with this input's column alone: an\n * `lb-row-update` reaches the server with the query and key of the row it\n * sits in. Without `lb-request` an edit waits for the form or row around it,\n * because committing per field is one editing model and not the only one.\n */\nclass LbInput extends WrappedControl {\n  protected readonly inner = \"input\";\n}\n\ncustomElements.define(\"lb-input\", LbInput);\n"]}
+{"version":3,"file":"lb-input.browser.js","sourceRoot":"","sources":["../widgets/lb-input.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;GASG;AACH,MAAM,OAAQ,SAAQ,cAAc;IACxB,KAAK,GAAG,OAAO,CAAC;CAC3B;AAED,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { WrappedControl } from \"./control.js\";\n\n/**\n * An `<input>` with its label, as one control. The hub sets its `value` from\n * the column its `lb-column` names, and gathers it back under the same name.\n *\n * Without `lb-request` a change commits nothing, which is what an input inside\n * a form or a ghost row wants: the form gathers it on submit, and one that also\n * sent its own request would write the same edit twice.\n *\n * Its definition takes `exp-type`, the input's `type`, `text` when absent.\n */\nclass LbInput extends WrappedControl {\n  protected inner = \"input\";\n}\n\ncustomElements.define(\"lb-input\", LbInput);\n"]}

package/dist/lb-input.html

@@ -1 +1 @@
-<label>{{label}} <input readonly="{{readonly}}" /></label>
+<label>{{label}} <input type="{{type|text}}" readonly="{{readonly}}" /></label>

package/dist/lb-insert-dialog.browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=lb-insert-dialog.browser.d.ts.map

package/dist/lb-insert-dialog.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-insert-dialog.browser.d.ts","sourceRoot":"","sources":["../widgets/lb-insert-dialog.browser.ts"],"names":[],"mappings":""}

package/dist/lb-insert-dialog.browser.js

@@ -0,0 +1,59 @@
+/// <reference lib="dom" />
+import { LB_DONE_EVENT_NAME } from "@loadbare/app/constants";
+/**
+ * Two rules. Closing the dialog resets the form, and the row the form creates
+ * is chosen in the picker the dialog was opened from.
+ *
+ * Save closes the dialog when `lb-request-done` says the insert succeeded,
+ * so there is a row to show for it, and a refusal leaves the entry open to
+ * correct. Cancel and Escape close it, and throw away what was typed.
+ *
+ * The picker is the nearest `lb-options` around the button that opened the
+ * dialog, which a `command` event names as its `source`. The new row's key is
+ * in the patch the insert answers with, and by the time `lb-request-done`
+ * reaches here that row is among the picker's options. Choosing it fires
+ * `change`, so a picker that saves its own column saves it, and one in a ghost
+ * row or a new record holds it until Save.
+ *
+ * `close` and `command` do not bubble, so they are heard in capture.
+ */
+class LbInsertDialog extends HTMLElement {
+    /** The button that last opened the dialog. */
+    opener = null;
+    constructor() {
+        super();
+        this.addEventListener("close", () => this.querySelector("form")?.reset(), true);
+        this.addEventListener("command", (e) => {
+            this.opener = e.source ?? null;
+        }, true);
+        this.addEventListener(LB_DONE_EVENT_NAME, (e) => {
+            const { request, items, error } = e
+                .detail;
+            if (error)
+                return;
+            const item = items.find((i) => i.query === request.query);
+            const created = item?.patch?.rows?.[0];
+            if (created)
+                this.choose(String(created[item.key]));
+            this.querySelector("dialog")?.close();
+        });
+    }
+    choose(key) {
+        const picker = pickerNear(this.opener);
+        if (!picker)
+            return;
+        picker.value = key;
+        picker.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+}
+/** The nearest `lb-options` around an element, searching outward. */
+function pickerNear(el) {
+    for (let node = el?.parentElement; node; node = node.parentElement) {
+        const found = node.querySelector("lb-options");
+        if (found)
+            return found;
+    }
+    return null;
+}
+customElements.define("lb-insert-dialog", LbInsertDialog);
+//# sourceMappingURL=lb-insert-dialog.browser.js.map

package/dist/lb-insert-dialog.browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-insert-dialog.browser.js","sourceRoot":"","sources":["../widgets/lb-insert-dialog.browser.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,cAAe,SAAQ,WAAW;IACtC,8CAA8C;IACtC,MAAM,GAAmB,IAAI,CAAC;IAEtC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CACnB,OAAO,EACP,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,EACzC,IAAI,CACL,CAAC;QACF,IAAI,CAAC,gBAAgB,CACnB,SAAS,EACT,CAAC,CAAC,EAAE,EAAE;YACJ,IAAI,CAAC,MAAM,GAAI,CAAyC,CAAC,MAAM,IAAI,IAAI,CAAC;QAC1E,CAAC,EACD,IAAI,CACL,CAAC;QACF,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,CAAC,CAAC,EAAE,EAAE;YAC9C,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,GAAI,CAAiC;iBACjE,MAAM,CAAC;YACV,IAAI,KAAK;gBAAE,OAAO;YAClB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;YAC1D,MAAM,OAAO,GAAG,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;YACvC,IAAI,OAAO;gBAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,IAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACrD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,MAAM,CAAC,GAAW;QACxB,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACvC,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC;QACnB,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC/D,CAAC;CACF;AAED,qEAAqE;AACrE,SAAS,UAAU,CACjB,EAAkB;IAElB,KAAK,IAAI,IAAI,GAAG,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACnE,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QAC/C,IAAI,KAAK;YAAE,OAAO,KAAwC,CAAC;IAC7D,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n\nimport { LB_DONE_EVENT_NAME } from \"@loadbare/app/constants\";\nimport type { HubRequestDone } from \"@loadbare/app/types\";\n\n/**\n * Two rules. Closing the dialog resets the form, and the row the form creates\n * is chosen in the picker the dialog was opened from.\n *\n * Save closes the dialog when `lb-request-done` says the insert succeeded,\n * so there is a row to show for it, and a refusal leaves the entry open to\n * correct. Cancel and Escape close it, and throw away what was typed.\n *\n * The picker is the nearest `lb-options` around the button that opened the\n * dialog, which a `command` event names as its `source`. The new row's key is\n * in the patch the insert answers with, and by the time `lb-request-done`\n * reaches here that row is among the picker's options. Choosing it fires\n * `change`, so a picker that saves its own column saves it, and one in a ghost\n * row or a new record holds it until Save.\n *\n * `close` and `command` do not bubble, so they are heard in capture.\n */\nclass LbInsertDialog extends HTMLElement {\n  /** The button that last opened the dialog. */\n  private opener: Element | null = null;\n\n  constructor() {\n    super();\n    this.addEventListener(\n      \"close\",\n      () => this.querySelector(\"form\")?.reset(),\n      true,\n    );\n    this.addEventListener(\n      \"command\",\n      (e) => {\n        this.opener = (e as Event & { source?: Element | null }).source ?? null;\n      },\n      true,\n    );\n    this.addEventListener(LB_DONE_EVENT_NAME, (e) => {\n      const { request, items, error } = (e as CustomEvent<HubRequestDone>)\n        .detail;\n      if (error) return;\n      const item = items.find((i) => i.query === request.query);\n      const created = item?.patch?.rows?.[0];\n      if (created) this.choose(String(created[item!.key]));\n      this.querySelector(\"dialog\")?.close();\n    });\n  }\n\n  private choose(key: string): void {\n    const picker = pickerNear(this.opener);\n    if (!picker) return;\n    picker.value = key;\n    picker.dispatchEvent(new Event(\"change\", { bubbles: true }));\n  }\n}\n\n/** The nearest `lb-options` around an element, searching outward. */\nfunction pickerNear(\n  el: Element | null,\n): (HTMLElement & { value: string }) | null {\n  for (let node = el?.parentElement; node; node = node.parentElement) {\n    const found = node.querySelector(\"lb-options\");\n    if (found) return found as HTMLElement & { value: string };\n  }\n  return null;\n}\n\ncustomElements.define(\"lb-insert-dialog\", LbInsertDialog);\n"]}

package/dist/lb-insert-dialog.html

@@ -0,0 +1,25 @@
+<!--
+  A row entered in a modal dialog, for a set that is being chosen from
+  somewhere else on the page. The page writes the controls inside the tag and
+  names the query with exp-query; the dialog supplies the form and its two
+  buttons.
+
+  It is written once, outside every row, and opened by id with HTML's own
+  commandfor="{{id}}" command="show-modal" on as many buttons as want it. It
+  cannot sit beside the control it serves: a form inside another form is
+  dropped by the parser, and lb-table joins every control in a ghost row to
+  that row's form.
+
+  Save is the form's lb-row-insert. Cancel is HTML's close command, and
+  closing resets the form.
+-->
+<dialog id="{{id}}" class="lb-insert-dialog">
+  <h2>{{title}}</h2>
+  <form lb-query="{{query}}" lb-request="lb-row-insert">
+    <div class="lb-insert-dialog-controls" lb-exp-slot></div>
+    <div class="lb-insert-dialog-buttons">
+      <button type="button" commandfor="{{id}}" command="close">Cancel</button>
+      <button type="submit">{{save|Save}}</button>
+    </div>
+  </form>
+</dialog>

package/dist/lb-master.html

@@ -0,0 +1,56 @@
+<!--
+  A set on the left, one of its rows on the right, and the buttons that act on
+  the set. The page writes the picker into the "picker" template and the row's
+  controls inside the tag, and names the row's query with exp-row.
+
+  The row lands on the element around the form and the bar, so every button
+  there knows which row it means. A row with an empty key is a new one not
+  yet entered, and the stylesheet shows each button only in the mode it
+  belongs to.
+
+  The standard bar is [New] [Copy] [Delete] [Save new] [Cancel].
+  - New is a request the page declares, `new`. Which row shows is a query
+    parm, and a button writes none, so the page's handler returns url()
+    emptying the parm, and the row query answers a row not yet entered.
+    It pushes a history entry, so Back returns to the row on record.
+  - Copy is a request the page declares, `copy`. It goes to the server by
+    design rather than filling the form for Save new: a copy is a new row in
+    the set, and only the server can bring its children along. What comes
+    along is the page's to decide.
+  - Delete asks first. The page writes the question into the
+    "delete-message" template; it sits in the row, so lb-column can name
+    what is about to go.
+  - Cancel is HTML's reset: it throws away what was typed into a new row.
+-->
+<div class="lb-master">
+  <div class="lb-master-picker" lb-exp-template="picker"></div>
+  <div class="lb-master-row" lb-query="{{row}}">
+    <lb-form exp-id="{{form-id|master-form}}" lb-exp-slot></lb-form>
+    <div class="lb-master-buttons">
+      <button type="button" lb-request="new" lb-url-push data-mode="on-record">
+        New
+      </button>
+      <button type="button" lb-request="copy" data-mode="on-record">Copy</button>
+      <lb-confirm
+        exp-label="Delete"
+        exp-request="lb-row-delete"
+        exp-confirm="Delete"
+        data-mode="on-record"
+      >
+        <div lb-exp-template="delete-message"></div>
+      </lb-confirm>
+      <button
+        type="submit"
+        form="{{form-id|master-form}}"
+        lb-request="lb-row-insert"
+        lb-url-push
+        data-mode="new"
+      >
+        Save new
+      </button>
+      <button type="reset" form="{{form-id|master-form}}" data-mode="new">
+        Cancel
+      </button>
+    </div>
+  </div>
+</div>

package/dist/lb-options.browser.d.ts

@@ -1,7 +1,33 @@
-import type { Row, RowsHost } from "@loadbare/app/types";
+import type { RowsHost } from "@loadbare/app/types";
 import { WrappedControl } from "./control.js";
+/**
+ * A `<select>` whose choices are the rows of the query it names.
+ *
+ * The hub places the options by the query's order, and a group template
+ * holding an `<optgroup>` puts them in groups. What landing does not give an
+ * `<optgroup>` is its label, so the widget sets it from the `lb-group-value`
+ * the hub stamps on it.
+ *
+ * The identity of a row is the value of its option, so the `lb-key-value` the
+ * hub stamps on each option is copied to its `value`. The key column is the
+ * one the server declared for the query; the page never names it.
+ *
+ * It is two things at once, and the hub keeps them apart: its own `lb-query`
+ * names the rows it offers, and its `lb-column` is a column of the row around
+ * it, which is what it holds and what it sends. As a control it is
+ * form-associated, with a `value` and a `change` of its own, so the hub lands
+ * that column on `value` and commits `lb-request` on `change`.
+ *
+ * The value is held here as well as on the select. A `<select>` does not hold
+ * a value it has no option for: it selects nothing and forgets it. The value
+ * and the choices are two answers that land in either order, so the held
+ * value is put on the select again whenever rows land.
+ *
+ * Exported because `lb-picker` is this widget with its row template supplied
+ * by the definition instead of by the page.
+ */
 export declare class LbOptions extends WrappedControl implements RowsHost {
-    protected readonly inner = "select";
+    protected inner: string;
     /**
      * The value last set or chosen, which the options may not include yet.
      * Null when nothing chose one, so the select's own default stands.
@@ -11,14 +37,7 @@ export declare class LbOptions extends WrappedControl implements RowsHost {
     set value(value: string);
     formResetCallback(): void;
     protected changed(): void;
-    /**
-     * The hub reconciles the rows and calls this for placement only, so this
-     * widget carries no copy of what a row is or when one arrives.
-     */
-    lbPlaceRow(el: Element, row: Row, template: HTMLTemplateElement): void;
-    /** Everything derived from the rows, once the whole result has landed. */
+    /** Everything derived from the rows, once the whole answer has landed. */
     lbRowsLanded(): void;
-    /** The group with this label, or a new one in front of the template. */
-    private groupFor;
 }
 //# sourceMappingURL=lb-options.browser.d.ts.map

package/dist/lb-options.browser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lb-options.browser.d.ts","sourceRoot":"","sources":["../widgets/lb-options.browser.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AA8B9C,qBAAa,SAAU,SAAQ,cAAe,YAAW,QAAQ;IAC/D,SAAS,CAAC,QAAQ,CAAC,KAAK,YAAY;IAEpC;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAuB;IAErC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAED,iBAAiB,IAAI,IAAI;IAKzB,SAAS,CAAC,OAAO,IAAI,IAAI;IAKzB;;;OAGG;IACH,UAAU,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,mBAAmB,GAAG,IAAI;IAUtE,0EAA0E;IAC1E,YAAY,IAAI,IAAI;IAgBpB,wEAAwE;IACxE,OAAO,CAAC,QAAQ;CASjB"}
+{"version":3,"file":"lb-options.browser.d.ts","sourceRoot":"","sources":["../widgets/lb-options.browser.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,qBAAa,SAAU,SAAQ,cAAe,YAAW,QAAQ;IAC/D,SAAS,CAAC,KAAK,SAAY;IAE3B;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAuB;IAErC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAED,iBAAiB,IAAI,IAAI;IAKzB,SAAS,CAAC,OAAO,IAAI,IAAI;IAKzB,0EAA0E;IAC1E,YAAY,IAAI,IAAI;CAcrB"}