@energie360/ui-library 0.1.4 → 0.1.5

package/utils/dom/dom.js

@@ -0,0 +1,167 @@
+/**
+ * Wrap an element with another element
+ *
+ * @param {Node} el
+ * @param {string} wrapper - Tag name of wrapper element. Can also have a classname (like emmet notation)
+ *
+ * @returns {Node}
+ */
+export const wrap = (el, wrapper) => {
+  const parsedWrapper = wrapper.split('.')
+  const wrapperEl = document.createElement(parsedWrapper[0])
+
+  if (parsedWrapper.length > 1) {
+    wrapperEl.className = parsedWrapper.slice(1).join(' ')
+  }
+
+  el.parentNode.insertBefore(wrapperEl, el)
+  wrapperEl.appendChild(el)
+
+  return wrapperEl
+}
+
+/**
+ * Get element position relative to document.
+ *
+ * @param {Node} el
+ * @returns {{top: number, left: number, width: number, height: number}}
+ */
+export const getElementPosition = (el) => {
+  const elRect = el.getBoundingClientRect()
+  const scrollTop = window.scrollY
+  const scrollLeft = window.scrollX
+
+  return {
+    top: elRect.top + scrollTop,
+    left: elRect.left + scrollLeft,
+    width: elRect.width,
+    height: elRect.height,
+  }
+}
+
+/**
+ * Decode HTML encoded string.
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+export const htmlDecode = (str) => {
+  const doc = new DOMParser().parseFromString(str, 'text/html')
+  return doc.documentElement.textContent
+}
+
+export const htmlToDocFragment = (str) => {
+  const tpl = document.createElement('template')
+  tpl.innerHTML = str
+  return tpl.content.cloneNode(true)
+}
+
+/**
+ * Reverse order of direct child nodes of given parent.
+ *
+ * @param {Node} parent
+ */
+export const reverseChildren = (parent) => {
+  for (let i = 1; i < parent.childNodes.length; i++) {
+    parent.insertBefore(parent.childNodes[i], parent.firstChild)
+  }
+}
+
+/**
+ * Check if element is in a slotted element.
+ *
+ * @param {Element} el
+ * @returns {boolean}
+ */
+const isInSlottedElement = (el) => {
+  const parentEl = el.parentElement
+
+  if (parentEl === document.body || !parentEl) {
+    return false
+  }
+
+  if (parentEl.assignedSlot) {
+    return true
+  } else {
+    return isInSlottedElement(parentEl)
+  }
+}
+
+/**
+ *
+ * @param {Element} el
+ * @returns {boolean}
+ */
+const isOffsetParent = (el) => {
+  const style = getComputedStyle(el)
+  return style.position === 'relative' || style.position === 'absolute'
+}
+
+/**
+ * Get the expected offsetParent within nested shadow roots.
+ *
+ * Because elements are nested in web components or slotted in web components we can't get desired offsetParent.
+ *
+ * @param {Element} el
+ * @returns {Element}
+ */
+export const getOffsetParent = (el) => {
+  if (el === document.body) {
+    // We arrived at the top.
+    // 'body' must be the offsetParent then.
+    return el
+  }
+
+  const offsetParent = el.offsetParent
+
+  if (offsetParent === document.body || offsetParent === null) {
+    // It's possible that we're a slotted element, in which case we'll always have the potentially 'wrong' offsetParent 'body'.
+    // Dig deeper...
+    if (el.assignedSlot) {
+      // A <slot> doesn't have an offsetParent. Let's use the parentNode.
+      const parentElement = el.assignedSlot.parentElement
+
+      // Handle case where the parent node actually is an offsetParent
+      if (isOffsetParent(parentElement)) {
+        return parentElement
+      }
+
+      return getOffsetParent(el.assignedSlot.parentElement)
+    }
+
+    if (isInSlottedElement(el)) {
+      return getOffsetParent(el.parentElement)
+    }
+
+    if (el.getRootNode() instanceof ShadowRoot) {
+      // If we're nested in another shadow root we'll also always get 'body' as offsetParent.
+      // Check the offsetParent of the current host element.
+      return getOffsetParent(el.getRootNode().host)
+    }
+  }
+
+  return offsetParent
+}
+
+/**
+ * Get offset positions of parent which is not 'static'.
+ *
+ * @param {Element} el
+ * @returns {Object}
+ */
+export const getOffsetParentPosition = (el) => {
+  const offsetParent = getOffsetParent(el)
+  const elRect = el.getBoundingClientRect()
+  const offsetParentRect = offsetParent.getBoundingClientRect()
+
+  return {
+    top: elRect.top - offsetParentRect.top,
+    left: elRect.left - offsetParentRect.left,
+  }
+}
+
+export const moveChildren = (sourceParent, targetParent) => {
+  while (sourceParent.childNodes.length > 0) {
+    targetParent.appendChild(sourceParent.childNodes[0])
+  }
+}

package/utils/functions/breakpoint.js

@@ -0,0 +1,11 @@
+import { mediaquery } from '@energie360/design-tokens/design-tokens.json'
+
+// TODO: return .matches value
+
+export const isSmall = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.s})`)
+
+export const isMedium = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.m})`)
+
+export const isLarge = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.lg})`)
+
+export const isXLarge = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.xl})`)

package/utils/functions/debounce.js

@@ -0,0 +1,25 @@
+export const debounce = (callback, wait = 200) => {
+  let timeoutId = null
+
+  return function (...args) {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      callback.apply(this, args)
+    }, wait)
+  }
+}
+
+export const debounceRaf = function (fn) {
+  let rid
+
+  return (...args) => {
+    if (rid) {
+      return
+    }
+
+    rid = window.requestAnimationFrame(() => {
+      fn(...args)
+      rid = undefined
+    })
+  }
+}

package/base-style.js

@@ -1 +0,0 @@
-import './base/main-base.scss'

package/components/icon-teaser/icon-teaser.scss

@@ -1,58 +0,0 @@
-@use '../../base/abstracts/' as a;
-
-.icon-tesaer__content {
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--e-space-2);
-}
-
-.icon-teaser__image-wrapper {
-  margin: 0 auto var(--e-space-6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  width: a.rem(120);
-  height: a.rem(120);
-  border-radius: 100%;
-  background-color: var(--e-c-primary-01-50);
-
-  @include a.bp(m) {
-    margin-bottom: var(--e-space-4);
-    width: a.rem(96);
-    height: a.rem(96);
-  }
-
-  img {
-    width: a.rem(56);
-    height: a.rem(56);
-
-    @include a.bp(m) {
-      width: a.rem(38);
-      height: a.rem(38);
-    }
-  }
-}
-
-.icon-teaser__title {
-  @include a.type(400, strong);
-
-  text-align: center;
-
-  @include a.bp(m) {
-    @include a.type(300, strong);
-  }
-}
-
-.icon-teaser__description {
-  @include a.type(200);
-
-  margin-top: var(--e-space-3);
-  text-align: center;
-
-  @include a.bp(m) {
-    margin-top: var(--e-space-1);
-
-    @include a.type(100);
-  }
-}

package/components/icon-teaser/u-icon-teaser.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { Image } from '../../elements/types.ts'
-
-export interface IconTeaser {
-  title?: string
-  description?: string
-  image?: Image
-}
-
-defineProps<IconTeaser>()
-</script>
-
-<template>
-  <div class="icon-teaser">
-    <div class="icon-teaser__image-wrapper">
-      <slot name="image">
-        <img aria-hidden="true" :src="image?.src" :alt="image?.alt" />
-      </slot>
-    </div>
-
-    <div class="icon-teaser__content">
-      <h2 class="icon-teaser__title">
-        <slot name="title">{{ title }}</slot>
-      </h2>
-
-      <p class="icon-teaser__description">
-        <slot name="description">{{ description }}</slot>
-      </p>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@use './icon-teaser.scss';
-</style>

package/components/icon-teaser-group/icon-teaser-group.scss

@@ -1,10 +0,0 @@
-@use '../../base/abstracts/' as a;
-
-.icon-teaser-group {
-  display: flex;
-  gap: var(--e-space-10);
-
-  @include a.bp(lg) {
-    flex-direction: column;
-  }
-}

package/components/icon-teaser-group/u-icon-teaser-group.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import UIconTeaser, { IconTeaser } from '../icon-teaser/u-icon-teaser.vue'
-
-interface Props {
-  items?: IconTeaser[]
-}
-
-defineProps<Props>()
-</script>
-
-<template>
-  <div class="icon-teaser-group">
-    <slot><UIconTeaser v-for="(item, idx) in items" :key="idx" v-bind="item"></UIconTeaser></slot>
-  </div>
-</template>
-
-<style lang="scss">
-@use './icon-teaser-group.scss';
-</style>

package/utility/utility-text.js

@@ -1 +0,0 @@
-import '../elements/text-link/text-link.scss'