@venite/components 0.16.7 → 0.16.13

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

@@ -0,0 +1,383 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) 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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+exports.__esModule = true;
+exports.PsalmComponent = void 0;
+var core_1 = require("@ionic/core");
+var core_2 = require("@stencil/core");
+var ldf_1 = require("@venite/ldf");
+var locale_1 = require("../../utils/locale");
+var psalm_i18n_en_json_1 = require("./psalm.i18n.en.json");
+var LOCALE = {
+    'en': psalm_i18n_en_json_1["default"]
+};
+var PsalmComponent = /** @class */ (function () {
+    function PsalmComponent() {
+        this.focusedVerse = undefined;
+        this.focusedSection = undefined;
+    }
+    PsalmComponent.prototype.docChanged = function (newDoc) {
+        try {
+            if (typeof newDoc == 'string') {
+                this.obj = new ldf_1.Psalm(JSON.parse(newDoc));
+            }
+            else {
+                this.obj = new ldf_1.Psalm(newDoc);
+            }
+            this.filter();
+        }
+        catch (e) {
+            console.warn(e);
+            this.obj = new ldf_1.Psalm();
+        }
+    };
+    // Lifecycle events
+    PsalmComponent.prototype.componentWillLoad = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.docChanged(this.doc);
+                this.loadLocaleStrings();
+                this.filter();
+                return [2 /*return*/];
+            });
+        });
+    };
+    // Private methods
+    PsalmComponent.prototype.loadLocaleStrings = function () {
+        return __awaiter(this, void 0, Promise, function () {
+            return __generator(this, function (_a) {
+                try {
+                    this.localeStrings = LOCALE[locale_1.getComponentClosestLanguage(this.element)];
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+                return [2 /*return*/];
+            });
+        });
+    };
+    PsalmComponent.prototype.changeCanticle = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var modal;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, core_1.modalController.create({
+                            component: 'ldf-editable-filter-documents'
+                        })];
+                    case 1:
+                        modal = _a.sent();
+                        modal.componentProps = {
+                            modal: modal,
+                            type: "canticle",
+                            changeCallback: function (doc) {
+                                _this.ldfDocShouldChange.emit(new ldf_1.Change({
+                                    path: _this.path,
+                                    op: [{
+                                            type: 'set',
+                                            oldValue: _this.obj,
+                                            value: doc
+                                        }]
+                                }));
+                            }
+                        };
+                        return [4 /*yield*/, modal.present()];
+                    case 2:
+                        _a.sent();
+                        this.ldfAskForCanticleOptions.emit(this.path);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    PsalmComponent.prototype.filter = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.filteredValue = this.obj.filteredVerses();
+                return [2 /*return*/];
+            });
+        });
+    };
+    // Render helpers
+    PsalmComponent.prototype.antiphonNode = function (antiphon, notEditable) {
+        var _a, _b;
+        if (notEditable === void 0) { notEditable = false; }
+        if (typeof antiphon == 'string') {
+            var refrain = new ldf_1.Refrain({ type: 'refrain', value: [antiphon], style: 'antiphon' });
+            return React.createElement("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 React.createElement("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': '...' }
+            var date = this.obj.day ? ldf_1.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);
+        }
+    };
+    PsalmComponent.prototype.gloriaNode = function (gloria) {
+        if (typeof gloria == 'string') {
+            var refrain = new ldf_1.Refrain({ value: [gloria], style: 'gloria' });
+            return React.createElement("ldf-liturgical-document", { doc: refrain, editable: this.editable });
+        }
+        else {
+            return React.createElement("ldf-liturgical-document", { doc: gloria, editable: this.editable });
+        }
+    };
+    PsalmComponent.prototype.headingNode = function (value, level, showLatinName, omitCitation, omitSource) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        if (value === void 0) { value = undefined; }
+        if (level === void 0) { level = 3; }
+        if (showLatinName === void 0) { showLatinName = true; }
+        if (omitCitation === void 0) { omitCitation = false; }
+        if (omitSource === void 0) { omitSource = false; }
+        var 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;
+        }
+        var heading = new ldf_1.Heading({
+            type: 'heading',
+            metadata: { level: 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
+            ? [
+                React.createElement("ldf-label-bar", null,
+                    React.createElement("h3", { slot: "start", "class": "editable-label" },
+                        React.createElement("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) && React.createElement("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 }),
+                    React.createElement("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 }),
+                    React.createElement("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 })),
+                React.createElement("ldf-label-bar", null,
+                    React.createElement("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 }))
+            ]
+            : React.createElement("ldf-heading", { doc: heading }, showLatinName && React.createElement("h5", { slot: 'additional' }, (_v = (_u = this.obj) === null || _u === void 0 ? void 0 : _u.metadata) === null || _v === void 0 ? void 0 : _v.latinname)));
+    };
+    PsalmComponent.prototype.insertSectionBreakAfterVerse = function (sectionIndex, verseIndex) {
+        var section = this.obj.value[sectionIndex], remainingVerses = section.value.slice(0, verseIndex + 1), movingVerses = section.value.slice(verseIndex + 1);
+        this.ldfDocShouldChange.emit(new ldf_1.Change({
+            path: this.path + "/value/" + sectionIndex,
+            op: [{
+                    type: 'set',
+                    oldValue: section,
+                    value: __assign(__assign({}, section), { value: remainingVerses })
+                }]
+        }));
+        this.ldfDocShouldChange.emit(new ldf_1.Change({
+            path: this.path + "/value",
+            op: [{
+                    type: 'insertAt',
+                    index: sectionIndex + 1,
+                    oldValue: section,
+                    value: __assign(__assign({}, section), { value: movingVerses })
+                }]
+        }));
+    };
+    PsalmComponent.prototype.removeSectionBreakAfter = function (sectionIndex) {
+        var thisSection = this.obj.value[sectionIndex], nextSection = this.obj.value[sectionIndex + 1];
+        if (thisSection && nextSection) {
+            var combinedValue = thisSection.value.concat(nextSection.value);
+            this.ldfDocShouldChange.emit(new ldf_1.Change({
+                path: this.path + "/value/" + sectionIndex + "/value",
+                op: [{
+                        type: 'set',
+                        oldValue: thisSection.value,
+                        value: combinedValue
+                    }]
+            }));
+            this.ldfDocShouldChange.emit(new ldf_1.Change({
+                path: this.path + "/value",
+                op: [{
+                        type: 'deleteAt',
+                        index: sectionIndex + 1,
+                        oldValue: nextSection
+                    }]
+            }));
+        }
+    };
+    // Render
+    PsalmComponent.prototype.render = function () {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        var includeAntiphon = this.obj.includeAntiphon();
+        // create blank psalm verse pattern
+        var pattern, templateMaker = function (verse) { return ({ type: 'psalm-verse', number: '', halfverse: '', verse: verse }); };
+        if (this.editable) {
+            pattern = __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 = '';
+            }
+        }
+        var noNumbers = (((_c = this.obj) === null || _c === void 0 ? void 0 : _c.value) || [])
+            .map(function (section) { return section.value.map(function (verse) { return !Boolean(verse.number); }); })
+            .flat()
+            .reduce(function (a, b) { return a || b; }, false);
+        var localeStrings = this.localeStrings || {};
+        return (React.createElement(core_2.Host, { lang: ((_d = this.obj) === null || _d === void 0 ? void 0 : _d.language) || 'en' },
+            React.createElement("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') && React.createElement("ldf-label-bar", null,
+                    React.createElement("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) && React.createElement("ldf-label-bar", null,
+                        React.createElement("slot", { slot: 'end', name: 'controls' },
+                            React.createElement("ion-buttons", null,
+                                React.createElement("ion-button", { onClick: function () { return _this.changeCanticle(); } },
+                                    React.createElement("ion-icon", { name: "swap-horizontal", slot: "start" }),
+                                    React.createElement("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(function (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
+                        React.createElement("div", { "class": 'psalm-set' },
+                            section.value.map(function (verse, verseIndex) {
+                                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                                // build each verse
+                                if (verse instanceof ldf_1.Heading) {
+                                    // for e.g., the Benedicite, Heading passed at head of section
+                                    return React.createElement("ldf-heading", { doc: verse });
+                                }
+                                else {
+                                    // otherwise, it's a normal psalm verse
+                                    var nodes = new Array();
+                                    // 1st half of verse
+                                    nodes.push(React.createElement("div", { "class": 'verse' }, _this.editable ?
+                                        React.createElement("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 }) :
+                                        React.createElement("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(React.createElement("br", null));
+                                    // 2nd half of verse
+                                    nodes.push(React.createElement("div", { "class": 'halfverse' }, _this.editable ?
+                                        React.createElement("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 }) :
+                                        React.createElement("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 (React.createElement("p", { "class": _this.editable ? 'psalm editable' : 'psalm', onClick: function () {
+                                            _this.focusedVerse = verseIndex;
+                                            _this.focusedSection = sectionIndex;
+                                        } },
+                                        _this.editable ?
+                                            React.createElement("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 && React.createElement("sup", null, verse.number)),
+                                        React.createElement("div", { "class": 'text' },
+                                            nodes,
+                                            _this.editable && React.createElement("ion-button", { fill: "clear", "class": { "section-break": true, "hidden": _this.focusedVerse !== verseIndex || _this.focusedSection !== sectionIndex }, onClick: function () { return _this.insertSectionBreakAfterVerse(sectionIndex, verseIndex); } }, localeStrings.section_break_insert))));
+                                }
+                            }),
+                            _this.obj.repeatAntiphon(sectionIndex, _this.filteredValue.length)
+                                && React.createElement("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) && React.createElement("ion-button", { fill: "clear", "class": "section-break", onClick: function () { return _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))));
+    };
+    __decorate([
+        core_2.Element()
+    ], PsalmComponent.prototype, "element");
+    __decorate([
+        core_2.State()
+    ], PsalmComponent.prototype, "obj");
+    __decorate([
+        core_2.State()
+    ], PsalmComponent.prototype, "localeStrings");
+    __decorate([
+        core_2.State()
+    ], PsalmComponent.prototype, "filteredValue");
+    __decorate([
+        core_2.State()
+    ], PsalmComponent.prototype, "focusedVerse");
+    __decorate([
+        core_2.State()
+    ], PsalmComponent.prototype, "focusedSection");
+    __decorate([
+        core_2.Prop()
+    ], PsalmComponent.prototype, "doc");
+    __decorate([
+        core_2.Watch('doc')
+    ], PsalmComponent.prototype, "docChanged");
+    __decorate([
+        core_2.Prop({ reflect: true })
+    ], PsalmComponent.prototype, "path");
+    __decorate([
+        core_2.Prop()
+    ], PsalmComponent.prototype, "editable");
+    __decorate([
+        core_2.Event({ bubbles: true })
+    ], PsalmComponent.prototype, "ldfAskForCanticleOptions");
+    __decorate([
+        core_2.Event({ bubbles: true })
+    ], PsalmComponent.prototype, "ldfDocShouldChange");
+    PsalmComponent = __decorate([
+        core_2.Component({
+            tag: 'ldf-psalm',
+            styleUrl: 'psalm.scss',
+            scoped: true
+        })
+    ], PsalmComponent);
+    return PsalmComponent;
+}());
+exports.PsalmComponent = PsalmComponent;

package/dist/collection/components/psalm/psalm.css

@@ -0,0 +1,152 @@
+ldf-psalm, :host {
+  font-family: var(--ldf-font-face);
+  --ldf-drop-margin-right: var(--ldf-drop-psalm-margin-right);
+}
+
+ldf-psalm[lang=he] .verse, :host[lang=he] .verse {
+  text-align: right;
+  --ldf-drop-float: right;
+}
+
+.psalm-set {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+/* Psalm grid display */
+.psalm-set .psalm {
+  display: var(--ldf-psalm-grid-display);
+  grid-template-columns: var(--ldf-psalm-grid-template-columns);
+  grid-template-rows: auto;
+  grid-template-areas: var(--ldf-psalm-grid-template-areas);
+  margin: 0;
+  text-indent: var(--ldf-psalm-verse-indentation);
+}
+.psalm-set .psalm br {
+  display: var(--ldf-psalm-line-break-display);
+}
+.psalm-set .psalm sup {
+  float: var(--ldf-psalm-number-float);
+  display: var(--ldf-psalm-number-display);
+  grid-area: var(--ldf-psalm-number-grid-area);
+  margin-right: var(--ldf-psalm-number-margin-right);
+}
+.psalm-set .psalm .text {
+  display: var(--ldf-psalm-text-display);
+  grid-area: var(--ldf-psalm-text-grid-area);
+}
+.psalm-set .psalm .halfverse {
+  margin-left: var(--ldf-psalm-halfverse-margin-left);
+}
+.psalm-set .psalm .verse,
+.psalm-set .psalm .halfverse {
+  display: var(--ldf-psalm-verse-display);
+}
+.psalm-set .psalm .halfverse {
+  display: var(--ldf-psalm-halfverse-display, var(--ldf-psalm-verse-display));
+}
+
+.editable .verse,
+.editable .halfverse {
+  width: 100%;
+}
+
+.psalm-parent.no-numbers {
+  display: block;
+  text-align: left;
+  grid-template-columns: none;
+  grid-template-rows: none;
+  grid-template-areas: none;
+}
+.psalm-parent.no-numbers .psalm {
+  display: block;
+  grid-template-columns: none;
+  grid-template-rows: none;
+  grid-template-areas: none;
+}
+.psalm-parent.no-numbers .psalm .text {
+  text-align: left;
+  grid-area: none;
+  display: var(--ldf-psalm-text-display);
+  width: 100%;
+}
+
+.psalm-set .psalm:nth-of-type(1) sup {
+  display: var(--ldf-psalm-set-first-verse-number-display);
+}
+.psalm-set .psalm:nth-of-type(1) .text:nth-of-type(1) .verse:nth-of-type(1) {
+  display: var(--ldf-psalm-set-first-verse-display);
+}
+.psalm-set .psalm:nth-of-type(1) .text:nth-of-type(1) .halfverse:nth-of-type(2) {
+  display: var(--ldf-psalm-set-first-half-verse-display, inline-block);
+}
+
+.psalm-set:nth-of-type(1) .psalm:nth-of-type(1) sup {
+  display: var(--ldf-psalm-first-verse-number-display);
+}
+.psalm-set:nth-of-type(1) .psalm:nth-of-type(1) .text:nth-of-type(1) .verse:nth-of-type(1) {
+  display: var(--ldf-psalm-first-verse-display);
+}
+.psalm-set:nth-of-type(1) .psalm:nth-of-type(1) .text:nth-of-type(1) .halfverse:nth-of-type(2) {
+  display: var(--ldf-psalm-first-half-verse-display, inline-block);
+}
+
+/* Antiphon display */
+.antiphon {
+  display: var(--ldf-psalm-antiphon-display);
+  font-style: var(--ldf-antiphon-font-style);
+  font-weight: var(--ldf-antiphon-font-weight);
+  margin-top: 0.5em;
+}
+
+.repeat-antiphon {
+  display: var(--ldf-psalm-repeat-antiphon-display);
+}
+
+h5 {
+  font-size: 1em;
+  font-style: italic;
+  font-weight: normal;
+  margin-right: 1em;
+}
+
+.psalm.unison .text {
+  font-weight: var(--ldf-unison-font-weight);
+  font-style: var(--ldf-unison-font-style);
+}
+
+.psalm.omit .text {
+  display: none;
+}
+
+.psalm.wholeverse .psalm:nth-child(even),
+.psalm-parent.wholeverse .psalm:nth-child(even) {
+  font-weight: var(--ldf-response-font-weight);
+  font-style: var(--ldf-response-font-style);
+}
+
+.psalm.halfverse .halfverse,
+.psalm-parent.halfverse .halfverse {
+  font-weight: var(--ldf-response-font-weight);
+  font-style: var(--ldf-response-font-style);
+}
+
+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);
+}
+
+/* Section break buttons */
+.section-break {
+  display: block;
+  text-align: center;
+  width: 100%;
+}
+
+.section-break.hidden {
+  display: none;
+}

package/dist/collection/components/psalm/psalm.i18n.en.json

@@ -0,0 +1,10 @@
+{
+  "changeCanticle": "Change Canticle",
+  "citation": "(Biblical) Citation",
+  "label": "Label",
+  "latinname": "Latin Name",
+  "section_break_insert": "+ insert section break",
+  "section_break_remove": "x remove section break",
+  "source": "Source",
+  "source_citation": "Citation"
+}