@energie360/ui-library 0.1.18 → 0.1.20

package/base/_input-resets.scss

@@ -47,6 +47,9 @@ textarea {
 }
 
 input[type='number'] {
+  // stylelint-disable
+  -moz-appearance: textfield;
+
   &::-webkit-inner-spin-button,
   &::-webkit-outer-spin-button {
     appearance: none;

package/components/card-highlight/card-highlight.scss

@@ -1,5 +1,16 @@
 @use '../../base/abstracts' as a;
 
+.card-highlight-container {
+  container: card-highlight / inline-size;
+  height: 100%;
+
+  @container card-highlight (width >= 900px) {
+    .card-highlight__image-col {
+      padding-right: var(--e-space-20);
+    }
+  }
+}
+
 .card-highlight {
   position: relative;
   display: flex;
@@ -53,6 +64,12 @@
   flex: 1 1 auto;
   max-width: 60%;
   align-self: center;
+  display: flex;
+  justify-content: flex-end;
+
+  img {
+    max-height: a.rem(225);
+  }
 
   @include a.bp(m) {
     max-width: none;

package/components/card-highlight/u-card-highlight.vue

@@ -5,7 +5,7 @@ import { UIcon } from '../../elements'
 interface Props {
   title?: string
   text?: string
-  image: Image
+  image?: Image
   badgeIcon?: string
 }
 
@@ -13,29 +13,42 @@ defineProps<Props>()
 </script>
 
 <template>
-  <div class="card-highlight">
-    <div class="card-highlight__content-col">
-      <h3 v-if="$slots.title || title" class="card-highlight__title">
-        <slot name="title">{{ title }}</slot>
-      </h3>
-
-      <div v-if="$slots.text || text" class="card-highlight__text">
-        <slot name="text">
-          <div v-html="text"></div>
-        </slot>
+  <div class="card-highlight-container">
+    <div class="card-highlight">
+      <div class="card-highlight__content-col">
+        <h3 v-if="$slots.title || title" class="card-highlight__title">
+          <slot name="title">{{ title }}</slot>
+        </h3>
+
+        <div v-if="$slots.text || text" class="card-highlight__text">
+          <slot name="text">
+            <div v-html="text"></div>
+          </slot>
+        </div>
       </div>
-    </div>
 
-    <div v-if="$slots.image || image" class="card-highlight__image-col">
-      <slot name="image">
-        <img v-bind="image" />
-      </slot>
-    </div>
+      <div v-if="$slots.image || image" class="card-highlight__image-col">
+        <div>
+          <slot name="image">
+            <img v-bind="image" />
+          </slot>
+        </div>
+      </div>
 
-    <div v-if="badgeIcon" class="card-highlight__badge-icon">
-      <UIcon :name="badgeIcon" />
+      <div v-if="badgeIcon" class="card-highlight__badge-icon">
+        <UIcon :name="badgeIcon" />
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss" src="./card-highlight.scss"></style>
+<style scoped lang="scss">
+@use '../../base/abstracts' as a;
+
+.card-highlight__image-col {
+  :slotted(img) {
+    max-height: a.rem(225);
+  }
+}
+</style>

package/components/card-price/u-card-price.vue

@@ -18,12 +18,16 @@ defineProps<Props>()
           {{ priceText }}
         </div>
 
-        <div v-if="priceSubtext" class="card-price__subtext">
-          {{ priceSubtext }}
+        <div v-if="$slots.priceSubtext || priceSubtext" class="card-price__subtext">
+          <slot name="priceSubtext">
+            <div v-html="priceSubtext"></div>
+          </slot>
         </div>
 
-        <div v-if="description" class="card-price__description">
-          {{ description }}
+        <div v-if="$slots.description || description" class="card-price__description">
+          <slot name="description">
+            <div v-html="description"></div>
+          </slot>
         </div>
       </div>
 

package/components/chip/chip.scss

@@ -0,0 +1,25 @@
+@use '../../base/abstracts' as a;
+
+.chip {
+  background-color: var(--e-c-mono-50);
+  border: 1px solid var(--e-c-mono-200);
+  border-radius: var(--e-brd-radius-2);
+  padding: var(--e-space-1_5) var(--e-space-2);
+  display: flex;
+  align-items: center;
+  column-gap: var(--e-space-1);
+}
+
+.chip__icon {
+  color: var(--e-c-mono-700);
+}
+
+.chip__label {
+  @include a.type(200, strong);
+}
+
+.chip__caption {
+  @include a.type(50, strong);
+
+  color: var(--e-c-mono-700);
+}

package/components/chip/u-chip.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { UIcon } from '../../elements'
+
+interface Props {
+  caption?: string
+  label?: string
+  icon?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="chip">
+    <span v-if="icon" class="chip__icon">
+      <UIcon :name="icon"></UIcon>
+    </span>
+
+    <div class="chip__label">
+      <p v-if="$slots.caption || caption" class="chip__caption">
+        <slot name="caption">{{ caption }}</slot>
+      </p>
+
+      <p>
+        <slot>{{ label }}</slot>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./chip.scss"></style>

package/components/download-list-item/download-list-item.scss

@@ -1,51 +1,51 @@
 @use '../../base/abstracts' as a;
 
-.download-list-item {
-  @keyframes arrow-anim {
-    0% {
-      transform: translateY(-30%);
-      opacity: 0.2;
-    }
+@keyframes arrow-anim {
+  0% {
+    transform: translateY(-30%);
+    opacity: 0.2;
+  }
 
-    80% {
-      transform: translateY(0);
-      opacity: 1;
-    }
+  80% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 
-    100% {
-      transform: translateY(2%);
-      opacity: 1;
-    }
+  100% {
+    transform: translateY(2%);
+    opacity: 1;
   }
+}
 
-  @keyframes hide-download {
-    0% {
-      transform: none;
-      transform-origin: bottom center;
-      opacity: 1;
-    }
+@keyframes hide-download {
+  0% {
+    transform: none;
+    transform-origin: bottom center;
+    opacity: 1;
+  }
 
-    100% {
-      transform: rotate(60deg);
-      transform-origin: bottom center;
-      opacity: 0;
-    }
+  100% {
+    transform: rotate(60deg);
+    transform-origin: bottom center;
+    opacity: 0;
   }
+}
 
-  @keyframes show-check {
-    0% {
-      transform: rotate(-60deg);
-      transform-origin: bottom center;
-      opacity: 0;
-    }
+@keyframes show-check {
+  0% {
+    transform: rotate(-60deg);
+    transform-origin: bottom center;
+    opacity: 0;
+  }
 
-    100% {
-      transform: rotate(0);
-      transform-origin: bottom center;
-      opacity: 1;
-    }
+  100% {
+    transform: rotate(0);
+    transform-origin: bottom center;
+    opacity: 1;
   }
+}
 
+.download-list-item {
   position: relative;
   transform: scale(1); // Safari hack
   height: a.rem(64);

package/components/hint/hint.scss

@@ -3,66 +3,57 @@
 @use '../../base/abstracts' as a;
 @use '../../elements/text-link/text-link.scss' as t;
 
-.hint {
-  @mixin type-neutral {
-    background-color: var(--e-c-secondary-05-100);
-    color: var(--e-c-secondary-05-900);
+@mixin type-neutral {
+  background-color: var(--e-c-secondary-05-100);
+  color: var(--e-c-secondary-05-900);
 
-    &::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8h-2V7h2v2Z' fill='%230096DC'/%3E%3C/svg%3E");
-    }
+  &::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8h-2V7h2v2Z' fill='%230096DC'/%3E%3C/svg%3E");
+  }
 
-    .hint__richtext {
-      margin-left: var(--e-space-9);
+  .hint__richtext {
+    margin-left: var(--e-space-9);
 
-      @include a.bp(lg) {
-        margin-left: 0;
-      }
+    @include a.bp(lg) {
+      margin-left: 0;
     }
+  }
 
-    // override some richtext styles.
-    .richtext {
-      a {
-        font-size: 100px;
-        color: inherit;
+  // override some richtext styles.
+  .richtext {
+    a {
+      font-size: 100px;
+      color: inherit;
 
-        &:active,
-        &:hover {
-          text-decoration-color: var(--e-c-secondary-05-200);
-        }
+      &:active,
+      &:hover {
+        text-decoration-color: var(--e-c-secondary-05-200);
       }
     }
   }
+}
 
-  @mixin type-warning {
-    background-color: var(--e-c-signal-02-100);
-    color: var(--e-c-signal-02-900);
+@mixin type-warning {
+  background-color: var(--e-c-signal-02-100);
+  color: var(--e-c-signal-02-900);
 
-    &::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21 12 2l11 19H1Zm11-3c.283 0 .52-.096.713-.288A.968.968 0 0 0 13 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 12 16a.968.968 0 0 0-.713.288A.968.968 0 0 0 11 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm-1-3h2v-5h-2v5Z' fill='%23FF9800'/%3E%3C/svg%3E");
-    }
+  &::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 21 12 2l11 19H1Zm11-3c.283 0 .52-.096.713-.288A.968.968 0 0 0 13 17a.968.968 0 0 0-.287-.712A.968.968 0 0 0 12 16a.968.968 0 0 0-.713.288A.968.968 0 0 0 11 17c0 .283.096.52.287.712.192.192.43.288.713.288Zm-1-3h2v-5h-2v5Z' fill='%23FF9800'/%3E%3C/svg%3E");
+  }
 
-    .hint__richtext {
-      margin-left: var(--e-space-9);
+  .hint__richtext {
+    margin-left: var(--e-space-9);
 
-      @include a.bp(lg) {
-        margin-left: 0;
-      }
+    @include a.bp(lg) {
+      margin-left: 0;
     }
+  }
 
-    // override some richtext styles.
-    .richtext {
-      a {
-        color: inherit;
-
-        &:active,
-        &:hover {
-          text-decoration-color: var(--e-c-signal-02-100);
-        }
-      }
-    }
+  // override some richtext styles.
+  .richtext {
+    a {
+      color: inherit;
 
-    .hint__link {
       &:active,
       &:hover {
         text-decoration-color: var(--e-c-signal-02-100);
@@ -70,47 +61,63 @@
     }
   }
 
-  @mixin type-legal {
-    background-color: var(--e-c-mono-00);
-    border: 1px solid var(--e-c-mono-500);
-    border-left-width: 4px;
-    border-left-color: var(--e-c-mono-700);
-    color: var(--e-c-mono-900);
-
-    &::before {
-      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12.86 3.404-.81.81 3.352 3.352.81-.81-3.353-3.352Zm.707-1.697a1 1 0 0 0-1.415 0l-1.8 1.8a1 1 0 0 0-.01 1.404L6.952 8.303a1 1 0 0 0-1.404.01l-1.84 1.84a1 1 0 0 0 0 1.414l4.342 4.342a1 1 0 0 0 1.414 0l1.84-1.84a1 1 0 0 0 0-1.414l-.092-.092.93-.93L20.6 20l1.4-1.4-8.46-8.366 1.063-1.062.091.091a1 1 0 0 0 1.415 0l1.8-1.8a1 1 0 0 0 0-1.414l-4.342-4.342ZM6.253 10.01l-.85.85 3.352 3.352.85-.85-3.352-3.352Zm1.975-.581 3.235-3.235L13.32 8.05l-3.235 3.235L8.23 9.429ZM16 21H4v-2h12v2Z' fill='%236B6B6B'/%3E%3C/svg%3E");
-      top: 0;
-      left: calc(
-        -24px - 12px - 4px
-      ); // 24px: icon width, 12px: distance to box, 4px: additonal border-width
+  .hint__link {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-02-100);
     }
+  }
+}
 
-    > p,
-    .richtext {
-      margin-left: 0;
-    }
+@mixin type-legal {
+  background-color: var(--e-c-mono-00);
+  border: 1px solid var(--e-c-mono-500);
+  border-left-width: 4px;
+  border-left-color: var(--e-c-mono-700);
+  color: var(--e-c-mono-900);
 
-    .hint__link {
-      &:active,
-      &:hover {
-        text-decoration-color: var(--e-c-mono-100);
-      }
+  &::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12.86 3.404-.81.81 3.352 3.352.81-.81-3.353-3.352Zm.707-1.697a1 1 0 0 0-1.415 0l-1.8 1.8a1 1 0 0 0-.01 1.404L6.952 8.303a1 1 0 0 0-1.404.01l-1.84 1.84a1 1 0 0 0 0 1.414l4.342 4.342a1 1 0 0 0 1.414 0l1.84-1.84a1 1 0 0 0 0-1.414l-.092-.092.93-.93L20.6 20l1.4-1.4-8.46-8.366 1.063-1.062.091.091a1 1 0 0 0 1.415 0l1.8-1.8a1 1 0 0 0 0-1.414l-4.342-4.342ZM6.253 10.01l-.85.85 3.352 3.352.85-.85-3.352-3.352Zm1.975-.581 3.235-3.235L13.32 8.05l-3.235 3.235L8.23 9.429ZM16 21H4v-2h12v2Z' fill='%236B6B6B'/%3E%3C/svg%3E");
+    top: 0;
+    left: calc(
+      -24px - 12px - 4px
+    ); // 24px: icon width, 12px: distance to box, 4px: additonal border-width
+  }
+
+  > p,
+  .richtext {
+    margin-left: 0;
+  }
+
+  .hint__link {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-mono-100);
     }
+  }
 
-    @include a.bp(lg) {
-      margin-top: calc(4px + 4px + 24px);
-      border: 1px solid var(--e-c-mono-500);
-      border-top-width: 4px;
-      border-top-color: var(--e-c-mono-700);
-
-      &::before {
-        left: 0;
-        top: calc(
-          -24px - 4px - 4px
-        ); // 24px: icon height, 12px: distance to box, 4px: additonal border-width
-      }
+  @include a.bp(lg) {
+    margin-top: calc(4px + 4px + 24px);
+    border: 1px solid var(--e-c-mono-500);
+    border-top-width: 4px;
+    border-top-color: var(--e-c-mono-700);
+
+    &::before {
+      left: 0;
+      top: calc(
+        -24px - 4px - 4px
+      ); // 24px: icon height, 12px: distance to box, 4px: additonal border-width
     }
   }
+}
+
+.hint {
+  position: relative;
+  padding: var(--e-space-5) var(--e-space-4);
+  border-radius: var(--e-brd-radius-1);
+
+  // Default type
+  @include type-neutral;
 
   .hint__link {
     @include t.text-link;
@@ -130,13 +137,6 @@
     }
   }
 
-  // Default type
-  @include type-neutral;
-
-  position: relative;
-  padding: var(--e-space-5) var(--e-space-4);
-  border-radius: var(--e-brd-radius-1);
-
   .hint__label {
     + .hint__richtext {
       margin-top: var(--e-space-1);
@@ -160,12 +160,6 @@
     @include a.type(200, strong);
 
     margin-left: var(--e-space-9);
-
-    // margin-bottom: var(--e-space-1);
-
-    // @include a.bp(lg) {
-    //   margin-bottom: var(--e-space-2);
-    // }
   }
 
   @include a.bp(lg) {

package/components/hint/u-hint.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useSlots } from 'vue'
 import { URichtext } from '../'
 import { Cta } from '../../elements/types'
 
@@ -11,7 +10,6 @@ interface Props {
 }
 
 const { type = 'neutral' } = defineProps<Props>()
-const slots = useSlots()
 </script>
 
 <template>

package/components/index.js

@@ -1,7 +1,3 @@
-/**
- * It's not recommended to import components from this file, because tree-shaking won't work then.
- * -> https://vite.dev/guide/performance#avoid-barrel-files
- */
 export { default as UAccordionItem } from './accordion-item/u-accordion-item.vue'
 
 // Cards
@@ -64,3 +60,5 @@ export { default as UDataCardGroup } from './data-card-group/u-data-card-group.v
 export { default as USearchGroup } from './search-group/u-search-group.vue'
 export { default as USkeletonLoader } from './skeleton-loader/u-skeleton-loader.vue'
 export { default as UCardHighlight } from './card-highlight/u-card-highlight.vue'
+export { default as URating } from './rating/u-rating.vue'
+export { default as UChip } from './chip/u-chip.vue'

package/components/inline-edit/inline-edit.scss

@@ -35,12 +35,12 @@
 
 .inline-edit__description,
 .inline-edit__summary {
+  color: var(--e-c-mono-700);
+
   @include a.type(300);
 
   // We don't need a full richtext implementation. The spacings are enough.
   @include r.richtext-spacing-rules;
-
-  color: var(--e-c-mono-700);
 }
 
 .inline-edit__description {

package/components/inline-edit/u-inline-edit.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, inject, useId, watch, useTemplateRef } from 'vue'
 import { UButton } from '../../elements'
-import { URichtext } from '../../components'
 import { getTranslation } from '../../utils/translations/translate'
 
 interface Props {

package/components/rating/rating.scss

@@ -0,0 +1,76 @@
+@use '../../base/abstracts' as a;
+@use '../../base/accessibility';
+
+$ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+@keyframes thumbs-up-down-anim {
+  0% {
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    transform: rotate(0);
+  }
+}
+
+.rating {
+  display: flex;
+  column-gap: var(--e-space-0_5);
+}
+
+.rating__button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: a.rem(36);
+  height: a.rem(36);
+  color: var(--e-c-mono-700);
+  border-radius: var(--e-brd-radius-1);
+  transition: background-color a.$trs-default;
+
+  &:hover {
+    background-color: var(--e-c-mono-00);
+
+    .rating__button-tooltip {
+      opacity: 1;
+      transform: translateY(100%);
+    }
+  }
+
+  &.up .icon {
+    transform-origin: bottom left;
+  }
+
+  &.down .icon {
+    transform-origin: bottom right;
+  }
+
+  &.active {
+    .icon {
+      animation-name: thumbs-up-down-anim;
+      animation-duration: var(--e-trs-duration-faster);
+      animation-iteration-count: 1;
+      animation-timing-function: $ease-in-out-back;
+      animation-delay: 50ms;
+    }
+  }
+}
+
+.rating__button-tooltip {
+  @include a.type(100);
+
+  position: absolute;
+  opacity: 0;
+  padding: var(--e-space-1) var(--e-space-2);
+  white-space: nowrap;
+  border-radius: var(--e-brd-radius-2);
+  background-color: var(--e-c-mono-900);
+  color: var(--e-c-mono-00);
+  bottom: calc(var(--e-space-2) * -1);
+  transform: translateY(85%);
+  transition:
+    opacity a.$trs-default,
+    transform a.$trs-default;
+  pointer-events: none;
+}

package/components/rating/u-rating.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { UIcon } from '../../elements'
+import { getTranslation } from '../../utils/translations/translate'
+
+interface Props {
+  likeText?: string
+  dislikeText?: string
+}
+
+defineProps<Props>()
+const emit = defineEmits(['like', 'dislike', 'cancel'])
+
+const likeActive = ref(false)
+const dislikeActive = ref(false)
+
+const onLike = () => {
+  if (!likeActive.value) {
+    likeActive.value = true
+    dislikeActive.value = false
+    emit('like')
+    return
+  }
+
+  if (likeActive.value) {
+    likeActive.value = false
+    dislikeActive.value = false
+    emit('cancel')
+  }
+}
+const onDislike = () => {
+  if (!dislikeActive.value) {
+    dislikeActive.value = true
+    likeActive.value = false
+    emit('dislike')
+    return
+  }
+
+  if (dislikeActive.value) {
+    dislikeActive.value = false
+    likeActive.value = false
+    emit('cancel')
+  }
+}
+</script>
+
+<template>
+  <div class="rating">
+    <button :class="['rating__button', 'up', { active: likeActive }]" type="button" @click="onLike">
+      <UIcon :name="likeActive ? 'thumbs-up-active' : 'thumbs-up'" />
+
+      <span class="visually-hidden">
+        {{ likeText || getTranslation('like') }}
+      </span>
+
+      <span class="rating__button-tooltip" aria-hidden="true">
+        {{ likeText || getTranslation('like') }}
+      </span>
+    </button>
+
+    <button
+      :class="['rating__button', 'down', { active: dislikeActive }]"
+      type="button"
+      @click="onDislike"
+    >
+      <UIcon :name="dislikeActive ? 'thumbs-down-active' : 'thumbs-down'" />
+
+      <span class="visually-hidden">
+        {{ dislikeText || getTranslation('dislike') }}
+      </span>
+
+      <span class="rating__button-tooltip" aria-hidden="true">
+        {{ dislikeText || getTranslation('dislike') }}
+      </span>
+    </button>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./rating.scss"></style>

package/dist/base-style.css

@@ -138,6 +138,9 @@ textarea {
   resize: vertical;
 }
 
+input[type=number] {
+  -moz-appearance: textfield;
+}
 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;

package/dist/base-style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../base/main-base.scss","../node_modules/@energie360/design-tokens/dist/fonts/fonts.css","../base/_resets.scss","../base/abstracts/_resets.scss","../base/abstracts/_variables.scss","../base/abstracts/_functions.scss","../base/_input-resets.scss","../base/abstracts/_mixins.scss","../base/_html.scss","../base/_body.scss","../base/_focus-handling.scss","../node_modules/@energie360/design-tokens/dist/css/design-tokens.css"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA;AACQ;ACpBR;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AC1BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADuBJ;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AErB+E;AChCjF;ACHA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EC8BE;EACA;EAKE;;;AD7BF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAIJ;EACE;;;AAIA;EAEE;EACA;;;AEpDJ;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;ACTF;EACE;EACA;EACA;EACA;EACA;;;ACAF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ATQF;AACA;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AU3CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;;;AX7MA;AAAA;AAAA;AAAA;EACE","file":"base-style.css"}
+{"version":3,"sourceRoot":"","sources":["../base/main-base.scss","../node_modules/@energie360/design-tokens/dist/fonts/fonts.css","../base/_resets.scss","../base/abstracts/_resets.scss","../base/abstracts/_variables.scss","../base/abstracts/_functions.scss","../base/_input-resets.scss","../base/abstracts/_mixins.scss","../base/_html.scss","../base/_body.scss","../base/_focus-handling.scss","../node_modules/@energie360/design-tokens/dist/css/design-tokens.css"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBA;AACQ;ACpBR;EACE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AC1BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ADuBJ;AAAA;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AErB+E;AChCjF;ACHA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EC8BE;EACA;EAKE;;;AD7BF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;;AAIJ;EACE;;;AAGF;EAEE;;AAEA;EAEE;EACA;;;AEvDJ;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;ACTF;EACE;EACA;EACA;EACA;EACA;;;ACAF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ATQF;AACA;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA,KACE;;AU3CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;;;AX7MA;AAAA;AAAA;AAAA;EACE","file":"base-style.css"}

package/elements/numeric-stepper/u-numeric-stepper.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import UIcon from '../icon/u-icon.vue'
-import { computed, ref, useTemplateRef, useId, nextTick } from 'vue'
+import { computed, ref, useTemplateRef, useId, nextTick, onMounted } from 'vue'
 import { getTranslation } from '../../utils/translations/translate'
 
 interface Props {
@@ -29,6 +29,7 @@ const {
 const cId = `numeric-stepper-${useId()}`
 
 const model = defineModel<string | number>()
+const emit = defineEmits(['input', 'focus', 'focusout'])
 
 const input = useTemplateRef('input')
 
@@ -57,24 +58,24 @@ const onHoverOut = () => {
 }
 
 const onStepDown = () => {
-  model.value = (Number(model.value) - Number(step)).toString()
+  input.value.stepDown()
+  model.value = Number(input.value.value)
+
   nextTick(() => {
-    input.value?.dispatchEvent(new Event('input'))
+    onInput()
   })
 }
 
 const onStepUp = () => {
-  model.value = (Number(model.value) + Number(step)).toString()
+  input.value.stepUp()
+  model.value = Number(input.value.value)
 
   nextTick(() => {
-    input.value?.dispatchEvent(new Event('input'))
+    onInput()
   })
 }
 
-const onInput = (e) => {
-  e.preventDefault()
-  e.stopPropagation()
-
+const checkMinMax = () => {
   if (min !== '') {
     isMin.value = Number(model.value) <= Number(min)
   }
@@ -84,16 +85,28 @@ const onInput = (e) => {
   }
 }
 
+const onInput = () => {
+  checkMinMax()
+
+  // Is this necessary?
+  // If we use v-model this wouldn't be needed.
+  emit('input', model.value)
+}
+
 const stepButtonUpDisabled = computed(() => disabled || readonly || isMax.value)
 const stepButtonDownDisabled = computed(() => disabled || readonly || isMin.value)
+
+onMounted(() => {
+  checkMinMax()
+})
 </script>
 
 <template>
   <div :class="['numeric-stepper', classes]" @mouseenter="onHover" @mouseleave="onHoverOut">
     <label class="visually-hidden" :for="cId">{{ label }}</label>
     <div class="control">
-      <slot name="input"
-        ><input
+      <slot name="input">
+        <input
           :id="cId"
           ref="input"
           v-model="model"
@@ -102,12 +115,17 @@ const stepButtonDownDisabled = computed(() => disabled || readonly || isMin.valu
           :min
           :max
           :step
+          v-bind="$attrs"
+          @focus="$emit('focus', $event)"
+          @focusout="$emit('focusout', $event)"
           @input="onInput"
-      /></slot>
+        />
+      </slot>
     </div>
 
     <button
       ref="stepDownButton"
+      type="button"
       class="stepper-button dec"
       :aria-disabled="stepButtonDownDisabled ? 'true' : 'false'"
       :disabled="stepButtonDownDisabled"
@@ -119,6 +137,7 @@ const stepButtonDownDisabled = computed(() => disabled || readonly || isMin.valu
 
     <button
       ref="stepUpButton"
+      type="button"
       class="stepper-button inc"
       :aria-disabled="stepButtonUpDisabled ? 'true' : 'false'"
       :disabled="stepButtonUpDisabled"
@@ -128,6 +147,12 @@ const stepButtonDownDisabled = computed(() => disabled || readonly || isMin.valu
       <UIcon name="add"></UIcon>
     </button>
   </div>
+
+  <div class="error-message-container">
+    <slot name="error-message">
+      {{ errorMessage }}
+    </slot>
+  </div>
 </template>
 
 <style lang="scss" scoped>

package/i18n/i18n.ts

@@ -21,6 +21,8 @@ const translations = {
     maxFileCountAllowed: 'Maximal $COUNT Dateien erlaubt.',
     cancelSearch: 'Suche abbrechen',
     download: 'Herunterladen',
+    like: 'Gefällt mir',
+    dislike: 'Gefällt mir nicht',
   },
   FR: {
     yes: 'Ja',
@@ -44,6 +46,8 @@ const translations = {
     maxFileCountAllowed: 'Maximum de $COUNT fichiers autorisés',
     cancelSearch: 'Annuler la recherche',
     download: 'Télécharger',
+    like: "J'aime ça",
+    dislike: "je ne l'aime pas",
   },
   IT: {
     yes: 'Ja',
@@ -67,6 +71,8 @@ const translations = {
     maxFileCountAllowed: 'Sono consentiti al massimo $COUNT file',
     cancelSearch: 'annullare la ricerca',
     download: 'scaricamento',
+    like: 'Mi piace',
+    dislike: 'Non mi piace',
   },
   EN: {
     yes: 'Ja',
@@ -90,6 +96,8 @@ const translations = {
     maxFileCountAllowed: 'Maximum $COUNT files allowed',
     cancelSearch: 'Cancel search',
     download: 'Download',
+    like: 'I like it',
+    dislike: 'I do not like it',
   },
 }
 

package/layout/index.js

@@ -1,4 +1,5 @@
-export { default as USettingsLayout } from './settings/u-settings-layout.vue'
 export { default as UPortalLayout } from './portal/u-portal.vue'
 export { default as UTileGrid } from './tile-grid/u-tile-grid.vue'
 export { default as UTileItem } from './tile-grid/u-tile-item.vue'
+export { default as UResponsiveContainer } from './responsive-container/u-responsive-container.vue'
+export { default as UPortalContentAside } from './portal-content-aside/u-portal-content-aside.vue'

package/layout/portal/portal.scss

@@ -30,11 +30,11 @@
 }
 
 .portal__content-container {
-  @include c.portal-content-container;
-
   padding-top: var(--e-space-10);
   padding-bottom: var(--e-space-10);
 
+  @include c.portal-content-container;
+
   @include a.bp(lg) {
     padding-top: var(--e-space-8);
   }

package/layout/portal-content-aside/portal-content-aside.scss

@@ -0,0 +1,35 @@
+@use '../../base/abstracts' as a;
+
+.portal-content-aside-container {
+  container-type: inline-size;
+
+  @container (width <= 1020px) {
+    .portal-content-aside {
+      display: flex;
+      flex-direction: column;
+      row-gap: var(--e-space-6);
+    }
+  }
+}
+
+.portal-content-aside {
+  display: grid;
+  grid-template-columns: auto a.rem(320);
+  grid-template-rows: repeat(2, auto);
+  grid-column-gap: var(--e-space-24);
+  grid-row-gap: var(--e-space-12);
+
+  // @include a.bp(lg) {
+  //   display: flex;
+  //   flex-direction: column;
+  //   row-gap: var(--e-space-6);
+  // }
+}
+
+.portal-content-aside__main {
+  grid-area: 1 / 1 / 3 / 2;
+}
+
+.portal-content-aside__aside {
+  grid-area: 1 / 2 / 3 / 3;
+}

package/layout/portal-content-aside/u-portal-content-aside.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="portal-content-aside-container">
+    <div class="portal-content-aside">
+      <div class="portal-content-aside__main">
+        <slot />
+      </div>
+
+      <aside class="portal-content-aside__aside">
+        <slot name="aside"></slot>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./portal-content-aside.scss"></style>

package/layout/responsive-container/u-responsive-container.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue'
+
+interface Props {
+  breakpoint: number
+}
+
+const root = useTemplateRef('root')
+const containerWidth = ref(0)
+const resizeObserver = new ResizeObserver((entries) => {
+  containerWidth.value = entries[0].contentBoxSize[0].inlineSize
+})
+
+defineProps<Props>()
+
+onMounted(() => {
+  resizeObserver.observe(root.value)
+})
+
+onUnmounted(() => {
+  resizeObserver.disconnect()
+})
+</script>
+
+<template>
+  <div ref="root" class="responsive-container">
+    <template v-if="containerWidth >= breakpoint">
+      <slot name="above"></slot>
+    </template>
+
+    <template v-else>
+      <slot name="below"></slot>
+    </template>
+  </div>
+</template>

package/modules/dialog/dialog.scss

@@ -53,6 +53,10 @@
   max-width: a.rem(540);
   min-width: a.rem(480);
 
+  &.auto-height {
+    height: auto;
+  }
+
   * + .dialog__content-image {
     margin-top: var(--e-space-5);
   }

package/modules/dialog/u-dialog.vue

@@ -11,6 +11,7 @@ interface Props {
   headerImage?: Image
   contentImage?: Image
   closeBtnLabel?: string
+  autoHeight?: boolean
   mobileDialogStyle?: 'modal' | 'slideout'
 }
 
@@ -82,7 +83,7 @@ watch(visible, (newV) => {
       },
     ]"
   >
-    <div class="dialog">
+    <div :class="['dialog', { 'auto-height': autoHeight }]">
       <div class="dialog__header-image-container">
         <slot name="header-image">
           <img v-bind="headerImage" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "",
   "type": "module",
   "main": "dist/index.js",

package/wizard/index.js

@@ -3,3 +3,4 @@ export { default as UWizardOutro } from './wizard-outro/u-wizard-outro.vue'
 export { default as UWizardLayout } from './wizard-layout/u-wizard-layout.vue'
 export { default as UWizardLayoutBlock } from './wizard-layout/u-wizard-layout-block.vue'
 export { default as UWizardLayoutElement } from './wizard-layout/u-wizard-layout-element.vue'
+export { default as UWizardTopBar } from './wizard-top-bar/u-wizard-top-bar.vue'

package/wizard/wizard-top-bar/u-wizard-top-bar.vue

@@ -0,0 +1,31 @@
+<!--<script setup lang="ts">-->
+<!--import { UIcon } from '../../elements'-->
+
+<!--interface Props {-->
+<!--  objectAddress?: string-->
+<!--}-->
+<!--</script>-->
+
+<template>
+  <div class="wizard-top-bar">
+    <div class="container">
+      <div class="wizard-top-bar__inner">
+        <div class="wizard-top-bar__logo">
+          <img src="/static/ui-assets/images/logo.svg" alt="logo" />
+        </div>
+
+        <div class="wizard-top-bar__right-column">
+          <div class="wizard-top-bar__additional">
+            <slot name="additional"></slot>
+          </div>
+
+          <div class="wizard-top-bar__cta">
+            <slot name="cta"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./wizard-top-bar.scss"></style>

package/wizard/wizard-top-bar/wizard-top-bar.scss

@@ -0,0 +1,35 @@
+@use '../../base/abstracts' as a;
+@use '../../layout/container/container';
+
+.wizard-top-bar__inner {
+  height: a.rem(98);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.wizard-top-bar__logo {
+  flex: 0 0 auto;
+
+  img {
+    height: a.rem(40);
+
+    @include a.bp(lg) {
+      height: a.rem(24);
+    }
+  }
+}
+
+.wizard-top-bar__cta,
+.wizard-top-bar__right-column {
+  display: flex;
+  column-gap: var(--e-space-6);
+}
+
+.wizard-top-bar__right-column {
+  .wizard-top-bar__additional {
+    @include a.bp(m) {
+      display: none;
+    }
+  }
+}

package/layout/settings/settings.scss

@@ -1,33 +0,0 @@
-@use '../../base/abstracts' as a;
-
-.settings-layout {
-  display: grid;
-  grid-template-columns: auto a.rem(320);
-  grid-template-rows: repeat(2, auto);
-  grid-column-gap: var(--e-space-24);
-  grid-row-gap: var(--e-space-12);
-  padding: var(--e-space-10) 0;
-
-  @include a.bp(lg) {
-    display: flex;
-    flex-direction: column;
-    row-gap: var(--e-space-6);
-    padding: var(--e-space-6) 0 var(--e-space-10);
-  }
-}
-
-.settings-layout__header {
-  grid-area: 1 / 1 / 2 / 3;
-}
-
-.settings-layout__main {
-  grid-area: 2 / 1 / 3 / 2;
-}
-
-.settings-layout__aside {
-  grid-area: 2 / 2 / 3 / 3;
-}
-
-.settings-layout__title {
-  @include a.type(500, strong);
-}

package/layout/settings/u-settings-layout.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="settings-layout">
-    <div class="settings-layout__header">
-      <h1 class="settings-layout__title">
-        <slot name="title"></slot>
-      </h1>
-    </div>
-
-    <div class="settings-layout__main">
-      <slot name="main"></slot>
-    </div>
-
-    <aside class="settings-layout__aside">
-      <slot name="aside"></slot>
-    </aside>
-  </div>
-</template>
-
-<style scoped lang="scss" src="./settings.scss"></style>