@venite/components 0.16.7 → 0.16.13

package/dist/collection/components/heading/heading.js

@@ -0,0 +1,198 @@
+import { Component, Prop, Watch, State, Host, Element, h } from '@stencil/core';
+import { Heading, Citation, dateFromYMDString, Text } from '@venite/ldf';
+import { EditableNode } from './editable-node';
+import { getComponentClosestLanguage } from '../../utils/locale';
+import EN from './heading.i18n.en.json';
+const LOCALE = {
+  'en': EN
+};
+export class HeadingComponent {
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new Heading(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new Heading(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn('HEADING ERROR', e);
+      this.obj = new Heading();
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  // Convert level/text into an H... node
+  headerNode(level, contentNode, display = true) {
+    let node;
+    switch (level) {
+      case 1:
+        node = h("h1", null, contentNode);
+        break;
+      case 2:
+        node = h("h2", null, contentNode);
+        break;
+      case 3:
+        node = h("h3", { slot: 'start' }, contentNode);
+        break;
+      case 4:
+        node = h("h4", { slot: 'start' }, contentNode);
+        break;
+      case 5:
+        node = h("h5", { slot: 'start' }, contentNode);
+        break;
+      default:
+        node = h("h6", null, contentNode);
+    }
+    return display && node;
+  }
+  textNode(text, index, bodyText) {
+    return this.editable
+      ? h(EditableNode, { uidOrSlug: this.obj.uid || this.obj.slug || '', path: this.path, text: text, index: index, bodyText: Boolean(bodyText) })
+      : h("ldf-string", { text: text, fragment: this.path });
+  }
+  dateNode() {
+    var _a, _b, _c, _d, _e, _f;
+    const hasDate = !!((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.day) === null || _b === void 0 ? void 0 : _b.date);
+    if (hasDate) {
+      const date = dateFromYMDString((_d = (_c = this.obj) === null || _c === void 0 ? void 0 : _c.day) === null || _d === void 0 ? void 0 : _d.date), locale = ((_f = (_e = this.element) === null || _e === void 0 ? void 0 : _e.closest('[lang]')) === null || _f === void 0 ? void 0 : _f.lang) || 'en';
+      return h("div", { class: "date" }, date.toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' }));
+    }
+    else {
+      return [];
+    }
+  }
+  citationNode(c, slot = 'end') {
+    return (h("div", { class: 'citation', slot: slot }, this.editable ?
+      h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-citation`, text: c, path: `${this.path}/citation` }) :
+      c));
+  }
+  sourceNode(c) {
+    const text = new Citation(c).toString().replace('bcp1979', 'BCP');
+    return (h("div", { slot: 'end', class: 'source' }, this.editable ?
+      [
+        h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-source-source`, text: c === null || c === void 0 ? void 0 : c.source, path: `${this.path}/source/source` }),
+        h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-source-citation`, text: c === null || c === void 0 ? void 0 : c.citation, path: `${this.path}/source/citation` }),
+      ] :
+      text));
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+    const localeStrings = this.localeStrings || {};
+    const level = this.obj.metadata ? this.obj.metadata.level : 4, hasCitation = Boolean((_a = this.obj) === null || _a === void 0 ? void 0 : _a.citation), hasSource = Boolean((_b = this.obj) === null || _b === void 0 ? void 0 : _b.source), isDate = ((_c = this.obj) === null || _c === void 0 ? void 0 : _c.style) == 'date', isDay = ((_d = this.obj) === null || _d === void 0 ? void 0 : _d.style) == 'day', isText = ((_e = this.obj) === null || _e === void 0 ? void 0 : _e.style) == undefined || ((_f = this.obj) === null || _f === void 0 ? void 0 : _f.style) == 'text' || (!isDate && !isDay);
+    // Render
+    return (h(Host, { lang: ((_g = this.obj) === null || _g === void 0 ? void 0 : _g.language) || 'en' },
+      this.editable && h("ldf-label-bar", null,
+        h("slot", { slot: 'end', name: 'controls' })),
+      h("ldf-label-bar", { center: ((_j = (_h = this.obj) === null || _h === void 0 ? void 0 : _h.metadata) === null || _j === void 0 ? void 0 : _j.level) <= 2, class: {
+          'text': isText && (((_k = this === null || this === void 0 ? void 0 : this.obj) === null || _k === void 0 ? void 0 : _k.value) || []).filter(n => Boolean(n)).length > 0
+        } },
+        isText && ((_m = (_l = this.obj) === null || _l === void 0 ? void 0 : _l.value) === null || _m === void 0 ? void 0 : _m.length) > 0 && this.headerNode(level, this.textNode(this.obj.value[0], 0), true),
+        isDate && !this.editable && this.dateNode(),
+        isDate && this.editable && h("code", { class: "lookup" }, localeStrings.date),
+        isDay && !this.editable && h("div", { class: "date" },
+          h("ldf-day-name", { day: (_o = this.obj) === null || _o === void 0 ? void 0 : _o.day })),
+        isDay && !this.editable && ((_r = (_q = (_p = this.obj) === null || _p === void 0 ? void 0 : _p.day) === null || _q === void 0 ? void 0 : _q.holy_days) === null || _r === void 0 ? void 0 : _r.length) > 0 && h("ul", { class: "holy-days" }, (_t = (_s = this.obj) === null || _s === void 0 ? void 0 : _s.day) === null || _t === void 0 ? void 0 : _t.holy_days.filter(day => { var _a; return ((_a = day.type) === null || _a === void 0 ? void 0 : _a.rank) < 3; }).map(day => day.bio
+          ? h("li", { class: "holy-day" },
+            h("details", null,
+              h("summary", null, day.name),
+              h("ldf-text", { doc: new Text({ type: "text", style: "text", value: day.bio }) })))
+          : h("li", { class: "holy-day" }, day.name))),
+        isDay && this.editable && h("code", { class: "lookup" }, localeStrings.day),
+        ((_v = (_u = this.obj) === null || _u === void 0 ? void 0 : _u.value) === null || _v === void 0 ? void 0 : _v.length) > 1 && this.textNode(this.obj.value[1], 1),
+        h("slot", { name: 'additional' }),
+        h("slot", { name: 'citation', slot: 'end' },
+          hasSource && this.sourceNode(this.obj.source),
+          hasCitation && !hasSource && this.obj.citation !== this.obj.label && this.obj.citation !== this.obj.value[0] && this.citationNode(this.obj.citation))),
+      h("div", null, hasSource && hasCitation && this.obj.citation !== this.obj.label && this.citationNode(this.obj.citation, 'none')),
+      ((_x = (_w = this.obj) === null || _w === void 0 ? void 0 : _w.value) === null || _x === void 0 ? void 0 : _x.length) > 2 && this.obj.value.slice(2, this.obj.value.length).map((text, index) => this.textNode(text, index + 2, true))));
+  }
+  static get is() { return "ldf-heading"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["heading.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["heading.css"]
+  }; }
+  static get properties() { return {
+    "doc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Heading | string",
+        "resolved": "Heading | string",
+        "references": {
+          "Heading": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An LDF Heading object."
+      },
+      "attribute": "doc",
+      "reflect": false
+    },
+    "path": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A JSON Pointer that points to the Collect being edited"
+      },
+      "attribute": "path",
+      "reflect": true
+    },
+    "editable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the object is editable"
+      },
+      "attribute": "editable",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "obj": {},
+    "localeStrings": {}
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "doc",
+      "methodName": "docChanged"
+    }]; }
+}

package/dist/collection/components/image/image.css

@@ -0,0 +1,75 @@
+img {
+  height: auto;
+  max-width: 100%;
+  z-index: 1;
+}
+
+figcaption {
+  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 {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  text-align: right;
+}
+
+.img-wrapper {
+  margin: 0;
+  padding: 12px;
+  display: inline-block;
+  position: relative;
+}
+
+img.editable {
+  border: 3px solid var(--ldf-color);
+}
+
+button.resize {
+  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 {
+  position: absolute;
+  left: 0;
+  top: -3px;
+  cursor: nwse-resize;
+}
+
+.resize.bottom-left {
+  position: absolute;
+  left: -3px;
+  bottom: 0;
+  cursor: nesw-resize;
+}
+
+.resize.top-right {
+  position: absolute;
+  right: -6px;
+  top: -3px;
+  cursor: nesw-resize;
+}
+
+.resize.bottom-right {
+  position: absolute;
+  right: -6px;
+  bottom: 0;
+  cursor: nwse-resize;
+}

package/dist/collection/components/image/image.i18n.en.json

@@ -0,0 +1,4 @@
+{
+  "close": "Return to Bulletin",
+  "url": "URL"
+}

package/dist/collection/components/image/image.js

@@ -0,0 +1,303 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { modalController } from '@ionic/core';
+import { Element, Component, Prop, Watch, State, Host, h, Listen, Event } from '@stencil/core';
+import { Change, Image } from '@venite/ldf';
+import Debounce from 'debounce-decorator';
+import { getComponentClosestLanguage } from '../../utils/locale';
+import EN from './image.i18n.en.json';
+const LOCALE = {
+  'en': EN
+};
+export class ImageComponent {
+  constructor() {
+    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(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new 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();
+    }
+  }
+  // Lifecycle events
+  componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+  }
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  async showZoomed() {
+    const modal = await 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({
+        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({
+      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 && h("ldf-label-bar", null,
+        h("slot", { slot: 'end', name: 'controls' })),
+      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 ?
+          h("figure", null,
+            h("div", { class: "img-wrapper" },
+              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" }),
+              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() }),
+              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() }),
+              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() }),
+              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() })),
+            h("figcaption", null,
+              h("code", null, localeStrings.url),
+              h("ldf-editable-text", { id: `${this.obj.uid || this.obj.slug}-${ii}`, text: url, path: `${this.path}/value/${ii}` })))
+          :
+            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 h(Host, { lang: (_d = this.obj) === null || _d === void 0 ? void 0 : _d.language }, imageDisplay);
+    }
+    else {
+      return [
+        h("ion-header", null,
+          h("ion-toolbar", null,
+            h("ion-buttons", { slot: "end" },
+              h("ion-button", { onClick: () => this.modal.dismiss() },
+                h("ion-label", { slot: "start" }, localeStrings.close),
+                h("ion-icon", { slot: "end", name: "close" }))))),
+        h("ion-content", { class: "ion-padding", scrollX: true, lang: (_e = this.obj) === null || _e === void 0 ? void 0 : _e.language }, imageDisplay)
+      ];
+    }
+  }
+  static get is() { return "ldf-image"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["image.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["image.css"]
+  }; }
+  static get properties() { return {
+    "doc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Image | string",
+        "resolved": "Image | string",
+        "references": {
+          "Image": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An LDF Image object."
+      },
+      "attribute": "doc",
+      "reflect": false
+    },
+    "path": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A JSON Pointer that points to the Collect being edited"
+      },
+      "attribute": "path",
+      "reflect": true
+    },
+    "editable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the object is editable"
+      },
+      "attribute": "editable",
+      "reflect": false
+    },
+    "modal": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If the image is being shown in a modal, pass the modal here"
+      },
+      "attribute": "modal",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "obj": {},
+    "localeStrings": {},
+    "isResizing": {},
+    "height": {},
+    "width": {}
+  }; }
+  static get events() { return [{
+      "method": "ldfDocShouldChange",
+      "name": "ldfDocShouldChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Tell the Editor that a change has been made to the document"
+      },
+      "complexType": {
+        "original": "Change",
+        "resolved": "Change",
+        "references": {
+          "Change": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "doc",
+      "methodName": "docChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "mouseup",
+      "method": "stopResizing",
+      "target": "document",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mousemove",
+      "method": "resizingMove",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}
+__decorate([
+  Debounce(250)
+], ImageComponent.prototype, "updateDoc", null);

package/dist/collection/components/label-bar/label-bar.css

@@ -0,0 +1,40 @@
+.label-bar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  max-width: 100%;
+}
+
+.label-bar.left {
+  justify-content: flex-start;
+}
+.label-bar.left slot {
+  display: flex;
+  flex-direction: row;
+  margin-left: 0;
+}
+.label-bar.left slot:first-of-type {
+  margin-left: 0;
+  flex-grow: 2;
+}
+.label-bar.left slot:nth-of-type(2) {
+  flex-grow: 2;
+}
+.label-bar.left slot:last-of-type {
+  margin-left: auto;
+  text-align: right;
+}
+.label-bar.left ::slotted[slot=end] {
+  text-align: right;
+}
+
+.label-bar.center {
+  justify-content: space-between;
+}
+.label-bar.center slot {
+  display: block;
+}
+.label-bar.center slot:nth-child(1) {
+  text-align: center;
+}

package/dist/collection/components/label-bar/label-bar.js

@@ -0,0 +1,49 @@
+import { Component, h, Prop } from '@stencil/core';
+export class LabelBarComponent {
+  constructor() {
+    this.center = false;
+  }
+  // Render
+  render() {
+    if (this.center) {
+      return (h("div", { class: 'label-bar center' },
+        h("slot", { name: 'start' }),
+        h("slot", null),
+        h("slot", { name: 'end' })));
+    }
+    else {
+      return (h("div", { class: 'label-bar left' },
+        h("slot", { name: 'start' }),
+        h("slot", null),
+        h("slot", { name: 'end' })));
+    }
+  }
+  static get is() { return "ldf-label-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["label-bar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["label-bar.css"]
+  }; }
+  static get properties() { return {
+    "center": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "center",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+}