element-book 26.13.1 → 26.14.0

package/dist/data/book-entry/book-page/book-page-controls.d.ts

@@ -1,4 +1,4 @@
-import { type EmptyObject } from 'type-fest';
+import { type HtmlInterpolation } from 'element-vir';
 /**
  * Adds a control to an element-book page.
  *
@@ -6,12 +6,20 @@ import { type EmptyObject } from 'type-fest';
  */
 export type BookPageControl<ControlType extends BookPageControlType = BookPageControlType> = {
     controlType: ControlType;
-    initValue: BookPageControlValueType[ControlType];
     /** The name and label for the control. */
     controlName: string;
-} & (ControlType extends BookPageControlType.Dropdown ? {
+} & (ControlType extends BookPageControlType.Custom ? {
+    /** Custom HTML template to render for this control. */
+    content: HtmlInterpolation;
+    initValue?: never;
+} : {
+    initValue: BookPageControlValueType[ControlType];
+    content?: never;
+}) & (ControlType extends BookPageControlType.Dropdown ? {
     options: string[];
-} : EmptyObject);
+} : {
+    options?: never;
+});
 /**
  * Initialization options for an element-book page control.
  *
@@ -23,7 +31,7 @@ export type BookPageControlInit<ControlType extends BookPageControlType> = Omit<
  *
  * @category Internal
  */
-export declare function isControlInitType<const SpecificControlType extends BookPageControlType>(controlInit: BookPageControlInit<any>, specificType: SpecificControlType): controlInit is BookPageControlInit<SpecificControlType>;
+export declare function isControlInitType<const SpecificControlType extends BookPageControlType>(controlInit: BookPageControlInit<BookPageControlType>, specificType: SpecificControlType): controlInit is BookPageControlInit<SpecificControlType>;
 /**
  * Define a page control. This doesn't do anything fancy (in fact it only returns the input) but it
  * helps immensely with type inference.
@@ -59,6 +67,8 @@ export type BookPageControlsValues = ControlsToValues<BookPageControlsInitBase>;
 export declare enum BookPageControlType {
     Checkbox = "checkbox",
     Color = "color",
+    /** Custom controls render user-provided HTML directly. They have no editable value. */
+    Custom = "custom",
     Dropdown = "dropdown",
     /** Hidden controls allow any values but they aren't displayed to the user for editing. */
     Hidden = "hidden",
@@ -73,6 +83,8 @@ export declare enum BookPageControlType {
 export declare const controlValueTypes: {
     checkbox: boolean;
     color: string;
+    /** Custom controls don't have a user-editable value. */
+    custom: undefined;
     dropdown: string;
     hidden: any;
     number: number;

package/dist/data/book-entry/book-page/book-page-controls.js

@@ -24,6 +24,8 @@ export var BookPageControlType;
 (function (BookPageControlType) {
     BookPageControlType["Checkbox"] = "checkbox";
     BookPageControlType["Color"] = "color";
+    /** Custom controls render user-provided HTML directly. They have no editable value. */
+    BookPageControlType["Custom"] = "custom";
     BookPageControlType["Dropdown"] = "dropdown";
     /** Hidden controls allow any values but they aren't displayed to the user for editing. */
     BookPageControlType["Hidden"] = "hidden";
@@ -39,6 +41,8 @@ const anySymbol = Symbol('any-type');
 export const controlValueTypes = {
     [BookPageControlType.Checkbox]: false,
     [BookPageControlType.Color]: '',
+    /** Custom controls don't have a user-editable value. */
+    [BookPageControlType.Custom]: undefined,
     [BookPageControlType.Dropdown]: '',
     [BookPageControlType.Hidden]: anySymbol,
     [BookPageControlType.Number]: 0,
@@ -55,6 +59,9 @@ export function checkControls(controlsInit, pageName) {
     }
     const errors = [];
     Object.entries(controlsInit).forEach(([controlName, controlEntry,]) => {
+        if (controlEntry.controlType === BookPageControlType.Custom) {
+            return;
+        }
         const expectedInitDefault = controlValueTypes[controlEntry.controlType];
         if (expectedInitDefault === anySymbol) {
             return;

package/dist/ui/elements/entry-display/book-page/book-page-controls.element.js

@@ -84,7 +84,13 @@ export const BookPageControls = defineBookElement()({
                                 ></${ViraIcon}>
                             `)}
                         <label class="control-wrapper">
-                            <span>${controlName}</span>
+                            <span>
+                                ${controlInit.controlType === BookPageControlType.Custom
+                ? html `
+                                          &nbsp;
+                                      `
+                : controlName}
+                            </span>
                             ${controlInputTemplate}
                         </label>
                     </div>
@@ -164,9 +170,14 @@ function createControlInput(value, controlInit, valueChange) {
             </select>
         `;
     }
+    else if (isControlInitType(controlInit, BookPageControlType.Custom)) {
+        return controlInit.content;
+    }
     else {
         return html `
-            <p class="error">${controlInit.controlType} controls are not implemented yet.</p>
+            <p class="error">
+                ${controlInit.controlType} controls are not implemented yet.
+            </p>
         `;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-book",
-    "version": "26.13.1",
+    "version": "26.14.0",
     "keywords": [
         "book",
         "design system",
@@ -57,7 +57,7 @@
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.1",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "element-vir": "^26.13.1",
+        "element-vir": "^26.14.0",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
         "type-fest": "^5.3.1",