mattmezza · arabakevin · Aug 3, 2020 · Sep 26, 2020 · Oct 4, 2020 · Oct 20, 2020
diff --git a/README.md b/README.md
@@ -147,6 +147,9 @@ export default {
       // called when the user scrolls message list to top
       // leverage pagination for loading another page of messages
     },
+    downloadMessage(message) {
+      console.log('Try to download the file')
+    },
     handleOnType () {
       console.log('Emit typing event')
     },
@@ -195,6 +198,7 @@ For more detailed examples see the demo folder.
 |-----|--------|---------------|
 | onType | undefined | Fires when user types on the message input |
 | edit | `message` | Fires after user edited message |
+| download | `message` | Download file only if document type is file |
 
 #### Slots
 
@@ -284,8 +288,47 @@ Message objects are rendered differently depending on their type. Currently, onl
     }
   }
 }
+
+{
+  author: 'me',
+  type: 'file',
+  id: 1, // or text '1'
+  isEdited: false,
+  data: {
+    file: {
+      id: 1,
+      mime: 'image/png',
+      name: 'test.png',
+      size: 588147,
+      meta: '06-16-2019 12:45'
+    }
+  }
+}
+
 ```
+##### File type messages
+
+Custom file icons based on mime:
+
+WORD file <img src="https://user-images.githubusercontent.com/16837548/94787922-36f5e700-03d3-11eb-8e95-f468938d24c2.png">
+
+PDF file <img src="https://user-images.githubusercontent.com/16837548/94788088-66a4ef00-03d3-11eb-9907-b380a6bb1907.png">
+
+EXCEL file <img src="https://user-images.githubusercontent.com/16837548/94788119-70c6ed80-03d3-11eb-9031-ce46131e0b06.png">
+
+POWER POINT file <img src="https://user-images.githubusercontent.com/16837548/94788155-7cb2af80-03d3-11eb-80dc-bb77a4a0d429.png">
+
+ZIP file <img src="https://user-images.githubusercontent.com/16837548/94788179-850aea80-03d3-11eb-8b5a-8945e2232c2c.png">
+
+JPG/JPEG file <img src="https://user-images.githubusercontent.com/16837548/94788216-918f4300-03d3-11eb-9778-a148828fba8d.png">
+
+PNG file <img src="https://user-images.githubusercontent.com/16837548/94788250-9b18ab00-03d3-11eb-91be-4af48dea21eb.png">
+
+SVG file <img src="https://user-images.githubusercontent.com/16837548/94788290-a53aa980-03d3-11eb-9c37-936f1c5ac53f.png">
+
+CSV file <img src="https://user-images.githubusercontent.com/16837548/94788314-acfa4e00-03d3-11eb-8e69-835a699b7ea0.png">
 
+For file types other than the above, the default icon is displayed ... <img src="https://user-images.githubusercontent.com/16837548/94788364-be435a80-03d3-11eb-870a-f0defe70ef21.png">
 
 #### Quick replies
 

diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -4,7 +4,7 @@
       :chosenColor="chosenColor"
       :colors="colors"
     />
-    <beautiful-chat 
+    <beautiful-chat
       :alwaysScrollToBottom="alwaysScrollToBottom"
       :close="closeChat"
       :colors="colors"
@@ -29,13 +29,14 @@
       @onType="handleOnType"
       @edit="editMessage"
       @remove="removeMessage"
+      @download="downloadMessage"
     >
       <template v-slot:text-message-toolbox="scopedProps">
         <button v-if="!scopedProps.me && scopedProps.message.type==='text'" @click.prevent="like(scopedProps.message.id)">
           👍
         </button>
       </template>
-      <template v-slot:text-message-body="scopedProps"> 
+      <template v-slot:text-message-body="scopedProps">
         <p class="sc-message--text-content" v-html="scopedProps.messageText"></p>
         <p v-if="scopedProps.message.data.meta" class='sc-message--meta' :style="{color: scopedProps.messageColors.color}">{{scopedProps.message.data.meta}}</p>
         <p v-if="scopedProps.message.isEdited || scopedProps.message.liked" class='sc-message--edited'>
@@ -204,6 +205,7 @@ export default {
       m.type = 'system';
       m.data.text = 'This message has been removed';
     },
+    downloadMessage(message){},
     like(id){
       const m = this.messageList.findIndex(m => m.id === id);
       var msg = this.messageList[m];

diff --git a/demo/src/messageHistory.js b/demo/src/messageHistory.js
diff --git a/package.json b/package.json
@@ -23,6 +23,8 @@
     "kind-of": "6.0.3",
     "minimist": "1.2.3",
     "msgdown": "^1.0.2",
+    "pretty-bytes": "^5.4.1",
+    "smart-truncate": "^1.0.1",
     "v-tooltip": "^2.0.1"
   },
   "devDependencies": {

diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
@@ -26,6 +26,7 @@
       :message-styling="messageStyling"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
+      @download="$emit('download', $event)"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>

diff --git a/src/Launcher.vue b/src/Launcher.vue
@@ -36,6 +36,7 @@
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
       @remove="$emit('remove', $event)"
+      @download="$emit('download', $event)"
     >
       <template v-slot:header>
         <slot name="header"> </slot>

diff --git a/src/Message.vue b/src/Message.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :id="message.id" class="sc-message">
+  <div class="sc-message" :id="message.type === 'file' ? message.data.file.id : message.id">
     <div
       class="sc-message--content"
       :class="{
@@ -48,17 +48,27 @@
       </TextMessage>
       <EmojiMessage v-else-if="message.type === 'emoji'" :data="message.data" />
       <FileMessage
-        v-else-if="message.type === 'file'"
+        v-else-if="message.type === 'file' && message.data.file.mime"
         :data="message.data"
         :message-colors="messageColors"
+        @download="$emit('download')"
+      />
+      <ImageMessage
+        v-else-if="message.type === 'file' && message.data.file.url"
+        :data="message.data"
+        :message-colors="messageColors"
+      />
+      <TypingMessage
+        v-else-if="message.type === 'typing'"
+        :message-colors="messageColors"
       />
-      <TypingMessage v-else-if="message.type === 'typing'" :message-colors="messageColors" />
       <SystemMessage
         v-else-if="message.type === 'system'"
         :data="message.data"
         :message-colors="messageColors"
       >
-        <slot name="system-message-body" :message="message.data"> </slot>
+        <slot name="system-message-body" :message="message.data">
+        </slot>
       </SystemMessage>
     </div>
   </div>
@@ -67,6 +77,7 @@
 <script>
 import TextMessage from './messages/TextMessage.vue'
 import FileMessage from './messages/FileMessage.vue'
+import ImageMessage from './messages/ImageMessage.vue'
 import EmojiMessage from './messages/EmojiMessage.vue'
 import TypingMessage from './messages/TypingMessage.vue'
 import SystemMessage from './messages/SystemMessage.vue'
@@ -183,7 +194,7 @@ export default {
 }
 
 .sc-message--meta {
-  font-size: xx-small;
+  font-size: x-small;
   margin-bottom: 0px;
   color: white;
   text-align: center;

diff --git a/src/MessageList.vue b/src/MessageList.vue
@@ -17,6 +17,7 @@
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
       @remove="$emit('remove', message)"
+      @download="$emit('download', message)"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>

diff --git a/src/assets/download-icon.svg.vue b/src/assets/download-icon.svg.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30" height="30">
+    <path fill="none" d="M31 28l-6 6-6-6"/>
+    <path fill="none" d="M31 28l-6 6-6-6m6-8v14"/>
+    <path fill="none" d="M43 24.3V24a10.03 10.03 0 00-13.4-9.4C27.7 11.3 24.1 9 20 9 13.9 9 9 13.9 9 20v.2c-4.6.9-8 5-8 9.8 0 5.5 4.5 10 10 10h30c4.4 0 8-3.6 8-8 0-3.7-2.6-6.9-6-7.7z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/application_msword.svg.vue b/src/assets/mimes/application_msword.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M168 384a8 8 0 00-8 8v64a8 8 0 008 8 40 40 0 000-80zm8 62.63v-45.26a24 24 0 010 45.26zM256 384c-17.64 0-32 17.94-32 40s14.36 40 32 40 32-17.94 32-40-14.36-40-32-40zm0 64c-8.67 0-16-11-16-24s7.33-24 16-24 16 11 16 24-7.33 24-16 24zM336 400a10.7 10.7 0 014.59 1.06 8 8 0 106.82-14.48A26.58 26.58 0 00336 384c-17.64 0-32 17.94-32 40s14.36 40 32 40a26.6 26.6 0 0011.41-2.58 8 8 0 00-6.82-14.48A10.71 10.71 0 01336 448c-8.67 0-16-11-16-24s7.33-24 16-24zM192 168a8 8 0 008 8h176a8 8 0 000-16H200a8 8 0 00-8 8zM136 208h144a8 8 0 000-16H136a8 8 0 000 16zM376 224H248a8 8 0 000 16h128a8 8 0 000-16zM136 272h184a8 8 0 000-16H136a8 8 0 000 16zM136 176h32a8 8 0 000-16h-32a8 8 0 000 16zM376 192h-64a8 8 0 000 16h64a8 8 0 000-16zM136 240h80a8 8 0 000-16h-80a8 8 0 000 16zM376 256h-24a8 8 0 000 16h24a8 8 0 000-16zM136 304h48a8 8 0 000-16h-48a8 8 0 000 16zM136 144h80a8 8 0 000-16h-80a8 8 0 000 16zM296 288h-80a8 8 0 000 16h80a8 8 0 000-16zM376 288h-48a8 8 0 000 16h48a8 8 0 000-16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/application_pdf.svg.vue b/src/assets/mimes/application_pdf.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M336 384h-32a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a8 8 0 000-16h-8v-16h24a8 8 0 000-16zM192 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM240 384a8 8 0 00-8 8v64a8 8 0 008 8 40 40 0 000-80zm8 62.63v-45.26a24 24 0 010 45.26zM248 176h128a8 8 0 000-16H248a8 8 0 000 16zM248 208h32a8 8 0 000-16h-32a8 8 0 000 16zM248 240h128a8 8 0 000-16H248a8 8 0 000 16zM136 272h184a8 8 0 000-16H136a8 8 0 000 16zM376 192h-64a8 8 0 000 16h64a8 8 0 000-16zM376 256h-24a8 8 0 000 16h24a8 8 0 000-16zM136 304h48a8 8 0 000-16h-48a8 8 0 000 16zM296 288h-80a8 8 0 000 16h80a8 8 0 000-16zM376 288h-48a8 8 0 000 16h48a8 8 0 000-16zM136 240h80a8 8 0 008-8v-96a8 8 0 00-8-8h-80a8 8 0 00-8 8v96a8 8 0 008 8zm8-96h64v80h-64zM248 144h64a8 8 0 000-16h-64a8 8 0 000 16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/application_vnd.ms-excel.svg.vue b/src/assets/mimes/application_vnd.ms-excel.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M272 448h-24v-56a8 8 0 00-16 0v64a8 8 0 008 8h32a8 8 0 000-16zM211.58 384.85a8 8 0 00-10.74 3.57l-8.84 17.7-8.85-17.7a8 8 0 00-14.3 7.16l14.2 28.42-14.2 28.42a8 8 0 1014.3 7.16l8.85-17.7 8.85 17.7a8 8 0 1014.3-7.16L200.96 424l14.2-28.42a8 8 0 00-3.57-10.73zM320 400h16a8 8 0 000-16h-16a24 24 0 000 48 8 8 0 010 16h-16a8 8 0 000 16h16a24 24 0 000-48 8 8 0 010-16zM136 304h240a8 8 0 008-8V152a8 8 0 00-8-8H136a8 8 0 00-8 8v144a8 8 0 008 8zm8-48h64v32h-64zm144-48v32h-64v-32zm-64-16v-32h64v32zm80 16h64v32h-64zm-16 48v32h-64v-32zm-80-16h-64v-32h64zm96 48v-32h64v32zm64-96h-64v-32h64zm-160-32v32h-64v-32z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue b/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M184 224a80 80 0 1080-80 8 8 0 00-8 8v64h-64a8 8 0 00-8 8zm80 8a8 8 0 008-8v-63.5a64 64 0 11-71.5 71.5z"/>
+    <path d="M160 200h72a8 8 0 008-8v-72a8 8 0 00-8-8 80.1 80.1 0 00-80 80 8 8 0 008 8zm64-71.5V184h-55.5a64.14 64.14 0 0155.5-55.5z"/>
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M256 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM192 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM336 384h-32a8 8 0 000 16h8v56a8 8 0 0016 0v-56h8a8 8 0 000-16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/application_zip.svg.vue b/src/assets/mimes/application_zip.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h56v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16a8 8 0 00-7.76 6.06l-5.9 23.62a24 24 0 1043.33 0l-5.9-23.62A8 8 0 00192 240v-16h16a8 8 0 000-16h-16v-16h16a8 8 0 000-16h-16v-16h16a8 8 0 000-16h-16v-16h16a8 8 0 000-16h-16V96h16a8 8 0 000-16h-16V64h16a8 8 0 000-16h-16V32h144v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm72 248a8 8 0 01-16 0 7.9 7.9 0 01.94-3.76 8 8 0 00.7-1.82l4.6-18.42h3.51l4.6 18.42a8 8 0 00.7 1.82A7.9 7.9 0 01192 280zm200 200H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M272 400a8 8 0 000-16h-32a8 8 0 000 16h8v48h-8a8 8 0 000 16h32a8 8 0 000-16h-8v-48zm48-16h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zm-112 32h-19.06l26.21-52.42A8 8 0 00208 384h-32a8 8 0 000 16h19.06l-26.21 52.42A8 8 0 00176 464h32a8 8 0 000-16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/default_file.svg.vue b/src/assets/mimes/default_file.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg height="512" width="512" xmlns="http://www.w3.org/2000/svg">
+    <path d="M104 496h304a40.05 40.05 0 0040-40V120a8 8 0 00-2.34-5.66l-96-96A8 8 0 00344 16H104a40.05 40.05 0 00-40 40v400a40.05 40.05 0 0040 40zM352 43.31L420.69 112H376a24.03 24.03 0 01-24-24zM80 56a24.03 24.03 0 0124-24h232v56a40.05 40.05 0 0040 40h56v328a24.03 24.03 0 01-24 24H104a24.03 24.03 0 01-24-24z"/>
+    <path d="M192 168a8 8 0 008 8h192a8 8 0 000-16H200a8 8 0 00-8 8zM120 224h160a8 8 0 000-16H120a8 8 0 000 16zM392 256H248a8 8 0 000 16h144a8 8 0 000-16zM120 320h192a8 8 0 000-16H120a8 8 0 000 16zM120 176h48a8 8 0 000-16h-48a8 8 0 000 16zM392 208h-80a8 8 0 000 16h80a8 8 0 000-16zM120 272h96a8 8 0 000-16h-96a8 8 0 000 16zM392 304h-48a8 8 0 000 16h48a8 8 0 000-16zM328 400h-80a8 8 0 000 16h80a8 8 0 000-16zM120 416h96a8 8 0 000-16h-96a8 8 0 000 16zM120 368h64a8 8 0 000-16h-64a8 8 0 000 16zM120 128h96a8 8 0 000-16h-96a8 8 0 000 16zM304 360a8 8 0 00-8-8h-80a8 8 0 000 16h80a8 8 0 008-8zM392 352h-64a8 8 0 000 16h64a8 8 0 000-16zM392 400h-32a8 8 0 000 16h32a8 8 0 000-16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/image_jpeg.svg.vue b/src/assets/mimes/image_jpeg.svg.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M248 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM200 384a8 8 0 00-8 8v48a8 8 0 01-16 0 8 8 0 00-16 0 24 24 0 0048 0v-48a8 8 0 00-8-8zM344 416h-16a8 8 0 000 16h7.05c-2.25 9.22-8.24 16-15.05 16-8.67 0-16-11-16-24s7.33-24 16-24a10.71 10.71 0 014.59 1.06 8 8 0 006.82-14.48A26.6 26.6 0 00320 384c-17.64 0-32 17.94-32 40s14.36 40 32 40 32-17.94 32-40a8 8 0 00-8-8zM152 304h208a8 8 0 008-8V136a8 8 0 00-8-8H152a8 8 0 00-8 8v160a8 8 0 008 8zm16.64-16l47.49-59.35 33.72 40.47a8 8 0 008.68 2.47l43.7-14.57L338.37 288zM352 144v134.6l-42.8-36.67a8 8 0 00-7.73-1.52l-42.82 14.27-36.5-43.8A8 8 0 00216 208h-.08a8 8 0 00-6.17 3L160 273.2V144z"/>
+    <path d="M288 224a24 24 0 10-24-24 24.03 24.03 0 0024 24zm0-32a8 8 0 11-8 8 8 8 0 018-8z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/image_png.svg.vue b/src/assets/mimes/image_png.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M445.66 114.34l-96-96A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M184 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM344 416h-16a8 8 0 000 16h7.05c-2.25 9.22-8.24 16-15.05 16-8.67 0-16-11-16-24s7.33-24 16-24a10.71 10.71 0 014.59 1.06 8 8 0 006.82-14.48A26.6 26.6 0 00320 384c-17.64 0-32 17.94-32 40s14.36 40 32 40 32-17.94 32-40a8 8 0 00-8-8zM264 384a8 8 0 00-8 8v30.11l-16.84-33.69A8 8 0 00224 392v64a8 8 0 0016 0v-30.11l16.84 33.69A8 8 0 00272 456v-64a8 8 0 00-8-8zM176 304h32a8 8 0 008-8v-24h16v24a8 8 0 008 8h32a8 8 0 008-8v-24h16v24a8 8 0 008 8h32a8 8 0 008-8v-32a8 8 0 00-8-8h-24v-16h24a8 8 0 008-8v-32a8 8 0 00-8-8h-24v-16h24a8 8 0 008-8v-32a8 8 0 00-8-8h-32a8 8 0 00-8 8v24h-16v-24a8 8 0 00-8-8h-32a8 8 0 00-8 8v24h-16v-24a8 8 0 00-8-8h-32a8 8 0 00-8 8v32a8 8 0 008 8h24v16h-24a8 8 0 00-8 8v32a8 8 0 008 8h24v16h-24a8 8 0 00-8 8v32a8 8 0 008 8zm56-96v16h-16v-16zm64 16h-16v-16h16zm-32 0h-16v-16h16zm-16 16h16v16h-16zm16-48h-16v-16h16zm-48 48h16v16h-16zm48 48h-16v-16h16zm16-48h16v16h-16zm48 48h-16v-16h16zm0-64h-16v-16h16zm-16-80h16v16h-16zm-16 48h-16v-16h16zm-48-48h16v16h-16zm-16 48h-16v-16h16zm-48-48h16v16h-16zm0 64h16v16h-16zm0 64h16v16h-16z"/>
+  </svg>
+</template>