@mindful-web/marko-web-theme-monorail 1.0.0

package/components/flows/card-deck.marko.js

@@ -0,0 +1,159 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/flows/card-deck.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsArray = module_objectPath_module.getAsArray,
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const blockName = "card-deck-flow";
+
+  const elementName = "node";
+
+  const nodes = getAsArray(input, "nodes");
+
+  const slots = getAsArray(input, "slots");
+
+  const slotMap = getAsArray(input, "slots").reduce((map, slot) => {
+  const { index, position } = slot;
+  if (index == null && !position) {
+    map.set("default", slot);
+    return map;
+  }
+  if (!position) return map;
+  map.set(`${position}_${index}`, slot)
+  return map;
+}, new Map());
+
+  const getSlot = (position, index) => (slotMap.get(`${position}_${index}`) || {});
+
+  const defaultSlot = slotMap.get("default") || {};
+
+  const cols = input.cols != null ? input.cols : 3;
+
+  const modifiers = getAsArray(input, "modifiers");
+
+  modifiers.push(`${cols}-cols`);
+
+  if (nodes.length) {
+    marko_web_block_tag({
+        name: blockName,
+        tag: input.tag,
+        class: input.class,
+        modifiers: modifiers,
+        attrs: input.attrs,
+        renderBody: function(out) {
+          var $for$0 = 0;
+
+          marko_forOf(nodes, function(node, index) {
+            var $keyScope$0 = "[" + (($for$0++) + "]");
+
+            const at = getSlot("at", index);
+
+            const before = getSlot("before", index);
+
+            const after = getSlot("after", index);
+
+            if (before.renderBody) {
+              marko_web_element_tag(marko_assign({
+                  name: "default",
+                  tag: "div"
+                }, before, {
+                  name: elementName,
+                  blockName: blockName,
+                  modifiers: ["position-before", ...getAsArray(before.modifiers)],
+                  renderBody: function(out) {
+                    marko_dynamicTag(out, before.renderBody, function() {
+                      return {
+                          node: node,
+                          index: index
+                        };
+                    }, null, null, null, __component, "2" + $keyScope$0);
+                  }
+                }), out, __component, "1" + $keyScope$0);
+            }
+
+            if (at.renderBody) {
+              marko_web_element_tag(marko_assign({
+                  name: "default",
+                  tag: "div"
+                }, at, {
+                  name: elementName,
+                  blockName: blockName,
+                  modifiers: ["position-at", ...getAsArray(at.modifiers)],
+                  renderBody: function(out) {
+                    marko_dynamicTag(out, at.renderBody, function() {
+                      return {
+                          node: node,
+                          index: index
+                        };
+                    }, null, null, null, __component, "4" + $keyScope$0);
+                  }
+                }), out, __component, "3" + $keyScope$0);
+            } else if (defaultSlot.renderBody) {
+              marko_web_element_tag(marko_assign({
+                  name: "default",
+                  tag: "div"
+                }, defaultSlot, {
+                  name: elementName,
+                  blockName: blockName,
+                  renderBody: function(out) {
+                    marko_dynamicTag(out, defaultSlot.renderBody, function() {
+                      return {
+                          node: node,
+                          index: index
+                        };
+                    }, null, null, null, __component, "6" + $keyScope$0);
+                  }
+                }), out, __component, "5" + $keyScope$0);
+            }
+
+            if (after.renderBody) {
+              marko_web_element_tag(marko_assign({
+                  name: "default",
+                  tag: "div"
+                }, after, {
+                  name: elementName,
+                  blockName: blockName,
+                  modifiers: ["position-after", ...getAsArray(after.modifiers)],
+                  renderBody: function(out) {
+                    marko_dynamicTag(out, after.renderBody, function() {
+                      return {
+                          node: node,
+                          index: index
+                        };
+                    }, null, null, null, __component, "8" + $keyScope$0);
+                  }
+                }), out, __component, "7" + $keyScope$0);
+            }
+          });
+        }
+      }, out, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/flows/card-deck.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/flows/content/card-deck-col.marko

@@ -0,0 +1,49 @@
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+import { getAsObject } from "@mindful-web/object-path";
+
+$ const { nativeX: nxConfig } = out.global;
+$ const nativeX = getAsObject(input, "nativeX");
+$ const cols = defaultValue(input.cols, 4);
+$ const nodeImageInput = getAsObject(input, "node.image");
+
+<theme-card-deck-flow cols=cols nodes=input.nodes modifiers=input.modifiers>
+  <@slot|{ node, index }|>
+    <if(nxConfig)>
+      <marko-web-native-x-render|{ node: nxNode, linkAttrs, containerAttrs }|
+        ...nativeX
+        when=(index === nativeX.index)
+        node=node
+        config=nxConfig
+      >
+        <theme-content-node
+          image-position="top"
+          card=true
+          flush=true
+          full-height=true
+          with-teaser=false
+          with-dates=false
+          ...input.node
+          node=nxNode
+          link-attrs=linkAttrs
+          attrs=containerAttrs
+        >
+          <@image ar="3:2" fluid=true ...nodeImageInput />
+        </theme-content-node>
+      </marko-web-native-x-render>
+    </if>
+    <else>
+      <theme-content-node
+        image-position="top"
+        card=true
+        flush=true
+        full-height=true
+        with-teaser=false
+        with-dates=false
+        ...input.node
+        node=node
+      >
+        <@image ar="3:2" fluid=true ...nodeImageInput />
+      </theme-content-node>
+    </else>
+  </@slot>
+</theme-card-deck-flow>

package/components/flows/content/card-deck-col.marko.js

@@ -0,0 +1,98 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/flows/content/card-deck-col.marko",
+    marko_component = require("./card-deck-col.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsObject = module_objectPath_module.getAsObject,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    theme_content_node_template = require("../../nodes/content.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_content_node_tag = marko_loadTag(theme_content_node_template),
+    marko_web_native_x_render_template = require("@mindful-web/marko-web-native-x/components/render.marko"),
+    marko_web_native_x_render_tag = marko_loadTag(marko_web_native_x_render_template),
+    theme_card_deck_flow_template = require("../card-deck.marko"),
+    theme_card_deck_flow_tag = marko_loadTag(theme_card_deck_flow_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { nativeX: nxConfig } = out.global;
+
+  const nativeX = getAsObject(input, "nativeX");
+
+  const cols = defaultValue(input.cols, 4);
+
+  const nodeImageInput = getAsObject(input, "node.image");
+
+  theme_card_deck_flow_tag({
+      cols: cols,
+      nodes: input.nodes,
+      modifiers: input.modifiers,
+      slots: [
+          {
+              renderBody: function(out, { node, index }) {
+                if (nxConfig) {
+                  marko_web_native_x_render_tag(marko_assign({}, nativeX, {
+                      when: index === nativeX.index,
+                      node: node,
+                      config: nxConfig,
+                      renderBody: function(out, { node: nxNode, linkAttrs, containerAttrs }) {
+                        theme_content_node_tag(marko_assign({
+                            imagePosition: "top",
+                            card: true,
+                            flush: true,
+                            fullHeight: true,
+                            withTeaser: false,
+                            withDates: false
+                          }, input.node, {
+                            node: nxNode,
+                            linkAttrs: linkAttrs,
+                            attrs: containerAttrs,
+                            image: marko_assign({
+                                ar: "3:2",
+                                fluid: true
+                              }, nodeImageInput)
+                          }), out, __component, "3");
+                      }
+                    }), out, __component, "2");
+                } else {
+                  theme_content_node_tag(marko_assign({
+                      imagePosition: "top",
+                      card: true,
+                      flush: true,
+                      fullHeight: true,
+                      withTeaser: false,
+                      withDates: false
+                    }, input.node, {
+                      node: node,
+                      image: marko_assign({
+                          ar: "3:2",
+                          fluid: true
+                        }, nodeImageInput)
+                    }), out, __component, "5");
+                }
+              }
+            }
+        ]
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/flows/content/card-deck-col.marko",
+    component: "./card-deck-col.marko",
+    tags: [
+      "../../nodes/content.marko",
+      "@mindful-web/marko-web-native-x/components/render.marko",
+      "../card-deck.marko"
+    ]
+  };

package/components/flows/content/directory-section.marko

@@ -0,0 +1,41 @@
+import { getAsObject } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { nodes, header } = input
+$ const image = getAsObject(input, "node.image");
+
+$ const withSection = defaultValue(input.withSection, false);
+
+$ const blockName = "read-next";
+
+<if(nodes.length)>
+  <marko-web-block name=blockName>
+    <if(header && header.renderBody)>
+      <marko-web-element block-name=blockName name="header">
+        <${header.renderBody} />
+      </marko-web-element>
+    </if>
+    <marko-web-node-list
+      inner-justified=false
+      flush-x=true
+      flush-y=true
+      modifiers=[blockName]
+    >
+      <@nodes nodes=nodes>
+        <@slot|{ node }|>
+          <theme-content-node
+            image-position="left"
+            ...input.node
+            flush=true
+            node=node
+            with-dates=false
+            with-section=withSection
+            modifiers=[blockName]
+          >
+            <@image width=160 ar="3:2" ...image />
+          </theme-content-node>
+        </@slot>
+      </@nodes>
+    </marko-web-node-list>
+  </marko-web-block>
+</if>

package/components/flows/content/directory-section.marko.js

@@ -0,0 +1,107 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/flows/content/directory-section.marko",
+    marko_component = require("./directory-section.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    theme_content_node_template = require("../../nodes/content.marko"),
+    theme_content_node_tag = marko_loadTag(theme_content_node_template),
+    marko_web_node_list_template = require("@mindful-web/marko-web/components/node-list/index.marko"),
+    marko_web_node_list_tag = marko_loadTag(marko_web_node_list_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { nodes, header } = input
+
+  const image = getAsObject(input, "node.image");
+
+  const withSection = defaultValue(input.withSection, false);
+
+  const blockName = "read-next";
+
+  if (nodes.length) {
+    marko_web_block_tag({
+        name: blockName,
+        tag: "div",
+        renderBody: function(out) {
+          if (header && header.renderBody) {
+            marko_web_element_tag({
+                name: "header",
+                tag: "div",
+                blockName: blockName,
+                renderBody: function(out) {
+                  marko_dynamicTag(out, header.renderBody, null, null, null, null, __component, "2");
+                }
+              }, out, __component, "1");
+          }
+
+          marko_web_node_list_tag({
+              blockName: "node-list",
+              tag: "div",
+              justified: false,
+              innerJustified: false,
+              flushX: true,
+              flushY: true,
+              fullHeight: false,
+              collapsible: true,
+              modifiers: [
+                  blockName
+                ],
+              nodes: {
+                  nodes: nodes,
+                  slots: [
+                      {
+                          renderBody: function(out, { node }) {
+                            theme_content_node_tag(marko_assign({
+                                imagePosition: "left"
+                              }, input.node, {
+                                flush: true,
+                                node: node,
+                                withDates: false,
+                                withSection: withSection,
+                                modifiers: [
+                                    blockName
+                                  ],
+                                image: marko_assign({
+                                    width: 160,
+                                    ar: "3:2"
+                                  }, image)
+                              }), out, __component, "6");
+                          }
+                        }
+                    ]
+                }
+            }, out, __component, "3");
+        }
+      }, out, __component, "0");
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/flows/content/directory-section.marko",
+    component: "./directory-section.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/index.marko",
+      "../../nodes/content.marko",
+      "@mindful-web/marko-web/components/node-list/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/flows/content/list.marko

@@ -0,0 +1,51 @@
+import { getAsArray, getAsObject } from "@mindful-web/object-path";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { nativeX: nxConfig } = out.global;
+$ const nodes = getAsArray(input, "nodes");
+$ const nativeX = getAsObject(input, "nativeX");
+$ const withNativeXSection = defaultValue(input.withNativeXSection, true);
+$ const setWithSection = (node, nxNode, withNativeXSection = true, nodeInput = {}) => {
+  if (nodeInput.withSection) return true;
+  if (node.withSection) return true;
+  if (!withNativeXSection) return false;
+  return node.id !== nxNode.id;
+};
+<marko-web-node-list
+  inner-justified=defaultValue(input.innerJustified, true)
+  class=input.class
+  flush-x=defaultValue(input.flushX, true)
+  flush-y=defaultValue(input.flushY, false)
+  modifiers=input.modifiers
+  header=input.header
+  body=input.body
+  footer=input.footer
+  collapsible=input.collapsible
+>
+  <@nodes nodes=nodes>
+    <@slot|{ node, index }|>
+      <if(nxConfig)>
+        <marko-web-native-x-render|{ node: nxNode, linkAttrs, containerAttrs }|
+          ...nativeX
+          when=(index === nativeX.index || (nativeX.indexes && nativeX.indexes.includes(index)))
+          node=node
+          config=nxConfig
+        >
+          <theme-content-node
+            ...input.node
+            with-section=setWithSection(node, nxNode, withNativeXSection, input.node)
+            node=nxNode
+            attrs=containerAttrs
+            link-attrs=linkAttrs
+          />
+        </marko-web-native-x-render>
+      </if>
+      <else>
+        <theme-content-node
+          ...input.node
+          node=node
+        />
+      </else>
+    </@slot>
+  </@nodes>
+</marko-web-node-list>

package/components/flows/content/list.marko.js

@@ -0,0 +1,98 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-theme-monorail$1.0.0/components/flows/content/list.marko",
+    marko_component = require("./list.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsArray = module_objectPath_module.getAsArray,
+    getAsObject = module_objectPath_module.getAsObject,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    theme_content_node_template = require("../../nodes/content.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    theme_content_node_tag = marko_loadTag(theme_content_node_template),
+    marko_web_native_x_render_template = require("@mindful-web/marko-web-native-x/components/render.marko"),
+    marko_web_native_x_render_tag = marko_loadTag(marko_web_native_x_render_template),
+    marko_web_node_list_template = require("@mindful-web/marko-web/components/node-list/index.marko"),
+    marko_web_node_list_tag = marko_loadTag(marko_web_node_list_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { nativeX: nxConfig } = out.global;
+
+  const nodes = getAsArray(input, "nodes");
+
+  const nativeX = getAsObject(input, "nativeX");
+
+  const withNativeXSection = defaultValue(input.withNativeXSection, true);
+
+  const setWithSection = (node, nxNode, withNativeXSection = true, nodeInput = {}) => {
+  if (nodeInput.withSection) return true;
+  if (node.withSection) return true;
+  if (!withNativeXSection) return false;
+  return node.id !== nxNode.id;
+};
+
+  marko_web_node_list_tag({
+      blockName: "node-list",
+      tag: "div",
+      justified: false,
+      innerJustified: defaultValue(input.innerJustified, true),
+      flushX: defaultValue(input.flushX, true),
+      flushY: defaultValue(input.flushY, false),
+      fullHeight: false,
+      collapsible: input.collapsible,
+      class: input.class,
+      modifiers: input.modifiers,
+      header: input.header,
+      body: input.body,
+      footer: input.footer,
+      nodes: {
+          nodes: nodes,
+          slots: [
+              {
+                  renderBody: function(out, { node, index }) {
+                    if (nxConfig) {
+                      marko_web_native_x_render_tag(marko_assign({}, nativeX, {
+                          when: (index === nativeX.index) || (nativeX.indexes && nativeX.indexes.includes(index)),
+                          node: node,
+                          config: nxConfig,
+                          renderBody: function(out, { node: nxNode, linkAttrs, containerAttrs }) {
+                            theme_content_node_tag(marko_assign({}, input.node, {
+                                withSection: setWithSection(node, nxNode, withNativeXSection, input.node),
+                                node: nxNode,
+                                attrs: containerAttrs,
+                                linkAttrs: linkAttrs
+                              }), out, __component, "4");
+                          }
+                        }), out, __component, "3");
+                    } else {
+                      theme_content_node_tag(marko_assign({}, input.node, {
+                          node: node
+                        }), out, __component, "5");
+                    }
+                  }
+                }
+            ]
+        }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-theme-monorail$1.0.0/components/flows/content/list.marko",
+    component: "./list.marko",
+    tags: [
+      "../../nodes/content.marko",
+      "@mindful-web/marko-web-native-x/components/render.marko",
+      "@mindful-web/marko-web/components/node-list/index.marko"
+    ]
+  };

package/components/flows/content/marko.json

@@ -0,0 +1,39 @@
+{
+  "<theme-content-list-flow>": {
+    "template": "./list.marko",
+    "<header>": {},
+    "<body>": {},
+    "<footer>": {},
+    "<node>": {
+      "<attribution>": {},
+      "<image>": {}
+    },
+    "<native-x>": {
+      "@index": "number",
+      "@indexes": "number",
+      "@name": "string",
+      "@aliases": "array",
+      "@section-name": "string"
+    },
+    "@with-native-x-section": "boolean",
+    "@nodes": "array",
+    "@inner-justified": "boolean",
+    "@flush-x": "boolean",
+    "@flush-y": "boolean",
+    "@class": "string",
+    "@collapsible": "boolean",
+    "@modifiers": "array"
+  },
+  "<theme-content-directory-section-flow>": {
+    "template": "./directory-section.marko",
+    "<header>": {},
+    "<node>": {
+      "<image>": {}
+    },
+    "@nodes": "array",
+    "@with-section": "boolean"
+  },
+  "<theme-content-card-deck-col-flow>": {
+    "template": "./card-deck-col.marko"
+  }
+}