diff --git a/src/file/checkbox/checkbox-symbol.ts b/src/file/checkbox/checkbox-symbol.ts new file mode 100644 index 0000000000..7e172c3141 --- /dev/null +++ b/src/file/checkbox/checkbox-symbol.ts @@ -0,0 +1,29 @@ +// This represents element type CT_SdtCheckboxSymbol element +// +// +// +// + +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 })); + } + } +} diff --git a/src/file/checkbox/checkbox-util.ts b/src/file/checkbox/checkbox-util.ts new file mode 100644 index 0000000000..a3732c282e --- /dev/null +++ b/src/file/checkbox/checkbox-util.ts @@ -0,0 +1,44 @@ +// +// +// +// +// +// +// +// + +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)); + } +} diff --git a/src/file/checkbox/checkbox.ts b/src/file/checkbox/checkbox.ts new file mode 100644 index 0000000000..9f8b55e4f2 --- /dev/null +++ b/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); + } +}