@venite/components 0.16.7 → 0.16.13

package/dist/cjs/ldf-editable-condition-piece.cjs.entry.js

@@ -0,0 +1,220 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const book = require('./book-1a92678a.js');
+const change = require('./change-cdb1e8c0.js');
+const locale = require('./locale-d4e925b1.js');
+
+//import { PROPERS } from './propers';
+const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+const SEASONS = [
+    'Advent',
+    'Christmas',
+    'Epiphany',
+    'Lent',
+    'HolyWeek',
+    'Easter',
+    'Ascension',
+    'Pentecost',
+    'Saints',
+    'OrdinaryTime',
+    'Ember',
+    'National',
+    'Rogation',
+    'Mary',
+];
+
+const date = "Date (Month/Day)";
+const day = "Liturgical Day";
+const dayOfMonth = "Day of Month";
+const dayOfMonthIs = "Day of Month Is";
+const dayOfMonthIsNot = "Day of Month Is Not";
+const except = "Except";
+const feastDay = "Only on Holy Days and Sundays";
+const gt = "After";
+const gte = "On or After";
+const lt = "Before";
+const lte = "Before or On";
+const only = "Only";
+const preference = "Preference";
+const preferenceIs = "=";
+const preferenceIsNot = "≠";
+const preferenceKey = "Key";
+const preferenceValue = "Value";
+const season = "Season";
+const weekday = "Day of the Week";
+const EN = {
+	date: date,
+	day: day,
+	dayOfMonth: dayOfMonth,
+	dayOfMonthIs: dayOfMonthIs,
+	dayOfMonthIsNot: dayOfMonthIsNot,
+	except: except,
+	feastDay: feastDay,
+	gt: gt,
+	gte: gte,
+	lt: lt,
+	lte: lte,
+	only: only,
+	preference: preference,
+	preferenceIs: preferenceIs,
+	preferenceIsNot: preferenceIsNot,
+	preferenceKey: preferenceKey,
+	preferenceValue: preferenceValue,
+	season: season,
+	weekday: weekday
+};
+
+const ExceptOnly = ({ field, localeStrings, options, currentCondition, onToggleSubcondition, onToggleValue }) => index.h("article", null,
+  index.h("ion-item", null,
+    index.h("ion-label", null, localeStrings[field]),
+    index.h("ion-toggle", { checked: currentCondition !== undefined, onIonChange: (ev) => onToggleSubcondition(field, ev.detail.checked, {
+        except: [], only: []
+      }) })),
+  currentCondition !== undefined && index.h("div", { class: "type" },
+    index.h("h4", null, localeStrings.only),
+    options.map(opt => {
+      var _a;
+      const isSelected = (_a = currentCondition.only) === null || _a === void 0 ? void 0 : _a.includes(opt);
+      return index.h("ion-chip", { onClick: () => onToggleValue(field, 'only', opt), color: isSelected ? 'primary' : 'light' }, localeStrings[opt] || opt);
+    }),
+    index.h("h4", null, localeStrings.except),
+    options.map(opt => {
+      var _a;
+      const isSelected = (_a = currentCondition.except) === null || _a === void 0 ? void 0 : _a.includes(opt);
+      return index.h("ion-chip", { onClick: () => onToggleValue(field, 'except', opt), color: isSelected ? 'primary' : 'light' }, localeStrings[opt] || opt);
+    })));
+
+const ExceptOnlyStrings = ({ path, field, localeStrings, currentCondition, onToggleSubcondition }) => currentCondition && index.h("article", null,
+  index.h("ion-item", null,
+    index.h("ion-label", null, localeStrings[field]),
+    index.h("ion-toggle", { checked: currentCondition[field] !== undefined, onIonChange: (ev) => onToggleSubcondition(field, ev.detail.checked, {
+        except: [], only: []
+      }) })),
+  currentCondition[field] !== undefined && index.h("div", { class: "type" },
+    index.h("h4", null, localeStrings.except),
+    index.h("ldf-editable-string-list", { path: `${path}/${field}`, property: 'except', value: currentCondition[field].except }),
+    index.h("h4", null, localeStrings.only),
+    index.h("ldf-editable-string-list", { path: `${path}/${field}`, property: 'only', value: currentCondition[field].only })));
+
+const editableConditionPieceCss = ".row.sc-ldf-editable-condition-piece{display:flex;flex-direction:row;justify-content:space-between;padding:8px}.type.sc-ldf-editable-condition-piece ul.checkbox.sc-ldf-editable-condition-piece{display:flex;flex-wrap:wrap;margin:0;padding:0}.type.sc-ldf-editable-condition-piece h4.sc-ldf-editable-condition-piece{text-align:center}.sc-ldf-editable-condition-piece:root{--ion-color-primary:#69bb7b;--ion-color-primary-rgb:105,187,123;--ion-color-primary-contrast:#000000;--ion-color-primary-contrast-rgb:0,0,0;--ion-color-primary-shade:#5ca56c;--ion-color-primary-tint:#78c288}.ion-color-primary.sc-ldf-editable-condition-piece{--ion-color-base:#69bb7b, var(--ion-color-primary);--ion-color-base-rgb:var(--ion-color-primary-rgb);--ion-color-contrast:var(--ion-color-primary-contrast);--ion-color-contrast-rgb:var(--ion-color-primary-contrast-rgb);--ion-color-shade:var(--ion-color-primary-shade);--ion-color-tint:var(--ion-color-primary-tint)}";
+
+const LOCALE = {
+  'en': EN
+};
+const EditableConditionComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+  }
+  conditionChange() {
+    this.workingCondition = this.condition;
+  }
+  componentWillLoad() {
+    this.loadLocaleStrings();
+    this.workingCondition = this.condition;
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  // Sets or clears one of the `Condition.___` fields (`season`, `day`, etc.)
+  toggleSubcondition(subcondition, active, template) {
+    if (active && this.workingCondition[subcondition] == undefined) {
+      this.workingCondition = new book.Condition(Object.assign(Object.assign({}, this.workingCondition), { [subcondition]: template }));
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/${subcondition}`,
+        op: [{
+            type: 'set',
+            value: template
+          }]
+      }));
+    }
+    else {
+      const oldValue = this.workingCondition[subcondition];
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/${subcondition}`,
+        op: [{
+            type: 'delete',
+            oldValue
+          }]
+      }));
+      this.workingCondition[subcondition] = undefined;
+      this.workingCondition = new book.Condition(this.workingCondition);
+    }
+  }
+  toggleExceptOnly(field, subfield, value) {
+    const list = this.workingCondition[field][subfield], index = list.indexOf(value);
+    if (index == -1) {
+      list.push(value);
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/${field}/${subfield}`,
+        op: [{
+            type: 'insertAt',
+            index: list.length,
+            value
+          }]
+      }));
+    }
+    else {
+      const index = list.indexOf(value);
+      list.splice(index, 1);
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/${field}/${subfield}`,
+        op: [{
+            type: 'deleteAt',
+            index,
+            oldValue: value
+          }]
+      }));
+    }
+    this.workingCondition = new book.Condition(Object.assign({}, this.workingCondition));
+  }
+  setDateField(field, dateString) {
+    var _a;
+    const date = new Date(Date.parse(dateString)), m = date.getMonth() + 1, d = date.getDate(), value = `${m}/${d}`, oldValue = (_a = this.workingCondition) === null || _a === void 0 ? void 0 : _a.date[field];
+    this.ldfDocShouldChange.emit(new change.Change({
+      path: `${this.path}/date/${field}`,
+      op: [{
+          type: 'set',
+          value,
+          oldValue
+        }]
+    }));
+  }
+  preferenceIs(value) {
+    var _a, _b;
+    const oldValue = (_b = (_a = this.workingCondition) === null || _a === void 0 ? void 0 : _a.preference) === null || _b === void 0 ? void 0 : _b.is;
+    this.workingCondition = new book.Condition(Object.assign(Object.assign({}, this.workingCondition), { preference: Object.assign(Object.assign({}, this.workingCondition.preference), { is: value }) }));
+    this.ldfDocShouldChange.emit(new change.Change({
+      path: `${this.path}/preference`,
+      op: [{
+          type: 'set',
+          index: 'is',
+          value,
+          oldValue
+        }]
+    }));
+  }
+  render() {
+    var _a, _b, _c, _d;
+    const localeStrings = this.localeStrings || {};
+    return (index.h(index.Host, null, index.h("ion-item", null, index.h("ion-label", null, localeStrings.feastDay), index.h("ion-toggle", { checked: this.workingCondition.feastDay !== undefined, onIonChange: (ev) => this.toggleSubcondition('feastDay', ev.detail.checked, ev.detail.checked) })), index.h(ExceptOnly, { field: "season", localeStrings: localeStrings, options: SEASONS, currentCondition: (_a = this.workingCondition) === null || _a === void 0 ? void 0 : _a.season, onToggleSubcondition: (subcondition, active, template) => this.toggleSubcondition(subcondition, active, template), onToggleValue: (field, subfield, value) => this.toggleExceptOnly(field, subfield, value) }), index.h(ExceptOnly, { field: "weekday", localeStrings: localeStrings, options: WEEKDAYS, currentCondition: (_b = this.workingCondition) === null || _b === void 0 ? void 0 : _b.weekday, onToggleSubcondition: (subcondition, active, template) => this.toggleSubcondition(subcondition, active, template), onToggleValue: (field, subfield, value) => this.toggleExceptOnly(field, subfield, value) }), index.h("article", null, index.h("ion-item", null, index.h("ion-label", null, localeStrings.date), index.h("ion-toggle", { checked: this.workingCondition.date !== undefined, onIonChange: (ev) => this.toggleSubcondition('date', ev.detail.checked, {}) })), this.workingCondition.date !== undefined && index.h("div", { class: "type" }, index.h("ion-item", { lines: "none" }, index.h("ion-label", { position: "stacked" }, localeStrings.lte), index.h("ion-datetime", { displayFormat: "MMMM D", onIonChange: (ev) => this.setDateField('lte', ev.detail.value) })), index.h("ion-item", { lines: "none" }, index.h("ion-label", { position: "stacked" }, localeStrings.lt), index.h("ion-datetime", { displayFormat: "MMMM D", onIonChange: (ev) => this.setDateField('lt', ev.detail.value) })), index.h("ion-item", { lines: "none" }, index.h("ion-label", { position: "stacked" }, localeStrings.gte), index.h("ion-datetime", { displayFormat: "MMMM D", onIonChange: (ev) => this.setDateField('gte', ev.detail.value) })), index.h("ion-item", { lines: "none" }, index.h("ion-label", { position: "stacked" }, localeStrings.gt), index.h("ion-datetime", { displayFormat: "MMMM D", onIonChange: (ev) => this.setDateField('gt', ev.detail.value) })))), index.h("article", null, index.h("ion-item", null, index.h("ion-label", null, localeStrings.dayOfMonth), index.h("ion-toggle", { checked: this.workingCondition.day_of_month !== undefined, onIonChange: (ev) => this.toggleSubcondition('day_of_month', ev.detail.checked, {}) })), this.workingCondition.day_of_month !== undefined && index.h("div", { class: "type row" }, index.h("ion-item", { lines: "none" }, index.h("ion-label", { position: "stacked" }, localeStrings.dayOfMonthIs), index.h("ldf-editable-text", { short: true, inputType: "number", path: `${this.path}/day_of_month/eq`, placeholder: localeStrings.dayOfMonth, text: (_c = this.workingCondition.day_of_month.eq) === null || _c === void 0 ? void 0 : _c.toString() })), index.h("ion-item", { lines: "none" }, index.h("ion-label", { position: "stacked" }, localeStrings.dayOfMonthIsNot), index.h("ldf-editable-text", { short: true, inputType: "number", path: `${this.path}/day_of_month/neq`, placeholder: localeStrings.dayOfMonth, text: (_d = this.workingCondition.day_of_month.eq) === null || _d === void 0 ? void 0 : _d.toString() })))), index.h("article", null, index.h("ion-item", null, index.h("ion-label", null, localeStrings.preference), index.h("ion-toggle", { checked: this.workingCondition.preference !== undefined, onIonChange: (ev) => this.toggleSubcondition('preference', ev.detail.checked, {
+        key: '', is: true, value: ''
+      }) })), this.workingCondition.preference !== undefined && index.h("div", { class: "type row" }, index.h("ldf-editable-text", { short: true, inputType: "text", path: `${this.path}/preference/key`, placeholder: localeStrings.preferenceKey, text: this.workingCondition.preference.key }), index.h("ion-select", { value: this.workingCondition.preference.is, onIonChange: (ev) => this.preferenceIs(ev.detail.value) }, index.h("ion-select-option", { value: true }, localeStrings.preferenceIs), index.h("ion-select-option", { value: false }, localeStrings.preferenceIsNot)), index.h("ldf-editable-text", { short: true, inputType: "text", path: `${this.path}/preference/value`, placeholder: localeStrings.preferenceValue, text: this.workingCondition.preference.value }))), index.h(ExceptOnlyStrings, { path: this.path, field: "day", localeStrings: localeStrings, currentCondition: this.workingCondition.day, onToggleSubcondition: (subcondition, active, template) => this.toggleSubcondition(subcondition, active, template) }), index.h(ExceptOnlyStrings, { path: this.path, field: "week", localeStrings: localeStrings, currentCondition: this.workingCondition.week, onToggleSubcondition: (subcondition, active, template) => this.toggleSubcondition(subcondition, active, template) })));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "condition": ["conditionChange"]
+  }; }
+};
+EditableConditionComponent.style = editableConditionPieceCss;
+
+exports.ldf_editable_condition_piece = EditableConditionComponent;

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

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const book = require('./book-1a92678a.js');
+const change = require('./change-cdb1e8c0.js');
+const locale = require('./locale-d4e925b1.js');
+
+const addCondition = "Add a Condition";
+const and = "All of the following are true";
+const condition = "Condition";
+const hasCondition = "Only include this if...";
+const or = "Any of the following is true";
+const EN = {
+	addCondition: addCondition,
+	and: and,
+	condition: condition,
+	hasCondition: hasCondition,
+	or: or
+};
+
+const LOCALE = {
+  'en': EN
+};
+const EditableConditionComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+  }
+  objChange() {
+    var _a;
+    this.currentCondition = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.condition;
+  }
+  componentWillLoad() {
+    var _a;
+    this.loadLocaleStrings();
+    this.currentCondition = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.condition;
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  toggleCondition(hasCondition) {
+    let change$1;
+    if (hasCondition) {
+      this.currentCondition = { mode: "and", conditions: new Array() };
+      change$1 = new change.Change({
+        path: this.path,
+        op: [{ type: 'set', value: this.currentCondition }]
+      });
+    }
+    else {
+      this.currentCondition = undefined;
+      change$1 = new change.Change({
+        path: this.path,
+        op: [{ type: 'delete', oldValue: this.currentCondition }]
+      });
+    }
+    this.ldfDocShouldChange.emit(change$1);
+  }
+  setAndOr(value) {
+    this.currentCondition.mode = value;
+    this.ldfDocShouldChange.emit(new change.Change({
+      path: `${this.path}`,
+      op: [{ type: 'set', index: 'mode', value: value, oldValue: this.currentCondition.mode }]
+    }));
+  }
+  addCondition() {
+    // create array if not in existence
+    if (!Array.isArray(this.currentCondition.conditions)) {
+      this.currentCondition.conditions = new Array();
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: this.path,
+        op: [{ type: 'set', index: 'conditions', value: new Array() }]
+      }));
+    }
+    // add to the array
+    this.currentCondition = Object.assign(Object.assign({}, this.currentCondition), { conditions: this.currentCondition.conditions.concat(new book.Condition()) });
+    const index = this.currentCondition.conditions.length - 1;
+    this.ldfDocShouldChange.emit(new change.Change({
+      path: `${this.path}/conditions`,
+      op: [{ type: 'insertAt', index: index < 0 ? 0 : index, value: new book.Condition() }]
+    }));
+  }
+  render() {
+    var _a, _b, _c, _d;
+    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.condition), 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("ion-list", null, index.h("ion-item", { lines: "none" }, index.h("ion-label", null, localeStrings.hasCondition), index.h("ion-checkbox", { checked: !!this.currentCondition, onIonChange: (ev) => this.toggleCondition(ev.detail.checked) })), this.currentCondition &&
+      index.h("ion-radio-group", { value: (_a = this.currentCondition) === null || _a === void 0 ? void 0 : _a.mode, onIonChange: (ev) => this.setAndOr(ev.detail.value) }, index.h("ion-item", { lines: "none" }, index.h("ion-label", null, localeStrings.and), index.h("ion-radio", { value: "and" })), index.h("ion-item", { lines: "none" }, index.h("ion-label", null, localeStrings.or), index.h("ion-radio", { value: "or" }))), (_c = (_b = this.currentCondition) === null || _b === void 0 ? void 0 : _b.conditions) === null || _c === void 0 ? void 0 :
+      _c.map((condition, ii) => [
+        index.h("ion-toolbar", null, index.h("ion-title", { slot: "start" }, localeStrings.condition, " ", ii + 1), index.h("ion-buttons", { slot: "end" }, index.h("ldf-editable-delete", { slot: "end", base: `${this.path}/conditions`, index: ii, obj: condition }))),
+        (index.h("ldf-editable-condition-piece", { path: `${this.path}/conditions/${ii}`, condition: condition }))
+      ]), ((_d = this.currentCondition) === null || _d === void 0 ? void 0 : _d.conditions) && index.h("ion-item", { lines: "none" }, index.h("ion-button", { onClick: () => this.addCondition() }, localeStrings.addCondition))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "obj": ["objChange"]
+  }; }
+};
+
+exports.ldf_editable_condition = EditableConditionComponent;

package/dist/cjs/ldf-editable-filter-documents.cjs.entry.js

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const book = require('./book-1a92678a.js');
+const option = require('./option-24f3d13a.js');
+const locale = require('./locale-d4e925b1.js');
+
+/* Converts a list of documents into a single document showing options in parallel */
+function docsToOption(d, versions = undefined) {
+    if (Array.isArray(d)) {
+        // remove duplicates if literally same JSON
+        const docs = Array.from(new Set(d.map((doc) => JSON.stringify(doc)))).map((doc) => new book.LiturgicalDocument(JSON.parse(doc)));
+        // sort by preferred version
+        let sorted;
+        if (versions !== undefined && versions.length > 0) {
+            sorted = docs.sort((a, b) => versions.indexOf(option.versionToString(a.version)) - versions.indexOf(option.versionToString(b.version)));
+        }
+        else {
+            sorted = docs;
+        }
+        return (sorted === null || sorted === void 0 ? void 0 : sorted.length) > 1
+            ? // if multiple LiturgicalDocuments given, return an Option made up of them
+                new option.Option({
+                    type: 'option',
+                    metadata: { selected: 0 },
+                    value: sorted,
+                })
+            : // if only one LiturgicalDocument given, return that document
+                sorted[0];
+    }
+    else {
+        return d;
+    }
+}
+
+const choose = "Choose a ";
+const confirm = "Choose";
+const includeAll = "Include all possibilities";
+const version = "Version";
+const psalm = "Psalm";
+const collect = "Collect";
+const reading = "Reading";
+const EN = {
+	choose: choose,
+	confirm: confirm,
+	includeAll: includeAll,
+	version: version,
+	psalm: psalm,
+	collect: collect,
+	reading: reading
+};
+
+const editableFilterDocumentsCss = "form.sc-ldf-editable-filter-documents{display:flex;flex-direction:column;align-items:center}ion-button.sc-ldf-editable-filter-documents{display:block;margin:auto;text-align:center}";
+
+const LOCALE = {
+  'en': EN
+};
+const EditableFilterDocumentsComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfDocumentSelected = index.createEvent(this, "ldfDocumentSelected", 7);
+    this.filteredOptions = [];
+    /** Whether to include a `LiturgicalDocument.version` field with the selection */
+    this.versions = {};
+    /** Options to search through */
+    this.options = [];
+  }
+  versionChange() {
+    this.filter(this.search);
+  }
+  versionsChange() {
+    if (!this.version) {
+      this.version = Object.keys(this.versions)[0];
+    }
+    this.filter(this.search);
+  }
+  optionsChange() {
+    this.filter(this.search);
+  }
+  // Public Methods
+  /** Set the list of liturgy versions */
+  async setVersions(versions) {
+    this.versions = Object.assign({}, versions);
+  }
+  /** Set the list of liturgy versions */
+  async setOptions(options) {
+    this.options = options;
+    this.optionsChange();
+  }
+  // Lifecycle events
+  async componentWillLoad() {
+    this.loadLocaleStrings();
+    this.filteredOptions = this.options || [];
+    this.version = (this.versions || [])[0]; // default to first in list
+    this.filter(this.search);
+  }
+  // Methods
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  filter(search) {
+    var _a;
+    this.search = search;
+    this.filteredOptions = (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter(doc => {
+      var _a;
+      // version matches this.version, if set
+      return (this.version ? doc.version == this.version : true)
+        // search on label
+        && (search ? (_a = doc.label) === null || _a === void 0 ? void 0 : _a.match(search) : true);
+    });
+  }
+  chooseVersion(version) {
+    this.version = version;
+  }
+  chooseDoc(doc) {
+    this.doc = doc;
+  }
+  choose() {
+    if (this.changeCallback) {
+      this.changeCallback(this.doc);
+    }
+    this.ldfDocumentSelected.emit(this.doc);
+    if (this.modal) {
+      this.modal.dismiss();
+    }
+  }
+  render() {
+    const localeStrings = this.localeStrings || {};
+    return (index.h(index.Host, null, this.modal && index.h("ion-header", null, index.h("ion-toolbar", null, index.h("ion-buttons", { slot: "end" }, index.h("ion-button", { onClick: () => this.modal.dismiss() }, index.h("ion-icon", { name: "close", slot: "icon-only" }))))), index.h("ion-content", null, index.h("form", null, index.h("ion-list", null, index.h("ion-button", { fill: "clear", onClick: () => { this.chooseDoc(docsToOption(this.filteredOptions)); this.choose(); } }, index.h("ion-label", null, localeStrings.includeAll)), this.versions && index.h("ion-item", null, index.h("ion-label", null, localeStrings.version), index.h("ion-select", { value: this.version, onIonChange: (ev) => this.chooseVersion(ev.detail.value) }, Object.entries(this.versions)
+      .sort((a, b) => a[0] > b[0] ? 1 : -1)
+      .map(([versionKey, versionLabel]) => index.h("ion-select-option", { value: versionKey }, versionLabel)))), index.h("ion-searchbar", { onIonChange: (ev) => this.filter(ev.detail.value) }), this.filteredOptions && this.filteredOptions.map(doc => {
+      var _a, _b, _c, _d;
+      return index.h("ion-item", { button: true, onClick: () => { this.chooseDoc(doc); this.choose(); }, color: doc == this.doc ? 'primary' : undefined }, (_b = (_a = doc.label) !== null && _a !== void 0 ? _a : doc.version_label) !== null && _b !== void 0 ? _b : `${(_d = (_c = (((doc.value || [])[0] || {}).text)) !== null && _c !== void 0 ? _c : (doc.value || [])[0]) !== null && _d !== void 0 ? _d : ''}${doc.citation ? ` (${doc.citation})` : ''}`);
+    }))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "version": ["versionChange"],
+    "versions": ["versionsChange"],
+    "options": ["optionsChange"]
+  }; }
+};
+EditableFilterDocumentsComponent.style = editableFilterDocumentsCss;
+
+exports.ldf_editable_filter_documents = EditableFilterDocumentsComponent;