@madj2k/fe-frontend-kit 2.0.20 → 2.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madj2k/fe-frontend-kit",
-  "version": "2.0.20",
+  "version": "2.0.22",
   "description": "Shared frontend utilities, menus and mixins for projects",
 	"main": "index.js",
 	"style": "index.scss",

package/sass/bootstrap-5.3/10_mixins/_format.scss

@@ -19,11 +19,13 @@
 /// @group Typography
 /// @param {Map} $font-formats - A map of font style definitions. Defaults to the global `$font-formats` map.
 /// @param {String} $font-format - The key name of the format to apply (e.g., 'h1', 'copy-small').
+/// @param {String} $tablet-breakpoint - The breakpoint name for tablet styles (default: lg).
+/// @param {String} $desktop-breakpoint - The breakpoint name for desktop styles (default: xl).
 ///
 /// @author Steffen Kroggel <developer@steffenkroggel>
 /// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
 ///
-@mixin font-format($font-formats, $font-format: 'h1') {
+@mixin font-format($font-formats, $font-format: 'h1', $tablet-breakpoint: lg, $desktop-breakpoint: xl) {
     $format-data: map-get($font-formats, $font-format);
     $mobile-data: map-get($format-data, 'mobile');
     $default-data: map-get($format-data, 'default');
@@ -38,7 +40,7 @@
     }
 
     @if map-has-key($format-data, 'tablet') {
-        @include media-breakpoint-up(lg) {
+        @include media-breakpoint-up($tablet-breakpoint) {
             @each $key in $keys {
                 #{$key}: map-get(map-get($format-data, 'tablet'), $key);
             }
@@ -46,12 +48,23 @@
     }
 
     @if map-has-key($format-data, 'desktop') {
-        @include media-breakpoint-up(xl) {
+        @include media-breakpoint-up($desktop-breakpoint) {
             @each $key in $keys {
                 #{$key}: map-get(map-get($format-data, 'desktop'), $key);
             }
         }
     }
+
+    // dynamic breakpoints (but not mobile, default, tablet, desktop)
+    @each $variant, $values in $format-data {
+        @if not index(('mobile', 'default', 'tablet', 'desktop'), $variant) {
+            @include media-breakpoint-up($variant) {
+                @each $key in $keys {
+                    #{$key}: map-get($values, $key);
+                }
+            }
+        }
+    }
 }
 
 /// Enables word breaking and hyphenation for improved long text handling.

package/sass/bootstrap-5.3/10_mixins/_page.scss

@@ -144,7 +144,7 @@
 
                     /** addition class for usage with position:absolute */
                     #{$wrap-class}-padding {
-                        @include page-padding-only($default-padding);
+                        @include page-padding-only($padding-x);
                     }
                 }
 

package/tools/owl-thumbnail/owl-thumbnail-2.0.js

@@ -17,7 +17,7 @@
  *
  * @author Steffen Kroggel <developer@steffenkroggel.de>
  * @copyright 2025 Steffen Kroggel
- * @version 2.0.1
+ * @version 2.0.2
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
@@ -138,6 +138,7 @@ class Madj2kOwlThumbnail {
         this._highlightInitialThumb(event);
         this._equalizeThumbnailHeights();
         this._repositionThumbNav();
+        this._updateArrowNav()
       },
       onRefreshed: () => {
         this._equalizeThumbnailHeights();
@@ -260,7 +261,8 @@ class Madj2kOwlThumbnail {
     this._log('Centering thumbnails to index:', centerIndex);
     this.$thumbs.trigger('to.owl.carousel', [centerIndex, 300, true]);
 
-    this._repositionThumbNav(index );
+    this._repositionThumbNav(index);
+    this._updateArrowNav(index)
     this.syncing = false;
   }
 
@@ -299,7 +301,8 @@ class Madj2kOwlThumbnail {
       if ($(e.currentTarget).hasClass('owl-prev')) {
         // Previous slide in main carousel
         newIndex = mainData.relative(mainData.current()) - 1;
-        if (newIndex < 0) newIndex = 0; // Kein Loop
+        if (newIndex < 0)  newIndex = 0; // no loop
+
       } else if ($(e.currentTarget).hasClass('owl-next')) {
         // Next slide in main carousel
         newIndex = mainData.relative(mainData.current()) + 1;
@@ -310,6 +313,29 @@ class Madj2kOwlThumbnail {
     });
   }
 
+  /**
+   * Updates the visibility of the navigation arrows based on the current index
+   *
+   * @param index
+   * @private
+   */
+  _updateArrowNav (index = 0) {
+
+    const mainData = this.$main.data('owl.carousel');
+    if (!mainData) return;
+
+    this.$thumbs.find('.owl-prev').removeClass('inactive');
+    this.$thumbs.find('.owl-next').removeClass('inactive');
+
+    if (index === 0) {
+      this.$thumbs.find('.owl-prev').addClass('inactive');
+    }
+
+    if (index === mainData.items().length -1) {
+      this.$thumbs.find('.owl-next').addClass('inactive');
+    }
+  }
+
   /**
    * Start thumbnails on the left side of the stage, even if they are centered!
    * @private
@@ -328,11 +354,11 @@ class Madj2kOwlThumbnail {
       $thumbStage.css('transform', 'translate3d(0px, 0px, 0px)');
       this._log('Thumb stage repositioned: left-aligned (index 0)');
 
-    // last thumb aligned right
+      // last thumb aligned right
     } else if (currentIndex === lastIndex) {
       let totalWidth = 0;
       $thumbItems.each((i, item) => {
-        totalWidth += $(item).outerWidth(true); // inklusive margin
+        totalWidth += $(item).outerWidth(true); // margin included
       });
 
       const containerWidth = this.$thumbs.width();