Create CheckBox element and supporting child elements

src/file/checkbox/checkbox-symbol.ts

@@ -0,0 +1,29 @@
+// This represents element type CT_SdtCheckboxSymbol element
+// <xsd:complexType name="CT_SdtCheckboxSymbol">
+//   <xsd:attribute name="font" type="w:ST_String"/>
+//    <xsd:attribute name="val" type="w:ST_ShortHexNumber"/>
+// </xsd:complexType>
+
+import { XmlAttributeComponent, XmlComponent } from "@file/xml-components";
+import { shortHexNumber } from "@util/values";
+
+class CheckboxSymbolAttributes extends XmlAttributeComponent<{
+    readonly val?: string | number | boolean;
+    readonly symbolfont?: string;
+}> {
+    protected readonly xmlKeys = {
+        val: "w14:val",
+        symbolfont: "w14:font",
+    };
+}
+
+export class CheckBoxSymbolElement extends XmlComponent {
+    public constructor(name: string, val: string, font?: string) {
+        super(name);
+        if (font) {
+            this.root.push(new CheckboxSymbolAttributes({ val: shortHexNumber(val), symbolfont: font }));
+        } else {
+            this.root.push(new CheckboxSymbolAttributes({ val }));
+        }
+    }
+}

src/file/checkbox/checkbox-util.ts

@@ -0,0 +1,44 @@
+// <xsd:complexType name="CT_SdtCheckbox">
+//    <xsd:sequence>
+//        <xsd:element name="checked" type="CT_OnOff" minOccurs="0"/>
+//        <xsd:element name="checkedState" type="CT_SdtCheckboxSymbol" minOccurs="0"/>
+//        <xsd:element name="uncheckedState" type="CT_SdtCheckboxSymbol" minOccurs="0"/>
+//    </xsd:sequence>
+// </xsd:complexType>
+// <xsd:element name="checkbox" type="CT_SdtCheckbox"/>
+
+import { XmlComponent } from "@file/xml-components";
+import { CheckBoxSymbolElement } from "@file/checkbox/checkbox-symbol";
+
+export interface ICheckboxSymbolProperties {
+    readonly value?: string;
+    readonly font?: string;
+}
+
+export interface ICheckboxSymbolOptions {
+    readonly checked?: boolean;
+    readonly checkedState?: ICheckboxSymbolProperties;
+    readonly uncheckedState?: ICheckboxSymbolProperties;
+}
+
+export class CheckBoxUtil extends XmlComponent {
+    private readonly DEFAULT_UNCHECKED_SYMBOL: string = "2610";
+    private readonly DEFAULT_CHECKED_SYMBOL: string = "2612";
+    private readonly DEFAULT_FONT: string = "MS Gothic";
+    public constructor(options?: ICheckboxSymbolOptions) {
+        super("w14:checkbox");
+
+        const value = options?.checked ? "1" : "0";
+        let symbol: string;
+        let font: string;
+        this.root.push(new CheckBoxSymbolElement("w14:checked", value));
+
+        symbol = options?.checkedState?.value ? options?.checkedState?.value : this.DEFAULT_CHECKED_SYMBOL;
+        font = options?.checkedState?.font ? options?.checkedState?.font : this.DEFAULT_FONT;
+        this.root.push(new CheckBoxSymbolElement("w14:checkedState", symbol, font));
+
+        symbol = options?.uncheckedState?.value ? options?.uncheckedState?.value : this.DEFAULT_UNCHECKED_SYMBOL;
+        font = options?.uncheckedState?.font ? options?.uncheckedState?.font : this.DEFAULT_FONT;
+        this.root.push(new CheckBoxSymbolElement("w14:uncheckedState", symbol, font));
+    }
+}

src/file/checkbox/checkbox.ts

@@ -0,0 +1,45 @@
+import { SymbolRun } from "@file/paragraph/run/symbol-run";
+import { StructuredDocumentTagProperties } from "@file/table-of-contents/sdt-properties";
+import { StructuredDocumentTagContent } from "@file/table-of-contents/sdt-content";
+import { XmlComponent } from "@file/xml-components";
+import { CheckBoxUtil, ICheckboxSymbolOptions } from "./checkbox-util";
+
+export class CheckBox extends XmlComponent {
+    // default values per Microsoft
+    private readonly DEFAULT_UNCHECKED_SYMBOL: string = "2610";
+    private readonly DEFAULT_CHECKED_SYMBOL: string = "2612";
+    private readonly DEFAULT_FONT: string = "MS Gothic";
+    public constructor(options?: ICheckboxSymbolOptions) {
+        super("w:sdt");
+
+        this.root.push(
+            new StructuredDocumentTagProperties(undefined, {
+                children: [new CheckBoxUtil(options)],
+            }),
+        );
+
+        const content = new StructuredDocumentTagContent();
+        const checkedFont: string | undefined = options?.checkedState?.font;
+        const checkedText: string | undefined = options?.checkedState?.value;
+        const uncheckedFont: string | undefined = options?.uncheckedState?.font;
+        const uncheckedText: string | undefined = options?.uncheckedState?.value;
+        let symbolFont: string;
+        let char: string;
+
+        if (options?.checked) {
+            symbolFont = checkedFont ? checkedFont : this.DEFAULT_FONT;
+            char = checkedText ? checkedText : this.DEFAULT_CHECKED_SYMBOL;
+        } else {
+            symbolFont = uncheckedFont ? uncheckedFont : this.DEFAULT_FONT;
+            char = uncheckedText ? uncheckedText : this.DEFAULT_UNCHECKED_SYMBOL;
+        }
+
+        const initialRenderedChar = new SymbolRun({
+            char: char,
+            symbolfont: symbolFont,
+        });
+
+        content.addChildElement(initialRenderedChar);
+        this.root.push(content);
+    }
+}