@abi-software/flatmapvuer 0.5.9 → 0.6.0-vue3-0

package/src/components/MultiFlatmapVuer.vue

@@ -1,41 +1,52 @@
 <template>
   <div class="multi-container" ref="multiContainer">
-    <div style="position:absolute;z-index:10;">
-      <div class="species-display-text">
-        Species
-      </div>
-      <el-popover content="Select a species" placement="right" 
-        :appendToBody=false trigger="manual" popper-class="flatmap-popper right-popper" v-model="helpMode" ref="selectPopover">
-      </el-popover>
-      <el-select
-        id="flatmap-select"
-        :popper-append-to-body="appendToBody"
-        v-model="activeSpecies"
-        placeholder="Select"
-        class="select-box"
-        popper-class="flatmap_dropdown"
-        @change="setSpecies"
-        v-popover:selectPopover
+    <div style="position: absolute; z-index: 10">
+      <div class="species-display-text">Species</div>
+      <el-popover
+        content="Select a species"
+        placement="right"
+        trigger="manual"
+        popper-class="flatmap-popper right-popper"
+        :visible="helpMode"
+        :teleported="false"
+        ref="selectPopover"
       >
-        <el-option v-for="(item, key) in speciesList" :key="key" :label="key" :value="key">
-          <el-row>
-            <el-col :span="8"><i :class="item.iconClass"></i></el-col>
-            <el-col :span="12">{{ key }}</el-col>
-          </el-row>
-        </el-option>
-      </el-select>
+        <template #reference>
+          <el-select
+            id="flatmap-select"
+            :teleported="false"
+            v-model="activeSpecies"
+            placeholder="Select"
+            class="select-box"
+            popper-class="flatmap-dropdown"
+            @change="setSpecies"
+          >
+            <el-option
+              v-for="(item, key) in speciesList"
+              :key="key"
+              :label="key"
+              :value="key"
+            >
+              <el-row>
+                <el-col :span="8"><i :class="item.iconClass"></i></el-col>
+                <el-col :span="12">{{ key }}</el-col>
+              </el-row>
+            </el-option>
+          </el-select>
+        </template>
+
+      </el-popover>
     </div>
     <FlatmapVuer
       v-for="(item, key) in speciesList"
       :key="key"
       :showLayer="showLayer"
-      v-show="activeSpecies==key"
+      v-show="activeSpecies == key"
       :entry="item.taxo"
       :uuid="item.uuid"
       :biologicalSex="item.biologicalSex"
       :displayWarning="item.displayWarning"
       :displayLatestChanges="item.displayLatestChanges"
-      :latestChangesMessage="item.latestChangesMessage"
       :isLegacy="item.isLegacy"
       :ref="key"
       :enableOpenMapUI="enableOpenMapUI"
@@ -54,207 +65,216 @@
       :renderAtMounted="renderAtMounted"
       :displayMinimap="displayMinimap"
       :showStarInLegend="showStarInLegend"
-      style="height:100%"
+      style="height: 100%"
       :flatmapAPI="flatmapAPI"
       :sparcAPI="sparcAPI"
     />
   </div>
 </template>
 
-
 <script>
 /* eslint-disable no-alert, no-console */
+import { reactive } from 'vue'
 import EventBus from './EventBus'
-import Vue from "vue";
-import FlatmapVuer from "./FlatmapVuer.vue";
-import { Col, Option, Select, Row, Popover } from "element-ui";  
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-locale.use(lang);
-Vue.use(Col);
-Vue.use(Row);
-Vue.use(Option);
-Vue.use(Select);
-Vue.use(Popover)
+import FlatmapVuer from './FlatmapVuer.vue'
+import {
+  ElCol as Col,
+  ElOption as Option,
+  ElSelect as Select,
+  ElRow as Row,
+  ElPopover as Popover,
+} from 'element-plus'
 
 const TAXON_UUID = {
-  "NCBITaxon:10114": "01fedbf9-d783-509c-a10c-827941ab13da",
-  "NCBITaxon:9823": "a336ac04-24db-561f-a25f-1c994fe17410",
-  "NCBITaxon:9606": "42ed6323-f645-5fbe-bada-9581819cf689",
-  "NCBITaxon:10090": "25285fab-48a0-5620-a6a0-f9a0374837d5",
-  "NCBITaxon:9685": "73060497-46a6-52bf-b975-cac511c127cb"
+  'NCBITaxon:10114': '01fedbf9-d783-509c-a10c-827941ab13da',
+  'NCBITaxon:9823': 'a336ac04-24db-561f-a25f-1c994fe17410',
+  'NCBITaxon:9606': '42ed6323-f645-5fbe-bada-9581819cf689',
+  'NCBITaxon:10090': '25285fab-48a0-5620-a6a0-f9a0374837d5',
+  'NCBITaxon:9685': '73060497-46a6-52bf-b975-cac511c127cb',
 }
 
 export default {
-  name: "MultiFlatmapVuer",
+  name: 'MultiFlatmapVuer',
   components: {
-    FlatmapVuer
+    Col,
+    Row,
+    Option,
+    Select,
+    Popover,
+    FlatmapVuer,
   },
   beforeMount() {
     //List for resolving the promise in initialise
     //if initialise is called multiple times
-    this._resolveList = [];
-    this._initialised = false;
+    this._resolveList = []
+    this._initialised = false
   },
-  mounted: function() {
-    this.initialise();
-    EventBus.$on('onActionClick', (action) =>{
+  mounted: function () {
+    this.initialise()
+    EventBus.on('onActionClick', (action) => {
       this.FlatmapSelected(action)
     })
   },
   methods: {
-    initialise: function() {
-      return new Promise(resolve => {
+    initialise: function () {
+      return new Promise((resolve) => {
         if (this.requireInitialisation) {
           //It has not been initialised yet
-          this.requireInitialisation = false;
+          this.requireInitialisation = false
           fetch(this.flatmapAPI)
-          .then(response => response.json())
-          .then(data => {
-            //Check each key in the provided availableSpecies against the one 
-            Object.keys(this.availableSpecies).forEach(key => {
-              // FIrst look through the uuid
-              const uuid = this.availableSpecies[key].uuid;
-              if (uuid && data.map(e => e.uuid).indexOf(uuid) > 0) {
-                this.$set(this.speciesList, key, this.availableSpecies[key]);
-              } else {
-                for (let i = 0; i < data.length; i++) {
-                  if (this.availableSpecies[key].taxo === data[i].taxon) {
-                    if (this.availableSpecies[key].biologicalSex) {
-                      if (data[i].biologicalSex && 
-                        data[i].biologicalSex === this.availableSpecies[key].biologicalSex) {
-                          this.$set(this.speciesList, key, this.availableSpecies[key]);
-                          break;
+            .then((response) => response.json())
+            .then((data) => {
+              //Check each key in the provided availableSpecies against the one
+              Object.keys(this.availableSpecies).forEach((key) => {
+                // FIrst look through the uuid
+                const uuid = this.availableSpecies[key].uuid
+                if (uuid && data.map((e) => e.uuid).indexOf(uuid) > 0) {
+                  this.speciesList[key] = reactive(this.availableSpecies[key])
+                } else {
+                  for (let i = 0; i < data.length; i++) {
+                    if (this.availableSpecies[key].taxo === data[i].taxon) {
+                      if (this.availableSpecies[key].biologicalSex) {
+                        if (
+                          data[i].biologicalSex &&
+                          data[i].biologicalSex ===
+                            this.availableSpecies[key].biologicalSex
+                        ) {
+                          this.speciesList[key] = reactive(this.availableSpecies[key])
+                          break
                         }
-                    } else {
-                      this.$set(this.speciesList, key, this.availableSpecies[key]);
-                      break;
+                      } else {
+                        this.speciesList[key] = reactive(this.availableSpecies[key])
+                        break
+                      }
                     }
                   }
                 }
+              })
+              //Use the state species if it does not have any other species information
+              let species = this.initial
+              if (this.state) {
+                const mapState = this.state.state
+                if (
+                  (!mapState || (!mapState.uuid && !mapState.entry)) &&
+                  this.state.species
+                )
+                  species = this.state.species
+                else species = undefined
               }
-            });
-            //Use the state species if it does not have any other species information 
-            let species = this.initial;
-            if (this.state) {
-              const mapState = this.state.state;
-              if ((!mapState || ( !mapState.uuid && !mapState.entry )) && this.state.species)
-                species = this.state.species;
-              else
-                species = undefined;
-            }
-            if (species) {
-              //No state resuming, set the current flatmap to {this.initial}
-              if (species && this.speciesList[species] !== undefined) {
-                this.activeSpecies = species;
-              } else {
-                this.activeSpecies = Object.keys(this.speciesList)[0];
+              if (species) {
+                //No state resuming, set the current flatmap to {this.initial}
+                if (species && this.speciesList[species] !== undefined) {
+                  this.activeSpecies = species
+                } else {
+                  this.activeSpecies = Object.keys(this.speciesList)[0]
+                }
+                this.setSpecies(
+                  this.activeSpecies,
+                  this.state ? this.state.state : undefined,
+                  5
+                )
               }
-              this.setSpecies(this.activeSpecies, this.state ? this.state.state : undefined, 5);
-            }
-            this._initialised = true;
-            resolve();
-            //Resolve all other promises resolve in the list
-            this._resolveList.forEach(other => { other(); });
-          });
+              this._initialised = true
+              resolve()
+              //Resolve all other promises resolve in the list
+              this._resolveList.forEach((other) => {
+                other()
+              })
+            })
         } else if (this._initialised) {
           //resolve as it has been initialised
-          resolve();
+          resolve()
         } else {
-          //resolve when the async initialisation is finished 
-          this._resolveList.push(resolve);
+          //resolve when the async initialisation is finished
+          this._resolveList.push(resolve)
         }
       })
     },
-    FlatmapSelected: function(resource) {
-      this.$emit("resource-selected", resource);
+    FlatmapSelected: function (resource) {
+      this.$emit('resource-selected', resource)
     },
-    FlatmapReady: function(component) {
-      this.$emit("ready", component);
+    FlatmapReady: function (component) {
+      this.$emit('ready', component)
     },
-    getCoordinatesOfLastClick: function() {
-      const flatmap = this.$refs[this.activeSpecies];
+    getCoordinatesOfLastClick: function () {
+      const flatmap = this.$refs[this.activeSpecies]
       if (flatmap && flatmap[0]) {
-        return flatmap[0].getCoordinatesOfLastClick();
+        return flatmap[0].getCoordinatesOfLastClick()
       }
-      return undefined;
+      return undefined
     },
-    getCurrentFlatmap: function() {
-      return this.$refs[this.activeSpecies][0];
+    getCurrentFlatmap: function () {
+      return this.$refs[this.activeSpecies][0]
     },
-    panZoomCallback: function(payload) {
-      this.$emit("pan-zoom-callback", payload);
+    panZoomCallback: function (payload) {
+      this.$emit('pan-zoom-callback', payload)
     },
-    showPopup: function(featureId, node, options) {
-      let map = this.getCurrentFlatmap();
-      map.showPopup(featureId, node, options);
+    showPopup: function (featureId, node, options) {
+      let map = this.getCurrentFlatmap()
+      map.showPopup(featureId, node, options)
     },
-    showMarkerPopup: function(featureId, node, options) {
-      let map = this.getCurrentFlatmap();
-      map.showMarkerPopup(featureId, node, options);
+    showMarkerPopup: function (featureId, node, options) {
+      let map = this.getCurrentFlatmap()
+      map.showMarkerPopup(featureId, node, options)
     },
-    setSpecies: function(species, state, numberOfRetry) {
+    setSpecies: function (species, state, numberOfRetry) {
       if (this.$refs && species in this.$refs) {
-        this.activeSpecies = species;
-        this.$refs[this.activeSpecies][0].createFlatmap(state);
-        this.$emit('flatmapChanged', this.activeSpecies);
+        this.activeSpecies = species
+        this.$refs[this.activeSpecies][0].createFlatmap(state)
+        this.$emit('flatmapChanged', this.activeSpecies)
       } else if (numberOfRetry) {
-        const retry = numberOfRetry - 1;
+        const retry = numberOfRetry - 1
         if (retry >= 0) {
-          Vue.nextTick(() => {
-            this.setSpecies(species, state, retry);
-          });
+          this.$nextTick(() => {
+            this.setSpecies(species, state, retry)
+          })
         }
       }
     },
     /**
-     * Function to switch to the latest existing map from 
-     * a legacy map of the same species. 
-     * 
+     * Function to switch to the latest existing map from
+     * a legacy map of the same species.
+     *
      * @private
      */
-    viewLatestMap: function(state) {
-      const keys = Object.keys(this.speciesList);
+    viewLatestMap: function (state) {
+      const keys = Object.keys(this.speciesList)
       for (let i = 0; i < keys.length; i++) {
-        const species = this.speciesList[keys[i]];
-        if (!species.isLegacy &&
-          (species.taxo === state.entry) && 
-         (species.biologicalSex === state.biologicalSex)) {
-           this.setSpecies(keys[i], state, 0);
-           return;
+        const species = this.speciesList[keys[i]]
+        if (
+          !species.isLegacy &&
+          species.taxo === state.entry &&
+          species.biologicalSex === state.biologicalSex
+        ) {
+          this.setSpecies(keys[i], state, 0)
+          return
         }
       }
     },
     /**
      * Create a legacy entry with the provided information
-     * 
+     *
      * @private
      */
-    createLegacyEntry: function(state, taxo, uuid) {
+    createLegacyEntry: function (state, taxo, uuid) {
       if (uuid && taxo) {
-        let name = "Legacy";
+        let name = 'Legacy'
         if (state.species) {
-          if (state.species.slice(0, 6) === "Legacy")
-            name = state.species;
-          else
-            name = name + ` ${state.species}`;
+          if (state.species.slice(0, 6) === 'Legacy') name = state.species
+          else name = name + ` ${state.species}`
         }
-        this.$set(
-          this.speciesList,
-          name, 
-          {
-            taxo: taxo,
-            isLegacy: true,
-            displayWarning: true
-          }
-        );
+        this.speciesList[name] = reactive({
+          taxo: taxo,
+          isLegacy: true,
+          displayWarning: true,
+        })
         return {
           species: name,
           state: {
             entry: taxo,
             uuid: uuid,
             viewport: state.state.viewport,
-            searchTerm: state.state.searchTerm
+            searchTerm: state.state.searchTerm,
           },
         }
       }
@@ -262,106 +282,126 @@ export default {
     /**
      * Function used to translate the legacy map state to one that can be used in current
      * flatmap if required. If it is a legacy, an Select entry will be added
-     * 
+     *
      * @private
      */
-    updateState: function(state) {
+    updateState: function (state) {
       return new Promise((resolve) => {
         if (state && state.state) {
-          const mapState = state.state;
+          const mapState = state.state
           //uuid is not in the state, this is a legacy map
           if (!mapState.uuid) {
             if (mapState.entry) {
-              const uuid = mapState.entry in TAXON_UUID ? TAXON_UUID[mapState.entry] : undefined;
-              const newState = this.createLegacyEntry(state, mapState.entry, uuid);
-              resolve(newState ? newState : state);
+              const uuid =
+                mapState.entry in TAXON_UUID
+                  ? TAXON_UUID[mapState.entry]
+                  : undefined
+              const newState = this.createLegacyEntry(
+                state,
+                mapState.entry,
+                uuid
+              )
+              resolve(newState ? newState : state)
             }
           } else if (mapState.entry) {
             //uuid is in the state but should be checked if it is the latest map
             //for that taxon
             return new Promise(() => {
-              const mapManager = new (require("@abi-software/flatmap-viewer")).MapManager(this.flatmapAPI);
+              const mapManager =
+                new (require('@abi-software/flatmap-viewer').MapManager)(
+                  this.flatmapAPI
+                )
               //mapManager.findMap_ is an async function so we need to wrap this with a promise
-              const identifier = { taxon: mapState.entry };
+              const identifier = { taxon: mapState.entry }
               if (mapState.biologicalSex)
-                identifier['biologicalSex'] = mapState.biologicalSex;
-              mapManager.findMap_(identifier).then(map => {
-                if (map.uuid !== mapState.uuid) {
-                  return this.createLegacyEntry(state, mapState.entry, mapState.uuid);
-                }
-              }).then(newState => {
-                resolve(newState ? newState : state);
-              })
-              .catch(() => {
-                resolve(state);
-              });
-            });
+                identifier['biologicalSex'] = mapState.biologicalSex
+              mapManager
+                .findMap_(identifier)
+                .then((map) => {
+                  if (map.uuid !== mapState.uuid) {
+                    return this.createLegacyEntry(
+                      state,
+                      mapState.entry,
+                      mapState.uuid
+                    )
+                  }
+                })
+                .then((newState) => {
+                  resolve(newState ? newState : state)
+                })
+                .catch(() => {
+                  resolve(state)
+                })
+            })
           }
           //Create a new state and add the legacy map to the select
         }
-        resolve(state);
-      });
+        resolve(state)
+      })
     },
     /**
-     * Function used for getting the current states of the scene. This exported states 
+     * Function used for getting the current states of the scene. This exported states
      * can be imported using the importStates method.
-     * 
+     *
      * @public
      */
-    getState: function() {
+    getState: function () {
       let state = {
         species: this.activeSpecies,
         state: undefined,
-      };
-      let map = this.getCurrentFlatmap();
-      state.state = map.getState();
-      return state;
+      }
+      let map = this.getCurrentFlatmap()
+      state.state = map.getState()
+      return state
     },
     /**
-     * Function used for importing the states of the scene. This exported states 
+     * Function used for importing the states of the scene. This exported states
      * can be imported using the read states method.
-     * 
+     *
      * @public
      */
-    setState: function(state) {
+    setState: function (state) {
       if (state) {
-          //Update state if required
-        this.updateState(state).then(currentState => {
+        //Update state if required
+        this.updateState(state).then((currentState) => {
           this.initialise().then(() => {
-            if (currentState.species && (currentState.species !== this.activeSpecies)) {
-              this.setSpecies(currentState.species, currentState.state, 5);
+            if (
+              currentState.species &&
+              currentState.species !== this.activeSpecies
+            ) {
+              this.setSpecies(currentState.species, currentState.state, 5)
             } else if (currentState.state) {
-              let map = this.getCurrentFlatmap();
-              map.setState(currentState.state);
+              let map = this.getCurrentFlatmap()
+              map.setState(currentState.state)
             }
-          });
-        });
+          })
+        })
       }
     },
-    resourceSelected: function(action) {
-      this.$emit("resource-selected", action);
+    resourceSelected: function (action) {
+      this.$emit('resource-selected', action)
     },
   },
   props: {
     showLayer: {
       type: Boolean,
-      default: false
+      default: false,
     },
     featureInfo: {
       type: Boolean,
-      default: false
+      default: false,
     },
     pathControls: {
       type: Boolean,
-      default: true
+      default: true,
     },
     searchable: {
       type: Boolean,
-      default: false
+      default: false,
     },
     layerControl: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * Initial species for the flatmap.
@@ -369,27 +409,27 @@ export default {
      */
     initial: {
       type: String,
-      default: ""
+      default: '',
     },
     minZoom: {
       type: Number,
-      default: 4
+      default: 4,
     },
     renderAtMounted: {
       type: Boolean,
-      default: false
+      default: false,
     },
     helpMode: {
       type: Boolean,
-      default: false
+      default: false,
     },
     displayMinimap: {
       type: Boolean,
-      default: false
+      default: false,
     },
     showStarInLegend: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
      * Flag to determine rather open map UI should be
@@ -400,20 +440,46 @@ export default {
       default: false,
     },
     openMapOptions: {
-      type: Array
+      type: Array,
     },
     availableSpecies: {
       type: Object,
-      default: function() {
+      default: function () {
         return {
-          "Human Female":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000383", iconClass:"mapicon-icon_human", displayWarning:true},
-          "Human Male":{taxo: "NCBITaxon:9606", biologicalSex: "PATO:0000384", iconClass:"mapicon-icon_human", displayWarning:true},
-          "Rat":{taxo: "NCBITaxon:10114", iconClass:"mapicon-icon_rat", displayLatestChanges: true},
-          "Mouse":{taxo: "NCBITaxon:10090", iconClass:"mapicon-icon_mouse", displayWarning: true},
-          "Pig":{taxo: "NCBITaxon:9823", iconClass:"mapicon-icon_pig", displayWarning: true},
-          "Cat":{taxo: "NCBITaxon:9685", iconClass:"mapicon-icon_cat", displayWarning: true},
+          'Human Female': {
+            taxo: 'NCBITaxon:9606',
+            biologicalSex: 'PATO:0000383',
+            iconClass: 'mapicon-icon_human',
+            displayWarning: true,
+          },
+          'Human Male': {
+            taxo: 'NCBITaxon:9606',
+            biologicalSex: 'PATO:0000384',
+            iconClass: 'mapicon-icon_human',
+            displayWarning: true,
+          },
+          Rat: {
+            taxo: 'NCBITaxon:10114',
+            iconClass: 'mapicon-icon_rat',
+            displayLatestChanges: true,
+          },
+          Mouse: {
+            taxo: 'NCBITaxon:10090',
+            iconClass: 'mapicon-icon_mouse',
+            displayWarning: true,
+          },
+          Pig: {
+            taxo: 'NCBITaxon:9823',
+            iconClass: 'mapicon-icon_pig',
+            displayWarning: true,
+          },
+          Cat: {
+            taxo: 'NCBITaxon:9685',
+            iconClass: 'mapicon-icon_cat',
+            displayWarning: true,
+          },
         }
-      }
+      },
     },
     /**
      * State containing state of the flatmap.
@@ -427,36 +493,35 @@ export default {
      */
     flatmapAPI: {
       type: String,
-      default: "https://mapcore-demo.org/current/flatmap/v3/"
+      default: 'https://mapcore-demo.org/current/flatmap/v3/',
     },
     sparcAPI: {
       type: String,
-      default: "https://api.sparc.science/"
-    } 
+      default: 'https://api.sparc.science/',
+    },
   },
-  data: function() {
+  data: function () {
     return {
       activeSpecies: undefined,
-      appendToBody: false,
       speciesList: {},
-      requireInitialisation: true
-    };
+      requireInitialisation: true,
+    }
   },
   watch: {
     state: {
-      handler: function(state) {
-        this.setState(state);
+      handler: function (state) {
+        this.setState(state)
       },
       immediate: true,
       deep: true,
-    }
-  }
-};
+    },
+  },
+}
 </script>
 
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/select";
-@import "~element-ui/packages/theme-chalk/src/option";
+<style lang="scss" scoped>
+@use 'element-plus/theme-chalk/src/select';
+@use 'element-plus/theme-chalk/src/option';
 
 .multi-container {
   height: 100%;
@@ -470,8 +535,8 @@ export default {
   font-size: 14px;
   font-weight: normal;
   line-height: 20px;
-  left:24px;
-  top:16px;
+  left: 24px;
+  top: 16px;
   position: absolute;
 }
 
@@ -481,24 +546,28 @@ export default {
   border: 1px solid rgb(144, 147, 153);
   background-color: var(--white);
   font-weight: 500;
-  color:rgb(48, 49, 51);
+  color: rgb(48, 49, 51);
   left: 16px;
   top: 44px;
   position: absolute;
-  ::v-deep .el-input__inner {
+  :deep(.el-input__inner) {
     color: rgb(48, 49, 51);
     padding-top: 0.25em;
   }
-  ::v-deep .el-input__inner {
-    &is-focus, &:focus {
-      border: 1px solid $app-primary-color;
+  :deep() {
+    .el-input {
+      .el-input__wrapper{
+        &is-focus,
+        &:focus {
+          border: 1px solid $app-primary-color;
+        }
+      }
     }
   }
-} 
-
+}
 
-::v-deep .flatmap_dropdown {
-  min-width: 160px!important;
+.flatmap-dropdown {
+  min-width: 160px !important;
   .el-select-dropdown__item {
     white-space: nowrap;
     text-align: left;
@@ -509,9 +578,9 @@ export default {
   }
 }
 
-::v-deep .flatmap-popper {
+.flatmap-popper {
   padding: 6px 4px;
-  font-size:12px;
+  font-size: 12px;
   color: rgb(48, 49, 51);
   background-color: #f3ecf6;
   border: 1px solid $app-primary-color;
@@ -527,10 +596,8 @@ export default {
   }
 }
 
-::v-deep .flatmap-marker-popup{
-  background-color: #f0f0f000  !important;
+:deep(.flatmap-marker-popup) {
+  background-color: #f0f0f000 !important;
   box-shadow: none !important;
 }
-
 </style>
-