coprl 0.1.0 → 3.0.0.beta.1

data/views/mdc/components/_form.erb

@@ -0,0 +1,14 @@
+<form role="form"
+      <% if comp.tag %>
+      data-input-tag="<%= comp.tag %>"
+      <% end %>
+      id="<%= comp.id %>"
+      class="v-form"
+      style='width: 100%'
+      onsubmit="javascript:void(0);return false;"
+      <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.id} if comp.events&.any? %>
+      data-is-container>
+  <div class="v-errors">
+    <%= partial "components/render", :locals => {:components => comp.components, :scope => nil} if comp.components.any? %>
+  </div>
+</form>

data/views/mdc/components/_grid.erb

@@ -0,0 +1,43 @@
+<%
+  @grid_nesting ||= 0
+  @grid_nesting += 1
+   @gutters ||= [true]
+   # gutters once turned off are turned off for all nested grids
+   @gutters.push comp.gutter.nil? ? @gutters.last : comp.gutter
+%>
+<div id="<%= comp.id %>"
+     <% if comp.tag %>
+     data-input-tag="<%= comp.tag %>"
+     <% end %>
+     class="v-grid mdc-layout-grid
+            <%= _padding_classes_(comp.padding, @grid_nesting) %>
+            <%= 'v-grid__wide' if comp.wide %>
+            <%= comp.css_class.join(' ') %>"
+     style="<%= "background-color: #{comp.color};" if comp.color %><%= "height:#{comp.height};" if comp.height %>"
+     <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} if comp.events&.any? %>>
+  <%= partial("components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(top both))%>
+
+  <div class="<%= @gutters.last ? nil : 'v-gutter-none' %> mdc-layout-grid__inner"
+       style="<%= "height:#{comp.height};" if comp.height %>">
+    <% comp.columns.each do |col|
+      span = "mdc-layout-grid__cell--span-#{col.size}"
+      %i(desktop tablet phone).each do |device|
+        span << " mdc-layout-grid__cell--span-#{col.send(device)}-#{device}" if col.send(device)
+      end
+     %>
+      <div id="<%= col.id %>" class="v-column mdc-layout-grid__cell <%= span %>
+                          <%= col.overflow ? nil : 'v-column-hide-overflow' %>
+                          <%= _padding_classes_(col.padding) %> v-column--relative <%= _alignment_class_(col.align) %> <%= col.css_class.join(' ') %>"
+           style="<%= "background-color: #{col.color};" if col.color %><%= "height:#{comp.height};" if comp.height %>"
+        <%= partial "components/event", :locals => {comp: col, events: col.events, parent_id: col.event_parent_id} if col.events&.any? %>>
+        <%= partial("components/progress", :locals => {:comp => col.progress}) if col.progress && includes_one?(Array(col.progress.position), %i(top both))%>
+        <%= partial "components/render", :locals => {:components => col.components, :scope => nil} if col.components.any? %>
+        <%= partial("components/progress", :locals => {:comp => col.progress}) if col.progress && includes_one?(Array(col.progress.position), %i(bottom both))%>
+      </div>
+    <% end %>
+  </div>
+  <%= partial("components/progress", :locals => {:comp => comp.progress}) if comp.progress && includes_one?(Array(comp.progress.position), %i(bottom both))%>
+</div>
+<% @grid_nesting -= 1
+   @gutters.pop
+%>

data/views/mdc/components/_headline.erb

@@ -0,0 +1,4 @@
+<% if comp %>
+<% class_name = '' unless bound_locals_include?(:class_name, binding)  %>
+<%= partial "components/typography", :locals => {comp: comp, type: comp.type, class_name: class_name} %>
+<% end %>

data/views/mdc/components/_hidden_field.erb

@@ -0,0 +1,5 @@
+<input class="v-input v-hidden-field"
+       type="hidden"
+       <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+       <% if comp.dirtyable %>data-dirtyable<% end %>
+       id="<%= comp.id %>" name="<%= comp.name %>" value="<%= comp.value %>"/>

data/views/mdc/components/_icon.erb

@@ -0,0 +1,35 @@
+<% class_name = '' unless bound_locals_include?(:class_name, binding)
+   data = nil unless bound_locals_include?(:data, binding)
+%>
+<% if comp
+     parent_id = comp.event_parent_id unless bound_locals_include?(:parent_id, binding)
+     icon_name = comp.icon unless bound_locals_include?(:icon_name, binding)
+     events = comp.events unless bound_locals_include?(:events, binding)
+     position = comp.position unless bound_locals_include?(:position, binding)
+     position ||= []
+     position_classes = position.map {|p| "v-icon-position-#{p}"}.join(' ')
+     class_name= "#{class_name} #{position_classes}"
+     if icon_name =~ /^(fa[srlb]\s)*fa-/
+       icon_class_name = "#{icon_name} v-icon__fa"
+       icon_class_name = "fas #{icon_class_name}" unless icon_class_name=~ /^(fas)|(fal)|(fab)/
+       icon = ''
+     else
+       icon_class_name = "material-icons"
+       icon = icon_name
+     end
+     size_class = "v-icon-size-#{comp.size}" unless bound_locals_include?(:size_class, binding)
+%>
+  <i id="<%= comp.id %>"
+     class="<%= class_name %> <%= icon_class_name %> <%= size_class %>
+            <%= 'v-hidden' if comp.respond_to?(:hidden) && comp.hidden %>
+            <%= 'v-actionable' if comp.events %>
+            <%= color_classname(comp) %>"
+      <%= "data-#{data}" if data %>
+      style="<%= color_style(comp) %>"
+      <%= 'tabindex="0"' if comp.events %>
+      <%= partial "components/event", :locals => {comp: comp, events: events, parent_id: parent_id} if events&.any? %>>
+    <%= icon %>
+  </i>
+  <%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+  <%= expand_text(comp.text) if comp.respond_to?(:text) %>
+<% end %>

data/views/mdc/components/_icon_toggle.erb

@@ -0,0 +1,16 @@
+<button id="<%= comp.id %>"
+   class="v-icon-toggle mdc-icon-button
+       <%= 'mdc-icon-button--on' if comp.checked %>"
+   <%= 'disabled' if comp.disabled %>
+   role="button"
+   aria-disabled="<%= comp.disabled %>"
+   aria-pressed="<%= comp.checked %>"
+   data-checked="<%= comp.checked %>"
+   aria-label="" tabindex="0"
+   data-name="<%= comp.name %>"
+   data-off="<%= comp.off_value %>"
+   <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} if comp.events&.any? %>>
+  <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on"><%= comp.on_icon  %></i>
+  <i class="material-icons mdc-icon-button__icon"><%= comp.icon  %></i>
+</button>
+<%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>

data/views/mdc/components/_image.erb

@@ -0,0 +1,25 @@
+<% if comp
+     fit_class = comp.fit ? "v-image--fit-#{comp.fit}" : ''
+     position = comp.position ? comp.position.map(&:to_s).join(' ') : nil
+     styles = {
+          'min-width' => (comp.min_width if comp.min_width),
+          'width' => (comp.width if comp.width),
+          'max-width' => (comp.max_width if comp.max_width),
+          'min-height' => (comp.min_height if comp.min_height),
+          'height' => (comp.height if comp.height),
+          'max-height' => (comp.max_height if comp.max_height),
+          'border' => ("#{comp.border} solid" if comp.border),
+          'border-color' => (comp.border_color if comp.border_color),
+          'border-radius' => (comp.border_radius if comp.border_radius),
+          'object-position' => (position unless position.empty?)
+     }.compact
+%>
+<img id="<%= comp.id %>"
+     class="v-image <%= fit_class %> <%= 'v-actionable' if comp.events %>"
+     src="<%= comp.url %>"
+     <% if comp.description %>alt="<%= comp.description %>"<% end %>
+     style="<%= styles.map { |k, v| "#{k}: #{v}" }.join('; ') %>"
+     draggable="false"
+     <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} if comp.events&.any? %>>
+<%= partial "components/tooltip" , :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+<% end %>

data/views/mdc/components/_image_list.erb

@@ -0,0 +1,38 @@
+<%
+  types = {
+      'standard' => '',
+      'text-protection' => 'mdc-image-list--with-text-protection',
+      'masonry' => 'mdc-image-list--masonry'
+  }
+%>
+
+<ul class="mdc-image-list <%= types[comp.list_type] %> v-image-list-<%= comp.list_type %>-<%= comp.columns %>">
+  <% for image in comp.images %>
+    <%
+      styles = {
+        'border-width' => ("#{image.border}" if image.border),
+        'border-style' => ('solid' if image.border),
+        'border-radius' => (image.border_radius if image.border_radius)
+      }.compact
+    %>
+    <li class="mdc-image-list__item" <%= "style='margin: #{comp.spacing}'" if comp.spacing %>>
+      <% if comp.list_type != 'masonry' %><div class="mdc-image-list__image-aspect-container"><% end %>
+        <img id="<%= image.id %>"
+             class="mdc-image-list__image
+                    <%= 'v-actionable' if image.events %>
+                    <%= "v-image-list__border-#{image.border_color}"  if image.border_color %>"
+             src="<%= image.url %>"
+             <% if image.description %>alt="<%= image.description %>"<% end %>
+             style="<%= styles.map { |k, v| "#{k}: #{v}" }.join('; ') %>"
+             draggable="false"
+             <%= partial "components/event", :locals => {comp: image, events: image.events, parent_id: image.event_parent_id} if image.events&.any? %>>
+        <%= partial "components/tooltip" , :locals => {comp: image.tooltip, parent_id: image.id} if image.tooltip %>
+      <% if comp.list_type != 'masonry' %></div><% end %>
+      <% if image.label %>
+        <div class="mdc-image-list__supporting">
+          <span class="mdc-image-list__label"><%= image.label %></span>
+        </div>
+      <% end %>
+    </li>
+    <% end %>
+</ul>

data/views/mdc/components/_link.erb

@@ -0,0 +1,4 @@
+<% target = "_#{comp.target}" %>
+<% if comp %>
+    <a href="<%= comp.url %>" target="<%= target %>"><%= comp.text %></a>
+<% end %>

data/views/mdc/components/_list.erb

@@ -0,0 +1,20 @@
+<% unless comp.lines_only %>
+  <ul id="<%= comp.id %>"
+      class="mdc-list
+            <%= 'mdc-list--dense' if comp.dense %>
+            <%= 'mdc-list--two-line' if comp.lines.select{|line| eq(line.type, :line) && line.subtitle }.any? %>
+            <%= 'mdc-list--avatar-list' if comp.lines.select{|line| eq(line.type, :line) && line.avatar }.any? %>
+            <%= 'v-list__border' if comp.border %>"
+      style="<%= "background-color: #{comp.color};" if comp.color %>"
+      data-total-lines="<%= comp.total_lines %>"
+      <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.id} if comp.events&.any? %>>
+<% end %>
+<% for line in comp.lines %>
+  <%= partial "components/list/#{line.type}", :locals => {:list => comp, :line => line} %>
+<% end %>
+<%= partial "components/render", :locals => {:components => comp.components, :scope => nil} if comp.components.any? %>
+<% unless comp.lines_only %>
+  </ul>
+<% end %>
+
+

data/views/mdc/components/_menu.erb

@@ -0,0 +1,45 @@
+<% if comp %>
+  <div class='v-menu'
+       data-placement="<%= comp.placement %>"
+       <%= "data-right-offset=9999" if eq(comp.position, :right) %>>
+  <% if comp.label %>
+    <div class="mdc-menu-anchor">
+      <span class="v-menu-click">
+        <%= expand_text(comp.label.text) %>
+        <%= partial("components/icon", locals: {comp: comp.label.icon}) if comp.label.icon %>
+      </span>
+  <% end %>
+  <div id="<%= comp.id %>"
+       class="mdc-menu mdc-menu-surface
+              <%='mdc-menu--open' if comp.open %>"
+       <%= 'data-hoist="false"' if !comp.hoisted %>
+       style="position: absolute;" tabindex="-1">
+    <ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true">
+      <% comp.items.each do |item| %>
+        <% unless eq(item.type, :divider) %>
+          <li id="<%= item.id %>"
+              class="mdc-list-item
+                     <%= 'v-menu-item__selected' if item.selected %>
+                     <% if item.disabled %>mdc-list-item--disabled<% end %>"
+              role="menuitem"
+              tabindex="0"
+              <%= 'disabled' if item.disabled %>
+              <%= partial "components/event", :locals => {comp: item, events: item.events, parent_id: item.event_parent_id} if !item.disabled && item.events&.any? %>>
+            <a class="v-menu-link"
+                             id="<%= item.id %>"
+                             href="javascript:void(0)">
+            <%= expand_text(item.text) %>
+            </a>
+            <%= partial("components/icon", locals: {comp: item.icon, position: [:right, :center]}) if item.icon %>
+          </li>
+        <% else %>
+          <li class="mdc-list-divider" role="separator"></li>
+        <% end %>
+      <% end %>
+    </ul>
+  </div>
+  <% if comp.label %>
+    </div>
+  <% end %>
+  </div>
+<% end %>

data/views/mdc/components/_multi_select.erb

@@ -0,0 +1,33 @@
+<% if comp
+     float_label = comp.options.select{|o| o.selected }.any?
+%>
+  <div class="v-multi-select-container"
+       <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+       <% if comp.dirtyable %>data-dirtyable<% end %>>
+    <div class="v-multi-select--options-list v-hidden">
+      <% comp.options.each do |option| %>
+        <%= partial "components/checkbox", :locals => {comp: option.checkbox, class_name: 'v-multi-select--option'} if option.checkbox %>
+      <% end %>
+    </div>
+    <div class="mdc-select v-multi-select v-input
+                <%= 'mdc-select--outlined' if comp.outlined %>
+                <% if comp.disabled %>mdc-select--disabled<% end %>"
+         <%= 'style="width: 100%;"' if comp.full_width %>
+         <%= partial("components/event", locals: {comp: comp,
+                                               events: comp.events,
+                                               parent_id: "#{comp.id}-input"}) if comp.events&.any? %>>
+      <%= partial "components/icon", :locals => {comp: comp.icon, class_name: 'mdc-select__icon', parent_id: "#{comp.id}-input", size_class: '', position: []} if comp.icon %>
+      <div class="v-multi-select--current-values"></div>
+      <i class="mdc-select__dropdown-icon v-multi-select--options-toggle"></i>
+      <div class="mdc-notched-outline mdc-notched-outline--upgraded mdc-notched-outline--notched">
+        <div class="mdc-notched-outline__leading"></div>
+        <div class="mdc-notched-outline__notch">
+          <label class="mdc-floating-label <%= 'mdc-floating-label--float-above' if float_label %>"><%= comp.label %></label>
+        </div>
+        <div class="mdc-notched-outline__trailing"></div>
+      </div>
+    </div>
+    <%= partial "components/shared/hint_error_display", :locals => {comp: comp} %>
+    <%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+  </div>
+<% end %>

data/views/mdc/components/_number_field.erb

@@ -0,0 +1,38 @@
+<% if comp
+     leading_icon = comp.icon && comp.icon.position.select { |p| eq(p, :left) }.any?
+     trailing_icon = comp.icon && comp.icon.position.select {|p| eq(p, :right)}.any?
+     auto_complete = comp.auto_complete&.to_sym == :off ? 'extra-off' : comp.auto_complete
+%>
+  <div id="<%= comp.id %>"
+       <%= "data-input-tag='#{comp.tag}'" if comp.tag %>
+       <%= 'data-dirtyable' if comp.dirtyable %>
+       class="v-input v-text-field v-focusable mdc-text-field mdc-text-field--outlined
+            <%= 'mdc-text-field--with-leading-icon' if leading_icon %>
+            <%= 'mdc-text-field--with-trailing-icon' if trailing_icon %>
+            <%= 'mdc-text-field--disabled' if comp.disabled %>"
+       style="<%= 'width:100%' if comp.full_width %>">
+
+    <input id="<%= comp.id %>-input"
+           name="<%= comp.name %>"
+           type="number"
+           <%= "min='#{comp.min}'" if comp.min %>
+           <%= "max='#{comp.max}'" if comp.max %>
+           <%= "step='#{comp.step}'" if comp.step %>
+           <%= 'readonly' if comp.readonly %>
+           value="<%= comp.value %>"
+           class="mdc-text-field__input"
+           aria-controls="<%= comp.id %>-input-helper-text"
+           <% if comp.disabled %>disabled
+           <% end %>
+           <%= 'required' if comp.required %>
+           <%= "pattern='#{comp.pattern}'" if comp.pattern %>
+           autocomplete="<%= auto_complete %>"
+           <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: "#{comp.id}-input"} if comp.events&.any? %>>
+
+    <%= partial "components/icon", :locals => {comp: comp.icon, class_name: 'mdc-text-field__icon', parent_id: "#{comp.id}-input"} if comp.icon %>
+    <%= partial "components/shared/input_label", :locals => {comp: comp} %>
+  </div>
+  <%= partial "components/shared/hint_error_display", :locals => {comp: comp} %>
+  <%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+<% end %>
+

data/views/mdc/components/_overline.erb

@@ -0,0 +1,2 @@
+<% class_name = '' unless bound_locals_include?(:class_name, binding)  %>
+<%= partial "components/typography", :locals => {comp: comp, type: comp.type, class_name: class_name} if comp %>

data/views/mdc/components/_page_title.erb

@@ -0,0 +1,4 @@
+<h1 id=<%= comp.id %> class="v-page-title">
+  <%= partial "components/render", :locals => {:components => comp.components, :scope => nil} if comp.components.any? %>
+  <%= expand_text(comp.text) %>
+</h1>

data/views/mdc/components/_progress.erb

@@ -0,0 +1,11 @@
+<div id="<%= comp.id %>" role="progressbar" class="v-progress mdc-linear-progress mdc-linear-progress--indeterminate mdc-linear-progress--closed"
+     data-hidden="<%= comp.hidden %>">
+  <div class="mdc-linear-progress__buffering-dots"></div>
+  <div class="mdc-linear-progress__buffer"></div>
+  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
+    <span class="mdc-linear-progress__bar-inner"></span>
+  </div>
+  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
+    <span class="mdc-linear-progress__bar-inner"></span>
+  </div>
+</div>

data/views/mdc/components/_radio_button.erb

@@ -0,0 +1,20 @@
+<div class="v-form-field mdc-form-field">
+  <div id="<%= comp.id %>"
+       <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+       <% if comp.dirtyable %>data-dirtyable<% end %>
+       class="v-radio mdc-radio v-input">
+    <input class="mdc-radio__native-control"
+           type="radio"
+           id="<%= comp.id %>-input"
+           <% if comp.value %>value="<%= comp.value %>"<% end %>
+           name="<%= comp.name %>"
+           <%if comp.checked%> checked<%end%><%if comp.disabled%> disabled<%end%>
+           <%= partial "components/event", :locals => {comp: comp, events: comp.events, parent_id: comp.event_parent_id} if comp.events&.any? %>>
+    <div class="mdc-radio__background">
+      <div class="mdc-radio__outer-circle"></div>
+      <div class="mdc-radio__inner-circle"></div>
+    </div>
+  </div>
+  <label for="<%=comp.id%>-input"><%=comp.text%></label>
+  <%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id } if comp.tooltip %>
+</div>

data/views/mdc/components/_render.erb

@@ -0,0 +1,3 @@
+<% components.each_with_index do |comp, index| %>
+  <%= render_component(scope, comp, components, index) if comp %>
+<% end %>

data/views/mdc/components/_rich_text_area.erb

@@ -0,0 +1,22 @@
+<div class="v-rich-text-area-container v-input"
+     id="<%= comp.id %>"
+     <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+     <% if comp.dirtyable %>data-dirtyable<% end %>
+     <% if comp.height %>data-initial-height="<%= comp.height %>"<% end %>
+     <% if comp.resizable %>data-resizable<% end %>
+     <% if comp.disabled %>disabled<% end %>>
+  <label for="<%= comp.id %>-rta"><%= expand_text(comp.label) %></label>
+  <div class="v-rich-text-area"
+       id="<%= comp.id %>-rta"
+       style="<%= 'width: 100%;' if comp.full_width %>"
+       data-name="<%= comp.name %>"
+       <%= "data-placeholder='#{comp.placeholder}'" if comp.placeholder %>>
+    <%= comp.value %>
+  </div>
+  <span class="mdl-textfield__error" ><%= comp.hint%></span>
+  <p id="<%= comp.id %>-input-helper-text" class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg" aria-hidden="true">
+    <%= comp.hint %>
+  </p>
+  <div class="v-hidden v-rich-text-area--fixed-up-content" hidden aria-hidden="true"></div>
+  <%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+</div>

data/views/mdc/components/_select.erb

@@ -0,0 +1,43 @@
+<% if comp
+  float_label = comp.options.select{|o| o.selected }.any?
+%>
+  <div class="mdc-select v-select v-input
+              <%= 'mdc-select--outlined' if comp.outlined %>
+              <% if comp.disabled %>mdc-select--disabled<% end %>"
+       <% if comp.tag %>data-input-tag="<%= comp.tag %>"<% end %>
+       <% if comp.dirtyable %>data-dirtyable<% end %>
+       <%= 'style="width: 100%;"' if comp.full_width %>>
+    <%= partial "components/icon", :locals => {comp: comp.icon, class_name: 'mdc-select__icon', parent_id: "#{comp.id}-input", size_class: '', position: []} if comp.icon %>
+    <i class="mdc-select__dropdown-icon"></i>
+    <select id="<%= comp.id %>-input"
+            <% if comp.name %> name="<%= comp.name %>" <% end %>
+            <% if comp.required %>required<% end %>
+            <% if comp.disabled %>disabled<% end %>
+            class="mdc-select__native-control"
+            <%= partial("components/event", locals: {comp: comp,
+                                                  events: comp.events,
+                                                  parent_id: "#{comp.id}-input"}) if comp.events&.any? %>>
+      <% comp.options.each do |option| %>
+        <option value="<%= option.value %>"
+                <%= 'disabled' if option.disabled %>
+                <%= 'selected' if option.selected %>>
+          <%= option.text %>
+        </option>
+      <% end %>
+    </select>
+    <% if comp.outlined %>
+      <div class="mdc-notched-outline">
+        <div class="mdc-notched-outline__leading"></div>
+        <div class="mdc-notched-outline__notch">
+          <label class="mdc-floating-label <%= 'mdc-floating-label--float-above' if float_label %>"><%= comp.label %></label>
+        </div>
+        <div class="mdc-notched-outline__trailing"></div>
+      </div>
+    <% else %>
+      <label class="mdc-floating-label <%= 'mdc-floating-label--float-above' if float_label %>"><%= comp.label %></label>
+      <div class="mdc-line-ripple"></div>
+    <% end %>
+  </div>
+  <%= partial "components/shared/hint_error_display", :locals => {comp: comp} %>
+  <%= partial "components/tooltip", :locals => {comp: comp.tooltip, parent_id: comp.id} if comp.tooltip %>
+<% end %>