mjml-rb 0.2.11 → 0.2.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e37a1df063fbb80fad16b364acfd5f80623edeeabab31d3abd7264b486a287d7
-  data.tar.gz: 7added84353440e4750caf6c1c343baa50f23bdac800b5418a8432dd4f48e950
+  metadata.gz: 9c54cb0ddf9071b81422853dfcca7e3748ed404b7ea1afba2a99ce9a42229d01
+  data.tar.gz: 7d2469230fa62b2dd52df43e3e8858f1a38aeb5964469af5ec8669182664e9f8
 SHA512:
-  metadata.gz: ffc75edaa21c23dedaeacd1ef032fa7ac4fa561f3719b9aa6314e8c6ac14a08419d22f2dfe2bcce699b680d47280ad2c7743595115ac01337bfc79176080c2fd
-  data.tar.gz: 91ff2e86ed6d191d8aec6fb438de9624d99150225f0626d8b88a26d3c8ae0d4c5e29f707498a27e6841a8740e80d4a254115a6387a959cab5d98a3f94eb44d31
+  metadata.gz: 8e349fdbec211923111e8ce2f7a593f46f18308aef3461c531dc3fa6ccfdf97d024c8b181e0289c0b8819db272d49fd3c45c2130298373a8867f6f8f19f14916
+  data.tar.gz: 9603224d7e49fc263441767a0d3a289bd5bbba4cdf93afebc07b1dd7dd0416f8cd5e0161843d50d31e2f21b6390be8a946569027c52f19ab4d6605442544507b

data/README.md

@@ -69,8 +69,8 @@ The table below tracks current JS-to-Ruby migration status for MJML components i
 | `mj-preview` | migrated | Implemented in `head.rb`. |
 | `mj-style` | migrated | Implemented in `head.rb`, including inline-style registration. |
 | `mj-font` | migrated | Implemented in `head.rb`. |
-| `mj-carousel` | not migrated | Declared in dependency rules but no renderer implementation yet. |
-| `mj-carousel-image` | not migrated | Declared in dependency rules but no renderer implementation yet. |
+| `mj-carousel` | migrated | Implemented in `carousel.rb`, including per-instance radio/thumbnail CSS, Outlook fallback rendering, and thumbnail/control output. |
+| `mj-carousel-image` | migrated | Implemented in `carousel_image.rb`, including radio, thumbnail, and main image rendering helpers used by `mj-carousel`. |
 | `mj-breakpoint` | migrated | Supported in `mj-head` and used to control desktop column media-query widths. |
 | `mj-html-attributes` | migrated | Supported in `mj-head` and applied to the rendered HTML via CSS selectors. |
 | `mj-selector` | migrated | Supported as the selector container for `mj-html-attribute` rules. |

data/lib/mjml-rb/components/carousel.rb

@@ -0,0 +1,449 @@
+require "securerandom"
+
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class Carousel < Base
+      TAGS = ["mj-carousel"].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "align" => "enum(left,center,right)",
+        "border-radius" => "unit(px,%){1,4}",
+        "container-background-color" => "color",
+        "icon-width" => "unit(px,%)",
+        "left-icon" => "string",
+        "padding" => "unit(px,%){1,4}",
+        "padding-top" => "unit(px,%)",
+        "padding-bottom" => "unit(px,%)",
+        "padding-left" => "unit(px,%)",
+        "padding-right" => "unit(px,%)",
+        "right-icon" => "string",
+        "thumbnails" => "enum(visible,hidden,supported)",
+        "tb-border" => "string",
+        "tb-border-radius" => "unit(px,%)",
+        "tb-hover-border-color" => "color",
+        "tb-selected-border-color" => "color",
+        "tb-width" => "unit(px,%)"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "align" => "center",
+        "border-radius" => "6px",
+        "icon-width" => "44px",
+        "left-icon" => "https://i.imgur.com/xTh3hln.png",
+        "right-icon" => "https://i.imgur.com/os7o9kz.png",
+        "thumbnails" => "visible",
+        "tb-border" => "2px solid transparent",
+        "tb-border-radius" => "6px",
+        "tb-hover-border-color" => "#fead0d",
+        "tb-selected-border-color" => "#ccc"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        a = DEFAULT_ATTRIBUTES.merge(attrs)
+        children = carousel_images(node)
+        return "" if children.empty?
+
+        carousel_id = SecureRandom.hex(8)
+        context[:head_styles] << component_head_style(carousel_id, children.length, a)
+
+        outer_td_attrs = {
+          "align" => a["align"],
+          "class" => a["css-class"],
+          "style" => style_join(
+            "background" => a["container-background-color"],
+            "font-size" => "0px",
+            "padding" => a["padding"],
+            "padding-top" => a["padding-top"],
+            "padding-right" => a["padding-right"],
+            "padding-bottom" => a["padding-bottom"],
+            "padding-left" => a["padding-left"],
+            "word-break" => "break-word"
+          )
+        }
+
+        inner_container_width = content_width(context[:container_width], a)
+
+        content = <<~HTML
+          #{mso_conditional_tag(interactive_markup(node, children, context, a, carousel_id, inner_container_width), true)}
+          #{render_fallback(node, children.first, context, a, inner_container_width)}
+        HTML
+
+        %(<tr><td#{html_attrs(outer_td_attrs)}>#{content}</td></tr>)
+      end
+
+      private
+
+      def interactive_markup(node, children, context, attrs, carousel_id, inner_container_width)
+        carousel_classes = ["mj-carousel", attrs["css-class"]].compact.reject(&:empty?).join(" ")
+
+        <<~HTML
+          <div#{html_attrs("class" => carousel_classes)}>
+            #{generate_radios(children, carousel_id)}
+            <div#{html_attrs(
+              "class" => "mj-carousel-content mj-carousel-#{carousel_id}-content",
+              "style" => style_join(
+                "display" => "table",
+                "width" => "100%",
+                "table-layout" => "fixed",
+                "text-align" => "center",
+                "font-size" => "0px"
+              )
+            )}>
+              #{generate_thumbnails(node, children, context, attrs, carousel_id, inner_container_width)}
+              #{generate_carousel(node, children, context, attrs, carousel_id, inner_container_width)}
+            </div>
+          </div>
+        HTML
+      end
+
+      def generate_radios(children, carousel_id)
+        image_component = carousel_image_component
+        children.each_with_index.map do |child, index|
+          image_component.render_radio(index: index, carousel_id: carousel_id)
+        end.join
+      end
+
+      def generate_thumbnails(node, children, context, attrs, carousel_id, inner_container_width)
+        thumbnails = attrs["thumbnails"]
+        return "" unless %w[visible supported].include?(thumbnails)
+
+        image_component = carousel_image_component
+        tb_width = thumbnail_width(attrs, children.length, inner_container_width)
+
+        with_inherited_mj_class(context, node) do
+          children.each_with_index.map do |child, index|
+            child_attrs = child_pass_through_attributes(child, context, attrs, tb_width)
+            image_component.render_thumbnail(
+              child,
+              attrs: child_attrs,
+              index: index,
+              carousel_id: carousel_id,
+              thumbnails: thumbnails,
+              tb_width: tb_width
+            )
+          end.join
+        end
+      end
+
+      def generate_carousel(node, children, context, attrs, carousel_id, inner_container_width)
+        <<~HTML
+          <table#{html_attrs(
+            "style" => style_join(
+              "caption-side" => "top",
+              "display" => "table-caption",
+              "table-layout" => "fixed",
+              "width" => "100%"
+            ),
+            "border" => "0",
+            "cellpadding" => "0",
+            "cellspacing" => "0",
+            "width" => "100%",
+            "role" => "presentation",
+            "class" => "mj-carousel-main"
+          )}>
+            <tbody>
+              <tr>
+                #{generate_controls("previous", attrs["left-icon"], carousel_id, children.length, attrs["icon-width"])}
+                #{generate_images(node, children, context, attrs, inner_container_width)}
+                #{generate_controls("next", attrs["right-icon"], carousel_id, children.length, attrs["icon-width"])}
+              </tr>
+            </tbody>
+          </table>
+        HTML
+      end
+
+      def generate_controls(direction, icon, carousel_id, child_count, icon_width)
+        parsed_icon_width = parse_pixel_value(icon_width).to_i
+
+        labels = (1..child_count).map do |index|
+          <<~HTML
+            <label#{html_attrs(
+              "for" => "mj-carousel-#{carousel_id}-radio-#{index}",
+              "class" => "mj-carousel-#{direction} mj-carousel-#{direction}-#{index}"
+            )}>
+              <img#{html_attrs(
+                "src" => icon,
+                "alt" => direction,
+                "style" => style_join(
+                  "display" => "block",
+                  "width" => icon_width,
+                  "height" => "auto"
+                ),
+                "width" => parsed_icon_width.to_s
+              )} />
+            </label>
+          HTML
+        end.join
+
+        <<~HTML
+          <td#{html_attrs(
+            "class" => "mj-carousel-#{carousel_id}-icons-cell",
+            "style" => style_join(
+              "font-size" => "0px",
+              "display" => "none",
+              "mso-hide" => "all",
+              "padding" => "0px"
+            )
+          )}>
+            <div#{html_attrs(
+              "class" => "mj-carousel-#{direction}-icons",
+              "style" => style_join(
+                "display" => "none",
+                "mso-hide" => "all"
+              )
+            )}>
+              #{labels}
+            </div>
+          </td>
+        HTML
+      end
+
+      def generate_images(node, children, context, attrs, inner_container_width)
+        image_component = carousel_image_component
+        images = with_inherited_mj_class(context, node) do
+          children.each_with_index.map do |child, index|
+            child_attrs = child_pass_through_attributes(child, context, attrs, nil)
+            image_component.render_item(
+              child,
+              attrs: child_attrs,
+              index: index,
+              container_width: inner_container_width,
+              visible: index.zero?
+            )
+          end.join
+        end
+
+        <<~HTML
+          <td#{html_attrs("style" => "padding:0px;")}>
+            <div#{html_attrs("class" => "mj-carousel-images")}>
+              #{images}
+            </div>
+          </td>
+        HTML
+      end
+
+      def render_fallback(node, first_child, context, attrs, inner_container_width)
+        return "" unless first_child
+
+        child_attrs = with_inherited_mj_class(context, node) do
+          child_pass_through_attributes(first_child, context, attrs, nil)
+        end
+        fallback = carousel_image_component.render_item(
+          first_child,
+          attrs: child_attrs,
+          index: 0,
+          container_width: inner_container_width,
+          visible: true
+        )
+        mso_conditional_tag(fallback)
+      end
+
+      def child_pass_through_attributes(child, context, parent_attrs, tb_width)
+        child_attrs = resolved_attributes(child, context)
+        pass_through = {
+          "border-radius" => parent_attrs["border-radius"],
+          "tb-border" => parent_attrs["tb-border"],
+          "tb-border-radius" => parent_attrs["tb-border-radius"]
+        }
+        pass_through["tb-width"] = tb_width if tb_width
+        pass_through.merge(child_attrs)
+      end
+
+      def carousel_images(node)
+        node.element_children.select { |child| child.tag_name == "mj-carousel-image" }
+      end
+
+      def carousel_image_component
+        renderer.send(:component_for, "mj-carousel-image")
+      end
+
+      def thumbnail_width(attrs, child_count, inner_container_width)
+        return attrs["tb-width"] if attrs["tb-width"] && !attrs["tb-width"].empty?
+        return "0px" if child_count.zero?
+
+        "#{[inner_container_width.to_f / child_count, 110].min}px"
+      end
+
+      def content_width(container_width, attrs)
+        total = parse_pixel_value(container_width || "600px")
+        total -= padding_side(attrs, "left")
+        total -= padding_side(attrs, "right")
+        [total, 0].max
+      end
+
+      def padding_side(attrs, side)
+        specific = attrs["padding-#{side}"]
+        return parse_pixel_value(specific) unless blank?(specific)
+
+        shorthand_padding_value(attrs["padding"], side)
+      end
+
+      def shorthand_padding_value(value, side)
+        return 0 if blank?(value)
+
+        parts = value.to_s.strip.split(/\s+/)
+        case parts.length
+        when 1
+          parse_pixel_value(parts[0])
+        when 2
+          %w[left right].include?(side) ? parse_pixel_value(parts[1]) : parse_pixel_value(parts[0])
+        when 3
+          %w[left right].include?(side) ? parse_pixel_value(parts[1]) : parse_pixel_value(side == "top" ? parts[0] : parts[2])
+        when 4
+          parse_pixel_value(parts[side == "left" ? 3 : 1])
+        else
+          0
+        end
+      end
+
+      def component_head_style(carousel_id, length, attrs)
+        return "" if length.zero?
+
+        hide_non_selected = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-radio:checked #{adjacent_siblings(index)}+ .mj-carousel-content .mj-carousel-image"
+        end.join(",\n")
+
+        show_selected = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-radio-#{index + 1}:checked #{adjacent_siblings(length - index - 1)}+ .mj-carousel-content .mj-carousel-image-#{index + 1}"
+        end.join(",\n")
+
+        next_icons = (0...length).map do |index|
+          target = ((index + 1) % length) + 1
+          ".mj-carousel-#{carousel_id}-radio-#{index + 1}:checked #{adjacent_siblings(length - index - 1)}+ .mj-carousel-content .mj-carousel-next-#{target}"
+        end.join(",\n")
+
+        previous_icons = (0...length).map do |index|
+          target = ((index - 1) % length) + 1
+          ".mj-carousel-#{carousel_id}-radio-#{index + 1}:checked #{adjacent_siblings(length - index - 1)}+ .mj-carousel-content .mj-carousel-previous-#{target}"
+        end.join(",\n")
+
+        selected_thumbnail = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-radio-#{index + 1}:checked #{adjacent_siblings(length - index - 1)}+ .mj-carousel-content .mj-carousel-#{carousel_id}-thumbnail-#{index + 1}"
+        end.join(",\n")
+
+        show_thumbnails = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-radio-#{index + 1}:checked #{adjacent_siblings(length - index - 1)}+ .mj-carousel-content .mj-carousel-#{carousel_id}-thumbnail"
+        end.join(",\n")
+
+        hide_on_hover = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-thumbnail:hover #{adjacent_siblings(length - index - 1)}+ .mj-carousel-main .mj-carousel-image"
+        end.join(",\n")
+
+        show_on_hover = (0...length).map do |index|
+          ".mj-carousel-#{carousel_id}-thumbnail-#{index + 1}:hover #{adjacent_siblings(length - index - 1)}+ .mj-carousel-main .mj-carousel-image-#{index + 1}"
+        end.join(",\n")
+
+        <<~CSS
+          .mj-carousel {
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            user-select: none;
+          }
+
+          .mj-carousel-#{carousel_id}-icons-cell {
+            display: table-cell !important;
+            width: #{attrs["icon-width"]} !important;
+          }
+
+          .mj-carousel-radio,
+          .mj-carousel-next,
+          .mj-carousel-previous {
+            display: none !important;
+          }
+
+          .mj-carousel-thumbnail,
+          .mj-carousel-next,
+          .mj-carousel-previous {
+            touch-action: manipulation;
+          }
+
+          #{hide_non_selected} {
+            display: none !important;
+          }
+
+          #{show_selected} {
+            display: block !important;
+          }
+
+          .mj-carousel-previous-icons,
+          .mj-carousel-next-icons,
+          #{next_icons},
+          #{previous_icons} {
+            display: block !important;
+          }
+
+          #{selected_thumbnail} {
+            border-color: #{attrs["tb-selected-border-color"]} !important;
+          }
+
+          #{show_thumbnails} {
+            display: inline-block !important;
+          }
+
+          .mj-carousel-image img + div,
+          .mj-carousel-thumbnail img + div {
+            display: none !important;
+          }
+
+          #{hide_on_hover} {
+            display: none !important;
+          }
+
+          .mj-carousel-thumbnail:hover {
+            border-color: #{attrs["tb-hover-border-color"]} !important;
+          }
+
+          #{show_on_hover} {
+            display: block !important;
+          }
+
+          .mj-carousel noinput { display:block !important; }
+          .mj-carousel noinput .mj-carousel-image-1 { display: block !important; }
+          .mj-carousel noinput .mj-carousel-arrows,
+          .mj-carousel noinput .mj-carousel-thumbnails { display: none !important; }
+
+          [owa] .mj-carousel-thumbnail { display: none !important; }
+
+          @media screen yahoo {
+            .mj-carousel-#{carousel_id}-icons-cell,
+            .mj-carousel-previous-icons,
+            .mj-carousel-next-icons {
+              display: none !important;
+            }
+
+            .mj-carousel-#{carousel_id}-radio-1:checked #{adjacent_siblings(length - 1)}+ .mj-carousel-content .mj-carousel-#{carousel_id}-thumbnail-1 {
+              border-color: transparent;
+            }
+          }
+        CSS
+      end
+
+      def adjacent_siblings(count)
+        "+ * " * count
+      end
+
+      def mso_conditional_tag(content, negation = false)
+        if negation
+          "<!--[if !mso]><!-->#{content}<!--<![endif]-->"
+        else
+          "<!--[if mso]>#{content}<![endif]-->"
+        end
+      end
+
+      def parse_pixel_value(value)
+        matched = value.to_s.match(/(-?\d+(?:\.\d+)?)/)
+        matched ? matched[1].to_f : 0.0
+      end
+
+      def blank?(value)
+        value.nil? || value.to_s.strip.empty?
+      end
+    end
+  end
+end

data/lib/mjml-rb/components/carousel_image.rb

@@ -0,0 +1,162 @@
+require_relative "base"
+
+module MjmlRb
+  module Components
+    class CarouselImage < Base
+      TAGS = ["mj-carousel-image"].freeze
+
+      ALLOWED_ATTRIBUTES = {
+        "alt" => "string",
+        "href" => "string",
+        "rel" => "string",
+        "target" => "string",
+        "title" => "string",
+        "src" => "string",
+        "thumbnails-src" => "string",
+        "border-radius" => "unit(px,%){1,4}",
+        "tb-border" => "string",
+        "tb-border-radius" => "unit(px,%){1,4}"
+      }.freeze
+
+      DEFAULT_ATTRIBUTES = {
+        "alt" => "",
+        "target" => "_blank"
+      }.freeze
+
+      def tags
+        TAGS
+      end
+
+      def render(tag_name:, node:, context:, attrs:, parent:)
+        render_item(
+          node,
+          attrs: DEFAULT_ATTRIBUTES.merge(attrs),
+          index: 0,
+          container_width: parse_pixel_value(context[:container_width] || "600px"),
+          visible: true
+        )
+      end
+
+      def render_radio(index:, carousel_id:)
+        input_attrs = {
+          "class" => "mj-carousel-radio mj-carousel-#{carousel_id}-radio mj-carousel-#{carousel_id}-radio-#{index + 1}",
+          "checked" => (index.zero? ? "checked" : nil),
+          "type" => "radio",
+          "name" => "mj-carousel-radio-#{carousel_id}",
+          "id" => "mj-carousel-#{carousel_id}-radio-#{index + 1}",
+          "style" => style_join(
+            "display" => "none",
+            "mso-hide" => "all"
+          )
+        }
+
+        %(<input#{html_attrs(input_attrs)} />)
+      end
+
+      def render_thumbnail(node, attrs:, index:, carousel_id:, thumbnails:, tb_width:)
+        a = DEFAULT_ATTRIBUTES.merge(attrs)
+        css_class = suffix_css_classes(a["css-class"], "thumbnail")
+        link_classes = [
+          "mj-carousel-thumbnail",
+          "mj-carousel-#{carousel_id}-thumbnail",
+          "mj-carousel-#{carousel_id}-thumbnail-#{index + 1}",
+          css_class
+        ].compact.reject(&:empty?).join(" ")
+
+        link_attrs = {
+          "style" => style_join(
+            "border" => a["tb-border"],
+            "border-radius" => a["tb-border-radius"],
+            "display" => (thumbnails == "supported" ? "none" : "inline-block"),
+            "overflow" => "hidden",
+            "width" => tb_width
+          ),
+          "href" => "##{index + 1}",
+          "target" => a["target"],
+          "class" => link_classes
+        }
+        label_attrs = {
+          "for" => "mj-carousel-#{carousel_id}-radio-#{index + 1}"
+        }
+        image_attrs = {
+          "style" => style_join(
+            "display" => "block",
+            "width" => "100%",
+            "height" => "auto"
+          ),
+          "src" => a["thumbnails-src"] || a["src"],
+          "alt" => a["alt"],
+          "width" => parse_pixel_value(tb_width).to_i.to_s
+        }
+
+        <<~HTML.chomp
+          <a#{html_attrs(link_attrs)}>
+            <label#{html_attrs(label_attrs)}>
+              #{build_img_tag(image_attrs)}
+            </label>
+          </a>
+        HTML
+      end
+
+      def render_item(node, attrs:, index:, container_width:, visible:)
+        a = DEFAULT_ATTRIBUTES.merge(attrs)
+        css_class = a["css-class"].to_s
+        classes = ["mj-carousel-image", "mj-carousel-image-#{index + 1}", css_class].reject(&:empty?).join(" ")
+        div_style = visible ? nil : style_join("display" => "none", "mso-hide" => "all")
+        img_attrs = {
+          "title" => a["title"],
+          "src" => a["src"],
+          "alt" => a["alt"],
+          "style" => style_join(
+            "border-radius" => a["border-radius"],
+            "display" => "block",
+            "width" => "#{container_width.to_i}px",
+            "max-width" => "100%",
+            "height" => "auto"
+          ),
+          "width" => container_width.to_i.to_s,
+          "border" => "0"
+        }
+        image_tag = build_img_tag(img_attrs)
+
+        content = if a["href"]
+                    link_attrs = {
+                      "href" => a["href"],
+                      "rel" => a["rel"],
+                      "target" => a["target"] || "_blank"
+                    }
+                    %(<a#{html_attrs(link_attrs)}>#{image_tag}</a>)
+                  else
+                    image_tag
+                  end
+
+        %(<div#{html_attrs("class" => classes, "style" => div_style)}>#{content}</div>)
+      end
+
+      private
+
+      def parse_pixel_value(value)
+        matched = value.to_s.match(/(-?\d+(?:\.\d+)?)/)
+        matched ? matched[1].to_f : 0.0
+      end
+
+      def suffix_css_classes(classes, suffix)
+        return nil if classes.nil? || classes.empty?
+
+        classes.split(/\s+/).map { |klass| "#{klass}-#{suffix}" }.join(" ")
+      end
+
+      def build_img_tag(attrs)
+        ordered_keys = %w[title src alt style width border]
+        rendered = ordered_keys.filter_map do |key|
+          next unless attrs.key?(key)
+          next if key != "alt" && (attrs[key].nil? || attrs[key].to_s.empty?)
+
+          %(#{key}="#{escape_attr(attrs[key].to_s)}")
+        end
+
+        "<img #{rendered.join(' ')} />"
+      end
+    end
+  end
+end

data/lib/mjml-rb/renderer.rb

@@ -5,6 +5,8 @@ require_relative "components/attributes"
 require_relative "components/body"
 require_relative "components/breakpoint"
 require_relative "components/button"
+require_relative "components/carousel"
+require_relative "components/carousel_image"
 require_relative "components/head"
 require_relative "components/hero"
 require_relative "components/image"
@@ -367,9 +369,43 @@ module MjmlRb
       declarations.each do |property, value|
         existing[property] = value
       end
+      normalize_background_fallbacks!(node, existing)
       node["style"] = existing.map { |property, value| "#{property}: #{value}" }.join("; ")
     end
 
+    def normalize_background_fallbacks!(node, declarations)
+      background_color = declarations["background-color"]
+      return if background_color.nil? || background_color.empty?
+
+      if syncable_background?(declarations["background"])
+        declarations["background"] = background_color
+      end
+
+      return unless node.name == "td"
+      return unless node["bgcolor"]
+      return if %w[none transparent].include?(background_color.downcase)
+
+      node["bgcolor"] = background_color
+    end
+
+    def syncable_background?(value)
+      return true if value.nil? || value.empty?
+
+      normalized = value.downcase
+      !normalized.include?("url(") &&
+        !normalized.include?("gradient(") &&
+        !normalized.include?("/") &&
+        !normalized.include?(" no-repeat") &&
+        !normalized.include?(" repeat") &&
+        !normalized.include?(" fixed") &&
+        !normalized.include?(" scroll") &&
+        !normalized.include?(" center") &&
+        !normalized.include?(" top") &&
+        !normalized.include?(" bottom") &&
+        !normalized.include?(" left") &&
+        !normalized.include?(" right")
+    end
+
     def append_component_head_styles(document, context)
       component_registry.each_value.uniq.each do |component|
         next unless component.respond_to?(:head_style)
@@ -406,6 +442,8 @@ module MjmlRb
         register_component(registry, Components::Breakpoint.new(self))
         register_component(registry, Components::Accordion.new(self))
         register_component(registry, Components::Button.new(self))
+        register_component(registry, Components::Carousel.new(self))
+        register_component(registry, Components::CarouselImage.new(self))
         register_component(registry, Components::Hero.new(self))
         register_component(registry, Components::Image.new(self))
         register_component(registry, Components::Navbar.new(self))

data/lib/mjml-rb/version.rb

@@ -1,3 +1,3 @@
 module MjmlRb
-  VERSION = "0.2.11".freeze
+  VERSION = "0.2.13".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mjml-rb
 version: !ruby/object:Gem::Version
-  version: 0.2.11
+  version: 0.2.13
 platform: ruby
 authors:
 - Andrei Andriichuk
@@ -59,6 +59,8 @@ files:
 - lib/mjml-rb/components/body.rb
 - lib/mjml-rb/components/breakpoint.rb
 - lib/mjml-rb/components/button.rb
+- lib/mjml-rb/components/carousel.rb
+- lib/mjml-rb/components/carousel_image.rb
 - lib/mjml-rb/components/column.rb
 - lib/mjml-rb/components/divider.rb
 - lib/mjml-rb/components/head.rb