promethee 1.2.31 → 1.3.0

data/app/views/promethee/components/aside/_edit.move.html.erb

@@ -1,15 +1,14 @@
 <script type="text/ng-template" id="promethee/components/aside/edit/move">
-  <aside>
-    <div class="header">Aside</div>
-
-    <ng-include src="'promethee/move/components'"></ng-include>
-    <div
-      class=" promethee-edit__move__droppable
-              promethee-edit__move__droppable--row"
-      droppable
-      data-index="{{$index+1}}"
-      data-type="{{type}}"
-      >
+  <%= render 'promethee/edit/move.header', type: 'aside' %>
+      <ng-include src="'promethee/move/components'"></ng-include>
+      <div
+        class=" promethee-edit__move__droppable
+                promethee-edit__move__droppable--row"
+        droppable
+        data-index="{{$index+1}}"
+        data-type="{{type}}"
+        >
+      </div>
     </div>
-  </aside>
+  </div>
 </script>

data/app/views/promethee/components/column/_edit.define.html.erb

@@ -0,0 +1,32 @@
+<% 
+icon = '
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<rect x="18.9" y="28" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="62.1" height="44"/>
+<g>
+  <path fill="#FFFFFF" d="M84.5,25v50h-69V25H84.5 M86.5,23h-73v54h73V23L86.5,23z"/>
+</g>
+<g>
+  <polygon fill="#FFFFFF" points="47.2,44.6 47.2,55.4 56.3,50   "/>
+  <g>
+    <path fill="#FFFFFF" d="M50,41.6c4.6,0,8.4,3.8,8.4,8.4s-3.8,8.4-8.4,8.4s-8.4-3.8-8.4-8.4S45.4,41.6,50,41.6 M50,40.6
+      c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4c5.2,0,9.4-4.2,9.4-9.4S55.2,40.6,50,40.6L50,40.6z"/>
+  </g>
+</g>
+</svg>
+'
+%>
+<div ng-init="promethee.definitions.push({
+  name: 'Column',
+  icon: '<%= icon %>',
+  data: {
+    type: 'column',
+    attributes: {
+      size: 4,
+      offset: 0
+    },
+    children: []
+  }
+})"></div>

data/app/views/promethee/components/column/_edit.inspect.html.erb

@@ -1,10 +1,11 @@
 <script type="text/ng-template" id="promethee/components/column/edit/inspect">
+  <b>Desktop</b>
   <div class="form-group">
-    <label class="label-control">Size</label>
-    <input ng-model="promethee.inspected.attributes.size" class="form-control" type="number"/>
+    <label class="label-control">Size: {{promethee.inspected.attributes.size}}</label>
+    <input ng-model="promethee.inspected.attributes.size" type="range" min="1" max="12">
   </div>
   <div class="form-group">
-    <label class="label-control">Offset</label>
-    <input ng-model="promethee.inspected.attributes.offset" class="form-control" type="number"/>
+    <label class="label-control">Offset: {{promethee.inspected.attributes.offset}}</label>
+    <input ng-model="promethee.inspected.attributes.offset" type="range" min="0" max="{{12-promethee.inspected.attributes.size}}">
   </div>
 </script>

data/app/views/promethee/components/column/_edit.move.html.erb

@@ -1,15 +1,25 @@
 <script type="text/ng-template" id="promethee/components/column/edit/move">
-  <div class="col col-md-{{component.attributes.size}} col-md-offset-{{component.attributes.offset}}">
-    <div class="header">Column</div>
-    <ng-include src="'promethee/move/components'"></ng-include>
-    <div 
-      class=" promethee-edit__move__droppable
-              promethee-edit__move__droppable--row
-              promethee-edit__move__droppable--row--inside-column"
-      droppable
-      data-index="{{$index+1}}"
-      data-type="{{type}}"
-      >
+  <div  ng-click="inspect(component, $event)"
+        ng-class="{'promethee-edit__component--selected': promethee.inspected === component}"
+        class=" promethee-edit__component
+                promethee-edit__component--column
+                col 
+                col-md-{{component.attributes.size}} 
+                col-md-offset-{{component.attributes.offset}}">
+    <div class="promethee-edit__component__inner">
+      <%= render 'promethee/edit/move.close' %>
+        <div class="header">Column</div>
+        <ng-include src="'promethee/move/components'"></ng-include>
+        <div 
+          class=" promethee-edit__move__droppable
+                  promethee-edit__move__droppable--row
+                  promethee-edit__move__droppable--row--inside-column"
+          droppable
+          data-index="{{$index+1}}"
+          data-type="{{type}}"
+          >
+        </div>
+      </div>
     </div>
   </div>
 </script>

data/app/views/promethee/components/cover/_edit.define.html.erb

@@ -1,13 +1,152 @@
-<script>
-  angular.injector(['ng', 'Promethee']).get('definitions').push({
-    name: 'Cover',
-    thumb: 'http://via.placeholder.com/300x200',
-    data: {
-      type: 'cover',
-      attributes: {
-        src: 'https://picsum.photos/1920/1080/?random',
-        body: ''
-      }
+<% 
+icon = '
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<g id="Calque_10" display="none">
+  <rect x="-1.5" y="-1.5" display="inline" fill="#76868E" width="103" height="103"/>
+</g>
+<g id="Calque_2" display="none">
+  <rect x="18.9" y="28" display="inline" fill="none" stroke="#253742" stroke-miterlimit="10" width="62.1" height="44"/>
+  <g display="inline">
+    <path fill="#253742" d="M84.5,25v50h-69V25H84.5 M86.5,23h-73v54h73V23L86.5,23z"/>
+  </g>
+  <g display="inline">
+    <polygon fill="#253742" points="47.2,44.6 47.2,55.4 56.3,50     "/>
+    <g>
+      <path fill="#253742" d="M50,41.6c4.6,0,8.4,3.8,8.4,8.4s-3.8,8.4-8.4,8.4s-8.4-3.8-8.4-8.4S45.4,41.6,50,41.6 M50,40.6
+        c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4c5.2,0,9.4-4.2,9.4-9.4S55.2,40.6,50,40.6L50,40.6z"/>
+    </g>
+  </g>
+</g>
+<g id="Calque_3" display="none">
+  <g display="inline">
+    <g>
+      <path fill="#253742" d="M71.4,25v50H28.6V25H71.4 M73.4,23H26.6v54h46.9V23L73.4,23z"/>
+    </g>
+    <g>
+      <g>
+        <circle fill="#253742" cx="37.8" cy="36.5" r="2"/>
+        <line fill="none" stroke="#253742" stroke-miterlimit="10" x1="43.3" y1="36.5" x2="64.3" y2="36.5"/>
+      </g>
+      <g>
+        <circle fill="#253742" cx="37.8" cy="45.5" r="2"/>
+        <line fill="none" stroke="#253742" stroke-miterlimit="10" x1="43.3" y1="45.5" x2="64.3" y2="45.5"/>
+      </g>
+      <g>
+        <circle fill="#253742" cx="37.8" cy="54.5" r="2"/>
+        <line fill="none" stroke="#253742" stroke-miterlimit="10" x1="43.3" y1="54.5" x2="64.3" y2="54.5"/>
+      </g>
+      <g>
+        <circle fill="#253742" cx="37.8" cy="63.5" r="2"/>
+        <line fill="none" stroke="#253742" stroke-miterlimit="10" x1="43.3" y1="63.5" x2="64.3" y2="63.5"/>
+      </g>
+    </g>
+  </g>
+</g>
+<g id="Calque_4" display="none">
+  <g display="inline">
+    <path fill="#253742" d="M63.9,20.3l10.5,11.8v47.7H25.7V20.3H63.9 M64.8,18.3H23.7v63.4h52.7V31.3L64.8,18.3L64.8,18.3z"/>
+  </g>
+  <g display="inline">
+    <path fill="#253742" d="M67.9,24.3l2.4,2.4v49H29.7V24.3H67.9 M68.3,23.3H28.7v53.4h42.7V26.3L68.3,23.3L68.3,23.3z"/>
+  </g>
+  <polyline display="inline" fill="none" stroke="#253742" stroke-width="2" stroke-miterlimit="10" points="76.3,81.7 23.7,81.7 
+    23.7,18.3   "/>
+  <g display="inline">
+    <polygon fill="#FFFFFF" points="64.3,30.3 64.3,20.7 73.9,30.3     "/>
+    <path fill="#253742" d="M65.3,23.1l6.2,6.2h-6.2V23.1 M63.3,18.3v13h13L63.3,18.3L63.3,18.3z"/>
+  </g>
+  <g display="inline">
+    <g>
+      <path fill="#253742" d="M39.3,30.3L39.3,30.3c0.6,0,1.1,0.1,1.6,0.3c1,0.4,1.7,1.2,2.1,2.2c0.4,1,0.4,2.1-0.1,3.1
+        c-0.6,1.4-2.1,2.4-3.7,2.4c-0.6,0-1.1-0.1-1.6-0.3c-2-0.9-2.9-3.3-2-5.3C36.3,31.2,37.8,30.3,39.3,30.3 M39.3,29.3
+        c-1.9,0-3.7,1.1-4.6,3c-1.1,2.5,0,5.5,2.5,6.6c0.7,0.3,1.4,0.4,2,0.4c1.9,0,3.7-1.1,4.6-3c1.1-2.5,0-5.5-2.5-6.6
+        C40.7,29.4,40,29.3,39.3,29.3L39.3,29.3z"/>
+    </g>
+  </g>
+  <g display="inline">
+    <path fill="#253742" d="M40.7,46.6L48,60.3l0.5,1l0.9-0.6L59.7,54l10.6,9.7v12.5L30,75.7l-0.1-16.5L40.7,46.6 M40.8,44.8l-12,14
+      L29,76.7l42.4,0.6v-14L59.8,52.8l-11,7L40.8,44.8L40.8,44.8z"/>
+  </g>
+</g>
+<g id="Calque_5" display="none">
+</g>
+<g id="Calque_6" display="none">
+  <g display="inline">
+    <path fill="#253742" d="M38.8,40.8c0-1.6-0.1-3.3-0.3-5.2c2.3,0.1,6.1,0.1,11.5,0.1c5.4,0,9.2,0,11.4-0.1
+      c-0.2,1.9-0.3,3.7-0.3,5.2c0,1.4,0,2.5,0.1,3.3h-0.9c-0.2-2.1-0.5-3.7-0.8-4.7c-0.3-1-0.9-1.8-1.7-2.2c-0.8-0.5-2.1-0.7-3.7-0.7
+      h-2.2v23.2c0,1.1,0.1,2,0.3,2.5c0.2,0.5,0.6,0.9,1.2,1.1c0.6,0.2,1.4,0.3,2.6,0.4v0.8c-1.4-0.1-3.4-0.1-6-0.1c-2.7,0-4.7,0-6,0.1
+      v-0.8c1.2,0,2.1-0.2,2.6-0.4c0.6-0.2,0.9-0.6,1.2-1.1c0.2-0.5,0.3-1.3,0.3-2.5V36.5h-2.2c-1.7,0-2.9,0.2-3.7,0.7
+      c-0.8,0.5-1.4,1.2-1.7,2.2c-0.3,1-0.6,2.6-0.8,4.7h-0.9C38.8,43.3,38.8,42.2,38.8,40.8z"/>
+  </g>
+  <polygon display="inline" fill="none" stroke="#253742" stroke-width="2" stroke-miterlimit="10" points="63.5,23 26.6,23 26.6,77 
+    73.4,77 73.4,32.4   "/>
+  <polyline display="inline" fill="none" stroke="#253742" stroke-width="2" stroke-miterlimit="10" points="62.5,23 62.5,32.4 
+    72.4,32.4   "/>
+</g>
+<g id="Calque_7">
+  <g>
+    <path fill="#FFFFFF" d="M84,34v32H16V34H84 M86,32H14v36h72V32L86,32z"/>
+  </g>
+  <g>
+    <g>
+      <path fill="#FFFFFF" d="M27.8,38.7L27.8,38.7c0.6,0,1.1,0.1,1.6,0.3c1,0.4,1.7,1.2,2.1,2.2c0.4,1,0.4,2.1-0.1,3.1
+        c-0.6,1.4-2.1,2.4-3.7,2.4c-0.6,0-1.1-0.1-1.6-0.3c-2-0.9-2.9-3.3-2-5.3C24.8,39.6,26.2,38.7,27.8,38.7 M27.8,37.7
+        c-1.9,0-3.8,1.1-4.6,3c-1.1,2.5,0,5.5,2.5,6.6c0.7,0.3,1.4,0.4,2,0.4c1.9,0,3.8-1.1,4.6-3c1.1-2.5,0-5.5-2.5-6.6
+        C29.2,37.9,28.5,37.7,27.8,37.7L27.8,37.7z"/>
+    </g>
+  </g>
+  <polyline fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="81.2,57 62.1,51.3 49,54.8 39.5,47.3 19.2,55   "/>
+  <path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M75.8,65.3"/>
+  <path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M25.4,65"/>
+  <g>
+    <path fill="#FFFFFF" d="M80.7,36.5v27H19.3v-27H80.7 M81.7,35.5H18.3v29h63.3V35.5L81.7,35.5z"/>
+  </g>
+</g>
+<g id="Calque_8" display="none">
+  <g display="inline">
+    <path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M76.5,65.4"/>
+    <rect x="29.3" y="35.3" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="41.6" height="29.5"/>
+    <g>
+      <path fill="#FFFFFF" d="M72.5,33.9v32.2H27.6V33.9H72.5 M74.5,31.9H25.6v36.2h48.9V31.9L74.5,31.9z"/>
+    </g>
+    <polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="76.5,36.6 90.5,36.6 90.5,63.4 
+      76.5,63.4     "/>
+    <polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="23.5,63.4 9.5,63.4 9.5,36.6 23.5,36.6 
+          "/>
+  </g>
+</g>
+<g id="Calque_9" display="none">
+  <g display="inline">
+    <g>
+      <g>
+        <path fill="#FFFFFF" d="M84.5,16.5v67h-69v-67H84.5 M86.5,14.5h-73v71h73V14.5L86.5,14.5z"/>
+      </g>
+      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="86.5" y1="31.5" x2="13.5" y2="31.5"/>
+      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="23.5" y1="23.5" x2="30.5" y2="23.5"/>
+      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="36.5" y1="23.5" x2="77.5" y2="23.5"/>
+    </g>
+    <g>
+      <rect x="18.8" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+      <rect x="34.9" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+      <rect x="51.1" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+      <rect x="67.2" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+    </g>
+  </g>
+</g>
+</svg>
+'
+%>
+<div ng-init="promethee.definitions.push({
+  name: 'Cover',
+  icon: '<%= icon %>',
+  data: {
+    type: 'cover',
+    attributes: {
+      src: 'https://picsum.photos/1920/1080/?random',
+      body: ''
     }
-  });
-</script>
+  }
+})"></div>

data/app/views/promethee/components/cover/_edit.move.html.erb

@@ -1,7 +1,10 @@
 <script type="text/ng-template" id="promethee/components/cover/edit/move">
-  <div  class=" promethee-edit__wrapper 
-                promethee-edit__cover-content"
-        ng-bind-html="component.attributes.body | htmlSafe"
-        style="background-image: url('{{component.attributes.src}}')">    
+  <%= render 'promethee/edit/move.header', type: 'cover' %>
+      <div  class=" promethee-edit__wrapper 
+                    promethee-edit__cover-content"
+            ng-bind-html="component.attributes.body | htmlSafe"
+            style="background-image: url('{{component.attributes.src}}')">    
+      </div>
+    </div>
   </div>
 </script>

data/app/views/promethee/components/cover/_localize.html.erb

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-md-6">
       <b>Local</b>
-      <summernote config="summernoteConfig" ng-model="component.attributes.body"></summernote>
+      <summernote config="options" ng-model="component.attributes.body"></summernote>
     </div>
     <div class="col-md-6">
       <b>Master</b>

data/app/views/promethee/components/image/_edit.define.html.erb

@@ -1,14 +1,150 @@
-<script>
-  angular.injector(['ng', 'Promethee']).get('definitions').push({
-    name: 'Image',
-    thumb: 'http://via.placeholder.com/300x200',
-    data: {
-      type: 'image',
-      attributes: {
-        src: 'https://picsum.photos/1920/1080/?random',
-        alt: '',
-        caption: ''
-      }
+<% 
+icon = '
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<g id="Calque_10" display="none">
+  <rect x="-1.5" y="-1.5" display="inline" fill="#76868E" width="103" height="103"/>
+</g>
+<g id="Calque_2" display="none">
+  <rect x="18.9" y="28" display="inline" fill="none" stroke="#253742" stroke-miterlimit="10" width="62.1" height="44"/>
+  <g display="inline">
+    <path fill="#253742" d="M84.5,25v50h-69V25H84.5 M86.5,23h-73v54h73V23L86.5,23z"/>
+  </g>
+  <g display="inline">
+    <polygon fill="#253742" points="47.2,44.6 47.2,55.4 56.3,50     "/>
+    <g>
+      <path fill="#253742" d="M50,41.6c4.6,0,8.4,3.8,8.4,8.4s-3.8,8.4-8.4,8.4s-8.4-3.8-8.4-8.4S45.4,41.6,50,41.6 M50,40.6
+        c-5.2,0-9.4,4.2-9.4,9.4s4.2,9.4,9.4,9.4c5.2,0,9.4-4.2,9.4-9.4S55.2,40.6,50,40.6L50,40.6z"/>
+    </g>
+  </g>
+</g>
+<g id="Calque_3" display="none">
+  <g display="inline">
+    <g>
+      <path fill="#FFFFFF" d="M71.4,25v50H28.6V25H71.4 M73.4,23H26.6v54h46.9V23L73.4,23z"/>
+    </g>
+    <g>
+      <g>
+        <circle fill="#FFFFFF" cx="37.8" cy="36.5" r="2"/>
+        <line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="43.3" y1="36.5" x2="64.3" y2="36.5"/>
+      </g>
+      <g>
+        <circle fill="#FFFFFF" cx="37.8" cy="45.5" r="2"/>
+        <line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="43.3" y1="45.5" x2="64.3" y2="45.5"/>
+      </g>
+      <g>
+        <circle fill="#FFFFFF" cx="37.8" cy="54.5" r="2"/>
+        <line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="43.3" y1="54.5" x2="64.3" y2="54.5"/>
+      </g>
+      <g>
+        <circle fill="#FFFFFF" cx="37.8" cy="63.5" r="2"/>
+        <line fill="none" stroke="#FFFFFF" stroke-miterlimit="10" x1="43.3" y1="63.5" x2="64.3" y2="63.5"/>
+      </g>
+    </g>
+  </g>
+</g>
+<g id="Calque_4">
+  <g>
+    <path fill="#FFFFFF" d="M63.9,20.3l10.5,11.8v47.7H25.7V20.3H63.9 M64.8,18.3H23.7v63.4h52.7V31.3L64.8,18.3L64.8,18.3z"/>
+  </g>
+  <polyline fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="71.3,31 71.3,76.7 28.7,76.7 28.7,23.3 63.9,23.3   "/>
+  <polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="76.3,81.7 23.7,81.7 23.7,18.3  "/>
+  <g>
+    <path fill="#FFFFFF" d="M65.3,23.1l6.2,6.2h-6.2V23.1 M63.3,18.3v13h13L63.3,18.3L63.3,18.3z"/>
+  </g>
+  <g>
+    <g>
+      <path fill="#FFFFFF" d="M39.3,30.3L39.3,30.3c0.6,0,1.1,0.1,1.6,0.3c1,0.4,1.7,1.2,2.1,2.2c0.4,1,0.4,2.1-0.1,3.1
+        c-0.6,1.4-2.1,2.4-3.7,2.4c-0.6,0-1.1-0.1-1.6-0.3c-2-0.9-2.9-3.3-2-5.3C36.3,31.2,37.8,30.3,39.3,30.3 M39.3,29.3
+        c-1.9,0-3.7,1.1-4.6,3c-1.1,2.5,0,5.5,2.5,6.6c0.7,0.3,1.4,0.4,2,0.4c1.9,0,3.7-1.1,4.6-3c1.1-2.5,0-5.5-2.5-6.6
+        C40.7,29.4,40,29.3,39.3,29.3L39.3,29.3z"/>
+    </g>
+  </g>
+  <g>
+    <path fill="#FFFFFF" d="M40.7,46.6L48,60.3l0.5,1l0.9-0.6L59.7,54l10.6,9.7v12.5L30,75.7l-0.1-16.5L40.7,46.6 M40.8,44.8l-12,14
+      L29,76.7l42.4,0.6v-14L59.8,52.8l-11,7L40.8,44.8L40.8,44.8z"/>
+  </g>
+</g>
+<g id="Calque_5" display="none">
+</g>
+<g id="Calque_6" display="none">
+  <g display="inline">
+    <path fill="#FFFFFF" d="M38.8,40.8c0-1.6-0.1-3.3-0.3-5.2c2.3,0.1,6.1,0.1,11.5,0.1c5.4,0,9.2,0,11.4-0.1
+      c-0.2,1.9-0.3,3.7-0.3,5.2c0,1.4,0,2.5,0.1,3.3h-0.9c-0.2-2.1-0.5-3.7-0.8-4.7c-0.3-1-0.9-1.8-1.7-2.2c-0.8-0.5-2.1-0.7-3.7-0.7
+      h-2.2v23.2c0,1.1,0.1,2,0.3,2.5c0.2,0.5,0.6,0.9,1.2,1.1c0.6,0.2,1.4,0.3,2.6,0.4v0.8c-1.4-0.1-3.4-0.1-6-0.1c-2.7,0-4.7,0-6,0.1
+      v-0.8c1.2,0,2.1-0.2,2.6-0.4c0.6-0.2,0.9-0.6,1.2-1.1c0.2-0.5,0.3-1.3,0.3-2.5V36.5h-2.2c-1.7,0-2.9,0.2-3.7,0.7
+      c-0.8,0.5-1.4,1.2-1.7,2.2c-0.3,1-0.6,2.6-0.8,4.7h-0.9C38.8,43.3,38.8,42.2,38.8,40.8z"/>
+  </g>
+  <polygon display="inline" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="63.5,23 26.6,23 26.6,77 
+    73.4,77 73.4,32.4   "/>
+  <polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="62.5,23 62.5,32.4 
+    72.4,32.4   "/>
+</g>
+<g id="Calque_7" display="none">
+  <g display="inline">
+    <path fill="#FFFFFF" d="M84,34v32H16V34H84 M86,32H14v36h72V32L86,32z"/>
+  </g>
+  <g display="inline">
+    <g>
+      <path fill="#FFFFFF" d="M27.8,38.7L27.8,38.7c0.6,0,1.1,0.1,1.6,0.3c1,0.4,1.7,1.2,2.1,2.2c0.4,1,0.4,2.1-0.1,3.1
+        c-0.6,1.4-2.1,2.4-3.7,2.4c-0.6,0-1.1-0.1-1.6-0.3c-2-0.9-2.9-3.3-2-5.3C24.8,39.6,26.2,38.7,27.8,38.7 M27.8,37.7
+        c-1.9,0-3.8,1.1-4.6,3c-1.1,2.5,0,5.5,2.5,6.6c0.7,0.3,1.4,0.4,2,0.4c1.9,0,3.8-1.1,4.6-3c1.1-2.5,0-5.5-2.5-6.6
+        C29.2,37.9,28.5,37.7,27.8,37.7L27.8,37.7z"/>
+    </g>
+  </g>
+  <polyline display="inline" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" points="81.2,57 62.1,51.3 49,54.8 39.5,47.3 
+    19.2,55   "/>
+  <path display="inline" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M75.8,65.3"/>
+  <path display="inline" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M25.4,65"/>
+  <g display="inline">
+    <path fill="#FFFFFF" d="M80.7,36.5v27H19.3v-27H80.7 M81.7,35.5H18.3v29h63.3V35.5L81.7,35.5z"/>
+  </g>
+</g>
+<g id="Calque_8" display="none">
+  <g display="inline">
+    <path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M76.5,65.4"/>
+    <rect x="29.3" y="35.3" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="41.6" height="29.5"/>
+    <g>
+      <path fill="#FFFFFF" d="M72.5,33.9v32.2H27.6V33.9H72.5 M74.5,31.9H25.6v36.2h48.9V31.9L74.5,31.9z"/>
+    </g>
+    <polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="76.5,36.6 90.5,36.6 90.5,63.4 
+      76.5,63.4     "/>
+    <polyline fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="23.5,63.4 9.5,63.4 9.5,36.6 23.5,36.6 
+          "/>
+  </g>
+</g>
+<g id="Calque_9" display="none">
+  <g display="inline">
+    <g>
+      <g>
+        <path fill="#FFFFFF" d="M84.5,16.5v67h-69v-67H84.5 M86.5,14.5h-73v71h73V14.5L86.5,14.5z"/>
+      </g>
+      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="86.5" y1="31.5" x2="13.5" y2="31.5"/>
+      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="23.5" y1="23.5" x2="30.5" y2="23.5"/>
+      <line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="36.5" y1="23.5" x2="77.5" y2="23.5"/>
+    </g>
+    <g>
+      <rect x="18.8" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+      <rect x="34.9" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+      <rect x="51.1" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+      <rect x="67.2" y="40" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" width="14" height="38"/>
+    </g>
+  </g>
+</g>
+</svg>
+'
+%>
+<div ng-init="promethee.definitions.push({
+  name: 'Image',
+  icon: '<%= icon %>',
+  data: {
+    type: 'image',
+    attributes: {
+      src: 'https://picsum.photos/1920/1080/?random',
+      alt: '',
+      caption: ''
     }
-  });
-</script>
+  }
+})"></div>