Merge pull request #8098 from aignatov-bio/ai-sci-11386-add-number-and-datetime-fields

Add number and datetime field [SCI-11386][SCI-11340]

app/controllers/form_fields_controller.rb

@@ -72,6 +72,6 @@ class FormFieldsController < ApplicationController
   end
 
   def form_field_params
-    params.require(:form_field).permit(:name, :description, { data: [%i(type options)] }, :required, :allow_not_applicable, :uid)
+    params.require(:form_field).permit(:name, :description, { data: [:type, :options, :unit, :time, :range, validations: {}] }, :required, :allow_not_applicable, :uid)
   end
 end

app/javascript/vue/forms/edit_field.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="flex flex-col gap-4">
     <div class="flex items-center">
-      <h3>{{ i18n.t(`forms.show.blocks.${editField.attributes.type}`) }}</h3>
+      <h3 class="flex items-center gap-2">
+        <i class="sn-icon rounded text-sn-blue bg-sn-super-light-blue p-1" :class="icon"></i>
+        {{ i18n.t(`forms.show.blocks.${editField.attributes.type}`) }}
+      </h3>
       <div class="ml-auto flex items-center gap-3">
         <div class="flex items-center gap-2">
           <span class="sci-toggle-checkbox-container">
@@ -40,7 +43,7 @@
         <input type="text" class="sci-input" v-model="editField.attributes.description" @change="updateField" :placeholder="i18n.t('forms.show.description_placeholder')" />
       </div>
     </div>
-    <component :is="camelCaseType" :field="editField" @updateField="updateField" @syncField="syncField" />
+    <component :is="this.editField.attributes.type" :field="editField" @updateField="updateField()" @syncField="syncField" />
     <div class="bg-sn-super-light-grey rounded p-4">
       <div class="flex items-center gap-4">
         <h5>{{ i18n.t('forms.show.mark_as_na') }}</h5>
@@ -59,24 +62,25 @@
 
 <script>
 import GeneralDropdown from '../shared/general_dropdown.vue';
-import datetime from './edit_fields/datetime.vue';
-import number from './edit_fields/number.vue';
-import singleChoice from './edit_fields/single_choice.vue';
-import text from './edit_fields/text.vue';
-import multipleChoice from './edit_fields/multiple_choice.vue';
+import DatetimeField from './edit_fields/datetime.vue';
+import NumberField from './edit_fields/number.vue';
+import SingleChoiceField from './edit_fields/single_choice.vue';
+import TextField from './edit_fields/text.vue';
+import MultipleChoiceField from './edit_fields/multiple_choice.vue';
 
 export default {
   name: 'EditField',
   props: {
-    field: Object
+    field: Object,
+    icon: String
   },
   components: {
     GeneralDropdown,
-    datetime,
-    number,
-    singleChoice,
-    text,
-    multipleChoice
+    DatetimeField,
+    NumberField,
+    SingleChoiceField,
+    TextField,
+    MultipleChoiceField
   },
   data() {
     return {
@@ -84,13 +88,13 @@ export default {
     };
   },
   created() {
+    if (!this.editField.attributes.data.validations) {
+      this.editField.attributes.data.validations = {};
+    }
   },
   computed: {
     validField() {
       return this.editField.attributes.name.length > 0;
-    },
-    camelCaseType() {
-      return this.editField.attributes.type.replace(/_([a-z])/g, (g) => (g[1].toUpperCase()));
     }
   },
   methods: {

app/javascript/vue/forms/edit_fields/datetime.vue

@@ -1,9 +1,35 @@
 <template>
+  <div class="flex flex-col gap-4">
   <hr class="my-4 w-full">
+  <div class="flex items-center gap-2.5">
+    <span class="sci-checkbox-container">
+      <input type="checkbox"
+              class="sci-checkbox"
+              @change="$emit('updateField')"
+              v-model="editField.attributes.data.time" />
+      <span class="sci-checkbox-label"></span>
+    </span>
+    {{ i18n.t('forms.show.time_label') }}
+  </div>
+  <div class="flex items-center gap-2.5">
+    <span class="sci-checkbox-container">
+      <input type="checkbox"
+              class="sci-checkbox"
+              @change="$emit('updateField')"
+              v-model="editField.attributes.data.range" />
+      <span class="sci-checkbox-label"></span>
+    </span>
+    {{ i18n.t('forms.show.range_label') }}
+  </div>
+  <hr class="my-4 w-full">
+  </div>
 </template>
 
 <script>
+import fieldMixin from './field_mixin';
+
 export default {
-  name: 'DateTimeField'
+  name: 'DateTimeField',
+  mixins: [fieldMixin]
 };
 </script>

app/javascript/vue/forms/edit_fields/field_mixin.js

@@ -0,0 +1,25 @@
+export default {
+  props: {
+    field: Object
+  },
+  watch: {
+    editField: {
+      handler() {
+        if (this.validField) {
+          this.$emit('syncField', this.editField);
+        }
+      },
+      deep: true
+    }
+  },
+  computed: {
+    validField() {
+      return true;
+    }
+  },
+  data() {
+    return {
+      editField: { ...this.field }
+    };
+  }
+};

app/javascript/vue/forms/edit_fields/multiple_choice.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col gap-4">
     <hr class="my-4 w-full">
     <div>
       <h5 class="mb-4">{{ i18n.t('forms.show.dropdown_options_label') }}</h5>
@@ -17,23 +17,10 @@
 
 <script>
 
+import fieldMixin from './field_mixin';
+
 export default {
   name: 'MultipleChoiceField',
-  props: {
-    field: Object
-  },
-  watch: {
-    editField: {
-      handler() {
-        this.$emit('syncField', this.editField);
-      },
-      deep: true
-    }
-  },
-  data() {
-    return {
-      editField: { ...this.field }
-    };
-  }
+  mixins: [fieldMixin]
 };
 </script>

app/javascript/vue/forms/edit_fields/number.vue

@@ -1,9 +1,105 @@
 <template>
-  <hr class="my-4 w-full">
+  <div class="flex flex-col gap-4">
+    <div>
+      <label class="sci-label">{{ i18n.t('forms.show.unit_label') }}</label>
+      <div class="sci-input-container-v2">
+        <input type="text"
+              class="sci-input"
+              v-model="editField.attributes.data.unit"
+              @change="updateField"
+              :placeholder="i18n.t('forms.show.unit_placeholder')" />
+      </div>
+    </div>
+    <hr class="my-4 w-full">
+    <div class="bg-sn-super-light-grey rounded p-4">
+      <div class="flex items-center gap-4">
+        <h5>{{ i18n.t('forms.show.validations.response_validation.title') }}</h5>
+        <span class="sci-toggle-checkbox-container">
+          <input type="checkbox"
+                 class="sci-toggle-checkbox"
+                 @change="updateField"
+                 v-model="responseValidation.enabled" />
+          <span class="sci-toggle-checkbox-label"></span>
+        </span>
+      </div>
+      <div class="grid grid-cols-3 gap-2">
+        <div>
+          <SelectDropdown
+            class="bg-white"
+            :disabled="!responseValidationEnabled"
+            :options="responseValidationTypes"
+            :value="responseValidation.type" />
+        </div>
+        <div class="sci-input-container-v2" :class="{ 'error': !responseValidationIsValid }" >
+          <input type="number" class="sci-input !bg-white"
+                 :disabled="!responseValidationEnabled"
+                 @change="updateField"
+                 :placeholder="i18n.t('forms.show.validations.response_validation.min_placeholder')"
+                 v-model="responseValidation.min" />
+        </div>
+        <div class="sci-input-container-v2" :class="{ 'error': !responseValidationIsValid }">
+          <input type="number" class="sci-input !bg-white"
+                 :disabled="!responseValidationEnabled"
+                 @change="updateField"
+                 :placeholder="i18n.t('forms.show.validations.response_validation.max_placeholder')"
+                 v-model="responseValidation.max" />
+        </div>
+        <div class="col-span-3 sci-input-container-v2">
+          <input type="text" class="sci-input !bg-white"
+                 :disabled="!responseValidationEnabled"
+                 @change="updateField"
+                 :placeholder="i18n.t('forms.show.validations.response_validation.message_placeholder')"
+                 v-model="responseValidation.message" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import fieldMixin from './field_mixin';
+import SelectDropdown from '../../shared/select_dropdown.vue';
+
 export default {
-  name: 'NumberField'
+  name: 'NumberField',
+  mixins: [fieldMixin],
+  components: {
+    SelectDropdown
+  },
+  created() {
+    if (!this.responseValidation) {
+      this.editField.attributes.data.validations.response_validation = {};
+    }
+
+    if (!this.responseValidation.type) {
+      this.responseValidation.type = 'between';
+    }
+  },
+  computed: {
+    responseValidation() {
+      return this.editField.attributes.data.validations.response_validation;
+    },
+    responseValidationEnabled() {
+      return this.responseValidation.enabled;
+    },
+    responseValidationTypes() {
+      return [['between', 'Between']];
+    },
+    responseValidationIsValid() {
+      return (this.responseValidation.min < this.responseValidation.max) || !this.responseValidationEnabled;
+    },
+    validField() {
+      return this.responseValidationIsValid;
+    }
+  },
+  methods: {
+    updateField() {
+      if (!this.validField) {
+        return;
+      }
+
+      this.$emit('updateField');
+    }
+  }
 };
 </script>

app/javascript/vue/forms/edit_fields/single_choice.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col gap-4">
     <hr class="my-4 w-full">
     <div>
       <h5 class="mb-4">{{ i18n.t('forms.show.dropdown_options_label') }}</h5>
@@ -17,23 +17,10 @@
 
 <script>
 
+import fieldMixin from './field_mixin';
+
 export default {
   name: 'SingleChoiceField',
-  props: {
-    field: Object
-  },
-  watch: {
-    editField: {
-      handler() {
-        this.$emit('syncField', this.editField);
-      },
-      deep: true
-    }
-  },
-  data() {
-    return {
-      editField: { ...this.field }
-    };
-  }
+  mixins: [fieldMixin]
 };
 </script>

app/javascript/vue/forms/show.vue

@@ -7,6 +7,7 @@
             v-if="canManage"
             :value="form.attributes.name"
             :characterLimit="255"
+            attributeName="name"
             :characterMinLimit="2"
             :allowBlank="false"
             @editingEnabled="editingName = true"
@@ -36,9 +37,10 @@
             <div v-for="(field) in fields"
                  @click="activeField = field"
                  :key="field.id"
-                 class="font-bold p-3 rounded-lg border-sn-grey-100 cursor-pointer border"
+                 class="font-bold p-3 rounded-lg flex items-center gap-2 border-sn-grey-100 cursor-pointer border"
                  :class="{ '!border-sn-blue bg-sn-super-light-blue': activeField.id === field.id }"
             >
+              <i class="sn-icon rounded text-sn-blue bg-sn-super-light-blue p-1" :class="fieldIcon[field.attributes.data.type]"></i>
               {{ field.attributes.name }}
             </div>
           </div>
@@ -50,7 +52,8 @@
               </button>
             </template>
             <template v-slot:flyout>
-              <div v-for="e in newFields" :key="e.type" @click="addField(e.type)" class="py-2.5 px-3 hover:bg-sn-super-light-grey cursor-pointer">
+              <div v-for="e in newFields" :key="e.type" @click="addField(e.type)" class="py-2.5 px-3 hover:bg-sn-super-light-grey cursor-pointer flex items-center gap-2">
+                <i class="sn-icon rounded text-sn-blue bg-sn-super-light-blue p-1" :class="fieldIcon[e.type]"></i>
                 {{ e.name }}
               </div>
             </template>
@@ -61,6 +64,7 @@
             :key="activeField.id"
             v-if="activeField.id"
             :field="activeField"
+            :icon="fieldIcon[activeField.attributes.data.type]"
             @update="updateField"
             @delete="deleteField"
           />
@@ -93,12 +97,21 @@ export default {
     },
     newFields() {
       return [
-        { name: this.i18n.t('forms.show.blocks.text'), type: 'text' },
-        { name: this.i18n.t('forms.show.blocks.number'), type: 'number' },
-        { name: this.i18n.t('forms.show.blocks.single_choice'), type: 'single_choice' },
-        { name: this.i18n.t('forms.show.blocks.multiple_choice'), type: 'multiple_choice' },
-        { name: this.i18n.t('forms.show.blocks.datetime'), type: 'datetime' }
+        { name: this.i18n.t('forms.show.blocks.TextField'), type: 'TextField' },
+        { name: this.i18n.t('forms.show.blocks.NumberField'), type: 'NumberField' },
+        { name: this.i18n.t('forms.show.blocks.SingleChoiceField'), type: 'SingleChoiceField' },
+        { name: this.i18n.t('forms.show.blocks.MultipleChoiceField'), type: 'MultipleChoiceField' },
+        { name: this.i18n.t('forms.show.blocks.DatetimeField'), type: 'DatetimeField' }
       ];
+    },
+    fieldIcon() {
+      return {
+        TextField: 'sn-icon-result-text',
+        NumberField: 'sn-icon-value',
+        SingleChoiceField: 'sn-icon-choice-single',
+        MultipleChoiceField: 'sn-icon-choice-multiple',
+        DatetimeField: 'sn-icon-created'
+      };
     }
   },
   created() {

config/locales/en.yml

@@ -1088,12 +1088,24 @@ en:
       delete: 'Delete'
       test_form: 'Test form'
       publish: 'Publish'
+      dropdown_options_label: 'Dropdown options'
+      dropdown_options_placeholder_html: "Enter dropdown list options one per line:\nDropdown list option\nDropdown list option\n..."
+      unit_label: 'Unit'
+      unit_placeholder: 'Add a unit'
+      time_label: 'Include time'
+      range_label: 'Include range'
+      validations:
+        response_validation:
+          title: 'Response validation'
+          min_placeholder: 'Add min. value'
+          max_placeholder: 'Add max. value'
+          message_placeholder: 'Add a custom warning message'
       blocks:
-        text: 'Text'
-        number: 'Number'
-        single_choice: 'Single choice'
-        multiple_choice: 'Multiple choice'
-        datetime: 'Date & Time'
+        TextField: 'Text'
+        NumberField: 'Number'
+        SingleChoiceField: 'Single choice'
+        MultipleChoiceField: 'Multiple choice'
+        DatetimeField: 'Date & Time'
   label_templates:
     types:
       fluics_label_template: 'Fluics'

vendor/assets/stylesheets/fonts/SN-icon-font.svg

@@ -199,4 +199,37 @@
 <glyph unicode="&#xe9aa;" glyph-name="test-tube" data-tags="test-tube" d="M610.718 768l241.361-241.361-30.17-30.17-30.17 30.17-362.039-362.035c-49.988-49.988-131.033-49.988-181.020 0-49.987 49.984-49.987 131.029 0 181.018l362.038 362.039-30.17 30.17 30.17 30.17zM640.887 677.49l-235.11-235.11h241.36l114.432 114.43-120.683 120.68z" />
 <glyph unicode="&#xe9ab;" glyph-name="storage" data-tags="storage" d="M239.59 106.667c-19.637 0-36.034 6.579-49.19 19.733s-19.733 29.551-19.733 49.19v544.82c0 19.637 6.578 36.034 19.733 49.189s29.552 19.733 49.19 19.733h544.82c19.639 0 36.036-6.578 49.19-19.733s19.733-29.552 19.733-49.189v-544.82c0-19.639-6.579-36.036-19.733-49.19s-29.551-19.733-49.19-19.733h-544.82zM213.333 576.082h597.333v144.329c0 6.563-2.735 12.58-8.205 18.051s-11.486 8.205-18.052 8.205h-544.82c-6.564 0-12.581-2.735-18.051-8.205s-8.205-11.488-8.205-18.051v-144.329zM213.333 362.586h597.333v170.83h-597.333v-170.83zM239.59 149.333h544.82c6.566 0 12.582 2.735 18.052 8.205s8.205 11.486 8.205 18.052v144.329h-597.333v-144.329c0-6.566 2.735-12.582 8.205-18.052s11.488-8.205 18.051-8.205zM426.667 640v55.959h170.667v-55.959h-170.667zM426.667 426.667v55.795h170.667v-55.795h-170.667zM426.667 213.333v55.629h170.667v-55.629h-170.667z" />
 <glyph unicode="&#xe9ac;" glyph-name="outbound" data-tags="outbound" d="M264.043 222.357l-29.376 29.376 430.11 430.933h-396.467v42.667h469.333v-469.333h-42.667v396.469l-430.933-430.112z" />
+<glyph unicode="&#xe9ad;" glyph-name="align-horizontal-center" data-tags="align-horizontal-center" d="M170.667 106.667v42.667h682.667v-42.667h-682.667zM341.333 266.667v42.667h341.333v-42.667h-341.333zM170.667 426.667v42.667h682.667v-42.667h-682.667zM341.333 586.667v42.667h341.333v-42.667h-341.333zM170.667 746.667v42.667h682.667v-42.667h-682.667z" />
+<glyph unicode="&#xe9ae;" glyph-name="align-horizontal-justify" data-tags="align-horizontal-justify" d="M170.667 106.667v42.667h682.667v-42.667h-682.667zM170.667 266.667v42.667h682.667v-42.667h-682.667zM170.667 426.667v42.667h682.667v-42.667h-682.667zM170.667 586.667v42.667h682.667v-42.667h-682.667zM170.667 746.667v42.667h682.667v-42.667h-682.667z" />
+<glyph unicode="&#xe9af;" glyph-name="align-horizontal-left" data-tags="align-horizontal-left" d="M170.667 106.667v42.667h682.667v-42.667h-682.667zM170.667 266.667v42.667h426.667v-42.667h-426.667zM170.667 426.667v42.667h682.667v-42.667h-682.667zM170.667 586.667v42.667h426.667v-42.667h-426.667zM170.667 746.667v42.667h682.667v-42.667h-682.667z" />
+<glyph unicode="&#xe9b0;" glyph-name="align-horizontal-right" data-tags="align-horizontal-right" d="M170.667 746.667v42.667h682.667v-42.667h-682.667zM426.667 586.667v42.667h426.667v-42.667h-426.667zM170.667 426.667v42.667h682.667v-42.667h-682.667zM426.667 266.667v42.667h426.667v-42.667h-426.667zM170.667 106.667v42.667h682.667v-42.667h-682.667z" />
+<glyph unicode="&#xe9b1;" glyph-name="align-vertical-bottom" data-tags="align-vertical-bottom" d="M213.333 106.667v42.667h597.333v-42.667h-597.333zM512 264.205l-183.797 183.795 30.197 30.195 132.267-132.267v443.405h42.667v-443.405l132.267 132.267 30.195-30.195-183.795-183.795z" />
+<glyph unicode="&#xe9b2;" glyph-name="align-vertical-center" data-tags="align-vertical-center" d="M490.667 64v221.867l-89.6-89.6-30.197 30.195 141.131 141.133 141.129-141.133-30.195-30.195-89.6 89.6v-221.867h-42.667zM213.333 426.667v42.667h597.333v-42.667h-597.333zM512 528.405l-141.131 141.131 30.197 30.197 89.6-89.6v221.867h42.667v-221.867l89.6 89.6 30.195-30.197-141.129-141.131z" />
+<glyph unicode="&#xe9b3;" glyph-name="align-vertical-top" data-tags="align-vertical-top" d="M213.333 746.667v42.667h597.333v-42.667h-597.333zM490.667 106.667v443.403l-132.267-132.269-30.197 30.199 183.797 183.797 183.795-183.797-30.195-30.199-132.267 132.269v-443.403h-42.667z" />
+<glyph unicode="&#xe9b4;" glyph-name="border-all" data-tags="border-all" d="M170.667 106.667v682.667h682.667v-682.667h-682.667zM810.667 149.333v277.333h-277.333v-277.333h277.333zM810.667 746.667h-277.333v-277.333h277.333v277.333zM213.333 746.667v-277.333h277.333v277.333h-277.333zM213.333 149.333h277.333v277.333h-277.333v-277.333z" />
+<glyph unicode="&#xe9b5;" glyph-name="border-bottom" data-tags="border-bottom" d="M170.667 106.667v42.667h682.667v-42.667h-682.667zM170.667 264.205v52.51h52.512v-52.51h-52.512zM170.667 421.739v52.523h52.512v-52.523h-52.512zM170.667 579.285v52.512h52.512v-52.512h-52.512zM170.667 736.821v52.512h52.512v-52.512h-52.512zM328.203 421.739v52.523h52.512v-52.523h-52.512zM328.203 736.821v52.512h52.512v-52.512h-52.512zM485.739 264.205v52.51h52.523v-52.51h-52.523zM485.739 421.739v52.523h52.523v-52.523h-52.523zM485.739 579.285v52.512h52.523v-52.512h-52.523zM485.739 736.821v52.512h52.523v-52.512h-52.523zM643.285 421.739v52.523h52.51v-52.523h-52.51zM643.285 736.821v52.512h52.51v-52.512h-52.51zM800.823 264.205v52.51h52.51v-52.51h-52.51zM800.823 421.739v52.523h52.51v-52.523h-52.51zM800.823 579.285v52.512h52.51v-52.512h-52.51zM800.823 736.821v52.512h52.51v-52.512h-52.51z" />
+<glyph unicode="&#xe9b6;" glyph-name="border-horizontal" data-tags="border-horizontal" d="M170.667 106.667v52.51h52.512v-52.51h-52.512zM170.667 264.205v52.51h52.512v-52.51h-52.512zM170.667 426.667v42.667h682.667v-42.667h-682.667zM170.667 579.285v52.512h52.512v-52.512h-52.512zM170.667 736.821v52.512h52.512v-52.512h-52.512zM328.203 106.667v52.51h52.512v-52.51h-52.512zM328.203 736.821v52.512h52.512v-52.512h-52.512zM485.739 106.667v52.51h52.523v-52.51h-52.523zM485.739 264.205v52.51h52.523v-52.51h-52.523zM485.739 579.285v52.512h52.523v-52.512h-52.523zM485.739 736.821v52.512h52.523v-52.512h-52.523zM643.285 106.667v52.51h52.51v-52.51h-52.51zM643.285 736.821v52.512h52.51v-52.512h-52.51zM800.823 106.667v52.51h52.51v-52.51h-52.51zM800.823 264.205v52.51h52.51v-52.51h-52.51zM800.823 579.285v52.512h52.51v-52.512h-52.51zM800.823 736.821v52.512h52.51v-52.512h-52.51z" />
+<glyph unicode="&#xe9b7;" glyph-name="border-clear" data-tags="border-clear" d="M170.667 106.667v52.51h52.512v-52.51h-52.512zM170.667 264.205v52.51h52.512v-52.51h-52.512zM170.667 421.739v52.523h52.512v-52.523h-52.512zM170.667 579.285v52.512h52.512v-52.512h-52.512zM170.667 736.821v52.512h52.512v-52.512h-52.512zM328.203 106.667v52.51h52.512v-52.51h-52.512zM328.203 421.739v52.523h52.512v-52.523h-52.512zM328.203 736.821v52.512h52.512v-52.512h-52.512zM485.739 106.667v52.51h52.523v-52.51h-52.523zM485.739 264.205v52.51h52.523v-52.51h-52.523zM485.739 421.739v52.523h52.523v-52.523h-52.523zM485.739 579.285v52.512h52.523v-52.512h-52.523zM485.739 736.821v52.512h52.523v-52.512h-52.523zM643.285 106.667v52.51h52.51v-52.51h-52.51zM643.285 421.739v52.523h52.51v-52.523h-52.51zM643.285 736.821v52.512h52.51v-52.512h-52.51zM800.823 106.667v52.51h52.51v-52.51h-52.51zM800.823 264.205v52.51h52.51v-52.51h-52.51zM800.823 421.739v52.523h52.51v-52.523h-52.51zM800.823 579.285v52.512h52.51v-52.512h-52.51zM800.823 736.821v52.512h52.51v-52.512h-52.51z" />
+<glyph unicode="&#xe9b8;" glyph-name="border-inner" data-tags="border-inner" d="M170.667 106.667v52.51h52.512v-52.51h-52.512zM170.667 264.205v52.51h52.512v-52.51h-52.512zM170.667 579.285v52.512h52.512v-52.512h-52.512zM170.667 736.821v52.512h52.512v-52.512h-52.512zM328.203 106.667v52.51h52.512v-52.51h-52.512zM328.203 736.821v52.512h52.512v-52.512h-52.512zM643.285 106.667v52.51h52.51v-52.51h-52.51zM800.823 106.667v52.51h52.51v-52.51h-52.51zM800.823 264.205v52.51h52.51v-52.51h-52.51zM800.823 579.285v52.512h52.51v-52.512h-52.51zM800.823 736.821v52.512h52.51v-52.512h-52.51zM643.285 736.821v52.512h52.51v-52.512h-52.51zM490.667 106.667v320h-320v42.667h320v320h42.667v-320h320v-42.667h-320v-320h-42.667z" />
+<glyph unicode="&#xe9b9;" glyph-name="border-left" data-tags="border-left" d="M170.667 106.667v682.667h42.667v-682.667h-42.667zM328.203 106.667v52.51h52.512v-52.51h-52.512zM328.203 421.739v52.523h52.512v-52.523h-52.512zM328.203 736.821v52.512h52.512v-52.512h-52.512zM485.739 106.667v52.51h52.523v-52.51h-52.523zM485.739 264.205v52.51h52.523v-52.51h-52.523zM485.739 421.739v52.523h52.523v-52.523h-52.523zM485.739 579.285v52.512h52.523v-52.512h-52.523zM485.739 736.821v52.512h52.523v-52.512h-52.523zM643.285 106.667v52.51h52.51v-52.51h-52.51zM643.285 421.739v52.523h52.51v-52.523h-52.51zM643.285 736.821v52.512h52.51v-52.512h-52.51zM800.823 106.667v52.51h52.51v-52.51h-52.51zM800.823 264.205v52.51h52.51v-52.51h-52.51zM800.823 421.739v52.523h52.51v-52.523h-52.51zM800.823 579.285v52.512h52.51v-52.512h-52.51zM800.823 736.821v52.512h52.51v-52.512h-52.51z" />
+<glyph unicode="&#xe9ba;" glyph-name="border-outer" data-tags="border-outer" d="M213.333 149.333h597.333v597.333h-597.333v-597.333zM170.667 106.667v682.667h682.667v-682.667h-682.667zM328.203 421.739v52.523h52.512v-52.523h-52.512zM485.739 264.205v52.51h52.523v-52.51h-52.523zM485.739 421.739v52.523h52.523v-52.523h-52.523zM485.739 579.285v52.512h52.523v-52.512h-52.523zM643.285 421.739v52.523h52.51v-52.523h-52.51z" />
+<glyph unicode="&#xe9bb;" glyph-name="border-palette" data-tags="border-palette" d="M510.357 64c-52.297 0-101.661 10.103-148.096 30.315-46.443 20.215-86.99 47.65-121.643 82.304s-62.087 75.337-82.304 122.048c-20.21 46.711-30.315 96.491-30.315 149.333 0 53.555 10.325 103.687 30.976 150.4s48.793 87.357 84.427 121.931c35.641 34.567 77.447 61.821 125.419 81.76s99.091 29.909 153.355 29.909c49.779 0 97.178-8.409 142.195-25.227 45.018-16.825 84.634-40.157 118.852-69.995 34.21-29.838 61.559-65.394 82.048-106.667 20.484-41.273 30.729-86.279 30.729-135.017 0-65.916-19.008-118.686-57.024-158.315-38.016-39.633-90.121-59.447-156.309-59.447h-75.648c-17.89 0-32.866-6.153-44.928-18.462s-18.091-27.162-18.091-44.557c0-17.826 5.333-32.964 16-45.41 10.667-12.442 16-26.79 16-43.038 0-20.787-5.811-36.297-17.438-46.528-11.622-10.227-27.691-15.339-48.205-15.339zM277.333 426.667c11.925 0 22.016 4.13 30.272 12.395 8.263 8.256 12.395 18.347 12.395 30.272s-4.131 22.016-12.395 30.272c-8.256 8.265-18.347 12.395-30.272 12.395s-22.016-4.13-30.272-12.395c-8.263-8.256-12.395-18.347-12.395-30.272s4.131-22.016 12.395-30.272c8.256-8.265 18.347-12.395 30.272-12.395zM405.333 597.333c11.925 0 22.016 4.131 30.272 12.395 8.265 8.256 12.395 18.347 12.395 30.272s-4.13 22.016-12.395 30.272c-8.256 8.263-18.347 12.395-30.272 12.395s-22.016-4.131-30.272-12.395c-8.263-8.256-12.395-18.347-12.395-30.272s4.131-22.016 12.395-30.272c8.256-8.263 18.347-12.395 30.272-12.395zM618.667 597.333c11.925 0 22.016 4.131 30.272 12.395 8.265 8.256 12.395 18.347 12.395 30.272s-4.13 22.016-12.395 30.272c-8.256 8.263-18.347 12.395-30.272 12.395s-22.016-4.131-30.272-12.395c-8.265-8.256-12.395-18.347-12.395-30.272s4.13-22.016 12.395-30.272c8.256-8.263 18.347-12.395 30.272-12.395zM746.667 426.667c11.925 0 22.016 4.13 30.272 12.395 8.265 8.256 12.395 18.347 12.395 30.272s-4.13 22.016-12.395 30.272c-8.256 8.265-18.347 12.395-30.272 12.395s-22.016-4.13-30.272-12.395c-8.265-8.256-12.395-18.347-12.395-30.272s4.13-22.016 12.395-30.272c8.256-8.265 18.347-12.395 30.272-12.395zM510.357 106.667c7.497 0 13.197 1.643 17.109 4.928 3.913 3.277 5.867 8.034 5.867 14.272 0 9.954-5.333 20.595-16 31.915-10.667 11.328-16 29.956-16 55.881 0 30.963 10.313 56.427 30.933 76.386 20.621 19.968 45.867 29.952 75.733 29.952h74.667c53.495 0 95.317 15.74 125.461 47.219 30.135 31.484 45.205 74.108 45.205 127.876 0 86.59-33.297 157.278-99.895 212.062-66.603 54.784-143.689 82.176-231.262 82.176-98.354 0-181.525-33.067-249.515-99.2-67.997-66.133-101.995-146.845-101.995-242.133 0-94.579 33.245-175.113 99.733-241.6s146.475-99.733 239.957-99.733z" />
+<glyph unicode="&#xe9bc;" glyph-name="border-right" data-tags="border-right" d="M170.667 106.667v52.51h52.512v-52.51h-52.512zM170.667 264.205v52.51h52.512v-52.51h-52.512zM170.667 421.739v52.523h52.512v-52.523h-52.512zM170.667 579.285v52.512h52.512v-52.512h-52.512zM170.667 736.821v52.512h52.512v-52.512h-52.512zM328.203 106.667v52.51h52.512v-52.51h-52.512zM328.203 421.739v52.523h52.512v-52.523h-52.512zM328.203 736.821v52.512h52.512v-52.512h-52.512zM485.739 106.667v52.51h52.523v-52.51h-52.523zM485.739 264.205v52.51h52.523v-52.51h-52.523zM485.739 421.739v52.523h52.523v-52.523h-52.523zM485.739 579.285v52.512h52.523v-52.512h-52.523zM485.739 736.821v52.512h52.523v-52.512h-52.523zM643.285 106.667v52.51h52.51v-52.51h-52.51zM643.285 421.739v52.523h52.51v-52.523h-52.51zM643.285 736.821v52.512h52.51v-52.512h-52.51zM810.667 106.667v682.667h42.667v-682.667h-42.667z" />
+<glyph unicode="&#xe9bd;" glyph-name="border-top" data-tags="border-top" d="M170.667 106.667v52.51h52.512v-52.51h-52.512zM170.667 264.205v52.51h52.512v-52.51h-52.512zM170.667 421.739v52.523h52.512v-52.523h-52.512zM170.667 579.285v52.512h52.512v-52.512h-52.512zM170.667 746.667v42.667h682.667v-42.667h-682.667zM328.203 106.667v52.51h52.512v-52.51h-52.512zM328.203 421.739v52.523h52.512v-52.523h-52.512zM485.739 106.667v52.51h52.523v-52.51h-52.523zM485.739 264.205v52.51h52.523v-52.51h-52.523zM485.739 421.739v52.523h52.523v-52.523h-52.523zM485.739 579.285v52.512h52.523v-52.512h-52.523zM643.285 106.667v52.51h52.51v-52.51h-52.51zM643.285 421.739v52.523h52.51v-52.523h-52.51zM800.823 106.667v52.51h52.51v-52.51h-52.51zM800.823 264.205v52.51h52.51v-52.51h-52.51zM800.823 421.739v52.523h52.51v-52.523h-52.51zM800.823 579.285v52.512h52.51v-52.512h-52.51z" />
+<glyph unicode="&#xe9be;" glyph-name="border-vertical" data-tags="vertical" d="M170.667 106.667v52.51h52.512v-52.51h-52.512zM170.667 264.205v52.51h52.512v-52.51h-52.512zM170.667 421.739v52.523h52.512v-52.523h-52.512zM170.667 579.285v52.512h52.512v-52.512h-52.512zM170.667 736.821v52.512h52.512v-52.512h-52.512zM328.203 106.667v52.51h52.512v-52.51h-52.512zM328.203 421.739v52.523h52.512v-52.523h-52.512zM328.203 736.821v52.512h52.512v-52.512h-52.512zM490.667 106.667v682.667h42.667v-682.667h-42.667zM643.285 106.667v52.51h52.51v-52.51h-52.51zM643.285 421.739v52.523h52.51v-52.523h-52.51zM643.285 736.821v52.512h52.51v-52.512h-52.51zM800.823 106.667v52.51h52.51v-52.51h-52.51zM800.823 264.205v52.51h52.51v-52.51h-52.51zM800.823 421.739v52.523h52.51v-52.523h-52.51zM800.823 579.285v52.512h52.51v-52.512h-52.51zM800.823 736.821v52.512h52.51v-52.512h-52.51z" />
+<glyph unicode="&#xe9bf;" glyph-name="color-fill" data-tags="color-fill" d="M281.515 850.221l29.621 31.008 346.997-346.987c13.619-13.624 20.429-30.063 20.429-49.31 0-19.26-6.81-35.699-20.429-49.323l-166.558-168.205c-13.077-13.069-29.248-19.605-48.503-19.605-19.25 0-35.413 6.537-48.491 19.605l-166.56 168.205c-13.625 13.623-20.437 30.063-20.437 49.323 0 19.247 6.813 35.686 20.437 49.31l185.44 184.043-131.947 131.936zM443.895 687.843l-187.319-185.686c-2.738-2.739-4.515-5.611-5.333-8.619-0.825-3.008-1.237-6.153-1.237-9.429h386.133c0 3.277-0.41 6.421-1.229 9.429-0.815 3.008-2.594 5.879-5.333 8.619l-185.681 185.686zM792.619 205.133c-17.997 0-33.165 6.165-45.504 18.496-12.331 12.339-18.496 27.507-18.496 45.504 0 12.745 3.349 25.323 10.048 37.739s13.743 24.179 21.129 35.285c5.308 7.437 10.692 14.686 16.162 21.739 5.47 7.061 11.021 14.31 16.661 21.751 5.632-7.441 11.183-14.69 16.653-21.751 5.466-7.053 10.859-14.302 16.171-21.739 7.381-11.106 14.421-22.869 21.12-35.285 6.703-12.416 10.057-24.994 10.057-37.739 0-17.997-6.17-33.165-18.509-45.504-12.335-12.331-27.499-18.496-45.491-18.496zM85.333-63.996v85.333h853.333v-85.333h-853.333z" />
+<glyph unicode="&#xe9c0;" glyph-name="fullscreen-enter" data-tags="fullscreen-enter" d="M239.595 106.667c-19.641 0-36.039 6.579-49.195 19.733s-19.733 29.555-19.733 49.195v144.405h42.667v-144.405c0-6.571 2.734-12.591 8.203-18.057 5.469-5.47 11.488-8.205 18.059-8.205h144.405v-42.667h-144.405zM640 106.667v42.667h144.405c6.571 0 12.591 2.735 18.057 8.205 5.47 5.466 8.205 11.486 8.205 18.057v144.405h42.667v-144.405c0-19.639-6.579-36.041-19.733-49.195s-29.555-19.733-49.195-19.733h-144.405zM170.667 576v144.405c0 19.641 6.578 36.039 19.733 49.195s29.554 19.733 49.195 19.733h144.405v-42.667h-144.405c-6.571 0-12.59-2.734-18.059-8.203s-8.203-11.488-8.203-18.059v-144.405h-42.667zM810.667 576v144.405c0 6.571-2.735 12.59-8.205 18.059-5.466 5.469-11.486 8.203-18.057 8.203h-144.405v42.667h144.405c19.639 0 36.041-6.578 49.195-19.733s19.733-29.554 19.733-49.195v-144.405h-42.667z" />
+<glyph unicode="&#xe9c1;" glyph-name="fullscreen-exit" data-tags="fullscreen-exit" d="M316.715 106.667v146.048h-146.048v42.667h188.715v-188.715h-42.667zM665.438 106.667v188.715h188.719v-42.667h-146.052v-146.048h-42.667zM170.667 600.619v42.667h146.048v146.048h42.667v-188.715h-188.715zM665.438 600.619v188.715h42.667v-146.048h146.052v-42.667h-188.719z" />
+<glyph unicode="&#xe9c2;" glyph-name="photo-add" data-tags="photo-add" d="M239.595 106.667c-19.641 0-36.039 6.579-49.195 19.733s-19.733 29.555-19.733 49.195v544.811c0 19.641 6.578 36.039 19.733 49.195s29.554 19.733 49.195 19.733h298.667v-42.667h-298.667c-7.659 0-13.952-2.461-18.88-7.381-4.921-4.928-7.381-11.221-7.381-18.88v-544.811c0-7.659 2.461-13.952 7.381-18.88 4.928-4.919 11.221-7.381 18.88-7.381h544.811c7.659 0 13.952 2.462 18.88 7.381 4.919 4.928 7.381 11.221 7.381 18.88v298.667h42.667v-298.667c0-19.639-6.579-36.041-19.733-49.195s-29.555-19.733-49.195-19.733h-544.811zM288.821 260.928h446.359l-137.847 183.787-128-161.643-85.333 102.571-95.179-124.715zM725.333 576v85.333h-85.333v42.667h85.333v85.333h42.667v-85.333h85.333v-42.667h-85.333v-85.333h-42.667z" />
+<glyph unicode="&#xe9c3;" glyph-name="redo" data-tags="redo" d="M398.603 192c-55.851 0-103.563 19.392-143.136 58.176s-59.36 85.854-59.36 141.205c0 55.36 19.787 102.293 59.36 140.8 39.573 38.514 87.285 57.771 143.136 57.771h330.336l-126.515 126.517 30.195 30.197 178.048-178.048-178.048-178.061-30.195 30.199 126.515 126.528h-330.336c-44.252 0-81.955-15.044-113.109-45.129-31.147-30.089-46.72-67.012-46.72-110.775s15.573-80.819 46.72-111.177c31.154-30.357 68.857-45.538 113.109-45.538h309.506v-42.667h-309.506z" />
+<glyph unicode="&#xe9c4;" glyph-name="table-header-row" data-tags="table-header-row" d="M239.595 106.667c-19.641 0-36.039 6.579-49.195 19.733s-19.733 29.555-19.733 49.195v544.811c0 19.641 6.578 36.039 19.733 49.195s29.554 19.733 49.195 19.733h544.811c19.639 0 36.041-6.578 49.195-19.733s19.733-29.554 19.733-49.195v-544.811c0-19.639-6.579-36.041-19.733-49.195s-29.555-19.733-49.195-19.733h-544.811zM239.595 149.333h544.811c6.571 0 12.591 2.735 18.057 8.205 5.47 5.466 8.205 11.486 8.205 18.057v436.512h-597.333v-436.512c0-6.571 2.734-12.591 8.203-18.057 5.469-5.47 11.488-8.205 18.059-8.205z" />
+<glyph unicode="&#xe9c5;" glyph-name="text-bold" data-tags="text-bold" d="M336.086 181.333v533.333h179.114c40.755 0 76.719-12.853 107.895-38.56 31.181-25.714 46.771-59.165 46.771-100.352 0-27.513-7.219-51.595-21.662-72.245s-32.333-35.789-53.666-45.419c25.984-7.275 48.043-22.537 66.176-45.781s27.2-51.281 27.2-84.105c0-45.781-17.092-81.711-51.273-107.78-34.193-26.061-71.829-39.091-112.909-39.091h-187.648zM390.486 231.872h130.624c33.037 0 59.721 9.946 80.043 29.833 20.318 19.883 30.477 43.034 30.477 69.453 0 26.423-10.159 49.579-30.477 69.461-20.322 19.883-47.249 29.824-80.777 29.824h-129.89v-198.571zM390.486 480h122.176c28.386 0 52.429 8.777 72.119 26.334s29.534 39.551 29.534 65.975c0 26.909-10.010 48.981-30.025 66.219-20.019 17.23-43.733 25.845-71.138 25.845h-122.666v-184.373z" />
+<glyph unicode="&#xe9c6;" glyph-name="text-format" data-tags="text-format" d="M265.846 234.667l225.644 554.667h41.024l225.643-554.667h-51.533l-61.534 155.243h-268.961l-62.037-155.243h-48.245zM391.222 430.933h238.273l-115.362 290.133h-5.909l-117.002-290.133zM85.333 21.333v-85.333h853.333v85.333h-853.333z" />
+<glyph unicode="&#xe9c7;" glyph-name="text-fields" data-tags="text-fields" d="M336.406 144.414v554.668h-213.333v52.523h479.188v-52.523h-213.332v-554.668h-52.523zM720.405 144.414v341.333h-128v52.524h308.523v-52.524h-128v-341.333h-52.523z" />
+<glyph unicode="&#xe9c8;" glyph-name="merge-cells" data-tags="merge-cells" d="M149.333 85.333v213.333h42.667v-170.667h170.667v-42.667h-213.333zM661.333 85.333v42.667h170.667v170.667h42.667v-213.333h-213.333zM306.133 315.157l-30.443 29.376 82.133 82.133h-251.157v42.667h251.157l-82.133 82.133 30.443 29.376 132.843-132.843-132.843-132.843zM717.867 315.157l-132.843 132.843 132.843 132.843 30.443-29.376-82.133-82.133h251.157v-42.667h-251.157l82.133-82.133-30.443-29.376zM149.333 597.333v213.333h213.333v-42.667h-170.667v-170.667h-42.667zM832 597.333v170.667h-170.667v42.667h213.333v-213.333h-42.667z" />
+<glyph unicode="&#xe9c9;" glyph-name="text-Italic" data-tags="text-Italic" d="M246.976 181.333v47.595h155.072l148.514 438.144h-155.074v47.595h354.464v-47.595h-150.153l-148.514-438.144h150.157v-47.595h-354.466z" />
+<glyph unicode="&#xe9ca;" glyph-name="forms" data-tags="forms" d="M320 256h256v42.667h-256v-42.667zM320 426.667h384v42.667h-384v-42.667zM320 597.333h384v42.667h-384v-42.667zM239.595 106.667c-19.641 0-36.039 6.579-49.195 19.733s-19.733 29.555-19.733 49.195v544.811c0 19.641 6.578 36.039 19.733 49.195s29.554 19.733 49.195 19.733h544.811c19.639 0 36.041-6.578 49.195-19.733s19.733-29.554 19.733-49.195v-544.811c0-19.639-6.579-36.041-19.733-49.195s-29.555-19.733-49.195-19.733h-544.811zM239.595 149.333h544.811c6.571 0 12.591 2.735 18.057 8.205 5.47 5.466 8.205 11.486 8.205 18.057v544.811c0 6.571-2.735 12.59-8.205 18.059-5.466 5.469-11.486 8.203-18.057 8.203h-544.811c-6.571 0-12.59-2.734-18.059-8.203s-8.203-11.488-8.203-18.059v-544.811c0-6.571 2.734-12.591 8.203-18.057 5.469-5.47 11.488-8.205 18.059-8.205z" />
+<glyph unicode="&#xe9cb;" glyph-name="value" data-tags="value" d="M512.141 64c-53.103 0-103.024 10.078-149.773 30.229-46.741 20.151-87.403 47.501-121.984 82.048s-61.955 75.17-82.123 121.877c-20.174 46.699-30.261 96.602-30.261 149.705s10.077 103.024 30.229 149.773c20.153 46.741 47.502 87.403 82.048 121.984s75.171 61.955 121.877 82.123c46.699 20.174 96.602 30.261 149.705 30.261s103.023-10.077 149.773-30.229c46.741-20.153 87.403-47.502 121.984-82.048s61.956-75.171 82.125-121.877c20.173-46.699 30.259-96.602 30.259-149.705s-10.078-103.023-30.229-149.773c-20.151-46.741-47.501-87.403-82.048-121.984s-75.17-61.956-121.877-82.125c-46.699-20.173-96.602-30.259-149.705-30.259zM512 106.667c95.287 0 176 33.067 242.133 99.2s99.2 146.846 99.2 242.133c0 95.289-33.067 176-99.2 242.133s-146.846 99.2-242.133 99.2c-95.289 0-176-33.067-242.133-99.2s-99.2-146.845-99.2-242.133c0-95.287 33.067-176 99.2-242.133s146.845-99.2 242.133-99.2zM512 256h42.667v384h-128v-42.667h85.333v-341.333z" />
+<glyph unicode="&#xe9cc;" glyph-name="choice-multiple" data-tags="choice-multiple" d="M170.667 746.667c0 23.564 19.103 42.667 42.667 42.667h597.333c23.565 0 42.667-19.103 42.667-42.667v-597.333c0-23.565-19.102-42.667-42.667-42.667h-597.333c-23.564 0-42.667 19.102-42.667 42.667v597.333zM810.667 746.667h-597.333v-597.333h597.333v597.333z" />
+<glyph unicode="&#xe9cd;" glyph-name="choice-single" data-tags="choice-single" d="M853.333 448c0-188.514-152.819-341.333-341.333-341.333s-341.333 152.819-341.333 341.333c0 188.513 152.82 341.333 341.333 341.333s341.333-152.82 341.333-341.333zM512 149.333c164.949 0 298.667 133.717 298.667 298.667s-133.717 298.667-298.667 298.667c-164.949 0-298.667-133.718-298.667-298.667s133.718-298.667 298.667-298.667z" />
 </font></defs></svg>

vendor/assets/stylesheets/sn-icon-font.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'SN-icon-font';
-  src:  url('fonts/SN-icon-font.eot?9ywu8k');
-  src:  url('fonts/SN-icon-font.eot?9ywu8k#iefix') format('embedded-opentype'),
-    url('fonts/SN-icon-font.woff2?9ywu8k') format('woff2'),
-    url('fonts/SN-icon-font.ttf?9ywu8k') format('truetype'),
-    url('fonts/SN-icon-font.woff?9ywu8k') format('woff'),
-    url('fonts/SN-icon-font.svg?9ywu8k#SN-icon-font') format('svg');
+  src:  url('fonts/SN-icon-font.eot?5dc4pr');
+  src:  url('fonts/SN-icon-font.eot?5dc4pr#iefix') format('embedded-opentype'),
+    url('fonts/SN-icon-font.woff2?5dc4pr') format('woff2'),
+    url('fonts/SN-icon-font.ttf?5dc4pr') format('truetype'),
+    url('fonts/SN-icon-font.woff?5dc4pr') format('woff'),
+    url('fonts/SN-icon-font.svg?5dc4pr#SN-icon-font') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -461,6 +461,9 @@
 .sn-icon-move-arrows:before {
   content: "\e990";
 }
+.sn-icon-teams-small:before {
+  content: "\e991";
+}
 .sn-icon-refresh:before {
   content: "\e992";
 }
@@ -470,9 +473,6 @@
 .sn-icon-pinned:before {
   content: "\e994";
 }
-.sn-icon-teams-small:before {
-  content: "\e991";
-}
 .sn-icon-manage-columns:before {
   content: "\e995";
 }
@@ -545,3 +545,102 @@
 .sn-icon-outbound:before {
   content: "\e9ac";
 }
+.sn-icon-align-horizontal-center:before {
+  content: "\e9ad";
+}
+.sn-icon-align-horizontal-justify:before {
+  content: "\e9ae";
+}
+.sn-icon-align-horizontal-left:before {
+  content: "\e9af";
+}
+.sn-icon-align-horizontal-right:before {
+  content: "\e9b0";
+}
+.sn-icon-align-vertical-bottom:before {
+  content: "\e9b1";
+}
+.sn-icon-align-vertical-center:before {
+  content: "\e9b2";
+}
+.sn-icon-align-vertical-top:before {
+  content: "\e9b3";
+}
+.sn-icon-border-all:before {
+  content: "\e9b4";
+}
+.sn-icon-border-bottom:before {
+  content: "\e9b5";
+}
+.sn-icon-border-horizontal:before {
+  content: "\e9b6";
+}
+.sn-icon-border-clear:before {
+  content: "\e9b7";
+}
+.sn-icon-border-inner:before {
+  content: "\e9b8";
+}
+.sn-icon-border-left:before {
+  content: "\e9b9";
+}
+.sn-icon-border-outer:before {
+  content: "\e9ba";
+}
+.sn-icon-border-palette:before {
+  content: "\e9bb";
+}
+.sn-icon-border-right:before {
+  content: "\e9bc";
+}
+.sn-icon-border-top:before {
+  content: "\e9bd";
+}
+.sn-icon-border-vertical:before {
+  content: "\e9be";
+}
+.sn-icon-color-fill:before {
+  content: "\e9bf";
+}
+.sn-icon-fullscreen-enter:before {
+  content: "\e9c0";
+}
+.sn-icon-fullscreen-exit:before {
+  content: "\e9c1";
+}
+.sn-icon-photo-add:before {
+  content: "\e9c2";
+}
+.sn-icon-redo:before {
+  content: "\e9c3";
+}
+.sn-icon-table-header-row:before {
+  content: "\e9c4";
+}
+.sn-icon-text-bold:before {
+  content: "\e9c5";
+}
+.sn-icon-text-format:before {
+  content: "\e9c6";
+}
+.sn-icon-text-fields:before {
+  content: "\e9c7";
+}
+.sn-icon-merge-cells:before {
+  content: "\e9c8";
+}
+.sn-icon-text-Italic:before {
+  content: "\e9c9";
+}
+.sn-icon-forms:before {
+  content: "\e9ca";
+}
+.sn-icon-value:before {
+  content: "\e9cb";
+}
+.sn-icon-choice-multiple:before {
+  content: "\e9cc";
+}
+.sn-icon-choice-single:before {
+  content: "\e9cd";
+}