@venite/components 0.16.7 → 0.16.13

package/dist/collection/components/liturgical-document/condition-node.js

@@ -0,0 +1,86 @@
+import { h } from "@stencil/core";
+export const ConditionNode = ({ doc, localeStrings }, children) => h("div", { class: 'condition' },
+  h("p", null,
+    localeStrings.condition,
+    h("code", null, localeStrings[doc.condition.mode]),
+    localeStrings.of_the_following),
+  h("ul", null, doc.condition.conditions.map(condition => h(ConditionPiece, { condition: condition, localeStrings: localeStrings }))),
+  children);
+const ConditionPiece = ({ condition, localeStrings }) => {
+  let nodes = [];
+  /* Except/Only fields: day, season, week, weekday */
+  if (condition.day) {
+    nodes = nodes.concat(h(ExceptOnly, { condition: condition, field: 'day', localeStrings: localeStrings }));
+  }
+  if (condition.season) {
+    nodes = nodes.concat(h(ExceptOnly, { condition: condition, field: 'season', localeStrings: localeStrings }));
+  }
+  if (condition.week) {
+    nodes = nodes.concat(h(ExceptOnly, { condition: condition, field: 'week', localeStrings: localeStrings }));
+  }
+  if (condition.weekday) {
+    nodes = nodes.concat(h(ExceptOnly, { condition: condition, field: 'weekday', localeStrings: localeStrings }));
+  }
+  if (condition.day_of_month) {
+    nodes.push([
+      localeStrings.day_of_month_1,
+      ordinal_suffix_of(Number(condition.day_of_month)),
+      localeStrings.day_of_month_2
+    ]);
+  }
+  if (condition.hasOwnProperty('feastDay')) {
+    nodes.push([
+      localeStrings.the_day,
+      condition.feastDay ? localeStrings.is : localeStrings.is_not,
+      localeStrings.feastDay
+    ]);
+  }
+  if (condition.preference) {
+    nodes.push([
+      localeStrings.the_preference,
+      h("code", null, condition.preference.key),
+      condition.preference.is ? localeStrings.is : localeStrings.is_not,
+      h("code", null, condition.preference.value)
+    ]);
+  }
+  if (condition.date) {
+    nodes.push([
+      localeStrings.the_date,
+      condition.date.lt && `${localeStrings.lt} ${condition.date.lt}`,
+      condition.date.lte && `${localeStrings.lte} ${condition.date.lte}`,
+      condition.date.gte && `${localeStrings.gte} ${condition.date.gte}`,
+      condition.date.gt && `${localeStrings.gt} ${condition.date.gt}`,
+    ]);
+  }
+  return nodes.map(node => h("li", null, node));
+};
+const ExceptOnly = ({ condition, field, localeStrings }) => {
+  var _a, _b;
+  const nodes = [];
+  ((_a = condition[field].except) === null || _a === void 0 ? void 0 : _a.length) > 0 && nodes.push([
+    localeStrings[field],
+    localeStrings.is,
+    condition[field].except.length > 1 ? localeStrings.except : localeStrings.except_1,
+    condition[field].except.join(', ')
+  ]);
+  ((_b = condition[field].only) === null || _b === void 0 ? void 0 : _b.length) > 0 && nodes.push([
+    localeStrings[field],
+    localeStrings.is,
+    condition[field].only.length > 1 ? localeStrings.only : localeStrings.only_1,
+    condition[field].only.join(', ')
+  ]);
+  return nodes;
+};
+function ordinal_suffix_of(i) {
+  var j = i % 10, k = i % 100;
+  if (j == 1 && k != 11) {
+    return i + "st";
+  }
+  if (j == 2 && k != 12) {
+    return i + "nd";
+  }
+  if (j == 3 && k != 13) {
+    return i + "rd";
+  }
+  return i + "th";
+}

package/dist/collection/components/liturgical-document/dist/liturgical-document.js

@@ -0,0 +1,341 @@
+"use strict";
+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.LiturgicalDocumentComponent = void 0;
+var core_1 = require("@stencil/core");
+var ldf_1 = require("@venite/ldf");
+var locale_1 = require("../../utils/locale");
+var liturgical_document_i18n_en_json_1 = require("./liturgical-document.i18n.en.json");
+var LOCALE = {
+    'en': liturgical_document_i18n_en_json_1["default"]
+};
+var condition_node_1 = require("./condition-node");
+var lookup_node_1 = require("./lookup-node");
+var LiturgicalDocumentComponent = /** @class */ (function () {
+    function LiturgicalDocumentComponent() {
+        this.hasFocus = false;
+        this.buttonsSelected = false;
+        this.interrupt = false;
+        /** Type of the parent `LiturgicalDocument`, if any */
+        this.parentType = null;
+        /** Documents in `preview` mode will display as if they're not editable, unless the user explicitly chooses to edit them */
+        this.preview = false;
+        /** CSS padding to add around element, if any. */
+        this.padding = undefined;
+    }
+    LiturgicalDocumentComponent.prototype.docChanged = function (newDoc) {
+        return __awaiter(this, void 0, void 0, function () {
+            var provisionalObj;
+            return __generator(this, function (_a) {
+                try {
+                    if (typeof newDoc == 'string') {
+                        provisionalObj = new ldf_1.LiturgicalDocument(JSON.parse(newDoc));
+                    }
+                    else {
+                        provisionalObj = new ldf_1.LiturgicalDocument(newDoc);
+                    }
+                }
+                catch (e) {
+                    console.warn(e);
+                    provisionalObj = new ldf_1.LiturgicalDocument();
+                }
+                this.obj = provisionalObj || new ldf_1.LiturgicalDocument();
+                return [2 /*return*/];
+            });
+        });
+    };
+    // Listeners
+    LiturgicalDocumentComponent.prototype.onDragOver = function () {
+        if (this.path !== "/") {
+            this.hasFocus = true;
+            this.focusPath.emit(this.path);
+            this.focusObj.emit({ obj: this.obj, path: this.path });
+            console.log("dragged over", this.path);
+        }
+    };
+    LiturgicalDocumentComponent.prototype.selectionChangeHandler = function (ev) {
+        var _a, _b;
+        // stop iOS from taking over 
+        ev.preventDefault();
+        // handle the selection
+        var selection = document.getSelection(), anchorNode = selection.anchorNode, citation = (_b = (_a = anchorNode === null || anchorNode === void 0 ? void 0 : anchorNode.parentElement) === null || _a === void 0 ? void 0 : _a.closest('ldf-string')) === null || _b === void 0 ? void 0 : _b.citation;
+        if (this.element.contains(anchorNode)) {
+            var text = selection.toString();
+            this.ldfSelectionChange.emit({
+                target: this.element,
+                text: text,
+                citation: citation,
+                fragment: this.path
+            });
+        }
+    };
+    // Lifecycle events
+    LiturgicalDocumentComponent.prototype.componentWillLoad = function () {
+        this.loadLocaleStrings();
+        this.docChanged(this.doc);
+    };
+    /** On hover, display Add Block buttons */
+    LiturgicalDocumentComponent.prototype.onMouseOver = function () {
+        this.hasFocus = true;
+        this.focusPath.emit(this.path);
+    };
+    LiturgicalDocumentComponent.prototype.onMouseOut = function (ev) {
+        var _this = this;
+        var elDiv = this.element.querySelector('div.container');
+        if (ev.relatedTarget == elDiv) {
+            setTimeout(function () {
+                _this.hasFocus = false;
+                _this.focusPath.emit(_this.path);
+            }, 500);
+        }
+    };
+    // Firing the event during the capture phase the most specific LiturgicalDocument will
+    // be handled last, i.e., the `Liturgy` won't override subdocuments
+    LiturgicalDocumentComponent.prototype.onClick = function () {
+        this.hasFocus = true;
+        this.focusPath.emit(this.path);
+        this.focusObj.emit({ obj: this.obj, path: this.path });
+    };
+    LiturgicalDocumentComponent.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*/];
+            });
+        });
+    };
+    /** Gives a loading view, a description of the document (if editing and has a lookup), or the component of the correct type */
+    LiturgicalDocumentComponent.prototype.nodeFromDoc = function (doc, forceEditable) {
+        if (forceEditable === void 0) { forceEditable = undefined; }
+        if (doc == undefined) {
+            return (customElements === null || customElements === void 0 ? void 0 : customElements.get('ion-skeleton-text')) ? React.createElement("ion-skeleton-text", null) : React.createElement("p", null, "...");
+        }
+        else if (this.editable || forceEditable) {
+            return this.editableNode(doc);
+        }
+        else {
+            return this.chooseComponent(doc);
+        }
+    };
+    LiturgicalDocumentComponent.prototype.editableNode = function (doc) {
+        var _a;
+        var localeStrings = this.localeStrings || {};
+        if (((_a = doc.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && Boolean(doc.value[0])) {
+            if (doc.condition) {
+                return React.createElement(condition_node_1.ConditionNode, { doc: doc, localeStrings: localeStrings }, this.chooseComponent(doc));
+            }
+            else {
+                return this.chooseComponent(doc);
+            }
+        }
+        else {
+            if (doc.condition && !doc.lookup) {
+                return React.createElement(condition_node_1.ConditionNode, { doc: doc, localeStrings: localeStrings }, this.chooseComponent(doc));
+            }
+            else if (doc.condition && doc.lookup) {
+                return React.createElement(condition_node_1.ConditionNode, { doc: doc, localeStrings: localeStrings },
+                    React.createElement(lookup_node_1.LookupNode, { doc: doc, localeStrings: localeStrings }));
+            }
+            else if (!doc.condition && doc.lookup) {
+                return React.createElement(lookup_node_1.LookupNode, { doc: doc, localeStrings: localeStrings });
+            }
+            else if (doc.type === "bible-reading") {
+                return React.createElement(lookup_node_1.LookupNode, { doc: doc, localeStrings: localeStrings });
+            }
+            else {
+                return this.chooseComponent(doc);
+            }
+        }
+    };
+    /** Processes generic LiturgicalDocument into component of the appropriate type */
+    //@Method()
+    LiturgicalDocumentComponent.prototype.chooseComponent = function (doc) {
+        var _a, _b;
+        var node;
+        var editable = this.editable && !this.preview;
+        switch (doc === null || doc === void 0 ? void 0 : doc.type) {
+            case 'liturgy':
+                node = React.createElement("ldf-liturgy", { path: this.path, editable: editable, preview: this.preview, doc: doc });
+                break;
+            case 'heading':
+                node = React.createElement("ldf-heading", { path: this.path, editable: editable, doc: doc });
+                break;
+            case 'image':
+                node = React.createElement("ldf-image", { path: this.path, editable: editable, doc: doc });
+                break;
+            case 'meditation':
+                var color = (_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.color, colorValue = (color === null || color === void 0 ? void 0 : color.hasOwnProperty('hex')) ? color.hex : color || '#3489eb';
+                node = React.createElement("ldf-meditation", { path: this.path, editable: this.editable || this.preview, doc: doc, color: colorValue });
+                break;
+            case 'option':
+                node = React.createElement("ldf-option", { path: this.path, editable: editable, preview: this.preview, doc: doc });
+                break;
+            case 'refrain':
+                node = React.createElement("ldf-refrain", { path: this.path, editable: editable, doc: doc });
+                break;
+            case 'rubric':
+                node = React.createElement("ldf-rubric", { path: this.path, editable: editable, doc: doc });
+                break;
+            case 'text':
+                node = React.createElement("ldf-text", { path: this.path, editable: editable, doc: doc });
+                break;
+            case 'responsive':
+                node = React.createElement("ldf-responsive-prayer", { path: this.path, editable: editable, doc: doc });
+                break;
+            case 'bible-reading':
+                node = React.createElement("ldf-bible-reading", { path: this.path, editable: editable, doc: doc });
+                break;
+            case 'psalm':
+                node = React.createElement("ldf-psalm", { path: this.path, editable: editable, doc: doc });
+                break;
+            default:
+                console.warn('invalid type for document', doc);
+                break;
+        }
+        return node;
+    };
+    LiturgicalDocumentComponent.prototype.setPreview = function (preview) {
+        this.preview = preview;
+        this.editable = true;
+    };
+    // Render
+    LiturgicalDocumentComponent.prototype.render = function () {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var node = this.nodeFromDoc(this.obj);
+        return (node && React.createElement(core_1.Host, { lang: ((_a = this.obj) === null || _a === void 0 ? void 0 : _a.language) || 'en' },
+            React.createElement("div", { "class": {
+                    container: true,
+                    editable: this.editable || this.preview,
+                    "small-only": !this.editable && !this.preview && ((_b = this.obj) === null || _b === void 0 ? void 0 : _b.responsive) !== undefined && ((_c = this.obj) === null || _c === void 0 ? void 0 : _c.responsive) == ldf_1.Responsive.SmallOnly,
+                    "small-hidden": !this.editable && !this.preview && ((_d = this.obj) === null || _d === void 0 ? void 0 : _d.responsive) !== undefined && ((_e = this.obj) === null || _e === void 0 ? void 0 : _e.responsive) == ldf_1.Responsive.SmallHidden
+                } },
+                (this.editable || this.preview) && React.createElement("ldf-editable-metadata-buttons", { visible: this.hasFocus, base: this.base, index: this.index, obj: this.obj, parentType: this.parentType, preview: this.preview, onLdfTogglePreview: function (e) { return _this.setPreview(e.detail); }, "class": { 'top-level': ((_f = this.obj) === null || _f === void 0 ? void 0 : _f.type) === 'liturgy' || ((_g = this.obj) === null || _g === void 0 ? void 0 : _g.type) === 'option' } }),
+                (this.editable || this.preview) && (((_h = this.obj) === null || _h === void 0 ? void 0 : _h.responsive) === ldf_1.Responsive.SmallHidden || ((_j = this.obj) === null || _j === void 0 ? void 0 : _j.responsive) === ldf_1.Responsive.SmallOnly) && React.createElement("ion-chip", { "class": "responsive-banner" },
+                    React.createElement("ion-icon", { name: "phone-portrait-outline" }),
+                    ((_k = this.obj) === null || _k === void 0 ? void 0 : _k.responsive) === ldf_1.Responsive.SmallOnly && React.createElement("ion-label", null, this.localeStrings.smallOnly),
+                    ((_l = this.obj) === null || _l === void 0 ? void 0 : _l.responsive) === ldf_1.Responsive.SmallHidden && React.createElement("ion-label", null, this.localeStrings.smallHidden)),
+                React.createElement("div", { id: (this.path || '').replace(/\//g, '-'), "class": {
+                        doc: true,
+                        editable: this.editable || this.preview
+                    }, style: { padding: this.padding } }, node))));
+    };
+    __decorate([
+        core_1.Element()
+    ], LiturgicalDocumentComponent.prototype, "element");
+    __decorate([
+        core_1.State()
+    ], LiturgicalDocumentComponent.prototype, "obj");
+    __decorate([
+        core_1.State()
+    ], LiturgicalDocumentComponent.prototype, "localeStrings");
+    __decorate([
+        core_1.State()
+    ], LiturgicalDocumentComponent.prototype, "hasFocus");
+    __decorate([
+        core_1.Prop()
+    ], LiturgicalDocumentComponent.prototype, "doc");
+    __decorate([
+        core_1.Watch('doc')
+    ], LiturgicalDocumentComponent.prototype, "docChanged");
+    __decorate([
+        core_1.Prop({ reflect: true })
+    ], LiturgicalDocumentComponent.prototype, "path");
+    __decorate([
+        core_1.Prop({ reflect: true })
+    ], LiturgicalDocumentComponent.prototype, "base");
+    __decorate([
+        core_1.Prop()
+    ], LiturgicalDocumentComponent.prototype, "index");
+    __decorate([
+        core_1.Prop({ reflect: true })
+    ], LiturgicalDocumentComponent.prototype, "parentType");
+    __decorate([
+        core_1.Prop()
+    ], LiturgicalDocumentComponent.prototype, "editable");
+    __decorate([
+        core_1.Prop()
+    ], LiturgicalDocumentComponent.prototype, "preview");
+    __decorate([
+        core_1.Prop()
+    ], LiturgicalDocumentComponent.prototype, "padding");
+    __decorate([
+        core_1.Listen("dragover", { passive: false })
+    ], LiturgicalDocumentComponent.prototype, "onDragOver");
+    __decorate([
+        core_1.Event()
+    ], LiturgicalDocumentComponent.prototype, "focusPath");
+    __decorate([
+        core_1.Event()
+    ], LiturgicalDocumentComponent.prototype, "focusObj");
+    __decorate([
+        core_1.Event()
+    ], LiturgicalDocumentComponent.prototype, "ldfSelectionChange");
+    __decorate([
+        core_1.Listen('selectionchange', { target: 'document' })
+    ], LiturgicalDocumentComponent.prototype, "selectionChangeHandler");
+    __decorate([
+        core_1.Listen('mouseover', { capture: true })
+    ], LiturgicalDocumentComponent.prototype, "onMouseOver");
+    __decorate([
+        core_1.Listen('mouseout', { capture: true })
+    ], LiturgicalDocumentComponent.prototype, "onMouseOut");
+    __decorate([
+        core_1.Listen('click', { capture: true })
+    ], LiturgicalDocumentComponent.prototype, "onClick");
+    LiturgicalDocumentComponent = __decorate([
+        core_1.Component({
+            tag: 'ldf-liturgical-document',
+            styleUrl: 'liturgical-document.scss',
+            scoped: true
+        })
+    ], LiturgicalDocumentComponent);
+    return LiturgicalDocumentComponent;
+}());
+exports.LiturgicalDocumentComponent = LiturgicalDocumentComponent;

package/dist/collection/components/liturgical-document/liturgical-document.css

@@ -0,0 +1,73 @@
+ldf-liturgical-document, :host {
+  font-family: var(--ldf-font-face);
+  display: block;
+}
+
+.container.editable {
+  padding-top: 0;
+}
+
+.lookup {
+  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 code {
+  font-weight: bold;
+}
+
+.condition {
+  background-color: var(--ldf-editable-condition-background-color);
+  color: var(--ldf-editable-condition-color);
+  border-radius: 4px;
+  padding: 1em;
+  width: calc(100% - 2em);
+}
+.condition code {
+  font-weight: bold;
+}
+
+.doc {
+  margin-top: var(--ldf-liturgical-document-margin-top);
+}
+
+ldf-editable-metadata-buttons {
+  height: none;
+  display: block;
+  z-index: 10;
+  background: var(--ldf-background);
+  opacity: 0.8;
+  width: 100%;
+  position: sticky;
+  top: 2em;
+  /*position: relative;*/
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+ldf-editable-metadata-buttons.top-level {
+  position: relative;
+  top: 0;
+}
+
+/* Responsive Attributes */
+.small-only {
+  display: block;
+}
+
+.small-hidden {
+  display: none;
+}
+
+@media (min-width: 415px) {
+  .small-only {
+    display: none;
+  }
+
+  .small-hidden {
+    display: block;
+  }
+}

package/dist/collection/components/liturgical-document/liturgical-document.i18n.en.json

@@ -0,0 +1,45 @@
+{
+  "bible_version": " in the version ",
+  "canticle-1": "The first canticle ",
+  "canticle-2": "The second canticle ",
+  "category": "All items that match the category ",
+  "collect": "The Collect of the Day.",
+  "day_of_month_1": "It is the ",
+  "day_of_month_2": " day of the month",
+  "definedByPreference": " defined by the preference ",
+  "fromCanticleTable": " from the canticle table ",
+  "fromLectionary": " from the lectionary ",
+  "lectionaryReading": "The lectionary reading ",
+  "filter-seasonal": " and the current season",
+  "filter-evening-true": " and are in the evening ",
+  "filter-evening-false": " and are not in the evening ",
+  "filter-day": " and the liturgical day ",
+  "rotate-true": " (rotating by day)",
+  "rotate-false": " (including all possibilities)",
+  "slug": "All items with the slug ",
+  "condition": "Included when ",
+  "and": "all",
+  "or": "any",
+  "the_day": " the day ",
+  "of_the_following": " of the following are true: ",
+  "day": "the liturgical day",
+  "season": "the liturgical season",
+  "week": "the liturgical week",
+  "weekday": "the day of the week",
+  "feastDay": "a Sunday or Holy Day",
+  "is": " is ",
+  "is_not": " is not ",
+  "only": " one of: ",
+  "only_1": "",
+  "except": " anything but: ",
+  "except_1": " not ",
+  "the_preference": "the preference ",
+  "the_preference_specified": "chosen in the preference ",
+  "the_date": "the date ",
+  "lte": " ≤ ",
+  "lt": " < ",
+  "gt": " > ",
+  "gte": " ≥ ",
+  "smallOnly": "Only appears on small screens",
+  "smallHidden": "Doesn't appear on small screens"
+}