From 95c97681778590878a4075c768a811e30166fcf0 Mon Sep 17 00:00:00 2001
From: Matthew Miller <thisismattmiller@gmail.com>
Date: Thu, 24 Oct 2024 15:31:58 -0400
Subject: [PATCH] first pass at validation icons

---
 .../panels/edit/fields/LookupComplex.vue      |  15 +-
 .../panels/edit/fields/LookupSimple.vue       |  20 +-
 .../edit/fields/helpers/ValidationIcon.vue    | 611 ++++++++++++++++++
 src/stores/config.js                          |   2 +-
 src/stores/profile.js                         |  52 ++
 5 files changed, 684 insertions(+), 16 deletions(-)
 create mode 100644 src/components/panels/edit/fields/helpers/ValidationIcon.vue

diff --git a/src/components/panels/edit/fields/LookupComplex.vue b/src/components/panels/edit/fields/LookupComplex.vue
index 6ed856f8..d4e3f44e 100644
--- a/src/components/panels/edit/fields/LookupComplex.vue
+++ b/src/components/panels/edit/fields/LookupComplex.vue
@@ -77,7 +77,7 @@
                           <AuthTypeIcon passClass="complex-lookup-inline" v-if="avl.type" :type="avl.type"/>
                         </div>
                         <div class="selected-value-container-title">
-                          <!-- <span class="material-icons check-mark">check_circle_outline</span> -->
+                          <!-- <span class="material-icons check-mark">check_circle_outline</span> -->                           
                           <span v-if="!avl.needsDereference" style="padding-right: 0.3em; font-weight: bold">{{avl.label}}<span class="uncontrolled" v-if="avl.isLiteral">(uncontrolled)</span><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon" style=""></span></span>
                           <span v-else style="padding-right: 0.3em; font-weight: bold"><LabelDereference :URI="avl.URI"/><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon"><span class="material-icons check-mark">check_circle_outline</span></span></span>
                         </div>
@@ -98,8 +98,9 @@
 
 
 
-          <template v-if="preferenceStore.returnValue('--b-edit-main-splitpane-edit-shortcode-display-mode') == false">
+          <template v-if="preferenceStore.returnValue('--b-edit-main-splitpane-edit-shortcode-display-mode') == false">            
             <div class="lookup-fake-input-entities" v-if="marcDeliminatedLCSHMode == false">
+              
               <div v-for="(avl,idx) in complexLookupValues" class="selected-value-container">
                 <div class="selected-value-container-auth">
                   <AuthTypeIcon passClass="complex-lookup-inline" v-if="avl.type" :type="avl.type"/>
@@ -111,11 +112,13 @@
                     <span v-else>{{avl.label}}</span> -->
                     <span v-if="avl.source && avl.source=='FAST'" style="font-weight: bold;">(FAST) </span>
                     <a href="#" @click="openAuthority()" ref="el">{{avl.label}}</a>
-                    <span class="uncontrolled" v-if="avl.isLiteral">
+                    <ValidationIcon :value="avl" />
+                    <!-- <span class="uncontrolled" v-if="avl.isLiteral">
                       (uncontrolled)
                     </span>
                     <span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon" style="">
-                    </span>
+                    </span> -->
+
                   </span>
                   <span v-else-if="avl.needsDereference" style="padding-right: 0.3em; font-weight: bold"><LabelDereference :URI="avl.URI"/><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon"><span class="material-icons check-mark">check_circle_outline</span></span></span>
                   <span v-else-if="avl.uneditable" style="padding-right: 0.3em; font-weight: bold">{{ avl.label }} (Uneditable)</span>
@@ -193,6 +196,7 @@ import SubjectEditor from "@/components/panels/edit/modals/SubjectEditor.vue";
 import LabelDereference from "@/components/panels/edit/fields/helpers/LabelDereference.vue";
 import AuthTypeIcon from "@/components/panels/edit/fields/helpers/AuthTypeIcon.vue";
 import ActionButton from "@/components/panels/edit/fields/helpers/ActionButton.vue";
+import ValidationIcon from "@/components/panels/edit/fields/helpers/ValidationIcon.vue";
 
 
 import { useProfileStore } from '@/stores/profile'
@@ -213,7 +217,8 @@ export default {
     SubjectEditor,
     LabelDereference,
     AuthTypeIcon,
-    ActionButton
+    ActionButton,
+    ValidationIcon
 
     // Keypress: () => import('vue-keypress'),
     // EditSubjectEditor,
diff --git a/src/components/panels/edit/fields/LookupSimple.vue b/src/components/panels/edit/fields/LookupSimple.vue
index 72c77403..18f5624a 100644
--- a/src/components/panels/edit/fields/LookupSimple.vue
+++ b/src/components/panels/edit/fields/LookupSimple.vue
@@ -27,7 +27,7 @@
                 <span class="uncontrolled" v-if="avl.isLiteral"> (uncontrolled)</span></span>
               <!-- <span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon" style=""><span class="material-icons check-mark">check_circle_outline</span></span></span> -->
 
-              <span v-else style=""><LabelDereference :URI="avl.URI"/><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon"><span class="material-icons check-mark">check_circle_outline</span></span></span>
+              <span v-else style=""><LabelDereference :URI="avl.URI"/><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon"></span></span>
                 
               <a href="#" class="inline-remove-x" @click="removeValue(idx)" style="">x</a>
           </template>
@@ -74,9 +74,9 @@
 
                 <div class="lookup-fake-input-entities" style="display:inline-block;">
                   <div v-for="(avl,idx) in simpleLookupValues" class="selected-value-container">                    
-                      <span v-if="!avl.needsDereference" style="padding-right: 0.3em; font-weight: bold">{{avl.label}}<span class="uncontrolled" v-if="avl.isLiteral">(uncontrolled)</span><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon" style=""><span class="material-icons check-mark">check_circle_outline</span></span></span>
+                      <span v-if="!avl.needsDereference" style="padding-right: 0.3em; font-weight: bold">{{avl.label}}<span class="uncontrolled" v-if="avl.isLiteral">(uncontrolled)</span><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon" style=""></span></span>
                       
-                      <span v-else style="padding-right: 0.3em; font-weight: bold"><LabelDereference :URI="avl.URI"/><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon"><span class="material-icons check-mark">check_circle_outline</span></span></span>
+                      <span v-else style="padding-right: 0.3em; font-weight: bold"><LabelDereference :URI="avl.URI"/><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon"></span></span>
 
                       <span @click="removeValue(idx)" style="border-left: solid 1px black; padding: 0 0.5em; font-size: 1em; cursor: pointer;">x</span>
                   </div>
@@ -95,8 +95,8 @@
             <div class="lookup-fake-input-entities">
               <div v-for="(avl,idx) in simpleLookupValues" class="selected-value-container">
 
-                <span v-if="!avl.needsDereference" style="padding-right: 0.3em; font-weight: bold">{{avl.label}}<span class="uncontrolled" v-if="avl.isLiteral">(uncontrolled)</span><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon" style=""><span class="material-icons check-mark">check_circle_outline</span></span></span>
-                  <span v-else style="padding-right: 0.3em; font-weight: bold"><LabelDereference :URI="avl.URI"/><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon"><span class="material-icons check-mark">check_circle_outline</span></span></span>
+                <span v-if="!avl.needsDereference" style="padding-right: 0.3em; font-weight: bold">{{avl.label}}<span class="uncontrolled" v-if="avl.isLiteral">(uncontrolled)</span><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon" style=""></span></span>
+                  <span v-else style="padding-right: 0.3em; font-weight: bold"><LabelDereference :URI="avl.URI"/><span v-if="!avl.isLiteral" title="Controlled Term" class="selected-value-icon"></span></span>
                   <span @click="removeValue(idx)" v-if="!avl.uneditable" style="border-left: solid 1px black; padding: 0 0.5em; font-size: 1em; cursor: pointer;">x</span>
                   <span v-else>(uneditable)</span>
               </div>
@@ -1219,11 +1219,11 @@ export default {
 
 .selected-value-icon{
 /*  font-family: "validation-icons", "fontello", Avenir, Helvetica, Arial, sans-serif;*/
-  padding-right: 0.3em;
-  margin-left: 5px;
-  border-left: 1px solid black;
-  padding: 0px 7px;
-  font-size: 1em;
+  /* padding-right: 0.3em; */
+  /* margin-left: 5px; */
+  /* border-left: 1px solid black; */
+  /* padding: 0px 7px; */
+  /* font-size: 1em; */
 }
 
 
diff --git a/src/components/panels/edit/fields/helpers/ValidationIcon.vue b/src/components/panels/edit/fields/helpers/ValidationIcon.vue
new file mode 100644
index 00000000..0dbdd49d
--- /dev/null
+++ b/src/components/panels/edit/fields/helpers/ValidationIcon.vue
@@ -0,0 +1,611 @@
+<template>
+
+<span class="simptip-position-right" :data-tooltip="useIcon[1]">
+    <span :class="['material-icons',useIcon[0]]"  >{{useIcon[0]}}</span>
+
+  </span>
+  <!-- <span>{{value}}</span>   -->
+</template>
+
+<script>
+
+import { useProfileStore } from '@/stores/profile'
+import { mapStores,  } from 'pinia'
+
+
+
+export default {
+  name: "ValidationIcon",
+  components: {
+  },
+
+  props: {
+    value: Object
+
+  },
+
+  data:function() {
+    return {
+
+    }
+  },
+
+  created: function(){
+
+
+  },
+
+  computed: {
+
+    ...mapStores(useProfileStore),
+
+
+    useIcon(){
+
+      if (this.value && this.value.URI){
+        return ['verified','Authorized Value']
+      }else{
+        return this.profileStore.returnValidationType( this.value['@guid'])
+      }
+
+      return [null,null]
+
+    }, 
+
+    
+
+
+  },
+
+
+
+  methods:{
+
+
+  }
+
+};
+
+</script>
+
+<style scoped>
+
+.verified {
+    color: green;
+    font-size: 1.5em;
+    font-weight: bold;
+    vertical-align: middle;
+    padding-left: 5px;
+}
+.warning {
+    color: green;
+    font-size: 1.5em;
+    font-weight: bold;
+    vertical-align: middle;
+    padding-left: 5px;
+}
+.done_all {
+    color: green;
+    font-size: 1.5em;
+    font-weight: bold;
+    vertical-align: middle;
+    padding-left: 5px;
+}
+
+.help{
+  color: orange;
+  font-size: 1.5em;
+  font-weight: bold;
+  vertical-align: middle;
+  padding-left: 5px;
+}
+.report{
+  color: rebeccapurple;
+  font-size: 1.5em;
+  font-weight: bold;
+  vertical-align: middle;
+  padding-left: 5px;
+}
+
+
+[data-tooltip] {
+  position: relative;
+  display: inline-block;
+}
+
+[data-tooltip]:before, [data-tooltip]:after {
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 999999;
+}
+
+[data-tooltip]:before {
+  content: '';
+  position: absolute;
+  border-width: 0px;
+  border-style: solid;
+  border-color: transparent;
+}
+
+[data-tooltip]:after {
+  height: 21px;
+  padding: 2px;
+  font-size: 13px;
+
+  
+  content: attr(data-tooltip);
+  white-space: nowrap;
+}
+
+[data-tooltip].simptip-position-top:before {
+  border-top-color: #323232;
+}
+
+[data-tooltip].simptip-position-top:after {
+  background-color: #323232;
+  color: #ecf0f1;
+}
+
+[data-tooltip].simptip-position-bottom:before {
+  border-bottom-color: #323232;
+}
+
+[data-tooltip].simptip-position-bottom:after {
+  background-color: #323232;
+  color: #ecf0f1;
+}
+
+[data-tooltip].simptip-position-left:before {
+  border-left-color: #323232;
+}
+
+[data-tooltip].simptip-position-left:after {
+  background-color: #323232;
+  color: #ecf0f1;
+}
+
+[data-tooltip].simptip-position-right:before {
+  border-right-color: #323232;
+}
+
+[data-tooltip].simptip-position-right:after {
+  background-color: #323232;
+  color: #ecf0f1;
+}
+
+[data-tooltip].simptip-position-top.half-arrow:before {
+  border-right: 7px solid #323232;
+}
+
+[data-tooltip].simptip-position-bottom.half-arrow:before {
+  border-right: 7px solid #323232;
+}
+
+[data-tooltip]:hover, [data-tooltip]:focus {
+  background-color: transparent;
+}
+
+[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after {
+  visibility: visible;
+  opacity: 1;
+}
+
+/******************************* Position ****************************/
+
+.simptip-position-right.simptip-movable:before, .simptip-position-right.simptip-movable:after, .simptip-position-left.simptip-movable:before, .simptip-position-left.simptip-movable:after, .simptip-position-top.simptip-movable:before, .simptip-position-top.simptip-movable:after, .simptip-position-bottom.simptip-movable:before, .simptip-position-bottom.simptip-movable:after {
+  -webkit-transition: all 0.1s linear;
+  -moz-transition: all 0.1s linear;
+  -o-transition: all 0.1s linear;
+  -ms-transition: all 0.1s linear;
+  transition: all 0.1s linear;
+}
+
+
+.simptip-position-right:before, .simptip-position-right:after, .simptip-position-left:before, .simptip-position-left:after {
+  bottom: 50%;
+}
+
+.simptip-position-right:before, .simptip-position-left:before {
+  margin-bottom: -5px;
+  /*-5px*/
+}
+
+.simptip-position-right:after, .simptip-position-left:after {
+  margin-bottom: -14.66667px;
+}
+
+.simptip-position-right.half-arrow:before, .simptip-position-left.half-arrow:before {
+  bottom: 16px;
+  border-style: none;
+  border-top: 7px solid transparent;
+}
+
+.simptip-position-right.simptip-multiline:before, .simptip-position-right.simptip-multiline:after, .simptip-position-left.simptip-multiline:before, .simptip-position-left.simptip-multiline:after {
+  bottom: -50%;
+}
+
+.simptip-position-right.simptip-multiline:before, .simptip-position-left.simptip-multiline:before {
+  margin-bottom: 15px;
+}
+
+
+.simptip-position-right:before, .simptip-position-right:after {
+  left: 100%;
+}
+
+.simptip-position-right:before {
+  margin-left: -2px;
+}
+
+.simptip-position-right:after {
+  margin-left: 10px;
+}
+
+.simptip-position-right.simptip-movable:before {
+  margin-left: -10px;
+}
+
+.simptip-position-right.simptip-movable:after {
+  margin-left: 2px;
+}
+
+.simptip-position-right.simptip-movable:hover:before, .simptip-position-right.simptip-movable:hover:after {
+  -webkit-transform: translateX(10px);
+  -moz-transform: translateX(10px);
+  -ms-transform: translateX(10px);
+  -o-transform: translateX(10px);
+  transform: translateX(10px);
+}
+
+.simptip-position-right.simptip-movable.half-arrow:before {
+  margin-left: -5px;
+}
+
+.simptip-position-right.half-arrow:before {
+  margin-left: 3px;
+  border-right: 7px solid #323232;
+}
+
+
+.simptip-position-left:before, .simptip-position-left:after {
+  right: 100%;
+}
+
+.simptip-position-left:before {
+  margin-right: -2px;
+}
+
+.simptip-position-left:after {
+  margin-right: 10px;
+}
+
+.simptip-position-left.simptip-movable:before {
+  margin-right: -10px;
+}
+
+.simptip-position-left.simptip-movable:after {
+  margin-right: 2px;
+}
+
+.simptip-position-left.simptip-movable:hover:before, .simptip-position-left.simptip-movable:hover:after {
+  -webkit-transform: translateX(-10px);
+  -moz-transform: translateX(-10px);
+  -ms-transform: translateX(-10px);
+  -o-transform: translateX(-10px);
+  transform: translateX(-10px);
+}
+
+.simptip-position-left.simptip-movable.half-arrow:before {
+  margin-right: -5px;
+}
+
+.simptip-position-left.half-arrow:before {
+  margin-right: 3px;
+  border-left: 7px solid #323232;
+}
+
+
+.simptip-position-bottom:before, .simptip-position-bottom:after, .simptip-position-top:before, .simptip-position-top:after {
+  left: 50%;
+}
+
+.simptip-position-bottom:after, .simptip-position-top:after {
+  margin-left: -18px;
+}
+
+.simptip-position-bottom.half-arrow:before, .simptip-position-top.half-arrow:before {
+  border-style: none;
+  border-right: 7px solid #323232;
+}
+
+
+.simptip-position-bottom:before, .simptip-position-bottom:after {
+  top: 100%;
+}
+
+.simptip-position-bottom:before {
+  margin-top: -5px;
+  /*-5px*/
+}
+
+.simptip-position-bottom:after {
+  margin-top: 7px;
+}
+
+.simptip-position-bottom.simptip-movable:before {
+  margin-top: -15px;
+}
+
+.simptip-position-bottom.simptip-movable:after {
+  margin-top: -3px;
+}
+
+.simptip-position-bottom.simptip-movable:hover:before, .simptip-position-bottom.simptip-movable:hover:after {
+  -webkit-transform: translateY(10px);
+  -moz-transform: translateY(10px);
+  -ms-transform: translateY(10px);
+  -o-transform: translateY(10px);
+  transform: translateY(10px);
+}
+
+.simptip-position-bottom.simptip-movable.half-arrow:before {
+  margin-top: -10px;
+}
+
+.simptip-position-bottom.half-arrow:before {
+  margin-top: 0;
+  border-top: 7px solid transparent;
+}
+
+
+.simptip-position-top:before, .simptip-position-top:after {
+  bottom: 100%;
+}
+
+.simptip-position-top:before {
+  margin-bottom: -5px;
+  /*-5px*/
+}
+
+.simptip-position-top:after {
+  margin-bottom: 7px;
+}
+
+.simptip-position-top.simptip-movable:before {
+  margin-bottom: -15px;
+}
+
+.simptip-position-top.simptip-movable:after {
+  margin-bottom: -3px;
+}
+
+.simptip-position-top.simptip-movable:hover:before, .simptip-position-top.simptip-movable:hover:after {
+  -webkit-transform: translateY(-10px);
+  -moz-transform: translateY(-10px);
+  -ms-transform: translateY(-10px);
+  -o-transform: translateY(-10px);
+  transform: translateY(-10px);
+}
+
+.simptip-position-top.simptip-movable.half-arrow:before {
+  margin-bottom: -10px;
+}
+
+.simptip-position-top.half-arrow:before {
+  margin-bottom: 0;
+  border-bottom: 7px solid transparent;
+}
+
+/******************************* Features ****************************/
+
+.simptip-smooth:after {
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+}
+
+
+.simptip-fade:before, .simptip-fade:after {
+  -webkit-transition: opacity 0.2s linear, visibility 0.2s linear;
+  -moz-transition: opacity 0.2s linear, visibility 0.2s linear;
+  -ms-transition: opacity 0.2s linear, visibility 0.2s linear;
+  -o-transition: opacity 0.2s linear, visibility 0.2s linear;
+  transition: opacity 0.2s linear, visibility 0.2s linear;
+}
+
+
+.simptip-multiline:after {
+  height: auto;
+  width: 150px;
+  padding: 11px;
+  line-height: 19px;
+  white-space: normal;
+  text-align: left;
+}
+
+/**************************** Diverse Colors *************************/
+
+.simptip-success.simptip-position-top:before {
+  border-top-color: #62c462;
+}
+
+.simptip-success.simptip-position-top:after {
+  background-color: #62c462;
+  color: #ecf0f1;
+}
+
+.simptip-success.simptip-position-bottom:before {
+  border-bottom-color: #62c462;
+}
+
+.simptip-success.simptip-position-bottom:after {
+  background-color: #62c462;
+  color: #ecf0f1;
+}
+
+.simptip-success.simptip-position-left:before {
+  border-left-color: #62c462;
+}
+
+.simptip-success.simptip-position-left:after {
+  background-color: #62c462;
+  color: #ecf0f1;
+}
+
+.simptip-success.simptip-position-right:before {
+  border-right-color: #62c462;
+}
+
+.simptip-success.simptip-position-right:after {
+  background-color: #62c462;
+  color: #ecf0f1;
+}
+
+.simptip-success.simptip-position-top.half-arrow:before {
+  border-right: 7px solid #62c462;
+}
+
+.simptip-success.simptip-position-bottom.half-arrow:before {
+  border-right: 7px solid #62c462;
+}
+
+
+.simptip-info.simptip-position-top:before {
+  border-top-color: #5bc0de;
+}
+
+.simptip-info.simptip-position-top:after {
+  background-color: #5bc0de;
+  color: #ecf0f1;
+}
+
+.simptip-info.simptip-position-bottom:before {
+  border-bottom-color: #5bc0de;
+}
+
+.simptip-info.simptip-position-bottom:after {
+  background-color: #5bc0de;
+  color: #ecf0f1;
+}
+
+.simptip-info.simptip-position-left:before {
+  border-left-color: #5bc0de;
+}
+
+.simptip-info.simptip-position-left:after {
+  background-color: #5bc0de;
+  color: #ecf0f1;
+}
+
+.simptip-info.simptip-position-right:before {
+  border-right-color: #5bc0de;
+}
+
+.simptip-info.simptip-position-right:after {
+  background-color: #5bc0de;
+  color: #ecf0f1;
+}
+
+.simptip-info.simptip-position-top.half-arrow:before {
+  border-right: 7px solid #5bc0de;
+}
+
+.simptip-info.simptip-position-bottom.half-arrow:before {
+  border-right: 7px solid #5bc0de;
+}
+
+
+.simptip-danger.simptip-position-top:before {
+  border-top-color: #e74c3c;
+}
+
+.simptip-danger.simptip-position-top:after {
+  background-color: #e74c3c;
+  color: #ecf0f1;
+}
+
+.simptip-danger.simptip-position-bottom:before {
+  border-bottom-color: #e74c3c;
+}
+
+.simptip-danger.simptip-position-bottom:after {
+  background-color: #e74c3c;
+  color: #ecf0f1;
+}
+
+.simptip-danger.simptip-position-left:before {
+  border-left-color: #e74c3c;
+}
+
+.simptip-danger.simptip-position-left:after {
+  background-color: #e74c3c;
+  color: #ecf0f1;
+}
+
+.simptip-danger.simptip-position-right:before {
+  border-right-color: #e74c3c;
+}
+
+.simptip-danger.simptip-position-right:after {
+  background-color: #e74c3c;
+  color: #ecf0f1;
+}
+
+.simptip-danger.simptip-position-top.half-arrow:before {
+  border-right: 7px solid #e74c3c;
+}
+
+.simptip-danger.simptip-position-bottom.half-arrow:before {
+  border-right: 7px solid #e74c3c;
+}
+
+
+.simptip-warning.simptip-position-top:before {
+  border-top-color: #e67e22;
+}
+
+.simptip-warning.simptip-position-top:after {
+  background-color: #e67e22;
+  color: #ecf0f1;
+}
+
+.simptip-warning.simptip-position-bottom:before {
+  border-bottom-color: #e67e22;
+}
+
+.simptip-warning.simptip-position-bottom:after {
+  background-color: #e67e22;
+  color: #ecf0f1;
+}
+
+.simptip-warning.simptip-position-left:before {
+  border-left-color: #e67e22;
+}
+
+.simptip-warning.simptip-position-left:after {
+  background-color: #e67e22;
+  color: #ecf0f1;
+}
+
+.simptip-warning.simptip-position-right:before {
+  border-right-color: #e67e22;
+}
+
+.simptip-warning.simptip-position-right:after {
+  background-color: #e67e22;
+  color: #ecf0f1;
+}
+
+.simptip-warning.simptip-position-top.half-arrow:before {
+  border-right: 7px solid #e67e22;
+}
+
+.simptip-warning.simptip-position-bottom.half-arrow:before {
+  border-right: 7px solid #e67e22;
+}
+
+</style>
+
diff --git a/src/stores/config.js b/src/stores/config.js
index 1d285106..ef301886 100644
--- a/src/stores/config.js
+++ b/src/stores/config.js
@@ -7,7 +7,7 @@ export const useConfigStore = defineStore('config', {
 
     versionMajor: 0,
     versionMinor: 15,
-    versionPatch: 2,
+    versionPatch: 3,
 
 
     regionUrls: {
diff --git a/src/stores/profile.js b/src/stores/profile.js
index 2e99c314..9b66f450 100644
--- a/src/stores/profile.js
+++ b/src/stores/profile.js
@@ -1395,6 +1395,8 @@ export const useProfileStore = defineStore('profile', {
     },
 
 
+
+
     /**
     * Sets a literal value of field
     *
@@ -3671,7 +3673,57 @@ export const useProfileStore = defineStore('profile', {
 
     },
 
+    /**
+    * returns the validation status of the heading used
+    *
+    * @param {string} componentGuid - the guid of the component (the parent of all fields)
+    * @param {string} fieldGuid - the guid of the field
+    */
+    returnValidationType: function(fieldGuid){
+
+      let fieldValue=null
+      
+      for (let rt of this.activeProfile.rtOrder){
+        for (let pt of this.activeProfile.rt[rt].ptOrder){
+          fieldValue = utilsProfile.returnGuidLocation(this.activeProfile.rt[rt].pt[pt].userValue,fieldGuid)
+          if (fieldValue){break} 
+        }
+        if (fieldValue){break}
+      }
+      if (fieldValue){
+
+        // if it has a component list then check all the components
+        if (fieldValue['http://www.loc.gov/mads/rdf/v1#componentList'] && fieldValue['http://www.loc.gov/mads/rdf/v1#componentList'].length>0){
+
+          let allHasURI = true
+          let firstHasURI = false
+          for (let c of fieldValue['http://www.loc.gov/mads/rdf/v1#componentList']){
+            if (!c['@id']){ allHasURI=false}
+          }
+          if (fieldValue['http://www.loc.gov/mads/rdf/v1#componentList'][0] && fieldValue['http://www.loc.gov/mads/rdf/v1#componentList'][0]['@id']){
+            firstHasURI=true
+          }
+  
+          
+          if (allHasURI){return ['done_all','All components authorized']}
+          if (firstHasURI){return ['warning','FIRST component authorized']}
+          
+          return ['help','No authorized components found']
+        }
+
+
+
+        
+
+      }
+
+      return ['report','Not Checked']
+
+      
+
 
+      
+    },