@erst-vg/vg-design-wrapper 1.0.12 → 2.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@erst-vg/vg-design-wrapper",
   "private": false,
-  "version": "1.0.12",
+  "version": "2.0.1",
   "type": "module",
   "repository": {
     "type": "git",
@@ -27,7 +27,8 @@
       "types": "./dist/src/index.d.ts",
       "import": "./dist/vg-design-wrapper.js",
       "require": "./dist/vg-design-wrapper.umd.cjs"
-    }
+    },
+    "./styles/utility": "./src/styles/utility.scss"
   },
   "scripts": {
     "dev": "vite",
@@ -37,51 +38,47 @@
     "clean": "rm -rf ./src/styles/vg ./src/assets && mkdir -p src/assets/icons/ src/styles/vg",
     "clean-windows": "rmdir src\\styles\\vg src\\assets /s && mkdir src\\assets\\icons src\\styles\\vg",
     "prepack-windows": "npm run clean-windows && xcopy ..\\content-web\\src\\main\\vue\\src\\styles\\external\\** .\\src\\styles\\vg /e && xcopy  ..\\content-web\\src\\main\\vue\\src\\assets\\icons\\*.svg .\\src\\assets\\icons /e",
-    "lint": "cross-env ESLINT_USE_FLAT_CONFIG=false eslint \"**/*.{ts,js,vue}\" --fix --format=pretty",
+    "lint": "cross-env eslint \"**/*.{ts,js,vue}\" --fix --format=pretty",
     "prettierfix": "prettier --write \"**/*.{vue,ts}\" ",
     "prettiercheck": "prettier --check \"**/*.{vue,ts}\" "
   },
   "dependencies": {
-    "@types/node": "^22.5.3",
+    "axios": "1.12.2",
     "dkfds": "npm:@erst-vg/dkfds-vite@8.0.1",
     "lodash": "4.17.21",
-    "sass": "1.78.0",
-    "vue": "^3.3.0",
-    "vue-inline-svg": "3.1.2"
+    "sass": "1.93.2",
+    "vue": "3.5.22",
+    "vue-inline-svg": "4.0.1"
   },
   "peerDependencies": {
-    "vue": "^3.3.0"
+    "vue": "3.5.22"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "2.6.2",
-    "@types/lodash": "^4.17.7",
-    "@typescript-eslint/eslint-plugin": "8.1.0",
-    "@vitejs/plugin-vue": "5.1.2",
-    "@vitest/coverage-v8": "2.0.5",
+    "@types/lodash": "4.17.7",
+    "@types/node": "24.9.2",
+    "@typescript-eslint/eslint-plugin": "8.45.0",
+    "@vitejs/plugin-vue": "5.2.3",
+    "@vitest/coverage-v8": "3.2.4",
+    "@vue/test-utils": "2.4.6",
     "cross-env": "7.0.3",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "8.0.0",
-    "eslint-formatter-pretty": "^5.0.0",
-    "eslint-import-resolver-typescript": "3.6.1",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-vue": "9.27.0",
-    "husky": "4.3.8",
-    "jsdom": "^25.0.0",
-    "lint-staged": "10.5.4",
-    "path": "^0.12.7",
-    "prettier": "2.7.1",
-    "typescript": "5.5.4",
-    "vite": "5.4.0",
+    "eslint": "9.37.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-formatter-pretty": "7.0.0",
+    "eslint-import-resolver-typescript": "4.4.4",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-vue": "10.5.0",
+    "husky": "9.1.7",
+    "jsdom": "25.0.1",
+    "lint-staged": "16.2.3",
+    "path": "0.12.7",
+    "prettier": "3.6.2",
+    "typescript": "5.9.3",
+    "vite": "5.4.20",
     "vite-plugin-css-injected-by-js": "3.5.1",
     "vite-plugin-dts": "4.1.0",
-    "vitest": "2.0.5",
-    "vue-tsc": "2.0.29",
-    "@vue/test-utils": "2.4.0"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged --allow-empty"
-    }
+    "vitest": "3.2.4",
+    "vue-tsc": "2.0.29"
   },
   "lint-staged": {
     "*.{ts,vue}": [

package/src/assets/icons/agenda.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="m19.675 20.375.7-.7L18.5 17.8V15h-1v3.2l2.175 2.175zM5 21c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 19V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 5 3h14c.55 0 1.02.196 1.413.587C20.803 3.98 21 4.45 21 5v6.7a8.184 8.184 0 0 0-.975-.387A6.104 6.104 0 0 0 19 11.075V5H5v14h6.05c.05.367.13.717.237 1.05.109.333.238.65.388.95H5zm0-3v1V5v6.075V11v7zm2-1h4.075c.05-.35.13-.692.238-1.025.108-.333.229-.658.362-.975H7v2zm0-4h6.1c.533-.5 1.13-.917 1.787-1.25A7.043 7.043 0 0 1 17 11.075V11H7v2zm0-4h10V7H7v2zm11 14c-1.383 0-2.563-.488-3.537-1.462C13.488 20.562 13 19.383 13 18s.488-2.563 1.463-3.537C15.438 13.488 16.617 13 18 13s2.563.488 3.538 1.463C22.512 15.438 23 16.617 23 18s-.488 2.563-1.462 3.538C20.562 22.512 19.383 23 18 23z" fill="currentColor"/>
+</svg>

package/src/assets/icons/breadcrumbArrow.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12l-4.58 4.59z" fill="#currentColor"/>
+    <path d="M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12l-4.58 4.59z" fill="currentColor"/>
 </svg>

package/src/components/VgAccordion.vue

@@ -15,7 +15,7 @@
       <li v-for="(data, index) in accordions" :key="index" data-testid="accordion" data-cy="accordion">
         <div class="top-wrapper">
           <slot name="before" :data="data" :index="index" />
-          <component :is="heading">
+          <component :is="heading" class="my-0">
             <button
               type="button"
               class="accordion-button"
@@ -93,5 +93,5 @@ const toggle = (event: Event, index: number) => {
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/custom/_vgAccordion.scss';
+@use '@/styles/custom/_vgAccordion.scss';
 </style>

package/src/components/VgCard.vue

@@ -92,5 +92,5 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/custom/_vgCard.scss';
+@use '@/styles/custom/_vgCard.scss';
 </style>

package/src/components/VgDesignWrapper.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="applikation-container" data-testid="applikation-container">
     <div v-if="customSvgIcons.length > 0" class="hide-base-svg">
+      <!-- eslint-disable-next-line vue/no-v-html -->
       <svg xmlns="http://www.w3.org/2000/svg" v-html="customSvgIcons"></svg>
     </div>
     <slot />
@@ -35,14 +36,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-@import '@/styles/vg/_vg-colors.scss';
-.applikation-container {
-  // Importer de forskellige komponenter, så leverandør af 3parts applikation ikke selv skal gøre det.
-  @import '@/styles/vg/mixins/_vg-mediaquery-helpers.scss';
-  @import '@/styles/vg/pagination/_vg-pagination.scss';
-  @import '@/styles/vg/accordion/_vg-accordion.scss';
-  @import '@/styles/vg/buttons/_vg-buttons.scss';
-  @import '@/styles/vg/card/_vg-cardText.scss';
-  @import '@/styles/vg/card/_vg-udvidedecardgrupper.scss';
-}
+// Importer de forskellige komponenter, så leverandør af 3parts applikation ikke selv skal gøre det.
+@use '@/styles/vg/pagination/_vg-pagination.scss';
+@use '@/styles/vg/accordion/_vg-accordion.scss';
+@use '@/styles/vg/buttons/_vg-buttons.scss';
+@use '@/styles/vg/card/_vg-cardText.scss';
+@use '@/styles/vg/card/_vg-udvidedecardgrupper.scss';
 </style>

package/src/components/VgIcon.vue

@@ -50,5 +50,5 @@ const iconSrc = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/custom/_vgIcon.scss';
+@use '@/styles/custom/_vgIcon.scss';
 </style>

package/src/components/VgKalturaVideo.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <iframe
+      v-if="playVideo && videoUrl"
+      :src="videoUrl"
+      :alt="alt"
+      class="video-frame"
+      title="Kaltura afspiller"
+      allow="autoplay"
+      allowfullscreen
+      webkitallowfullscreen
+      mozAllowFullScreen
+      data-testid="video-frame"
+    />
+    <slot name="preview" :thumbnail-url="thumbnailUrl" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    required: true
+  },
+  playVideo: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const videoUrl = computed(() => {
+  let link = props.src;
+  const autoPlay = 'flashvars[autoPlay]';
+  if (!link.includes(autoPlay)) {
+    link = addQuerystring(link, `${autoPlay}=true`);
+  }
+  return link;
+});
+
+const thumbnailUrl = computed<string>(() => {
+  let url = '';
+  const groups = props.src.match(/https:\/\/(.*)\/p\/(\d*)\/.*?.*entry_id=([a-zA-Z0-9_]+)(?=&|$)/); // NOSONAR
+  if (groups?.length === 4) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_, domain, partnerId, entryId] = groups;
+    url = `https://${domain}/p/${partnerId}/thumbnail/entry_id/${entryId}/width/800/quality/100`;
+  }
+  return url;
+});
+
+function addQuerystring(url: string, query: string): string {
+  const firstParamPrefix = '?';
+  const subsequentParamPrefix = '&';
+  if (query.indexOf(firstParamPrefix) === 0 || query.indexOf(subsequentParamPrefix) === 0) {
+    query = query.substring(1);
+  }
+  const qsPrefix = url.indexOf(firstParamPrefix) > 0 ? subsequentParamPrefix : firstParamPrefix;
+  return url + qsPrefix + query;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgVideoFrame.scss';
+</style>

package/src/components/VgListe.vue

@@ -69,5 +69,5 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/custom/_vgListe.scss';
+@use '@/styles/custom/_vgListe.scss';
 </style>

package/src/components/VgListeCard.vue

@@ -37,5 +37,5 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@import '@/styles/custom/_vgCard.scss';
+@use '@/styles/custom/_vgCard.scss';
 </style>

package/src/components/VgLoginButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button type="button" class="button mitid-button d-inline-flex align-items-center"><VgIcon icon="mitId" class="mr-4" />Log på med MitID</button>
+  <button type="button" class="button mitid-button d-inline-flex align-items-center"><VgIcon icon="mitId" class="mr-4" />Log ind med MitID</button>
 </template>
 
 <script setup lang="ts">

package/src/components/VgVideo.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="video">
+    <component :is="videoudbyder" :src="src" :alt="alt" :play-video="playVideo" class="video-player">
+      <template #preview="{ thumbnailUrl }">
+        <div v-if="!playVideo">
+          <button class="button-wrapper" aria-label="Afspil video" title="Afspil video" type="button" @click="playVideo = true">
+            <VgIcon icon="playVideo" />
+            <div class="video-frame" :style="thumbnailUrl && { 'background-image': 'url(' + thumbnailUrl + ')' }" />
+          </button>
+        </div>
+      </template>
+    </component>
+    <div class="cookie-banner">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-html="cookiebanner" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VgIcon from '@/components/VgIcon.vue';
+import VgKalturaVideo from '@/components/VgKalturaVideo.vue';
+import VgVideoToolVideo from '@/components/VgVideoToolVideo.vue';
+import VgVimeoVideo from '@/components/VgVimeoVideo.vue';
+import { computed, ref } from 'vue';
+
+const components = {
+  VgVimeoVideo,
+  VgVideoToolVideo,
+  VgKalturaVideo
+};
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    required: true
+  },
+  cookiebanner: {
+    type: String,
+    required: true
+  }
+});
+
+const playVideo = ref(false);
+
+const videoudbyder = computed(() => {
+  if (props.src.includes('vimeo')) {
+    return components.VgVimeoVideo;
+  } else if (props.src.includes('videotool')) {
+    return components.VgVideoToolVideo;
+  } else if (props.src.includes('kaltura')) {
+    return components.VgKalturaVideo;
+  }
+  return '';
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgVideo.scss';
+@use '@/styles/custom/_vgVideoFrame.scss';
+</style>

package/src/components/VgVideoToolVideo.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <iframe
+      v-if="playVideo"
+      class="video-frame"
+      title="Videotool player"
+      type="text/html"
+      :alt="alt"
+      :src="src"
+      webkitallowfullscreen
+      mozallowfullscreen
+      allowfullscreen
+      allow="autoplay; fullscreen"
+      data-testid="iframe"
+    ></iframe>
+    <slot name="preview" :thumbnail-url="thumbnailUrl" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import axios, { AxiosRequestConfig } from 'axios';
+import { onMounted, ref } from 'vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    required: true
+  },
+  playVideo: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const thumbnailUrl = ref<string>('');
+
+onMounted(async () => {
+  getThumbnailUrl(props.src).then(url => (thumbnailUrl.value = url));
+});
+
+async function getThumbnailUrl(pageUrl: string): Promise<string> {
+  let url = '';
+  const options: AxiosRequestConfig = {
+    method: 'GET',
+    headers: { 'content-type': 'text/html' },
+    url: pageUrl
+  };
+  try {
+    const xhr = await axios(options);
+    if (xhr) {
+      const groups = xhr.data?.match(/<meta property="og:image" content="https:(.*?)">/);
+      if (groups?.length > 0) {
+        url = groups[1];
+      }
+    }
+  } catch {
+    // eslint-disable-next-line no-console
+    console.log(`Error resolving thumbnail url from "${pageUrl}"`);
+  }
+  return url;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgVideoFrame.scss';
+</style>

package/src/components/VgVimeoVideo.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <iframe
+      v-if="playVideo && videoUrl"
+      class="video-frame"
+      title="Vimeo afspiller"
+      :alt="alt"
+      :src="videoUrl"
+      webkitallowfullscreen
+      mozallowfullscreen
+      allowfullscreen
+      allow="autoplay"
+    ></iframe>
+    <slot name="preview" :thumbnail-url="thumbnailUrl" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import axios, { AxiosPromise } from 'axios';
+import { onMounted, ref } from 'vue';
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    required: true
+  },
+  playVideo: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const videoUrl = ref('');
+const thumbnailUrl = ref('');
+const baseOembedVimeoUrl = 'https://vimeo.com/api/oembed.json';
+
+const getVimeoVideo = (link: string, params: { [key: string]: string } = {}): AxiosPromise => {
+  const urlParams = new URLSearchParams(params).toString();
+  const qs = urlParams ? `&${urlParams}` : '';
+  return axios.get(`${baseOembedVimeoUrl}?url=${encodeURIComponent(link)}${qs}`);
+};
+
+onMounted((): void => {
+  getVimeoVideo(props.src, { dnt: '1', autoplay: '1' }).then(response => {
+    const thumbnailUrlResponse: string = response.data.thumbnail_url;
+    if (thumbnailUrlResponse) {
+      // Fjerner angivelse af billedeopløsning, for at få billede i fuld størrelse. Linket slutter på fx -d_123x123
+      const index = thumbnailUrlResponse.indexOf('-d_');
+      thumbnailUrl.value = index !== -1 ? thumbnailUrlResponse.slice(0, index + 2) : thumbnailUrlResponse;
+    }
+    const { html } = response.data;
+    // extract the src attribute from the iframe
+    videoUrl.value = html.match(/src="(.*?)"/)![1];
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/custom/_vgVideoFrame.scss';
+</style>

package/src/styles/custom/_vgAccordion.scss

@@ -20,6 +20,7 @@
     h5,
     h6 {
       max-width: 100%;
+      font-family: var(--site-primary-font);
     }
   }
 }

package/src/styles/custom/_vgVideo.scss

@@ -0,0 +1,86 @@
+@use '@/styles/utility' as *;
+
+.video {
+  .video-player {
+    position: relative;
+    overflow: hidden;
+    padding-top: 56.25%;
+    width: 100%;
+    background-color: $color-very-dark-gray;
+
+    .button-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      border: none;
+      left: 0;
+
+      &:focus {
+        .icon-svg {
+          outline: 2px solid $color-black !important;
+          border-radius: 50%;
+        }
+      }
+
+      .icon-svg {
+        color: var(--site-primary);
+        width: 72px;
+        height: 72px;
+        position: relative;
+        z-index: 3;
+
+        @include media-breakpoint-down-em(sm) {
+          width: 1.5em;
+          height: 1.5em;
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        :deep(*) {
+          color: var(--site-primary);
+        }
+      }
+    }
+
+    .video-frame {
+      position: absolute;
+      background-size: cover;
+      background-repeat: no-repeat;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: $background-alternative;
+      cursor: pointer;
+      width: 100%;
+
+      &:before {
+        content: '';
+        position: absolute;
+        background-color: rgba($color-very-dark-blue, 0.25);
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+      }
+    }
+  }
+
+  .cookie-banner {
+    width: 100%;
+    font-size: 0.875em;
+    font-style: italic;
+    color: $color-grey-1;
+    padding-top: 16px;
+
+    :deep(a) {
+      color: $color-grey-1 !important;
+    }
+  }
+}

package/src/styles/custom/_vgVideoFrame.scss

@@ -0,0 +1,9 @@
+.video-frame {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/src/styles/utility.scss

@@ -0,0 +1,2 @@
+@forward './vg/vg-colors';
+@forward './vg/mixins/vg-mediaquery-helpers';

package/src/styles/vg/_vg-colors.scss

@@ -155,6 +155,9 @@ $color-darkbg-disabled: #758a9f;
 $color-mint-green: #eeffe2;
 $color-grey-1: #4f4f4f;
 
+// Masterbrand colors
+  $virksomhedsudvikling-danmark-color: #D2D0BB;
+
 /*  CSS variables used for site design which can be overridden on site level
     Remember to override in siteDesign.service.ts. Only variables added to
     /api/content/sites/, for component specific colors, should be added here. */

package/src/styles/vg/accordion/_vg-accordion.scss

@@ -1,6 +1,9 @@
+@use './../vg-colors' as *;
+@use './../mixins/vg-mediaquery-helpers' as *;
+
 .accordion-wrapper.ydelse {
   & > :last-child {
-    margin-bottom: 32px;
+    margin-bottom: 16px;
   }
 
   button.accordion-bulk-button {
@@ -109,3 +112,31 @@
     }
   }
 }
+
+.wide-accordion {
+  .accordion {
+    li {
+      margin-bottom: 0;
+      border-top: 1px solid $color-light-gray;
+
+      &:last-child {
+        border-bottom: 1px solid $color-light-gray;
+      }
+
+      .accordion-button {
+        padding: 16px 16px 16px 0;
+        background-color: transparent;
+      }
+
+      .accordion-content {
+        padding: 8px 16px 8px 0;
+      }
+    }
+  }
+
+  &.white-text {
+    button.accordion-bulk-button {
+      color: $color-white;
+    }
+  }
+}

package/src/styles/vg/buttons/_vg-buttons.scss

@@ -1,3 +1,6 @@
+@use './../vg-colors' as *;
+@use './../mixins/vg-mediaquery-helpers' as *;
+
 .button {
   font-size: 16px;
   font-weight: 400 !important;
@@ -20,7 +23,7 @@
 
   &:disabled,
   &.disabled {
-    opacity: 0.3;
+    opacity: 0.6 !important;
     cursor: not-allowed;
   }
 
@@ -234,11 +237,15 @@
 
   &:disabled {
     text-decoration: none;
-    opacity: 0.3;
+    opacity: 0.6;
     cursor: not-allowed;
   }
 }
 
+.no-decoration {
+  text-decoration: none !important;
+}
+
 .redaktion {
   button.lightbg {
     color: $color-black;

package/src/styles/vg/card/_vg-cardText.scss

@@ -1,3 +1,6 @@
+@use './../vg-colors' as *;
+@use './../mixins/vg-mediaquery-helpers' as *;
+
 .padding-between-children > div:not(:last-child) {
   margin-bottom: 8px;
 }