@venite/components 0.16.48 → 0.16.50

package/dist/collection/components/parallel/parallel.js

@@ -0,0 +1,213 @@
+import { Component, Prop, Watch, State, Host, Event, Element, h } from '@stencil/core';
+import { Parallel } from '@venite/ldf';
+import { getComponentClosestLanguage } from '../../utils/locale';
+import EN from './parallel.i18n.en.json';
+const LOCALE = {
+  'en': EN
+};
+export class ParallelComponent {
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new Parallel(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new Parallel(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new Parallel();
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+    this.ldfOptionAskForStoredSelection.emit({ el: this.el });
+  }
+  /** Asynchronously load localization strings */
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[getComponentClosestLanguage(this.el)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  // Render
+  render() {
+    var _a;
+    return (h(Host, { lang: this.obj.language },
+      h("tr", null, (((_a = this.obj) === null || _a === void 0 ? void 0 : _a.value) || []).map((obj, ii) => h("td", null,
+        h("ldf-liturgical-document", { doc: obj, path: `${this.path}/value/${ii}`, base: `${this.path}/value`, index: ii, editable: this.editable, parentType: 'option' }))))));
+  }
+  static get is() { return "ldf-parallel"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["parallel.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["parallel.css"]
+  }; }
+  static get properties() { return {
+    "doc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Parallel | string",
+        "resolved": "Parallel | string",
+        "references": {
+          "Parallel": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An LDF Option object."
+      },
+      "attribute": "doc",
+      "reflect": false
+    },
+    "path": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A JSON Pointer that points to the Option being edited"
+      },
+      "attribute": "path",
+      "reflect": true
+    },
+    "editable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the object is editable"
+      },
+      "attribute": "editable",
+      "reflect": false
+    },
+    "preview": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the object is in preview mode"
+      },
+      "attribute": "preview",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "obj": {},
+    "localeStrings": {},
+    "filteredOptions": {}
+  }; }
+  static get events() { return [{
+      "method": "ldfAddOptionToDoc",
+      "name": "ldfAddOptionToDoc",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "AddOptionToDoc",
+        "resolved": "AddOptionToDoc",
+        "references": {
+          "AddOptionToDoc": {
+            "location": "import",
+            "path": "../../interfaces/add-option-to-doc"
+          }
+        }
+      }
+    }, {
+      "method": "ldfDocShouldChange",
+      "name": "ldfDocShouldChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Change",
+        "resolved": "Change",
+        "references": {
+          "Change": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      }
+    }, {
+      "method": "ldfOptionAskForStoredSelection",
+      "name": "ldfOptionAskForStoredSelection",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ el: HTMLElement }",
+        "resolved": "{ el: HTMLElement; }",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "ldfOptionMakeSelection",
+      "name": "ldfOptionMakeSelection",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ slug: string; index: number; }",
+        "resolved": "{ slug: string; index: number; }",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "doc",
+      "methodName": "docChanged"
+    }]; }
+}

package/dist/collection/i18n/parallel.i18n.en.json

@@ -0,0 +1,3 @@
+{
+  "parallel": "Parallel"
+}

package/dist/esm/index-034add74.js

@@ -2066,10 +2066,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './ldf-editable-string-list.entry.js').then(processMod, consoleError);
-        case 'ion-segment_16':
+        case 'ion-segment_17':
           return import(
             /* webpackMode: "lazy" */
-            './ion-segment_16.entry.js').then(processMod, consoleError);
+            './ion-segment_17.entry.js').then(processMod, consoleError);
         case 'ldf-editable-boolean_2':
           return import(
             /* webpackMode: "lazy" */

package/dist/esm/{ion-segment_16.entry.js → ion-segment_17.entry.js}

@@ -11,7 +11,7 @@ import { v as versionToString, O as Option } from './option-f5f45da6.js';
 import { C as Change } from './change-ea574d32.js';
 import { g as getComponentClosestLanguage } from './locale-de430ca1.js';
 import { u as useDropcap } from './dropcaps-9409f9e0.js';
-import { I as Image } from './image-b773ce41.js';
+import { I as Image, P as Parallel } from './parallel-63ee2ef4.js';
 import { D as Debounce } from './index-f08f6130.js';
 import { R as Refrain } from './refrain-03edc2dd.js';
 import './hardware-back-button-fa04d6e9.js';
@@ -550,7 +550,7 @@ const changeReading$1 = "Change Reading";
 const newCitation$1 = "Biblical citation.";
 const cancel$2 = "Cancel";
 const ok$2 = "OK";
-const EN$8 = {
+const EN$9 = {
 	amen: amen$1,
 	book: book$1,
 	chapter: chapter$1,
@@ -609,8 +609,8 @@ async function fetchReading(citation, version = 'NRSV', api = 'https://us-centra
 
 const bibleReadingCss = "ldf-bible-reading.sc-ldf-bible-reading,.sc-ldf-bible-reading-h{font-family:var(--ldf-font-face);text-align:var(--ldf-text-align)}.bible-reading[lang=he].sc-ldf-bible-reading{text-align:right;direction:rtl;font-size:1.5em;font-family:\"Times New Roman\" !important}.bible-reading[lang=he].sc-ldf-bible-reading .drop.sc-ldf-bible-reading{float:right !important;font-family:\"Times New Roman\" !important}.bible-reading.omit.sc-ldf-bible-reading .verses.sc-ldf-bible-reading{display:none}.editable.bible-reading.sc-ldf-bible-reading .verses.sc-ldf-bible-reading{display:block;color:var(--ldf-greyed-out-text-color)}sup.sc-ldf-bible-reading{display:var(--ldf-bible-reading-verse-number-display);margin-left:0;margin-right:0.25em}.citation.sc-ldf-bible-reading{font-size:80%;font-style:italic;margin-left:1em;float:var(--ldf-bible-reading-citation-float)}.response.sc-ldf-bible-reading{font-weight:var(--ldf-response-font-weight);font-style:var(--ldf-response-font-style)}.verses.sc-ldf-bible-reading .verse.sc-ldf-bible-reading{display:flex;flex-direction:row}sup.sc-ldf-bible-reading:first-of-type{display:var(--ldf-drop-early-verses-display)}.editable-verse.sc-ldf-bible-reading{display:inline}.editable-citation.sc-ldf-bible-reading{display:inline;width:100%}.editable-citation.sc-ldf-bible-reading ldf-editable-text.sc-ldf-bible-reading{display:inline-block;width:25px}.editable-citation.sc-ldf-bible-reading ldf-editable-text.book.sc-ldf-bible-reading{width:75px}h3.editable-label.sc-ldf-bible-reading{text-align:var(--ldf-h3-text-align);font-weight:var(--ldf-h3-font-weight);font-style:var(--ldf-h3-font-style);font-variant:var(--ldf-h3-font-variant);font-size:var(--ldf-h3-font-size);text-transform:var(--ldf-h3-text-transform)}.citation-button.sc-ldf-bible-reading{background:none;border:0;font-family:var(--ldf-font-face);font-size:inherit}";
 
-const LOCALE$8 = {
-  'en': EN$8,
+const LOCALE$9 = {
+  'en': EN$9,
   'es': ES$1
 };
 const BibleReadingComponent = class {
@@ -658,7 +658,7 @@ const BibleReadingComponent = class {
   // Private methods
   async loadLocaleStrings() {
     try {
-      this.localeStrings = LOCALE$8[getComponentClosestLanguage(this.element)];
+      this.localeStrings = LOCALE$9[getComponentClosestLanguage(this.element)];
     }
     catch (e) {
       console.warn(e);
@@ -799,7 +799,7 @@ BibleReadingComponent.style = bibleReadingCss;
 const add = "Add";
 const label$3 = "Label";
 const citation$3 = "Citation";
-const EN$7 = {
+const EN$8 = {
 	add: add,
 	label: label$3,
 	citation: citation$3
@@ -807,8 +807,8 @@ const EN$7 = {
 
 const editableAddBlockCss = ".sc-ldf-editable-add-block-h{display:flex;flex-direction:column;align-items:center;width:100%}.sc-ldf-editable-add-block-h .button-container.sc-ldf-editable-add-block{display:flex;align-items:center;height:0;justify-content:center;width:100%}.sc-ldf-editable-add-block-h button.sc-ldf-editable-add-block{background-color:var(--ldf-background-color);color:var(--ldf-color);font-family:var(--ldf-controls-font-family);font-weight:lighter}.sc-ldf-editable-add-block-h button.sc-ldf-editable-add-block:hover{cursor:pointer}.sc-ldf-editable-add-block-h .visible.sc-ldf-editable-add-block{height:0;opacity:1;transition:0.25s}.sc-ldf-editable-add-block-h .hidden.sc-ldf-editable-add-block{height:0;opacity:0;transition:2s}.sc-ldf-editable-add-block-h .underlying.sc-ldf-editable-add-block{width:100%;border-top:1px solid #a0a0a0;border-bottom:1px solid #a0a0a0;min-height:1em;position:relative;bottom:0.5em;z-index:-1}.sc-ldf-editable-add-block-h .underlying.visible.sc-ldf-editable-add-block{opacity:0.5;transition:0.25s}.sc-ldf-editable-add-block-h .underlying.visible.expanded.sc-ldf-editable-add-block{z-index:1}.sc-ldf-editable-add-block-h .underlying.collapsed.sc-ldf-editable-add-block{height:1em}.sc-ldf-editable-add-block-h .underlying.hidden.sc-ldf-editable-add-block{opacity:0;transition:1s}.sc-ldf-editable-add-block-h .underlying.hidden.sc-ldf-editable-add-block button.sc-ldf-editable-add-block{z-index:-1}.sc-ldf-editable-add-block-h .visually-hidden.sc-ldf-editable-add-block{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}.button.sc-ldf-editable-add-block{position:absolute;display:flex;flex-direction:row;align-items:center;justify-content:center;opacity:1;transition:all 0.25s}.hidden.sc-ldf-editable-add-block{display:none;height:0;opacity:0;transition:all 0.25s}";
 
-const LOCALE$7 = {
-  'en': EN$7
+const LOCALE$8 = {
+  'en': EN$8
 };
 const EditableAddBlockComponent = class {
   constructor(hostRef) {
@@ -823,7 +823,7 @@ const EditableAddBlockComponent = class {
   // Methods
   async loadLocaleStrings() {
     try {
-      this.localeStrings = LOCALE$7[getComponentClosestLanguage(this.element)];
+      this.localeStrings = LOCALE$8[getComponentClosestLanguage(this.element)];
     }
     catch (e) {
       console.warn(e);
@@ -869,7 +869,7 @@ const responsiveSmallOnly = "Only on small screens";
 const responsiveSmallHidden = "Not on small screens";
 const unison = "Unison";
 const wholeverse = "By Whole Verse";
-const EN$6 = {
+const EN$7 = {
 	abbreviated: abbreviated,
 	addOption: addOption,
 	cancel: cancel,
@@ -903,8 +903,8 @@ const EN$6 = {
 
 const editableMetadataButtonsCss = ".buttons.sc-ldf-editable-metadata-buttons{position:absolute;height:0;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;opacity:1;transition:all 0.25s}.buttons.sc-ldf-editable-metadata-buttons ion-buttons.sc-ldf-editable-metadata-buttons{background-color:var(--ion-color-light, #f4f5f8);border-radius:3px;flex-wrap:wrap;max-width:100%}.hidden.sc-ldf-editable-metadata-buttons{display:none;height:0;opacity:0;transition:all 0.25s}@media (max-width: 767px){.sm-hidden.sc-ldf-editable-metadata-buttons{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}";
 
-const LOCALE$6 = {
-  'en': EN$6
+const LOCALE$7 = {
+  'en': EN$7
 };
 const EditableMetadataButtonsComponent = class {
   constructor(hostRef) {
@@ -928,7 +928,7 @@ const EditableMetadataButtonsComponent = class {
   // Private methods
   async loadLocaleStrings() {
     try {
-      this.localeStrings = LOCALE$6[getComponentClosestLanguage(this.element)];
+      this.localeStrings = LOCALE$7[getComponentClosestLanguage(this.element)];
     }
     catch (e) {
       console.warn(e);
@@ -1144,7 +1144,7 @@ EditableSelectComponent.style = editableSelectCss;
 
 const close = "Return to Bulletin";
 const url = "URL";
-const EN$5 = {
+const EN$6 = {
 	close: close,
 	url: url
 };
@@ -1161,8 +1161,8 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
         r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const LOCALE$5 = {
-  'en': EN$5
+const LOCALE$6 = {
+  'en': EN$6
 };
 const ImageComponent = class {
   constructor(hostRef) {
@@ -1196,7 +1196,7 @@ const ImageComponent = class {
   }
   async loadLocaleStrings() {
     try {
-      this.localeStrings = LOCALE$5[getComponentClosestLanguage(this.element)];
+      this.localeStrings = LOCALE$6[getComponentClosestLanguage(this.element)];
     }
     catch (e) {
       console.warn(e);
@@ -1351,7 +1351,7 @@ const gt = " > ";
 const gte = " ≥ ";
 const smallOnly = "Only appears on small screens";
 const smallHidden = "Doesn't appear on small screens";
-const EN$4 = {
+const EN$5 = {
 	bible_version: bible_version,
 	"canticle-1": "The first canticle ",
 	"canticle-2": "The second canticle ",
@@ -1565,8 +1565,8 @@ const LookupNode = ({ doc, localeStrings }) => {
 
 const liturgicalDocumentCss = "ldf-liturgical-document.sc-ldf-liturgical-document,.sc-ldf-liturgical-document-h{font-family:var(--ldf-font-face);display:block}.container.editable.sc-ldf-liturgical-document{padding-top:0}.lookup.sc-ldf-liturgical-document{background-color:var(--ldf-editable-lookup-background-color);color:var(--ldf-editable-lookup-color);border-radius:4px;margin-bottom:1.5em;padding:1em;width:calc(100% - 2em)}.lookup.sc-ldf-liturgical-document code.sc-ldf-liturgical-document{font-weight:bold}.condition.sc-ldf-liturgical-document{background-color:var(--ldf-editable-condition-background-color);color:var(--ldf-editable-condition-color);border-radius:4px;padding:1em;width:calc(100% - 2em)}.condition.sc-ldf-liturgical-document code.sc-ldf-liturgical-document{font-weight:bold}.doc.sc-ldf-liturgical-document{margin-top:var(--ldf-liturgical-document-margin-top)}ldf-editable-metadata-buttons.sc-ldf-liturgical-document{height:none;display:block;z-index:10;background:var(--ldf-background);opacity:0.8;width:100%;position:sticky;top:2em;padding-top:1em;padding-bottom:1em}ldf-editable-metadata-buttons.top-level.sc-ldf-liturgical-document{position:relative;top:0}.small-only.sc-ldf-liturgical-document{display:block}.small-hidden.sc-ldf-liturgical-document{display:none}@media (min-width: 415px){.small-only.sc-ldf-liturgical-document{display:none}.small-hidden.sc-ldf-liturgical-document{display:block}}";
 
-const LOCALE$4 = {
-  'en': EN$4
+const LOCALE$5 = {
+  'en': EN$5
 };
 const LiturgicalDocumentComponent = class {
   constructor(hostRef) {
@@ -1653,7 +1653,7 @@ const LiturgicalDocumentComponent = class {
   }
   async loadLocaleStrings() {
     try {
-      this.localeStrings = LOCALE$4[getComponentClosestLanguage(this.element)];
+      this.localeStrings = LOCALE$5[getComponentClosestLanguage(this.element)];
     }
     catch (e) {
       console.warn(e);
@@ -1723,6 +1723,9 @@ const LiturgicalDocumentComponent = class {
       case 'option':
         node = h("ldf-option", { path: this.path, editable: editable, preview: this.preview, doc: doc });
         break;
+      case 'parallel':
+        node = h("ldf-parallel", { path: this.path, editable: editable, preview: this.preview, doc: doc });
+        break;
       case 'refrain':
         node = h("ldf-refrain", { path: this.path, editable: editable, doc: doc });
         break;
@@ -1822,7 +1825,7 @@ const resume = "Resume";
 const meditate = "Meditate for";
 const minutes = "minutes.";
 const seconds = " seconds. ";
-const EN$3 = {
+const EN$4 = {
 	start: start,
 	pause: pause,
 	resume: resume,
@@ -1833,8 +1836,8 @@ const EN$3 = {
 
 const meditationCss = "ldf-heading.sc-ldf-meditation .control-container.sc-ldf-meditation,.sc-ldf-meditation-h .control-container.sc-ldf-meditation{display:block;margin:auto}ldf-heading.sc-ldf-meditation .controls.sc-ldf-meditation,.sc-ldf-meditation-h .controls.sc-ldf-meditation{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;width:100%}ldf-heading.sc-ldf-meditation .controls.sc-ldf-meditation input.sc-ldf-meditation,.sc-ldf-meditation-h .controls.sc-ldf-meditation input.sc-ldf-meditation{text-align:center}@media (min-width: 767px){ldf-heading.sc-ldf-meditation .controls.sc-ldf-meditation,.sc-ldf-meditation-h .controls.sc-ldf-meditation{flex-direction:row}}ldf-heading.sc-ldf-meditation .progress-circle-container.sc-ldf-meditation,.sc-ldf-meditation-h .progress-circle-container.sc-ldf-meditation{display:flex;align-items:center;justify-content:center;padding:1em}ldf-heading.sc-ldf-meditation .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation,.sc-ldf-meditation-h .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation{width:300px;height:300px;display:flex;align-items:center;justify-content:center;border-radius:50%}ldf-heading.sc-ldf-meditation .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation .circle-overlay.sc-ldf-meditation,.sc-ldf-meditation-h .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation .circle-overlay.sc-ldf-meditation{background-color:var(--ldf-background-color);display:flex;align-items:center;flex-direction:column;justify-content:center;height:92%;width:92%;border-radius:50%}ldf-heading.sc-ldf-meditation .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation .seconds.sc-ldf-meditation,.sc-ldf-meditation-h .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation .seconds.sc-ldf-meditation{font-family:var(--ldf-font-face);font-size:3em}ldf-heading.sc-ldf-meditation button.clear.sc-ldf-meditation,.sc-ldf-meditation-h button.clear.sc-ldf-meditation{background-color:var(--ldf-background-color);border:none;font-size:1em}.hidden.sc-ldf-meditation{height:0;opacity:0;transition:0.25s}";
 
-const LOCALE$3 = {
-  'en': EN$3
+const LOCALE$4 = {
+  'en': EN$4
 };
 const MeditationComponent = class {
   constructor(hostRef) {
@@ -1918,7 +1921,7 @@ const MeditationComponent = class {
   // Private methods
   async loadLocaleStrings() {
     try {
-      this.localeStrings = LOCALE$3[getComponentClosestLanguage(this.element)];
+      this.localeStrings = LOCALE$4[getComponentClosestLanguage(this.element)];
     }
     catch (e) {
       console.warn(e);
@@ -1991,14 +1994,14 @@ const MeditationComponent = class {
 MeditationComponent.style = meditationCss;
 
 const option = "Option";
-const EN$2 = {
+const EN$3 = {
 	option: option
 };
 
 const optionCss = ".select-control.sc-ldf-option{margin-top:var(--ldf-select-control-margin-top)}ion-select.sc-ldf-option{width:75vw;max-width:300px}";
 
-const LOCALE$2 = {
-  'en': EN$2
+const LOCALE$3 = {
+  'en': EN$3
 };
 const OptionComponent = class {
   constructor(hostRef) {
@@ -2040,7 +2043,7 @@ const OptionComponent = class {
   /** Asynchronously load localization strings */
   async loadLocaleStrings() {
     try {
-      this.localeStrings = LOCALE$2[getComponentClosestLanguage(this.el)];
+      this.localeStrings = LOCALE$3[getComponentClosestLanguage(this.el)];
     }
     catch (e) {
       console.warn(e);
@@ -2183,6 +2186,65 @@ const OptionComponent = class {
 };
 OptionComponent.style = optionCss;
 
+const parallel = "Parallel";
+const EN$2 = {
+	parallel: parallel
+};
+
+const parallelCss = ".select-control.sc-ldf-parallel{margin-top:var(--ldf-select-control-margin-top)}ion-select.sc-ldf-parallel{width:75vw;max-width:300px}";
+
+const LOCALE$2 = {
+  'en': EN$2
+};
+const ParallelComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ldfAddOptionToDoc = createEvent(this, "ldfAddOptionToDoc", 7);
+    this.ldfDocShouldChange = createEvent(this, "ldfDocShouldChange", 7);
+    this.ldfOptionAskForStoredSelection = createEvent(this, "ldfOptionAskForStoredSelection", 7);
+    this.ldfOptionMakeSelection = createEvent(this, "ldfOptionMakeSelection", 7);
+  }
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new Parallel(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new Parallel(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new Parallel();
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+    this.ldfOptionAskForStoredSelection.emit({ el: this.el });
+  }
+  /** Asynchronously load localization strings */
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE$2[getComponentClosestLanguage(this.el)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  // Render
+  render() {
+    var _a;
+    return (h(Host, { lang: this.obj.language }, h("tr", null, (((_a = this.obj) === null || _a === void 0 ? void 0 : _a.value) || []).map((obj, ii) => h("td", null, h("ldf-liturgical-document", { doc: obj, path: `${this.path}/value/${ii}`, base: `${this.path}/value`, index: ii, editable: this.editable, parentType: 'option' }))))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "doc": ["docChanged"]
+  }; }
+};
+ParallelComponent.style = parallelCss;
+
 const changeCanticle$1 = "Change Canticle";
 const citation$2 = "(Biblical) Citation";
 const label$2 = "Label";
@@ -2654,4 +2716,4 @@ const RubricComponent = class {
 };
 RubricComponent.style = rubricCss;
 
-export { Segment as ion_segment, SegmentButton as ion_segment_button, SkeletonText as ion_skeleton_text, BibleReadingComponent as ldf_bible_reading, EditableAddBlockComponent as ldf_editable_add_block, EditableMetadataButtonsComponent as ldf_editable_metadata_buttons, EditableSelectComponent as ldf_editable_select, ImageComponent as ldf_image, LiturgicalDocumentComponent as ldf_liturgical_document, LiturgyComponent as ldf_liturgy, MeditationComponent as ldf_meditation, OptionComponent as ldf_option, PsalmComponent as ldf_psalm, RefrainComponent as ldf_refrain, ResponsivePrayerComponent as ldf_responsive_prayer, RubricComponent as ldf_rubric };
+export { Segment as ion_segment, SegmentButton as ion_segment_button, SkeletonText as ion_skeleton_text, BibleReadingComponent as ldf_bible_reading, EditableAddBlockComponent as ldf_editable_add_block, EditableMetadataButtonsComponent as ldf_editable_metadata_buttons, EditableSelectComponent as ldf_editable_select, ImageComponent as ldf_image, LiturgicalDocumentComponent as ldf_liturgical_document, LiturgyComponent as ldf_liturgy, MeditationComponent as ldf_meditation, OptionComponent as ldf_option, ParallelComponent as ldf_parallel, PsalmComponent as ldf_psalm, RefrainComponent as ldf_refrain, ResponsivePrayerComponent as ldf_responsive_prayer, RubricComponent as ldf_rubric };

package/dist/esm/ldf-editable-add-block-menu.entry.js

@@ -2,7 +2,7 @@ import { h, r as registerInstance, c as createEvent, H as Host, d as getElement
 import { L as LiturgicalDocument } from './book-ffb2b7c9.js';
 import { B as BibleReading, P as Psalm, L as Liturgy$1, M as Meditation, R as ResponsivePrayer, a as Rubric } from './rubric-5e76db3e.js';
 import { H as Heading } from './heading-32b75b51.js';
-import { I as Image } from './image-b773ce41.js';
+import { I as Image, P as Parallel } from './parallel-63ee2ef4.js';
 import { O as Option } from './option-f5f45da6.js';
 import { R as Refrain } from './refrain-03edc2dd.js';
 import { T as Text } from './text-035232e4.js';
@@ -316,6 +316,22 @@ const MENU = [
     template: [new BibleReading({ type: 'bible-reading', style: 'short', lookup: { type: 'category', rotate: true }, category: ['Closing Sentence'] })],
     needsMoreInfo: 'category'
   },
+  {
+    label: 'parallels',
+    section: ['Liturgy'],
+    /* SVG is Font Awesome 'fa-music' */
+    icon: () => (h("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "music", class: "svg-inline--fa fa-music fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
+      h("path", { fill: "currentColor", d: "M470.38 1.51L150.41 96A32 32 0 0 0 128 126.51v261.41A139 139 0 0 0 96 384c-53 0-96 28.66-96 64s43 64 96 64 96-28.66 96-64V214.32l256-75v184.61a138.4 138.4 0 0 0-32-3.93c-53 0-96 28.66-96 64s43 64 96 64 96-28.65 96-64V32a32 32 0 0 0-41.62-30.49z" }))),
+    template: [
+      new Parallel({
+        "type": "parallel",
+        "value": [
+          new Text({ type: 'text', style: 'text', value: [''] }),
+          new Text({ type: 'text', style: 'text', value: [''] })
+        ]
+      })
+    ]
+  },
   {
     label: 'prayers-of-the-people',
     section: ['Prayer', 'Eucharist'],