@venite/components 0.16.7 → 0.16.13

package/dist/cjs/ldf-editable-preference-option.cjs.entry.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+require('./book-1a92678a.js');
+const preference = require('./preference-a4bd51c4.js');
+const change = require('./change-cdb1e8c0.js');
+const locale = require('./locale-d4e925b1.js');
+
+const additional = "Advanced Settings";
+const alternateYear = "“Alternate Year” Reading";
+const fallback = "Fallback Value";
+const label = "Label";
+const option = "Option";
+const value = "Value";
+const EN = {
+	additional: additional,
+	alternateYear: alternateYear,
+	"default": "Default",
+	fallback: fallback,
+	label: label,
+	option: option,
+	value: value
+};
+
+const LOCALE = {
+  'en': EN
+};
+const EditablePreferenceOptionComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+  }
+  optionChange() {
+    this.currentOption = this.option || new preference.PreferenceOption();
+  }
+  componentWillLoad() {
+    var _a;
+    this.currentOption = this.option || new preference.PreferenceOption();
+    if (!((_a = this.currentOption) === null || _a === void 0 ? void 0 : _a.metadata)) {
+      this.currentOption.metadata = {};
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/metadata`,
+        op: [{
+            type: 'set',
+            value: {}
+          }]
+      }));
+    }
+    this.loadLocaleStrings();
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const localeStrings = this.localeStrings || {};
+    return (index.h(index.Host, null, index.h("ion-list", null, index.h("ion-item", null, index.h("ion-label", { position: "stacked" }, localeStrings.value), index.h("ldf-editable-text", { path: `${this.path}/value`, placeholder: localeStrings.value, short: true, text: (_a = this.currentOption) === null || _a === void 0 ? void 0 : _a.value })), index.h("ion-item", null, index.h("ion-label", { position: "stacked" }, localeStrings.label), index.h("ldf-editable-text", { path: `${this.path}/label`, placeholder: localeStrings.label, short: true, text: (_b = this.currentOption) === null || _b === void 0 ? void 0 : _b.label })), index.h("ion-item", null, index.h("ion-label", null, localeStrings.default), index.h("ldf-editable-boolean", { path: this.path, property: "default", value: (_c = this.currentOption) === null || _c === void 0 ? void 0 : _c.default })), index.h("ion-list-header", null, localeStrings.additional), index.h("ion-item", null, index.h("ion-label", null, localeStrings.alternateYear), index.h("ldf-editable-boolean", { path: `${this.path}/metadata`, property: "alternateYear", value: (_e = (_d = this.currentOption) === null || _d === void 0 ? void 0 : _d.metadata) === null || _e === void 0 ? void 0 : _e.alternateYear })), index.h("ion-item", null, index.h("ion-label", { position: "stacked" }, localeStrings.fallback), index.h("ldf-editable-text", { path: `${this.path}/metadata/fallback`, placeholder: localeStrings.fallback, short: true, text: (_g = (_f = this.currentOption) === null || _f === void 0 ? void 0 : _f.metadata) === null || _g === void 0 ? void 0 : _g.fallback })))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "option": ["optionChange"]
+  }; }
+};
+
+exports.ldf_editable_preference_option = EditablePreferenceOptionComponent;

package/dist/cjs/ldf-editable-preference.cjs.entry.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+require('./book-1a92678a.js');
+const preference$1 = require('./preference-a4bd51c4.js');
+const change = require('./change-cdb1e8c0.js');
+const locale = require('./locale-d4e925b1.js');
+
+const add = "Add an Option";
+const category = "Category";
+const description = "Description";
+const label = "Label";
+const option = "Option";
+const preference = "Preference";
+const EN = {
+	add: add,
+	category: category,
+	description: description,
+	label: label,
+	option: option,
+	preference: preference
+};
+
+const LOCALE = {
+  'en': EN
+};
+const EditablePreferenceComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+  }
+  optionChange() {
+    this.currentPreference = this.preference || new preference$1.Preference();
+  }
+  componentWillLoad() {
+    this.currentPreference = this.preference || new preference$1.Preference();
+    this.loadLocaleStrings();
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  addOption(index) {
+    if (!this.currentPreference.options) {
+      this.currentPreference.options = new Array();
+      this.currentPreference.options.push(new preference$1.PreferenceOption());
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: this.path,
+        op: [{
+            type: 'set',
+            index: 'options',
+            value: [new preference$1.PreferenceOption()]
+          }]
+      }));
+    }
+    else {
+      this.currentPreference.options.push(new preference$1.PreferenceOption());
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/options`,
+        op: [{
+            type: 'insertAt',
+            index,
+            value: new preference$1.PreferenceOption()
+          }]
+      }));
+    }
+    this.currentPreference = new preference$1.Preference(Object.assign({}, this.currentPreference));
+  }
+  render() {
+    var _a, _b, _c, _d;
+    const localeStrings = this.localeStrings || {};
+    return (index.h(index.Host, null, index.h("ion-list", null, index.h("ion-item", null, index.h("ion-label", { position: "stacked" }, localeStrings.label), index.h("ldf-editable-text", { path: `${this.path}/label`, placeholder: localeStrings.label, short: true, text: (_a = this.currentPreference) === null || _a === void 0 ? void 0 : _a.label })), index.h("ion-item", null, index.h("ion-label", { position: "stacked" }, localeStrings.category), index.h("ldf-editable-text", { path: `${this.path}/category`, placeholder: localeStrings.category, short: true, text: (_b = this.currentPreference) === null || _b === void 0 ? void 0 : _b.category })), index.h("ion-item", null, index.h("ion-label", { position: "stacked" }, localeStrings.description), index.h("ldf-editable-text", { path: `${this.path}/description`, placeholder: localeStrings.description, short: true, text: (_c = this.currentPreference) === null || _c === void 0 ? void 0 : _c.description })), (((_d = this.currentPreference) === null || _d === void 0 ? void 0 : _d.options) || []).map((option, index$1) => [
+      index.h("ion-toolbar", null, index.h("ion-title", { slot: "start" }, localeStrings.option, " ", index$1 + 1), index.h("ion-buttons", { slot: "end" }, index.h("ldf-editable-delete", { slot: "end", base: `${this.path}/options`, index: index$1, obj: option }))),
+      index.h("ldf-editable-preference-option", { path: `${this.path}/options/${index$1}`, option: option })
+    ]), index.h("ion-button", { onClick: () => { var _a, _b; return this.addOption((_b = (_a = this.currentPreference) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length); }, size: "small" }, index.h("ion-icon", { slot: "start", name: "add" }), index.h("ion-label", null, localeStrings.add)))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "preference": ["optionChange"]
+  }; }
+};
+
+exports.ldf_editable_preference = EditablePreferenceComponent;

package/dist/cjs/ldf-editable-preferences.cjs.entry.js

@@ -0,0 +1,200 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const overlays = require('./overlays-eb464d6d.js');
+require('./book-1a92678a.js');
+const preference = require('./preference-a4bd51c4.js');
+const change = require('./change-cdb1e8c0.js');
+const locale = require('./locale-d4e925b1.js');
+require('./ionic-global-581fb4f8.js');
+require('./hardware-back-button-8c2f48d2.js');
+
+function categoriesToPreferenceTree(categories, preferences) {
+    return categories.reduce((obj, category) => (Object.assign(Object.assign({}, obj), { [category]: Object.entries(preferences)
+            .map(([key, pref]) => new preference.Preference(Object.assign(Object.assign({}, pref), { key })))
+            .filter((pref) => pref.category == category || (!pref.category && category == 'Preferences'))
+            .sort((a, b) => (a.index && b.index ? (a.index < b.index ? -1 : 1) : a.label < b.label ? -1 : 1)) })), {});
+}
+
+function preferencesToCategories(preferences) {
+    return Object.values(preferences)
+        .map((pref) => pref.category || 'Preferences')
+        .reduce((uniques, item) => (uniques.includes(item) ? uniques : [...uniques, item]), []);
+}
+
+const addPreference = "Add Preference";
+const cancel = "Cancel";
+const label = "Label";
+const new_preference = "New Preference";
+const ok = "OK";
+const preferences = "Preferences";
+const special_preferences = "Special Preferences";
+const special_preferences_desc = "These won’t be saved between sessions. (For example, you might include a ‘Footwashing’ setting to be used on Maundy Thursday.)";
+const EN = {
+	addPreference: addPreference,
+	cancel: cancel,
+	label: label,
+	new_preference: new_preference,
+	ok: ok,
+	preferences: preferences,
+	special_preferences: special_preferences,
+	special_preferences_desc: special_preferences_desc
+};
+
+const PreferenceTree = ({ path, tree, label, desc, localeStrings, newCallback }) => new Array(index.h("ion-card", null,
+  index.h("ion-card-header", null,
+    index.h("ion-card-title", null, label),
+    desc && index.h("ion-card-subtitle", null, desc)),
+  Object.keys(tree).map(category => index.h("section", null,
+    index.h("ion-list", null,
+      index.h("ion-list-header", null, category),
+      tree[category].map(pref => [
+        index.h("ion-toolbar", null,
+          index.h("ion-title", { slot: "start" },
+            pref.label,
+            " (",
+            index.h("code", null, pref.key),
+            ")"),
+          index.h("ion-buttons", { slot: "end" },
+            index.h("ldf-editable-delete", { base: path, index: pref.key, type: "object", obj: pref }))),
+        index.h("ion-item", null,
+          index.h("ldf-editable-preference", { path: path + '/' + pref.key, preference: pref }))
+      ])))),
+  index.h("ion-item", { lines: "none" },
+    index.h("ion-button", { onClick: (ev) => newCallback(ev) },
+      index.h("ion-icon", { slot: "start", name: "add" }),
+      localeStrings.addPreference || 'Add Preference'))));
+
+const editablePreferencesCss = "ldf-editable-preference.sc-ldf-editable-preferences{width:100%}";
+
+const LOCALE = {
+  'en': EN
+};
+const EditablePreferencesComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+  }
+  objChange() {
+    var _a, _b, _c, _d;
+    console.log('(EditablePreferences) obj changed, rebuilding trees');
+    this.currentPreferences = ((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.preferences) || {};
+    this.tree = this.buildTree(this.currentPreferences);
+    this.currentSpecialPreferences = ((_d = (_c = this.obj) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.special_preferences) || {};
+    this.specialTree = this.buildTree(this.currentSpecialPreferences);
+  }
+  componentWillLoad() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    this.currentPreferences = ((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.preferences) || {};
+    this.currentSpecialPreferences = ((_d = (_c = this.obj) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.special_preferences) || {};
+    this.tree = this.buildTree(this.currentPreferences);
+    this.specialTree = this.buildTree(this.currentSpecialPreferences);
+    if (!((_f = (_e = this.obj) === null || _e === void 0 ? void 0 : _e.metadata) === null || _f === void 0 ? void 0 : _f.preferences)) {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/preferences`,
+        op: [{
+            type: 'set',
+            value: {}
+          }]
+      }));
+    }
+    if (!((_h = (_g = this.obj) === null || _g === void 0 ? void 0 : _g.metadata) === null || _h === void 0 ? void 0 : _h.special_preferences)) {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/special_preferences`,
+        op: [{
+            type: 'set',
+            value: {}
+          }]
+      }));
+    }
+    this.loadLocaleStrings();
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  buildTree(preferences) {
+    const categories = preferencesToCategories(preferences);
+    return categoriesToPreferenceTree(categories, preferences);
+  }
+  async addPreference() {
+    var _a, _b;
+    const { key, label } = await this.grabKeyFromAlert();
+    this.currentPreferences = Object.assign(Object.assign({}, this.currentPreferences), { [key]: new preference.Preference({ key, label }) });
+    this.tree = this.buildTree(this.currentPreferences);
+    this.emit((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.preferences, 'preferences', key, this.currentPreferences[key]);
+  }
+  async addSpecialPreference() {
+    var _a, _b;
+    const { key, label } = await this.grabKeyFromAlert();
+    this.currentSpecialPreferences = Object.assign(Object.assign({}, this.currentSpecialPreferences), { [key]: new preference.Preference({ key, label }) });
+    this.specialTree = this.buildTree(this.currentSpecialPreferences);
+    this.emit((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.special_preferences, 'special_preferences', key, this.currentSpecialPreferences[key]);
+  }
+  async grabKeyFromAlert() {
+    var _a, _b;
+    const localeStrings = this.localeStrings || {};
+    const alert = await overlays.alertController.create({
+      header: localeStrings.new_preference,
+      inputs: [
+        {
+          name: 'label',
+          type: 'text',
+          placeholder: localeStrings.label
+        },
+      ],
+      buttons: [
+        {
+          text: localeStrings.cancel || 'Cancel',
+          role: 'cancel',
+          cssClass: 'danger'
+        }, {
+          text: localeStrings.ok || 'OK'
+        }
+      ]
+    });
+    await alert.present();
+    const data = await alert.onDidDismiss(), label = (_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.label, 
+    // key is camelCase'd
+    key = label.replace(/(?:^\w|[A-Z]|\b\w)/g, (ltr, idx) => idx === 0 ? ltr.toLowerCase() : ltr.toUpperCase()).replace(/\s+/g, '');
+    return { key, label };
+  }
+  emit(input, tree, key, value) {
+    const path = `${this.path}/${tree}`;
+    if (input == undefined) {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path,
+        op: [{
+            type: 'set',
+            value: { [key]: value }
+          }]
+      }));
+    }
+    else {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${path}/${key}`,
+        op: [{
+            type: 'set',
+            value
+          }]
+      }));
+    }
+  }
+  render() {
+    const localeStrings = this.localeStrings || {};
+    return (index.h(index.Host, null, index.h("ion-header", null, index.h("ion-toolbar", null, index.h("ion-title", null, localeStrings.preferences), index.h("ion-buttons", { slot: "primary" }, index.h("ion-button", { onClick: () => this.modal.dismiss(null) }, index.h("ion-icon", { slot: "icon-only", name: "close" }))))), index.h("ion-content", null, index.h(PreferenceTree, { path: `${this.path}/preferences`, tree: this.tree, label: localeStrings.preferences, newCallback: () => this.addPreference(), localeStrings: localeStrings }), index.h(PreferenceTree, { path: `${this.path}/special_preferences`, tree: this.specialTree, label: localeStrings.special_preferences, desc: localeStrings.special_preferences_desc, newCallback: () => this.addSpecialPreference(), localeStrings: localeStrings }))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "obj": ["objChange"]
+  }; }
+};
+EditablePreferencesComponent.style = editablePreferencesCss;
+
+exports.ldf_editable_preferences = EditablePreferencesComponent;

package/dist/cjs/ldf-editable-string-list.cjs.entry.js

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+require('./book-1a92678a.js');
+const change = require('./change-cdb1e8c0.js');
+const locale = require('./locale-d4e925b1.js');
+
+const category = {
+	add: "Add a Category",
+	list: "Categories"
+};
+const except = {
+	add: "Except...",
+	list: "Except the Following"
+};
+const liturgyversions = {
+	add: "Add a Liturgy Version",
+	list: "Liturgy Versions"
+};
+const only = {
+	add: "Only",
+	list: "Only the Following"
+};
+const EN = {
+	category: category,
+	except: except,
+	liturgyversions: liturgyversions,
+	only: only
+};
+
+const editableStringListCss = ".wrapper.sc-ldf-editable-string-list{display:flex;flex-direction:column}li.sc-ldf-editable-string-list{list-style-type:none;margin:0;padding:0}ul.sc-ldf-editable-string-list{display:flex;flex-direction:row;padding:0}.controls.sc-ldf-editable-string-list{display:flex;flex-direction:row}";
+
+const LOCALE = {
+  'en': EN
+};
+const EditableStringListComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+    // initial Prop `value` + anything we've added, optimistically
+    this.optimisticValues = new Array();
+  }
+  // Lifecycle events
+  async componentWillLoad() {
+    this.optimisticValues = this.value || new Array();
+    this.loadLocaleStrings();
+    if (!this.value || !Array.isArray(this.value)) {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/${this.property}`,
+        op: [{
+            type: 'set',
+            value: new Array()
+          }]
+      }));
+    }
+  }
+  // Methods
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  onInput(ev) {
+    this.currentValue = ev.target.value;
+  }
+  onKeyDown(ev) {
+    // 13 == Enter, 188 == Comma
+    if (ev.keyCode == 13 || ev.keyCode == 188) {
+      ev.preventDefault();
+      this.add();
+    }
+  }
+  add() {
+    let change$1;
+    if (this.optimisticValues) {
+      change$1 = new change.Change({
+        path: `${this.path}/${this.property}`,
+        op: [{
+            type: 'insertAt',
+            index: this.optimisticValues.length,
+            value: this.currentValue
+          }]
+      });
+    }
+    else {
+      change$1 = new change.Change({
+        path: `${this.path}/${this.property}`,
+        op: [{
+            type: 'set',
+            value: new Array(this.currentValue)
+          }]
+      });
+    }
+    this.optimisticValues.push(this.currentValue);
+    this.currentValue = '';
+    this.ldfDocShouldChange.emit(change$1);
+  }
+  remove(ii) {
+    const oldValue = this.optimisticValues[ii];
+    this.optimisticValues.splice(ii, 1);
+    this.optimisticValues = [...this.optimisticValues];
+    const change$1 = this.optimisticValues.length > 0
+      ? new change.Change({
+        path: `${this.path}/${this.property}`,
+        op: [{
+            type: 'deleteAt',
+            index: ii,
+            oldValue
+          }]
+      })
+      : new change.Change({
+        path: `${this.path}/${this.property}`,
+        op: [{
+            type: 'set',
+            value: [],
+            oldValue: [oldValue]
+          }]
+      });
+    this.ldfDocShouldChange.emit(change$1);
+  }
+  render() {
+    const localeStrings = ((this.localeStrings || {})[this.property]) || {};
+    return (index.h("ion-item", { lines: "none" }, index.h("div", { class: "wrapper" }, index.h("ion-label", { position: "stacked" }, localeStrings['list']), index.h("ul", null, this.optimisticValues.map((category, ii) => index.h("li", null, index.h("ion-chip", null, index.h("ion-label", null, category), index.h("ion-icon", { name: "close-circle", onClick: () => this.remove(ii) }))))), index.h("div", { class: 'controls' }, index.h("ion-input", { placeholder: localeStrings['add'], onIonInput: (ev) => this.onInput(ev), onKeyDown: (ev) => this.onKeyDown(ev), value: this.currentValue }), index.h("ion-button", { onClick: () => this.add() }, index.h("ion-icon", { slot: "icon-only", name: "add" }))))));
+  }
+  get element() { return index.getElement(this); }
+};
+EditableStringListComponent.style = editableStringListCss;
+
+exports.ldf_editable_string_list = EditableStringListComponent;