🐛 fix(carousel): firefox issues and select on mobile on initial load (#…

…1572)

* fix(carousel): firefox issue

* fix(carousel): firefox issue

* fix(tabs): mobile viewport: dropdown not prefilled on initial load #1571

* fix(tabs): expanded mode

* update base images

* chore: fix visual test

* chore: fix line calc

* chore: add missing images to visual test

* chore: fix safari 100% height issue on vertical

* chore: create new observer

* chore: improve animation listener

* chore: fix gap space for vertical

* chore: fix gap space for vertical

* update base images

* chore: adjust padding for product slider

* chore: adjust padding for product slider

* update base images

* fix(hint): set styles for content

---------

Co-authored-by: hirsch88 <[email protected]>

.changeset/nine-turtles-hammer.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**carousel**: show controls on firefox

.changeset/shaggy-goats-unite.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**hint**: set styles for content

.changeset/thirty-baboons-kiss.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**tabs**: load value initialy to tabs when select on mobile

.changeset/three-horses-look.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**tabs**: adjust border widht on expanded mode

e2e/cypress/e2e/visual/bal-carousel.visual.cy.ts

@@ -32,7 +32,7 @@ describe('bal-carousel', () => {
   describe('product-slider', () => {
     it('combi with tabs', () => {
       cy.visit('/components/bal-carousel/test/bal-carousel-tabs.visual.html').platform('desktop').waitForDesignSystem()
-      cy.getByTestId('tabs').select('Tab B')
+      cy.get('.bal-tabs__nav__item').last().click()
       cy.wait(300)
       cy.testVisual('carousel-combi-tabs-desktop')
     })

packages/core/src/components/bal-carousel/bal-carousel.sass

@@ -142,8 +142,14 @@
   .bal-carousel__inner__container
     gap: 1rem
     width: fit-content
-    padding-top: 0.5rem
-    padding-bottom: 0.5rem
+    padding-top: 1rem
+    padding-bottom: 1rem
+    +tablet
+      padding-top: 1.5rem
+      padding-bottom: 1.5rem
+    +desktop
+      padding-top: 2rem
+      padding-bottom: 2rem
   .bal-carousel__item
     display: flex
     min-width: 10rem

packages/core/src/components/bal-carousel/bal-carousel.tsx

@@ -22,7 +22,7 @@ import { BalMutationObserver, ListenToMutation } from '../../utils/mutation'
 import { BalResizeObserver, ListenToResize } from '../../utils/resize'
 import { BalConfigState, BalLanguage, ListenToConfig, defaultConfig } from '../../utils/config'
 import { SwiperChildItem, SwiperInterface, SwiperUtil } from '../../utils/swiper'
-import { isChildOfEventTarget, rIC, waitAfterIdleCallback, waitForRequestIdleCallback } from '../../utils/helpers'
+import { BalVisibilityObserver, ListenToVisibility } from '../../utils/visibility'
 
 @Component({
   tag: 'bal-carousel',
@@ -35,6 +35,7 @@ export class Carousel
     BalSwipeObserver,
     BalMutationObserver,
     BalResizeObserver,
+    BalVisibilityObserver,
     SwiperInterface
 {
   swiper = new SwiperUtil()
@@ -164,10 +165,6 @@ export class Carousel
     this.onValueChange()
   }
 
-  componentDidLoad(): void {
-    this.swiper.componentDidLoad()
-  }
-
   disconnectedCallback(): void {
     this.swiper.disconnectedCallback()
   }
@@ -191,6 +188,11 @@ export class Carousel
     this.swiper.notifyChange()
   }
 
+  @ListenToVisibility()
+  visibilityListener(): void {
+    this.swiper.notifyChange()
+  }
+
   @ListenToSwipe()
   swipeListener({ left, right }: BalSwipeInfo) {
     if (left) {

packages/core/src/components/bal-carousel/test/bal-carousel-tabs.visual.html

@@ -14,7 +14,7 @@
     <bal-app>
       <main class="container is-compact py-medium">
         <section class="my-normal">
-          <bal-tabs data-testid="tabs" value="tab-a" border optional-tab-selection>
+          <bal-tabs data-testid="tabs" value="tab-a" border optional-tab-selection select-on-mobile>
             <bal-tab-item value="tab-a" label="Tab A">Content</bal-tab-item>
             <bal-tab-item value="tab-b" label="Tab B">
               <bal-carousel

packages/core/src/components/bal-carousel/test/bal-carousel.partner.html

@@ -19,37 +19,57 @@
             <bal-carousel-item
               color="green"
               label="0 Auto"
-              src="https://design.baloise.dev/assets/puzzle-green-d84dff8b.svg"
+              src="/assets/images/brand-icons/car-green.svg"
             ></bal-carousel-item>
             <bal-carousel-item
               color="yellow"
               label="1 Haushalt"
-              src="https://design.baloise.dev/assets/puzzle-green-d84dff8b.svg"
+              src="/assets/images/brand-icons/lamp-tangerine.svg"
             ></bal-carousel-item>
             <bal-carousel-item
               color="purple"
               label="2 Hypothek"
-              src="https://design.baloise.dev/assets/puzzle-green-d84dff8b.svg"
+              src="/assets/images/brand-icons/accounts-purple.svg"
             ></bal-carousel-item>
-            <bal-carousel-item color="red" label="3 Pensionsplanung" src="/assets/images/brand/bars.svg">
+            <bal-carousel-item color="red" label="3 Pensionsplanung" src="/assets/images/brand-icons/bar-chart-red.svg">
             </bal-carousel-item>
-            <bal-carousel-item color="green" label="4 Anlegen" src="/assets/images/brand/plant.svg"></bal-carousel-item>
+            <bal-carousel-item
+              color="green"
+              label="4 Anlegen"
+              src="/assets/images/brand-icons/ecosystem-finances-green.svg"
+            ></bal-carousel-item>
             <bal-carousel-item
               color="yellow"
               label="5 Finanzplanung Finanzplanung Finanzplanung Finanzplanung Finanzplanung"
-              src="https://design.baloise.dev/assets/puzzle-green-d84dff8b.svg"
+              src="/assets/images/brand-icons/pie-chart-tangerine.svg"
             ></bal-carousel-item>
             <bal-carousel-item
               color="purple"
               label="6 E-Banking"
-              src="https://design.baloise.dev/assets/puzzle-green-d84dff8b.svg"
+              src="/assets/images/brand-icons/trolley-bus-purple.svg"
             >
             </bal-carousel-item>
-            <bal-carousel-item color="red" label="7 Sparen" src="/assets/images/brand/pig.svg"></bal-carousel-item>
-            <bal-carousel-item color="green" label="8 YouGo" src="/assets/images/brand/diamond.svg"></bal-carousel-item>
-            <bal-carousel-item color="yellow" label="9 Alle Gegenstände" src="/assets/images/brand/items.svg">
+            <bal-carousel-item
+              color="red"
+              label="7 Sparen"
+              src="/assets/images/brand-icons/piggy-bank-red.svg"
+            ></bal-carousel-item>
+            <bal-carousel-item
+              color="green"
+              label="8 YouGo"
+              src="/assets/images/brand-icons/diamond-green.svg"
+            ></bal-carousel-item>
+            <bal-carousel-item
+              color="yellow"
+              label="9 Alle Gegenstände"
+              src="/assets/images/brand-icons/household-tangerine.svg"
+            >
             </bal-carousel-item>
-            <bal-carousel-item color="purple" label="10 Motorrad & Roller" src="/assets/images/brand/roller.svg">
+            <bal-carousel-item
+              color="purple"
+              label="10 Motorrad & Roller"
+              src="/assets/images/brand-icons/bicycle-insurance-purple.svg"
+            >
             </bal-carousel-item>
           </bal-carousel>
         </section>

packages/core/src/components/bal-hint/bal-hint.sass

@@ -39,6 +39,12 @@
       +modifier(is-hidden-desktop)
         +tablet
           display: none !important
+    +element(text)
+      +element(field)
+        font-family: var(--bal-font-family-text)
+        font-weight: var(--bal-font-weight-regular)
+        line-height: var(--bal-text-line-height-text)
+        font-size: var(--bal-text-size-normal)
   +element(overlay)
     +element(content)
       position: fixed

packages/core/src/components/bal-segment/bal-segment.tsx

@@ -33,12 +33,22 @@ import { isDescendant, raf } from '../../utils/helpers'
 import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints } from '../../utils/breakpoints'
 import { BalFocusObserver, ListenToFocus } from '../../utils/focus'
 import { defaultBalAriaForm, BalAriaForm } from '../../utils/form'
+import { BalVisibilityObserver, ListenToVisibility } from '../../utils/visibility'
+import { BalAnimationObserver, ListenToAnimation } from '../../utils/animation'
 
 @Component({
   tag: 'bal-segment',
   styleUrl: 'bal-segment.sass',
 })
-export class Segment implements ComponentInterface, BalWindowResizeObserver, BalBreakpointObserver, BalFocusObserver {
+export class Segment
+  implements
+    ComponentInterface,
+    BalWindowResizeObserver,
+    BalBreakpointObserver,
+    BalFocusObserver,
+    BalVisibilityObserver,
+    BalAnimationObserver
+{
   @Element() el!: HTMLElement
 
   log!: LogInstance
@@ -173,13 +183,18 @@ export class Segment implements ComponentInterface, BalWindowResizeObserver, Bal
     this.balBlur.emit(ev)
   }
 
-  @Listen('balWillAnimate', { target: 'window' })
-  listenToDidAnimate(ev: UIEvent) {
-    if (ev && ev.target && isDescendant(ev.target as HTMLElement, this.el)) {
-      const childRect = this.el.getBoundingClientRect()
-      this.maxWidth = childRect.width
-      this.windowResizeListener()
-    }
+  @ListenToAnimation()
+  animationListener(): void {
+    const childRect = this.el.getBoundingClientRect()
+    this.maxWidth = childRect.width
+    this.windowResizeListener()
+  }
+
+  @ListenToVisibility()
+  visibilityListener(): void {
+    const childRect = this.el.getBoundingClientRect()
+    this.maxWidth = childRect.width
+    this.windowResizeListener()
   }
 
   @ListenToBreakpoints()

packages/core/src/components/bal-tabs/bal-tabs.sass

@@ -8,7 +8,8 @@
 @import '../../utils/swiper/swiper'
 
 .bal-tabs
-  display: block
+  display: flex
+  flex-direction: column
   min-width: 0
   //
   // Fullwidth
@@ -17,9 +18,11 @@
   //
   // Vertical layout
   &--vertical
-    display: block
+    flex-direction: column
+    gap: var(--bal-space-x-large)
     +tablet
-      display: flex
+      flex-direction: row
+      gap: var(--bal-space-normal)
   //
   // Navbar layout
   &--navbar
@@ -51,7 +54,7 @@
 .bal-tabs__content
   width: 100%
 
-.bal-tabs__content--vertial
+.bal-tabs__content--vertical
   width: auto
   flex: 1
 
@@ -76,9 +79,12 @@
   left: 1px
   right: 1px
   bottom: 0
+  min-width: 100%
   &--hidden
     display: none
   &--vertical
+    min-width: var(--bal-border-width-normal)
+    max-width: var(--bal-border-width-normal)
     width: var(--bal-border-width-normal)
     height: 100%
     top: 0

packages/core/src/components/bal-tabs/bal-tabs.tsx

@@ -18,7 +18,6 @@ import {
   debounceEvent,
   deepReady,
   hasParent,
-  isChildOfEventTarget,
   isDescendant,
   raf,
   rOnLoad,
@@ -41,6 +40,8 @@ import { TabNav } from './components/tab-nav'
 import { toKebabCase } from '../../utils/string'
 import { SwiperChildItem, SwiperInterface, SwiperUtil } from '../../utils/swiper'
 import { BalSwipeInfo, ListenToSwipe } from '../../utils/swipe'
+import { BalVisibilityObserver, ListenToVisibility } from '../../utils/visibility'
+import { BalAnimationObserverInfo, ListenToAnimation } from '../../utils/animation'
 
 @Component({
   tag: 'bal-tabs',
@@ -54,6 +55,7 @@ export class Tabs
     BalMutationObserver,
     BalBreakpointObserver,
     BalResizeObserver,
+    BalVisibilityObserver,
     SwiperInterface
 {
   private tabsId = `bal-tabs-${TabsIds++}`
@@ -273,7 +275,6 @@ export class Tabs
   }
 
   componentDidLoad() {
-    this.swiper.componentDidLoad()
     this.onOptionChange()
     rOnLoad(() => {
       this.enableLineRender = true
@@ -298,6 +299,11 @@ export class Tabs
     this.swiper.notifyChange()
   }
 
+  @ListenToVisibility()
+  visibilityListener(): void {
+    this.swiper.notifyChange()
+  }
+
   @ListenToBreakpoints()
   breakpointListener(breakpoints: BalBreakpoints): void {
     this.isMobile = breakpoints.mobile
@@ -308,7 +314,7 @@ export class Tabs
   @ListenToResize()
   resizeListener(info: BalResizeInfo) {
     this.swiper.notifyChange()
-    if ((!this.isVertical && info.width) || (this.isVertical && info.height)) {
+    if ((!this.isVertical() && info.width) || (this.isVertical() && info.height)) {
       this.animateLine()
     }
   }
@@ -322,17 +328,10 @@ export class Tabs
     }
   }
 
-  @Listen('balWillAnimate', { target: 'window' })
-  listenToWillAnimate(ev: UIEvent) {
-    isChildOfEventTarget(ev, this.el, () => this.animateLine())
-  }
-
-  @Listen('balDidAnimate', { target: 'window' })
-  listenToDidAnimate(ev: UIEvent) {
-    isChildOfEventTarget(ev, this.el, () => {
-      this.isUsedInNavbar(ev)
-      this.animateLine()
-    })
+  @ListenToAnimation()
+  animationListener(info: BalAnimationObserverInfo): void {
+    this.isUsedInNavbar(info.target)
+    this.animateLine()
   }
 
   @Listen('keydown')
@@ -449,7 +448,6 @@ export class Tabs
   }
 
   private getCarouselElement(): HTMLElement | null {
-    // return this.el.querySelector(`#${this.tabsId}-carousel`)
     return this.el.querySelector(`#${this.swiper.containerId}`)
   }
 
@@ -470,10 +468,9 @@ export class Tabs
     }
   }
 
-  private isUsedInNavbar(ev: UIEvent) {
-    const target = ev.target as HTMLElement
+  private isUsedInNavbar(target: HTMLElement) {
     const parentNavbar = target.closest('bal-navbar')
-    const isNavbarOpen = ev.target as any | false
+    const isNavbarOpen = target as any | false
     if (parentNavbar && isDescendant(parentNavbar, this.el)) {
       this.isNavbarOpen = isNavbarOpen
     }
@@ -637,8 +634,12 @@ export class Tabs
             const borderElement = this.getBorderElement()
             const carouselElement = this.getCarouselElement()
             if (borderElement && carouselElement) {
-              const containerMaxWidth = getWidthOfOverflowingChildren(carouselElement)
-              borderElement.style.setProperty('width', `${containerMaxWidth}px`)
+              if (this.expanded) {
+                borderElement.style.setProperty('width', `100%`)
+              } else {
+                const containerMaxWidth = getWidthOfOverflowingChildren(carouselElement)
+                borderElement.style.setProperty('width', `${containerMaxWidth}px`)
+              }
             }
 
             await waitForTransition