From 8628d3868972060f6d75deeebf67dc1d9da5b8ee Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Wed, 20 Jan 2021 15:54:12 +0100
Subject: [PATCH] sorting for nested items works now

---
 .../App/components/buttons/icon-button.vue    |   6 +-
 .../pickers/mediaPicker/mediapicker.vue       |   6 +-
 zero.Web.UI/App/components/pickers/pick.vue   |  15 +-
 zero.Web.UI/App/editor/fields/media.vue       |  18 +-
 zero.Web.UI/App/editor/fields/nested.vue      |  25 +-
 zero.Web.UI/App/renderers/lists/countries.js  |   2 +-
 zero.Web.UI/Sass/Core/_flags.scss             | 496 +++++++++---------
 zero.Web.UI/app/components/icon.vue           |  11 +-
 zero.Web/Controllers/CountriesController.cs   |   2 +-
 9 files changed, 309 insertions(+), 272 deletions(-)

diff --git a/zero.Web.UI/App/components/buttons/icon-button.vue b/zero.Web.UI/App/components/buttons/icon-button.vue
index 77b93c71..9ba45bb3 100644
--- a/zero.Web.UI/App/components/buttons/icon-button.vue
+++ b/zero.Web.UI/App/components/buttons/icon-button.vue
@@ -1,7 +1,7 @@
 <template>
   <button type="button" class="ui-icon-button" :disabled="disabled" :class="'type-' + type.split(' ').join(' type-')" @click="tryClick" :title="title | localize">
     <span class="sr-only" v-localize="title"></span>
-    <ui-icon class="ui-button-icon" :symbol="icon" :size="16" />
+    <ui-icon class="ui-button-icon" :symbol="icon" :size="size" />
   </button>
 </template>
 
@@ -27,6 +27,10 @@
         type: String,
         default: ''
       },
+      size: {
+        type: Number,
+        default: 16
+      },
       disabled: Boolean
     },
 
diff --git a/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
index ae6104c0..1573f102 100644
--- a/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
+++ b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
@@ -4,8 +4,8 @@
       <div v-for="item in previews" class="ui-mediapicker-preview">
         <div v-if="!item.error" class="ui-mediapicker-preview-image" :class="{'media-pattern': item.thumbnailSource }">
           <img v-if="item.thumbnailSource" :src="item.thumbnailSource" :alt="item.name" />
-          <button v-if="!disabled" type="button" class="ui-mediapicker-preview-image-delete" @click="remove(item)" v-localize:title="'@ui.remove'"><i class="fth-x"></i></button>
-          <button v-if="!disabled" type="button" class="ui-mediapicker-preview-image-edit" @click="edit(item)" v-localize:title="'@ui.edit'"><i class="fth-edit-2"></i></button>
+          <button v-if="!disabled" type="button" class="ui-mediapicker-preview-image-delete" @click="remove(item)" v-localize:title="'@ui.remove'"><ui-icon symbol="fth-x" :size="12" /></button>
+          <button v-if="!disabled" type="button" class="ui-mediapicker-preview-image-edit" @click="edit(item)" v-localize:title="'@ui.edit'"><ui-icon symbol="fth-edit-2" :size="12" /></button>
         </div>
         <div v-if="!item.error" class="ui-mediapicker-preview-text">
           <b :title="item.name">{{getFilename(item.name)}}</b>
@@ -312,7 +312,7 @@
     height: 80px;
     /*background: var(--color-bg);*/
     border: 1px solid var(--color-line);
-    padding: 3px;
+    padding: 0;
     border-radius: var(--radius);
     color: var(--color-text);
     position: relative;
diff --git a/zero.Web.UI/App/components/pickers/pick.vue b/zero.Web.UI/App/components/pickers/pick.vue
index 40d9b063..6f0b171a 100644
--- a/zero.Web.UI/App/components/pickers/pick.vue
+++ b/zero.Web.UI/App/components/pickers/pick.vue
@@ -2,10 +2,10 @@
   <div class="ui-pick" :class="{'is-disabled': disabled, 'is-combined': configuration.preview.combined }">
     
     <!-- previews -->
-    <div class="ui-pick-previews" v-if="configuration.preview.enabled && previews.length > 0 && !configuration.preview.combined">
+    <div class="ui-pick-previews" v-if="configuration.preview.enabled && previews.length > 0 && !configuration.preview.combined" v-sortable="{ onUpdate: onSortingUpdated, enabled: configuration.sortable }">
       <div v-for="preview in previews" class="ui-pick-preview">
         <ui-select-button :icon="getPreviewIcon(preview)" :icon-as-image="configuration.preview.iconAsImage" :label="preview[configuration.keys.name]" :description="getPreviewDescription(preview)" :disabled="disabled" @click="pick(preview[configuration.keys.id])" :tokens="preview" />
-        <ui-icon-button v-if="!disabled && configuration.preview.delete" @click="remove(preview[configuration.keys.id])" icon="fth-x" title="@ui.close" />
+        <ui-icon-button v-if="!disabled && configuration.preview.delete" @click="remove(preview[configuration.keys.id])" icon="fth-x" title="@ui.close" :size="14" />
       </div>
     </div>
 
@@ -68,6 +68,7 @@
 
 <script>
   import { extend as _extend, filter as _filter, debounce as _debounce, isArray as _isArray, clone as _clone, find as _find, map as _map } from 'underscore';
+  import Arrays from 'zero/helpers/arrays.js';
 
   const defaultConfig = {
     // picker items, can either be a static list or a promise
@@ -563,7 +564,15 @@
       getPreviewDescription(preview)
       {
         return this.configuration.preview.description ? preview[this.configuration.keys.description] : null;
-      }
+      },
+
+
+      onSortingUpdated(ev)
+      {
+        this.selected = Arrays.move(this.selected, ev.oldIndex, ev.newIndex);
+        //this.previews = Arrays.move(this.previews, ev.oldIndex, ev.newIndex);
+        //this.onChange(this.multiple ? this.selected : this.selected[0]);
+      },
     }
   }
 </script>
diff --git a/zero.Web.UI/App/editor/fields/media.vue b/zero.Web.UI/App/editor/fields/media.vue
index ed015217..db19b3a6 100644
--- a/zero.Web.UI/App/editor/fields/media.vue
+++ b/zero.Web.UI/App/editor/fields/media.vue
@@ -1,5 +1,5 @@
 <template>
-  <ui-mediapicker :config="{ limit }" :value="value" @input="$emit('input', $event)" :disabled="disabled" />
+  <ui-mediapicker :config="{ limit, disallowSelect, disallowUpload, fileExtensions, maxFileSize }" :value="value" @input="$emit('input', $event)" :disabled="disabled" />
 </template>
 
 
@@ -17,6 +17,22 @@
       limit: {
         type: Number,
         default: 1
+      },
+      disallowSelect: {
+        type: Boolean,
+        default: false
+      },
+      disallowUpload: {
+        type: Boolean,
+        default: false
+      },
+      fileExtensions: {
+        type: Array,
+        default: null
+      },
+      maxFileSize: {
+        type: Number,
+        default: 10
       }
     }
   }
diff --git a/zero.Web.UI/App/editor/fields/nested.vue b/zero.Web.UI/App/editor/fields/nested.vue
index af55abc9..8968c331 100644
--- a/zero.Web.UI/App/editor/fields/nested.vue
+++ b/zero.Web.UI/App/editor/fields/nested.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="editor-nested" :depth="depth">
-    <div class="ui-pick-previews" v-if="items.length">
-      <div v-for="(item, index) in items" class="ui-pick-preview">
+    <div class="ui-pick-previews" v-if="items.length" v-sortable="{ onUpdate: onSortingUpdated }">
+      <div v-for="(item, index) in items" :key="item.id" class="ui-pick-preview">
         <ui-select-button :icon="getIcon(item)" :label="getName(item)" :description="getDescription(item)" :disabled="disabled" @click="editItem(item)" />
-        <ui-icon-button v-if="!disabled" icon="fth-x" title="@ui.close" @click="removeItem(index)" :disabled="disabled" />
+        <ui-icon-button v-if="!disabled" icon="fth-x" title="@ui.close" @click="removeItem(index)" :disabled="disabled" :size="14" />
       </div>
     </div>
     <ui-select-button v-if="limit > items.length" icon="fth-plus" :label="addLabel || '@ui.add'" @click="addItem" :disabled="disabled" />
@@ -16,6 +16,7 @@
   import Overlay from 'zero/helpers/overlay.js';
   import Editor from 'zero/core/editor.ts';
   import Strings from 'zero/helpers/strings.js';
+  import Arrays from 'zero/helpers/arrays.js';
 
   export default {
 
@@ -50,7 +51,7 @@
         deep: true,
         handler(val)
         {
-          this.setup();
+          this.setup(val);
         }
       }
     },
@@ -64,15 +65,15 @@
 
     mounted()
     {
-      this.setup();
+      this.setup(this.value);
     },
 
 
     methods: {
 
-      setup()
+      setup(value)
       {
-        this.items = JSON.parse(JSON.stringify(this.value)) || [];
+        this.items = JSON.parse(JSON.stringify(value)) || [];
         this.multiple = this.limit > 1;
         if (!this.multiple)
         {
@@ -152,7 +153,15 @@
       getIcon(item)
       {
         return typeof this.itemIcon === 'function' ? this.itemIcon(item) : this.itemIcon;
-      }
+      },
+
+
+      onSortingUpdated(ev)
+      {
+        this.items = Arrays.move(this.items, ev.oldIndex, ev.newIndex);
+        this.onChange();
+        //this.$emit('input', this.multiple ? result : (result.length > 0 ? result[0] : null));
+      },
     }
   }
 </script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/renderers/lists/countries.js b/zero.Web.UI/App/renderers/lists/countries.js
index a6e795af..dc04b434 100644
--- a/zero.Web.UI/App/renderers/lists/countries.js
+++ b/zero.Web.UI/App/renderers/lists/countries.js
@@ -10,7 +10,7 @@ list.link = zero.alias.settings.countries + '-edit';
 
 list.onFetch(filter => CountriesApi.getByQuery(filter));
 
-list.column('flag', { width: 62, canSort: false, hideLabel: true }).custom((value, model) => `<i class="flag flag-${model.code.toLowerCase()}"></i>`, true, 'flag');
+list.column('flag', { width: 62, canSort: false, hideLabel: true }).custom((value, model) => `<i class="ui-icon" data-symbol="flag-${model.code.toLowerCase()}"></i>`, true, 'flag');
 list.column('name').name();
 list.column('code').text();
 list.column('isPreferred', { width: 200 }).boolean();
diff --git a/zero.Web.UI/Sass/Core/_flags.scss b/zero.Web.UI/Sass/Core/_flags.scss
index 9856dd06..7f6bd0ac 100644
--- a/zero.Web.UI/Sass/Core/_flags.scss
+++ b/zero.Web.UI/Sass/Core/_flags.scss
@@ -1,1227 +1,1219 @@
-span.flag, i.flag
+
+.ui-icon[data-symbol^="flag-"]
 {
   width: 22px;
   height: 15px;
   display: inline-block;
-}
-
-img.flag
-{
-  width: 30px
-}
-
-.flag
-{
   background: url(/Assets/flags.png) no-repeat;
   background-size: 100%
 }
 
-.flag-ad
+.ui-icon[data-symbol="flag-ad"]
 {
   background-position: 0 .413223%
 }
 
-.flag-ae
+.ui-icon[data-symbol="flag-ae"]
 {
   background-position: 0 .826446%
 }
 
-.flag-af
+.ui-icon[data-symbol="flag-af"]
 {
   background-position: 0 1.239669%
 }
 
-.flag-ag
+.ui-icon[data-symbol="flag-ag"]
 {
   background-position: 0 1.652893%
 }
 
-.flag-ai
+.ui-icon[data-symbol="flag-ai"]
 {
   background-position: 0 2.066116%
 }
 
-.flag-al
+.ui-icon[data-symbol="flag-al"]
 {
   background-position: 0 2.479339%
 }
 
-.flag-am
+.ui-icon[data-symbol="flag-am"]
 {
   background-position: 0 2.892562%
 }
 
-.flag-an
+.ui-icon[data-symbol="flag-an"]
 {
   background-position: 0 3.305785%
 }
 
-.flag-ao
+.ui-icon[data-symbol="flag-ao"]
 {
   background-position: 0 3.719008%
 }
 
-.flag-aq
+.ui-icon[data-symbol="flag-aq"]
 {
   background-position: 0 4.132231%
 }
 
-.flag-ar
+.ui-icon[data-symbol="flag-ar"]
 {
   background-position: 0 4.545455%
 }
 
-.flag-as
+.ui-icon[data-symbol="flag-as"]
 {
   background-position: 0 4.958678%
 }
 
-.flag-at
+.ui-icon[data-symbol="flag-at"]
 {
   background-position: 0 5.371901%
 }
 
-.flag-au
+.ui-icon[data-symbol="flag-au"]
 {
   background-position: 0 5.785124%
 }
 
-.flag-aw
+.ui-icon[data-symbol="flag-aw"]
 {
   background-position: 0 6.198347%
 }
 
-.flag-az
+.ui-icon[data-symbol="flag-az"]
 {
   background-position: 0 6.61157%
 }
 
-.flag-ba
+.ui-icon[data-symbol="flag-ba"]
 {
   background-position: 0 7.024793%
 }
 
-.flag-bb
+.ui-icon[data-symbol="flag-bb"]
 {
   background-position: 0 7.438017%
 }
 
-.flag-bd
+.ui-icon[data-symbol="flag-bd"]
 {
   background-position: 0 7.85124%
 }
 
-.flag-be
+.ui-icon[data-symbol="flag-be"]
 {
   background-position: 0 8.264463%
 }
 
-.flag-bf
+.ui-icon[data-symbol="flag-bf"]
 {
   background-position: 0 8.677686%
 }
 
-.flag-bg
+.ui-icon[data-symbol="flag-bg"]
 {
   background-position: 0 9.090909%
 }
 
-.flag-bh
+.ui-icon[data-symbol="flag-bh"]
 {
   background-position: 0 9.504132%
 }
 
-.flag-bi
+.ui-icon[data-symbol="flag-bi"]
 {
   background-position: 0 9.917355%
 }
 
-.flag-bj
+.ui-icon[data-symbol="flag-bj"]
 {
   background-position: 0 10.330579%
 }
 
-.flag-bm
+.ui-icon[data-symbol="flag-bm"]
 {
   background-position: 0 10.743802%
 }
 
-.flag-bn
+.ui-icon[data-symbol="flag-bn"]
 {
   background-position: 0 11.157025%
 }
 
-.flag-bo
+.ui-icon[data-symbol="flag-bo"]
 {
   background-position: 0 11.570248%
 }
 
-.flag-br
+.ui-icon[data-symbol="flag-br"]
 {
   background-position: 0 11.983471%
 }
 
-.flag-bs
+.ui-icon[data-symbol="flag-bs"]
 {
   background-position: 0 12.396694%
 }
 
-.flag-bt
+.ui-icon[data-symbol="flag-bt"]
 {
   background-position: 0 12.809917%
 }
 
-.flag-bv
+.ui-icon[data-symbol="flag-bv"]
 {
   background-position: 0 13.22314%
 }
 
-.flag-bw
+.ui-icon[data-symbol="flag-bw"]
 {
   background-position: 0 13.636364%
 }
 
-.flag-by
+.ui-icon[data-symbol="flag-by"]
 {
   background-position: 0 14.049587%
 }
 
-.flag-bz
+.ui-icon[data-symbol="flag-bz"]
 {
   background-position: 0 14.46281%
 }
 
-.flag-ca
+.ui-icon[data-symbol="flag-ca"]
 {
   background-position: 0 14.876033%
 }
 
-.flag-cc
+.ui-icon[data-symbol="flag-cc"]
 {
   background-position: 0 15.289256%
 }
 
-.flag-cd
+.ui-icon[data-symbol="flag-cd"]
 {
   background-position: 0 15.702479%
 }
 
-.flag-cf
+.ui-icon[data-symbol="flag-cf"]
 {
   background-position: 0 16.115702%
 }
 
-.flag-cg
+.ui-icon[data-symbol="flag-cg"]
 {
   background-position: 0 16.528926%
 }
 
-.flag-ch
+.ui-icon[data-symbol="flag-ch"]
 {
   background-position: 0 16.942149%
 }
 
-.flag-ci
+.ui-icon[data-symbol="flag-ci"]
 {
   background-position: 0 17.355372%
 }
 
-.flag-ck
+.ui-icon[data-symbol="flag-ck"]
 {
   background-position: 0 17.768595%
 }
 
-.flag-cl
+.ui-icon[data-symbol="flag-cl"]
 {
   background-position: 0 18.181818%
 }
 
-.flag-cm
+.ui-icon[data-symbol="flag-cm"]
 {
   background-position: 0 18.595041%
 }
 
-.flag-cn
+.ui-icon[data-symbol="flag-cn"]
 {
   background-position: 0 19.008264%
 }
 
-.flag-co
+.ui-icon[data-symbol="flag-co"]
 {
   background-position: 0 19.421488%
 }
 
-.flag-cr
+.ui-icon[data-symbol="flag-cr"]
 {
   background-position: 0 19.834711%
 }
 
-.flag-cu
+.ui-icon[data-symbol="flag-cu"]
 {
   background-position: 0 20.247934%
 }
 
-.flag-cv
+.ui-icon[data-symbol="flag-cv"]
 {
   background-position: 0 20.661157%
 }
 
-.flag-cx
+.ui-icon[data-symbol="flag-cx"]
 {
   background-position: 0 21.07438%
 }
 
-.flag-cy
+.ui-icon[data-symbol="flag-cy"]
 {
   background-position: 0 21.487603%
 }
 
-.flag-cz
+.ui-icon[data-symbol="flag-cz"]
 {
   background-position: 0 21.900826%
 }
 
-.flag-de
+.ui-icon[data-symbol="flag-de"]
 {
   background-position: 0 22.31405%
 }
 
-.flag-dj
+.ui-icon[data-symbol="flag-dj"]
 {
   background-position: 0 22.727273%
 }
 
-.flag-dk
+.ui-icon[data-symbol="flag-dk"]
 {
   background-position: 0 23.140496%
 }
 
-.flag-dm
+.ui-icon[data-symbol="flag-dm"]
 {
   background-position: 0 23.553719%
 }
 
-.flag-do
+.ui-icon[data-symbol="flag-do"]
 {
   background-position: 0 23.966942%
 }
 
-.flag-dz
+.ui-icon[data-symbol="flag-dz"]
 {
   background-position: 0 24.380165%
 }
 
-.flag-ec
+.ui-icon[data-symbol="flag-ec"]
 {
   background-position: 0 24.793388%
 }
 
-.flag-ee
+.ui-icon[data-symbol="flag-ee"]
 {
   background-position: 0 25.206612%
 }
 
-.flag-eg
+.ui-icon[data-symbol="flag-eg"]
 {
   background-position: 0 25.619835%
 }
 
-.flag-eh
+.ui-icon[data-symbol="flag-eh"]
 {
   background-position: 0 26.033058%
 }
 
-.flag-er
+.ui-icon[data-symbol="flag-er"]
 {
   background-position: 0 26.446281%
 }
 
-.flag-es
+.ui-icon[data-symbol="flag-es"]
 {
   background-position: 0 26.859504%
 }
 
-.flag-et
+.ui-icon[data-symbol="flag-et"]
 {
   background-position: 0 27.272727%
 }
 
-.flag-fi
+.ui-icon[data-symbol="flag-fi"]
 {
   background-position: 0 27.68595%
 }
 
-.flag-fj
+.ui-icon[data-symbol="flag-fj"]
 {
   background-position: 0 28.099174%
 }
 
-.flag-fk
+.ui-icon[data-symbol="flag-fk"]
 {
   background-position: 0 28.512397%
 }
 
-.flag-fm
+.ui-icon[data-symbol="flag-fm"]
 {
   background-position: 0 28.92562%
 }
 
-.flag-fo
+.ui-icon[data-symbol="flag-fo"]
 {
   background-position: 0 29.338843%
 }
 
-.flag-fr
+.ui-icon[data-symbol="flag-fr"]
 {
   background-position: 0 29.752066%
 }
 
-.flag-ga
+.ui-icon[data-symbol="flag-ga"]
 {
   background-position: 0 30.165289%
 }
 
-.flag-gd
+.ui-icon[data-symbol="flag-gd"]
 {
   background-position: 0 30.578512%
 }
 
-.flag-ge
+.ui-icon[data-symbol="flag-ge"]
 {
   background-position: 0 30.991736%
 }
 
-.flag-gf
+.ui-icon[data-symbol="flag-gf"]
 {
   background-position: 0 31.404959%
 }
 
-.flag-gh
+.ui-icon[data-symbol="flag-gh"]
 {
   background-position: 0 31.818182%
 }
 
-.flag-gi
+.ui-icon[data-symbol="flag-gi"]
 {
   background-position: 0 32.231405%
 }
 
-.flag-gl
+.ui-icon[data-symbol="flag-gl"]
 {
   background-position: 0 32.644628%
 }
 
-.flag-gm
+.ui-icon[data-symbol="flag-gm"]
 {
   background-position: 0 33.057851%
 }
 
-.flag-gn
+.ui-icon[data-symbol="flag-gn"]
 {
   background-position: 0 33.471074%
 }
 
-.flag-gp
+.ui-icon[data-symbol="flag-gp"]
 {
   background-position: 0 33.884298%
 }
 
-.flag-gq
+.ui-icon[data-symbol="flag-gq"]
 {
   background-position: 0 34.297521%
 }
 
-.flag-gr
+.ui-icon[data-symbol="flag-gr"]
 {
   background-position: 0 34.710744%
 }
 
-.flag-gs
+.ui-icon[data-symbol="flag-gs"]
 {
   background-position: 0 35.123967%
 }
 
-.flag-gt
+.ui-icon[data-symbol="flag-gt"]
 {
   background-position: 0 35.53719%
 }
 
-.flag-gu
+.ui-icon[data-symbol="flag-gu"]
 {
   background-position: 0 35.950413%
 }
 
-.flag-gw
+.ui-icon[data-symbol="flag-gw"]
 {
   background-position: 0 36.363636%
 }
 
-.flag-gy
+.ui-icon[data-symbol="flag-gy"]
 {
   background-position: 0 36.77686%
 }
 
-.flag-hk
+.ui-icon[data-symbol="flag-hk"]
 {
   background-position: 0 37.190083%
 }
 
-.flag-hm
+.ui-icon[data-symbol="flag-hm"]
 {
   background-position: 0 37.603306%
 }
 
-.flag-hn
+.ui-icon[data-symbol="flag-hn"]
 {
   background-position: 0 38.016529%
 }
 
-.flag-hr
+.ui-icon[data-symbol="flag-hr"]
 {
   background-position: 0 38.429752%
 }
 
-.flag-ht
+.ui-icon[data-symbol="flag-ht"]
 {
   background-position: 0 38.842975%
 }
 
-.flag-hu
+.ui-icon[data-symbol="flag-hu"]
 {
   background-position: 0 39.256198%
 }
 
-.flag-id
+.ui-icon[data-symbol="flag-id"]
 {
   background-position: 0 39.669421%
 }
 
-.flag-ie
+.ui-icon[data-symbol="flag-ie"]
 {
   background-position: 0 40.082645%
 }
 
-.flag-il
+.ui-icon[data-symbol="flag-il"]
 {
   background-position: 0 40.495868%
 }
 
-.flag-in
+.ui-icon[data-symbol="flag-in"]
 {
   background-position: 0 40.909091%
 }
 
-.flag-io
+.ui-icon[data-symbol="flag-io"]
 {
   background-position: 0 41.322314%
 }
 
-.flag-iq
+.ui-icon[data-symbol="flag-iq"]
 {
   background-position: 0 41.735537%
 }
 
-.flag-ir
+.ui-icon[data-symbol="flag-ir"]
 {
   background-position: 0 42.14876%
 }
 
-.flag-is
+.ui-icon[data-symbol="flag-is"]
 {
   background-position: 0 42.561983%
 }
 
-.flag-it
+.ui-icon[data-symbol="flag-it"]
 {
   background-position: 0 42.975207%
 }
 
-.flag-jm
+.ui-icon[data-symbol="flag-jm"]
 {
   background-position: 0 43.38843%
 }
 
-.flag-jo
+.ui-icon[data-symbol="flag-jo"]
 {
   background-position: 0 43.801653%
 }
 
-.flag-jp
+.ui-icon[data-symbol="flag-jp"]
 {
   background-position: 0 44.214876%
 }
 
-.flag-ke
+.ui-icon[data-symbol="flag-ke"]
 {
   background-position: 0 44.628099%
 }
 
-.flag-kg
+.ui-icon[data-symbol="flag-kg"]
 {
   background-position: 0 45.041322%
 }
 
-.flag-kh
+.ui-icon[data-symbol="flag-kh"]
 {
   background-position: 0 45.454545%
 }
 
-.flag-ki
+.ui-icon[data-symbol="flag-ki"]
 {
   background-position: 0 45.867769%
 }
 
-.flag-km
+.ui-icon[data-symbol="flag-km"]
 {
   background-position: 0 46.280992%
 }
 
-.flag-kn
+.ui-icon[data-symbol="flag-kn"]
 {
   background-position: 0 46.694215%
 }
 
-.flag-kp
+.ui-icon[data-symbol="flag-kp"]
 {
   background-position: 0 47.107438%
 }
 
-.flag-kr
+.ui-icon[data-symbol="flag-kr"]
 {
   background-position: 0 47.520661%
 }
 
-.flag-kw
+.ui-icon[data-symbol="flag-kw"]
 {
   background-position: 0 47.933884%
 }
 
-.flag-ky
+.ui-icon[data-symbol="flag-ky"]
 {
   background-position: 0 48.347107%
 }
 
-.flag-kz
+.ui-icon[data-symbol="flag-kz"]
 {
   background-position: 0 48.760331%
 }
 
-.flag-la
+.ui-icon[data-symbol="flag-la"]
 {
   background-position: 0 49.173554%
 }
 
-.flag-lb
+.ui-icon[data-symbol="flag-lb"]
 {
   background-position: 0 49.586777%
 }
 
-.flag-lc
+.ui-icon[data-symbol="flag-lc"]
 {
   background-position: 0 50%
 }
 
-.flag-li
+.ui-icon[data-symbol="flag-li"]
 {
   background-position: 0 50.413223%
 }
 
-.flag-lk
+.ui-icon[data-symbol="flag-lk"]
 {
   background-position: 0 50.826446%
 }
 
-.flag-lr
+.ui-icon[data-symbol="flag-lr"]
 {
   background-position: 0 51.239669%
 }
 
-.flag-ls
+.ui-icon[data-symbol="flag-ls"]
 {
   background-position: 0 51.652893%
 }
 
-.flag-lt
+.ui-icon[data-symbol="flag-lt"]
 {
   background-position: 0 52.066116%
 }
 
-.flag-lu
+.ui-icon[data-symbol="flag-lu"]
 {
   background-position: 0 52.479339%
 }
 
-.flag-lv
+.ui-icon[data-symbol="flag-lv"]
 {
   background-position: 0 52.892562%
 }
 
-.flag-ly
+.ui-icon[data-symbol="flag-ly"]
 {
   background-position: 0 53.305785%
 }
 
-.flag-ma
+.ui-icon[data-symbol="flag-ma"]
 {
   background-position: 0 53.719008%
 }
 
-.flag-mc
+.ui-icon[data-symbol="flag-mc"]
 {
   background-position: 0 54.132231%
 }
 
-.flag-md
+.ui-icon[data-symbol="flag-md"]
 {
   background-position: 0 54.545455%
 }
 
-.flag-me
+.ui-icon[data-symbol="flag-me"]
 {
   background-position: 0 54.958678%
 }
 
-.flag-mg
+.ui-icon[data-symbol="flag-mg"]
 {
   background-position: 0 55.371901%
 }
 
-.flag-mh
+.ui-icon[data-symbol="flag-mh"]
 {
   background-position: 0 55.785124%
 }
 
-.flag-mk
+.ui-icon[data-symbol="flag-mk"]
 {
   background-position: 0 56.198347%
 }
 
-.flag-ml
+.ui-icon[data-symbol="flag-ml"]
 {
   background-position: 0 56.61157%
 }
 
-.flag-mm
+.ui-icon[data-symbol="flag-mm"]
 {
   background-position: 0 57.024793%
 }
 
-.flag-mn
+.ui-icon[data-symbol="flag-mn"]
 {
   background-position: 0 57.438017%
 }
 
-.flag-mo
+.ui-icon[data-symbol="flag-mo"]
 {
   background-position: 0 57.85124%
 }
 
-.flag-mp
+.ui-icon[data-symbol="flag-mp"]
 {
   background-position: 0 58.264463%
 }
 
-.flag-mq
+.ui-icon[data-symbol="flag-mq"]
 {
   background-position: 0 58.677686%
 }
 
-.flag-mr
+.ui-icon[data-symbol="flag-mr"]
 {
   background-position: 0 59.090909%
 }
 
-.flag-ms
+.ui-icon[data-symbol="flag-ms"]
 {
   background-position: 0 59.504132%
 }
 
-.flag-mt
+.ui-icon[data-symbol="flag-mt"]
 {
   background-position: 0 59.917355%
 }
 
-.flag-mu
+.ui-icon[data-symbol="flag-mu"]
 {
   background-position: 0 60.330579%
 }
 
-.flag-mv
+.ui-icon[data-symbol="flag-mv"]
 {
   background-position: 0 60.743802%
 }
 
-.flag-mw
+.ui-icon[data-symbol="flag-mw"]
 {
   background-position: 0 61.157025%
 }
 
-.flag-mx
+.ui-icon[data-symbol="flag-mx"]
 {
   background-position: 0 61.570248%
 }
 
-.flag-my
+.ui-icon[data-symbol="flag-my"]
 {
   background-position: 0 61.983471%
 }
 
-.flag-mz
+.ui-icon[data-symbol="flag-mz"]
 {
   background-position: 0 62.396694%
 }
 
-.flag-na
+.ui-icon[data-symbol="flag-na"]
 {
   background-position: 0 62.809917%
 }
 
-.flag-nc
+.ui-icon[data-symbol="flag-nc"]
 {
   background-position: 0 63.22314%
 }
 
-.flag-ne
+.ui-icon[data-symbol="flag-ne"]
 {
   background-position: 0 63.636364%
 }
 
-.flag-nf
+.ui-icon[data-symbol="flag-nf"]
 {
   background-position: 0 64.049587%
 }
 
-.flag-ng
+.ui-icon[data-symbol="flag-ng"]
 {
   background-position: 0 64.46281%
 }
 
-.flag-ni
+.ui-icon[data-symbol="flag-ni"]
 {
   background-position: 0 64.876033%
 }
 
-.flag-nl
+.ui-icon[data-symbol="flag-nl"]
 {
   background-position: 0 65.289256%
 }
 
-.flag-no
+.ui-icon[data-symbol="flag-no"]
 {
   background-position: 0 65.702479%
 }
 
-.flag-np
+.ui-icon[data-symbol="flag-np"]
 {
   background-position: 0 66.115702%
 }
 
-.flag-nr
+.ui-icon[data-symbol="flag-nr"]
 {
   background-position: 0 66.528926%
 }
 
-.flag-nu
+.ui-icon[data-symbol="flag-nu"]
 {
   background-position: 0 66.942149%
 }
 
-.flag-nz
+.ui-icon[data-symbol="flag-nz"]
 {
   background-position: 0 67.355372%
 }
 
-.flag-om
+.ui-icon[data-symbol="flag-om"]
 {
   background-position: 0 67.768595%
 }
 
-.flag-pa
+.ui-icon[data-symbol="flag-pa"]
 {
   background-position: 0 68.181818%
 }
 
-.flag-pe
+.ui-icon[data-symbol="flag-pe"]
 {
   background-position: 0 68.595041%
 }
 
-.flag-pf
+.ui-icon[data-symbol="flag-pf"]
 {
   background-position: 0 69.008264%
 }
 
-.flag-pg
+.ui-icon[data-symbol="flag-pg"]
 {
   background-position: 0 69.421488%
 }
 
-.flag-ph
+.ui-icon[data-symbol="flag-ph"]
 {
   background-position: 0 69.834711%
 }
 
-.flag-pk
+.ui-icon[data-symbol="flag-pk"]
 {
   background-position: 0 70.247934%
 }
 
-.flag-pl
+.ui-icon[data-symbol="flag-pl"]
 {
   background-position: 0 70.661157%
 }
 
-.flag-pm
+.ui-icon[data-symbol="flag-pm"]
 {
   background-position: 0 71.07438%
 }
 
-.flag-pn
+.ui-icon[data-symbol="flag-pn"]
 {
   background-position: 0 71.487603%
 }
 
-.flag-pr
+.ui-icon[data-symbol="flag-pr"]
 {
   background-position: 0 71.900826%
 }
 
-.flag-pt
+.ui-icon[data-symbol="flag-pt"]
 {
   background-position: 0 72.31405%
 }
 
-.flag-pw
+.ui-icon[data-symbol="flag-pw"]
 {
   background-position: 0 72.727273%
 }
 
-.flag-py
+.ui-icon[data-symbol="flag-py"]
 {
   background-position: 0 73.140496%
 }
 
-.flag-qa
+.ui-icon[data-symbol="flag-qa"]
 {
   background-position: 0 73.553719%
 }
 
-.flag-re
+.ui-icon[data-symbol="flag-re"]
 {
   background-position: 0 73.966942%
 }
 
-.flag-ro
+.ui-icon[data-symbol="flag-ro"]
 {
   background-position: 0 74.380165%
 }
 
-.flag-rs
+.ui-icon[data-symbol="flag-rs"]
 {
   background-position: 0 74.793388%
 }
 
-.flag-ru
+.ui-icon[data-symbol="flag-ru"]
 {
   background-position: 0 75.206612%
 }
 
-.flag-rw
+.ui-icon[data-symbol="flag-rw"]
 {
   background-position: 0 75.619835%
 }
 
-.flag-sa
+.ui-icon[data-symbol="flag-sa"]
 {
   background-position: 0 76.033058%
 }
 
-.flag-sb
+.ui-icon[data-symbol="flag-sb"]
 {
   background-position: 0 76.446281%
 }
 
-.flag-sc
+.ui-icon[data-symbol="flag-sc"]
 {
   background-position: 0 76.859504%
 }
 
-.flag-sd
+.ui-icon[data-symbol="flag-sd"]
 {
   background-position: 0 77.272727%
 }
 
-.flag-se
+.ui-icon[data-symbol="flag-se"]
 {
   background-position: 0 77.68595%
 }
 
-.flag-sg
+.ui-icon[data-symbol="flag-sg"]
 {
   background-position: 0 78.099174%
 }
 
-.flag-sh
+.ui-icon[data-symbol="flag-sh"]
 {
   background-position: 0 78.512397%
 }
 
-.flag-si
+.ui-icon[data-symbol="flag-si"]
 {
   background-position: 0 78.92562%
 }
 
-.flag-sj
+.ui-icon[data-symbol="flag-sj"]
 {
   background-position: 0 79.338843%
 }
 
-.flag-sk
+.ui-icon[data-symbol="flag-sk"]
 {
   background-position: 0 79.752066%
 }
 
-.flag-sl
+.ui-icon[data-symbol="flag-sl"]
 {
   background-position: 0 80.165289%
 }
 
-.flag-sm
+.ui-icon[data-symbol="flag-sm"]
 {
   background-position: 0 80.578512%
 }
 
-.flag-sn
+.ui-icon[data-symbol="flag-sn"]
 {
   background-position: 0 80.991736%
 }
 
-.flag-so
+.ui-icon[data-symbol="flag-so"]
 {
   background-position: 0 81.404959%
 }
 
-.flag-sr
+.ui-icon[data-symbol="flag-sr"]
 {
   background-position: 0 81.818182%
 }
 
-.flag-ss
+.ui-icon[data-symbol="flag-ss"]
 {
   background-position: 0 82.231405%
 }
 
-.flag-st
+.ui-icon[data-symbol="flag-st"]
 {
   background-position: 0 82.644628%
 }
 
-.flag-sv
+.ui-icon[data-symbol="flag-sv"]
 {
   background-position: 0 83.057851%
 }
 
-.flag-sy
+.ui-icon[data-symbol="flag-sy"]
 {
   background-position: 0 83.471074%
 }
 
-.flag-sz
+.ui-icon[data-symbol="flag-sz"]
 {
   background-position: 0 83.884298%
 }
 
-.flag-tc
+.ui-icon[data-symbol="flag-tc"]
 {
   background-position: 0 84.297521%
 }
 
-.flag-td
+.ui-icon[data-symbol="flag-td"]
 {
   background-position: 0 84.710744%
 }
 
-.flag-tf
+.ui-icon[data-symbol="flag-tf"]
 {
   background-position: 0 85.123967%
 }
 
-.flag-tg
+.ui-icon[data-symbol="flag-tg"]
 {
   background-position: 0 85.53719%
 }
 
-.flag-th
+.ui-icon[data-symbol="flag-th"]
 {
   background-position: 0 85.950413%
 }
 
-.flag-tj
+.ui-icon[data-symbol="flag-tj"]
 {
   background-position: 0 86.363636%
 }
 
-.flag-tk
+.ui-icon[data-symbol="flag-tk"]
 {
   background-position: 0 86.77686%
 }
 
-.flag-tl
+.ui-icon[data-symbol="flag-tl"]
 {
   background-position: 0 87.190083%
 }
 
-.flag-tm
+.ui-icon[data-symbol="flag-tm"]
 {
   background-position: 0 87.603306%
 }
 
-.flag-tn
+.ui-icon[data-symbol="flag-tn"]
 {
   background-position: 0 88.016529%
 }
 
-.flag-to
+.ui-icon[data-symbol="flag-to"]
 {
   background-position: 0 88.429752%
 }
 
-.flag-tp
+.ui-icon[data-symbol="flag-tp"]
 {
   background-position: 0 88.842975%
 }
 
-.flag-tr
+.ui-icon[data-symbol="flag-tr"]
 {
   background-position: 0 89.256198%
 }
 
-.flag-tt
+.ui-icon[data-symbol="flag-tt"]
 {
   background-position: 0 89.669421%
 }
 
-.flag-tv
+.ui-icon[data-symbol="flag-tv"]
 {
   background-position: 0 90.082645%
 }
 
-.flag-tw
+.ui-icon[data-symbol="flag-tw"]
 {
   background-position: 0 90.495868%
 }
 
-.flag-ty
+.ui-icon[data-symbol="flag-ty"]
 {
   background-position: 0 90.909091%
 }
 
-.flag-tz
+.ui-icon[data-symbol="flag-tz"]
 {
   background-position: 0 91.322314%
 }
 
-.flag-ua
+.ui-icon[data-symbol="flag-ua"]
 {
   background-position: 0 91.735537%
 }
 
-.flag-ug
+.ui-icon[data-symbol="flag-ug"]
 {
   background-position: 0 92.14876%
 }
 
-.flag-gb, .flag-uk
+.ui-icon[data-symbol="flag-gb"], .ui-icon[data-symbol="flag-uk"]
 {
   background-position: 0 92.561983%
 }
 
-.flag-um
+.ui-icon[data-symbol="flag-um"]
 {
   background-position: 0 92.975207%
 }
 
-.flag-us
+.ui-icon[data-symbol="flag-us"]
 {
   background-position: 0 93.38843%
 }
 
-.flag-uy
+.ui-icon[data-symbol="flag-uy"]
 {
   background-position: 0 93.801653%
 }
 
-.flag-uz
+.ui-icon[data-symbol="flag-uz"]
 {
   background-position: 0 94.214876%
 }
 
-.flag-va
+.ui-icon[data-symbol="flag-va"]
 {
   background-position: 0 94.628099%
 }
 
-.flag-vc
+.ui-icon[data-symbol="flag-vc"]
 {
   background-position: 0 95.041322%
 }
 
-.flag-ve
+.ui-icon[data-symbol="flag-ve"]
 {
   background-position: 0 95.454545%
 }
 
-.flag-vg
+.ui-icon[data-symbol="flag-vg"]
 {
   background-position: 0 95.867769%
 }
 
-.flag-vi
+.ui-icon[data-symbol="flag-vi"]
 {
   background-position: 0 96.280992%
 }
 
-.flag-vn
+.ui-icon[data-symbol="flag-vn"]
 {
   background-position: 0 96.694215%
 }
 
-.flag-vu
+.ui-icon[data-symbol="flag-vu"]
 {
   background-position: 0 97.107438%
 }
 
-.flag-wf
+.ui-icon[data-symbol="flag-wf"]
 {
   background-position: 0 97.520661%
 }
 
-.flag-ws
+.ui-icon[data-symbol="flag-ws"]
 {
   background-position: 0 97.933884%
 }
 
-.flag-ye
+.ui-icon[data-symbol="flag-ye"]
 {
   background-position: 0 98.347107%
 }
 
-.flag-za
+.ui-icon[data-symbol="flag-za"]
 {
   background-position: 0 98.760331%
 }
 
-.flag-zm
+.ui-icon[data-symbol="flag-zm"]
 {
   background-position: 0 99.173554%
 }
 
-.flag-zr
+.ui-icon[data-symbol="flag-zr"]
 {
   background-position: 0 99.586777%
 }
 
-.flag-zw
+.ui-icon[data-symbol="flag-zw"]
 {
   background-position: 0 100%
 }
diff --git a/zero.Web.UI/app/components/icon.vue b/zero.Web.UI/app/components/icon.vue
index 4fe69397..d9612519 100644
--- a/zero.Web.UI/app/components/icon.vue
+++ b/zero.Web.UI/app/components/icon.vue
@@ -1,6 +1,6 @@
 <template>
-  <svg v-if="symbol" class="ui-icon" :width="size" :height="size" :stroke-width="strokeWidth">
-    <use :xlink:href="'#' + symbol.trim()" />
+  <svg v-if="symbol" class="ui-icon" :width="size" :height="size" :stroke-width="strokeWidth" :data-symbol="symbol">
+    <use v-if="!isFlag" :xlink:href="'#' + symbol.trim()" />
   </svg>
 </template>
 
@@ -22,6 +22,13 @@
         type: Number,
         default: 2
       }
+    },
+
+    computed: {
+      isFlag()
+      {
+        return this.symbol && this.symbol.indexOf('flag') === 0;
+      }
     }
   }
 </script>
diff --git a/zero.Web/Controllers/CountriesController.cs b/zero.Web/Controllers/CountriesController.cs
index 074eac63..cdfe9692 100644
--- a/zero.Web/Controllers/CountriesController.cs
+++ b/zero.Web/Controllers/CountriesController.cs
@@ -12,7 +12,7 @@ namespace zero.Web.Controllers
     public CountriesController(ICountriesCollection collection) : base(collection)
     {
       DefaultQuery = q => q.OrderByDescending(x => x.IsPreferred).ThenBy(x => x.Name);
-      PreviewTransform = (item, model) => model.Icon = "flag flag-" + item.Code.ToLowerInvariant();
+      PreviewTransform = (item, model) => model.Icon = "flag-" + item.Code.ToLowerInvariant();
     }
   }
 }