@es-joy/jsoe 0.28.2 → 0.30.0

package/src/search/fundamentalTypes/dateSearchType.js

@@ -0,0 +1,166 @@
+import {buildDateInputControl} from '../../fundamentalTypes/dateType.js';
+import {
+  buildPathLabel, buildTriStateSelect, readTriStateSelect, isExemptedByAncestorHasProperty
+} from '../searchUtils.js';
+import {makeRangeLeaf, makeValidDateCheckLeaf, combineAnd} from '../queryTreeBuilders.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * Reads the two `datetime-local` inputs directly off the element rather
+ * than off any closed-over reference, since a custom element's mixin
+ * methods (`$define`, search plan §8) are installed once on the shared
+ * prototype the first time the tag is defined - every instance must read
+ * its own state off `this`, never off a build-time closure variable.
+ * @param {Element} el
+ * @returns {{gte: string, lte: string}}
+ */
+function readInputs (el) {
+  const [gteInput, lteInput] = /** @type {HTMLInputElement[]} */ (
+    [...el.querySelectorAll('input[type="datetime-local"]')]
+  );
+  return {gte: gteInput.value, lte: lteInput.value};
+}
+
+/**
+ * Cross-validates the pair the same way `searchUtils.js`'s
+ * `buildRangeInputsPair` does for its own (numeric) range pairs: leaving
+ * both ends blank is invalid (an added range row needs *some* bound, same
+ * "no absent values" reasoning as `buildLiteralRegexControls`'s Value
+ * input) - but only while the "Valid: (any)" tri-state is still unset.
+ * Once "Valid date" or "Invalid date" is explicitly chosen, that alone is
+ * already a complete constraint, so the range goes back to being fully
+ * optional (an empty range combined with "Valid date" still means
+ * something: "matches any valid date"); "Invalid date" additionally
+ * disables the whole fieldset (an "Invalid Date" has no orderable time
+ * value to compare), which independently exempts it from constraint
+ * validation regardless. If both ends are filled with "To" before "From",
+ * that's invalid either way. `datetime-local` values (`YYYY-MM-DDTHH:mm`)
+ * compare correctly as plain strings, so no `Date` parsing is needed here.
+ * Also called (with `this` as the `<jsoe-search-date>` root itself, which
+ * `this.closest('jsoe-search-date')` still resolves to - `closest` checks
+ * the element itself first) from the widget's own `connectedCallback` below
+ * and from the "Valid" tri-state's own `change` handler (the "at least one
+ * bound" requirement itself flips based on that selection, not just the
+ * range values) - the same reason `searchUtils.js`'s `syncRangeValidity`
+ * gives for `connectedCallback`: the `input`/`change` events wired below
+ * only fire from the user's first interaction, so a freshly-built pair
+ * would otherwise stay "valid" until then. Also relaxed, independently of
+ * its own local "Valid" tri-state, while `isExemptedByAncestorHasProperty`
+ * says an enclosing `objectSearchType.js` has-property row's own "Has"/
+ * "Doesn't have" already provides a complete constraint (e.g. this is a
+ * `date`-typed property's own widget).
+ * @this {Element}
+ * @returns {void}
+ */
+function validateRange () {
+  const root = this.closest('jsoe-search-date');
+  if (!root) {
+    return;
+  }
+  const {gte, lte} = readInputs(root);
+  const [gteInput, lteInput] = /** @type {HTMLInputElement[]} */ (
+    [...root.querySelectorAll('input[type="datetime-local"]')]
+  );
+  const requiresBound = readTriStateSelect(root, 'valid') === undefined &&
+    !isExemptedByAncestorHasProperty(root);
+  const bothEmpty = requiresBound && gte === '' && lte === '';
+  const outOfOrder = gte !== '' && lte !== '' && lte < gte;
+  const emptyMessage = 'Enter at least one bound (From or To).';
+  gteInput.setCustomValidity(bothEmpty ? emptyMessage : '');
+  let lteMessage = '';
+  if (bothEmpty) {
+    lteMessage = emptyMessage;
+  } else if (outOfOrder) {
+    lteMessage = 'End of range must not be before the start of the range.';
+  }
+  lteInput.setCustomValidity(lteMessage);
+}
+
+/**
+ * OR date range/Is Not Range, Is/Is not a valid date (README) -
+ * `dateType.js`'s own `buildDateInputControl` is reused twice (range start/
+ * end) so the min/max wiring and ISO-slicing stay in one place. Choosing
+ * "Invalid date" disables the range fieldset (an "Invalid Date" has no
+ * orderable time value to compare - same as `dateType.js`'s own
+ * `notANum`/`ValidDate`/`InvalidDate` handling treating it as a distinct
+ * state from an ordinary `Date`), producing a `validDateCheck` leaf
+ * (`queryTreeBuilders.js`) instead of/alongside the range leaf.
+ * @type {SearchTypeObject}
+ */
+const dateSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const dateSchemaObject = /** @type {import('zodexy').SzDate} */ (
+      schemaObject
+    );
+    const name = `${typeNamespace}-date`;
+    return ['jsoe-search-date', {
+      dataset: {searchPath: path, searchKind: 'date'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          validateRange.call(this);
+        },
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const validCheck = readTriStateSelect(this, 'valid');
+          const validLeaf = validCheck === undefined
+            ? undefined
+            : makeValidDateCheckLeaf(searchPath, validCheck);
+          const {gte, lte} = readInputs(this);
+          const rangeLeaf = validCheck === false || (!gte && !lte)
+            ? undefined
+            : makeRangeLeaf(searchPath, 'date', {
+              ...(gte ? {$gte: new Date(gte).toISOString()} : {}),
+              ...(lte ? {$lte: new Date(lte).toISOString()} : {})
+            });
+          return combineAnd([validLeaf, rangeLeaf]);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ['label', [
+        'Valid: ',
+        buildTriStateSelect({
+          name: `${name}-valid`, key: 'valid', trueLabel: 'Valid date',
+          falseLabel: 'Invalid date',
+          /** @this {HTMLElement} */
+          onChange () {
+            const root = this.closest('jsoe-search-date');
+            const fieldset = root?.querySelector('fieldset.searchDateRangeFieldset');
+            if (fieldset) {
+              /** @type {HTMLFieldSetElement} */ (fieldset).disabled =
+                /** @type {HTMLSelectElement} */ (this).value === 'false';
+            }
+            if (root) {
+              validateRange.call(root);
+            }
+          }
+        })
+      ]],
+      ['fieldset', {class: 'searchDateRangeFieldset'}, [
+        ['label', [
+          'From: ',
+          buildDateInputControl({
+            name: `${name}-gte`, dateSchemaObject, onValidate: validateRange
+          })
+        ]],
+        ['label', [
+          'To: ',
+          buildDateInputControl({
+            name: `${name}-lte`, dateSchemaObject, onValidate: validateRange
+          })
+        ]]
+      ]]
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default dateSearchType;

package/src/search/fundamentalTypes/domexceptionSearchType.js

@@ -0,0 +1,84 @@
+import {domExceptionNames} from '../../fundamentalTypes/domexceptionType.js';
+import {
+  buildPathLabel, buildMultiSelect, readMultiSelect, buildLiteralRegexControls,
+  readLiteralRegexQuery, buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
+import {makeMultiSelectLeaf, combineAnd} from '../queryTreeBuilders.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+import regexpType from '../../fundamentalTypes/regexpType.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * @param {Element} root - a `jsoe-search-domexception` element
+ * @returns {void}
+ */
+function syncDomexceptionValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readMultiSelect(root).length > 0 || readOptInChecked(root, 'message')
+  );
+}
+
+/**
+ * DOMException: Literal/Regex search of child string properties; also
+ * pull-down of name for DOMException (README) - `.name` gets the
+ * multi-select pull-down (its standard predefined values, imported as-is
+ * from `domexceptionType.js`'s own `domExceptionNames` export rather than a
+ * second copy of the list, and already properly optional on its own - an
+ * empty selection needs no opt-in gate), `.message` gets the usual literal/
+ * regex/does-not-contain control (wrapped in `buildOptInFieldset`, since
+ * that one *does* carry a `required` Value input), combined via `$and`.
+ * `buildAtLeastOneSentinel` requires at least one of the two.
+ * @type {SearchTypeObject}
+ */
+const domexceptionSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-domexception`;
+    return ['jsoe-search-domexception', {
+      dataset: {searchPath: path, searchKind: 'domexception'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          this.querySelector('select.jsoeSearchMultiSelect')?.addEventListener(
+            'change', () => syncDomexceptionValidity(this)
+          );
+          wireOptInFieldset(this, 'message', () => syncDomexceptionValidity(this));
+          syncDomexceptionValidity(this);
+        },
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const selectedNames = readMultiSelect(this);
+          const nameLeaf = selectedNames.length
+            ? makeMultiSelectLeaf(`${searchPath}/name`, {$in: selectedNames})
+            : undefined;
+          const messageLeaf = readOptInChecked(this, 'message')
+            ? readLiteralRegexQuery(this, `${searchPath}/message`, 'message')
+            : undefined;
+          return combineAnd([nameLeaf, messageLeaf]);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ['div', {class: 'domexceptionName'}, [
+        ['span', ['Name: ']],
+        buildMultiSelect({name: `${name}-name`, options: domExceptionNames})
+      ]],
+      ...buildOptInFieldset({
+        name: `${name}-message`, key: 'message', label: 'Message',
+        children: [buildLiteralRegexControls({
+          name: `${name}-message`, key: 'message', flagOptions: regexpType.allowedFlags
+        })]
+      }),
+      buildAtLeastOneSentinel()
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default domexceptionSearchType;

package/src/search/fundamentalTypes/enumSearchType.js

@@ -0,0 +1,62 @@
+import {buildPathLabel, buildMultiSelect, readMultiSelect} from '../searchUtils.js';
+import {makeMultiSelectLeaf} from '../queryTreeBuilders.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * Enum, Native Enum: multiple select (README). The value-editing side has
+ * no dedicated `enumType.js` (`getSchemaType` resolves `enum` to whatever
+ * its underlying value type is), but search needs the actual allowed
+ * values listed, so this is one of the search-only dedicated modules
+ * (search plan §1).
+ *
+ * The README's further "native enum also can search key vs. value" is not
+ * implemented by this pass - only the plain multi-select-of-values
+ * affordance every enum gets either way. A native enum whose keys differ
+ * from its values (unlike a plain `z.enum([...])`, where they're the same)
+ * still gets a usable widget here, just not that extra key-vs-value mode
+ * yet; `values`'s keys are shown alongside their value as a hint.
+ * `buildMultiSelect`'s `required` leaves the whole selection invalid until
+ * at least one value is picked, natively (no build-time-empty gap like
+ * `buildRangeInputsPair`'s custom validity needed a `connectedCallback`
+ * for - `<select multiple required>` is evaluated by the browser itself).
+ * @type {SearchTypeObject}
+ */
+const enumSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-enum`;
+    const {values} = /** @type {import('zodexy').SzEnum} */ (
+      schemaObject
+    );
+    const options = Object.entries(values).map(([key, value]) => {
+      const strValue = String(value);
+      return /** @type {[string, string]} */ ([
+        strValue,
+        key === strValue ? strValue : `${strValue} (${key})`
+      ]);
+    });
+    return ['jsoe-search-enum', {
+      dataset: {searchPath: path, searchKind: 'enum'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        getQuery () {
+          const selected = readMultiSelect(this);
+          return selected.length
+            ? makeMultiSelectLeaf(this.dataset.searchPath ?? '', {$in: selected})
+            : undefined;
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      buildMultiSelect({name, options, required: true})
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default enumSearchType;

package/src/search/fundamentalTypes/errorSearchType.js

@@ -0,0 +1,11 @@
+import {makeErrorFamilySearchType} from '../searchElementUtils.js';
+
+/**
+ * Error: Literal/Regex search of child string properties, numeric of
+ * number children (README) - see `searchElementUtils.js`'s
+ * `makeErrorFamilySearchType` for the shared implementation.
+ * @type {import('../searchDispatch.js').SearchTypeObject}
+ */
+const errorSearchType = makeErrorFamilySearchType({tagName: 'jsoe-search-error'});
+
+export default errorSearchType;

package/src/search/fundamentalTypes/fileSearchType.js

@@ -0,0 +1,94 @@
+import {
+  buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
+import {combineAnd} from '../queryTreeBuilders.js';
+import {getQueryViaElement} from '../searchElementUtils.js';
+import regexpType from '../../fundamentalTypes/regexpType.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * @param {Element} root - a `jsoe-search-file` element
+ * @returns {void}
+ */
+function syncFileValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readOptInChecked(root, 'name') || readOptInChecked(root, 'type')
+  );
+}
+
+/**
+ * File: OR literal or regex search/Does Not contain search (README, grouped
+ * with string/StringObject/Blob/regexp-source/symbol-description) - against
+ * both the File's `.name` and its `.type` (content/MIME type, the same
+ * facet `blobSearchType.js` targets for `Blob`), each a value-level facet
+ * the schema itself carries no constraint for (`SzFile` only has
+ * `min`/`max`/`mime`, and `mime` is a fixed *allow-list* for validation, not
+ * a per-instance value to search against). `name`/`type` sub-paths
+ * distinguish the two facets (`${path}/name`, `${path}/type`, matching the
+ * real `File` property each reads back), the same convention
+ * `errorSearchType.js` uses for its own multiple flat facets, combined via
+ * `$and`. Each facet is independently opt-in (`buildOptInFieldset`, so
+ * checking against just the name, or just the content type, is as easy as
+ * checking against both), but leaving *both* unopted-in is itself invalid
+ * (`buildAtLeastOneSentinel`) - the same "key or value, not necessarily
+ * both" shape `mapSearchType.js`/`recordSearchType.js` use. `SzFile`'s own
+ * `min`/`max` (byte size) is left for a later pass - the README's literal/
+ * regex bullet doesn't ask for a size range here, and README explicitly
+ * reserves that shape of control ("OR Range/Is Not Range") for
+ * `buffersource` instead. `filelistSearchType.js` recurses its element
+ * schema through this same module, so a `FileList`'s per-file search gets
+ * both facets for free.
+ * @type {SearchTypeObject}
+ */
+const fileSearchType = {
+  buildUI ({schemaObject, path, typeNamespace}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-file`;
+    return ['jsoe-search-file', {
+      dataset: {searchPath: path, searchKind: 'file'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, 'name', () => syncFileValidity(this));
+          wireOptInFieldset(this, 'type', () => syncFileValidity(this));
+          syncFileValidity(this);
+        },
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const nameLeaf = readOptInChecked(this, 'name')
+            ? readLiteralRegexQuery(this, `${searchPath}/name`, 'name')
+            : undefined;
+          const typeLeaf = readOptInChecked(this, 'type')
+            ? readLiteralRegexQuery(this, `${searchPath}/type`, 'type')
+            : undefined;
+          return combineAnd([nameLeaf, typeLeaf]);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ...buildOptInFieldset({
+        name: `${name}-name`, key: 'name', label: 'Name',
+        children: [buildLiteralRegexControls({
+          name: `${name}-name`, key: 'name', flagOptions: regexpType.allowedFlags
+        })]
+      }),
+      ...buildOptInFieldset({
+        name: `${name}-type`, key: 'type', label: 'Content type',
+        children: [buildLiteralRegexControls({
+          name: `${name}-type`, key: 'type', flagOptions: regexpType.allowedFlags
+        })]
+      }),
+      buildAtLeastOneSentinel()
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default fileSearchType;

package/src/search/fundamentalTypes/filelistSearchType.js

@@ -0,0 +1,103 @@
+import {
+  buildPathLabel, buildLengthSizeControls, readLengthSizeQuery,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
+import {combineAnd} from '../queryTreeBuilders.js';
+import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
+import {buildSearchWidget} from '../searchDispatch.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * @typedef {{
+ *   type: 'array',
+ *   element: import('../../formats/schema.js').ZodexSchema,
+ *   minLength?: number,
+ *   maxLength?: number
+ * }} FilelistOutputSchema
+ */
+
+/**
+ * @param {Element} root - a `jsoe-search-filelist` element
+ * @returns {void}
+ */
+function syncFilelistValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readLengthSizeQuery(root, '') !== undefined || readOptInChecked(root)
+  );
+}
+
+/**
+ * Has length/size of <number> (README, grouped with array/set/
+ * tuple-with-rest) - no sparse toggle, matching `setSearchType.js`. A
+ * `FileList` schema serializes as `{type: 'codec', name: 'filelist',
+ * output: {type: 'array', element: {type: 'file', ...}}}`
+ * (`src/formats/schema.js`'s `codec`/`filelist` handling); the length
+ * bounds and element schema both live on that `output` array shape, whose
+ * element recurses into `fileSearchType.js` under the same `*` path-segment
+ * convention `arraySearchType.js` uses. Leaving *both* length/size and the
+ * element match unconfigured is still invalid, though
+ * (`buildAtLeastOneSentinel`), same as `arraySearchType.js`/
+ * `setSearchType.js`.
+ * @type {SearchTypeObject}
+ */
+const filelistSearchType = {
+  buildUI ({schemaObject, path, typeNamespace, topRoot, types, originalJSON}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-filelist`;
+    const outputSchema = /** @type {FilelistOutputSchema} */ (
+      /** @type {{output: unknown}} */ (schemaObject).output
+    );
+    const elementPath = `${path}/*`;
+    const elementArr = buildSearchWidget({
+      schemaObject: outputSchema.element,
+      path: elementPath,
+      typeNamespace,
+      topRoot,
+      types,
+      originalJSON
+    });
+    return ['jsoe-search-filelist', {
+      dataset: {searchPath: path, searchKind: 'filelist'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, '', () => syncFilelistValidity(this));
+          this.querySelector('input.jsoeSearchSize')?.addEventListener(
+            'input', () => syncFilelistValidity(this)
+          );
+          syncFilelistValidity(this);
+        },
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const lengthLeaf = readLengthSizeQuery(this, searchPath);
+          const elementEl = findSearchElement(this, `${searchPath}/*`);
+          const elementLeaf = elementEl && hasGetQuery(elementEl) && readOptInChecked(this)
+            ? elementEl.getQuery()
+            : undefined;
+          return combineAnd([lengthLeaf, elementLeaf]);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ...buildLengthSizeControls({
+        name,
+        min: outputSchema.minLength,
+        max: outputSchema.maxLength,
+        includeSparse: false
+      }),
+      ...buildOptInFieldset({
+        name: `${name}-element`, label: 'File matches', children: [elementArr]
+      }),
+      buildAtLeastOneSentinel()
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default filelistSearchType;

package/src/search/fundamentalTypes/functionSearchType.js

@@ -0,0 +1,102 @@
+import {
+  buildPathLabel, buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
+import {combineAnd} from '../queryTreeBuilders.js';
+import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
+import {buildSearchWidget} from '../searchDispatch.js';
+
+/**
+ * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
+ */
+
+/**
+ * @param {Element} root - a `jsoe-search-function` element
+ * @returns {void}
+ */
+function syncFunctionValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readOptInChecked(root, 'args') || readOptInChecked(root, 'output')
+  );
+}
+
+/**
+ * Function; pass on args, return type (README) - recurses into both
+ * `.input` (itself a tuple, so its own per-position controls come for free
+ * via `tupleSearchType.js`) and `.output`, at `*args`/`*output` path
+ * segments (`queryTree.js`), combined via `$and`. The build order's own
+ * note that `function` is "fuzzy" in the README and could ship as a
+ * minimal stub predates `tupleSearchType.js` existing; now that it does,
+ * recursing into `.input` through it is no more work than `.output` alone
+ * would have been. Each is wrapped in its own `buildOptInFieldset` (an args
+ * tuple's own positions are themselves individually opt-in, so args as a
+ * whole needs the same treatment one level up), with
+ * `buildAtLeastOneSentinel` requiring at least one of the two.
+ * @type {SearchTypeObject}
+ */
+const functionSearchType = {
+  buildUI ({schemaObject, path, typeNamespace, topRoot, types, originalJSON}) {
+    const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-function`;
+    const functionSchemaObject = /** @type {import('zodexy').SzFunction<any, any>} */ (
+      schemaObject
+    );
+    const argsPath = `${path}/*args`;
+    const outputPath = `${path}/*output`;
+    const argsArr = buildSearchWidget({
+      schemaObject: functionSchemaObject.input,
+      path: argsPath,
+      typeNamespace,
+      topRoot,
+      types,
+      originalJSON
+    });
+    const outputArr = buildSearchWidget({
+      schemaObject: functionSchemaObject.output,
+      path: outputPath,
+      typeNamespace,
+      topRoot,
+      types,
+      originalJSON
+    });
+    return ['jsoe-search-function', {
+      dataset: {searchPath: path, searchKind: 'function'},
+      title: label,
+      $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, 'args', () => syncFunctionValidity(this));
+          wireOptInFieldset(this, 'output', () => syncFunctionValidity(this));
+          syncFunctionValidity(this);
+        },
+        /** @this {HTMLElement} */
+        getQuery () {
+          const searchPath = this.dataset.searchPath ?? '';
+          const argsEl = findSearchElement(this, `${searchPath}/*args`);
+          const outputEl = findSearchElement(this, `${searchPath}/*output`);
+          const argsQuery = argsEl && hasGetQuery(argsEl) && readOptInChecked(this, 'args')
+            ? argsEl.getQuery()
+            : undefined;
+          const outputQuery = outputEl && hasGetQuery(outputEl) &&
+            readOptInChecked(this, 'output')
+            ? outputEl.getQuery()
+            : undefined;
+          return combineAnd([argsQuery, outputQuery]);
+        }
+      }
+    }, [
+      ['span', {class: 'searchLabel'}, [label]],
+      ...buildOptInFieldset({
+        name: `${name}-args`, key: 'args', label: 'Args match', children: [argsArr]
+      }),
+      ...buildOptInFieldset({
+        name: `${name}-output`, key: 'output', label: 'Return value matches',
+        children: [outputArr]
+      }),
+      buildAtLeastOneSentinel()
+    ]];
+  },
+  getQuery: getQueryViaElement
+};
+
+export default functionSearchType;