hr-design-system-handlebars 1.11.10 → 1.11.12

package/.babelrc.json

@@ -0,0 +1,14 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.storybook/main.js

@@ -1,29 +1,42 @@
+import remarkGfm from 'remark-gfm'
 const path = require('path')
 const fs = require('fs')
 const FlatContextPlugin = require('../build/webpack/feature-loader/plugin/FlatContextPlugin')
-
-module.exports = {
+const config = {
     staticDirs: ['../src/assets', '../src/assets/js'],
     stories: [
-        '../src/stories/Introduction.stories.mdx',
-        '../src/**/*.stories.mdx',
+        '../src/stories/Introduction.mdx',
+        '../src/**/*.mdx',
         '../src/**/*.stories.@(js|jsx|ts|tsx)',
     ],
     addons: [
         '@storybook/addon-links',
-        '@storybook/addon-essentials',
         {
-            name: '@storybook/addon-postcss',
+            name: '@storybook/addon-essentials',
+            options: {
+                docs: false,
+            },
+        },
+        '@storybook/addon-a11y',
+        {
+            name: '@storybook/addon-styling',
             options: {
-                postcssLoaderOptions: {
+                postCss: {
                     implementation: require('postcss'),
                 },
             },
         },
-        '@storybook/addon-a11y',
-        'storybook-conditional-toolbar-selector',
+        {
+            name: '@storybook/addon-docs',
+            options: {
+                mdxPluginOptions: {
+                    mdxCompileOptions: {
+                        remarkPlugins: [remarkGfm],
+                    },
+                },
+            },
+        },
     ],
-
     webpackFinal: async (config, { configType }) => {
         // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
         // You can change the configuration based on that.
@@ -32,9 +45,11 @@ module.exports = {
         config.resolve.alias = {
             ...config.resolve.alias,
             scripts: path.resolve(__dirname, '../scripts'),
+            handlebars$: path.resolve(__dirname, '../node_modules/handlebars/dist/handlebars.js'),
             components: path.resolve(__dirname, '../src/stories/views/components'),
             base: path.resolve(__dirname, '../src/stories/views/base'),
             tailwind$: path.resolve(__dirname, '../src/assets/tailwind.css'),
+            tailwindConfig$: path.resolve(__dirname, '../tailwind.config.js'),
             hrQuery$: path.resolve(__dirname, '../src/stories/views/generic/hrQuery.subfeature.js'),
             initializer$: path.resolve(
                 __dirname,
@@ -45,7 +60,6 @@ module.exports = {
                 '../build/webpack/feature-loader/initializer/loader.js'
             ),
         }
-
         config.module.rules.push(
             {
                 test: /\.hbs$/,
@@ -92,52 +106,12 @@ module.exports = {
                 ],
             }
         )
-
         config.plugins.push(
             new FlatContextPlugin(
                 '/feature',
                 path.resolve(__dirname, '../src/stories/views/'),
                 /\.feature\.js$/
-            ),
-            {
-                apply: (compiler) => {
-                    compiler.hooks.afterCompile.tap('UpdateTailwindPlugin', (compilation) => {
-                        if (
-                            undefined != compilation.compiler.watchFileSystem &&
-                            Object.keys(compilation.compiler.watchFileSystem.watcher.mtimes)
-                                .length > 0
-                        ) {
-                            if (
-                                !Object.keys(
-                                    compilation.compiler.watchFileSystem.watcher.mtimes
-                                ).some((value) => value.includes('tailwind.css'))
-                            ) {
-                                fs.readFile(
-                                    path.resolve(__dirname, '../src/assets/tailwind.css'),
-                                    'utf8',
-                                    (err, data) => {
-                                        if (err) {
-                                            console.error(err)
-                                            return
-                                        }
-                                        fs.writeFile(
-                                            path.resolve(__dirname, '../src/assets/tailwind.css'),
-                                            data,
-                                            (err) => {
-                                                if (err) {
-                                                    console.error(err)
-                                                    return
-                                                }
-                                                //file written successfully
-                                            }
-                                        )
-                                    }
-                                )
-                            }
-                        }
-                    })
-                },
-            }
+            )
         )
 
         config.stats = 'verbose'
@@ -145,4 +119,12 @@ module.exports = {
         // Return the altered config
         return config
     },
+    framework: {
+        name: '@storybook/html-webpack5',
+        options: {},
+    },
+    docs: {
+        autodocs: true,
+    },
 }
+export default config

package/.storybook/preview-head.html

@@ -3,6 +3,9 @@
 <script defer src="https://unpkg.com/@alpine-collective/toolkit@1.0.0/dist/cdn.min.js"></script>
 <script defer src="https://unpkg.com/alpinejs@3.8.1/dist/cdn.min.js"></script>
 <script src="vendor/modernizr/modernizr.cust.js"></script>
+<script src="vendor/js/header.alpine.js"></script>
 <!--to be sure hyphems work correctly lang Attribute needs to be "de"
 see: https://github.com/storybookjs/storybook/issues/11706 -->
-<script>document.documentElement.setAttribute('lang', 'de')</script>
+<script>
+    document.documentElement.setAttribute('lang', 'de')
+</script>

package/.storybook/preview.js

@@ -1,9 +1,9 @@
 import '!style-loader!css-loader!postcss-loader!tailwind'
 import 'tailwind'
+import { withThemeByDataAttribute } from '@storybook/addon-styling'
 
 import hrDesignsystemDark from './HRDesignsystemDark'
 import hrDesignsystemLight from './HRDesignsystemLight'
-import { withThemeDecorator } from './withThemeDecorator'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 
 import Initializer from '../build/webpack/feature-loader/initializer/initializer'
@@ -50,10 +50,10 @@ document.addEventListener('DOMContentLoaded', function (event) {
     }
 })
 
-if (process.env.NODE_ENV !== 'production') {
+/*if (process.env.NODE_ENV !== 'production') {
     console.log(Initializer)
     console.log('Looks like we are in development mode!')
-}
+}*/
 
 const customViewports = {
     hrMin: {
@@ -145,42 +145,12 @@ export const parameters = {
     // Storybook a11y addon configuration
     a11y: {
         // the target DOM element
-        element: '#root',
+        element: '#storybook-root',
         // sets the execution mode for the addon
         manual: false,
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: { expanded: true },
-    customConditionalToolbar: {
-        /** Defines the possible sets that can be shown */
-        sets: [
-            {
-                id: 'brands',
-                options: [
-                    { id: 'hr', title: 'hr.de' },
-                    { id: 'hessenschau', title: 'hessenschau.de' },
-                    { id: 'hr1', title: 'hr1.de' },
-                    { id: 'hr2', title: 'hr2.de' },
-                    { id: 'hr3', title: 'hr3.de' },
-                    { id: 'hr4', title: 'hr4.de' },
-                    { id: 'you-fm', title: 'you-fm.de' },
-                    { id: 'hr-inforadio', title: 'hr-info.de' },
-                    { id: 'hr-fernsehen', title: 'hr-fernsehen.de' },
-                    { id: 'hr-rundfunkrat', title: 'hr-rundfunkrat.de' },
-                    { id: 'hr-werbung', title: 'hr-werbung.de' },
-                    { id: 'hr-bigband', title: 'hr-bigband.de' },
-                    { id: 'hr-sinfonieorchester', title: 'hr-sinfonieorchester.de' },
-                ],
-            },
-        ],
-        default: 'brands',
-        /** Icon to use in toolbar, defaults to `switchalt`. All possible icons here: https://storybookjs.netlify.app/official-storybook/?path=/story/basics-icon--labels */
-        icon: 'globe',
-        /** title when hovering over the icon */
-        title: 'Themes',
-        /** Setting disable to true makes the addon disabled by default */
-        // disable: true,
-    },
     docs: {
         theme: hrDesignsystemLight,
     },
@@ -203,4 +173,24 @@ export const parameters = {
     },
 }
 
-export const decorators = [withThemeDecorator]
+export const decorators = [
+    withThemeByDataAttribute({
+        themes: {
+            'hessenschau': 'hessenschau',
+            'hr': 'hr',
+            'hr1': 'hr1',
+            'hr2': 'hr2',
+            'hr3': 'hr3',
+            'hr4': 'hr4',
+            'you-fm': 'you-fm',
+            'hr-inforadio': 'hr-inforadio',
+            'hr-fernsehen': 'hr-fernsehen',
+            'hr-bigband': 'hr-bigband',
+            'hr-sinfonieorchester': 'hr-sinfonieorchester',
+            'hr-werbung': 'hr-werbung',
+            'hr-rundfunkrat': 'hr-rundfunkrat',
+        },
+        defaultTheme: 'hessenschau',
+        attributeName: 'data-theme',
+    }),
+]

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# v1.11.12 (Thu Apr 20 2023)
+
+#### 🐛 Bug Fix
+
+- Fixing data-model, and css [#608](https://github.com/mumprod/hr-design-system-handlebars/pull/608) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
+# v1.11.11 (Tue Apr 18 2023)
+
+#### 🐛 Bug Fix
+
+- DPE-2270 - pfeil fehlt in der navigation bei aktiven menüpunkt [#607](https://github.com/mumprod/hr-design-system-handlebars/pull/607) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### 🏠 Internal
+
+- Chore/dpe 2265 [#606](https://github.com/mumprod/hr-design-system-handlebars/pull/606) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@szuelch](https://github.com/szuelch)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.11.10 (Mon Apr 17 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2679,7 +2679,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1681728211612;
+  counter-reset: cnt1681950034913;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2771,6 +2771,10 @@ video {
 .col-full {
         grid-column: full;
     }
+.-currentBrand::before {
+  --tw-content: '';
+  content: var(--tw-content);
+}
 @media (min-width: 1024px) {
 
   .-currentBrand::before {
@@ -2802,6 +2806,8 @@ video {
   border-bottom-width: 8px;
   --tw-border-opacity: 1;
   border-left-color: rgba(255, 255, 255, var(--tw-border-opacity));
+  --tw-content: '';
+  content: var(--tw-content);
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-left-color: #ffffff;
@@ -2838,6 +2844,8 @@ video {
   border-bottom-width: 7px;
   --tw-border-opacity: 1;
   border-left-color: rgba(255, 255, 255, var(--tw-border-opacity));
+  --tw-content: '';
+  content: var(--tw-content);
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-left-color: #ffffff;
@@ -2909,7 +2917,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1681728211612 1;
+  counter-increment: cnt1681950034913 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2925,7 +2933,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1681728211612);
+  content: counter(cnt1681950034913);
 }
 /*! ****************************/
 /*! text-shadow                */

package/dist/views/components/page/page_pagination.hbs

@@ -54,7 +54,7 @@
             </main>
             
             <div class="flex flex-wrap justify-center w-full max-w-full">
-                {{> components/pagination/pagination }} 
+                {{> components/pagination/pagination this }} 
             </div>
         </div>
     </body>

package/dist/views/components/pagination/pagination.hbs

@@ -1,18 +1,19 @@
-{{~#if this.isCurrentPageValid ~}}
+{{~#if currentPageValid ~}}
     {{> components/pagination/pagination_current_page_valid 
-    _moreThanOnePage=this.isMoreThanOnePage
-    _firstPage=this.isFirstPage
-    _secondPage=this.isSecondPage 
-    _notLastPage=this.isNotLastPage   
-    _onlyTwoPages=this.isOnlyTwoPages 
-    _onlyThreePages=this.isOnlyThreePages 
-    _totalPages=this.totalPages 
-    _currentPage=this.currentPage}}
+    _moreThanOnePage=moreThanOnePage
+    _firstPage=firstPage
+    _secondPage=secondPage 
+    _notLastPage=notLastPage 
+    _notLastButOnePage=notLastButOnePage  
+    _onlyTwoPages=onlyTwoPages 
+    _onlyThreePages=onlyThreePages 
+    _totalPages=totalPages 
+    _currentPage=currentPage}}
 {{else}}
     {{> components/pagination/pagination_current_page_invalid 
-    _moreThanOnePage=this.isMoreThanOnePage 
-    _onlyTwoPages=this.isOnlyTwoPages 
-    _onlyThreePages=this.isOnlyThreePages 
-    _totalPages=this.totalPages 
-    _currentPage=this.currentPages}}
+    _moreThanOnePage=moreThanOnePage 
+    _onlyTwoPages=onlyTwoPages 
+    _onlyThreePages=onlyThreePages 
+    _totalPages=totalPages 
+    _currentPage=currentPages}}
 {{~/if~}}

package/dist/views/components/pagination/pagination_current_page_invalid.hbs

@@ -1,4 +1,4 @@
-<nav class="flex content-center py-10" role="navigation" aria-label="Paginierung">
+<nav class="flex content-center justify-center py-10" role="navigation" aria-label="Paginierung">
         {{> components/pagination/pagination_button_left }} 
         <div class="px-20 py-10">
             <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>

package/dist/views/components/pagination/pagination_current_page_valid.hbs

@@ -1,5 +1,5 @@
 {{~#if _moreThanOnePage~}}
-    <nav class="flex content-center py-10" role="navigation" aria-label="Paginierung">
+    <nav class="flex content-center justify-center py-10" role="navigation" aria-label="Paginierung">
         {{~#if _onlyTwoPages~}}
              {{> components/pagination/pagination_only_two_pages
              _firstPage=_firstPage 
@@ -17,6 +17,7 @@
                  _firstPage=_firstPage
                  _secondPage=_secondPage   
                  _notLastPage=_notLastPage 
+                 _notLastButOnePage=_notLastButOnePage 
                  _totalPages=_totalPages 
                  _currentPage=_currentPage}}
             {{~/if~}}   

package/dist/views/components/pagination/pagination_more_than_three_pages.hbs

@@ -11,7 +11,7 @@
         {{> components/pagination/pagination_button_left_linked }}    
         <div class="px-20 py-10">   
             <a href="{{this.firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-            <span class="font-title">2</span>   
+            <span class="pl-5 font-title">2</span>   
             <span class="px-5 py-10 font-title">&hellip;</span>   
             <a href="{{this.lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>{{_totalPages}}</a>   
         </div>   
@@ -23,8 +23,8 @@
             <span class="py-10 pl-5 font-title">&hellip;</span>   
             <span class="px-5 py-10 font-bold font-title">{{_currentPage}}</span>   
             {{~#if _notLastPage~}}   
-                {{~#if notLastButOnePage~}}   
-                    <span class="font-title">&hellip;</span>   
+                {{~#if _notLastButOnePage~}}   
+                    <span class="py-10 pr-5 font-title">&hellip;</span>   
                 {{~/if~}}   
                 <a href="{{this.lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>{{_totalPages}}</a>   
             {{~/if~}}   

package/dist/views/components/pagination/pagination_only_three_pages.hbs

@@ -1,26 +1,26 @@
 {{~#if _firstPage~}}   
     {{> components/pagination/pagination_button_left }}  
     <div class="px-20 py-10">   
-        <span class="font-title">1</span>   
-        <a href="{{nextItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>   
-        <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>3</a>   
+        <span class="py-10 pr-5 font-title">1</span>   
+        <a href="{{nextItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>   
+        <a href="{{lastPageItemUrl}}" class="py-10 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>3</a>   
     </div>   
     {{> components/pagination/pagination_button_right_linked }}  
 {{else}}
     {{~#if _secondPage~}}   
         {{> components/pagination/pagination_button_left_linked }}   
         <div class="px-20 py-10">   
-            <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-            <span class="font-title">2</span>   
+            <a href="{{firstPageItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
+            <span class="py-10 pr-5 font-title">2</span>   
             <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>3</a>   
         </div>   
         {{> components/pagination/pagination_button_right_linked }}    
     {{else}}   
         {{> components/pagination/pagination_button_left_linked }}   
             <div class="px-20 py-10">   
-            <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
+            <a href="{{firstPageItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
             <a href="{{lastButOnePageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>   
-            <span class="font-bold font-title">3</span>   
+            <span class="py-10 pl-5 font-bold font-title">3</span>   
         </div>   
         {{> components/pagination/pagination_button_right }}  
     {{~/if~}}     

package/dist/views/components/pagination/pagination_only_two_pages.hbs

@@ -1,7 +1,7 @@
 {{~#if _firstPage~}}
     {{> components/pagination/pagination_button_left }}
     <div class="px-20 py-10"> 
-    <span class="font-title">1</span> 
+    <span class="py-10 pr-5 font-title">1</span> 
     <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a> 
     </div> 
     {{> components/pagination/pagination_button_right_linked }}
@@ -9,7 +9,7 @@
      {{> components/pagination/pagination_button_left_linked }} 
     <div class="px-20 py-10">   
         <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-        <span class="font-title">2</span>   
+        <span class="py-10 pl-5 font-title">2</span>   
     </div>   
     {{> components/pagination/pagination_button_right }}     
 {{~/if~}}

package/package.json

@@ -6,13 +6,13 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.11.10",
+    "version": "1.11.12",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "storybook": "start-storybook -p 6006 public",
-        "build-storybook": "build-storybook",
+        "storybook": "storybook dev -p 6006 public",
+        "build-storybook": "storybook build",
         "build-storybook-with-tailwind": "npm run build:tailwind && npm run build-storybook",
-        "build-storybook-docs": "build-storybook --docs",
+        "build-storybook-docs": "storybook build --docs",
         "build-storybook-docs-with-tailwind": "npm run build:tailwind && npm run build-storybook-docs",
         "build:tailwind": "postcss src/assets/tailwind.css -o dist/assets/index.css",
         "build": "npm run clean && npm run build:tailwind && node ./build/scripts/build.js",
@@ -38,19 +38,23 @@
     "devDependencies": {
         "@babel/cli": "^7.13.16",
         "@babel/core": "^7.12.10",
-        "@storybook/addon-a11y": "^6.5.9",
-        "@storybook/addon-actions": "^6.5.9",
-        "@storybook/addon-essentials": "^6.5.9",
-        "@storybook/addon-links": "^6.5.9",
-        "@storybook/addon-postcss": "^2.0.0",
-        "@storybook/addons": "^6.5.9",
-        "@storybook/html": "^6.5.9",
-        "@storybook/theming": "^6.5.9",
+        "@babel/preset-env": "^7.21.4",
+        "@storybook/addon-a11y": "^7.0.5",
+        "@storybook/addon-actions": "^7.0.5",
+        "@storybook/addon-essentials": "^7.0.5",
+        "@storybook/addon-links": "^7.0.5",
+        "@storybook/addon-styling": "^1.0.1",
+        "@storybook/addons": "^7.0.5",
+        "@storybook/blocks": "7.0.5",
+        "@storybook/html": "^7.0.5",
+        "@storybook/html-webpack5": "7.0.5",
+        "@storybook/theming": "^7.0.5",
         "auto": "^10.26.0",
         "autoprefixer": "^10.4.2",
         "babel-loader": "^8.2.2",
         "chromatic": "^5.6.2",
         "copyfiles": "^2.4.1",
+        "core-js-pure": "^3.30.1",
         "cross-env": "^7.0.3",
         "fancy-log": "^2.0.0",
         "file-loader": "^6.2.0",
@@ -82,12 +86,15 @@
         "prettier": "^2.2.1",
         "raw-loader": "^4.0.2",
         "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "remark-gfm": "^3.0.1",
         "rimraf": "^3.0.2",
-        "storybook": "^6.5.9",
+        "storybook": "^7.0.5",
         "storybook-conditional-toolbar-selector": "^1.0.3",
         "tailwindcss": "^3.0.23",
         "tailwindcss-hyphens": "^0.1.0",
         "tailwindcss-important": "^1.0.0",
+        "typescript": "^5.0.4",
         "underscore": "^1.13.2",
         "zepto-modules": "^1.0.1"
     },

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

@@ -104,13 +104,13 @@
     }
 
     .-currentBrand {
-        @apply lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-white lg:before:border-b-8 lg:before:border-blue-congress lg:before:mt-6;
+        @apply before:content-[''] lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-white lg:before:border-b-8 lg:before:border-blue-congress lg:before:mt-6;
     }
     .-currentService {
-        @apply before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12;
+        @apply before:content-[''] before:hidden lg:before:flex before:relative before:w-0 before:h-0 before:mr-4 before:mt-0 before:border-r-0 before:border-t-8 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-8 before:border-b-transparent lg:before:absolute lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-12;
     }
     .-currentSection {
-        @apply before:w-0 before:h-0 before:mr-2 before:-ml-4 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0  lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-8;
+        @apply before:content-[''] before:w-0 before:h-0 before:mr-2 before:-ml-4 before:border-r-0 before:border-t-7 before:border-t-transparent before:border-l-8 before:border-l-white before:border-b-7 before:border-b-transparent before:mb-0.5 lg:before:absolute lg:before:mb-0  lg:before:w-0 lg:before:h-0 lg:before:mr-0 lg:before:ml-0 lg:before:border-t-0 lg:before:border-r-8 lg:before:border-r-transparent lg:before:border-l-8 lg:before:border-l-transparent lg:before:border-b-8 lg:before:border-b-white lg:before:mt-8;
     }
     .-warnung {
         @apply text-red-600 !important;

package/src/assets/fixtures/page/page_pagination.json

@@ -1,19 +1,20 @@
-{
-    "isMoreThanOnePage": true,
-    "isOnlyThreePages": false,
-    "isOnlyTwoPages": false,
-    "isFirstPage": true,
-    "isSecondPage": false,
-    "isNotLastPage": false,
+{   
+    "moreThanOnePage": true,
+    "onlyThreePages": false,
+    "onlyTwoPages": false,
+    "firstPage": true,
+    "secondPage": false,
+    "notLastButOnePage": false,
+    "notLastPage": false,
     "firstPageItemUrl":"page1",
     "nextItemUrl":"page2",
     "previousItemUrl":"empty",
     "lastPageItemUrl":"page4",
     "lastButOnePageItemUrl":"page1",
     "totalPages": 4, 
-    "currentPage":"page1",
+    "currentPage": 2,
     "currentPageIndex": 0,
-    "isCurrentPageValid": true,
+    "currentPageValid": true,
     "pageEntries":[
         {   
                 "teaser_alternativ_100_serif":{
@@ -34,7 +35,7 @@
                 "teaser_alternativ_100_serif_video":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_video.json"
                 }
-             },
+            },
         {   
                 "teaser_alternativ_100_serif_download":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_download.json"
@@ -54,7 +55,7 @@
                 "teaser_alternativ_100_serif_download":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_download.json"
                 }
-             }, 
+            }, 
         {   
                 "teaser_alternativ_100_serif_audio":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_audio.json"
@@ -74,7 +75,7 @@
                 "teaser_alternativ_100_serif_audio":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_audio.json"
                 }
-             },
+            },
         {   
                 "teaser_alternativ_100_serif_video":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_video.json"
@@ -94,7 +95,7 @@
                 "teaser_alternativ_100_serif_video":{
                     "@->jsoninclude": "teaser/teaser_alternative_100_serif_video.json"
                 }
-             }  
+            }  
 
-             ] 
+            ] 
 }