@energie360/ui-library 0.1.13 → 0.1.15

package/base/abstracts/_layers.scss

@@ -2,5 +2,6 @@
 // z-index layers
 $layer-tooltip: 100;
 $layer-nav-flyout: 200;
+$layer-nav-panel: 200;
 $layer-mobile-menu: 200;
 $layer-message: 300;

package/base/abstracts/_resets.scss

@@ -7,5 +7,6 @@
     font-family: inherit;
     font-size: inherit;
     background: none;
+    text-align: left;
   }
 }

package/components/card-header/card-header.scss

@@ -9,6 +9,38 @@ $image-col-width-small: 100px;
   display: flex;
   column-gap: var(--e-space-2);
 
+  .image-background {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    aspect-ratio: 1;
+    background-color: var(--e-c-primary-01-100);
+    border-radius: 100%;
+  }
+
+  .badge {
+    @include a.type(100, strong);
+
+    position: absolute;
+    padding: a.rem(6) a.rem(8) a.rem(4);
+    color: var(--e-c-mono-00);
+    background-color: var(--e-c-secondary-05-500);
+    border-radius: var(--e-brd-radius-1);
+    top: a.rem(-16);
+    right: a.rem(-16);
+
+    @include a.bp(m) {
+      top: a.rem(-12);
+      right: a.rem(-12);
+    }
+
+    @include a.bp(s) {
+      top: a.rem(-10);
+      right: a.rem(-10);
+    }
+  }
+
   @container (max-width: 260px) {
     flex-direction: column-reverse;
   }
@@ -64,35 +96,3 @@ $image-col-width-small: 100px;
     flex-basis: a.rem($image-col-width-small);
   }
 }
-
-.image-background {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  aspect-ratio: 1;
-  background-color: var(--e-c-primary-01-100);
-  border-radius: 100%;
-}
-
-.badge {
-  @include a.type(100, strong);
-
-  position: absolute;
-  padding: a.rem(6) a.rem(8) a.rem(4);
-  color: var(--e-c-mono-00);
-  background-color: var(--e-c-secondary-05-500);
-  border-radius: var(--e-brd-radius-1);
-  top: a.rem(-16);
-  right: a.rem(-16);
-
-  @include a.bp(m) {
-    top: a.rem(-12);
-    right: a.rem(-12);
-  }
-
-  @include a.bp(s) {
-    top: a.rem(-10);
-    right: a.rem(-10);
-  }
-}

package/components/context-menu/context-menu.scss

@@ -15,6 +15,7 @@
   box-shadow: var(--e-elevation-md);
   background-color: var(--e-c-mono-00);
   min-width: a.rem(240);
+  z-index: a.$layer-tooltip;
 }
 
 .menu-enter-active,

package/components/hint/hint.scss

@@ -0,0 +1,126 @@
+@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);
+
+    &::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");
+    }
+
+    // override some richtext styles.
+    .richtext {
+      a {
+        font-size: 100px;
+        color: inherit;
+
+        &: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);
+
+    &::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");
+    }
+
+    // override some richtext styles.
+    .richtext {
+      a {
+        color: inherit;
+
+        &:active,
+        &:hover {
+          text-decoration-color: var(--e-c-signal-02-100);
+        }
+      }
+    }
+  }
+
+  @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
+    }
+
+    > p,
+    .richtext {
+      margin-left: 0;
+    }
+
+    @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
+      }
+    }
+  }
+
+  // Default type
+  @include type-neutral;
+
+  position: relative;
+  padding: var(--e-space-5) var(--e-space-4);
+  border-radius: var(--e-brd-radius-1);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--e-space-5);
+    left: var(--e-space-4);
+    width: a.rem(24);
+    height: a.rem(24);
+  }
+
+  > p,
+  .richtext {
+    margin-left: var(--e-space-9);
+  }
+
+  > p {
+    @include a.type(200, strong);
+
+    margin-bottom: var(--e-space-1);
+  }
+
+  @include a.bp(lg) {
+    padding: var(--e-space-4);
+
+    &::before {
+      top: var(--e-space-4);
+    }
+  }
+
+  // Modifiers
+  &.hint--warning {
+    @include type-warning;
+  }
+
+  &.hint--legal {
+    @include type-legal;
+  }
+}

package/components/hint/u-hint.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { URichtext } from '../'
+
+interface Props {
+  type?: 'neutral' | 'warning' | 'legal'
+  label?: string
+  text?: string
+}
+
+const { type = 'neutral' } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['hint', `hint--${type}`]">
+    <p class="hint__label">
+      <slot name="label">{{ label }}</slot>
+    </p>
+
+    <URichtext class="hint__richtext" small :text><slot></slot></URichtext>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./hint.scss"></style>
+
+<style lang="scss">
+.hint__richtext {
+  a {
+    color: inherit;
+
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-secondary-05-200);
+    }
+  }
+}
+
+.hint--warning {
+  .hint__richtext a {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-signal-02-100);
+    }
+  }
+}
+
+.hint--legal {
+  .hint__richtext a {
+    &:active,
+    &:hover {
+      text-decoration-color: var(--e-c-mono-100);
+    }
+  }
+}
+</style>

package/components/index.js

@@ -49,3 +49,5 @@ export { default as UContextMenuDivider } from './context-menu-divider/u-context
 export { default as UCircularProgress } from './circular-progress/u-circular-progress.vue'
 export { default as UProgressAvatar } from './progress-avatar/u-progress-avatar.vue'
 export { default as UWelcome } from './welcome/u-welcome.vue'
+export { default as UHint } from './hint/u-hint.vue'
+export { default as UNavigationPanelTile } from './navigation-panel-tile/u-navigation-panel-tile.vue'

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

@@ -74,7 +74,9 @@ defineExpose({ collapse })
       <div class="inline-edit__heading-col">
         <p :id="headingId" class="inline-edit__title">{{ title }}</p>
 
-        <p class="inline-edit__summary" v-html="summary"></p>
+        <p class="inline-edit__summary">
+          <slot name="summary">{{ summary }}</slot>
+        </p>
         <p class="inline-edit__description" v-html="description"></p>
       </div>
       <div class="inline-edit__heading-cta-col">

package/components/navigation-panel-tile/navigation-panel-tile.scss

@@ -0,0 +1,105 @@
+@use '../../base/abstracts/' as a;
+
+.navigation-panel-tile {
+  display: flex;
+  column-gap: var(--e-space-2);
+  align-items: flex-start;
+  border: 2px solid var(--e-c-secondary-01-100);
+  border-radius: var(--e-brd-radius-2);
+  padding: var(--e-space-4);
+  transition: background-color a.$trs-ease-out;
+  background-color: var(--e-c-mono-00);
+
+  &.active:not(.disabled) {
+    background-color: var(--e-c-secondary-01-1000);
+    border-color: var(--e-c-secondary-01-1000);
+
+    .navigation-panel-tile__title,
+    .navigation-panel-tile__description,
+    .navigation-panel-tile__icon-wrapper {
+      color: var(--e-c-mono-00);
+    }
+  }
+
+  &.greyed:not(.disabled):not(:hover):not(.active) {
+    background-color: var(--e-c-mono-50);
+    border-color: var(--e-c-mono-200);
+  }
+
+  &.disabled {
+    pointer-events: none;
+    border-color: var(--e-c-mono-200);
+
+    .navigation-panel-tile__title,
+    .navigation-panel-tile__description,
+    .navigation-panel-tile__icon-wrapper {
+      color: var(--e-c-mono-500);
+    }
+  }
+
+  &:hover {
+    background-color: var(--e-c-primary-01-50);
+
+    .navigation-panel-tile__title,
+    .navigation-panel-tile__description {
+      color: var(--e-c-primary-01-700);
+    }
+  }
+
+  &:active {
+    background-color: var(--e-c-primary-01-100);
+  }
+
+  @include a.bp(lg) {
+    height: a.rem(82);
+    width: a.rem(260);
+  }
+}
+
+.navigation-panel-tile__title {
+  @include a.type(200, strong);
+
+  transition: color a.$trs-ease-out;
+}
+
+.navigation-panel-tile__icon-wrapper {
+  position: relative;
+  transition: color a.$trs-ease-out;
+}
+
+.navigation-panel-tile__description {
+  @include a.type(100);
+
+  color: var(--e-c-mono-700);
+  transition: color a.$trs-ease-out;
+
+  @include a.bp(lg) {
+    width: a.rem(192);
+    height: a.rem(22);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.badge {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: a.rem(13);
+  height: a.rem(13);
+  background-color: var(--e-c-mono-900);
+  border-radius: 100%;
+
+  &.inactive {
+    background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6.5' cy='6.5' r='6.5' fill='%23333'/%3E%3Cpath d='m4.414 3 2.12 2.121L8.658 3l1.414 1.414-2.122 2.122 2.122 2.121-1.414 1.414-2.122-2.12-2.12 2.12L3 8.656l2.12-2.12L3 4.412 4.414 3Z' fill='%23fff'/%3E%3C/svg%3E");
+  }
+}
+
+.navigation-panel-tile__text-column {
+  flex: 1 1 auto;
+}
+
+.badge + .icon {
+  color: var(--e-c-mono-500);
+}

package/components/navigation-panel-tile/u-navigation-panel-tile.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { UIcon } from '../../elements'
+
+enum IconBadge {
+  Inactive = 'inactive',
+}
+
+interface Props {
+  title: string
+  description: string
+  icon: string
+  iconBadge?: IconBadge
+  href?: string
+  target?: string
+  active?: boolean
+  greyed?: boolean
+  disabled?: boolean
+}
+
+const {
+  href = '',
+  target = '_self',
+  active = false,
+  disabled = false,
+  greyed = false,
+} = defineProps<Props>()
+
+const tag = computed(() => (href ? 'a' : 'div'))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :href="tag === 'a' ? href : null"
+    :target="tag === 'a' ? target : null"
+    :class="['navigation-panel-tile', { active, disabled, greyed }]"
+  >
+    <div class="navigation-panel-tile__text-column">
+      <div class="navigation-panel-tile__title">
+        {{ title }}
+      </div>
+      <div class="navigation-panel-tile__description" v-html="description" />
+    </div>
+
+    <div class="navigation-panel-tile__icon-column">
+      <div class="navigation-panel-tile__icon-wrapper">
+        <span v-if="iconBadge" :class="['badge', iconBadge]" />
+
+        <UIcon :name="icon" />
+      </div>
+    </div>
+  </component>
+</template>
+
+<style lang="scss" scoped src="./navigation-panel-tile.scss"></style>
+<style lang="scss">
+@use '../../base/abstracts/' as a;
+
+.navigation-panel-tile__description {
+  @include a.bp(lg) {
+    p {
+      width: a.rem(192);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    br {
+      content: '';
+
+      &::after {
+        content: ' ';
+      }
+    }
+  }
+}
+</style>

package/components/navigation-toolbar-link/navigation-toolbar-link.scss

@@ -1,8 +1,6 @@
-// TODO: How to handle text overflow?
-
 @use '../../base/abstracts/' as a;
 
-@keyframes fadeInLabel {
+@keyframes fade-in-label {
   0% {
     opacity: 0;
     transform: translateX(calc(100% + #{a.rem(8)}));
@@ -14,7 +12,7 @@
   }
 }
 
-@keyframes fadeOutLabel {
+@keyframes fade-out-label {
   0% {
     opacity: 1;
     transform: translateX(100%);
@@ -36,7 +34,7 @@
   0% {
     overflow: hidden;
     padding: var(--e-space-1_5) var(--e-space-3);
-    width: 100%;
+    width: var(--nav-toolbar-link-width);
   }
 
   100% {
@@ -56,11 +54,13 @@
   100% {
     overflow: hidden;
     padding: var(--e-space-1_5) var(--e-space-3);
-    width: 100%;
+    width: var(--nav-toolbar-link-width);
   }
 }
 
 .navigation-toolbar-link {
+  // We assume that the width of the link is fixed.
+  --nav-toolbar-link-width: #{a.rem(232)};
   --transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
 
   position: relative;
@@ -71,7 +71,7 @@
   align-items: center;
   flex-wrap: nowrap;
   white-space: nowrap;
-  width: 100%;
+  width: var(--nav-toolbar-link-width);
   column-gap: var(--e-space-2);
   background-color: var(--e-c-secondary-01-1000);
   color: var(--e-c-mono-00);
@@ -124,7 +124,7 @@
     &.hover-out:not(.is-expanding, .is-collapsing, .label-hidden) {
       .navigation-toolbar-link__label {
         // TODO: Maybe just use transitions instead of keyframe animations
-        animation-name: fadeOutLabel;
+        animation-name: fade-out-label;
         animation-duration: var(--e-trs-duration-faster);
         animation-timing-function: ease-out;
       }
@@ -132,10 +132,9 @@
 
     &:hover:not(.is-expanding, .is-collapsing, .label-hidden) {
       .navigation-toolbar-link__label {
-        animation-name: fadeInLabel;
+        animation-name: fade-in-label;
         animation-duration: var(--e-trs-duration-faster);
         animation-timing-function: ease-out;
-
         padding: var(--e-space-1_5) var(--e-space-2);
         transform: translateX(100%);
         width: auto;
@@ -146,16 +145,29 @@
   }
 }
 
+.navigation-toolbar-link__label {
+  // internal CSS variable
+  --label-width: calc(
+    var(--nav-toolbar-link-width) - var(--e-space-2) - 24px - 2 * var(--e-space-3)
+  );
+
+  width: var(--label-width);
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 // Animation
 .navigation-toolbar-link {
   &.is-collapsing,
   &.is-expanding {
     animation-duration: var(--e-trs-duration-faster);
 
+    // animation-duration: 5s;
+
     .navigation-toolbar-link__label {
       animation: none;
       position: static;
-      width: auto;
+      width: var(--label-width);
       height: auto;
       opacity: 1;
       background-color: transparent;

package/components/navigation-toolbar-link/u-navigation-toolbar-link.vue

@@ -99,7 +99,7 @@ const tag = computed(() => {
     @mouseleave="onHoverOut"
   >
     <UIcon :name="icon" />
-    <span ref="label" class="navigation-toolbar-link__label">
+    <span ref="label" class="navigation-toolbar-link__label" :title="label">
       <slot>{{ label }}</slot>
     </span>
   </component>

package/components/richtext/richtext.scss

@@ -1,5 +1,4 @@
 @use '../../base/abstracts/' as a;
-@use '../../elements/text-link/text-link.scss' as t;
 
 .richtext {
   // Spacing rules
@@ -74,7 +73,21 @@
   }
 
   a {
-    @include t.text-link;
+    font-weight: var(--e-type-weight-strong);
+    color: var(--e-c-primary-01-700);
+    text-decoration: underline;
+    text-underline-offset: 0.3em;
+    transition:
+      text-decoration-color a.$trs-default,
+      color a.$trs-default;
+
+    &:hover {
+      text-decoration-color: var(--e-c-primary-01-50);
+    }
+
+    &:active {
+      text-decoration-color: var(--e-c-primary-01-700);
+    }
   }
 
   ul,
@@ -168,7 +181,15 @@
     }
 
     a {
-      @include t.text-link--inverted;
+      color: var(--e-c-primary-01-50);
+
+      &:hover {
+        text-decoration-color: var(--e-c-primary-01-200);
+      }
+
+      &:active {
+        text-decoration-color: var(--e-c-primary-01-50);
+      }
     }
 
     ul > li::before {

package/components/richtext/u-richtext.vue

@@ -16,6 +16,4 @@ const classes = ['richtext', { 'richtext--small': small, 'richtext--inverted': i
   <div v-else :class="classes"><slot></slot></div>
 </template>
 
-<style lang="scss">
-@use './richtext.scss';
-</style>
+<style lang="scss" src="./richtext.scss"></style>

package/components/welcome/welcome.scss

@@ -2,6 +2,7 @@
 
 .welcome-container {
   @include a.type(500, strong);
+
   background-color: var(--e-c-primary-01-100);
   border-radius: var(--e-brd-radius-2);
   color: var(--e-c-primary-01-950);

package/dist/base-style.css

@@ -61,6 +61,7 @@ button {
   font-family: inherit;
   font-size: inherit;
   background: none;
+  text-align: left;
 }
 
 ul,

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;;;ADwBJ;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;;;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"}

package/elements/form/form.scss

@@ -131,9 +131,10 @@
   .form__cookiebot-message {
     margin-bottom: var(--e-space-6);
   }
-  //.alert + .button {
+
+  // .alert + .button {
   //  margin-top: var(--e-space-6);
-  //}
+  // }
 
   // States
   &.form--has-general-error {

package/elements/form-field/form-field-prefix-suffix.scss

@@ -70,8 +70,7 @@
     }
   }
 
-  &:has(.suffix-text),
-  &:has(.suffix-icon) {
+  &:has(.suffix-text) {
     // A suffix only makes sense for an <input>. That's why we select only input here.
     .control input {
       padding-right: var(--e-space-12);

package/elements/icon/u-icon.vue

@@ -1,3 +1,10 @@
+<script lang="ts">
+/**
+ * This object will hold all icon fetch promises. Should minimize unnecesary requests. It's just a cache.
+ */
+const fetchPromises = {}
+</script>
+
 <script setup lang="ts">
 import { ref } from 'vue'
 import { assetsPath } from '../../globals.js'
@@ -14,11 +21,6 @@ interface Props {
  */
 const iconPath = assetsPath + 'icons/'
 
-/**
- * This map will hold all fetched icons. Should minimize unnecesary requests. It's just a cache.
- */
-const iconMap = new Map()
-
 /**
  * A simple (non-visible) placeholder, which is used when an error happened or the icon couldn't be found.
  */
@@ -29,31 +31,39 @@ const svgPlaceholder = `
 const svgContent = ref(svgPlaceholder)
 
 /**
- * Fetches an icon from the assets folder. Or if already fecthed gets it from `iconMap`.
+ * Fetches an icon from the assets folder. Or if already fetched gets it from `iconMap`.
  */
 const getIcon = (name: string): string => {
-  // Check if icon has already been fetched.
-  if (iconMap.has(name)) {
-    svgContent.value = iconMap.get(name)
+  if (Object.hasOwn(fetchPromises, name)) {
+    // Prevents fetching the same icon multiple times when multiple UIcon instances are loaded at the same time.
+    fetchPromises[name].then((data) => {
+      svgContent.value = data
+    })
+
     return svgContent.value
   }
 
-  fetch(`${iconPath}${name}.svg`)
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error('Something went wrong when fetching the icon.')
-      }
+  fetchPromises[name] = new Promise((resolve, reject) => {
+    fetch(`${iconPath}${name}.svg`)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Something went wrong when fetching the icon.')
+        }
 
-      return response.text()
-    })
-    .then((text) => {
-      iconMap.set(name, text)
-      svgContent.value = text
-    })
-    .catch((err) => {
-      console.error(err)
-      svgContent.value = svgPlaceholder
-    })
+        return response.text()
+      })
+      .then((text) => {
+        resolve(text)
+      })
+      .catch((err) => {
+        console.error(err)
+        resolve(svgPlaceholder)
+      })
+  })
+
+  fetchPromises[name].then((data) => {
+    svgContent.value = data
+  })
 
   return svgContent.value
 }

package/elements/select/u-select.vue

@@ -2,7 +2,7 @@
 import { FormFieldBase } from '../form-field/form-field.types'
 import { computed, ref, useId, useSlots } from 'vue'
 import { SelectOption } from '../types'
-import { translate } from '../../utils/translations/translate'
+import { getTranslation } from '../../utils/translations/translate'
 
 interface Props extends FormFieldBase {
   name: string
@@ -112,15 +112,15 @@ const needsHelpTextSpacer = computed(() => {
 
     <div class="help-text">
       <span class="optional-text"
-        >{{ translate('common.optional')
+        >{{ getTranslation('optional')
         }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span></span
       ><slot name="helpText">{{ helpText }}</slot>
     </div>
 
     <div class="error-messages-container">
-      <slot name="error-message"
-        ><span>{{ errorMessage }}</span></slot
-      >
+      <slot name="error-message">
+        <span>{{ errorMessage }}</span>
+      </slot>
     </div>
   </div>
 </template>

package/elements/text-field/text-field.types.ts

@@ -3,4 +3,5 @@ export enum TextFieldTypes {
   number = 'number',
   email = 'email',
   password = 'password',
+  date = 'date',
 }

package/elements/text-field/u-text-field.vue

@@ -128,14 +128,14 @@ watch(
   >
     <div class="wrapper">
       <div class="label">
-        <slot name="label"
-          ><label :for="inputId">{{ label }}</label></slot
-        >
+        <slot name="label">
+          <label :for="inputId">{{ label }}</label>
+        </slot>
       </div>
 
       <div class="control">
-        <slot
-          ><input
+        <slot>
+          <input
             :id="inputId"
             ref="input"
             v-model="model"
@@ -149,7 +149,8 @@ watch(
             @focus="onFocus"
             @focusout="$emit('focusout', $event.target)"
             @blur="onBlur"
-        /></slot>
+          />
+        </slot>
 
         <div class="control-border"></div>
       </div>
@@ -166,19 +167,24 @@ watch(
       <span v-if="unit" class="suffix-text">
         {{ unit }}
       </span>
+
+      <!-- DATE -->
+      <span v-if="type === TextFieldTypes.date" class="suffix-icon">
+        <UIcon name="calendar"></UIcon>
+      </span>
     </div>
 
     <div class="help-text">
-      <span class="optional-text"
-        >{{ getTranslation('optional')
-        }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span></span
-      ><slot name="helpText">{{ helpText }}</slot>
+      <span class="optional-text">
+        {{ getTranslation('optional') }}<span v-if="needsHelpTextSpacer" v-html="spacer"></span>
+      </span>
+      <slot name="helpText">{{ helpText }}</slot>
     </div>
 
     <div class="error-messages-container">
-      <slot name="error-message"
-        ><span>{{ errorMessage }}</span></slot
-      >
+      <slot name="error-message">
+        <span>{{ errorMessage }}</span>
+      </slot>
     </div>
   </div>
 </template>

package/modules/index.js

@@ -3,3 +3,4 @@ export { default as UFooter } from './footer/u-footer.vue'
 export { default as UInlineEditGroup } from './inline-edit-group/u-inline-edit-group.vue'
 export { default as UNavigationToolbarTop } from './navigation-toolbar-top/u-navigation-toolbar-top.vue'
 export { default as UNavigationToolbarSide } from './navigation-toolbar-side/u-navigation-toolbar-side.vue'
+export { default as UNavigationPanel } from './navigation-panel/u-navigation-panel.vue'

package/modules/navigation-panel/navigation-panel.scss

@@ -0,0 +1,64 @@
+@use '../../base/abstracts/' as a;
+
+.navigation-panel {
+  overflow: auto;
+  padding: var(--e-space-6);
+  background-color: var(--e-c-mono-50);
+  border-right: 1px solid var(--e-c-mono-200);
+  width: a.rem(300);
+  height: 100vh;
+
+  @include a.bp(lg) {
+    width: 100%;
+    height: auto;
+    padding: var(--e-space-4) var(--e-space-5) 0;
+  }
+}
+
+.navigation-panel__tiles {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--e-space-3);
+
+  @include a.bp(lg) {
+    overflow: auto;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    column-gap: var(--e-space-3);
+    margin-left: calc(var(--e-space-5) * -1);
+    margin-right: calc(var(--e-space-5) * -1);
+    padding-left: var(--e-space-5);
+    padding-right: var(--e-space-5);
+    padding-bottom: var(--e-space-5); // This makes scrollbar not run appear over the tiles
+  }
+}
+
+.navigation-panel__label-tiles,
+.navigation-panel__label-info {
+  @include a.type(50, strong);
+
+  color: var(--e-c-mono-700);
+}
+
+.navigation-panel__label-info {
+  margin-bottom: var(--e-space-1);
+}
+
+.navigation-panel__label-tiles {
+  margin-bottom: var(--e-space-2);
+
+  @include a.bp(lg) {
+    @include a.visually-hidden;
+  }
+}
+
+.navigation-panel__info {
+  @include a.type(300, strong);
+
+  margin-bottom: var(--e-space-6);
+
+  @include a.bp(lg) {
+    @include a.type(200, strong);
+    margin-bottom: var(--e-space-4);
+  }
+}

package/modules/navigation-panel/u-navigation-panel.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface Props {
+  infoLabel: string
+  tilesLabel: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="navigation-panel">
+    <p class="navigation-panel__label-info">{{ infoLabel }}</p>
+    <div class="navigation-panel__info"><slot name="info"></slot></div>
+
+    <p class="navigation-panel__label-tiles">{{ tilesLabel }}</p>
+    <div class="navigation-panel__tiles">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./navigation-panel.scss"></style>

package/modules/navigation-toolbar-side/navigation-toolbar-side.scss

@@ -19,7 +19,7 @@
     }
 
     .navigation-toolbar-side__nav-links,
-    .navigation-toolbar-side__menu-cta {
+    .navigation-toolbar-side__menu-ctas {
       padding: 0 var(--e-space-0_5);
     }
   }

package/modules/navigation-toolbar-top/navigation-toolbar-top.scss

@@ -45,6 +45,7 @@
   width: 100%;
   height: 100%;
   transform: translate3d(100%, 0, 0);
+  z-index: a.$layer-nav-panel;
 
   .navigation-toolbar-mobile-open & {
     transform: translate3d(0, 0, 0);

package/package.json

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

package/utils/translations/translate.js

@@ -1,17 +1,7 @@
-import { deepGetByPath } from '../object/deep-get.js'
 import translations from '../../i18n/i18n.ts'
 
 const DEFAULT_LANGUAGE = 'DE'
 
-/**
- *
- * @param {string} translationKeyPath
- * @param {string} defaultValue
- * @returns {string}
- */
-export const translate = (translationKeyPath, defaultValue = '') =>
-  deepGetByPath(window._EC.translations, translationKeyPath) || defaultValue
-
 const getLanguage = () => {
   const langAttr = document.documentElement.lang.split('-')[0].toUpperCase()
 

package/elements/button/button.js

@@ -1,12 +0,0 @@
-import { defineCustomElement } from 'vue'
-import Button from './u-button.vue'
-import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
-import styles from './button.scss?inline'
-
-Button.styles = [customElementBaseStyle, styles]
-
-export const ButtonElement = {
-  register: () => {
-    customElements.define('u-button', defineCustomElement(Button))
-  },
-}

package/elements/elements.js

@@ -1,35 +0,0 @@
-// All `elements` Custom Elements. Needs some refactoring.
-
-import { ButtonElement as Button } from './button/button.js'
-import { IconButtonElement as IconButton } from './icon-button/icon-button.js'
-import { IconElement as Icon } from './icon/icon.js'
-import { LoaderElement as Loader } from './loader/loader.js'
-
-/**
- * These exports allow best tree-shaking behaviour.
- * Obviously you'll have to import 'manually' all the elements you need.
- *
- * @example
- * import { IconButton } from '@energie360/ui-library'
- * IconButton.register()
- */
-export { Button, IconButton, Icon, Loader }
-
-/**
- * With this export you get all the elements. Meaning all the elements will be inlcuded in your bundle, even if you register only one element.
- *
- * @example
- * import { Elements } from '@energie360/ui-library'
- * Elements.Button.register()
- */
-
-/**
- *
- * @type {{IconButton: {register: function(): void}, Button: {register: function(): void}, Loader: {register: function(): void}, Icon: {register: function(): void}}}
- */
-export const Elements = {
-  Button,
-  IconButton,
-  Icon,
-  Loader,
-}

package/elements/icon/icon.js

@@ -1,13 +0,0 @@
-import { defineCustomElement } from 'vue'
-import Icon from './u-icon.vue'
-import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
-import ceStyles from './icon.ce.scss?inline'
-import styles from './icon.scss?inline'
-
-Icon.styles = [customElementBaseStyle, ceStyles, styles]
-
-export const IconElement = {
-  register: () => {
-    customElements.define('u-icon', defineCustomElement(Icon))
-  },
-}

package/elements/icon-button/icon-button.js

@@ -1,12 +0,0 @@
-import { defineCustomElement } from 'vue'
-import IconButton from './u-icon-button.vue'
-import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
-import styles from './icon-button.scss?inline'
-
-IconButton.styles = [customElementBaseStyle, styles]
-
-export const IconButtonElement = {
-  register: () => {
-    customElements.define('u-icon-button', defineCustomElement(IconButton))
-  },
-}

package/elements/loader/loader.js

@@ -1,13 +0,0 @@
-import { defineCustomElement } from 'vue'
-import Loader from './u-loader.vue'
-import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
-import ceStyles from './loader.ce.scss?inline'
-import styles from './loader.scss?inline'
-
-Loader.styles = [customElementBaseStyle, ceStyles, styles]
-
-export const LoaderElement = {
-  register: () => {
-    customElements.define('u-loader', defineCustomElement(Loader))
-  },
-}

package/modules/feedback/index.js

@@ -1 +0,0 @@
-export { default as UFeedback } from './u-feedback.vue'

package/modules/inline-edit-group/index.js

@@ -1 +0,0 @@
-export { default as UInlineEditGroup } from './u-inline-edit-group.vue'