@venite/components 0.16.7 → 0.16.13

package/dist/cjs/ion-card-content_6.cjs.entry.js

@@ -0,0 +1,405 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+const theme = require('./theme-81caa5b0.js');
+const overlays = require('./overlays-eb464d6d.js');
+require('./book-1a92678a.js');
+const refrain = require('./refrain-91fb446b.js');
+const change = require('./change-cdb1e8c0.js');
+const locale = require('./locale-d4e925b1.js');
+require('./hardware-back-button-8c2f48d2.js');
+
+const cardContentIosCss = "ion-card-content{display:block;position:relative}.card-content-ios{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;font-size:16px;line-height:1.4}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.card-content-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}.card-content-ios h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content-ios h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content-ios h3,.card-content-ios h4,.card-content-ios h5,.card-content-ios h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content-ios p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px}ion-card-header+.card-content-ios{padding-top:0}";
+
+const cardContentMdCss = "ion-card-content{display:block;position:relative}.card-content-md{padding-left:16px;padding-right:16px;padding-top:13px;padding-bottom:13px;font-size:14px;line-height:1.5}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.card-content-md{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.card-content-md h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.card-content-md h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.card-content-md h3,.card-content-md h4,.card-content-md h5,.card-content-md h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal}.card-content-md p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;font-weight:normal;line-height:1.5}ion-card-header+.card-content-md{padding-top:0}";
+
+const CardContent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: {
+        [mode]: true,
+        // Used internally for styling
+        [`card-content-${mode}`]: true
+      } }));
+  }
+};
+CardContent.style = {
+  ios: cardContentIosCss,
+  md: cardContentMdCss
+};
+
+const cardTitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-text-color, #000);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:28px;font-weight:700;line-height:1.2}";
+
+const cardTitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-850, #262626);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:20px;font-weight:500;line-height:1.2}";
+
+const CardTitle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { role: "heading", "aria-level": "2", class: Object.assign(Object.assign({}, theme.createColorClasses(this.color)), { 'ion-inherit-color': true, [mode]: true }) }, index.h("slot", null)));
+  }
+};
+CardTitle.style = {
+  ios: cardTitleIosCss,
+  md: cardTitleMdCss
+};
+
+const SIZE_TO_MEDIA = {
+    'xs': '(min-width: 0px)',
+    'sm': '(min-width: 576px)',
+    'md': '(min-width: 768px)',
+    'lg': '(min-width: 992px)',
+    'xl': '(min-width: 1200px)',
+};
+// Check if the window matches the media query
+// at the breakpoint passed
+// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px
+const matchBreakpoint = (breakpoint) => {
+    if (breakpoint === undefined || breakpoint === '') {
+        return true;
+    }
+    if (window.matchMedia) {
+        const mediaQuery = SIZE_TO_MEDIA[breakpoint];
+        return window.matchMedia(mediaQuery).matches;
+    }
+    return false;
+};
+
+const colCss = ":host{padding-left:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;box-sizing:border-box;position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px))}}@media (min-width: 576px){:host{padding-left:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 768px){:host{padding-left:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 992px){:host{padding-left:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}}@media (min-width: 1200px){:host{padding-left:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-right:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}}";
+
+const win = window;
+const SUPPORTS_VARS = !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
+const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
+const Col = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  onResize() {
+    index.forceUpdate(this);
+  }
+  // Loop through all of the breakpoints to see if the media query
+  // matches and grab the column value from the relevant prop if so
+  getColumns(property) {
+    let matched;
+    for (const breakpoint of BREAKPOINTS) {
+      const matches = matchBreakpoint(breakpoint);
+      // Grab the value of the property, if it exists and our
+      // media query matches we return the value
+      const columns = this[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
+      if (matches && columns !== undefined) {
+        matched = columns;
+      }
+    }
+    // Return the last matched columns since the breakpoints
+    // increase in size and we want to return the largest match
+    return matched;
+  }
+  calculateSize() {
+    const columns = this.getColumns('size');
+    // If size wasn't set for any breakpoint
+    // or if the user set the size without a value
+    // it means we need to stick with the default and return
+    // e.g. <ion-col size-md>
+    if (!columns || columns === '') {
+      return;
+    }
+    // If the size is set to auto then don't calculate a size
+    const colSize = (columns === 'auto')
+      ? 'auto'
+      // If CSS supports variables we should use the grid columns var
+      : SUPPORTS_VARS ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+        // Convert the columns to a percentage by dividing by the total number
+        // of columns (12) and then multiplying by 100
+        : ((columns / 12) * 100) + '%';
+    return {
+      'flex': `0 0 ${colSize}`,
+      'width': `${colSize}`,
+      'max-width': `${colSize}`
+    };
+  }
+  // Called by push, pull, and offset since they use the same calculations
+  calculatePosition(property, modifier) {
+    const columns = this.getColumns(property);
+    if (!columns) {
+      return;
+    }
+    // If the number of columns passed are greater than 0 and less than
+    // 12 we can position the column, else default to auto
+    const amount = SUPPORTS_VARS
+      // If CSS supports variables we should use the grid columns var
+      ? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
+      // Convert the columns to a percentage by dividing by the total number
+      // of columns (12) and then multiplying by 100
+      : (columns > 0 && columns < 12) ? (columns / 12 * 100) + '%' : 'auto';
+    return {
+      [modifier]: amount
+    };
+  }
+  calculateOffset(isRTL) {
+    return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
+  }
+  calculatePull(isRTL) {
+    return this.calculatePosition('pull', isRTL ? 'left' : 'right');
+  }
+  calculatePush(isRTL) {
+    return this.calculatePosition('push', isRTL ? 'right' : 'left');
+  }
+  render() {
+    const isRTL = document.dir === 'rtl';
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: {
+        [mode]: true
+      }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, index.h("slot", null)));
+  }
+};
+Col.style = colCss;
+
+const gridCss = ":host{padding-left:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-right:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));margin-left:auto;margin-right:auto;display:block;flex:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px))}}@media (min-width: 576px){:host{padding-left:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-right:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px))}}}@media (min-width: 768px){:host{padding-left:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-right:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px))}}}@media (min-width: 992px){:host{padding-left:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-right:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px))}}}@media (min-width: 1200px){:host{padding-left:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-right:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px))}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px))}}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host(.grid-fixed){width:var(--ion-grid-width-xs, var(--ion-grid-width, 100%));max-width:100%}@media (min-width: 576px){:host(.grid-fixed){width:var(--ion-grid-width-sm, var(--ion-grid-width, 540px))}}@media (min-width: 768px){:host(.grid-fixed){width:var(--ion-grid-width-md, var(--ion-grid-width, 720px))}}@media (min-width: 992px){:host(.grid-fixed){width:var(--ion-grid-width-lg, var(--ion-grid-width, 960px))}}@media (min-width: 1200px){:host(.grid-fixed){width:var(--ion-grid-width-xl, var(--ion-grid-width, 1140px))}}:host(.ion-no-padding){--ion-grid-column-padding:0;--ion-grid-column-padding-xs:0;--ion-grid-column-padding-sm:0;--ion-grid-column-padding-md:0;--ion-grid-column-padding-lg:0;--ion-grid-column-padding-xl:0}";
+
+const Grid = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * If `true`, the grid will have a fixed width based on the screen size.
+     */
+    this.fixed = false;
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: {
+        [mode]: true,
+        'grid-fixed': this.fixed
+      } }, index.h("slot", null)));
+  }
+};
+Grid.style = gridCss;
+
+const rowCss = ":host{display:flex;flex-wrap:wrap}";
+
+const Row = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { class: ionicGlobal.getIonMode(this) }, index.h("slot", null)));
+  }
+};
+Row.style = rowCss;
+
+const antiphon = "Antiphon";
+const omit = "Omit Antiphon";
+const insert = "Insert Seasonal Antiphon";
+const text = "Text";
+const table = "Table";
+const add_table_value_header = "Add Antiphon for Date";
+const add_table_value_message = "What date should the antiphon appear? (MM-DD)";
+const cancel = "Cancel";
+const ok = "Okay";
+const EN = {
+	antiphon: antiphon,
+	omit: omit,
+	insert: insert,
+	text: text,
+	table: table,
+	add_table_value_header: add_table_value_header,
+	add_table_value_message: add_table_value_message,
+	cancel: cancel,
+	ok: ok
+};
+
+const ldfEditableAntiphonFieldCss = "ion-grid.sc-ldf-editable-antiphon-field{width:100%}ldf-liturgical-document.sc-ldf-editable-antiphon-field{width:100%}";
+
+const LOCALE = {
+  'en': EN
+};
+const EditableStringOrAntiphon = ({ mode, path, value }) => index.h("ion-item", { lines: "none" }, mode === 'string' && index.h("ldf-editable-text", { path: path, short: true, text: value.toString() }), mode === 'refrain' && index.h("ldf-liturgical-document", { path: path, doc: value, editable: true }));
+const EditableAntiphonFieldComponent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ldfDocShouldChange = index.createEvent(this, "ldfDocShouldChange", 7);
+    this.mode = 'default';
+  }
+  antiphonChange() {
+    this.currentAntiphon = this.antiphon;
+    this.setMode();
+  }
+  omitAntiphonChange() {
+    this.currentOmitAntiphon = this.omit_antiphon;
+  }
+  insertAntiphonChange() {
+    this.currentInsertAntiphon = this.insert_antiphon;
+  }
+  componentWillLoad() {
+    this.loadLocaleStrings();
+    this.currentAntiphon = this.antiphon;
+    this.currentOmitAntiphon = this.omit_antiphon;
+    this.currentInsertAntiphon = this.insert_antiphon;
+    this.setMode();
+  }
+  setMode() {
+    var _a;
+    if (this.currentAntiphon == undefined) {
+      this.mode = 'default';
+    }
+    else if (typeof this.currentAntiphon === 'string') {
+      this.mode = 'string';
+    }
+    else if (((_a = this.currentAntiphon) === null || _a === void 0 ? void 0 : _a.type) === 'refrain') {
+      this.mode = 'refrain';
+    }
+    else if (typeof this.currentAntiphon === 'object') {
+      this.mode = 'table';
+    }
+    else {
+      console.warn(`[ldf-editable-antiphon-field] invalid antiphon field at path ${this.path}/metadata/antiphon: ${JSON.stringify(this.currentAntiphon)}`);
+    }
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[locale.getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  setValue(newValue, omit, insert) {
+    this.ldfDocShouldChange.emit(new change.Change({
+      path: `${this.path}/metadata/antiphon`,
+      op: [{
+          type: 'set',
+          oldValue: this.currentAntiphon,
+          value: newValue
+        }]
+    }));
+    this.currentAntiphon = newValue;
+    this.setMode();
+    if (this.currentOmitAntiphon !== omit) {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/metadata/omit_antiphon`,
+        op: [{
+            type: 'set',
+            oldValue: this.currentOmitAntiphon,
+            value: omit
+          }]
+      }));
+      this.currentOmitAntiphon = omit;
+    }
+    if (this.currentInsertAntiphon !== insert) {
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/metadata/insert_antiphon`,
+        op: [{
+            type: 'set',
+            oldValue: this.currentInsertAntiphon,
+            value: insert
+          }]
+      }));
+      this.currentInsertAntiphon = insert;
+    }
+  }
+  async addTableValue() {
+    const alert = await overlays.alertController.create({
+      header: this.localeStrings.add_table_value_header,
+      message: this.localeStrings.add_table_value_message,
+      inputs: [
+        {
+          name: 'mmdd',
+          type: 'text',
+          placeholder: 'MM/DD'
+        }
+      ],
+      buttons: [
+        {
+          text: this.localeStrings.cancel,
+          role: 'cancel',
+          cssClass: 'secondary'
+        },
+        {
+          text: this.localeStrings.ok,
+          handler: ({ mmdd }) => {
+            if (typeof this.currentAntiphon === 'object') {
+              const oldValue = this.currentAntiphon[mmdd];
+              this.currentAntiphon[mmdd] = '';
+              this.ldfDocShouldChange.emit(new change.Change({
+                path: `${this.path}/metadata/antiphon`,
+                op: [{
+                    type: 'set',
+                    index: mmdd,
+                    oldValue,
+                    value: ''
+                  }]
+              }));
+              this.currentAntiphon = Object.assign({}, this.currentAntiphon);
+              this.ldfDocShouldChange.emit(new change.Change({
+                path: `${this.path}/metadata/omit_antiphon`,
+                op: [{
+                    type: 'set',
+                    oldValue: this.currentOmitAntiphon,
+                    value: false
+                  }]
+              }));
+              this.currentOmitAntiphon = false;
+            }
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+  async removeTableValue(mmdd) {
+    if (typeof this.currentAntiphon === 'object') {
+      this.currentAntiphon[mmdd] = undefined;
+      this.ldfDocShouldChange.emit(new change.Change({
+        path: `${this.path}/metadata/antiphon`,
+        op: [{
+            type: 'deleteAt',
+            index: mmdd,
+            oldValue: this.currentAntiphon[mmdd],
+          }]
+      }));
+      this.currentAntiphon = Object.assign({}, this.currentAntiphon);
+    }
+  }
+  render() {
+    const localeStrings = this.localeStrings || {};
+    return (index.h(index.Host, null, index.h("ion-radio-group", { value: this.mode, onIonChange: (e) => {
+        switch (e.detail.value) {
+          case 'omit':
+            this.setValue(undefined, true, false);
+            break;
+          case 'insert':
+            this.setValue(undefined, false, true);
+            break;
+          case 'string':
+            this.setValue('', false, false);
+          case 'refrain':
+            this.setValue(new refrain.Refrain({ type: 'refrain', style: 'antiphon', value: [''] }), false, false);
+            break;
+          case 'table':
+            this.setValue({}, false, false);
+            break;
+        }
+      } }, index.h("ion-list-header", null, index.h("ion-label", null, localeStrings.antiphon)), index.h("ion-item", { lines: "none" }, index.h("ion-label", null, localeStrings.omit), index.h("ion-radio", { slot: "end", value: "omit" })), index.h("ion-item", { lines: "none" }, index.h("ion-label", null, localeStrings.insert), index.h("ion-radio", { slot: "end", value: "insert" })), index.h("ion-item", { lines: "none" }, index.h("ion-label", null, localeStrings.text), index.h("ion-radio", { slot: "end", value: "refrain" })), index.h("ion-item", { lines: "none" }, index.h("ion-label", null, localeStrings.table), index.h("ion-radio", { slot: "end", value: "table" }))), (typeof this.currentAntiphon !== 'object' || this.currentAntiphon.type === 'refrain') && index.h(EditableStringOrAntiphon, { mode: this.mode, path: `${this.path}/metadata/antiphon`, value: this.currentAntiphon }), typeof this.currentAntiphon === 'object' && !Boolean(this.currentAntiphon.type) && index.h("ion-item", { lines: "none" }, index.h("ion-grid", null, Object.keys(this.currentAntiphon).map(mmdd => index.h("ion-row", { key: mmdd }, index.h("ion-col", { size: "4" }, mmdd), index.h("ion-col", null, index.h(EditableStringOrAntiphon, { mode: typeof this.currentAntiphon[mmdd] === 'string' ? 'string' : 'refrain', path: `${this.path}/metadata/antiphon/${mmdd}`, value: this.currentAntiphon[mmdd] })), index.h("ion-col", { size: "1" }, index.h("ion-buttons", null, index.h("ion-button", { fill: "clear", onClick: () => this.removeTableValue(mmdd) }, index.h("ion-label", null, index.h("ion-icon", { slot: "icon-only", name: "trash" }))))))), index.h("ion-row", null, index.h("ion-toolbar", null, index.h("ion-buttons", { slot: "end" }, index.h("ion-button", { onClick: () => this.addTableValue() }, index.h("ion-label", null, index.h("ion-icon", { slot: "icon-only", name: "add" }))))))))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "antiphon": ["antiphonChange"],
+    "omit_antiphon": ["omitAntiphonChange"],
+    "insert_antiphon": ["insertAntiphonChange"]
+  }; }
+};
+EditableAntiphonFieldComponent.style = ldfEditableAntiphonFieldCss;
+
+exports.ion_card_content = CardContent;
+exports.ion_card_title = CardTitle;
+exports.ion_col = Col;
+exports.ion_grid = Grid;
+exports.ion_row = Row;
+exports.ldf_editable_antiphon_field = EditableAntiphonFieldComponent;

package/dist/cjs/ion-card-subtitle.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+const theme = require('./theme-81caa5b0.js');
+
+const cardSubtitleIosCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);margin-left:0;margin-right:0;margin-top:0;margin-bottom:4px;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:12px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase}";
+
+const cardSubtitleMdCss = ":host{display:block;position:relative;color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-550, #737373);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-size:14px;font-weight:500}";
+
+const CardSubtitle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { role: "heading", "aria-level": "3", class: Object.assign(Object.assign({}, theme.createColorClasses(this.color)), { 'ion-inherit-color': true, [mode]: true }) }, index.h("slot", null)));
+  }
+};
+CardSubtitle.style = {
+  ios: cardSubtitleIosCss,
+  md: cardSubtitleMdCss
+};
+
+exports.ion_card_subtitle = CardSubtitle;

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

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+const theme = require('./theme-81caa5b0.js');
+
+const cardIosCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{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;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-item-background, var(--ion-background-color, #fff));--color:var(--ion-color-step-600, #666666);margin-left:16px;margin-right:16px;margin-top:24px;margin-bottom:24px;border-radius:8px;transform:translateZ(0);transition:transform 500ms cubic-bezier(0.12, 0.72, 0.29, 1);font-size:14px;box-shadow:0 4px 16px rgba(0, 0, 0, 0.12)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}:host(.ion-activated){transform:scale3d(0.97, 0.97, 1)}";
+
+const cardMdCss = ":host{--ion-safe-area-left:0px;--ion-safe-area-right:0px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);overflow:hidden}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.card-disabled){cursor:default;opacity:0.3;pointer-events:none}.card-native{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;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:inherit}.card-native::-moz-focus-inner{border:0}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}ion-ripple-effect{color:var(--ripple-color)}:host{--background:var(--ion-item-background, var(--ion-background-color, #fff));--color:var(--ion-color-step-550, #737373);margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px;border-radius:4px;font-size:14px;box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}";
+
+const Card = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * If `true`, a button tag will be rendered and the card will be tappable.
+     */
+    this.button = false;
+    /**
+     * The type of the button. Only used when an `onclick` or `button` property is present.
+     */
+    this.type = 'button';
+    /**
+     * If `true`, the user cannot interact with the card.
+     */
+    this.disabled = false;
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    this.routerDirection = 'forward';
+  }
+  isClickable() {
+    return (this.href !== undefined || this.button);
+  }
+  renderCard(mode) {
+    const clickable = this.isClickable();
+    if (!clickable) {
+      return [
+        index.h("slot", null)
+      ];
+    }
+    const { href, routerDirection } = this;
+    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
+    const attrs = (TagType === 'button')
+      ? { type: this.type }
+      : {
+        download: this.download,
+        href: this.href,
+        rel: this.rel,
+        target: this.target
+      };
+    return (index.h(TagType, Object.assign({}, attrs, { class: "card-native", disabled: this.disabled, onClick: (ev) => theme.openURL(href, ev, routerDirection) }), index.h("slot", null), clickable && mode === 'md' && index.h("ion-ripple-effect", null)));
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: Object.assign(Object.assign({ [mode]: true }, theme.createColorClasses(this.color)), { 'card-disabled': this.disabled, 'ion-activatable': this.isClickable() }) }, this.renderCard(mode)));
+  }
+};
+Card.style = {
+  ios: cardIosCss,
+  md: cardMdCss
+};
+
+const cardHeaderIosCss = ":host{--background:transparent;--color:inherit;display:block;position:relative;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}@supports (backdrop-filter: blur(0)){:host(.card-header-translucent){background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.9);backdrop-filter:saturate(180%) blur(30px)}}";
+
+const cardHeaderMdCss = ":host{--background:transparent;--color:inherit;display:block;position:relative;background:var(--background);color:var(--color)}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}::slotted(ion-card-title:not(:first-child)),::slotted(ion-card-subtitle:not(:first-child)){margin-top:8px}";
+
+const CardHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * If `true`, the card header will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    this.translucent = false;
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { class: Object.assign(Object.assign({}, theme.createColorClasses(this.color)), { 'card-header-translucent': this.translucent, 'ion-inherit-color': true, [mode]: true }) }, index.h("slot", null)));
+  }
+};
+CardHeader.style = {
+  ios: cardHeaderIosCss,
+  md: cardHeaderMdCss
+};
+
+exports.ion_card = Card;
+exports.ion_card_header = CardHeader;