myg 2.10.3 → 2.10.4

data/app/views/mozaic/myg/_drawer.html.erb

@@ -1,7 +1,7 @@
 <% html = {
-    class: ['myg-drawer mdc-drawer mdc-drawer--temporary', options[:class]].join(' ')
+  class: ['myg-drawer mdc-drawer mdc-drawer--temporary', options[:class]].join(' ')
 } %>
 
 <%= content_tag 'aside', options.merge(html) do %>
-    <%= block %>
+  <%= block %>
 <% end %>

data/app/views/mozaic/myg/_form-field.html.erb

@@ -1,64 +1,64 @@
-<% wrapper_html = {
-    class: [('myg-form-field' unless options[:file]), ('-inline-label' if options[:inline_label]), ('-floating-label' if options[:floating_label]), ('myg-form-field--file' if options[:file]), options.dig(:wrapper_html, :class)].join(' ')
-} %>
-<% if options[:floating_label] %><% input_html = {
-    class_name: options[:class_name],
-    attribute: options[:attribute],
-    identifier: options[:identifier],
-    placeholder: options[:floating_label]
-} %><% else %><% input_html = {
-    class_name: options[:class_name],
-    attribute: options[:attribute],
-    identifier: options[:identifier]
-} %><% end %>
-<% input_defaults = {
-    type: ('file' if options[:file])
-} %>
-<% label_html = {
-    class_name: options[:class_name],
-    attribute: options[:attribute],
-    identifier: options[:identifier]
-} %>
-<% label_secondary_html = label_html.merge({
-    class: ['myg-label--secondary', options.dig(:label_html, :class)].join(' ')
-}) %>
-<% label_wrapper_html = {
-    class: ['myg-label__container', options.dig(:label_wrapper_html, :class)].join(' ')
-} %>
-
-<%= content_tag 'div', (options[:wrapper_html] || {}).merge(wrapper_html) do %>
-    <% if options[:label] %>
-        <% unless options[:label].is_a? Array %>
-            <%= component 'myg/label', (options[:label_html] || {}).merge(label_html) do %><%= options[:label].html_safe %><% end %>
-        <% else %>
-            <%= content_tag 'div', (options[:label_wrapper_html] || {}).merge(label_wrapper_html) do %>
-                <% options[:label].each_with_index do |label, index| %>
-                    <%= component 'myg/label', (options[:label_html] || {}).merge((index == 0 ? label_html : label_secondary_html)) do %><%= label.html_safe %><% end %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-    <% if options[:floating_label] %>
-        <%= content_tag 'div', class: 'myg-input__container' do %>
-            <%= component "myg/#{options[:as]}", input_defaults.merge((options[:input_html] || {}).merge(input_html)) %>
-            <%= component 'myg/label', (options[:label_html] || {}).merge(label_html) do %><%= options[:floating_label] %><% end %>
-        <% end %>
-    <% else %>
-        <%= component "myg/#{options[:as]}", input_defaults.merge((options[:input_html] || {}).merge(input_html)) %>
-        <% if options[:file] %><%= component 'myg/label', (options[:label_html] || {}).merge(label_html) do %><%= options[:file] %><% end %><% end %>
-    <% end %>
-    <% if options[:inline_label] %>
-        <% unless options[:inline_label].is_a? Array %>
-            <%= component 'myg/label', (options[:label_html] || {}).merge(label_html) do %><%= options[:inline_label] %><% end %>
-        <% else %>
-            <%= content_tag 'div', (options[:label_wrapper_html] || {}).merge(label_wrapper_html) do %>
-                <% options[:inline_label].each_with_index do |label, index| %>
-                    <%= component 'myg/label', (options[:label_html] || {}).merge((index == 0 ? label_html : label_secondary_html)) do %><%= label.html_safe %><% end %>
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-    <% if options[:hint] %>
-        <%= component 'myg/hint', options[:hint_html] || {} do %><%= options[:hint].html_safe %><% end %>
-    <% end %>
-<% end %>
+<% wrapper_html = {
+  class: [('myg-form-field' unless options[:file]), ('-inline-label' if options[:inline_label]), ('-floating-label' if options[:floating_label]), ('myg-form-field--file' if options[:file]), options.dig(:wrapper_html, :class)].join(' ')
+} %>
+<% if options[:floating_label] %><% input_html = {
+  class_name: options[:class_name],
+  attribute: options[:attribute],
+  identifier: options[:identifier],
+  placeholder: options[:floating_label]
+} %><% else %><% input_html = {
+  class_name: options[:class_name],
+  attribute: options[:attribute],
+  identifier: options[:identifier]
+} %><% end %>
+<% input_defaults = {
+  type: ('file' if options[:file])
+} %>
+<% label_html = {
+  class_name: options[:class_name],
+  attribute: options[:attribute],
+  identifier: options[:identifier]
+} %>
+<% label_secondary_html = label_html.merge({
+  class: ['myg-label--secondary', options.dig(:label_html, :class)].join(' ')
+}) %>
+<% label_wrapper_html = {
+  class: ['myg-label__container', options.dig(:label_wrapper_html, :class)].join(' ')
+} %>
+
+<%= content_tag 'div', (options[:wrapper_html] || {}).merge(wrapper_html) do %>
+  <% if options[:label] %>
+    <% unless options[:label].is_a? Array %>
+      <%= component 'myg/label', (options[:label_html] || {}).merge(label_html) do %><%= options[:label].html_safe %><% end %>
+    <% else %>
+      <%= content_tag 'div', (options[:label_wrapper_html] || {}).merge(label_wrapper_html) do %>
+        <% options[:label].each_with_index do |label, index| %>
+          <%= component 'myg/label', (options[:label_html] || {}).merge((index == 0 ? label_html : label_secondary_html)) do %><%= label.html_safe %><% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if options[:floating_label] %>
+    <%= content_tag 'div', class: 'myg-input__container' do %>
+      <%= component "myg/#{options[:as]}", input_defaults.merge((options[:input_html] || {}).merge(input_html)) %>
+      <%= component 'myg/label', (options[:label_html] || {}).merge(label_html) do %><%= options[:floating_label] %><% end %>
+    <% end %>
+  <% else %>
+    <%= component "myg/#{options[:as]}", input_defaults.merge((options[:input_html] || {}).merge(input_html)) %>
+    <% if options[:file] %><%= component 'myg/label', (options[:label_html] || {}).merge(label_html) do %><%= options[:file] %><% end %><% end %>
+  <% end %>
+  <% if options[:inline_label] %>
+    <% unless options[:inline_label].is_a? Array %>
+      <%= component 'myg/label', (options[:label_html] || {}).merge(label_html) do %><%= options[:inline_label] %><% end %>
+    <% else %>
+      <%= content_tag 'div', (options[:label_wrapper_html] || {}).merge(label_wrapper_html) do %>
+        <% options[:inline_label].each_with_index do |label, index| %>
+          <%= component 'myg/label', (options[:label_html] || {}).merge((index == 0 ? label_html : label_secondary_html)) do %><%= label.html_safe %><% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if options[:hint] %>
+    <%= component 'myg/hint', options[:hint_html] || {} do %><%= options[:hint].html_safe %><% end %>
+  <% end %>
+<% end %>

data/app/views/mozaic/myg/_hint.html.erb

@@ -1,7 +1,7 @@
-<% html = {
-    class: ['myg-hint', options[:class]].join(' ')
-} %>
-
-<%= content_tag 'div', options.merge(html) do %>
-    <%= block.html_safe %>
-<% end %>
+<% html = {
+  class: ['myg-hint', options[:class]].join(' ')
+} %>
+
+<%= content_tag 'div', options.merge(html) do %>
+  <%= block.html_safe %>
+<% end %>

data/app/views/mozaic/myg/_input.html.erb

@@ -1,15 +1,15 @@
-<% class_name = options.delete :class_name %>
-<% attribute = options.delete :attribute %>
-<% identifier = options.delete :identifier %>
-<% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
-<% id = [class_name, identifier, attribute].map { |s| s.to_s.downcase }.join('_').tr('[', '_').tr(']', '_') %>
-<% html = {
-    class: ['myg-input', options[:class]].join(' '),
-    name: name,
-    id: id
-} %>
-<% defaults = {
-    type: (attribute.to_s == 'email' || attribute.to_s == 'password' ? attribute : 'text')
-} %>
-
-<%= tag 'input', defaults.merge(options.merge(html)) %>
+<% class_name = options.delete :class_name %>
+<% attribute = options.delete :attribute %>
+<% identifier = options.delete :identifier %>
+<% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
+<% id = [class_name, identifier, attribute].map { |s| s.to_s.downcase }.join('_').tr('[', '_').tr(']', '_') %>
+<% html = {
+  class: ['myg-input', options[:class]].join(' '),
+  name: name,
+  id: id
+} %>
+<% defaults = {
+  type: (attribute.to_s == 'email' || attribute.to_s == 'password' ? attribute : 'text')
+} %>
+
+<%= tag 'input', defaults.merge(options.merge(html)) %>

data/app/views/mozaic/myg/_label.html.erb

@@ -1,12 +1,12 @@
-<% class_name = options.delete :class_name %>
-<% attribute = options.delete :attribute %>
-<% identifier = options.delete :identifier %>
-<% id = [class_name, identifier, attribute].map { |s| s.to_s.downcase }.join('_').tr('[', '_').tr(']', '_') %>
-<% html = {
-    class: ['myg-label', options[:class]].join(' '),
-    for: id
-} %>
-
-<%= content_tag 'label', options.merge(html) do %>
-    <%= block.html_safe %>
-<% end %>
+<% class_name = options.delete :class_name %>
+<% attribute = options.delete :attribute %>
+<% identifier = options.delete :identifier %>
+<% id = [class_name, identifier, attribute].map { |s| s.to_s.downcase }.join('_').tr('[', '_').tr(']', '_') %>
+<% html = {
+  class: ['myg-label', options[:class]].join(' '),
+  for: id
+} %>
+
+<%= content_tag 'label', options.merge(html) do %>
+  <%= block.html_safe %>
+<% end %>

data/app/views/mozaic/myg/_progress.html.erb

@@ -1,15 +1,15 @@
-<% html = {
-    class: ['myg-progress mdc-linear-progress', ('mdc-linear-progress--indeterminate' if options.delete(:indeterminate)), options[:class]].join(' '),
-    role: 'progressbar'
-} %>
-
-<%= content_tag 'div', options.merge(html) do %>
-    <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>
-<% end %>
+<% html = {
+  class: ['myg-progress mdc-linear-progress', ('mdc-linear-progress--indeterminate' if options.delete(:indeterminate)), options[:class]].join(' '),
+  role: 'progressbar'
+} %>
+
+<%= content_tag 'div', options.merge(html) do %>
+  <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>
+<% end %>

data/app/views/mozaic/myg/_radio.html.erb

@@ -1,24 +1,24 @@
-<% class_name = options.delete :class_name %>
-<% attribute = options.delete :attribute %>
-<% identifier = options.delete :identifier %>
-<% value = options.delete :value %>
-<% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
-<% id = [class_name, identifier, attribute, value].map { |s| s.to_s.downcase }.join('_').tr('[', '_').tr(']', '_') %>
-<% wrapper_html = {
-    class: ['myg-radio mdc-radio', options.dig(:wrapper_html, :class), ('mdc-radio--disabled' if options.dig(:input_html, :disabled))].join(' ')
-} %>
-<% input_html = {
-    type: 'radio',
-    class: ['mdc-radio__native-control', options.dig(:input_html, :class)].join(' '),
-    value: value,
-    name: name,
-    id: id
-} %>
-
-<%= content_tag 'div', (options[:wrapper_html] || {}).merge(wrapper_html) do %>
-    <%= tag 'input', (options[:input_html] || {}).merge(input_html) %>
-    <div class="mdc-radio__background">
-        <div class="mdc-radio__outer-circle"></div>
-        <div class="mdc-radio__inner-circle"></div>
-    </div>
-<% end %>
+<% class_name = options.delete :class_name %>
+<% attribute = options.delete :attribute %>
+<% identifier = options.delete :identifier %>
+<% value = options.delete :value %>
+<% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
+<% id = [class_name, identifier, attribute, value].map { |s| s.to_s.downcase }.join('_').tr('[', '_').tr(']', '_') %>
+<% wrapper_html = {
+  class: ['myg-radio mdc-radio', options.dig(:wrapper_html, :class), ('mdc-radio--disabled' if options.dig(:input_html, :disabled))].join(' ')
+} %>
+<% input_html = {
+  type: 'radio',
+  class: ['mdc-radio__native-control', options.dig(:input_html, :class)].join(' '),
+  value: value,
+  name: name,
+  id: id
+} %>
+
+<%= content_tag 'div', (options[:wrapper_html] || {}).merge(wrapper_html) do %>
+  <%= tag 'input', (options[:input_html] || {}).merge(input_html) %>
+  <div class="mdc-radio__background">
+    <div class="mdc-radio__outer-circle"></div>
+    <div class="mdc-radio__inner-circle"></div>
+  </div>
+<% end %>

data/app/views/mozaic/myg/_slider.html.erb

@@ -1,27 +1,27 @@
 <% html = {
-    class: ['myg-slider mdc-slider', options[:class], ('mdc-slider--discrete' if options[:discrete])].join(' '),
-    tabindex: 0,
-    role: 'slider',
-    aria: {
-        valuemin: options[:min],
-        valuemax: options[:max],
-        valuenow: options[:value],
-        label: options[:label],
-        disabled: options[:disabled]
-    }
+  class: ['myg-slider mdc-slider', options[:class], ('mdc-slider--discrete' if options[:discrete])].join(' '),
+  tabindex: 0,
+  role: 'slider',
+  aria: {
+    valuemin: options[:min],
+    valuemax: options[:max],
+    valuenow: options[:value],
+    label: options[:label],
+    disabled: options[:disabled]
+  }
 } %>
 
 <%= content_tag 'div', options.merge(html) do %>
-    <div class="mdc-slider__track-container">
-        <div class="mdc-slider__track"></div>
-    </div>
-    <div class="mdc-slider__thumb-container">
-        <% if options[:discrete] %><div class="mdc-slider__pin">
-            <span class="mdc-slider__pin-value-marker"></span>
-        </div><% end %>
-        <svg class="mdc-slider__thumb" width="21" height="21">
-            <circle cx="10.5" cy="10.5" r="7.875"></circle>
-        </svg>
-        <div class="mdc-slider__focus-ring"></div>
-    </div>
+  <div class="mdc-slider__track-container">
+    <div class="mdc-slider__track"></div>
+  </div>
+  <div class="mdc-slider__thumb-container">
+    <% if options[:discrete] %><div class="mdc-slider__pin">
+      <span class="mdc-slider__pin-value-marker"></span>
+    </div><% end %>
+    <svg class="mdc-slider__thumb" width="21" height="21">
+      <circle cx="10.5" cy="10.5" r="7.875"></circle>
+    </svg>
+    <div class="mdc-slider__focus-ring"></div>
+  </div>
 <% end %>

data/app/views/mozaic/myg/_switch.html.erb

@@ -1,24 +1,24 @@
-<% class_name = options.delete :class_name %>
-<% attribute = options.delete :attribute %>
-<% identifier = options.delete :identifier %>
-<% values = options.delete(:values) || [0, 1] %>
-<% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
-<% id = [class_name, identifier, attribute].map { |s| s.to_s.downcase }.join('_').tr('[', '_').tr(']', '_') %>
-<% wrapper_html = {
-    class: ['myg-switch mdc-switch', options.dig(:wrapper_html, :class)].join(' ')
-} %>
-<% input_html = {
-    type: 'checkbox',
-    class: ['mdc-switch__native-control', options.dig(:input_html, :class)].join(' '),
-    name: name,
-    id: id,
-    value: values.last
-} %>
-
-<%= content_tag 'div', (options[:wrapper_html] || {}).merge(wrapper_html) do %>
-    <input value="<%= values.first %>" type="hidden" name="<%= name %>" />
-    <%= tag 'input', (options[:input_html] || {}).merge(input_html) %>
-    <div class="mdc-switch__background">
-        <div class="mdc-switch__knob"></div>
-    </div>
-<% end %>
+<% class_name = options.delete :class_name %>
+<% attribute = options.delete :attribute %>
+<% identifier = options.delete :identifier %>
+<% values = options.delete(:values) || [0, 1] %>
+<% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
+<% id = [class_name, identifier, attribute].map { |s| s.to_s.downcase }.join('_').tr('[', '_').tr(']', '_') %>
+<% wrapper_html = {
+  class: ['myg-switch mdc-switch', options.dig(:wrapper_html, :class)].join(' ')
+} %>
+<% input_html = {
+  type: 'checkbox',
+  class: ['mdc-switch__native-control', options.dig(:input_html, :class)].join(' '),
+  name: name,
+  id: id,
+  value: values.last
+} %>
+
+<%= content_tag 'div', (options[:wrapper_html] || {}).merge(wrapper_html) do %>
+  <input value="<%= values.first %>" type="hidden" name="<%= name %>" />
+  <%= tag 'input', (options[:input_html] || {}).merge(input_html) %>
+  <div class="mdc-switch__background">
+    <div class="mdc-switch__knob"></div>
+  </div>
+<% end %>

data/app/views/mozaic/myg/_tabs.html.erb

@@ -1,43 +1,43 @@
-<% nav_html = {
-    class: ['myg-tabs mdc-tab-bar', options.dig(:nav_html, :class)].join(' ')
-} %>
-<% wrapper_html = {
-    class: ['myg-tabs__panels', options.dig(:wrapper_html, :class)].join(' ')
-} %>
-
-<%= content_tag 'nav', (options[:nav_html] || {}).merge(nav_html) do %>
-    <% options[:tabs]&.each do |tab| %>
-        <% tab_html = {
-            class: ['mdc-tab', options.dig(:tab_html, :class), ('mdc-tab--active' if tab[:active])].join(' '),
-            aria: {
-                controls: tab[:id] || tab[:name].underscore
-            },
-            role: 'tab'
-        } %>
-        <%= link_to tab[:name], tab[:href] || "##{tab[:id] || tab[:name].underscore}", (options[:tab_html] || {}).merge(tab_html) %>
-    <% end %>
-    <span class="mdc-tab-bar__indicator"></span>
-<% end %>
-<%= content_tag 'div', (options[:wrapper_html] || {}).merge(wrapper_html) do %>
-    <% if options[:async] %>
-        <div class="myg-tabs__loader">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"><g class="nc-loop_bars-rotate-24" transform="rotate(270 12 12)"> <rect x="11" fill="#444444" width="2" height="6"></rect> <rect x="17.3639603" y="2.636039" transform="matrix(0.7071068 0.7071068 -0.7071068 0.7071068 9.3639612 -11.3345242)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="18" y="11" fill="#444444" width="6" height="2" style="opacity: 0.4;"></rect> <rect x="17.3639603" y="15.3639612" transform="matrix(-0.7071068 0.7071068 -0.7071068 -0.7071068 44.3345222 18.3639603)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="11" y="18" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="4.6360388" y="15.3639612" transform="matrix(-0.7071068 -0.7071068 0.7071068 -0.7071068 -3.363961 35.3345222)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="0" y="11" fill="#444444" width="6" height="2" style="opacity: 0.5;"></rect> <rect x="4.6360388" y="2.636039" transform="matrix(0.7071068 -0.7071068 0.7071068 0.7071068 -2.3345237 5.6360388)" fill="#444444" width="2" height="6" style="opacity: 0.8;"></rect> </g> <script>!function(){function t(t){this.element=t,this.animationId,this.start=null,this.init()}if(!window.requestAnimationFrame){var i=null;window.requestAnimationFrame=function(t,n){var e=(new Date).getTime();i||(i=e);var a=Math.max(0,16-(e-i)),o=window.setTimeout(function(){t(e+a)},a);return i=e+a,o}}t.prototype.init=function(){var t=this;this.animationId=window.requestAnimationFrame(t.triggerAnimation.bind(t))},t.prototype.reset=function(){var t=this;window.cancelAnimationFrame(t.animationId)},t.prototype.triggerAnimation=function(t){var i=this;this.start||(this.start=t);var n=t-this.start;800&gt;n||(this.start=this.start+800),this.element.setAttribute("transform","rotate("+parseInt(Math.min(n/100,8))%8*45+" 12 12)");if(document.documentElement.contains(this.element))window.requestAnimationFrame(i.triggerAnimation.bind(i))};var n=document.getElementsByClassName("nc-loop_bars-rotate-24"),e=[];if(n)for(var a=0;n.length&gt;a;a++)!function(i){e.push(new t(n[i]))}(a);document.addEventListener("visibilitychange",function(){"hidden"==document.visibilityState?e.forEach(function(t){t.reset()}):e.forEach(function(t){t.init()})})}();</script></g></svg>
-        </div>
-        <div class="myg-tabs__panel" id="myg-tabs__panel--success" role="tabpanel" aria-hidden="true"><%= options.dig(:success, :content) || render(partial: options.dig(:success, :partial), locals: options.dig(:success, :partial_locals)) %></div>
-        <div class="myg-tabs__panel" id="myg-tabs__panel--error" role="tabpanel" aria-hidden="true"><%= block %></div>
-    <% else %>
-        <% options[:tabs]&.each do |tab| %>
-            <% panel_html = {
-                class: ['myg-tabs__panel', options.dig(:panel_html, :class), ('-shown' if tab[:active])].join(' '),
-                id: tab[:id] || tab[:name].underscore,
-                role: 'tabpanel',
-                aria: {
-                    hidden: (tab[:active] ? false : true)
-                }
-            } %>
-            <%= content_tag 'div', (options[:panel_html] || {}).merge(panel_html) do %>
-                <%= tab[:content] || render(partial: tab[:partial], locals: tab[:partial_locals]) %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>
+<% nav_html = {
+  class: ['myg-tabs mdc-tab-bar', options.dig(:nav_html, :class)].join(' ')
+} %>
+<% wrapper_html = {
+  class: ['myg-tabs__panels', options.dig(:wrapper_html, :class)].join(' ')
+} %>
+
+<%= content_tag 'nav', (options[:nav_html] || {}).merge(nav_html) do %>
+  <% options[:tabs]&.each do |tab| %>
+    <% tab_html = {
+      class: ['mdc-tab', options.dig(:tab_html, :class), ('mdc-tab--active' if tab[:active])].join(' '),
+      aria: {
+        controls: tab[:id] || tab[:name].underscore
+      },
+      role: 'tab'
+    } %>
+    <%= link_to tab[:name], tab[:href] || "##{tab[:id] || tab[:name].underscore}", (options[:tab_html] || {}).merge(tab_html) %>
+  <% end %>
+  <span class="mdc-tab-bar__indicator"></span>
+<% end %>
+<%= content_tag 'div', (options[:wrapper_html] || {}).merge(wrapper_html) do %>
+  <% if options[:async] %>
+    <div class="myg-tabs__loader">
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g transform="translate(0, 0)"><g class="nc-loop_bars-rotate-24" transform="rotate(270 12 12)"> <rect x="11" fill="#444444" width="2" height="6"></rect> <rect x="17.3639603" y="2.636039" transform="matrix(0.7071068 0.7071068 -0.7071068 0.7071068 9.3639612 -11.3345242)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="18" y="11" fill="#444444" width="6" height="2" style="opacity: 0.4;"></rect> <rect x="17.3639603" y="15.3639612" transform="matrix(-0.7071068 0.7071068 -0.7071068 -0.7071068 44.3345222 18.3639603)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="11" y="18" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="4.6360388" y="15.3639612" transform="matrix(-0.7071068 -0.7071068 0.7071068 -0.7071068 -3.363961 35.3345222)" fill="#444444" width="2" height="6" style="opacity: 0.4;"></rect> <rect x="0" y="11" fill="#444444" width="6" height="2" style="opacity: 0.5;"></rect> <rect x="4.6360388" y="2.636039" transform="matrix(0.7071068 -0.7071068 0.7071068 0.7071068 -2.3345237 5.6360388)" fill="#444444" width="2" height="6" style="opacity: 0.8;"></rect> </g> <script>!function(){function t(t){this.element=t,this.animationId,this.start=null,this.init()}if(!window.requestAnimationFrame){var i=null;window.requestAnimationFrame=function(t,n){var e=(new Date).getTime();i||(i=e);var a=Math.max(0,16-(e-i)),o=window.setTimeout(function(){t(e+a)},a);return i=e+a,o}}t.prototype.init=function(){var t=this;this.animationId=window.requestAnimationFrame(t.triggerAnimation.bind(t))},t.prototype.reset=function(){var t=this;window.cancelAnimationFrame(t.animationId)},t.prototype.triggerAnimation=function(t){var i=this;this.start||(this.start=t);var n=t-this.start;800&gt;n||(this.start=this.start+800),this.element.setAttribute("transform","rotate("+parseInt(Math.min(n/100,8))%8*45+" 12 12)");if(document.documentElement.contains(this.element))window.requestAnimationFrame(i.triggerAnimation.bind(i))};var n=document.getElementsByClassName("nc-loop_bars-rotate-24"),e=[];if(n)for(var a=0;n.length&gt;a;a++)!function(i){e.push(new t(n[i]))}(a);document.addEventListener("visibilitychange",function(){"hidden"==document.visibilityState?e.forEach(function(t){t.reset()}):e.forEach(function(t){t.init()})})}();</script></g></svg>
+    </div>
+    <div class="myg-tabs__panel" id="myg-tabs__panel--success" role="tabpanel" aria-hidden="true"><%= options.dig(:success, :content) || render(partial: options.dig(:success, :partial), locals: options.dig(:success, :partial_locals)) %></div>
+    <div class="myg-tabs__panel" id="myg-tabs__panel--error" role="tabpanel" aria-hidden="true"><%= block %></div>
+  <% else %>
+    <% options[:tabs]&.each do |tab| %>
+      <% panel_html = {
+        class: ['myg-tabs__panel', options.dig(:panel_html, :class), ('-shown' if tab[:active])].join(' '),
+        id: tab[:id] || tab[:name].underscore,
+        role: 'tabpanel',
+        aria: {
+          hidden: (tab[:active] ? false : true)
+        }
+      } %>
+      <%= content_tag 'div', (options[:panel_html] || {}).merge(panel_html) do %>
+        <%= tab[:content] || render(partial: tab[:partial], locals: tab[:partial_locals]) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>