ep-lib-ts 0.0.8 → 0.1.0

package/src/components/basics/EpSection.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { toRefs } from "vue";
+// import EpCard from "../basics/EpCard.vue";
+// import EpDivider from "../basics/EpDivider.vue";
+// import EpIcon from "../basics/EpIcon.vue";
+
+// import EpChip from "../basics/EpChip.vue";
+// import useColors from "../../composables/useColors";
+// import { mdiHome } from "@mdi/js";
+// import { mdiCast } from "@mdi/js";
+// import { mdiTimerOutline } from "@mdi/js";
+// import { mdiChairSchool } from "@mdi/js";
+
+interface Props {
+  title?: string | null;
+  subtitle?: string | null;
+  prependIcon?: string | null;
+  iconSize?: string | number;
+  color?: string | null;
+  taxonomyLevel?: string | null;
+  courseCode?: string | null;
+  courseTitle?: string | null;
+  height?: string | null;
+  src?: string | null;
+  synchrone?: boolean;
+}
+
+// type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
+
+const props = withDefaults(defineProps<Props>(), {
+  title: null,
+  icon: null,
+  color: null,
+});
+
+const { title, icon, color, src } = toRefs(props);
+</script>
+
+<template>
+  <!-- <EpChip color="secondary" :prependIcon="mdiChairSchool">Formatif</EpChip> -->
+
+  <section class="EpSection">
+    <div class="relative items-center w-full">
+      <div class="w-full mx-auto text-left">
+        <div class="relative flex-col items-center m-auto align-middle">
+          <div class="gap-12 text-left lg:gap-24">
+            <div class="order-first block w-full mt-12 lg:mt-0">
+              <img class="object-cover object-center w-full mx-auto bg-gray-300 border lg:ml-auto" alt="hero" :src="src"
+                v-if="src" />
+            </div>
+            <div class="flex flex-col space-y-20 lg:mt-0">
+              <div class="border-b">
+                <div>
+                  <p class="text-2xl font-medium tracking-tight text-black sm:text-4xl">
+                    {{ title }}
+                  </p>
+                  <p class="">
+                    {{ subtitle }}
+                  </p>
+                </div>
+              </div>
+              <div class="lg:max-w-7xl">
+                <slot></slot>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- <section class="h-screen flex flex-col justify-end">
+    <div
+      class="w-full h-full bg-cover bg-center"
+      :style="{ backgroundImage: 'url(' + src + ')' }"
+    >
+      <div class="flex flex-col max-w-1/2 absolute bottom-0 bg-neutral-50 opacity-95 left-0 p-6">
+        <div class="flex flex-row">
+          <EpIcon
+            v-if="prependIcon"
+            :iconPath="prependIcon"
+            :size="iconSize"
+            extraClass="mr-2"
+          ></EpIcon>
+          <h2 class="text-4xl font-bold ml-2">{{ title }}</h2>
+        </div>
+          <p class="text-base tracking-tight">{{ subtitle }}</p>
+		  <slot></slot>
+      </div>
+      <div class="flex justify-end absolute bottom-0 right-0 p-2">
+        <div class="bg-white text-gray-700 rounded-full py-1 px-2">
+          <span>chip</span>
+        </div>
+      </div>
+    </div>
+  </section> -->
+
+  <!-- <section class="h-screen flex flex-col">
+    <div
+      class="w-full h-full bg-cover bg-center justify-end"
+      :style="{ backgroundImage: 'url(' + src + ')' }"
+    >
+      <div class="flex flex-col container justify-end" >
+        <div class="flex flex-row">
+          <EpIcon
+            v-if="prependIcon"
+            :iconPath="prependIcon"
+            :size="iconSize"
+            extraClass="mr-2"
+          ></EpIcon>
+          <h2 class="text-4xl font-bold ml-2">{{ title }}</h2>
+        </div>
+        <p class="text-base tracking-tight">{{ subtitle }}</p>
+      </div>
+      <div class="flex justify-end p-2">
+        <div class="bg-white text-gray-700 rounded-full py-1 px-2">
+          <span>bla</span>
+        </div>
+      </div>
+    </div>
+  </section> -->
+  <!-- <section>
+    <div
+      class="flex flex-col justify-center flex-1 px-8 py-8 lg:py-36 md:px-12 lg:flex-none lg:px-24"
+    >
+      <div>
+        <div class="items-center gap-12">
+          <div class="">
+            <div>
+              <p class="text-5xl tracking-tighter text-black">
+                Titre
+              </p>
+            </div>
+            <div
+              class="flex items-center justify-center w-full pt-8 mx-auto md:pt-6"
+            >
+			<slot></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section> -->
+
+  <!-- model 1 -->
+  <!-- <section class="object-top overflow-hidden bg-gray-100 bg-cover">
+    <div>
+      <div class="px-4 py-12 sm:px-6 lg:py-16 lg:px-8">
+        <div class="px-6 py-6 bg-white rounded-3xl md:py-12 md:px-12 lg:px-16">
+          <div class="">
+            <p class="text-5xl tracking-tighter text-black">
+              I am a short heading, not so short
+            </p>
+            <p class="max-w-3xl mt-3 text-lg leading-6 text-gray-500">
+              Sign up for our newsletter to stay up to date.
+            </p>
+          </div>
+		  <slot></slot> 
+        </div>
+      </div>
+    </div>
+  </section> -->
+
+  <!-- model 2 -->
+  <!-- <div class="flex min-h-screen bg-white">
+    <div
+      class="flex flex-col justify-center flex-1 px-4 py-8 sm:px-6 lg:flex-none lg:px-24"
+    >
+      <div class="w-full mx-auto lg:max-w-6xl">
+        <div class="max-w-xl lg:p-10">
+          <div>
+            <p
+              class="text-2xl font-medium tracking-tight text-black sm:text-4xl"
+            >
+              I am a short heading
+            </p>
+            <p class="max-w-xl mt-4 text-base tracking-tight text-gray-600">
+              Use this paragraph to share information about your company or
+              products. Make it engaging and interesting, and showcase your
+              brand's personality. Thanks for visiting our website!
+            </p>
+          </div>
+          <div class="flex gap-3 mt-10">
+            <a
+              class="inline-flex items-center justify-center w-full px-6 py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full hover:bg-transparent hover:border-black hover:text-black focus:outline-none lg:w-auto"
+              href="#"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                class="w-6 h-6"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z"
+                ></path>
+              </svg>
+              <span class="flex flex-col items-start ml-4 leading-none">
+                <span class="mb-1 text-xs">GET IT ON</span>
+                <span class="font-medium title-font">Google Play</span>
+              </span></a
+            ><a
+              class="inline-flex items-center justify-center w-full px-6 py-2.5 text-center text-white duration-200 bg-black border-2 border-black rounded-full hover:bg-transparent hover:border-black hover:text-black focus:outline-none lg:w-auto"
+              href="#"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                class="w-6 h-6"
+                viewBox="0 0 305 305"
+              >
+                <path
+                  d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z"
+                ></path>
+                <path
+                  d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z"
+                ></path>
+              </svg>
+              <span class="flex flex-col items-start ml-4 leading-none">
+                <span class="mb-1 text-xs">Download on the</span>
+                <span class="font-medium title-font">App Store</span>
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="relative flex-1 hidden w-0 lg:block">
+      <div>
+        <img
+          class="absolute inset-0 object-cover w-full h-full overflow-hidden bg-gray-200"
+          src="https://d33wubrfki0l68.cloudfront.net/41cf01e1154fd7ef6121a544cedd9ba7be6b63ba/e0ab4/images/placeholders/rectangle1.svg"
+          alt=""
+        />
+      </div>
+    </div>
+  </div> -->
+</template>

package/src/components/basics/EpSpinner.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import useColors from '../../composables/useColors';
+interface Props {
+   color?: string;
+   dots?: boolean;
+   size?:number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+   color: 'primary',
+   dots: false,
+   size:46
+})
+
+const currentColor = computed(() => {
+   return useColors('fill', props.color)
+})
+
+</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>
+  
+ 

package/src/components/basics/EpTable.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {toRefs} from 'vue'
+import EpCard from '../basics/EpCard.vue'
+interface Props {
+    arrayContent:string[][];
+    headers?:string[]|null;
+    title?:string;
+}
+
+const props = withDefaults(defineProps<Props>(),{
+    //defaults ? ...
+})
+
+const {headers, arrayContent, title} = toRefs(props)
+
+const styleTh ="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider";
+</script>
+<template>
+  <EpCard flat :title="title">
+    <table class="min-w-full divide-y divide-gray-200 shadow">
+      <thead class="bg-gray-50" v-if="headers">
+        <tr>
+          <th v-for="(title, i) in headers" :key="`th-${i}`" scope="col" :class="styleTh">{{title}}</th>
+        </tr>
+      </thead>
+      <tbody class="bg-white divide-y divide-gray-200">
+        <tr v-for="(tr, i) in arrayContent" :key="`tr-${i}`" class="hover:bg-gray-50">
+          <td v-for="(value, j) in tr" :key="`td-${i}-${j}`" class="px-6 py-4 whitespace-nowrap">{{value}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </EpCard>
+</template>

package/src/components/basics/EpText.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, defineComponent } from 'vue';
+import { isHtml } from '../../composables/isHtml';
+import {useMarkdown} from '../../composables/useMarkdown'
+import EpTerm from '../medias/EpTerm.vue'
+interface Props {
+   glossary?:any[];
+   content:string;
+   title?:string;
+   compact?:boolean;
+}
+
+const props = withDefaults(defineProps<Props>(),{})
+
+const renderText = computed(()=>{
+     if(!isHtml(props.content)){
+        return useMarkdown(props.content)
+     }
+     //return props.content
+      //create a div
+      const div = document.createElement('DIV')
+      ///add the html input to the div
+      div.innerHTML = props.content.trim()
+      ///get strign of html 
+      let newStr = div.outerHTML
+      //find all span.ep_glossary_item to know the glossary terms in the text
+      const glossaryTerms = div.querySelectorAll('.ep_glossary_item')
+      console.log(glossaryTerms)
+      //if find glossary terms
+      if(glossaryTerms.length > 0){
+        ///check every term and replace it         
+        glossaryTerms.forEach((item)=>{
+          //get id 
+          const id = item.getAttribute("data-id")
+          //get content text
+          const render_word = item.innerHTML
+          //find in the glossary their equivalent
+          let _glossary = []
+          if(props.glossary){
+            _glossary = props.glossary
+          }
+          const term = _glossary.find(word => word.id === id)
+          //if was found 
+          if(term){
+            ///add the new values to the array
+            const word = item.outerHTML
+            //check if the term has relations
+            const foundedRelations = _glossary.filter((x) =>
+                x.relation.some((item:string) => {
+                  return item == id;
+                })
+              );
+            //get relations id and term
+            const idsRelation = foundedRelations.map((x) => x.id);
+            const termsRelation = foundedRelations.map((x) => x.term);
+            const variation = term.variation
+            
+            //const replaceWord = `<EpBtn :pts-data="{term:'${term.term}', definition:'${term.definition}', renderword:'${render_word}', graminfo:'${term.graminfo}', domain:'${term.domain}',variation:'${variation}', relations_names:'${termsRelation}', relations_ids:'${idsRelation}'}"></EpBtn>`
+            const replaceWord = ` <EpTerm term="${term.term}" definition="${term.definition}" word="${render_word}" variations="${variation}" graminfo='${term.graminfo}' domain='${term.domain}' relations='${termsRelation}' idrelation="${idsRelation}"></EpTerm> `
+            //replace output string
+            newStr = newStr.replace(word, replaceWord)
+          }
+        })
+      }
+      div.innerHTML = newStr
+     // console.log(div.innerHTML)
+      return div.innerHTML;
+})
+
+
+const customRenderStringComponents = defineComponent({
+    components:{
+      'epterm':EpTerm
+    },
+     template:renderText.value
+})
+
+//const {content} = toRefs(props)
+
+</script>
+
+<template>
+  <component :is="customRenderStringComponents"></component>
+   <!-- <component v-else :is="renderText"></component> -->
+</template>

package/src/components/charts/EpBarChart.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, toRefs } from "vue";
+import VueApexCharts from "vue3-apexcharts";
+import EpEdu from "../educationals/EpEdu.vue";
+import { mdiChartBar } from "@mdi/js";
+import { MediaVariants } from "../../types/Medias";
+import { isHtml } from "../../composables/isHtml";
+import { useMarkdown } from "../../composables/useMarkdown";
+
+interface Serie {
+  name: string;
+  data: (string | number)[];
+}
+
+interface Options {
+  xaxis: {
+    categories: (number | string)[];
+    convertedCatToNumeric?: boolean;
+  }
+
+}
+
+interface Props {
+  series: Serie[];
+  options: Options;
+  id?: string;
+  center?: boolean;
+  title?: string;
+  intentions?: string;
+  hideIcon?: boolean;
+  type?: MediaVariants;
+  mandateLevel?: string | null;
+  source?:string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  center: false,
+});
+
+const renderText = computed(() => {
+  if (!props.intentions) {
+    return null;
+  }
+  if (!isHtml(props.intentions)) {
+    return useMarkdown(props.intentions);
+  }
+  return props.intentions;
+});
+
+const globalOptions = computed(() => {
+  return {
+    ...props.options,
+    dataLabels: {
+      enabled: false
+    }
+  }
+})
+
+const { center, series, source } = toRefs(props)
+
+</script>
+
+<template>
+  <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartBar" :mandateLevel="mandateLevel">
+    <template #intentions v-if="renderText">
+      <div v-html="renderText"></div>
+    </template>
+    <template #content>
+      <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="globalOptions && series">
+        <VueApexCharts width="500" type="bar" :options="globalOptions" :series="series"></VueApexCharts>
+      </div>
+      <div v-else>
+        <p>Data no disponible</p>
+      </div>
+    </template>
+    <template #actions v-if="source">
+        <p>{{source}}</p>
+     </template> 
+  </EpEdu>
+</template>
+
+

package/src/components/charts/EpLineChart.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, toRefs } from "vue";
+import VueApexCharts from "vue3-apexcharts";
+import EpEdu from "../educationals/EpEdu.vue";
+import { mdiChartLine } from "@mdi/js";
+import { MediaVariants } from "../../types/Medias";
+import { isHtml } from "../../composables/isHtml";
+import { useMarkdown } from "../../composables/useMarkdown";
+
+interface Serie {
+    name: string;
+    data: (string | number)[];
+}
+
+interface Options {
+    xaxis: {
+        categories: (number | string)[];
+        convertedCatToNumeric?: boolean;
+    }
+
+}
+
+interface Props {
+    series: Serie[];
+    options: Options;
+    id?: string;
+    center?: boolean;
+    title?: string;
+    intentions?: string;
+    hideIcon?: boolean;
+    type?: MediaVariants;
+    mandateLevel?: string | null;
+    source?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    center: false,
+});
+
+const renderText = computed(() => {
+    if (!props.intentions) {
+        return null;
+    }
+    if (!isHtml(props.intentions)) {
+        return useMarkdown(props.intentions);
+    }
+    return props.intentions;
+});
+
+const globalOptions = computed(() => {
+    return {
+        ...props.options,
+        dataLabels: {
+            enabled: false
+        },
+        stroke: {
+            curve: "straight"
+        },
+        chart: {
+            width: 550,
+            type: "line",
+            zoom: {
+                enabled: false,
+            },
+        },
+    }
+})
+
+const { center, series, source } = toRefs(props)
+
+</script>
+
+<template>
+    <EpEdu :title="title" :type="type" :hideIcon="hideIcon" :icon="mdiChartLine" :mandateLevel="mandateLevel">
+        <template #intentions v-if="renderText">
+            <div v-html="renderText"></div>
+        </template>
+        <template #content>
+            <div :class="`p-4 ${center ? 'flex justify-center' : ''}`" v-if="globalOptions && series">
+                <VueApexCharts width="500" type="line" :options="globalOptions" :series="series"></VueApexCharts>
+            </div>
+            <div v-else>
+                <p>Data no disponible</p>
+            </div>
+        </template>
+        <template #actions v-if="source">
+            <p>{{ source }}</p>
+        </template>
+    </EpEdu>
+</template>
+
+

package/src/components/charts/EpPieChart.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</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>
+</template>

package/src/components/educationals/EpEdu.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { toRefs, computed, useSlots } from "vue";
+//types with capital letter, object styles in lowercase
+import { MediaVariants, mediaVariants } from "../../types/Medias";
+import EpIcon from "../basics/EpIcon.vue";
+import EpDivider from "../basics/EpDivider.vue";
+import EpChip from "../basics/EpChip.vue";
+import EpScope from "./EpScope.vue";
+import { mdiLeadPencil } from "@mdi/js";
+
+
+interface Props {
+  title?: string | null;
+  subtitle?: string | null;
+  icon?: string;
+  mandateLevel?:string|null;
+  synchrone?: boolean;
+  type?: MediaVariants;
+  intentions?: string;
+  hideIcon?:boolean;
+  flat?:boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: null,
+  type: "base",
+  hideIcon:false,
+  flat:false,
+});
+
+//get slots
+const slots = useSlots();
+
+const hasIntentions = computed(() => {
+  return slots.intentions?true:false
+});
+
+const hasActions = computed(() => {
+  return slots.actions?true:false
+});
+
+const renderIcon = computed(()=> {
+   if(props.icon){
+    return props.icon
+   }
+   return mdiLeadPencil
+})
+
+const topBarStyle = computed(() => {
+  return `${mediaVariants[props.type]} text-left px-5 py-2 ${props.flat?'':'rounded-t-md'} flex justify-between items-center `;
+});
+
+const bottomBarStyle = computed(() => {
+  return `${mediaVariants[props.type]} text-right pr-5`;
+});
+
+const containerStyle = computed(()=>{
+  if(hasActions.value || hasIntentions.value || props.title){
+    return `rounded-lg overflow-hidden ${props.flat?'':'shadow-md'} flex flex-col justify-between h-full`
+  }
+  return `flex flex-col justify-between h-full`
+})
+
+// type, taxonomyLevel, courseCode, courseTitle, title, subtitle, height, src, color, synchrone
+
+const { title, hideIcon } = toRefs(props);
+</script>
+
+<template>
+  <div :class="containerStyle">
+    <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>
+    </div>
+    <div class="px-5">
+      <div class="py-2 grow" v-if="hasIntentions">
+        <!-- <EpIcon :size="24" :icon-path="mdiInformationOutline"></EpIcon> -->
+        <h4 class="font-semibold mb-2 text-sm uppercase tracking-wide text-gray-500">
+          [Intentions]
+        </h4>
+        <slot name="intentions"></slot>
+        <EpDivider/>
+      </div>
+      <div class="grow">
+        <slot name="content"></slot>
+      </div>
+    </div>
+    <div :class="bottomBarStyle" v-if="hasActions">
+       <slot name="actions"></slot>
+    </div>
+  </div>
+</template>