@venite/components 0.16.7 → 0.16.13

package/dist/cjs/ion-segment_16.cjs.entry.js

@@ -0,0 +1,2507 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+const helpers = require('./helpers-41dfb43a.js');
+const theme = require('./theme-81caa5b0.js');
+const overlays = require('./overlays-eb464d6d.js');
+const book$1 = require('./book-1a92678a.js');
+const rubric = require('./rubric-5b467a6a.js');
+const heading$1 = require('./heading-5afc2b24.js');
+const option$1 = require('./option-24f3d13a.js');
+const change = require('./change-cdb1e8c0.js');
+const locale = require('./locale-d4e925b1.js');
+const image = require('./image-3bee3e73.js');
+const index$1 = require('./index-7aa21373.js');
+const refrain = require('./refrain-91fb446b.js');
+require('./hardware-back-button-8c2f48d2.js');
+require('./_commonjsHelpers-bcc1208a.js');
+
+const segmentIosCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:stretch;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint}:host(.segment-scrollable){justify-content:start;width:auto;overflow-x:auto}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;width:auto}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-toolbar){margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}";
+
+const segmentMdCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:stretch;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint}:host(.segment-scrollable){justify-content:start;width:auto;overflow-x:auto}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:transparent}:host(.segment-scrollable) ::slotted(ion-segment-button){min-width:auto}";
+
+const Segment = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ionChange = index.createEvent(this, "ionChange", 7);
+    this.ionSelect = index.createEvent(this, "ionSelect", 7);
+    this.ionStyle = index.createEvent(this, "ionStyle", 7);
+    this.didInit = false;
+    this.activated = false;
+    /**
+     * If `true`, the user cannot interact with the segment.
+     */
+    this.disabled = false;
+    /**
+     * If `true`, the segment buttons will overflow and the user can swipe to see them.
+     * In addition, this will disable the gesture to drag the indicator between the buttons
+     * in order to swipe to see hidden buttons.
+     */
+    this.scrollable = false;
+    this.onClick = (ev) => {
+      const current = ev.target;
+      const previous = this.checked;
+      this.value = current.value;
+      if (previous && this.scrollable) {
+        this.checkButton(previous, current);
+      }
+      this.checked = current;
+    };
+  }
+  valueChanged(value, oldValue) {
+    this.ionSelect.emit({ value });
+    if (oldValue !== '' || this.didInit) {
+      if (!this.activated) {
+        this.ionChange.emit({ value });
+      }
+      else {
+        this.valueAfterGesture = value;
+      }
+    }
+  }
+  disabledChanged() {
+    this.gestureChanged();
+    const buttons = this.getButtons();
+    for (const button of buttons) {
+      button.disabled = this.disabled;
+    }
+  }
+  gestureChanged() {
+    if (this.gesture && !this.scrollable) {
+      this.gesture.enable(!this.disabled);
+    }
+  }
+  connectedCallback() {
+    this.emitStyle();
+  }
+  componentWillLoad() {
+    this.emitStyle();
+  }
+  async componentDidLoad() {
+    this.setCheckedClasses();
+    this.gesture = (await Promise.resolve().then(function () { return require('./index-8197bb45.js'); })).createGesture({
+      el: this.el,
+      gestureName: 'segment',
+      gesturePriority: 100,
+      threshold: 0,
+      passive: false,
+      onStart: ev => this.onStart(ev),
+      onMove: ev => this.onMove(ev),
+      onEnd: ev => this.onEnd(ev),
+    });
+    this.gesture.enable(!this.scrollable);
+    this.gestureChanged();
+    if (this.disabled) {
+      this.disabledChanged();
+    }
+    this.didInit = true;
+  }
+  onStart(detail) {
+    this.activate(detail);
+  }
+  onMove(detail) {
+    this.setNextIndex(detail);
+  }
+  onEnd(detail) {
+    this.setActivated(false);
+    const checkedValidButton = this.setNextIndex(detail, true);
+    detail.event.stopImmediatePropagation();
+    if (checkedValidButton) {
+      this.addRipple(detail);
+    }
+    const value = this.valueAfterGesture;
+    if (value !== undefined) {
+      this.ionChange.emit({ value });
+      this.valueAfterGesture = undefined;
+    }
+  }
+  getButtons() {
+    return Array.from(this.el.querySelectorAll('ion-segment-button'));
+  }
+  /**
+   * The gesture blocks the segment button ripple. This
+   * function adds the ripple based on the checked segment
+   * and where the cursor ended.
+   */
+  addRipple(detail) {
+    const useRippleEffect = ionicGlobal.config.getBoolean('animated', true) && ionicGlobal.config.getBoolean('rippleEffect', true);
+    if (!useRippleEffect) {
+      return;
+    }
+    const buttons = this.getButtons();
+    const checked = buttons.find(button => button.value === this.value);
+    const root = checked.shadowRoot || checked;
+    const ripple = root.querySelector('ion-ripple-effect');
+    if (!ripple) {
+      return;
+    }
+    const { x, y } = helpers.pointerCoord(detail.event);
+    ripple.addRipple(x, y).then(remove => remove());
+  }
+  /*
+   * Activate both the segment and the buttons
+   * due to a bug with ::slotted in Safari
+   */
+  setActivated(activated) {
+    const buttons = this.getButtons();
+    buttons.forEach(button => {
+      if (activated) {
+        button.classList.add('segment-button-activated');
+      }
+      else {
+        button.classList.remove('segment-button-activated');
+      }
+    });
+    this.activated = activated;
+  }
+  activate(detail) {
+    const clicked = detail.event.target;
+    const buttons = this.getButtons();
+    const checked = buttons.find(button => button.value === this.value);
+    // Make sure we are only checking for activation on a segment button
+    // since disabled buttons will get the click on the segment
+    if (clicked.tagName !== 'ION-SEGMENT-BUTTON') {
+      return;
+    }
+    // If there are no checked buttons, set the current button to checked
+    if (!checked) {
+      this.value = clicked.value;
+    }
+    // If the gesture began on the clicked button with the indicator
+    // then we should activate the indicator
+    if (this.value === clicked.value) {
+      this.setActivated(true);
+    }
+  }
+  getIndicator(button) {
+    const root = button.shadowRoot || button;
+    return root.querySelector('.segment-button-indicator');
+  }
+  checkButton(previous, current) {
+    const previousIndicator = this.getIndicator(previous);
+    const currentIndicator = this.getIndicator(current);
+    if (previousIndicator === null || currentIndicator === null) {
+      return;
+    }
+    const previousClientRect = previousIndicator.getBoundingClientRect();
+    const currentClientRect = currentIndicator.getBoundingClientRect();
+    const widthDelta = previousClientRect.width / currentClientRect.width;
+    const xPosition = previousClientRect.left - currentClientRect.left;
+    // Scale the indicator width to match the previous indicator width
+    // and translate it on top of the previous indicator
+    const transform = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`;
+    index.writeTask(() => {
+      // Remove the transition before positioning on top of the previous indicator
+      currentIndicator.classList.remove('segment-button-indicator-animated');
+      currentIndicator.style.setProperty('transform', transform);
+      // Force a repaint to ensure the transform happens
+      currentIndicator.getBoundingClientRect();
+      // Add the transition to move the indicator into place
+      currentIndicator.classList.add('segment-button-indicator-animated');
+      // Remove the transform to slide the indicator back to the button clicked
+      currentIndicator.style.setProperty('transform', '');
+    });
+    this.value = current.value;
+    this.setCheckedClasses();
+  }
+  setCheckedClasses() {
+    const buttons = this.getButtons();
+    const index = buttons.findIndex(button => button.value === this.value);
+    const next = index + 1;
+    // Keep track of the currently checked button
+    this.checked = buttons.find(button => button.value === this.value);
+    for (const button of buttons) {
+      button.classList.remove('segment-button-after-checked');
+    }
+    if (next < buttons.length) {
+      buttons[next].classList.add('segment-button-after-checked');
+    }
+  }
+  setNextIndex(detail, isEnd = false) {
+    const isRTL = document.dir === 'rtl';
+    const activated = this.activated;
+    const buttons = this.getButtons();
+    const index = buttons.findIndex(button => button.value === this.value);
+    const previous = buttons[index];
+    let current;
+    let nextIndex;
+    if (index === -1) {
+      return;
+    }
+    // Get the element that the touch event started on in case
+    // it was the checked button, then we will move the indicator
+    const rect = previous.getBoundingClientRect();
+    const left = rect.left;
+    const width = rect.width;
+    // Get the element that the gesture is on top of based on the currentX of the
+    // gesture event and the Y coordinate of the starting element, since the gesture
+    // can move up and down off of the segment
+    const currentX = detail.currentX;
+    const previousY = rect.top + (rect.height / 2);
+    const nextEl = document.elementFromPoint(currentX, previousY);
+    const decreaseIndex = isRTL ? currentX > (left + width) : currentX < left;
+    const increaseIndex = isRTL ? currentX < left : currentX > (left + width);
+    // If the indicator is currently activated then we have started the gesture
+    // on top of the checked button so we need to slide the indicator
+    // by checking the button next to it as we move
+    if (activated && !isEnd) {
+      // Decrease index, move left in LTR & right in RTL
+      if (decreaseIndex) {
+        const newIndex = index - 1;
+        if (newIndex >= 0) {
+          nextIndex = newIndex;
+        }
+        // Increase index, moves right in LTR & left in RTL
+      }
+      else if (increaseIndex) {
+        if (activated && !isEnd) {
+          const newIndex = index + 1;
+          if (newIndex < buttons.length) {
+            nextIndex = newIndex;
+          }
+        }
+      }
+      if (nextIndex !== undefined && !buttons[nextIndex].disabled) {
+        current = buttons[nextIndex];
+      }
+    }
+    // If the indicator is not activated then we will just set the indicator
+    // to the element where the gesture ended
+    if (!activated && isEnd) {
+      current = nextEl;
+    }
+    /* tslint:disable-next-line */
+    if (current != null) {
+      /**
+       * If current element is ion-segment then that means
+       * user tried to select a disabled ion-segment-button,
+       * and we should not update the ripple.
+       */
+      if (current.tagName === 'ION-SEGMENT') {
+        return false;
+      }
+      if (previous !== current) {
+        this.checkButton(previous, current);
+      }
+    }
+    return true;
+  }
+  emitStyle() {
+    this.ionStyle.emit({
+      'segment': true
+    });
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { onClick: this.onClick, class: Object.assign(Object.assign({}, theme.createColorClasses(this.color)), { [mode]: true, 'in-toolbar': theme.hostContext('ion-toolbar', this.el), 'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el), 'segment-activated': this.activated, 'segment-disabled': this.disabled, 'segment-scrollable': this.scrollable }) }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"],
+    "disabled": ["disabledChanged"]
+  }; }
+};
+Segment.style = {
+  ios: segmentIosCss,
+  md: segmentMdCss
+};
+
+const segmentButtonIosCss = ":host{--color:initial;--color-hover:var(--color);--color-checked:var(--color);--color-disabled:var(--color);--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;border-radius:var(--border-radius);display:flex;position:relative;flex:1 1 auto;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;font-kerning:none;cursor:pointer}.button-native{border-radius:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;margin-left:var(--margin-start);margin-right:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);transform:translate3d(0,  0,  0);display:flex;position:relative;flex-direction:inherit;flex-grow:1;align-items:center;justify-content:center;width:100%;min-width:inherit;max-width:inherit;height:auto;min-height:inherit;max-height:inherit;transition:var(--transition);border:none;outline:none;background:transparent;contain:content;pointer-events:none;overflow:hidden;z-index:2}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end)}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{display:flex;position:relative;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.segment-button-checked){background:var(--background-checked);color:var(--color-checked)}:host(.segment-button-disabled){cursor:default;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.segment-button-checked:hover) .button-native{color:var(--color-checked)}}::slotted(ion-icon){flex-shrink:0;order:-1;pointer-events:none}::slotted(ion-label){display:block;align-self:center;line-height:22px;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;pointer-events:none}:host(.segment-button-layout-icon-top) .button-native{flex-direction:column}:host(.segment-button-layout-icon-start) .button-native{flex-direction:row}:host(.segment-button-layout-icon-end) .button-native{flex-direction:row-reverse}:host(.segment-button-layout-icon-bottom) .button-native{flex-direction:column-reverse}:host(.segment-button-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.segment-button-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color, var(--color-checked))}.segment-button-indicator{transform-origin:left;position:absolute;opacity:0;box-sizing:border-box;will-change:transform, opacity;pointer-events:none}.segment-button-indicator-background{width:100%;height:var(--indicator-height);transform:var(--indicator-transform);box-shadow:var(--indicator-box-shadow);pointer-events:none}.segment-button-indicator-animated{transition:var(--indicator-transition)}:host(.segment-button-checked) .segment-button-indicator{opacity:1}@media (prefers-reduced-motion: reduce){.segment-button-indicator-background{transform:none}.segment-button-indicator-animated{transition:none}}:host{--background:none;--background-checked:none;--background-hover:none;--background-hover-opacity:0;--background-focused:none;--background-focused-opacity:0;--border-radius:7px;--border-width:1px;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--border-style:solid;--indicator-box-shadow:0 0 5px rgba(0, 0, 0, 0.16);--indicator-color:var(--ion-color-step-350, var(--ion-background-color, #fff));--indicator-height:100%;--indicator-transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);--indicator-transform:none;--transition:100ms all linear;--padding-top:0;--padding-end:13px;--padding-bottom:0;--padding-start:13px;margin-top:2px;margin-bottom:2px;position:relative;flex-basis:0;flex-direction:row;min-width:70px;min-height:28px;transform:translate3d(0, 0, 0);font-size:13px;font-weight:450;line-height:37px}:host::before{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px;transition:160ms opacity ease-in-out;transition-delay:100ms;border-left:var(--border-width) var(--border-style) var(--border-color);content:\"\";opacity:1;will-change:opacity}:host(:first-of-type)::before{border-left-color:transparent}:host(.segment-button-disabled){opacity:0.3}::slotted(ion-icon){font-size:24px}:host(.segment-button-layout-icon-start) ::slotted(ion-label){margin-left:2px;margin-right:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-start) ::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:0;margin-inline-end:0}}:host(.segment-button-layout-icon-end) ::slotted(ion-label){margin-left:0;margin-right:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-end) ::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:2px;margin-inline-end:2px}}.segment-button-indicator{padding-left:2px;padding-right:2px;left:0;right:0;top:0;bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.segment-button-indicator{padding-left:unset;padding-right:unset;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px}}.segment-button-indicator-background{border-radius:var(--border-radius);background:var(--indicator-color)}.segment-button-indicator-background{transition:var(--indicator-transition)}:host(.segment-button-checked)::before,:host(.segment-button-after-checked)::before{opacity:0}:host(.segment-button-checked){z-index:-1}:host(.segment-button-activated){--indicator-transform:scale(0.95)}:host(.ion-focused) .button-native{opacity:0.7}@media (any-hover: hover){:host(:hover) .button-native{opacity:0.5}:host(.segment-button-checked:hover) .button-native{opacity:1}}:host(.in-segment-color){background:none;color:var(--ion-text-color, #000)}:host(.in-segment-color) .segment-button-indicator-background{background:var(--ion-color-step-350, var(--ion-background-color, #fff))}@media (any-hover: hover){:host(.in-segment-color:hover) .button-native,:host(.in-segment-color.segment-button-checked:hover) .button-native{color:var(--ion-text-color, #000)}}:host(.in-toolbar:not(.in-segment-color)){--background-checked:var(--ion-toolbar-segment-background-checked, none);--color:var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);--color-checked:var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);--indicator-color:var(--ion-toolbar-segment-indicator-color, var(--ion-color-step-350, var(--ion-background-color, #fff)))}:host(.in-toolbar-color) .segment-button-indicator-background{background:#fff}:host(.in-toolbar-color:not(.in-segment-color)) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.in-toolbar-color:not(.in-segment-color):hover) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color):hover) .button-native{color:var(--ion-color-base)}}";
+
+const segmentButtonMdCss = ":host{--color:initial;--color-hover:var(--color);--color-checked:var(--color);--color-disabled:var(--color);--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;border-radius:var(--border-radius);display:flex;position:relative;flex:1 1 auto;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;font-kerning:none;cursor:pointer}.button-native{border-radius:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;margin-left:var(--margin-start);margin-right:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);transform:translate3d(0,  0,  0);display:flex;position:relative;flex-direction:inherit;flex-grow:1;align-items:center;justify-content:center;width:100%;min-width:inherit;max-width:inherit;height:auto;min-height:inherit;max-height:inherit;transition:var(--transition);border:none;outline:none;background:transparent;contain:content;pointer-events:none;overflow:hidden;z-index:2}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end)}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{display:flex;position:relative;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.segment-button-checked){background:var(--background-checked);color:var(--color-checked)}:host(.segment-button-disabled){cursor:default;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.segment-button-checked:hover) .button-native{color:var(--color-checked)}}::slotted(ion-icon){flex-shrink:0;order:-1;pointer-events:none}::slotted(ion-label){display:block;align-self:center;line-height:22px;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;pointer-events:none}:host(.segment-button-layout-icon-top) .button-native{flex-direction:column}:host(.segment-button-layout-icon-start) .button-native{flex-direction:row}:host(.segment-button-layout-icon-end) .button-native{flex-direction:row-reverse}:host(.segment-button-layout-icon-bottom) .button-native{flex-direction:column-reverse}:host(.segment-button-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.segment-button-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color, var(--color-checked))}.segment-button-indicator{transform-origin:left;position:absolute;opacity:0;box-sizing:border-box;will-change:transform, opacity;pointer-events:none}.segment-button-indicator-background{width:100%;height:var(--indicator-height);transform:var(--indicator-transform);box-shadow:var(--indicator-box-shadow);pointer-events:none}.segment-button-indicator-animated{transition:var(--indicator-transition)}:host(.segment-button-checked) .segment-button-indicator{opacity:1}@media (prefers-reduced-motion: reduce){.segment-button-indicator-background{transform:none}.segment-button-indicator-animated{transition:none}}:host{--background:none;--background-checked:none;--background-hover:var(--color-checked);--background-focused:var(--color-checked);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #3880ff);--indicator-box-shadow:none;--indicator-color:var(--color-checked);--indicator-height:2px;--indicator-transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);--indicator-transform:none;--padding-top:0;--padding-end:16px;--padding-bottom:0;--padding-start:16px;--transition:color 0.15s linear 0s, opacity 0.15s linear 0s;min-width:90px;max-width:360px;min-height:48px;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);font-size:14px;font-weight:500;letter-spacing:0.06em;line-height:40px;text-transform:uppercase}.button-native{min-width:90px}:host(.segment-button-disabled){opacity:0.3}:host(.in-segment-color){background:none;color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6)}:host(.in-segment-color) ion-ripple-effect{color:var(--ion-color-base)}:host(.in-segment-color) .segment-button-indicator-background{background:var(--ion-color-base)}:host(.in-segment-color.segment-button-checked) .button-native{color:var(--ion-color-base)}:host(.in-segment-color.ion-focused) .button-native::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.in-segment-color:hover) .button-native{color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6)}:host(.in-segment-color:hover) .button-native::after{background:var(--ion-color-base)}:host(.in-segment-color.segment-button-checked:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-segment-color)){--background:var(--ion-toolbar-segment-background, none);--background-checked:var(--ion-toolbar-segment-background-checked, none);--color:var(--ion-toolbar-segment-color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6));--color-checked:var(--ion-toolbar-segment-color-checked, var(--ion-color-primary, #3880ff));--indicator-color:var(--ion-toolbar-segment-color-checked, var(--color-checked))}:host(.in-toolbar-color:not(.in-segment-color)) .button-native{color:rgba(var(--ion-color-contrast-rgb), 0.6)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native{color:var(--ion-color-contrast)}@media (any-hover: hover){:host(.in-toolbar-color:not(.in-segment-color)) .button-native::after{background:var(--ion-color-contrast)}}::slotted(ion-icon){margin-top:12px;margin-bottom:12px;font-size:24px}::slotted(ion-label){margin-top:12px;margin-bottom:12px}:host(.segment-button-layout-icon-top) ::slotted(ion-label),:host(.segment-button-layout-icon-bottom) ::slotted(ion-icon){margin-top:0}:host(.segment-button-layout-icon-top) ::slotted(ion-icon),:host(.segment-button-layout-icon-bottom) ::slotted(ion-label){margin-bottom:0}:host(.segment-button-layout-icon-start) ::slotted(ion-label){margin-left:8px;margin-right:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-start) ::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:0;margin-inline-end:0}}:host(.segment-button-layout-icon-end) ::slotted(ion-label){margin-left:0;margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-end) ::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}}:host(.segment-button-has-icon-only) ::slotted(ion-icon){margin-top:12px;margin-bottom:12px}:host(.segment-button-has-label-only) ::slotted(ion-label){margin-top:12px;margin-bottom:12px}.segment-button-indicator{left:0;right:0;bottom:0}.segment-button-indicator-background{background:var(--indicator-color)}:host(.in-toolbar:not(.in-segment-color)) .segment-button-indicator-background{background:var(--ion-toolbar-segment-indicator-color, var(--indicator-color))}:host(.in-toolbar-color:not(.in-segment-color)) .segment-button-indicator-background{background:var(--ion-color-contrast)}";
+
+let ids = 0;
+const SegmentButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.segmentEl = null;
+    this.checked = false;
+    /**
+     * If `true`, the user cannot interact with the segment button.
+     */
+    this.disabled = false;
+    /**
+     * Set the layout of the text and icon in the segment.
+     */
+    this.layout = 'icon-top';
+    /**
+     * The type of the button.
+     */
+    this.type = 'button';
+    /**
+     * The value of the segment button.
+     */
+    this.value = 'ion-sb-' + (ids++);
+    this.updateState = () => {
+      if (this.segmentEl) {
+        this.checked = this.segmentEl.value === this.value;
+      }
+    };
+  }
+  connectedCallback() {
+    const segmentEl = this.segmentEl = this.el.closest('ion-segment');
+    if (segmentEl) {
+      this.updateState();
+      segmentEl.addEventListener('ionSelect', this.updateState);
+    }
+  }
+  disconnectedCallback() {
+    const segmentEl = this.segmentEl;
+    if (segmentEl) {
+      segmentEl.removeEventListener('ionSelect', this.updateState);
+      this.segmentEl = null;
+    }
+  }
+  get hasLabel() {
+    return !!this.el.querySelector('ion-label');
+  }
+  get hasIcon() {
+    return !!this.el.querySelector('ion-icon');
+  }
+  render() {
+    const { checked, type, disabled, hasIcon, hasLabel, layout } = this;
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { "aria-disabled": disabled ? 'true' : null, class: {
+        [mode]: true,
+        'in-toolbar': theme.hostContext('ion-toolbar', this.el),
+        'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
+        'in-segment': theme.hostContext('ion-segment', this.el),
+        'in-segment-color': theme.hostContext('ion-segment[color]', this.el),
+        'segment-button-has-label': hasLabel,
+        'segment-button-has-icon': hasIcon,
+        'segment-button-has-label-only': hasLabel && !hasIcon,
+        'segment-button-has-icon-only': hasIcon && !hasLabel,
+        'segment-button-disabled': disabled,
+        'segment-button-checked': checked,
+        [`segment-button-layout-${layout}`]: true,
+        'ion-activatable': true,
+        'ion-activatable-instant': true,
+        'ion-focusable': true,
+      } }, index.h("button", { type: type, "aria-pressed": checked ? 'true' : null, class: "button-native", disabled: disabled }, index.h("span", { class: "button-inner" }, index.h("slot", null)), mode === 'md' && index.h("ion-ripple-effect", null)), index.h("div", { part: "indicator", class: {
+        'segment-button-indicator': true,
+        'segment-button-indicator-animated': true
+      } }, index.h("div", { part: "indicator-background", class: "segment-button-indicator-background" }))));
+  }
+  get el() { return index.getElement(this); }
+};
+SegmentButton.style = {
+  ios: segmentButtonIosCss,
+  md: segmentButtonMdCss
+};
+
+const skeletonTextCss = ":host{--background:rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065);border-radius:var(--border-radius, inherit);display:block;width:100%;height:inherit;margin-top:4px;margin-bottom:4px;background:var(--background);line-height:10px;user-select:none;pointer-events:none}span{display:inline-block}:host(.in-media){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;height:100%}:host(.skeleton-text-animated){position:relative;background:linear-gradient(to right, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 8%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.135) 18%, rgba(var(--background-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.065) 33%);background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear}@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}";
+
+const SkeletonText = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * If `true`, the skeleton text will animate.
+     */
+    this.animated = false;
+  }
+  render() {
+    const animated = this.animated && ionicGlobal.config.getBoolean('animated', true);
+    const inMedia = theme.hostContext('ion-avatar', this.el) || theme.hostContext('ion-thumbnail', this.el);
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: {
+        [mode]: true,
+        'skeleton-text-animated': animated,
+        'in-media': inMedia
+      } }, index.h("span", null, "\u00A0")));
+  }
+  get el() { return index.getElement(this); }
+};
+SkeletonText.style = skeletonTextCss;
+
+const amen$1 = "Amen.";
+const book = "Book";
+const chapter = "Chapter";
+const citation$3 = "Citation (e.g., John 1:1)";
+const label$3 = "Label";
+const loading$1 = "Loading...";
+const verse = "Verse";
+const changeReading = "Change Reading";
+const newCitation = "Biblical citation.";
+const cancel$1 = "Cancel";
+const ok$1 = "OK";
+const EN$8 = {
+	amen: amen$1,
+	book: book,
+	chapter: chapter,
+	citation: citation$3,
+	label: label$3,
+	loading: loading$1,
+	verse: verse,
+	changeReading: changeReading,
+	newCitation: newCitation,
+	cancel: cancel$1,
+	ok: ok$1
+};
+
+const amen = "Amén.";
+const loading = "Se está cargando...";
+const ES = {
+	amen: amen,
+	loading: loading
+};
+
+async function fetchReading(citation, version = 'NRSV', api = 'https://us-central1-venite-2.cloudfunctions.net') {
+  const findURL = new URL(`${api}/bible`);
+  findURL.searchParams.append('citation', citation);
+  if (!['NRSV', 'NRSVAE', 'ESV', 'CEB', 'KJV'].includes(version)) {
+    findURL.searchParams.append('version', 'NRSV');
+  }
+  else {
+    findURL.searchParams.append('version', version);
+  }
+  const response = await fetch(findURL.toString()), body = await response.text();
+  try {
+    return JSON.parse(body);
+  }
+  catch (_a) {
+    throw new Error(body);
+  }
+}
+
+const bibleReadingCss = "ldf-bible-reading.sc-ldf-bible-reading,.sc-ldf-bible-reading-h{font-family:var(--ldf-font-face);text-align:var(--ldf-text-align)}.bible-reading[lang=he].sc-ldf-bible-reading{text-align:right;direction:rtl;font-size:1.5em;font-family:\"Times New Roman\" !important}.bible-reading[lang=he].sc-ldf-bible-reading .drop.sc-ldf-bible-reading{float:right !important;font-family:\"Times New Roman\" !important}.bible-reading.omit.sc-ldf-bible-reading .verses.sc-ldf-bible-reading{display:none}.editable.bible-reading.sc-ldf-bible-reading .verses.sc-ldf-bible-reading{display:block;color:var(--ldf-greyed-out-text-color)}sup.sc-ldf-bible-reading{display:var(--ldf-bible-reading-verse-number-display);margin-left:0;margin-right:0.25em}.citation.sc-ldf-bible-reading{font-size:80%;font-style:italic;margin-left:1em;float:var(--ldf-bible-reading-citation-float)}.response.sc-ldf-bible-reading{font-weight:var(--ldf-response-font-weight);font-style:var(--ldf-response-font-style)}.verses.sc-ldf-bible-reading .verse.sc-ldf-bible-reading{display:flex;flex-direction:row}sup.sc-ldf-bible-reading:first-of-type{display:var(--ldf-drop-early-verses-display)}.editable-verse.sc-ldf-bible-reading{display:inline}.editable-citation.sc-ldf-bible-reading{display:inline;width:100%}.editable-citation.sc-ldf-bible-reading ldf-editable-text.sc-ldf-bible-reading{display:inline-block;width:25px}.editable-citation.sc-ldf-bible-reading ldf-editable-text.book.sc-ldf-bible-reading{width:75px}h3.editable-label.sc-ldf-bible-reading{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)}.citation-button.sc-ldf-bible-reading{background:none;border:0;font-family:var(--ldf-font-face);font-size:inherit}";
+
+const LOCALE$8 = {
+  'en': EN$8,
+  'es': ES
+};
+const BibleReadingComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+  }
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new rubric.BibleReading(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new rubric.BibleReading(newDoc);
+      }
+      this.processIntro();
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new rubric.BibleReading();
+    }
+    this.loadVerses();
+  }
+  // Lifecycle events
+  async componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+    this.loadVerses();
+    this.processIntro();
+  }
+  processIntro() {
+    var _a, _b;
+    // process intro
+    if ((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.intro) {
+      try {
+        this.obj.compileIntro();
+        this.obj = new rubric.BibleReading(Object.assign({}, this.obj));
+      }
+      catch (e) {
+        console.warn(e);
+        console.warn(this.obj);
+      }
+    }
+  }
+  // Private methods
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE$8[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  async changeReading() {
+    var _a;
+    const localeStrings = this.localeStrings || {};
+    const alert = await overlays.alertController.create({
+      header: localeStrings.changeReading,
+      inputs: [
+        {
+          name: 'citation',
+          type: 'text',
+          value: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.citation,
+          placeholder: localeStrings.newCitation
+        },
+      ],
+      buttons: [
+        {
+          text: localeStrings.cancel,
+          role: 'cancel',
+          cssClass: 'secondary'
+        },
+        {
+          text: localeStrings.ok,
+          handler: async (data) => {
+            var _a, _b, _c;
+            this.ldfDocShouldChange.emit(new change.Change({
+              path: this.path,
+              op: [
+                {
+                  type: 'set',
+                  index: 'citation',
+                  oldValue: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.citation,
+                  value: data === null || data === void 0 ? void 0 : data.citation
+                }
+              ]
+            }));
+            const loading = await overlays.loadingController.create({
+              message: localeStrings.loading
+            });
+            await loading.present();
+            const newReading = await fetchReading(data.citation, option$1.versionToString((_b = this.obj) === null || _b === void 0 ? void 0 : _b.version));
+            await loading.dismiss();
+            this.ldfDocShouldChange.emit(new change.Change({
+              path: this.path,
+              op: [{
+                  type: 'set',
+                  index: 'value',
+                  oldValue: (_c = this.obj) === null || _c === void 0 ? void 0 : _c.value,
+                  value: (newReading === null || newReading === void 0 ? void 0 : newReading.value) || []
+                }]
+            }));
+            this.obj = new rubric.BibleReading(Object.assign(Object.assign({}, this.obj), { citation: data === null || data === void 0 ? void 0 : data.citation, value: (newReading === null || newReading === void 0 ? void 0 : newReading.value) || [] }));
+            this.loadVerses();
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+  loadVerses() {
+    this.verses = this.obj.value || [];
+  }
+  paragraphs() {
+    const paragraphs = new Array();
+    let currentParagraph = new Array();
+    this.verses.forEach(verse => {
+      if (verse.hasOwnProperty('type') && verse.type === 'heading') {
+        paragraphs.push(currentParagraph);
+        currentParagraph = new Array();
+      }
+      else {
+        currentParagraph.push(verse);
+      }
+    });
+    paragraphs.push(currentParagraph);
+    return paragraphs;
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    const localeStrings = this.localeStrings || {};
+    if (this.verses) {
+      /* Editable version */
+      if (this.editable) {
+        const template = Object.assign(Object.assign({}, this.verses[0]), { text: '' }), templateMaker = (text) => (Object.assign(Object.assign({}, template), { text }));
+        return (index.h("div", { lang: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.language, class: `editable bible-reading ${((_b = this.obj) === null || _b === void 0 ? void 0 : _b.display_format) || 'default'}` }, this.editable && index.h("ldf-label-bar", null, index.h("slot", { slot: 'end', name: 'controls' }, index.h("ion-buttons", null, index.h("ion-button", { onClick: () => this.changeReading() }, index.h("ion-icon", { name: "swap-horizontal", slot: "start" }), index.h("ion-label", null, localeStrings.changeReading))))), index.h("ldf-label-bar", null, index.h("h3", { class: "editable-label", slot: "start" }, index.h("ldf-editable-text", { id: "label", text: (_c = this.obj) === null || _c === void 0 ? void 0 : _c.label, path: `${this.path}/label`, placeholder: localeStrings.label })), ((_d = this.obj) === null || _d === void 0 ? void 0 : _d.citation) && index.h("button", { class: "citation-button", slot: "end", onClick: () => this.changeReading() }, this.obj.citation)), ((_f = (_e = this.obj) === null || _e === void 0 ? void 0 : _e.metadata) === null || _f === void 0 ? void 0 : _f.compiled_intro) && index.h("ldf-liturgical-document", { editable: true, doc: this.obj.metadata.intro, path: `${this.path}/metadata/intro` }), index.h("section", { class: "verses" }, this.verses.map((verse, verseIndex) => [
+          verse.hasOwnProperty('type') && verse.type === 'heading'
+            ? index.h("ldf-heading", { editable: true, doc: verse, path: `${this.path}/value/${verseIndex}` })
+            : index.h("div", { class: "editable-verse" }, index.h("div", { class: "editable-citation" }, index.h("ldf-editable-text", { class: "book", id: `verse-${verseIndex}-book`, text: verse.book, path: `${this.path}/value/${verseIndex}/book`, placeholder: localeStrings.book, short: true }), index.h("ldf-editable-text", { id: `verse-${verseIndex}-chapter`, text: verse.chapter, path: `${this.path}/value/${verseIndex}/chapter`, placeholder: localeStrings.chapter, short: true }), " :", index.h("ldf-editable-text", { id: `verse-${verseIndex}-verse`, text: verse.verse, path: `${this.path}/value/${verseIndex}/verse`, placeholder: localeStrings.verse, short: true })), index.h("ldf-editable-text", { id: `verse-${verseIndex}-text`, text: verse.text, path: `${this.path}/value/${verseIndex}/text`, placeholder: localeStrings.text, short: false, template: template, templateMaker: templateMaker }))
+        ]))));
+      }
+      /* `short` renders a few verses, with a response and citation. */
+      else if (this.obj.style == 'short') {
+        const shortResponse = (((_h = (_g = this.obj) === null || _g === void 0 ? void 0 : _g.metadata) === null || _h === void 0 ? void 0 : _h.response) || localeStrings.amen).length <= 5;
+        let responseNode;
+        if (!((_k = (_j = this.obj) === null || _j === void 0 ? void 0 : _j.metadata) === null || _k === void 0 ? void 0 : _k.response)) {
+          responseNode = index.h("span", { class: "response" }, " ", localeStrings.amen);
+        }
+        else {
+          responseNode = index.h("span", { class: "response" }, " ", this.obj.metadata.response);
+        }
+        return (index.h(index.Host, null, ((_l = this.obj) === null || _l === void 0 ? void 0 : _l.label) && index.h("ldf-heading", { doc: new heading$1.Heading({ type: 'heading', metadata: { level: 3 }, value: [this.obj.label] }) }), index.h("div", { lang: (_m = this.obj) === null || _m === void 0 ? void 0 : _m.language, class: `bible-reading ${((_o = this.obj) === null || _o === void 0 ? void 0 : _o.display_format) || 'default'}` }, index.h("p", null, this.verses.map((verse, verseIndex) => {
+          var _a;
+          return verse.hasOwnProperty('type') && verse.type === 'heading'
+            ? index.h("ldf-heading", { doc: new heading$1.Heading(verse) })
+            : index.h("ldf-string", { citation: { book: verse.book, chapter: verse.chapter, verse: verse.verse }, id: this.obj.uid, text: verse.text, fragment: this.path, dropcap: ((_a = this.obj) === null || _a === void 0 ? void 0 : _a.display_format) == "force_dropcap" && verseIndex === 0 ? "force" : "disabled" });
+        }), shortResponse && !((_q = (_p = this.obj) === null || _p === void 0 ? void 0 : _p.metadata) === null || _q === void 0 ? void 0 : _q.omit_response) && responseNode, index.h("span", { class: "citation" }, this.obj.citation)), !shortResponse && !((_s = (_r = this.obj) === null || _r === void 0 ? void 0 : _r.metadata) === null || _s === void 0 ? void 0 : _s.omit_response) && index.h("p", null, responseNode))));
+      }
+      /* `long` render a typical Bible reading in the liturgy */
+      else {
+        const paragraphs = this.paragraphs();
+        return (index.h("div", { lang: (_t = this.obj) === null || _t === void 0 ? void 0 : _t.language, class: `bible-reading ${((_u = this.obj) === null || _u === void 0 ? void 0 : _u.display_format) || 'default'}` }, index.h("ldf-heading", { doc: new heading$1.Heading({ type: 'heading', metadata: { level: 3 }, value: [this.obj.label], citation: this.obj.citation }) }), ((_w = (_v = this.obj) === null || _v === void 0 ? void 0 : _v.metadata) === null || _w === void 0 ? void 0 : _w.compiled_intro) && index.h("ldf-liturgical-document", { doc: this.obj.metadata.compiled_intro }), paragraphs.map((paragraph, paragraphIndex) => index.h("p", { lang: this.obj.language }, paragraph.map((verse, verseIndex) => verse.hasOwnProperty('type') && verse.type === 'heading'
+          ? index.h("ldf-heading", { doc: new heading$1.Heading(verse) })
+          : [
+            index.h("sup", null, verse.verse),
+            index.h("ldf-string", { citation: verse, dropcap: paragraphIndex == 0 && verseIndex == 0 ? 'force' : 'disabled', id: `${verse.chapter}-${verse.book}-${verse.verse}`, text: verse.text, index: verseIndex, fragment: this.path })
+          ])))));
+      }
+    }
+    else {
+      return this.loadingError ? index.h("pre", null, this.loadingError) : index.h("p", null, localeStrings.loading);
+    }
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "doc": ["docChanged"]
+  }; }
+};
+BibleReadingComponent.style = bibleReadingCss;
+
+const add = "Add";
+const label$2 = "Label";
+const citation$2 = "Citation";
+const EN$7 = {
+	add: add,
+	label: label$2,
+	citation: citation$2
+};
+
+const editableAddBlockCss = ".sc-ldf-editable-add-block-h{display:flex;flex-direction:column;align-items:center;width:100%}.sc-ldf-editable-add-block-h .button-container.sc-ldf-editable-add-block{display:flex;align-items:center;height:0;justify-content:center;width:100%}.sc-ldf-editable-add-block-h button.sc-ldf-editable-add-block{background-color:var(--ldf-background-color);color:var(--ldf-color);font-family:var(--ldf-controls-font-family);font-weight:lighter}.sc-ldf-editable-add-block-h button.sc-ldf-editable-add-block:hover{cursor:pointer}.sc-ldf-editable-add-block-h .visible.sc-ldf-editable-add-block{height:0;opacity:1;transition:0.25s}.sc-ldf-editable-add-block-h .hidden.sc-ldf-editable-add-block{height:0;opacity:0;transition:2s}.sc-ldf-editable-add-block-h .underlying.sc-ldf-editable-add-block{width:100%;border-top:1px solid #a0a0a0;border-bottom:1px solid #a0a0a0;min-height:1em;position:relative;bottom:0.5em;z-index:-1}.sc-ldf-editable-add-block-h .underlying.visible.sc-ldf-editable-add-block{opacity:0.5;transition:0.25s}.sc-ldf-editable-add-block-h .underlying.visible.expanded.sc-ldf-editable-add-block{z-index:1}.sc-ldf-editable-add-block-h .underlying.collapsed.sc-ldf-editable-add-block{height:1em}.sc-ldf-editable-add-block-h .underlying.hidden.sc-ldf-editable-add-block{opacity:0;transition:1s}.sc-ldf-editable-add-block-h .underlying.hidden.sc-ldf-editable-add-block button.sc-ldf-editable-add-block{z-index:-1}.sc-ldf-editable-add-block-h .visually-hidden.sc-ldf-editable-add-block{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}.button.sc-ldf-editable-add-block{position:absolute;display:flex;flex-direction:row;align-items:center;justify-content:center;opacity:1;transition:all 0.25s}.hidden.sc-ldf-editable-add-block{display:none;height:0;opacity:0;transition:all 0.25s}";
+
+const LOCALE$7 = {
+  'en': EN$7
+};
+const EditableAddBlockComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+    this.ldfDocShouldAdd = index.createEvent(this, "ldfDocShouldAdd", 7);
+  }
+  // Lifecycle events
+  async componentWillLoad() {
+    this.loadLocaleStrings();
+  }
+  // Methods
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE$7[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  // Render
+  render() {
+    const localeStrings = this.localeStrings || {};
+    return (index.h(index.Host, null, index.h("div", { class: {
+        button: true,
+        hidden: !this.visible,
+      } }, index.h("ion-button", { "aria-role": "button", fill: "outline", onClick: () => this.ldfDocShouldAdd.emit({ base: this.base, index: this.index }) }, index.h("ion-icon", { name: "add", slot: "icon-only" }), index.h("ion-label", { class: "visually-hidden" }, localeStrings.add)))));
+  }
+  get element() { return index.getElement(this); }
+};
+EditableAddBlockComponent.style = editableAddBlockCss;
+
+const abbreviated = "Abbreviated";
+const addOption = "Add an Option";
+const cancel = "Cancel";
+const condition$1 = "Conditions";
+const copy = "Copy";
+const copied = "Copied to Clipboard";
+const displayFormat = "Display";
+const halfverse = "By Half Verse";
+const heading = "Heading Level";
+const heading1 = "1. Title";
+const heading2 = "2. Section Title";
+const heading3 = "3. Label";
+const heading4 = "4. Sub-Section Label";
+const move_down = "Move Down";
+const move_up = "Move Up";
+const ok = "OK";
+const omit = "Omit";
+const preferences = "Preferences";
+const settings = "Settings";
+const edit = "Edit";
+const preview = "Preview";
+const responsive = "Responsive Display Settings";
+const responsiveMsg = "What size devices should this appear on?";
+const responsiveAll = "All devices";
+const responsiveSmallOnly = "Only on small screens";
+const responsiveSmallHidden = "Not on small screens";
+const unison = "Unison";
+const wholeverse = "By Whole Verse";
+const EN$6 = {
+	abbreviated: abbreviated,
+	addOption: addOption,
+	cancel: cancel,
+	condition: condition$1,
+	copy: copy,
+	copied: copied,
+	"default": "Default",
+	displayFormat: displayFormat,
+	halfverse: halfverse,
+	heading: heading,
+	heading1: heading1,
+	heading2: heading2,
+	heading3: heading3,
+	heading4: heading4,
+	move_down: move_down,
+	move_up: move_up,
+	ok: ok,
+	omit: omit,
+	preferences: preferences,
+	settings: settings,
+	edit: edit,
+	preview: preview,
+	responsive: responsive,
+	responsiveMsg: responsiveMsg,
+	responsiveAll: responsiveAll,
+	responsiveSmallOnly: responsiveSmallOnly,
+	responsiveSmallHidden: responsiveSmallHidden,
+	unison: unison,
+	wholeverse: wholeverse
+};
+
+const editableMetadataButtonsCss = ".buttons.sc-ldf-editable-metadata-buttons{position:absolute;height:0;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;opacity:1;transition:all 0.25s}.buttons.sc-ldf-editable-metadata-buttons ion-buttons.sc-ldf-editable-metadata-buttons{background-color:var(--ion-color-light, #f4f5f8);border-radius:3px;flex-wrap:wrap;max-width:100%}.hidden.sc-ldf-editable-metadata-buttons{display:none;height:0;opacity:0;transition:all 0.25s}@media (max-width: 767px){.sm-hidden.sc-ldf-editable-metadata-buttons{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}";
+
+const LOCALE$6 = {
+  'en': EN$6
+};
+const EditableMetadataButtonsComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfAddOptionToDoc = index.createEvent(this, "ldfAddOptionToDoc", 7);
+    this.ldfTogglePreview = index.createEvent(this, "ldfTogglePreview", 7);
+    this.ldfDocShouldMove = index.createEvent(this, "ldfDocShouldMove", 7);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+    /** Documents in `preview` mode will display as if they're not editable, unless the user explicitly chooses to edit them */
+    this.preview = false;
+  }
+  objChange(newObj) {
+    if (this.modal) {
+      this.modal.componentProps = Object.assign(Object.assign({}, this.modal.componentProps), { obj: newObj });
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.loadLocaleStrings();
+  }
+  // Private methods
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE$6[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  /** Display an alert to set responsiveness */
+  async openResponsive() {
+    var _a;
+    const alert = await overlays.alertController.create({
+      header: this.localeStrings.responsive,
+      message: this.localeStrings.responsiveMsg,
+      inputs: [
+        {
+          name: 'value',
+          type: 'radio',
+          value: book$1.Responsive.AllSizes,
+          label: this.localeStrings.responsiveAll
+        },
+        {
+          name: 'value',
+          type: 'radio',
+          value: book$1.Responsive.SmallOnly,
+          label: this.localeStrings.responsiveSmallOnly
+        },
+        {
+          name: 'value',
+          type: 'radio',
+          value: book$1.Responsive.SmallHidden,
+          label: this.localeStrings.responsiveSmallHidden
+        }
+      ],
+      buttons: [
+        {
+          role: 'cancel',
+          text: this.localeStrings.cancel
+        },
+        this.localeStrings.ok
+      ]
+    });
+    await alert.present();
+    const { data } = await alert.onDidDismiss();
+    const { values } = data;
+    if (values) {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.base}/${this.index}/responsive`,
+        op: [{
+            type: 'set',
+            oldValue: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.responsive,
+            value: values
+          }]
+      }));
+    }
+  }
+  /** Display a modal `EditableMetadataComponent` */
+  async openSettings() {
+    this.modal = await this.openModal('ldf-editable-metadata');
+  }
+  /** Display a modal `EditableConditionComponent` */
+  async openCondition() {
+    this.modal = await this.openModal('ldf-editable-condition', `${this.base}/${this.index}/condition`, { obj: this.obj });
+  }
+  /** Display a modal `EditablePreferencesComponent` */
+  async openPreferences() {
+    const path = this.base && this.index ? `${this.base}/${this.index}` : '';
+    this.modal = await this.openModal('ldf-editable-preferences', `${path}/metadata`, {
+      obj: this.obj
+    });
+  }
+  async openModal(component, componentPath = undefined, componentProps = undefined) {
+    const modal = await overlays.modalController.create({
+      component
+    });
+    const path = componentPath || (this.base && this.index >= 0 ? `${this.base}/${this.index}` : '/');
+    modal.componentProps = Object.assign(Object.assign({}, componentProps), { modal, doc: this.obj, path, visible: true, collapsed: false });
+    // present the modal
+    await modal.present();
+    return modal;
+  }
+  /** Emit an event with information about this document’s location in the tree and current state */
+  addOption() {
+    this.ldfAddOptionToDoc.emit({
+      base: this.base,
+      index: this.index,
+      obj: this.obj
+    });
+  }
+  move(diff) {
+    this.ldfDocShouldMove.emit({
+      base: this.base,
+      oldIndex: this.index,
+      diff
+    });
+  }
+  async headingLevel() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const alert = await overlays.alertController.create({
+      header: (_a = this.localeStrings) === null || _a === void 0 ? void 0 : _a.heading,
+      inputs: [
+        {
+          name: 'level',
+          type: 'radio',
+          value: 1,
+          label: (_b = this.localeStrings) === null || _b === void 0 ? void 0 : _b.heading1
+        },
+        {
+          name: 'level',
+          type: 'radio',
+          value: 2,
+          label: (_c = this.localeStrings) === null || _c === void 0 ? void 0 : _c.heading2
+        },
+        {
+          name: 'level',
+          type: 'radio',
+          value: 3,
+          label: (_d = this.localeStrings) === null || _d === void 0 ? void 0 : _d.heading3
+        },
+        {
+          name: 'level',
+          type: 'radio',
+          value: 4,
+          label: (_e = this.localeStrings) === null || _e === void 0 ? void 0 : _e.heading4
+        },
+      ],
+      buttons: [
+        {
+          text: (_f = this.localeStrings) === null || _f === void 0 ? void 0 : _f.cancel,
+          role: 'cancel',
+          cssClass: 'secondary'
+        },
+        {
+          text: (_g = this.localeStrings) === null || _g === void 0 ? void 0 : _g.ok,
+        }
+      ]
+    });
+    await alert.present();
+    const { data } = await alert.onDidDismiss(), { values } = data;
+    if ((_h = this.obj) === null || _h === void 0 ? void 0 : _h.metadata) {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.base}/${this.index}/metadata/level`,
+        op: [{
+            type: 'set',
+            value: values,
+            oldValue: (_k = (_j = this.obj) === null || _j === void 0 ? void 0 : _j.metadata) === null || _k === void 0 ? void 0 : _k.level
+          }]
+      }));
+    }
+    else {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.base}/${this.index}/metadata`,
+        op: [{
+            type: 'set',
+            value: { level: values }
+          }]
+      }));
+    }
+  }
+  async copyDoc() {
+    try {
+      navigator.clipboard.writeText(JSON.stringify(this.obj));
+      const toast = await overlays.toastController.create({
+        message: this.localeStrings.copied,
+        duration: 1000,
+        color: "success"
+      });
+      await toast.present();
+    }
+    catch (e) {
+      console.warn('Clipboard operation not allowed.', e);
+    }
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const localeStrings = this.localeStrings || {}, hasIndex = this.index !== undefined && this.index >= 0;
+    return index.h(index.Host, null, index.h("div", { class: { buttons: true, hidden: !this.visible || !this.preview } }, index.h("ion-buttons", { slot: "end" }, (navigator === null || navigator === void 0 ? void 0 : navigator.clipboard) && index.h("ion-button", { onClick: () => this.copyDoc(), "aria-role": 'button', "aria-label": localeStrings.copy }, index.h("ion-label", { class: "sm-hidden" }, localeStrings.copy), index.h("ion-icon", { slot: 'end', name: 'clipboard' })), index.h("ion-button", { onClick: () => this.ldfTogglePreview.emit(false) }, index.h("ion-label", { class: "sm-hidden" }, (_a = this.localeStrings) === null || _a === void 0 ? void 0 : _a.edit), index.h("ion-icon", { slot: "end", name: "create" })))), index.h("div", { class: { buttons: true, hidden: !this.visible || this.preview } }, index.h("ion-buttons", { slot: 'end' }, index.h("ion-button", { onClick: () => this.ldfTogglePreview.emit(true) }, index.h("ion-label", { class: "sm-hidden" }, (_b = this.localeStrings) === null || _b === void 0 ? void 0 : _b.preview), index.h("ion-icon", { slot: "end", name: "eye" })), ((_c = this.obj) === null || _c === void 0 ? void 0 : _c.type) !== 'option' && this.parentType !== 'option' && this.base &&
+      index.h("ion-button", { onClick: () => this.addOption(), "aria-role": 'button', "aria-label": localeStrings.addOption }, index.h("ion-icon", { slot: 'icon-only', name: 'add' })), ((_d = this.obj) === null || _d === void 0 ? void 0 : _d.type) == 'liturgy' && index.h("ion-button", { onClick: () => this.openPreferences(), "aria-role": 'button', "aria-label": localeStrings.preferences }, index.h("ion-icon", { slot: 'icon-only', name: 'list' })), ((_e = this.obj) === null || _e === void 0 ? void 0 : _e.type) == 'heading' && index.h("ion-button", { onClick: () => this.headingLevel() }, index.h("ion-label", null, localeStrings[`heading${((_g = (_f = this.obj) === null || _f === void 0 ? void 0 : _f.metadata) === null || _g === void 0 ? void 0 : _g.level) || 3}`] || 'Heading')), ((_j = (_h = this.obj) === null || _h === void 0 ? void 0 : _h.availableDisplayFormats()) === null || _j === void 0 ? void 0 : _j.length) > 0 && index.h("ldf-editable-select", { placeholder: localeStrings.displayFormat, value: this.obj.display_format, path: `${this.base}/${this.index}`, property: "display_format", options: this.obj.availableDisplayFormats().map(value => ({ value, label: localeStrings[value] || value })) }), (this.base && hasIndex || ((_k = this.obj) === null || _k === void 0 ? void 0 : _k.type) !== 'liturgy') && index.h("ion-button", { onClick: () => this.openCondition(), "aria-role": 'button', "aria-label": localeStrings.condition }, index.h("ion-icon", { slot: 'icon-only', name: 'calendar' })), (this.base && hasIndex || ((_l = this.obj) === null || _l === void 0 ? void 0 : _l.type) !== 'liturgy') && index.h("ion-button", { onClick: () => this.openResponsive(), "aria-role": 'button', "aria-label": localeStrings.responsive }, index.h("ion-icon", { slot: 'icon-only', name: 'phone-portrait' })), (navigator === null || navigator === void 0 ? void 0 : navigator.clipboard) && index.h("ion-button", { onClick: () => this.copyDoc(), "aria-role": 'button', "aria-label": localeStrings.copy }, index.h("ion-icon", { slot: 'icon-only', name: 'clipboard' })), index.h("ion-button", { onClick: () => this.openSettings(), "aria-role": 'button', "aria-label": localeStrings.settings }, index.h("ion-icon", { slot: 'icon-only', name: 'cog' })), (this.base && hasIndex && this.index > 0) && index.h("ion-button", { onClick: () => this.move(-1), "aria-role": 'button', "aria-label": localeStrings.move_up }, index.h("ion-icon", { slot: 'icon-only', name: 'arrow-up' })), (this.base && hasIndex) && index.h("ion-button", { onClick: () => this.move(1), "aria-role": 'button', "aria-label": localeStrings.move_down }, index.h("ion-icon", { slot: 'icon-only', name: 'arrow-down' })), hasIndex &&
+      index.h("ldf-editable-delete", { base: this.base, index: this.index, obj: this.obj }))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "obj": ["objChange"]
+  }; }
+};
+EditableMetadataButtonsComponent.style = editableMetadataButtonsCss;
+
+const editableSelectCss = "";
+
+const EditableSelectComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfChange = index.createEvent(this, "ldfChange", 7);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+  }
+  // Listeners
+  onChange(ev) {
+    const oldValue = this.value, value = ev.detail.value;
+    if (value !== oldValue) {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: this.path,
+        op: [
+          { type: 'set', index: this.property, oldValue, value }
+        ]
+      }));
+      this.ldfChange.emit(value);
+    }
+  }
+  render() {
+    return (index.h("ion-select", { value: this.value, placeholder: this.placeholder }, this.options.map(option => index.h("ion-select-option", { value: option.value }, option.label))));
+  }
+  get element() { return index.getElement(this); }
+};
+EditableSelectComponent.style = editableSelectCss;
+
+const close = "Return to Bulletin";
+const url = "URL";
+const EN$5 = {
+	close: close,
+	url: url
+};
+
+const imageCss = "img.sc-ldf-image{height:auto;max-width:100%;z-index:1}figcaption.sc-ldf-image{background-color:var(--ldf-editable-lookup-background-color);border-radius:4px;color:var(--ldf-editable-lookup-color);display:block;margin:auto;text-align:center}.left.sc-ldf-image{text-align:left}.center.sc-ldf-image{text-align:center}.right.sc-ldf-image{text-align:right}.img-wrapper.sc-ldf-image{margin:0;padding:12px;display:inline-block;position:relative}img.editable.sc-ldf-image{border:3px solid var(--ldf-color)}button.resize.sc-ldf-image{height:30px;width:30px;margin:0;padding:0;background-color:var(--ldf-editable-lookup-background-color);border-radius:50%;border:3px solid var(--ldf-color)}.resize.top-left.sc-ldf-image{position:absolute;left:0;top:-3px;cursor:nwse-resize}.resize.bottom-left.sc-ldf-image{position:absolute;left:-3px;bottom:0;cursor:nesw-resize}.resize.top-right.sc-ldf-image{position:absolute;right:-6px;top:-3px;cursor:nesw-resize}.resize.bottom-right.sc-ldf-image{position:absolute;right:-6px;bottom:0;cursor:nwse-resize}";
+
+var __decorate = (undefined && undefined.__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;
+};
+const LOCALE$5 = {
+  'en': EN$5
+};
+const ImageComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+    this.isResizing = false;
+    this.resizingStartPoint = null;
+    this.resizingCorner = null;
+  }
+  docChanged(newDoc) {
+    var _a, _b, _c, _d;
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new image.Image(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new image.Image(newDoc);
+      }
+      this.height = ((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.height) || null;
+      this.width = ((_d = (_c = this.obj) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.width) || null;
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new image.Image();
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE$5[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  async showZoomed() {
+    const modal = await overlays.modalController.create({
+      component: 'ldf-image'
+    });
+    modal.componentProps = {
+      modal,
+      doc: this.obj
+    };
+    await modal.present();
+  }
+  startResizing(corner, x, y) {
+    this.resizingCorner = corner;
+    this.resizingStartPoint = { x, y };
+  }
+  stopResizing() {
+    // clear status of resizing
+    console.log('stopResizing');
+    this.resizingCorner = null;
+  }
+  resizingMove(ev) {
+    if (this.resizingCorner && this.resizingStartPoint) {
+      this.processResizingMove(this.resizingCorner, ev.clientX, ev.clientY);
+    }
+  }
+  processResizingMove(corner, clientX, clientY) {
+    const { x } = this.resizingStartPoint;
+    const xDiff = corner === 'nw' || corner === 'sw' ? clientX - x : x - clientX;
+    this.resizingStartPoint = { x: clientX, y: clientY };
+    // force fixed aspect ratio by nulling out `height`
+    this.width = this.imgElement.clientWidth - xDiff;
+    this.height = null;
+    this.updateDoc();
+  }
+  touchStart(corner, ev) {
+    ev.preventDefault();
+    const touch = ev.touches[0];
+    if (touch) {
+      this.startResizing(corner, touch.clientX, touch.clientY);
+    }
+  }
+  touchMove(corner, ev) {
+    ev.preventDefault();
+    const touch = ev.touches[0];
+    if (touch) {
+      this.processResizingMove(corner, touch.clientX, touch.clientY);
+    }
+  }
+  // debounce saving the change by 500ms, preventing sending multiple changes as the mouse moves
+  updateDoc() {
+    var _a, _b, _c, _d, _e, _f;
+    if (!((_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata)) {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: this.path,
+        op: [{ type: 'set', index: 'metadata', oldValue: (_b = this.obj) === null || _b === void 0 ? void 0 : _b.metadata, value: {} }]
+      }));
+    }
+    this.ldfDocShouldChange.emit(new change.Change({
+      path: `${this.path}/metadata`,
+      op: [
+        {
+          type: 'set',
+          index: 'height',
+          oldValue: (_d = (_c = this.obj) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.height,
+          value: this.imgElement.clientHeight
+        },
+        {
+          type: 'set',
+          index: 'width',
+          oldValue: (_f = (_e = this.obj) === null || _e === void 0 ? void 0 : _e.metadata) === null || _f === void 0 ? void 0 : _f.width,
+          value: this.imgElement.clientWidth
+        }
+      ]
+    }));
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e;
+    const localeStrings = this.localeStrings || {};
+    const imageDisplay = [
+      this.editable && index.h("ldf-label-bar", null, index.h("slot", { slot: 'end', name: 'controls' })),
+      index.h("div", { class: `${((_a = this.obj) === null || _a === void 0 ? void 0 : _a.style) || ''} ${((_c = (_b = this.obj) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.align) || 'center'}` }, this.obj.value && this.obj.value.map((url, ii) => {
+        var _a;
+        return this.editable ?
+          index.h("figure", null, index.h("div", { class: "img-wrapper" }, index.h("img", { src: url, ref: el => this.imgElement = el, alt: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.label, style: {
+              height: this.height ? `${this.height}px` : 'auto',
+              width: this.width ? `${this.width}px` : 'auto'
+            }, class: "editable" }), index.h("button", { class: "resize top-left", onMouseDown: (ev) => this.startResizing('nw', ev.clientX, ev.clientY), onTouchStart: (ev) => this.touchStart('nw', ev), onTouchMove: (ev) => this.touchMove('nw', ev), onTouchEnd: () => this.stopResizing() }), index.h("button", { class: "resize bottom-left", onMouseDown: (ev) => this.startResizing('sw', ev.clientX, ev.clientY), onTouchStart: (ev) => this.touchStart('sw', ev), onTouchMove: (ev) => this.touchMove('sw', ev), onTouchEnd: () => this.stopResizing() }), index.h("button", { class: "resize top-right", onMouseDown: (ev) => this.startResizing('ne', ev.clientX, ev.clientY), onTouchStart: (ev) => this.touchStart('ne', ev), onTouchMove: (ev) => this.touchMove('ne', ev), onTouchEnd: () => this.stopResizing() }), index.h("button", { class: "resize bottom-right", onMouseDown: (ev) => this.startResizing('se', ev.clientX, ev.clientY), onTouchStart: (ev) => this.touchStart('se', ev), onTouchMove: (ev) => this.touchMove('se', ev), onTouchEnd: () => this.stopResizing() })), index.h("figcaption", null, index.h("code", null, localeStrings.url), index.h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${ii}`, text: url, path: `${this.path}/value/${ii}` })))
+          :
+            index.h("img", { src: url, onClick: () => this.showZoomed(), style: {
+                height: this.height ? `${this.height}px` : 'auto',
+                width: this.width ? `${this.width}px` : 'auto'
+              } });
+      }))
+    ];
+    if (!this.modal) {
+      return index.h(index.Host, { lang: (_d = this.obj) === null || _d === void 0 ? void 0 : _d.language }, imageDisplay);
+    }
+    else {
+      return [
+        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-label", { slot: "start" }, localeStrings.close), index.h("ion-icon", { slot: "end", name: "close" }))))),
+        index.h("ion-content", { class: "ion-padding", scrollX: true, lang: (_e = this.obj) === null || _e === void 0 ? void 0 : _e.language }, imageDisplay)
+      ];
+    }
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "doc": ["docChanged"]
+  }; }
+};
+__decorate([
+  index$1.Debounce(250)
+], ImageComponent.prototype, "updateDoc", null);
+ImageComponent.style = imageCss;
+
+const bible_version = " in the version ";
+const category = "All items that match the category ";
+const collect = "The Collect of the Day.";
+const day_of_month_1 = "It is the ";
+const day_of_month_2 = " day of the month";
+const definedByPreference = " defined by the preference ";
+const fromCanticleTable = " from the canticle table ";
+const fromLectionary = " from the lectionary ";
+const lectionaryReading = "The lectionary reading ";
+const slug = "All items with the slug ";
+const condition = "Included when ";
+const and = "all";
+const or = "any";
+const the_day = " the day ";
+const of_the_following = " of the following are true: ";
+const day = "the liturgical day";
+const season = "the liturgical season";
+const week = "the liturgical week";
+const weekday = "the day of the week";
+const feastDay = "a Sunday or Holy Day";
+const is = " is ";
+const is_not = " is not ";
+const only = " one of: ";
+const only_1 = "";
+const except = " anything but: ";
+const except_1 = " not ";
+const the_preference = "the preference ";
+const the_preference_specified = "chosen in the preference ";
+const the_date = "the date ";
+const lte = " ≤ ";
+const lt = " < ";
+const gt = " > ";
+const gte = " ≥ ";
+const smallOnly = "Only appears on small screens";
+const smallHidden = "Doesn't appear on small screens";
+const EN$4 = {
+	bible_version: bible_version,
+	"canticle-1": "The first canticle ",
+	"canticle-2": "The second canticle ",
+	category: category,
+	collect: collect,
+	day_of_month_1: day_of_month_1,
+	day_of_month_2: day_of_month_2,
+	definedByPreference: definedByPreference,
+	fromCanticleTable: fromCanticleTable,
+	fromLectionary: fromLectionary,
+	lectionaryReading: lectionaryReading,
+	"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: slug,
+	condition: condition,
+	and: and,
+	or: or,
+	the_day: the_day,
+	of_the_following: of_the_following,
+	day: day,
+	season: season,
+	week: week,
+	weekday: weekday,
+	feastDay: feastDay,
+	is: is,
+	is_not: is_not,
+	only: only,
+	only_1: only_1,
+	except: except,
+	except_1: except_1,
+	the_preference: the_preference,
+	the_preference_specified: the_preference_specified,
+	the_date: the_date,
+	lte: lte,
+	lt: lt,
+	gt: gt,
+	gte: gte,
+	smallOnly: smallOnly,
+	smallHidden: smallHidden
+};
+
+const ConditionNode = ({ doc, localeStrings }, children) => index.h("div", { class: 'condition' },
+  index.h("p", null,
+    localeStrings.condition,
+    index.h("code", null, localeStrings[doc.condition.mode]),
+    localeStrings.of_the_following),
+  index.h("ul", null, doc.condition.conditions.map(condition => index.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(index.h(ExceptOnly, { condition: condition, field: 'day', localeStrings: localeStrings }));
+  }
+  if (condition.season) {
+    nodes = nodes.concat(index.h(ExceptOnly, { condition: condition, field: 'season', localeStrings: localeStrings }));
+  }
+  if (condition.week) {
+    nodes = nodes.concat(index.h(ExceptOnly, { condition: condition, field: 'week', localeStrings: localeStrings }));
+  }
+  if (condition.weekday) {
+    nodes = nodes.concat(index.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,
+      index.h("code", null, condition.preference.key),
+      condition.preference.is ? localeStrings.is : localeStrings.is_not,
+      index.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 => index.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";
+}
+
+const valueOrPreference = (x, localeStrings) => {
+  if (typeof x === 'object') {
+    return index.h("span", null,
+      localeStrings.definedByPreference,
+      " ",
+      index.h("code", null, x.preference));
+  }
+  else {
+    return index.h("code", null, x);
+  }
+};
+const LookupNode = ({ doc, localeStrings }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+  let desc;
+  if (doc.lookup) {
+    switch ((_a = doc.lookup) === null || _a === void 0 ? void 0 : _a.type) {
+      case 'lectionary':
+        desc = [
+          localeStrings.lectionaryReading,
+          valueOrPreference((_b = doc.lookup) === null || _b === void 0 ? void 0 : _b.item, localeStrings),
+          localeStrings.fromLectionary,
+          valueOrPreference((_c = doc.lookup) === null || _c === void 0 ? void 0 : _c.table, localeStrings),
+          "."
+        ];
+        break;
+      case 'canticle':
+        desc = [
+          localeStrings[`canticle-${(_d = doc.lookup) === null || _d === void 0 ? void 0 : _d.item}`],
+          localeStrings.fromCanticleTable,
+          valueOrPreference((_e = doc.lookup) === null || _e === void 0 ? void 0 : _e.table, localeStrings),
+          "."
+        ];
+        break;
+      case 'category':
+        desc = [
+          localeStrings.category,
+          doc.category.map(category => index.h("code", null, category)),
+          ((_f = doc.lookup) === null || _f === void 0 ? void 0 : _f.filter) && ((_g = doc.lookup) === null || _g === void 0 ? void 0 : _g.filter) == 'seasonal' && localeStrings['filter-seasonal'],
+          ((_h = doc.lookup) === null || _h === void 0 ? void 0 : _h.filter) && ((_j = doc.lookup) === null || _j === void 0 ? void 0 : _j.filter) == 'evening' && localeStrings[`filter-evening-${((_k = doc.lookup) === null || _k === void 0 ? void 0 : _k.item) || true}`],
+          ((_l = doc.lookup) === null || _l === void 0 ? void 0 : _l.filter) && ((_m = doc.lookup) === null || _m === void 0 ? void 0 : _m.filter) == 'day' && localeStrings[`filter-day`],
+          ((_o = doc.lookup) === null || _o === void 0 ? void 0 : _o.filter) && ((_p = doc.lookup) === null || _p === void 0 ? void 0 : _p.filter) == 'day' && index.h("code", null, (_q = doc.lookup) === null || _q === void 0 ? void 0 : _q.item),
+          ((_r = doc.lookup) === null || _r === void 0 ? void 0 : _r.hasOwnProperty('rotate')) && localeStrings[`rotate-${(_s = doc.lookup) === null || _s === void 0 ? void 0 : _s.rotate}`],
+          "."
+        ];
+        break;
+      case 'slug':
+        desc = [
+          localeStrings.slug,
+          index.h("code", null, doc.slug),
+          ((_t = doc.lookup) === null || _t === void 0 ? void 0 : _t.filter) && ((_u = doc.lookup) === null || _u === void 0 ? void 0 : _u.filter) == 'seasonal' && localeStrings['filter-seasonal'],
+          ((_v = doc.lookup) === null || _v === void 0 ? void 0 : _v.filter) && ((_w = doc.lookup) === null || _w === void 0 ? void 0 : _w.filter) == 'evening' && localeStrings[`filter-evening-${((_x = doc.lookup) === null || _x === void 0 ? void 0 : _x.item) || true}`],
+          ((_y = doc.lookup) === null || _y === void 0 ? void 0 : _y.filter) && ((_z = doc.lookup) === null || _z === void 0 ? void 0 : _z.filter) == 'day' && localeStrings[`filter-day`],
+          ((_0 = doc.lookup) === null || _0 === void 0 ? void 0 : _0.filter) && ((_1 = doc.lookup) === null || _1 === void 0 ? void 0 : _1.filter) == 'day' && index.h("code", null, (_2 = doc.lookup) === null || _2 === void 0 ? void 0 : _2.item),
+          ((_3 = doc.lookup) === null || _3 === void 0 ? void 0 : _3.hasOwnProperty('rotate')) && localeStrings[`rotate-${(_4 = doc.lookup) === null || _4 === void 0 ? void 0 : _4.rotate}`],
+          "."
+        ];
+        break;
+      case 'collect':
+        desc = index.h("code", null, localeStrings.collect);
+        break;
+      default:
+        desc = JSON.stringify(doc.lookup);
+        break;
+    }
+  }
+  else if (doc.type === "bible-reading" && doc.citation) {
+    desc = [
+      index.h("code", null, doc.citation),
+      localeStrings.bible_version,
+      ...typeof doc.version === "string"
+        ? [index.h("code", null, doc.version)]
+        : [
+          localeStrings.the_preference_specified,
+          index.h("code", null, "bibleVersion")
+        ]
+    ];
+  }
+  return (index.h("article", { class: "lookup" }, desc));
+};
+
+const liturgicalDocumentCss = "ldf-liturgical-document.sc-ldf-liturgical-document,.sc-ldf-liturgical-document-h{font-family:var(--ldf-font-face);display:block}.container.editable.sc-ldf-liturgical-document{padding-top:0}.lookup.sc-ldf-liturgical-document{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.sc-ldf-liturgical-document code.sc-ldf-liturgical-document{font-weight:bold}.condition.sc-ldf-liturgical-document{background-color:var(--ldf-editable-condition-background-color);color:var(--ldf-editable-condition-color);border-radius:4px;padding:1em;width:calc(100% - 2em)}.condition.sc-ldf-liturgical-document code.sc-ldf-liturgical-document{font-weight:bold}.doc.sc-ldf-liturgical-document{margin-top:var(--ldf-liturgical-document-margin-top)}ldf-editable-metadata-buttons.sc-ldf-liturgical-document{height:none;display:block;z-index:10;background:var(--ldf-background);opacity:0.8;width:100%;position:sticky;top:2em;padding-top:1em;padding-bottom:1em}ldf-editable-metadata-buttons.top-level.sc-ldf-liturgical-document{position:relative;top:0}.small-only.sc-ldf-liturgical-document{display:block}.small-hidden.sc-ldf-liturgical-document{display:none}@media (min-width: 415px){.small-only.sc-ldf-liturgical-document{display:none}.small-hidden.sc-ldf-liturgical-document{display:block}}";
+
+const LOCALE$4 = {
+  'en': EN$4
+};
+const LiturgicalDocumentComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.focusPath = index.createEvent(this, "focusPath", 7);
+    this.focusObj = index.createEvent(this, "focusObj", 7);
+    this.ldfSelectionChange = index.createEvent(this, "ldfSelectionChange", 7);
+    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;
+  }
+  async docChanged(newDoc) {
+    let provisionalObj;
+    try {
+      if (typeof newDoc == 'string') {
+        provisionalObj = new book$1.LiturgicalDocument(JSON.parse(newDoc));
+      }
+      else {
+        provisionalObj = new book$1.LiturgicalDocument(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      provisionalObj = new book$1.LiturgicalDocument();
+    }
+    this.obj = provisionalObj || new book$1.LiturgicalDocument();
+  }
+  // Listeners
+  onDragOver() {
+    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);
+    }
+  }
+  selectionChangeHandler(ev) {
+    var _a, _b;
+    // stop iOS from taking over 
+    ev.preventDefault();
+    // handle the selection
+    const 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)) {
+      const text = selection.toString();
+      this.ldfSelectionChange.emit({
+        target: this.element,
+        text,
+        citation,
+        fragment: this.path
+      });
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.loadLocaleStrings();
+    this.docChanged(this.doc);
+  }
+  /** On hover, display Add Block buttons */
+  onMouseOver() {
+    this.hasFocus = true;
+    this.focusPath.emit(this.path);
+  }
+  onMouseOut(ev) {
+    const elDiv = this.element.querySelector('div.container');
+    if (ev.relatedTarget == elDiv) {
+      setTimeout(() => {
+        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
+  onClick() {
+    this.hasFocus = true;
+    this.focusPath.emit(this.path);
+    this.focusObj.emit({ obj: this.obj, path: this.path });
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE$4[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  /** Gives a loading view, a description of the document (if editing and has a lookup), or the component of the correct type */
+  nodeFromDoc(doc, forceEditable = undefined) {
+    if (doc == undefined) {
+      return (customElements === null || customElements === void 0 ? void 0 : customElements.get('ion-skeleton-text')) ? index.h("ion-skeleton-text", null) : index.h("p", null, "...");
+    }
+    else if (this.editable || forceEditable) {
+      return this.editableNode(doc);
+    }
+    else {
+      return this.chooseComponent(doc);
+    }
+  }
+  editableNode(doc) {
+    var _a;
+    const localeStrings = this.localeStrings || {};
+    if (((_a = doc.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && Boolean(doc.value[0])) {
+      if (doc.condition) {
+        return index.h(ConditionNode, { doc: doc, localeStrings: localeStrings }, this.chooseComponent(doc));
+      }
+      else {
+        return this.chooseComponent(doc);
+      }
+    }
+    else {
+      if (doc.condition && !doc.lookup) {
+        return index.h(ConditionNode, { doc: doc, localeStrings: localeStrings }, this.chooseComponent(doc));
+      }
+      else if (doc.condition && doc.lookup) {
+        return index.h(ConditionNode, { doc: doc, localeStrings: localeStrings }, index.h(LookupNode, { doc: doc, localeStrings: localeStrings }));
+      }
+      else if (!doc.condition && doc.lookup) {
+        return index.h(LookupNode, { doc: doc, localeStrings: localeStrings });
+      }
+      else if (doc.type === "bible-reading") {
+        return index.h(LookupNode, { doc: doc, localeStrings: localeStrings });
+      }
+      else {
+        return this.chooseComponent(doc);
+      }
+    }
+  }
+  /** Processes generic LiturgicalDocument into component of the appropriate type */
+  //@Method()
+  chooseComponent(doc) {
+    var _a, _b;
+    let node;
+    const editable = this.editable && !this.preview;
+    switch (doc === null || doc === void 0 ? void 0 : doc.type) {
+      case 'liturgy':
+        node = index.h("ldf-liturgy", { path: this.path, editable: editable, preview: this.preview, doc: doc });
+        break;
+      case 'heading':
+        node = index.h("ldf-heading", { path: this.path, editable: editable, doc: doc });
+        break;
+      case 'image':
+        node = index.h("ldf-image", { path: this.path, editable: editable, doc: doc });
+        break;
+      case 'meditation':
+        const 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 = index.h("ldf-meditation", { path: this.path, editable: this.editable || this.preview, doc: doc, color: colorValue });
+        break;
+      case 'option':
+        node = index.h("ldf-option", { path: this.path, editable: editable, preview: this.preview, doc: doc });
+        break;
+      case 'refrain':
+        node = index.h("ldf-refrain", { path: this.path, editable: editable, doc: doc });
+        break;
+      case 'rubric':
+        node = index.h("ldf-rubric", { path: this.path, editable: editable, doc: doc });
+        break;
+      case 'text':
+        node = index.h("ldf-text", { path: this.path, editable: editable, doc: doc });
+        break;
+      case 'responsive':
+        node = index.h("ldf-responsive-prayer", { path: this.path, editable: editable, doc: doc });
+        break;
+      case 'bible-reading':
+        node = index.h("ldf-bible-reading", { path: this.path, editable: editable, doc: doc });
+        break;
+      case 'psalm':
+        node = index.h("ldf-psalm", { path: this.path, editable: editable, doc: doc });
+        break;
+      default:
+        console.warn('invalid type for document', doc);
+        break;
+    }
+    return node;
+  }
+  setPreview(preview) {
+    this.preview = preview;
+    this.editable = true;
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const node = this.nodeFromDoc(this.obj);
+    return (node && index.h(index.Host, { lang: ((_a = this.obj) === null || _a === void 0 ? void 0 : _a.language) || 'en' }, index.h("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) == book$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) == book$1.Responsive.SmallHidden,
+      } }, (this.editable || this.preview) && index.h("ldf-editable-metadata-buttons", { visible: this.hasFocus, base: this.base, index: this.index, obj: this.obj, parentType: this.parentType, preview: this.preview, onLdfTogglePreview: (e) => 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) === book$1.Responsive.SmallHidden || ((_j = this.obj) === null || _j === void 0 ? void 0 : _j.responsive) === book$1.Responsive.SmallOnly) && index.h("ion-chip", { class: "responsive-banner" }, index.h("ion-icon", { name: "phone-portrait-outline" }), ((_k = this.obj) === null || _k === void 0 ? void 0 : _k.responsive) === book$1.Responsive.SmallOnly && index.h("ion-label", null, this.localeStrings.smallOnly), ((_l = this.obj) === null || _l === void 0 ? void 0 : _l.responsive) === book$1.Responsive.SmallHidden && index.h("ion-label", null, this.localeStrings.smallHidden)), index.h("div", { id: (this.path || '').replace(/\//g, '-'), class: {
+        doc: true,
+        editable: this.editable || this.preview
+      }, style: { padding: this.padding } }, node))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "doc": ["docChanged"]
+  }; }
+};
+LiturgicalDocumentComponent.style = liturgicalDocumentCss;
+
+const LiturgyComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Documents in `preview` mode will display as if they're not editable, unless the user explicitly chooses to edit them */
+    this.preview = false;
+  }
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new rubric.Liturgy(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new rubric.Liturgy(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new rubric.Liturgy();
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.docChanged(this.doc);
+  }
+  // Listens for ldf-liturgical-document event indicating mouseover
+  onFocusPath(ev) {
+    this.hasFocus = ev.detail;
+  }
+  // Render
+  render() {
+    const basePath = this.path == '/' ? '' : `${this.path}/`, valuePath = `${basePath}/value`;
+    return (index.h(index.Host, { lang: this.obj.language }, (this.editable || this.preview) && index.h("ldf-editable-add-block", { visible: true, base: valuePath, index: 0 }), this.obj.value.map((doc, docIndex) => {
+      var _a, _b, _c;
+      const path = `${valuePath}/${docIndex}`, buttonVisible = this.hasFocus == path // button appears if this doc is focused
+        || docIndex == ((((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) || 0) - 1) // or it it's the last doc in the liturgy
+        || ((doc === null || doc === void 0 ? void 0 : doc.type) === 'option' && ((_c = this.hasFocus) === null || _c === void 0 ? void 0 : _c.startsWith(path))); // or if it's an option and one of its children is focused
+      return (index.h("article", { style: { padding: this.editable ? '1em' : '0' } }, index.h("ldf-liturgical-document", { doc: doc, path: path, base: valuePath, index: docIndex, editable: this.editable, preview: this.preview, parentType: 'liturgy' }), (this.editable || this.preview) && index.h("ldf-editable-add-block", { visible: buttonVisible, base: valuePath, index: docIndex + 1 })));
+    })));
+  }
+  static get watchers() { return {
+    "doc": ["docChanged"]
+  }; }
+};
+
+const start = "Start";
+const pause = "Pause";
+const resume = "Resume";
+const meditate = "Meditate for";
+const minutes = "minutes.";
+const seconds = " seconds. ";
+const EN$3 = {
+	start: start,
+	pause: pause,
+	resume: resume,
+	meditate: meditate,
+	minutes: minutes,
+	seconds: seconds
+};
+
+const meditationCss = "ldf-heading.sc-ldf-meditation .control-container.sc-ldf-meditation,.sc-ldf-meditation-h .control-container.sc-ldf-meditation{display:block;margin:auto}ldf-heading.sc-ldf-meditation .controls.sc-ldf-meditation,.sc-ldf-meditation-h .controls.sc-ldf-meditation{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;width:100%}ldf-heading.sc-ldf-meditation .controls.sc-ldf-meditation input.sc-ldf-meditation,.sc-ldf-meditation-h .controls.sc-ldf-meditation input.sc-ldf-meditation{text-align:center}@media (min-width: 767px){ldf-heading.sc-ldf-meditation .controls.sc-ldf-meditation,.sc-ldf-meditation-h .controls.sc-ldf-meditation{flex-direction:row}}ldf-heading.sc-ldf-meditation .progress-circle-container.sc-ldf-meditation,.sc-ldf-meditation-h .progress-circle-container.sc-ldf-meditation{display:flex;align-items:center;justify-content:center;padding:1em}ldf-heading.sc-ldf-meditation .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation,.sc-ldf-meditation-h .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation{width:300px;height:300px;display:flex;align-items:center;justify-content:center;border-radius:50%}ldf-heading.sc-ldf-meditation .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation .circle-overlay.sc-ldf-meditation,.sc-ldf-meditation-h .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation .circle-overlay.sc-ldf-meditation{background-color:var(--ldf-background-color);display:flex;align-items:center;flex-direction:column;justify-content:center;height:92%;width:92%;border-radius:50%}ldf-heading.sc-ldf-meditation .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation .seconds.sc-ldf-meditation,.sc-ldf-meditation-h .progress-circle-container.sc-ldf-meditation .progress-circle.sc-ldf-meditation .seconds.sc-ldf-meditation{font-family:var(--ldf-font-face);font-size:3em}ldf-heading.sc-ldf-meditation button.clear.sc-ldf-meditation,.sc-ldf-meditation-h button.clear.sc-ldf-meditation{background-color:var(--ldf-background-color);border:none;font-size:1em}.hidden.sc-ldf-meditation{height:0;opacity:0;transition:0.25s}";
+
+const LOCALE$3 = {
+  'en': EN$3
+};
+const MeditationComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.timerChanged = index.createEvent(this, "timerChanged", 7);
+    this.started = false;
+    this.paused = false;
+    this.startingDuration = undefined;
+    /** Liturgical color to use in display */
+    this.color = "#3333ff";
+  }
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new rubric.Meditation(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new rubric.Meditation(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new rubric.Meditation();
+    }
+  }
+  // Lifecycle events
+  async componentWillLoad() {
+    // parse doc we're passed
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+    // start the timer
+    if (this.autostart) {
+      this.secondsRemaining = this.obj.metadata.length;
+      this.start();
+    }
+  }
+  // Public methods
+  /** Start the timer, either with a given value of seconds or with the number passed in the Meditation object metadata */
+  async start(value = undefined) {
+    var _a, _b;
+    const metadata = (_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) !== null && _b !== void 0 ? _b : { length: 300, delay: 0 }, seconds = value || metadata.length, delay = metadata.delay;
+    this.secondsRemaining = seconds;
+    this.startingDuration = seconds;
+    // Start the timer after the delay
+    setTimeout(() => {
+      this.startTimer();
+      this.started = true;
+    }, delay);
+    // Emit event that it's running, after the delay
+    setTimeout(() => {
+      this.timerChanged.emit('start');
+    }, delay);
+  }
+  /** Pause the timer */
+  async pause() {
+    this.paused = true;
+    this.stopTimer();
+  }
+  /** Resume the timer */
+  async resume() {
+    this.paused = false;
+    this.startTimer();
+    this.timerChanged.emit('resume');
+  }
+  /** Rewind the timer to its initial value and restart it */
+  async rewind() {
+    this.pause(); // pause and clear the timer
+    this.stopTimer();
+    this.start(); // starts with the value passed
+    this.timerChanged.emit('rewind');
+  }
+  /** Returns the total duration this timer is running for. */
+  async duration() {
+    return this.startingDuration;
+  }
+  /** Reset the selector for length of time */
+  async reset() {
+    await this.pause();
+    this.secondsRemaining = undefined;
+  }
+  // Private methods
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE$3[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  minutesSeconds(value) {
+    const negative = value < 0, minutes = Math.floor(Math.abs(value / 60));
+    return `${negative ? '-' : ''}${minutes.toString().padStart(2, '0')}:${Math.abs((value - minutes * 60)).toString().padStart(2, '0')}`;
+  }
+  startTimer() {
+    this.timerId = setInterval(() => {
+      this.secondsRemaining--;
+      if (this.secondsRemaining == 0) {
+        this.timerChanged.emit('complete');
+        this.startingDuration = undefined;
+      }
+      else {
+        this.timerChanged.emit(this.secondsRemaining);
+      }
+    }, 1000);
+  }
+  stopTimer() {
+    if (this.timerId) {
+      clearInterval(this.timerId);
+    }
+    // tell the listener to stop audio, controls, etc.
+    this.timerChanged.emit('pause');
+  }
+  handleControlSubmit(e) {
+    e.preventDefault();
+  }
+  handleControlValue(e) {
+    var _a, _b, _c;
+    // Blank values are bad -- replace with 0
+    let value = e.target.value;
+    if (value == '') {
+      value = '0';
+    }
+    // Apply directly to the object and refresh display
+    Object.assign(this.obj, {
+      metadata: Object.assign(Object.assign({}, this.obj.metadata), { length: parseInt(value) * 60 })
+    });
+    this.obj = new rubric.Meditation(this.obj);
+    this.secondsRemaining = (_c = (_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+  }
+  buttonNode(handler, label, icon, fill = 'clear', size = 'large') {
+    const localeStrings = this.localeStrings || {};
+    if (customElements && !!customElements.get('ion-button')) {
+      return (index.h("ion-button", { onClick: handler, fill: fill, size: size }, index.h("ion-icon", { name: icon, slot: 'start' }), index.h("ion-label", null, localeStrings[label])));
+    }
+    else {
+      return (index.h("button", { onClick: handler, class: fill, style: { color: this.color } }, localeStrings[label]));
+    }
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const localeStrings = this.localeStrings || {};
+    const length = (_c = (_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 300, progressAmount = this.secondsRemaining / length, progressPercent = progressAmount * 100;
+    //console.log('meditation', length, progressAmount, progressPercent)
+    return (this.editable
+      ? index.h(index.Host, null, index.h("form", { class: 'controls', onSubmit: (e) => this.handleControlSubmit(e) }, index.h("span", null, localeStrings.meditate), index.h("ldf-editable-text", { inputType: "number", short: true, path: `${this.path}/metadata/length`, text: (_g = ((_f = (_e = (_d = this.obj) === null || _d === void 0 ? void 0 : _d.metadata) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 300)) === null || _g === void 0 ? void 0 : _g.toString() }), index.h("span", null, localeStrings.seconds), index.h("span", null, "(", Math.floor(length / 60), ":", Math.floor(length % 60).toString().padStart(2, '0'), ")")))
+      : index.h(index.Host, null, index.h("div", { class: { 'control-container': true, 'hidden': !!this.secondsRemaining } }, index.h("form", { class: 'controls', onSubmit: (e) => this.handleControlSubmit(e) }, this.buttonNode(() => this.start(), 'meditate', 'sunny', 'solid', 'small'), index.h("input", { type: 'number', value: length / 60, onInput: (e) => this.handleControlValue(e) }), index.h("span", null, localeStrings.minutes))), index.h("div", { class: { 'hidden': !this.secondsRemaining } }, index.h("div", { class: 'progress-circle-container' }, index.h("div", { class: 'progress-circle', style: { background: `conic-gradient(${this.color} ${100 - progressPercent}%, 0, #ecf0f1 ${progressPercent}%)` } }, index.h("div", { class: 'circle-overlay' }, index.h("div", { class: 'seconds' }, this.minutesSeconds(this.secondsRemaining)), index.h("div", { class: 'controls' }, !this.started && this.buttonNode(() => this.start(), 'start', 'start'), this.started && !this.paused && this.buttonNode(() => this.pause(), 'pause', 'pause'), this.started && this.paused && this.buttonNode(() => this.resume(), 'resume', 'play'))))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "doc": ["docChanged"]
+  }; }
+};
+MeditationComponent.style = meditationCss;
+
+const option = "Option";
+const EN$2 = {
+	option: option
+};
+
+const optionCss = ".select-control.sc-ldf-option{margin-top:var(--ldf-select-control-margin-top)}ion-select.sc-ldf-option{width:75vw;max-width:300px}";
+
+const LOCALE$2 = {
+  'en': EN$2
+};
+const OptionComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfAddOptionToDoc = index.createEvent(this, "ldfAddOptionToDoc", 7);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+    this.ldfOptionAskForStoredSelection = index.createEvent(this, "ldfOptionAskForStoredSelection", 7);
+    this.ldfOptionMakeSelection = index.createEvent(this, "ldfOptionMakeSelection", 7);
+  }
+  docChanged(newDoc) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new option$1.Option(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new option$1.Option(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new option$1.Option();
+    }
+    const selected = this.editable
+      ? (_f = (_c = (_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.editor_selected) !== null && _c !== void 0 ? _c : (_e = (_d = this.obj) === null || _d === void 0 ? void 0 : _d.metadata) === null || _e === void 0 ? void 0 : _e.selected) !== null && _f !== void 0 ? _f : 0
+      : (_j = (_h = (_g = this.obj) === null || _g === void 0 ? void 0 : _g.metadata) === null || _h === void 0 ? void 0 : _h.selected) !== null && _j !== void 0 ? _j : 0;
+    this.select(selected);
+    if (!((_k = this.obj) === null || _k === void 0 ? void 0 : _k.value) || !this.obj.value[selected] || !this.obj.value[selected].value) {
+      this.selectFirstDefined();
+    }
+    this.filterOptions();
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+    this.ldfOptionAskForStoredSelection.emit({ el: this.el });
+  }
+  /** Asynchronously load localization strings */
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE$2[locale.getComponentClosestLanguage(this.el)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  /** Display the nth option */
+  async select(index, resultedFromUserAction = false) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (((_a = this.obj) === null || _a === void 0 ? void 0 : _a.slug) && typeof index === 'number' && resultedFromUserAction) {
+      this.ldfOptionMakeSelection.emit({ slug: (_b = this.obj) === null || _b === void 0 ? void 0 : _b.slug, index });
+    }
+    const hadMetadata = Boolean((_c = this.obj) === null || _c === void 0 ? void 0 : _c.metadata), oldValue = (_e = (_d = this.obj) === null || _d === void 0 ? void 0 : _d.metadata) === null || _e === void 0 ? void 0 : _e.editor_selected;
+    if (Number(index) >= 0) {
+      //this.selectedDoc = this.obj.value.filter(child => Boolean(child))[index];
+      if ((_f = this.obj) === null || _f === void 0 ? void 0 : _f.metadata) {
+        this.obj.metadata.selected = Number(index);
+        this.obj.metadata.editor_selected = Number(index);
+      }
+      else {
+        this.obj.metadata = { selected: Number(index), editor_selected: Number(index) };
+      }
+      this.obj = new option$1.Option(Object.assign({}, this.obj));
+      // only change the selection at this point if it's not editable
+      // if it's editable, the editor will control when it changes
+      if (resultedFromUserAction && !this.editable) {
+        this.ldfDocShouldChange.emit(new change.Change({
+          path: `${this.path}/metadata`,
+          op: [{
+              type: 'set',
+              index: 'selected',
+              oldValue,
+              value: Number(index)
+            }]
+        }));
+      }
+      if (this.editable) {
+        if (hadMetadata && index !== oldValue) {
+          this.ldfDocShouldChange.emit(new change.Change({
+            path: `${this.path}/metadata`,
+            op: [{
+                type: 'set',
+                index: 'editor_selected',
+                oldValue,
+                value: Number(index)
+              }]
+          }));
+        }
+        else if (!hadMetadata && index !== oldValue) {
+          this.ldfDocShouldChange.emit(new change.Change({
+            path: `${this.path}`,
+            op: [{
+                type: 'set',
+                index: 'metadata',
+                value: { editor_selected: Number(index) }
+              }]
+          }));
+        }
+      }
+      // sets metadata.selected to new index, and creates objects along the way if undefined
+      // without overriding any other metadata fields
+      Object.assign(this.obj, { metadata: Object.assign(Object.assign({}, this.obj.metadata), { selected: index }) });
+      Object.assign(this.obj, { metadata: Object.assign(Object.assign({}, this.obj.metadata), { editor_selected: index }) });
+    }
+    else if (index === 'add') {
+      this.ldfAddOptionToDoc.emit({
+        base: this.path,
+        index: (_h = (_g = this.obj) === null || _g === void 0 ? void 0 : _g.value) === null || _h === void 0 ? void 0 : _h.length,
+        obj: this.obj
+      });
+    }
+  }
+  // Private methods
+  onSelectChange(ev) {
+    const target = ev.target, value = parseInt(target.value);
+    this.select(value, true);
+  }
+  selectFirstDefined() {
+    const first = this.obj.value.find(opt => (opt === null || opt === void 0 ? void 0 : opt.value) !== undefined), index = this.obj.value.filter(child => Boolean(child)).indexOf(first);
+    this.select(index);
+  }
+  filterOptions() {
+    var _a;
+    if (this.obj) {
+      this.obj = new option$1.Option(Object.assign(Object.assign({}, this.obj), { value: (((_a = this.obj) === null || _a === void 0 ? void 0 : _a.value) || []).filter(entry => {
+          return this.editable || (Boolean(entry) && (Boolean(entry.value) || Boolean((entry === null || entry === void 0 ? void 0 : entry.type) === "bible-reading" && entry.citation)));
+        }) }));
+    }
+  }
+  // Render helpers
+  /** Return an Ionic Select or Segment element if available, otherwise a vanilla HTML Select Element */
+  selectNode() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const currentlySelected = this.editable ? (_f = (_c = (_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.editor_selected) !== null && _c !== void 0 ? _c : (_e = (_d = this.obj) === null || _d === void 0 ? void 0 : _d.metadata) === null || _e === void 0 ? void 0 : _e.selected) !== null && _f !== void 0 ? _f : 0 : (_j = (_h = (_g = this.obj) === null || _g === void 0 ? void 0 : _g.metadata) === null || _h === void 0 ? void 0 : _h.selected) !== null && _j !== void 0 ? _j : 0;
+    if (((_l = (_k = this.obj) === null || _k === void 0 ? void 0 : _k.value) === null || _l === void 0 ? void 0 : _l.length) > 1 || this.editable) {
+      // Ionic available and
+      if (customElements && !!customElements.get('ion-select')) {
+        const optionsAreLong = (((_m = this.obj) === null || _m === void 0 ? void 0 : _m.value) || [])
+          .map((option, optionIndex) => { var _a; return ((_a = this.versionLabel(option, optionIndex)) === null || _a === void 0 ? void 0 : _a.length) > 20; })
+          .reduce((a, b) => a || b, false);
+        // <= 3, short options
+        if (!optionsAreLong && ((_o = this.obj) === null || _o === void 0 ? void 0 : _o.value.length) <= 3) {
+          return (index.h("ion-segment", { color: "primary", value: currentlySelected.toString() }, (_p = this.obj) === null || _p === void 0 ? void 0 :
+            _p.value.map((option, optionIndex) => index.h("ion-segment-button", { value: optionIndex.toString(), onClick: () => this.select(optionIndex, true) }, index.h("ion-label", null, this.versionLabel(option, optionIndex)))), this.editable && index.h("ion-segment-button", { value: 'add', class: 'add', onClick: () => this.select('add', true) }, index.h("ion-label", null, "+"))));
+        }
+        // >2 options, or options are longish
+        else {
+          console.log('>2 or longish');
+          return (index.h("ion-toolbar", null, index.h("ion-select", { value: currentlySelected, slot: this.editable ? 'start' : 'end', onIonChange: e => this.select(Number(e.detail.value), true) }, (_q = this.obj) === null || _q === void 0 ? void 0 : _q.value.map((option, optionIndex) => index.h("ion-select-option", { value: optionIndex }, index.h("ion-label", null, this.versionLabel(option, optionIndex))))), this.editable && index.h("ion-buttons", { slot: 'end' }, index.h("ion-button", { onClick: () => this.select('add', true) }, index.h("ion-icon", { slot: 'icon-only', name: 'add' })))));
+        }
+      }
+      // Ionic not availabe
+      else {
+        return (index.h("ldf-label-bar", null, index.h("select", { onInput: ev => this.onSelectChange(ev), slot: this.editable ? 'start' : 'end' }, (_r = this.obj) === null || _r === void 0 ? void 0 : _r.value.map((option, optionIndex) => index.h("option", { value: optionIndex, selected: optionIndex == currentlySelected }, this.versionLabel(option, optionIndex)))), this.editable && index.h("button", { slot: 'end', onClick: () => this.select('add', true) }, "+")));
+      }
+    }
+    else {
+      return [];
+    }
+  }
+  versionLabel(option, index) {
+    try {
+      return this.obj.getVersionLabel(option);
+    }
+    catch (e) {
+      console.warn(e);
+      return `${(this.localeStrings || {}).option} ${index + 1}`;
+    }
+  }
+  // Render
+  render() {
+    var _a;
+    //console.log('ldf-option (render) ', this.obj?.metadata.selected, this.obj.value, this.selectedDoc)
+    const selectedIndex = this.editable ? (_a = this.obj.metadata.editor_selected) !== null && _a !== void 0 ? _a : this.obj.metadata.selected : this.obj.metadata.selected;
+    return (index.h(index.Host, { lang: this.obj.language }, index.h("div", { class: 'select-control' }, index.h("ldf-label-bar", null, this.selectNode())), (this.obj.value || this.editable) && index.h("ldf-liturgical-document", { doc: this.obj.value[selectedIndex], path: `${this.path}/value/${this.obj.metadata.selected}`, base: `${this.path}/value`, index: selectedIndex, editable: this.editable, parentType: 'option' })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "doc": ["docChanged"]
+  }; }
+};
+OptionComponent.style = optionCss;
+
+const changeCanticle = "Change Canticle";
+const citation$1 = "(Biblical) Citation";
+const label$1 = "Label";
+const latinname = "Latin Name";
+const section_break_insert = "+ insert section break";
+const section_break_remove = "x remove section break";
+const source$1 = "Source";
+const source_citation = "Citation";
+const EN$1 = {
+	changeCanticle: changeCanticle,
+	citation: citation$1,
+	label: label$1,
+	latinname: latinname,
+	section_break_insert: section_break_insert,
+	section_break_remove: section_break_remove,
+	source: source$1,
+	source_citation: source_citation
+};
+
+const psalmCss = "ldf-psalm.sc-ldf-psalm,.sc-ldf-psalm-h{font-family:var(--ldf-font-face);--ldf-drop-margin-right:var(--ldf-drop-psalm-margin-right)}ldf-psalm[lang=he].sc-ldf-psalm .verse.sc-ldf-psalm,[lang=he].sc-ldf-psalm-h .verse.sc-ldf-psalm{text-align:right;--ldf-drop-float:right}.psalm-set.sc-ldf-psalm{margin-top:0.5em;margin-bottom:0.5em}.psalm-set.sc-ldf-psalm .psalm.sc-ldf-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.sc-ldf-psalm .psalm.sc-ldf-psalm br.sc-ldf-psalm{display:var(--ldf-psalm-line-break-display)}.psalm-set.sc-ldf-psalm .psalm.sc-ldf-psalm sup.sc-ldf-psalm{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.sc-ldf-psalm .psalm.sc-ldf-psalm .text.sc-ldf-psalm{display:var(--ldf-psalm-text-display);grid-area:var(--ldf-psalm-text-grid-area)}.psalm-set.sc-ldf-psalm .psalm.sc-ldf-psalm .halfverse.sc-ldf-psalm{margin-left:var(--ldf-psalm-halfverse-margin-left)}.psalm-set.sc-ldf-psalm .psalm.sc-ldf-psalm .verse.sc-ldf-psalm,.psalm-set.sc-ldf-psalm .psalm.sc-ldf-psalm .halfverse.sc-ldf-psalm{display:var(--ldf-psalm-verse-display)}.psalm-set.sc-ldf-psalm .psalm.sc-ldf-psalm .halfverse.sc-ldf-psalm{display:var(--ldf-psalm-halfverse-display, var(--ldf-psalm-verse-display))}.editable.sc-ldf-psalm .verse.sc-ldf-psalm,.editable.sc-ldf-psalm .halfverse.sc-ldf-psalm{width:100%}.psalm-parent.no-numbers.sc-ldf-psalm{display:block;text-align:left;grid-template-columns:none;grid-template-rows:none;grid-template-areas:none}.psalm-parent.no-numbers.sc-ldf-psalm .psalm.sc-ldf-psalm{display:block;grid-template-columns:none;grid-template-rows:none;grid-template-areas:none}.psalm-parent.no-numbers.sc-ldf-psalm .psalm.sc-ldf-psalm .text.sc-ldf-psalm{text-align:left;grid-area:none;display:var(--ldf-psalm-text-display);width:100%}.psalm-set.sc-ldf-psalm .psalm.sc-ldf-psalm:nth-of-type(1) sup.sc-ldf-psalm{display:var(--ldf-psalm-set-first-verse-number-display)}.psalm-set.sc-ldf-psalm .psalm.sc-ldf-psalm:nth-of-type(1) .text.sc-ldf-psalm:nth-of-type(1) .verse.sc-ldf-psalm:nth-of-type(1){display:var(--ldf-psalm-set-first-verse-display)}.psalm-set.sc-ldf-psalm .psalm.sc-ldf-psalm:nth-of-type(1) .text.sc-ldf-psalm:nth-of-type(1) .halfverse.sc-ldf-psalm:nth-of-type(2){display:var(--ldf-psalm-set-first-half-verse-display, inline-block)}.psalm-set.sc-ldf-psalm:nth-of-type(1) .psalm.sc-ldf-psalm:nth-of-type(1) sup.sc-ldf-psalm{display:var(--ldf-psalm-first-verse-number-display)}.psalm-set.sc-ldf-psalm:nth-of-type(1) .psalm.sc-ldf-psalm:nth-of-type(1) .text.sc-ldf-psalm:nth-of-type(1) .verse.sc-ldf-psalm:nth-of-type(1){display:var(--ldf-psalm-first-verse-display)}.psalm-set.sc-ldf-psalm:nth-of-type(1) .psalm.sc-ldf-psalm:nth-of-type(1) .text.sc-ldf-psalm:nth-of-type(1) .halfverse.sc-ldf-psalm:nth-of-type(2){display:var(--ldf-psalm-first-half-verse-display, inline-block)}.antiphon.sc-ldf-psalm{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.sc-ldf-psalm{display:var(--ldf-psalm-repeat-antiphon-display)}h5.sc-ldf-psalm{font-size:1em;font-style:italic;font-weight:normal;margin-right:1em}.psalm.unison.sc-ldf-psalm .text.sc-ldf-psalm{font-weight:var(--ldf-unison-font-weight);font-style:var(--ldf-unison-font-style)}.psalm.omit.sc-ldf-psalm .text.sc-ldf-psalm{display:none}.psalm.wholeverse.sc-ldf-psalm .psalm.sc-ldf-psalm:nth-child(even),.psalm-parent.wholeverse.sc-ldf-psalm .psalm.sc-ldf-psalm:nth-child(even){font-weight:var(--ldf-response-font-weight);font-style:var(--ldf-response-font-style)}.psalm.halfverse.sc-ldf-psalm .halfverse.sc-ldf-psalm,.psalm-parent.halfverse.sc-ldf-psalm .halfverse.sc-ldf-psalm{font-weight:var(--ldf-response-font-weight);font-style:var(--ldf-response-font-style)}h3.editable-label.sc-ldf-psalm{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.sc-ldf-psalm{display:block;text-align:center;width:100%}.section-break.hidden.sc-ldf-psalm{display:none}";
+
+const LOCALE$1 = {
+  'en': EN$1,
+};
+const PsalmComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfAskForCanticleOptions = index.createEvent(this, "ldfAskForCanticleOptions", 7);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+    this.focusedVerse = undefined;
+    this.focusedSection = undefined;
+  }
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new rubric.Psalm(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new rubric.Psalm(newDoc);
+      }
+      this.filter();
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new rubric.Psalm();
+    }
+  }
+  // Lifecycle events
+  async componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+    this.filter();
+  }
+  // Private methods
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE$1[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  async changeCanticle() {
+    const modal = await overlays.modalController.create({
+      component: 'ldf-editable-filter-documents',
+    });
+    modal.componentProps = {
+      modal,
+      type: "canticle",
+      changeCallback: (doc) => {
+        this.ldfDocShouldChange.emit(new change.Change({
+          path: this.path,
+          op: [{
+              type: 'set',
+              oldValue: this.obj,
+              value: doc
+            }]
+        }));
+      }
+    };
+    await modal.present();
+    this.ldfAskForCanticleOptions.emit(this.path);
+  }
+  async filter() {
+    this.filteredValue = this.obj.filteredVerses();
+  }
+  // Render helpers
+  antiphonNode(antiphon, notEditable = false) {
+    var _a, _b;
+    if (typeof antiphon == 'string') {
+      const refrain$1 = new refrain.Refrain({ type: 'refrain', value: [antiphon], style: 'antiphon' });
+      return index.h("ldf-refrain", { class: 'antiphon', doc: refrain$1, editable: this.editable && !notEditable, path: `${this.path}/metadata/antiphon` });
+    }
+    else if (antiphon === null || antiphon === void 0 ? void 0 : antiphon.type) {
+      return index.h("ldf-liturgical-document", { class: 'antiphon', doc: antiphon, path: `${this.path}/metadata/antiphon`, editable: this.editable && !notEditable });
+    }
+    else if (typeof antiphon == 'object') {
+      // antiphon is something like an O antiphon tree:
+      // dates can be either MM/DD or MM-DD
+      // { '12/23': '...', '12/24': '...' }
+      const date = this.obj.day ? book$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);
+    }
+  }
+  gloriaNode(gloria) {
+    if (typeof gloria == 'string') {
+      const refrain$1 = new refrain.Refrain({ value: [gloria], style: 'gloria' });
+      return index.h("ldf-liturgical-document", { doc: refrain$1, editable: this.editable });
+    }
+    else {
+      return index.h("ldf-liturgical-document", { doc: gloria, editable: this.editable });
+    }
+  }
+  headingNode(value = undefined, level = 3, showLatinName = true, omitCitation = false, omitSource = false) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    let label = this.obj.label;
+    if (this.obj.style == 'canticle' && this.obj.metadata && this.obj.metadata.number && this.obj.metadata.localname) {
+      label = `${this.obj.metadata.number}. ${this.obj.metadata.localname}`;
+    }
+    else if (this.obj.style == 'canticle' && this.obj.metadata && this.obj.metadata.localname) {
+      label = this.obj.metadata.localname;
+    }
+    const heading = new heading$1.Heading({
+      type: 'heading',
+      metadata: { level },
+      citation: !omitCitation && ((_a = this.obj) === null || _a === void 0 ? void 0 : _a.citation) !== ((_b = this.obj) === null || _b === void 0 ? void 0 : _b.label) ? (_c = this.obj) === null || _c === void 0 ? void 0 : _c.citation : undefined,
+      value: [value !== null && value !== void 0 ? value : label],
+      source: omitSource ? undefined : (_d = this.obj) === null || _d === void 0 ? void 0 : _d.source
+    });
+    return (this.editable
+      ? [
+        index.h("ldf-label-bar", null, index.h("h3", { slot: "start", class: "editable-label" }, index.h("ldf-editable-text", { id: "label", text: (_e = this.obj) === null || _e === void 0 ? void 0 : _e.label, path: `${this.path}/label`, placeholder: (_f = this.localeStrings) === null || _f === void 0 ? void 0 : _f.label })), ((_g = this.obj) === null || _g === void 0 ? void 0 : _g.metadata) && index.h("ldf-editable-text", { id: "latinname", text: (_j = (_h = this.obj) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j.latinname, path: `${this.path}/metadata/latinname`, placeholder: (_k = this.localeStrings) === null || _k === void 0 ? void 0 : _k.latinname }), index.h("ldf-editable-text", { slot: "end", id: "source-source", text: (_m = (_l = this.obj) === null || _l === void 0 ? void 0 : _l.source) === null || _m === void 0 ? void 0 : _m.source, path: `${this.path}/source/source`, placeholder: (_o = this.localeStrings) === null || _o === void 0 ? void 0 : _o.source }), index.h("ldf-editable-text", { slot: "end", id: "source-citation", text: (_q = (_p = this.obj) === null || _p === void 0 ? void 0 : _p.source) === null || _q === void 0 ? void 0 : _q.citation, path: `${this.path}/source/citation`, placeholder: (_r = this.localeStrings) === null || _r === void 0 ? void 0 : _r.source_citation })),
+        index.h("ldf-label-bar", null, index.h("ldf-editable-text", { slot: "start", id: "citation", text: (_s = this.obj) === null || _s === void 0 ? void 0 : _s.citation, path: `${this.path}/citation`, placeholder: (_t = this.localeStrings) === null || _t === void 0 ? void 0 : _t.citation }))
+      ]
+      : index.h("ldf-heading", { doc: heading }, showLatinName && index.h("h5", { slot: 'additional' }, (_v = (_u = this.obj) === null || _u === void 0 ? void 0 : _u.metadata) === null || _v === void 0 ? void 0 : _v.latinname)));
+  }
+  insertSectionBreakAfterVerse(sectionIndex, verseIndex) {
+    const section = this.obj.value[sectionIndex], remainingVerses = section.value.slice(0, verseIndex + 1), movingVerses = section.value.slice(verseIndex + 1);
+    this.ldfDocShouldChange.emit(new change.Change({
+      path: `${this.path}/value/${sectionIndex}`,
+      op: [{
+          type: 'set',
+          oldValue: section,
+          value: Object.assign(Object.assign({}, section), { value: remainingVerses })
+        }]
+    }));
+    this.ldfDocShouldChange.emit(new change.Change({
+      path: `${this.path}/value`,
+      op: [{
+          type: 'insertAt',
+          index: sectionIndex + 1,
+          oldValue: section,
+          value: Object.assign(Object.assign({}, section), { value: movingVerses })
+        }]
+    }));
+  }
+  removeSectionBreakAfter(sectionIndex) {
+    const thisSection = this.obj.value[sectionIndex], nextSection = this.obj.value[sectionIndex + 1];
+    if (thisSection && nextSection) {
+      const combinedValue = thisSection.value.concat(nextSection.value);
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/value/${sectionIndex}/value`,
+        op: [{
+            type: 'set',
+            oldValue: thisSection.value,
+            value: combinedValue
+          }]
+      }));
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/value`,
+        op: [{
+            type: 'deleteAt',
+            index: sectionIndex + 1,
+            oldValue: nextSection
+          }]
+      }));
+    }
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    const includeAntiphon = this.obj.includeAntiphon();
+    // create blank psalm verse pattern
+    let pattern, templateMaker = (verse) => ({ type: 'psalm-verse', number: '', halfverse: '', verse });
+    if (this.editable) {
+      pattern = Object.assign({}, (((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.value[0]) === null || _b === void 0 ? void 0 : _b.value[0]) || { type: 'psalm-verse', number: '', halfverse: '', verse: '' }));
+      if (pattern.number) {
+        pattern.number = '';
+      }
+      if (pattern.halfverse) {
+        pattern.halfverse = '';
+      }
+      if (pattern.verse) {
+        pattern.verse = '';
+      }
+    }
+    const noNumbers = (((_c = this.obj) === null || _c === void 0 ? void 0 : _c.value) || [])
+      .map(section => section.value.map(verse => !Boolean(verse.number)))
+      .flat()
+      .reduce((a, b) => a || b, false);
+    const localeStrings = this.localeStrings || {};
+    return (index.h(index.Host, { lang: ((_d = this.obj) === null || _d === void 0 ? void 0 : _d.language) || 'en' }, index.h("div", { class: `psalm-parent ${this.editable ? 'editable' : ''} ${((_e = this.obj) === null || _e === void 0 ? void 0 : _e.display_format) || 'default'} ${noNumbers ? 'no-numbers' : ''}` }, (this.editable || ((_f = this.obj) === null || _f === void 0 ? void 0 : _f.style) === 'canticle') && index.h("ldf-label-bar", null, index.h("slot", { slot: 'end', name: 'controls' }, ((_g = this.obj) === null || _g === void 0 ? void 0 : _g.style) === 'canticle' && ((_j = (_h = this.obj) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j.changeable) && index.h("ldf-label-bar", null, index.h("slot", { slot: 'end', name: 'controls' }, index.h("ion-buttons", null, index.h("ion-button", { onClick: () => this.changeCanticle() }, index.h("ion-icon", { name: "swap-horizontal", slot: "start" }), index.h("ion-label", null, localeStrings.changeCanticle))))))), this.headingNode(), includeAntiphon && this.antiphonNode(this.obj.metadata.antiphon), (_k = this.filteredValue) === null || _k === void 0 ? void 0 :
+      _k.map((section, sectionIndex) => {
+        var _a, _b, _c;
+        return [
+          // render a `Heading`, if this section has a `label`
+          section.label && ((_a = section.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.headingNode(section.label, 4, false, true, true),
+          // build a set of verses
+          index.h("div", { class: 'psalm-set' }, section.value.map((verse, verseIndex) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            // build each verse
+            if (verse instanceof heading$1.Heading) {
+              // for e.g., the Benedicite, Heading passed at head of section
+              return index.h("ldf-heading", { doc: verse });
+            }
+            else {
+              // otherwise, it's a normal psalm verse
+              const nodes = new Array();
+              // 1st half of verse
+              nodes.push(index.h("div", { class: 'verse' }, this.editable ?
+                index.h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${sectionIndex}-${verseIndex}-verse`, text: verse.verse, path: `${this.path}/value/${sectionIndex}/value/${verseIndex}/verse`, placeholder: 'Lorem ipsum sit dolor amet, *', template: pattern, templateMaker: templateMaker }) :
+                index.h("ldf-string", { text: verse.verse, citation: { label: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.label, book: ((_b = this.obj) === null || _b === void 0 ? void 0 : _b.style) === 'psalm' ? 'Psalm' : undefined, chapter: (_d = (_c = this.obj) === null || _c === void 0 ? void 0 : _c.metadata) === null || _d === void 0 ? void 0 : _d.number, verse: verse.number }, dropcap: (verseIndex == 0 && ((_e = this.obj) === null || _e === void 0 ? void 0 : _e.language) !== "he") ? 'force' : 'disabled', index: verseIndex, fragment: this.path })));
+              nodes.push(index.h("br", null));
+              // 2nd half of verse
+              nodes.push(index.h("div", { class: 'halfverse' }, this.editable ?
+                index.h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${sectionIndex}-${verseIndex}-halfverse`, text: verse.halfverse, path: `${this.path}/value/${sectionIndex}/value/${verseIndex}/halfverse`, placeholder: 'consectetur adipiscing elit.', template: pattern }) :
+                index.h("ldf-string", { text: verse.halfverse, citation: { label: (_f = this.obj) === null || _f === void 0 ? void 0 : _f.label, book: ((_g = this.obj) === null || _g === void 0 ? void 0 : _g.style) === 'psalm' ? 'Psalm' : undefined, chapter: (_j = (_h = this.obj) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j.number, verse: verse.number }, dropcap: 'disabled', fragment: this.path })));
+              // render the verse
+              return (index.h("p", { class: this.editable ? 'psalm editable' : 'psalm', onClick: () => {
+                  this.focusedVerse = verseIndex;
+                  this.focusedSection = sectionIndex;
+                } }, this.editable ?
+                index.h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${sectionIndex}-${verseIndex}-number`, text: verse.number, path: `${this.path}/value/${sectionIndex}/value/${verseIndex}/number`, placeholder: '#', template: pattern }) :
+                (verse.number && index.h("sup", null, verse.number)), index.h("div", { class: 'text' }, nodes, this.editable && index.h("ion-button", { fill: "clear", class: { "section-break": true, "hidden": this.focusedVerse !== verseIndex || this.focusedSection !== sectionIndex }, onClick: () => this.insertSectionBreakAfterVerse(sectionIndex, verseIndex) }, localeStrings.section_break_insert))));
+            }
+          }), this.obj.repeatAntiphon(sectionIndex, this.filteredValue.length)
+            && index.h("div", { class: 'repeat-antiphon' }, this.antiphonNode((_c = (_b = this.obj) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.antiphon)), this.editable && this.obj.value.length > (sectionIndex + 1) && index.h("ion-button", { fill: "clear", class: "section-break", onClick: () => this.removeSectionBreakAfter(sectionIndex) }, localeStrings.section_break_remove))
+        ];
+      }), ((_m = (_l = this.obj) === null || _l === void 0 ? void 0 : _l.metadata) === null || _m === void 0 ? void 0 : _m.gloria) && !this.obj.metadata.omit_gloria && this.gloriaNode(this.obj.metadata.gloria), ((((_p = (_o = this.obj) === null || _o === void 0 ? void 0 : _o.metadata) === null || _p === void 0 ? void 0 : _p.gloria) && !this.obj.metadata.omit_gloria) || (((_r = (_q = this.obj) === null || _q === void 0 ? void 0 : _q.metadata) === null || _r === void 0 ? void 0 : _r.gloria) === undefined || Boolean((_t = (_s = this.obj) === null || _s === void 0 ? void 0 : _s.metadata) === null || _t === void 0 ? void 0 : _t.omit_gloria))) && includeAntiphon && this.antiphonNode((_v = (_u = this.obj) === null || _u === void 0 ? void 0 : _u.metadata) === null || _v === void 0 ? void 0 : _v.antiphon))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "doc": ["docChanged"]
+  }; }
+};
+PsalmComponent.style = psalmCss;
+
+const refrainCss = "ldf-refrain.sc-ldf-refrain,.sc-ldf-refrain-h{font-family:var(--ldf-font-face);display:block}ldf-refrain.sc-ldf-refrain p.sc-ldf-refrain,.sc-ldf-refrain-h p.sc-ldf-refrain{font-style:inherit;margin-bottom:0;margin:0}.antiphon.sc-ldf-refrain{font-style:var(--ldf-antiphon-font-style)}.gloria.sc-ldf-refrain{margin-left:calc(var(--ldf-gloria-indent) / 2);text-indent:calc(var(--ldf-gloria-indent) / -2)}@media (min-width: 450px){.gloria.sc-ldf-refrain{margin-left:var(--ldf-gloria-indent);text-indent:calc(var(--ldf-gloria-indent) * -1)}.gloria.sc-ldf-refrain>p.sc-ldf-refrain:first-child{margin-left:0em}.gloria.sc-ldf-refrain>p.sc-ldf-refrain:nth-child(even){margin-left:1em}}.left.sc-ldf-refrain{text-align:left}.center.sc-ldf-refrain{text-align:center}.right.sc-ldf-refrain{text-align:right}";
+
+const RefrainComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new refrain.Refrain(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new refrain.Refrain(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new refrain.Refrain();
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.docChanged(this.doc);
+  }
+  // Render
+  render() {
+    var _a, _b, _c;
+    return (index.h(index.Host, { lang: this.obj.language }, this.editable && index.h("ldf-label-bar", null, index.h("slot", { slot: 'end', name: 'controls' })), index.h("div", { class: `${((_a = this.obj) === null || _a === void 0 ? void 0 : _a.style) || ''} ${((_c = (_b = this.obj) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.align) || ''}` }, this.obj.value && this.obj.value.map((para, ii) => this.editable ?
+      index.h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${ii}`, text: para, path: `${this.path}/value/${ii}` }) :
+      index.h("p", { id: `${this.obj.uid || this.obj.slug}-${ii}`, innerHTML: para })))));
+  }
+  static get watchers() { return {
+    "doc": ["docChanged"]
+  }; }
+};
+RefrainComponent.style = refrainCss;
+
+const label = "Label";
+const source = "Source";
+const citation = "Citation";
+const makeOptional = "Make Optional";
+const optional = "Optional";
+const EN = {
+	label: label,
+	source: source,
+	citation: citation,
+	makeOptional: makeOptional,
+	optional: optional
+};
+
+const responsivePrayerCss = ".sc-ldf-responsive-prayer-h{text-align:var(--ldf-text-align);text-justify:inter-character}.response.sc-ldf-responsive-prayer{font-weight:var(--ldf-response-font-weight);font-style:var(--ldf-response-font-style)}.preces.sc-ldf-responsive-prayer td.sc-ldf-responsive-prayer{text-align:left}.preces.sc-ldf-responsive-prayer td.sc-ldf-responsive-prayer:first-child{font-style:italic;text-align:left;padding-right:1em;vertical-align:top}.optional.sc-ldf-responsive-prayer{padding-left:0.5em;border-left:2px solid black}.line.sc-ldf-responsive-prayer{display:flex;flex-direction:row;align-items:center}.line.sc-ldf-responsive-prayer>*.sc-ldf-responsive-prayer{text-align:var(--ldf-text-align)}.editable.line.sc-ldf-responsive-prayer ldf-editable-boolean.sc-ldf-responsive-prayer{width:2em}.editable.line.sc-ldf-responsive-prayer p.sc-ldf-responsive-prayer{width:calc(100% - 2em)}.rubric.sc-ldf-responsive-prayer{font-family:var(--ldf-font-face);color:var(--ldf-rubric-color);font-style:var(--ldf-rubric-font-style);font-weight:var(--ldf-rubric-font-weight);font-size:var(--ldf-rubric-font-size)}.litany.sc-ldf-responsive-prayer{white-space:pre-wrap}.preces.sc-ldf-responsive-prayer{width:100%}.preces.sc-ldf-responsive-prayer tr.sc-ldf-responsive-prayer,.preces.sc-ldf-responsive-prayer .row.sc-ldf-responsive-prayer{display:table-row;display:var(--ldf-preces-tr-display)}.preces.sc-ldf-responsive-prayer tr.sc-ldf-responsive-prayer td.sc-ldf-responsive-prayer,.preces.sc-ldf-responsive-prayer tr.sc-ldf-responsive-prayer .cell.sc-ldf-responsive-prayer,.preces.sc-ldf-responsive-prayer .row.sc-ldf-responsive-prayer td.sc-ldf-responsive-prayer,.preces.sc-ldf-responsive-prayer .row.sc-ldf-responsive-prayer .cell.sc-ldf-responsive-prayer{display:table-cell;display:var(--ldf-preces-td-display);margin-left:var(--ldf-preces-td-margin-left)}h3.editable-label.sc-ldf-responsive-prayer{text-align:var(--ldf-h3-text-align);font-weight:var(--ldf-h3-font-weight);font-style:var(--ldf-h3-font-style);font-variant:var(--ldf-h3-font-variant);font-size:var(--ldf-h3-font-size);text-transform:var(--ldf-h3-text-transform)}.optional-label.sc-ldf-responsive-prayer{margin-right:0.5em}";
+
+const LOCALE = {
+  'en': EN,
+};
+const ResponsivePrayerComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new rubric.ResponsivePrayer(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new rubric.ResponsivePrayer(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new rubric.ResponsivePrayer();
+    }
+  }
+  // Lifecycle events
+  async componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  // Render helpers
+  /** renders a `ResponsivePrayerLine` as an `ldf-editable-text` */
+  editableNode(line, index$1, part, template = undefined, templateMaker) {
+    return (index.h("ldf-editable-text", { id: `${this.obj.uid}-${index$1}-${part}`, text: line[part], path: `${this.path}/value/${index$1}/${part}`, template: template, templateMaker: templateMaker }));
+  }
+  /** renders a `ResponsivePrayerLine` as an `ldf-string` */
+  stringNode(line, index$1, part) {
+    return (index.h("ldf-string", { citation: { label: this.obj.label }, id: `${this.obj.uid}-${index$1}-${part}`, text: line[part], dropcap: index$1 == 0 ? "enabled" : "disabled", fragment: this.path }));
+  }
+  // Render the `response` in a litany, and handle `[Silence]` value
+  litanyResponseStringNode(line, index$1) {
+    const text = line.response || this.obj.metadata.response;
+    if (text == '[Silence]') {
+      return (index.h("span", { class: 'rubric' }, index.h("br", null), "Silence"));
+    }
+    else {
+      return (index.h("span", { class: 'response' }, index.h("ldf-string", { citation: { label: this.obj.label }, id: `${this.obj.uid}-${index$1}-response`, text: text, fragment: this.path })));
+    }
+  }
+  editableHeader() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return index.h("ldf-label-bar", null, index.h("h3", { slot: "start", class: "editable-label" }, index.h("ldf-editable-text", { id: "label", text: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.label, path: `${this.path}/label`, placeholder: (_b = this.localeStrings) === null || _b === void 0 ? void 0 : _b.label })), index.h("ldf-editable-text", { slot: "end", id: "source-source", text: (_d = (_c = this.obj) === null || _c === void 0 ? void 0 : _c.source) === null || _d === void 0 ? void 0 : _d.source, path: `${this.path}/source/source`, placeholder: (_e = this.localeStrings) === null || _e === void 0 ? void 0 : _e.source }), index.h("ldf-editable-text", { slot: "end", id: "source-citation", text: (_g = (_f = this.obj) === null || _f === void 0 ? void 0 : _f.source) === null || _g === void 0 ? void 0 : _g.citation, path: `${this.path}/source/citation`, placeholder: (_h = this.localeStrings) === null || _h === void 0 ? void 0 : _h.citation }));
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e;
+    const needsHeader = ((_a = this.obj) === null || _a === void 0 ? void 0 : _a.label) || ((_b = this.obj) === null || _b === void 0 ? void 0 : _b.citation) || ((_c = this.obj) === null || _c === void 0 ? void 0 : _c.source);
+    if (this.obj.style == 'preces') {
+      /* `preces` type returns a table like
+       *    V.  O Lord, open our lips.
+       *    R.  And our mouth shall proclaim thy praise. */
+      const template = { label: '', text: '' }, templateMaker = (text) => ({ label: '', text });
+      return (index.h(index.Host, { class: this.obj.style, lang: this.obj.language }, index.h("ldf-label-bar", null, index.h("slot", { slot: 'end', name: 'controls' })), !this.editable && needsHeader && index.h("ldf-heading", { doc: new heading$1.Heading({ type: 'heading', metadata: { level: 3 }, value: [this.obj.label], citation: this.obj.citation, source: this.obj.source }) }), this.editable && needsHeader && this.editableHeader(), index.h("table", { class: "preces" }, this.obj.value.map((line, index$1) => index.h("tr", { class: "row" }, index.h("td", { class: "cell" }, this.editable ? this.editableNode(line, index$1, 'label', template, templateMaker) : this.stringNode(line, index$1, 'label')), index.h("td", { class: index$1 % 2 == 0 ? 'cell' : 'cell response' }, this.editable ? this.editableNode(line, index$1, 'text', template, templateMaker) : this.stringNode(line, index$1, 'text')))))));
+    }
+    else if (this.obj.style == 'litany') {
+      /* `litany`type returns prayers and responses with a break between each pair, like
+       *    That this evening may be holy, good, and peaceful,
+       *    We entreat you, O Lord.
+       *
+       *    That your holy angels may lead us in paths of peace and goodwill,
+       *    We entreat you, O Lord. */
+      const template = { text: '', response: ((_d = this.obj.metadata) === null || _d === void 0 ? void 0 : _d.response) || '' }, templateMaker = (text) => { var _a; return ({ text, response: ((_a = this.obj.metadata) === null || _a === void 0 ? void 0 : _a.response) || '' }); };
+      return (index.h(index.Host, { class: this.obj.style, lang: this.obj.language }, this.editable && index.h("ldf-label-bar", null, index.h("slot", { slot: 'end', name: 'controls' })), !this.editable && needsHeader && index.h("ldf-heading", { doc: new heading$1.Heading({ type: 'heading', metadata: { level: 3 }, value: [this.obj.label], citation: this.obj.citation, source: this.obj.source }) }), this.editable && needsHeader && this.editableHeader(), this.obj.value.map((line, index$1) => {
+        var _a, _b;
+        // Classes depending on style and whether this line is optional
+        let classes = new Array('litany');
+        if (line.optional) {
+          classes.push('optional');
+        }
+        // Render the line
+        return index.h("div", { class: { "line": true, "editable": this.editable } }, index.h("p", { class: classes.join(' ') }, this.editable
+          ? this.editableNode(line, index$1, 'text', template, templateMaker)
+          : this.stringNode(line, index$1, 'text'), line.response && (this.editable ?
+          index.h("span", { class: 'response' }, this.editableNode(line, index$1, 'response', template, templateMaker)) :
+          [index.h("br", null), this.litanyResponseStringNode(line, index$1)]), (!line.response && ((_a = this.obj.metadata) === null || _a === void 0 ? void 0 : _a.response)) && (this.editable ?
+          index.h("span", { class: 'response' }, index.h("ldf-editable-text", { id: `${this.obj.uid}-${index$1}-response`, text: this.obj.metadata.response, path: `${this.path}/response` })) :
+          [index.h("br", null), this.litanyResponseStringNode(line, index$1)])), this.editable && index.h("label", { class: "optional-label", htmlFor: `optional-${index$1}` }, (_b = this.localeStrings) === null || _b === void 0 ? void 0 : _b.optional), this.editable && index.h("ldf-editable-boolean", { id: `optional-${index$1}`, slot: "start", path: `${this.path}/value/${index$1}/optional`, value: line.optional }));
+      })));
+    }
+    else {
+      /* `responsive` type returns alternating lines like
+       *    Lord, hear our prayer.
+       *    And let our cry come to you.
+       *    Let us pray. */
+      const template = { text: '', response: ((_e = this.obj.metadata) === null || _e === void 0 ? void 0 : _e.response) || '' }, templateMaker = (text) => { var _a; return ({ text, response: ((_a = this.obj.metadata) === null || _a === void 0 ? void 0 : _a.response) || '' }); };
+      return (index.h(index.Host, { class: this.obj.style, lang: this.obj.language }, !this.editableHeader && needsHeader && index.h("ldf-heading", { doc: new heading$1.Heading({ type: 'heading', metadata: { level: 3 }, value: [this.obj.label], citation: this.obj.citation, source: this.obj.source }) }), this.editable && needsHeader && this.editableHeader(), index.h("p", { class: 'responsive' }, this.obj.value.map((line, index$1) => [
+        this.editable ?
+          index.h("div", null, this.editableNode(line, index$1, 'text', template, templateMaker)) :
+          index.h("div", null, this.stringNode(line, index$1, 'text')),
+        this.editable ?
+          index.h("div", { class: 'response' }, this.editableNode(line, index$1, 'response', template, templateMaker)) :
+          index.h("div", { class: 'response' }, this.stringNode(line, index$1, 'response'))
+      ]))));
+    }
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "doc": ["docChanged"]
+  }; }
+};
+ResponsivePrayerComponent.style = responsivePrayerCss;
+
+const rubricCss = ".sc-ldf-rubric-h{font-family:var(--ldf-font-face);color:var(--ldf-rubric-color);font-style:var(--ldf-rubric-font-style);font-weight:var(--ldf-rubric-font-weight);font-size:var(--ldf-rubric-font-size);text-align:var(--ldf-text-align);text-justify:inter-character}";
+
+const RubricComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new rubric.Rubric(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new rubric.Rubric(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new rubric.Rubric();
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.docChanged(this.doc);
+  }
+  // Render
+  render() {
+    return (index.h(index.Host, { lang: this.obj.language }, this.editable && index.h("ldf-label-bar", null, index.h("slot", { slot: 'end', name: 'controls' })), this.obj.value.map((para, ii) => this.editable ?
+      index.h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${ii}`, text: para, path: `${this.path}/value/${ii}` }) :
+      index.h("p", { id: `${this.obj.uid || this.obj.slug}-${ii}`, class: 'rubric' }, para))));
+  }
+  static get watchers() { return {
+    "doc": ["docChanged"]
+  }; }
+};
+RubricComponent.style = rubricCss;
+
+exports.ion_segment = Segment;
+exports.ion_segment_button = SegmentButton;
+exports.ion_skeleton_text = SkeletonText;
+exports.ldf_bible_reading = BibleReadingComponent;
+exports.ldf_editable_add_block = EditableAddBlockComponent;
+exports.ldf_editable_metadata_buttons = EditableMetadataButtonsComponent;
+exports.ldf_editable_select = EditableSelectComponent;
+exports.ldf_image = ImageComponent;
+exports.ldf_liturgical_document = LiturgicalDocumentComponent;
+exports.ldf_liturgy = LiturgyComponent;
+exports.ldf_meditation = MeditationComponent;
+exports.ldf_option = OptionComponent;
+exports.ldf_psalm = PsalmComponent;
+exports.ldf_refrain = RefrainComponent;
+exports.ldf_responsive_prayer = ResponsivePrayerComponent;
+exports.ldf_rubric = RubricComponent;