ep-lib-ts 0.1.8 → 0.1.10

package/dist/style.css

@@ -1 +1 @@
-.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.content[data-v-69793e45]{max-height:0;overflow:hidden}.v-enter-active[data-v-ecd9b088],.v-leave-active[data-v-ecd9b088]{transition:opacity .5s ease}.v-enter-from[data-v-ecd9b088],.v-leave-to[data-v-ecd9b088]{opacity:0}.katex[data-v-24ff8b28]{font-size:1.3em}
+.modal-mask{position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;transition:opacity .3s ease}.modal-container{margin:auto;transition:all .3s ease;z-index:9999}.modal-header h3{margin-top:0;color:#42b983}.modal-body{margin:20px 0}.modal-default-button{float:right}.modal-enter-from,.modal-leave-to{opacity:0}.modal-enter-from .modal-container,.modal-leave-to .modal-container{transform:scale(1.1)}.content[data-v-69793e45]{max-height:0;overflow:hidden}.v-enter-active[data-v-7d48941b],.v-leave-active[data-v-7d48941b]{transition:opacity .5s ease}.v-enter-from[data-v-7d48941b],.v-leave-to[data-v-7d48941b]{opacity:0}.katex[data-v-24ff8b28]{font-size:1.3em}

package/dist/types/Answer.d.ts

@@ -0,0 +1,15 @@
+import { TypeAlert } from './Alert';
+interface ContentComponent {
+    type?: string;
+    data: {
+        [key: string]: any;
+    };
+}
+export interface Answer {
+    text: string;
+    feedback: string;
+    type: TypeAlert;
+    uid?: string;
+    component?: ContentComponent | null;
+}
+export {};

package/dist/types/MandateLevel.d.ts

@@ -0,0 +1,5 @@
+export interface MandateLevel {
+    color: string;
+    title: string;
+    value: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ep-lib-ts",
   "private": false,
-  "version": "0.1.8",
+  "version": "0.1.10",
   "files": [
     "dist",
     "src/components/"
@@ -34,7 +34,8 @@
     "postcss-cli": "^10.1.0",
     "vee-validate": "^4.8.6",
     "vue-router": "^4.1.6",
-    "vue3-apexcharts": "^1.4.4"
+    "vue3-apexcharts": "^1.4.4",
+    "vue": "^3.2.45"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.3",

package/src/components/basics/EpCard.vue

@@ -48,7 +48,7 @@ const borderColor = computed(() => {
 
 const bgColor = computed(() => {
     if(props.color && !props.outlined){
-        return `${useColors('bg', props.color)} text-white`
+        return `${useColors('bg', props.color)}`
     }
     return `bg-white text-black`
 })

package/src/components/basics/EpImg.vue

@@ -1,59 +1,89 @@
 <script setup lang="ts">
- import {toRefs, ref} from 'vue'
- import EpModal from '../interactions/EpModal.vue'
- import EpIcon from '../basics/EpIcon.vue'
- import { mdiArrowExpandAll } from '@mdi/js';
-
-interface Props{
-    src:string;
-    alt?:string;
-    height?:string | number;
-    width?:string | number;
-    thumbnail?:boolean;
-    caption?:string;
-    bib?:string;
-    title?:string,
-    gallery?:boolean
-    cols?:string|number  //posible type à venir => basis-1/12... basis-11/12 to basis-full
+import { toRefs, ref, computed } from 'vue'
+import EpModal from '../interactions/EpModal.vue'
+import EpIcon from '../basics/EpIcon.vue'
+import { mdiArrowExpandAll } from '@mdi/js';
+import { useRenderText } from "../../composables/useRenderText";
+const Cols = [
+   'basis-6/12',
+   'basis-1/12',
+   'basis-2/12',
+   'basis-3/12',
+   'basis-4/12',
+   'basis-5/12',
+   'basis-6/12',
+   'basis-7/12',
+   'basis-8/12',
+   'basis-9/12',
+   'basis-10/12',
+   'basis-11/12',
+   'basis-12/12',
+]
+
+interface Props {
+   src: string;
+   alt?: string;
+   height?: string | number;
+   width?: string | number;
+   thumbnail?: boolean;
+   caption?: string;
+   bib?: string;
+   title?: string,
+   gallery?: boolean
+   cols?: string | number  //posible type à venir => basis-1/12... basis-11/12 to basis-full
 }
 
-const props = withDefaults(defineProps<Props>(),{
-    alt:"Image snfas",
-    cols:"basis-4/12",
-    thumbnail:false,
+const props = withDefaults(defineProps<Props>(), {
+   alt: "Image snfas",
+   cols: "basis-6/12",
+   thumbnail: false,
+})
+
+const renderCols = computed(() => {
+   return Cols[+props.cols]
+})
+
+const renderBib = computed(()=>{
+   if(props.bib){
+      return useRenderText(props.bib)
+   }
+   return ""
 })
 
 const showModal = ref<boolean>(false)
 
-const {src, alt, title, caption, thumbnail, bib, cols} = toRefs(props)
+const { src, alt, title, caption, thumbnail, bib } = toRefs(props)
 
 </script>
 
 <template>
    <div v-if="!thumbnail" class="flex">
-    <div :class="`mx-auto bg-white rounded-md overflow-hidden shadow-md ${cols}`">
-       <img class="object-cover object-center w-full" :src="src" :alt="alt" @click="showModal = true">
-         <div class="px-4 py-2">
-            <h2 class="text-2xl font-bold">{{title}}</h2>
-            <p class="text-gray-500 text-sm">{{caption}}</p>
-            <p class="text-gray-700 mt-4">{{bib}}</p>
+      <div :class="`mx-auto bg-white rounded-md overflow-hidden shadow-md ${renderCols}`">
+         <img class="object-cover object-center w-full" :src="src" :alt="alt" @click="showModal = true">
+         <div class="px-4 py-2" v-if="title || caption || bib">
+            <h2 class="text-2xl font-bold">{{ title }}</h2>
+            <p class="text-gray-500 text-sm mt-4">{{ caption }}</p>
+            <div class="text-gray-700 mt-4" v-html="renderBib"></div>
+         </div>
+      </div>
+   </div>
+   <div v-if="thumbnail" class="relative group inline-block m-2">
+      <img class="w-36 h-36 object-cover object-center group-hover:opacity-30 " :src="src" :alt="alt">
+      <div
+         class="absolute top-0 left-0 w-36 h-36 bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-30 cursor-pointer"
+         @click="showModal = true">
+         <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center">
+            <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
          </div>
-    </div>
-   </div> 
-    <div v-if="thumbnail" class="relative group inline-block m-2">
-      <img class="w-36 h-36 object-cover object-center group-hover:opacity-50 " :src="src" :alt="alt" >
-      <div class="absolute top-0 left-0 w-36 h-36 bg-black opacity-0 transition-opacity duration-300 group-hover:opacity-50 cursor-pointer" @click="showModal = true">
-        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-center">
-           <EpIcon :icon-path="mdiArrowExpandAll"></EpIcon>
-        </div>
       </div>
-  </div>
+   </div>
    <EpModal v-model="showModal">
       <img class="object-cover object-center h-5/6 w-5/6 mx-auto" :src="src" :alt="alt">
-       <div class="px-4 py-2">
-         <h2 class="text-2xl font-bold">{{title}}</h2>
-         <p class="text-gray-500 text-sm">{{caption}}</p>
-      </div>
+       <div class="px-4 py-2" v-if="thumbnail">
+         <h2 class="text-2xl font-bold">{{ title }}</h2>
+         <p class="text-gray-500 text-sm mt-4">{{ caption }}</p>
+         <div class="text-gray-700 mt-4" v-html="renderBib"></div>
+      </div> 
    </EpModal>
 </template>
 

package/src/components/basics/EpSpinner.vue

@@ -4,44 +4,54 @@ import useColors from '../../composables/useColors';
 interface Props {
    color?: string;
    dots?: boolean;
-   size?:number
+   size?: number
+   inline?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
    color: 'primary',
    dots: false,
-   size:46
+   size: 46,
+   inline:false
 })
 
 const currentColor = computed(() => {
    return useColors('fill', props.color)
 })
 
+const styles = computed(()=>{
+   return props.inline?'':'flex flex-row w-full h-screen items-center justify-center'
+})
+
 </script>
 
 <template>
-   <svg v-if="!dots" xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" class="inline" viewBox="0 0 32 32" >
-      <path :class="currentColor" fill="currentColor"
-         d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"></path>
-      <path :class="currentColor" fill="currentColor"
-         d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
-         <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
-            values="0 12 12;360 12 12">
-         </animateTransform>
-      </path>
-   </svg>
-   <svg v-else xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" class="inline" viewBox="0 0 32 32" >
-   <g>
-      <circle cx="12" cy="2.5" r="1.5" :class="currentColor" fill="currentColor" opacity=".14" />
-      <circle cx="16.75" cy="3.77" r="1.5" :class="currentColor" fill="currentColor" opacity=".29" />
-      <circle cx="20.23" cy="7.25" r="1.5" :class="currentColor" fill="currentColor" opacity=".43" />
-      <circle cx="21.5" cy="12" r="1.5" :class="currentColor" fill="currentColor" opacity=".57" />
-      <circle cx="20.23" cy="16.75" r="1.5" :class="currentColor" fill="currentColor" opacity=".71" />
-      <circle cx="16.75" cy="20.23" r="1.5" :class="currentColor" fill="currentColor" opacity=".86" />
-      <circle cx="12" cy="21.5" r="1.5" :class="currentColor" fill="currentColor" />
-      <animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate"
-         values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
-   </g>
-</svg></template>
+   <div :class="styles">
+      <svg v-if="!dots" xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" class="inline" viewBox="0 0 32 32">
+         <path :class="currentColor" fill="currentColor"
+            d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"></path>
+         <path :class="currentColor" fill="currentColor"
+            d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
+            <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
+               values="0 12 12;360 12 12">
+            </animateTransform>
+         </path>
+      </svg>
+      <svg v-else xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" class="inline" viewBox="0 0 32 32">
+         <g>
+            <circle cx="12" cy="2.5" r="1.5" :class="currentColor" fill="currentColor" opacity=".14" />
+            <circle cx="16.75" cy="3.77" r="1.5" :class="currentColor" fill="currentColor" opacity=".29" />
+            <circle cx="20.23" cy="7.25" r="1.5" :class="currentColor" fill="currentColor" opacity=".43" />
+            <circle cx="21.5" cy="12" r="1.5" :class="currentColor" fill="currentColor" opacity=".57" />
+            <circle cx="20.23" cy="16.75" r="1.5" :class="currentColor" fill="currentColor" opacity=".71" />
+            <circle cx="16.75" cy="20.23" r="1.5" :class="currentColor" fill="currentColor" opacity=".86" />
+            <circle cx="12" cy="21.5" r="1.5" :class="currentColor" fill="currentColor" />
+            <animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite"
+               type="rotate"
+               values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
+         </g>
+      </svg>
+   </div>
+</template>
   
  

package/src/components/basics/EpText.vue

@@ -1,16 +1,27 @@
 <script setup lang="ts">
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, toRefs } from 'vue';
 import { isHtml } from '../../composables/isHtml';
 import {useMarkdown} from '../../composables/useMarkdown'
 import EpTerm from '../medias/EpTerm.vue'
+import EpAccordeon from '../interactions/EpAccordeon.vue';
+
 interface Props {
    glossary?:any[];
    content:string;
-   title?:string;
+   title?:string|null;
    compact?:boolean;
 }
 
-const props = withDefaults(defineProps<Props>(),{})
+const props = withDefaults(defineProps<Props>(),{
+  compact:false
+})
+
+const renderTitle = computed(()=>{
+  if(!props.title){
+    return "En savoir plus"
+  }
+  return props.title
+})
 
 const renderText = computed(()=>{
      if(!isHtml(props.content)){
@@ -75,11 +86,14 @@ const customRenderStringComponents = defineComponent({
      template:renderText.value
 })
 
-//const {content} = toRefs(props)
+const {compact} = toRefs(props)
 
 </script>
 
 <template>
-  <component :is="customRenderStringComponents"></component>
+  <component v-if="!compact" :is="customRenderStringComponents"></component>
+  <EpAccordeon outlined :title="renderTitle" v-else>
+    <component :is="customRenderStringComponents"></component>
+  </EpAccordeon>
    <!-- <component v-else :is="renderText"></component> -->
 </template>

package/src/components/educationals/EpEdu.vue

@@ -2,6 +2,7 @@
 import { toRefs, computed, useSlots } from "vue";
 //types with capital letter, object styles in lowercase
 import { MediaVariants, mediaVariants } from "../../types/Medias";
+import { MandateLevel } from "../../types/MandateLevel";
 import EpIcon from "../basics/EpIcon.vue";
 import EpDivider from "../basics/EpDivider.vue";
 import EpChip from "../basics/EpChip.vue";
@@ -13,7 +14,7 @@ interface Props {
   title?: string | null;
   subtitle?: string | null;
   icon?: string;
-  mandateLevel?:string|null;
+  mandateLevel?:string | MandateLevel | null;
   synchrone?: boolean;
   type?: MediaVariants;
   intentions?: string;
@@ -56,11 +57,18 @@ const bottomBarStyle = computed(() => {
 
 const containerStyle = computed(()=>{
   if(hasActions.value || hasIntentions.value || props.title){
-    return `rounded-lg overflow-hidden ${props.flat?'':'shadow-md'} flex flex-col justify-between`
+    return `rounded-lg overflow-hidden ${props.flat?'':'shadow-md'} flex flex-col justify-between h-full`
   }
   return `flex flex-col justify-between`
 })
 
+const renderMandateLevel = computed(()=>{
+  if(typeof props.mandateLevel === "object"){
+     return props.mandateLevel?.title
+  }
+  return props.mandateLevel
+})
+
 // type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
 
 const { title, hideIcon } = toRefs(props);
@@ -71,7 +79,7 @@ const { title, hideIcon } = toRefs(props);
     <div :class="`${topBarStyle}`" v-if="title || mandateLevel">
       <!-- <EpIcon :size="24" :icon-path="mdiBookOpenVariant"></EpIcon> -->
       <h3><EpIcon v-if="!hideIcon" :iconPath="renderIcon" size="24"></EpIcon> <span class="font-bold align-middle">{{ title }}</span></h3>
-      <EpScope v-if="mandateLevel" :title="mandateLevel"></EpScope>
+      <EpScope v-if="mandateLevel" :title="renderMandateLevel"></EpScope>
     </div>
     <div class="px-5">
       <div class="py-2" v-if="hasIntentions">

package/src/components/educationals/EpReading.vue

@@ -5,6 +5,7 @@ import EpBtn from "../basics/EpBtn.vue";
 import DisplayBox from "../tools/DisplayBox.vue";
 import EpEdu from "./EpEdu.vue";
 import { MediaVariants } from "../../types/Medias";
+import { MandateLevel } from '../../types/MandateLevel';
 import { useRenderText } from "../../composables/useRenderText";
 import { mdiBookmarkBox } from "@mdi/js";
 import { mdiBookOpenVariant } from "@mdi/js";
@@ -19,8 +20,8 @@ interface Props {
   title: string | null;
   container?: string; /// is publication complete
   editor?: string;
-  pages?: string;
-  mandateLevel?: string;
+  pages?: string|string[];
+  mandateLevel?: string | MandateLevel | null;
   intentions?: string;
   compact?: boolean;
   more?: boolean;
@@ -50,9 +51,10 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const old_image = "https://live.staticflickr.com/4868/45940268562_c5f7fdd06b_q.jpg";
+const bad_image = "https://farm5.staticflickr.com/4868/45940268562_9452f09a61_o.png"
 
 const hasCover = computed(() => {
-  if (props.cover === old_image || props.cover.trim().length === 0) {
+  if (props.cover === old_image || props.cover.trim().length === 0 || props.cover === bad_image) {
     return false;
   }
   return true;
@@ -77,7 +79,8 @@ const {
   editor,
   pages,
   type,
-  mandateLevel
+  mandateLevel,
+  url
 } = toRefs(props);
 </script>
 
@@ -86,7 +89,7 @@ const {
     <template v-if="!hideCover">
       <div
         v-if="hasCover"
-        class="bg-primary h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-gray-300"
+        class="h-96 w-full rounded-t-lg md:h-auto md:w-56 md:rounded-none md:rounded-l-lg flex justify-center items-center text-gray-300"
       >
         <img :src="cover" :alt="`image de la lecture ${title}`" />
       </div>
@@ -133,7 +136,7 @@ const {
           </div>
         </template>
         <template #actions>
-          <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type">LIRE</EpBtn>
+          <EpBtn :color="type=='base'?'text-gray-700':'text-white'" :type="type" :href="url" v-if="url">LIRE</EpBtn>
         </template>
       </EpEdu>
     </div>
@@ -223,7 +226,7 @@ const {
           </div>
 
           <div class="border-l p-5">
-            <EpBtn text>
+            <EpBtn text :href="url" v-if="url">
               <EpIcon :size="20" :icon-path="mdiOpenInNew"></EpIcon> Lire
             </EpBtn>
           </div>

package/src/components/educationals/EpResource.vue

@@ -1,8 +1,71 @@
 <script setup lang="ts">
+import { defineAsyncComponent, computed, toRefs } from 'vue';
+import { MandateLevel } from '../../types/MandateLevel';
+import { useComponent } from '../../composables/useComponent';
+import { MediaVariants } from "../../types/Medias";
+interface Props {
+   pages?:string;
+   resource:any;
+   mandateLevel?: string | MandateLevel | null;
+   type?:MediaVariants
+}
+
+const props = withDefaults(defineProps<Props>(), {
+   type:'base'
+})
+
+const resourceInfo = computed(()=>{
+   if(!props.resource.hasOwnProperty('content')){
+      return "EpNothing"
+   }
+   //console.log(props.resource)
+   const typeRess = Object.keys(props.resource.content)[0]
+   const ress = Object.assign({}, props.resource.content[typeRess])
+   ress.pages = props.pages
+   ress.type = typeRess
+   if(typeRess === "clip"){
+      ress.src = ress.url
+   }
+   if(typeRess === "website"){
+      ress.href = ress.url
+      ress.label = ress.title
+      ress.title = null
+   }
+   if(typeRess === "book" && props.pages){
+      ress.intentions = props.pages
+      ress.pages = null
+   }
+   if(ress.version_link){
+      ress.url = ress.version_link.url
+   }
+   
+   return ress
+})
+
+
+//get Component asyncComponent
+const getCompontent = (name:string|undefined)=> {
+  const componentToLoad = useComponent(name)
+  //console.log(componentToLoad)
+  if(componentToLoad.name === "EpNothing"){
+    return defineAsyncComponent(()=>import('../signages/EpNothing.vue'))
+  }
+  if(componentToLoad.name === "EpReading"){
+   return defineAsyncComponent(()=>import(`./EpReading.vue`))
+  }
+  return defineAsyncComponent(()=>import(`../${componentToLoad.path}/${componentToLoad.name}.vue`))
+}
+
+const {mandateLevel, type, pages} = toRefs(props)
+
 </script>
 
 <template>
-   <div class="p-12 bg-warning-light w-[50%] mx-auto border-2 border-warning">
-        <p class="text-center text-error font-bold uppercase">In progress</p>
-   </div>
+    <component 
+       :is="getCompontent(resourceInfo.type)" 
+       v-bind="{ ...resourceInfo }"
+       :mandateLevel="mandateLevel"
+       :intentions="pages"
+       :type="type"
+       ></component> 
 </template>

package/src/components/educationals/EpScope.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { toRefs } from "vue";
+import { ref, toRefs, computed } from "vue";
 //types with capital letter, object styles in lowercase
 import EpChip from "../basics/EpChip.vue";
+import { ChipBgVariant } from "../../types/Chip";
 
 interface Props {
   title?: string;
+  type?:string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -12,7 +14,17 @@ const props = withDefaults(defineProps<Props>(), {
   type: "base",
 });
 
+let renderMandate = ref<ChipBgVariant>('base')
 
+const typeMandate = computed(()=>{
+  if(props.title.trim() === "Essentiel"){
+    return renderMandate.value = 'warning'
+  }
+  if(props.title.trim() === "Enrichissement"){
+    return renderMandate.value = 'info'
+  }
+  return renderMandate.value
+})
 
 //controls
 //const controls = useMediaControls(video, {src:props.src})
@@ -21,5 +33,5 @@ const { title } = toRefs(props);
 </script>
 
 <template>
-    <EpChip size="small" type="base">{{ title }}</EpChip>
+    <EpChip size="small" :type="typeMandate">{{ title.trim() }}</EpChip>
 </template>

package/src/components/forms/EpRadio.vue

@@ -54,6 +54,7 @@ const onChange = (event:Event) => {
   <span>
   
     <input
+      class="cursor-pointer"
       type="radio"
       :id="labelFor"
       :name="labelFor"
@@ -64,7 +65,7 @@ const onChange = (event:Event) => {
       :checked="isChecked"
       @change="onChange"
     />
-    <label :for="labelFor" class="disabled:opacity-40">{{
+    <label :for="labelFor" class="disabled:opacity-40 cursor-pointer">{{
       label
     }}</label>