@venite/components 0.16.7 → 0.16.13

package/dist/collection/components/psalm/psalm.js

@@ -0,0 +1,361 @@
+import { modalController } from '@ionic/core';
+import { Component, Element, Prop, Event, Watch, State, h, Host } from '@stencil/core';
+import { Psalm, Refrain, Heading, dateFromYMDString, Change } from '@venite/ldf';
+import { getComponentClosestLanguage } from '../../utils/locale';
+import EN from './psalm.i18n.en.json';
+const LOCALE = {
+  'en': EN,
+};
+export class PsalmComponent {
+  constructor() {
+    this.focusedVerse = undefined;
+    this.focusedSection = undefined;
+  }
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new Psalm(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new Psalm(newDoc);
+      }
+      this.filter();
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new Psalm();
+    }
+  }
+  // Lifecycle events
+  async componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+    this.filter();
+  }
+  // Private methods
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  async changeCanticle() {
+    const modal = await modalController.create({
+      component: 'ldf-editable-filter-documents',
+    });
+    modal.componentProps = {
+      modal,
+      type: "canticle",
+      changeCallback: (doc) => {
+        this.ldfDocShouldChange.emit(new Change({
+          path: this.path,
+          op: [{
+              type: 'set',
+              oldValue: this.obj,
+              value: doc
+            }]
+        }));
+      }
+    };
+    await modal.present();
+    this.ldfAskForCanticleOptions.emit(this.path);
+  }
+  async filter() {
+    this.filteredValue = this.obj.filteredVerses();
+  }
+  // Render helpers
+  antiphonNode(antiphon, notEditable = false) {
+    var _a, _b;
+    if (typeof antiphon == 'string') {
+      const refrain = new Refrain({ type: 'refrain', value: [antiphon], style: 'antiphon' });
+      return h("ldf-refrain", { class: 'antiphon', doc: refrain, editable: this.editable && !notEditable, path: `${this.path}/metadata/antiphon` });
+    }
+    else if (antiphon === null || antiphon === void 0 ? void 0 : antiphon.type) {
+      return h("ldf-liturgical-document", { class: 'antiphon', doc: antiphon, path: `${this.path}/metadata/antiphon`, editable: this.editable && !notEditable });
+    }
+    else if (typeof antiphon == 'object') {
+      // antiphon is something like an O antiphon tree:
+      // dates can be either MM/DD or MM-DD
+      // { '12/23': '...', '12/24': '...' }
+      const date = this.obj.day ? dateFromYMDString((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.date) : new Date();
+      return this.antiphonNode(antiphon[`${date.getMonth() + 1}/${date.getDate()}`] || antiphon[`${date.getMonth() + 1}-${date.getDate()}`], true);
+    }
+  }
+  gloriaNode(gloria) {
+    if (typeof gloria == 'string') {
+      const refrain = new Refrain({ value: [gloria], style: 'gloria' });
+      return h("ldf-liturgical-document", { doc: refrain, editable: this.editable });
+    }
+    else {
+      return h("ldf-liturgical-document", { doc: gloria, editable: this.editable });
+    }
+  }
+  headingNode(value = undefined, level = 3, showLatinName = true, omitCitation = false, omitSource = false) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    let label = this.obj.label;
+    if (this.obj.style == 'canticle' && this.obj.metadata && this.obj.metadata.number && this.obj.metadata.localname) {
+      label = `${this.obj.metadata.number}. ${this.obj.metadata.localname}`;
+    }
+    else if (this.obj.style == 'canticle' && this.obj.metadata && this.obj.metadata.localname) {
+      label = this.obj.metadata.localname;
+    }
+    const heading = new Heading({
+      type: 'heading',
+      metadata: { level },
+      citation: !omitCitation && ((_a = this.obj) === null || _a === void 0 ? void 0 : _a.citation) !== ((_b = this.obj) === null || _b === void 0 ? void 0 : _b.label) ? (_c = this.obj) === null || _c === void 0 ? void 0 : _c.citation : undefined,
+      value: [value !== null && value !== void 0 ? value : label],
+      source: omitSource ? undefined : (_d = this.obj) === null || _d === void 0 ? void 0 : _d.source
+    });
+    return (this.editable
+      ? [
+        h("ldf-label-bar", null,
+          h("h3", { slot: "start", class: "editable-label" },
+            h("ldf-editable-text", { id: "label", text: (_e = this.obj) === null || _e === void 0 ? void 0 : _e.label, path: `${this.path}/label`, placeholder: (_f = this.localeStrings) === null || _f === void 0 ? void 0 : _f.label })),
+          ((_g = this.obj) === null || _g === void 0 ? void 0 : _g.metadata) && h("ldf-editable-text", { id: "latinname", text: (_j = (_h = this.obj) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j.latinname, path: `${this.path}/metadata/latinname`, placeholder: (_k = this.localeStrings) === null || _k === void 0 ? void 0 : _k.latinname }),
+          h("ldf-editable-text", { slot: "end", id: "source-source", text: (_m = (_l = this.obj) === null || _l === void 0 ? void 0 : _l.source) === null || _m === void 0 ? void 0 : _m.source, path: `${this.path}/source/source`, placeholder: (_o = this.localeStrings) === null || _o === void 0 ? void 0 : _o.source }),
+          h("ldf-editable-text", { slot: "end", id: "source-citation", text: (_q = (_p = this.obj) === null || _p === void 0 ? void 0 : _p.source) === null || _q === void 0 ? void 0 : _q.citation, path: `${this.path}/source/citation`, placeholder: (_r = this.localeStrings) === null || _r === void 0 ? void 0 : _r.source_citation })),
+        h("ldf-label-bar", null,
+          h("ldf-editable-text", { slot: "start", id: "citation", text: (_s = this.obj) === null || _s === void 0 ? void 0 : _s.citation, path: `${this.path}/citation`, placeholder: (_t = this.localeStrings) === null || _t === void 0 ? void 0 : _t.citation }))
+      ]
+      : h("ldf-heading", { doc: heading }, showLatinName && h("h5", { slot: 'additional' }, (_v = (_u = this.obj) === null || _u === void 0 ? void 0 : _u.metadata) === null || _v === void 0 ? void 0 : _v.latinname)));
+  }
+  insertSectionBreakAfterVerse(sectionIndex, verseIndex) {
+    const section = this.obj.value[sectionIndex], remainingVerses = section.value.slice(0, verseIndex + 1), movingVerses = section.value.slice(verseIndex + 1);
+    this.ldfDocShouldChange.emit(new Change({
+      path: `${this.path}/value/${sectionIndex}`,
+      op: [{
+          type: 'set',
+          oldValue: section,
+          value: Object.assign(Object.assign({}, section), { value: remainingVerses })
+        }]
+    }));
+    this.ldfDocShouldChange.emit(new Change({
+      path: `${this.path}/value`,
+      op: [{
+          type: 'insertAt',
+          index: sectionIndex + 1,
+          oldValue: section,
+          value: Object.assign(Object.assign({}, section), { value: movingVerses })
+        }]
+    }));
+  }
+  removeSectionBreakAfter(sectionIndex) {
+    const thisSection = this.obj.value[sectionIndex], nextSection = this.obj.value[sectionIndex + 1];
+    if (thisSection && nextSection) {
+      const combinedValue = thisSection.value.concat(nextSection.value);
+      this.ldfDocShouldChange.emit(new Change({
+        path: `${this.path}/value/${sectionIndex}/value`,
+        op: [{
+            type: 'set',
+            oldValue: thisSection.value,
+            value: combinedValue
+          }]
+      }));
+      this.ldfDocShouldChange.emit(new Change({
+        path: `${this.path}/value`,
+        op: [{
+            type: 'deleteAt',
+            index: sectionIndex + 1,
+            oldValue: nextSection
+          }]
+      }));
+    }
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    const includeAntiphon = this.obj.includeAntiphon();
+    // create blank psalm verse pattern
+    let pattern, templateMaker = (verse) => ({ type: 'psalm-verse', number: '', halfverse: '', verse });
+    if (this.editable) {
+      pattern = Object.assign({}, (((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.value[0]) === null || _b === void 0 ? void 0 : _b.value[0]) || { type: 'psalm-verse', number: '', halfverse: '', verse: '' }));
+      if (pattern.number) {
+        pattern.number = '';
+      }
+      if (pattern.halfverse) {
+        pattern.halfverse = '';
+      }
+      if (pattern.verse) {
+        pattern.verse = '';
+      }
+    }
+    const noNumbers = (((_c = this.obj) === null || _c === void 0 ? void 0 : _c.value) || [])
+      .map(section => section.value.map(verse => !Boolean(verse.number)))
+      .flat()
+      .reduce((a, b) => a || b, false);
+    const localeStrings = this.localeStrings || {};
+    return (h(Host, { lang: ((_d = this.obj) === null || _d === void 0 ? void 0 : _d.language) || 'en' },
+      h("div", { class: `psalm-parent ${this.editable ? 'editable' : ''} ${((_e = this.obj) === null || _e === void 0 ? void 0 : _e.display_format) || 'default'} ${noNumbers ? 'no-numbers' : ''}` },
+        (this.editable || ((_f = this.obj) === null || _f === void 0 ? void 0 : _f.style) === 'canticle') && h("ldf-label-bar", null,
+          h("slot", { slot: 'end', name: 'controls' }, ((_g = this.obj) === null || _g === void 0 ? void 0 : _g.style) === 'canticle' && ((_j = (_h = this.obj) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j.changeable) && h("ldf-label-bar", null,
+            h("slot", { slot: 'end', name: 'controls' },
+              h("ion-buttons", null,
+                h("ion-button", { onClick: () => this.changeCanticle() },
+                  h("ion-icon", { name: "swap-horizontal", slot: "start" }),
+                  h("ion-label", null, localeStrings.changeCanticle))))))),
+        this.headingNode(),
+        includeAntiphon && this.antiphonNode(this.obj.metadata.antiphon), (_k = this.filteredValue) === null || _k === void 0 ? void 0 :
+        _k.map((section, sectionIndex) => {
+          var _a, _b, _c;
+          return [
+            // render a `Heading`, if this section has a `label`
+            section.label && ((_a = section.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.headingNode(section.label, 4, false, true, true),
+            // build a set of verses
+            h("div", { class: 'psalm-set' },
+              section.value.map((verse, verseIndex) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                // build each verse
+                if (verse instanceof Heading) {
+                  // for e.g., the Benedicite, Heading passed at head of section
+                  return h("ldf-heading", { doc: verse });
+                }
+                else {
+                  // otherwise, it's a normal psalm verse
+                  const nodes = new Array();
+                  // 1st half of verse
+                  nodes.push(h("div", { class: 'verse' }, this.editable ?
+                    h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${sectionIndex}-${verseIndex}-verse`, text: verse.verse, path: `${this.path}/value/${sectionIndex}/value/${verseIndex}/verse`, placeholder: 'Lorem ipsum sit dolor amet, *', template: pattern, templateMaker: templateMaker }) :
+                    h("ldf-string", { text: verse.verse, citation: { label: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.label, book: ((_b = this.obj) === null || _b === void 0 ? void 0 : _b.style) === 'psalm' ? 'Psalm' : undefined, chapter: (_d = (_c = this.obj) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.number, verse: verse.number }, dropcap: (verseIndex == 0 && ((_e = this.obj) === null || _e === void 0 ? void 0 : _e.language) !== "he") ? 'force' : 'disabled', index: verseIndex, fragment: this.path })));
+                  nodes.push(h("br", null));
+                  // 2nd half of verse
+                  nodes.push(h("div", { class: 'halfverse' }, this.editable ?
+                    h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${sectionIndex}-${verseIndex}-halfverse`, text: verse.halfverse, path: `${this.path}/value/${sectionIndex}/value/${verseIndex}/halfverse`, placeholder: 'consectetur adipiscing elit.', template: pattern }) :
+                    h("ldf-string", { text: verse.halfverse, citation: { label: (_f = this.obj) === null || _f === void 0 ? void 0 : _f.label, book: ((_g = this.obj) === null || _g === void 0 ? void 0 : _g.style) === 'psalm' ? 'Psalm' : undefined, chapter: (_j = (_h = this.obj) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j.number, verse: verse.number }, dropcap: 'disabled', fragment: this.path })));
+                  // render the verse
+                  return (h("p", { class: this.editable ? 'psalm editable' : 'psalm', onClick: () => {
+                      this.focusedVerse = verseIndex;
+                      this.focusedSection = sectionIndex;
+                    } },
+                    this.editable ?
+                      h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${sectionIndex}-${verseIndex}-number`, text: verse.number, path: `${this.path}/value/${sectionIndex}/value/${verseIndex}/number`, placeholder: '#', template: pattern }) :
+                      (verse.number && h("sup", null, verse.number)),
+                    h("div", { class: 'text' },
+                      nodes,
+                      this.editable && h("ion-button", { fill: "clear", class: { "section-break": true, "hidden": this.focusedVerse !== verseIndex || this.focusedSection !== sectionIndex }, onClick: () => this.insertSectionBreakAfterVerse(sectionIndex, verseIndex) }, localeStrings.section_break_insert))));
+                }
+              }),
+              this.obj.repeatAntiphon(sectionIndex, this.filteredValue.length)
+                && h("div", { class: 'repeat-antiphon' }, this.antiphonNode((_c = (_b = this.obj) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.antiphon)),
+              this.editable && this.obj.value.length > (sectionIndex + 1) && h("ion-button", { fill: "clear", class: "section-break", onClick: () => this.removeSectionBreakAfter(sectionIndex) }, localeStrings.section_break_remove))
+          ];
+        }),
+        ((_m = (_l = this.obj) === null || _l === void 0 ? void 0 : _l.metadata) === null || _m === void 0 ? void 0 : _m.gloria) && !this.obj.metadata.omit_gloria && this.gloriaNode(this.obj.metadata.gloria),
+        ((((_p = (_o = this.obj) === null || _o === void 0 ? void 0 : _o.metadata) === null || _p === void 0 ? void 0 : _p.gloria) && !this.obj.metadata.omit_gloria) || (((_r = (_q = this.obj) === null || _q === void 0 ? void 0 : _q.metadata) === null || _r === void 0 ? void 0 : _r.gloria) === undefined || Boolean((_t = (_s = this.obj) === null || _s === void 0 ? void 0 : _s.metadata) === null || _t === void 0 ? void 0 : _t.omit_gloria))) && includeAntiphon && this.antiphonNode((_v = (_u = this.obj) === null || _u === void 0 ? void 0 : _u.metadata) === null || _v === void 0 ? void 0 : _v.antiphon))));
+  }
+  static get is() { return "ldf-psalm"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["psalm.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["psalm.css"]
+  }; }
+  static get properties() { return {
+    "doc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Psalm | string",
+        "resolved": "Psalm | string",
+        "references": {
+          "Psalm": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The LDF Psalm to be rendered, either as JSON or an 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 Psalm 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
+    }
+  }; }
+  static get states() { return {
+    "obj": {},
+    "localeStrings": {},
+    "filteredValue": {},
+    "focusedVerse": {},
+    "focusedSection": {}
+  }; }
+  static get events() { return [{
+      "method": "ldfAskForCanticleOptions",
+      "name": "ldfAskForCanticleOptions",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "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"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "doc",
+      "methodName": "docChanged"
+    }]; }
+}

package/dist/collection/components/refrain/refrain.css

@@ -0,0 +1,42 @@
+ldf-refrain, :host {
+  font-family: var(--ldf-font-face);
+  display: block;
+}
+ldf-refrain p, :host p {
+  font-style: inherit;
+  margin-bottom: 0;
+  margin: 0;
+}
+
+.antiphon {
+  font-style: var(--ldf-antiphon-font-style);
+}
+
+.gloria {
+  margin-left: calc(var(--ldf-gloria-indent) / 2);
+  text-indent: calc(var(--ldf-gloria-indent) / -2);
+}
+
+@media (min-width: 450px) {
+  .gloria {
+    margin-left: var(--ldf-gloria-indent);
+    text-indent: calc(var(--ldf-gloria-indent) * -1);
+  }
+  .gloria > p:first-child {
+    margin-left: 0em;
+  }
+  .gloria > p:nth-child(even) {
+    margin-left: 1em;
+  }
+}
+.left {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  text-align: right;
+}

package/dist/collection/components/refrain/refrain.js

@@ -0,0 +1,105 @@
+import { Component, Prop, Watch, State, Host, h } from '@stencil/core';
+import { Refrain } from '@venite/ldf';
+export class RefrainComponent {
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new Refrain(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new Refrain(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new Refrain();
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.docChanged(this.doc);
+  }
+  // Render
+  render() {
+    var _a, _b, _c;
+    return (h(Host, { lang: this.obj.language },
+      this.editable && h("ldf-label-bar", null,
+        h("slot", { slot: 'end', name: 'controls' })),
+      h("div", { class: `${((_a = this.obj) === null || _a === void 0 ? void 0 : _a.style) || ''} ${((_c = (_b = this.obj) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.align) || ''}` }, this.obj.value && this.obj.value.map((para, ii) => this.editable ?
+        h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${ii}`, text: para, path: `${this.path}/value/${ii}` }) :
+        h("p", { id: `${this.obj.uid || this.obj.slug}-${ii}`, innerHTML: para })))));
+  }
+  static get is() { return "ldf-refrain"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["refrain.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["refrain.css"]
+  }; }
+  static get properties() { return {
+    "doc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Refrain | string",
+        "resolved": "Refrain | string",
+        "references": {
+          "Refrain": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An LDF Refrain 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 Collect 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
+    }
+  }; }
+  static get states() { return {
+    "obj": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "doc",
+      "methodName": "docChanged"
+    }]; }
+}

package/dist/collection/components/responsive-prayer/responsive-prayer.css

@@ -0,0 +1,83 @@
+:host {
+  text-align: var(--ldf-text-align);
+  text-justify: inter-character;
+}
+
+.response {
+  font-weight: var(--ldf-response-font-weight);
+  font-style: var(--ldf-response-font-style);
+}
+
+.preces td {
+  text-align: left;
+}
+
+.preces td:first-child {
+  font-style: italic;
+  text-align: left;
+  padding-right: 1em;
+  vertical-align: top;
+}
+
+.optional {
+  padding-left: 0.5em;
+  border-left: 2px solid black;
+}
+
+.line {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.line > * {
+  text-align: var(--ldf-text-align);
+}
+
+.editable.line ldf-editable-boolean {
+  width: 2em;
+}
+.editable.line p {
+  width: calc(100% - 2em);
+}
+
+.rubric {
+  font-family: var(--ldf-font-face);
+  color: var(--ldf-rubric-color);
+  font-style: var(--ldf-rubric-font-style);
+  font-weight: var(--ldf-rubric-font-weight);
+  font-size: var(--ldf-rubric-font-size);
+}
+
+.litany {
+  white-space: pre-wrap;
+}
+
+.preces {
+  width: 100%;
+}
+.preces tr,
+.preces .row {
+  display: table-row;
+  display: var(--ldf-preces-tr-display);
+}
+.preces tr td,
+.preces tr .cell,
+.preces .row td,
+.preces .row .cell {
+  display: table-cell;
+  display: var(--ldf-preces-td-display);
+  margin-left: var(--ldf-preces-td-margin-left);
+}
+
+h3.editable-label {
+  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);
+}
+
+.optional-label {
+  margin-right: 0.5em;
+}

package/dist/collection/components/responsive-prayer/responsive-prayer.i18n.en.json

@@ -0,0 +1,7 @@
+{
+  "label": "Label",
+  "source": "Source",
+  "citation": "Citation",
+  "makeOptional": "Make Optional",
+  "optional": "Optional"
+}