hr-design-system-handlebars 1.1.4 → 1.1.6

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.1.6 (Mon Feb 13 2023)
+
+#### 🐛 Bug Fix
+
+- BUGFIX: Fixes the layout of standard 100% [#543](https://github.com/mumprod/hr-design-system-handlebars/pull/543) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v1.1.5 (Fri Feb 10 2023)
+
+#### 🐛 Bug Fix
+
+- Bugfix/dpe 1863 [#541](https://github.com/mumprod/hr-design-system-handlebars/pull/541) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.1.4 (Fri Feb 10 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -413,7 +413,7 @@ video {
         font-stretch: condensed;
     }
 
-.-translate-x-1\/2, .-translate-y-1\/2, .-translate-x-2\/4, .rotate-45, .-rotate-45, .rotate-180, .scale-50, .scale-y-90, .scale-y-100, .transform {
+.-translate-x-1\/2, .-translate-y-1\/2, .-translate-x-2\/4, .rotate-45, .-rotate-45, .rotate-180, .scale-50, .scale-y-90, .scale-y-100, .transform, .is-loading::after {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -1486,6 +1486,12 @@ video {
 .basis-3\/5 {
   flex-basis: 60%;
 }
+.basis-1\/12 {
+  flex-basis: 8.333333%;
+}
+.basis-11\/12 {
+  flex-basis: 91.666667%;
+}
 .basis-2\/12 {
   flex-basis: 16.666667%;
 }
@@ -2101,9 +2107,13 @@ video {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
+.px-9\.5 {
+  padding-left: 2.375rem;
+  padding-right: 2.375rem;
+}
+.px-9 {
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
 }
 .py-4 {
   padding-top: 1rem;
@@ -2646,7 +2656,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1676046341192;
+  counter-reset: cnt1676280500011;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2732,7 +2742,7 @@ video {
 .grid-page {
         grid-template-columns:
             [full-start] minmax(0, 1fr)
-            [main-start] minmax(0, 63rem) [main-end]
+            [main-start] minmax(0, 63.75rem) [main-end]
             minmax(0, 1fr) [full-end];
     }
 .col-full {
@@ -2880,7 +2890,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1676046341192 1;
+  counter-increment: cnt1676280500011 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2896,7 +2906,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1676046341192);
+  content: counter(cnt1676280500011);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -2912,6 +2922,35 @@ video {
 /*! Deshalb hier eine übergangslösung dafür.                */
 /*! Langfristig sollten die Teaser auf Grid umgebaut werden */
 /*! *********************************************************/
+/*! ****************************/
+/*! Event-Calendar             */
+/*! ****************************/
+.is-loading {
+  position: relative;
+}
+.is-loading::before {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 10;
+  display: block;
+  background-color: rgba(255, 255, 255, 0.7);
+  --tw-content: '';
+  content: var(--tw-content);
+}
+.is-loading::after {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 20;
+  display: block;
+  --tw-translate-x: -50%;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        content: attr(data-prop-loading);
+}
 .\[-T\:\+Z\] {
   --t: +Z;
 }
@@ -4092,9 +4131,19 @@ video {
     padding-right: 0px;
   }
 
-  .sm\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
+  .sm\:px-9\.5 {
+    padding-left: 2.375rem;
+    padding-right: 2.375rem;
+  }
+
+  .sm\:px-9 {
+    padding-left: 2.25rem;
+    padding-right: 2.25rem;
+  }
+
+  .sm\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
   }
 
   .sm\:px-11\.5 {
@@ -4107,6 +4156,11 @@ video {
     padding-right: 2.75rem;
   }
 
+  .sm\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
   .sm\:pl-0 {
     padding-left: 0px;
   }
@@ -4478,16 +4532,16 @@ video {
     padding-right: 0px;
   }
 
-  .md\:px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
   .md\:px-5 {
     padding-left: 1.25rem;
     padding-right: 1.25rem;
   }
 
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
   .md\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -4624,19 +4678,19 @@ video {
         grid-column: main;
     }
     .md\:basis-1\/3-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((100% - (2 * var(--gap))) / 3 ) ;
-        flex-basis:calc((100% - (2 * var(--gap))) / 3 )
+        --gap: 1.5rem;
+        width: calc((100% - (2 * var(--gap))) / 3);
+        flex-basis: calc((100% - (2 * var(--gap))) / 3);
     }
     .md\:basis-2\/3-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap));
-        flex-basis:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap))
+        --gap: 1.5rem;
+        width: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
+        flex-basis: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
     }
     .md\:basis-1\/2-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((100% - var(--gap)) / 2 ); 
-        flex-basis:calc((100% - var(--gap)) / 2 ) 
+        --gap: 1.5rem;
+        width: calc((100% - var(--gap)) / 2);
+        flex-basis: calc((100% - var(--gap)) / 2);
     }
     .md\:first-of-type\:pt-0:first-of-type {
     padding-top: 0px;
@@ -4950,9 +5004,14 @@ video {
     padding-right: 2.5rem;
   }
 
-  .lg\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
+  .lg\:px-9\.5 {
+    padding-left: 2.375rem;
+    padding-right: 2.375rem;
+  }
+
+  .lg\:px-9 {
+    padding-left: 2.25rem;
+    padding-right: 2.25rem;
   }
 
   .lg\:px-4 {
@@ -5069,14 +5128,14 @@ video {
         grid-column: main;
     }
     .lg\:basis-1\/3-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((100% - (2 * var(--gap))) / 3 ) ;
-        flex-basis:calc((100% - (2 * var(--gap))) / 3 )
+        --gap: 1.5rem;
+        width: calc((100% - (2 * var(--gap))) / 3);
+        flex-basis: calc((100% - (2 * var(--gap))) / 3);
     }
     .lg\:basis-2\/3-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap));
-        flex-basis:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap))
+        --gap: 1.5rem;
+        width: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
+        flex-basis: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
     }
     .first\:lg\:-ml-4:first-child {
     margin-left: -1rem;

package/dist/assets/js/components/event/filtererDs.feature.js

@@ -6,19 +6,23 @@ require('zepto-modules/callbacks')
 require('zepto-modules/deferred')
 
 const Filterer = (context) => {
-    const { options } = context
-    const { element: rootElement } = context
-    const contentTargetClass = '.js-fr-content'
-    const errorTargetClass = 'js-fr-error-target'
-    const errorClass = 'js-fr-error'
-    const reloadTriggerClass = 'js-fr-reload-trigger'
-    const targetClass = 'js-fr-target'
-    const triggerClass = 'js-fr-trigger'
-    const triggerDomNodes = hr$(`.${triggerClass}`, rootElement)
+    const { options } = context,
+        { element: rootElement } = context,
+        pushToBrowserHistory = options.pushToBrowserHistory || false,
+        loadingCssTrigger = options.loadingCssTrigger || 'is-loading',
+        hiddenElementCssTrigger = options.hiddenElementCssTrigger || 'hidden',
+        navItemSelectedCssTrigger = options.navItemSelectedCssTrigger || 'selected',
+        contentTargetClass = '.js-fr-content',
+        errorTargetClass = 'js-fr-error-target',
+        errorClass = 'js-fr-error',
+        reloadTriggerClass = 'js-fr-reload-trigger',
+        targetClass = 'js-fr-target',
+        triggerClass = 'js-fr-trigger',
+        triggerDomNodes = hr$(`.${triggerClass}`, rootElement),
+        errorTargetDomNodes = hr$(`.${errorTargetClass}`, rootElement),
+        errorDomNodes = hr$(`.${errorClass}`),
+        contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
     let targetDomNodes = hr$(`.${targetClass}`, rootElement)
-    const errorTargetDomNodes = hr$(`.${errorTargetClass}`, rootElement)
-    const errorDomNodes = hr$(`.${errorClass}`)
-    const contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
 
     const init = function () {
         for (let i = 0; i < triggerDomNodes.length; i++) {
@@ -40,13 +44,13 @@ const Filterer = (context) => {
             }
         }
 
-        if (
-            !rootElement.classList.contains('-excerpt') &&
-            !!(window.history && window.history.pushState)
-        ) {
+        if (pushToBrowserHistory && !!(window.history && window.history.pushState)) {
             listen('popstate', handlePopstate, window)
             //initial state ersetzen so dass es ein rückkehrpunkt gibt
-            const selectedTrigger = hr$('.' + triggerClass + '.-selected', rootElement)
+            const selectedTrigger = hr$(
+                `.${triggerClass}.${navItemSelectedCssTrigger}`,
+                rootElement
+            )
             history.replaceState(
                 {
                     sel: triggerClass,
@@ -66,7 +70,7 @@ const Filterer = (context) => {
         clearSelected()
 
         if (!forceReset) {
-            e.currentTarget.classList.add('-selected')
+            e.currentTarget.classList.add(navItemSelectedCssTrigger)
         }
 
         //hacky weil e beim start auch kein Event sein kann
@@ -76,10 +80,10 @@ const Filterer = (context) => {
     }
 
     const clearSelected = function () {
-        let triggerDomNodes = hr$(`.${triggerClass}.-selected`, rootElement)
+        let triggerDomNodes = hr$(`.${triggerClass}.${navItemSelectedCssTrigger}`, rootElement)
 
         triggerDomNodes.forEach(function (triggerDomNode) {
-            triggerDomNode.classList.remove('-selected')
+            triggerDomNode.classList.remove(navItemSelectedCssTrigger)
         })
     }
 
@@ -108,10 +112,10 @@ const Filterer = (context) => {
                     loadContent(currentTarget)
                 } else {
                     stratHideOthersById(targetDomNodes, data.crit, reset)
-                    if (push && !rootElement.classList.contains('-excerpt')) {
+                    if (push && pushToBrowserHistory) {
                         history.pushState(
                             {
-                                sel: '.' + currentTarget + '.-selected',
+                                sel: `.${currentTarget}.${navItemSelectedCssTrigger}`,
                                 crit: data.crit,
                             },
                             null,
@@ -127,10 +131,10 @@ const Filterer = (context) => {
                     loadContent(currentTarget)
                 } else {
                     stratHideOthersStartsWithId(targetDomNodes, data.crit, reset)
-                    if (push && !rootElement.classList.contains('-excerpt')) {
+                    if (push && pushToBrowserHistory) {
                         history.pushState(
                             {
-                                sel: '.' + currentTarget + '.-selected',
+                                sel: `.${currentTarget}.${navItemSelectedCssTrigger}`,
                                 crit: data.crit,
                             },
                             null,
@@ -146,7 +150,7 @@ const Filterer = (context) => {
             }
         }
 
-       /* if (countXTClick) {
+        /* if (countXTClick) {
             pi(
                 xtpage +
                     '&pchap=' +
@@ -163,11 +167,11 @@ const Filterer = (context) => {
     }
     const removeErrors = function () {
         if (errorTargetDomNodes.length > 0) {
-            errorTargetDomNodes[0].classList.add('hidden')
+            errorTargetDomNodes[0].classList.add(hiddenElementCssTrigger)
         }
 
         if (errorDomNodes.length > 0) {
-            errorDomNodes[0].classList.add('hidden')
+            errorDomNodes[0].classList.add(hiddenElementCssTrigger)
         }
     }
     const loadContent = function (currentTarget) {
@@ -184,7 +188,7 @@ const Filterer = (context) => {
             cache: true,
             beforeSend: function () {
                 console.log('before load')
-                $(contentTargetClass, rootElement).addClass('-isLoading')
+                $(contentTargetClass, rootElement).addClass(loadingCssTrigger)
             },
         })
             .done(function (data, status, xhr) {
@@ -198,7 +202,7 @@ const Filterer = (context) => {
                         $(contentTargetClass, rootElement).append(data)
 
                         targetDomNodes = hr$('.' + targetClass, rootElement)
-                        $(contentTargetClass, rootElement).removeClass('-isLoading')
+                        $(contentTargetClass, rootElement).removeClass(loadingCssTrigger)
                         $(currentTarget, rootElement)
                             .closest('.' + reloadTriggerClass)
                             .removeClass(reloadTriggerClass)
@@ -210,7 +214,7 @@ const Filterer = (context) => {
             })
             .fail(function (data, status, xhr) {
                 console.log('load error')
-                $(contentTargetClass, rootElement).addClass('-isLoading')
+                $(contentTargetClass, rootElement).addClass(loadingCssTrigger)
             })
     }
     const createInlineUrl = function (element) {
@@ -229,7 +233,7 @@ const Filterer = (context) => {
             )[0]
             doFilter(target, false, false)
             clearSelected()
-            target.classList.add('-selected')
+            target.classList.add(navItemSelectedCssTrigger)
         }
     }
     const initial = function () {
@@ -242,16 +246,16 @@ const Filterer = (context) => {
 
         if (reset) {
             for (i = 0; i < targetDomNodes.length; i++) {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
             }
             return
         }
 
         for (i = 0; i < targetDomNodes.length; i++) {
             if (targetDomNodes[i].getAttribute('id') !== crit) {
-                targetDomNodes[i].classList.add('hidden')
+                targetDomNodes[i].classList.add(hiddenElementCssTrigger)
             } else {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
 
                 found = true
             }
@@ -267,16 +271,16 @@ const Filterer = (context) => {
 
         if (reset) {
             for (i = 0; i < targetDomNodes.length; i++) {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
             }
             return
         }
 
         for (i = 0; i < targetDomNodes.length; i++) {
             if (targetDomNodes[i].getAttribute('id').indexOf(crit) !== 0) {
-                targetDomNodes[i].classList.add('hidden')
+                targetDomNodes[i].classList.add(hiddenElementCssTrigger)
             } else {
-                targetDomNodes[i].classList.remove('hidden')
+                targetDomNodes[i].classList.remove(hiddenElementCssTrigger)
 
                 found = true
             }
@@ -289,7 +293,7 @@ const Filterer = (context) => {
     const displayErrorTarget = function () {
         if (targetDomNodes.length >= 1) {
             if (errorTargetDomNodes.length > 0) {
-                errorTargetDomNodes[0].classList.remove('hidden')
+                errorTargetDomNodes[0].classList.remove(hiddenElementCssTrigger)
             }
         }
     }

package/dist/views/components/event/calendar/event_calendar_event_teaser.hbs

@@ -1,4 +1,4 @@
-<article id="{{this.startDate.htmlDate}}" class="flex col-span-12 md:flex-row gap-y-3 gap-x-4 md:px-0 js-fr-target{{#unless @first}} border-t border-event-calendar-secondary{{/unless}}{{#unless _showTeaser}} hidden{{/unless}}" x-data="{ avStart: false }">
+<article id="{{this.startDate.htmlDate}}" class="col-span-12 md:flex-row gap-y-3 gap-x-4 md:px-0 js-fr-target{{#unless @first}} border-t border-event-calendar-secondary{{/unless}}{{#unless _showTeaser}} hidden{{/unless}}" x-data="{ avStart: false }">
     <div class="border-none h-full">
         <div class="relative">
             <div class="flex flex-col items-stretch sm:flex-row">
@@ -13,7 +13,7 @@
                     <div class="flex flex-col items-start basis-10/12 w-10/12">
                         <div class="absolute top-0 left-0 w-full sm:static">
                             <div class="ar-4-3 sm:ar-auto">
-                                <header class="absolute bottom-0 left-0 p-4 sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent">
+                                <header class="absolute bottom-0 left-0 p-4 w-full sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent">
                                     {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }} 
                                         {{#> components/teaser/components/teaser_header}}
                                             {{#with this.label}}

package/dist/views/components/grid/grid_group_highlight.hbs

@@ -1,6 +1,6 @@
 </div>
 <div class="grid col-full grid-page mt-6{{inline-switch _backgroundColor '["1","2"]' '[" bg-grey-concrete"," bg-orange-bridesmaid"]'}}">
-    <section class="grid grid-cols-12 py-6 sm:px-8 col-full sm:col-main gap-x-6 gap-y-9">
+    <section class="grid grid-cols-12 py-6 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-9">
         <div class="grid content-start grid-cols-12 col-span-12 gap-x-6 gap-y-6">
             {{> @partial-block }}
         </div>

package/dist/views/components/grid/grid_group_tabbed.hbs

@@ -1,5 +1,5 @@
 </div>
-<section class="grid grid-cols-12 px-8 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
+<section class="grid grid-cols-12 px-9.5 py-8 mx-4 mt-6 bg-blue-400 sm:mx-0 rounded-tl-hr rounded-br-hr col-full sm:col-main gap-x-6 gap-y-6">
     {{> @partial-block }}
 </section>
 <div class="{{> components/grid/grid_group_wrapper_classes }}">

package/dist/views/components/grid/grid_group_wrapper_classes.hbs

@@ -1 +1 @@
-grid grid-cols-12 bg-white pt-6 sm:px-8 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14
+grid grid-cols-12 bg-white pt-6 sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14

package/dist/views/components/teaser/teaser_stage.hbs

@@ -6,7 +6,7 @@
                     {{> components/base/image/responsive_image this.teaserImage _type="stage" _variant="default" _addClassImg="w-full blur-2xl"}}
                 </div>   
             {{/unless}}
-            <div class="col-full lg:col-main lg:px-8 relative">
+            <div class="col-full lg:col-main lg:px-9.5 relative">
                 <div class="relative max-h-stage overflow-visible before:content-[''] before:block before:w-full before:pt-3/4 sm:before:pt-stage">
                     <div class="{{#if this.isWide}}lg:absolute lg:h-full lg:w-full-hd lg:left-1/2 lg:top-0 lg:-ml-240{{else}}absolute h-full w-full top-0{{/if}}">
                         {{#if this.isWide}}

package/dist/views/components/teaser/teaser_standard.hbs

@@ -15,10 +15,10 @@
         </figure>
         {{#if this.displayTeaserBodyAsImageOverlay}}
             {{#decorator 'components/teaser/components/teaser_image_overlay' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}
-                <div class="flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed">
+                <div class="basis-1/12 flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed">
                     {{> components/event/instant_dates}}
                 </div>
-                {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'py-4 md:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'py-4 md:px-4')}}
+                {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
             {{/decorator}}
         {{else}}
             {{> components/teaser/components/teaser_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.1.4",
+    "version": "1.1.6",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

package/src/assets/css/custom-utilities.css

@@ -91,7 +91,7 @@
     .grid-page {
         grid-template-columns:
             [full-start] minmax(0, 1fr)
-            [main-start] minmax(0, 63rem) [main-end]
+            [main-start] minmax(0, 63.75rem) [main-end]
             minmax(0, 1fr) [full-end];
     }
 
@@ -143,62 +143,75 @@
     }
 
     /*! *********************************************************/
-    /*! Prozentuale Breite bei Flexbox bei gleichzeitigem       */ 
+    /*! Prozentuale Breite bei Flexbox bei gleichzeitigem       */
     /*! nutzen von column-gap funktioniert nicht richtig.       */
     /*! Deshalb hier eine übergangslösung dafür.                */
     /*! Langfristig sollten die Teaser auf Grid umgebaut werden */
     /*! *********************************************************/
- 
+
     .basis-1\/3-gap-4 {
-        --gap: 1rem; 
-        width:calc((100% - (2 * var(--gap))) / 3 ); 
-        flex-basis:calc((100% - (2 * var(--gap))) / 3 )
+        --gap: 1rem;
+        width: calc((100% - (2 * var(--gap))) / 3);
+        flex-basis: calc((100% - (2 * var(--gap))) / 3);
     }
     .basis-2\/3-gap-4 {
-        --gap: 1rem; 
-        width:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap));
-        flex-basis:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap))
+        --gap: 1rem;
+        width: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
+        flex-basis: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
     }
     .basis-1\/2-gap-4 {
-        --gap: 1rem; 
-        width:calc((100% - var(--gap)) / 2 ) ;
-        flex-basis:calc((100% - var(--gap)) / 2 ) 
+        --gap: 1rem;
+        width: calc((100% - var(--gap)) / 2);
+        flex-basis: calc((100% - var(--gap)) / 2);
     }
     .basis-1\/4-gap-4 {
-        --gap: 1rem; 
-        width:calc((100% - (4 * var(--gap))) / 4 ) ;
-        flex-basis:calc((100% - (4 * var(--gap))) / 4 ) 
+        --gap: 1rem;
+        width: calc((100% - (4 * var(--gap))) / 4);
+        flex-basis: calc((100% - (4 * var(--gap))) / 4);
     }
 
     .basis-3\/4-gap-4 {
-        --gap: 1rem; 
-        width:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap));
-        flex-basis:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap))
+        --gap: 1rem;
+        width: calc((((100% - (4 * var(--gap))) / 4) * 3) + var(--gap));
+        flex-basis: calc((((100% - (4 * var(--gap))) / 4) * 3) + var(--gap));
     }
     .basis-1\/3-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((100% - (2 * var(--gap))) / 3 ) ;
-        flex-basis:calc((100% - (2 * var(--gap))) / 3 )
+        --gap: 1.5rem;
+        width: calc((100% - (2 * var(--gap))) / 3);
+        flex-basis: calc((100% - (2 * var(--gap))) / 3);
     }
     .basis-2\/3-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap));
-        flex-basis:calc((((100% - (2 * var(--gap))) / 3 ) * 2) + var(--gap))
+        --gap: 1.5rem;
+        width: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
+        flex-basis: calc((((100% - (2 * var(--gap))) / 3) * 2) + var(--gap));
     }
     .basis-1\/2-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((100% - var(--gap)) / 2 ); 
-        flex-basis:calc((100% - var(--gap)) / 2 ) 
+        --gap: 1.5rem;
+        width: calc((100% - var(--gap)) / 2);
+        flex-basis: calc((100% - var(--gap)) / 2);
     }
     .basis-1\/4-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((100% - (4 * var(--gap))) / 4 );
-        flex-basis:calc((100% - (4 * var(--gap))) / 4 ) 
+        --gap: 1.5rem;
+        width: calc((100% - (4 * var(--gap))) / 4);
+        flex-basis: calc((100% - (4 * var(--gap))) / 4);
     }
     .basis-3\/4-gap-6 {
-        --gap: 1.5rem; 
-        width:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap));
-        flex-basis:calc((((100% - (4 * var(--gap))) / 4 ) * 3) + var(--gap))
+        --gap: 1.5rem;
+        width: calc((((100% - (4 * var(--gap))) / 4) * 3) + var(--gap));
+        flex-basis: calc((((100% - (4 * var(--gap))) / 4) * 3) + var(--gap));
     }
 
+    /*! ****************************/
+    /*! Event-Calendar             */
+    /*! ****************************/
+    .is-loading {
+        @apply relative;
+
+        @apply before:content-[''] before:absolute before:block before:inset-0 before:bg-white/70 before:z-10;
+        @apply after:absolute after:block after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:z-20;
+    }
+
+    .is-loading::after {
+        content: attr(data-prop-loading);
+    }
 }

package/src/stories/views/components/event/calendar/event_calendar_components.stories.mdx

@@ -14,7 +14,7 @@ import eventCalendarFooterData from './fixtures/event_calendar_footer.json'
     }}
     decorators={[
         (Story) => {
-            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main"><div class="col-span-12">
+            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main"><div class="col-span-12">
                 ${Story()} 
                 </div></div></div>`
         },