@oicl/openbridge-webcomponents 2.0.0-next.84 → 2.0.0-next.85

package/bundle/openbridge-webcomponents.bundle.js

@@ -104492,11 +104492,18 @@ const compentStyle$n = i$7`* {
     color: var(--on-flat-disabled-color);
   }
 
+.wrapper .badges {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    position: relative;
+  }
+
 .wrapper .badge {
     position: relative;
   }
 
-.wrapper:not(.hug) .badge {
+.wrapper:not(.hug) .badges {
     right: 0;
   }
 
@@ -104623,6 +104630,7 @@ let ObcTabItem = class extends i$4 {
     this.hasLeadingIcon = false;
     this.hasTitle = false;
     this.hasDivider = false;
+    this.badges = [];
     this.hasBadge = false;
     this.icon = "placeholder";
     this.title = "Tab title";
@@ -104662,7 +104670,40 @@ let ObcTabItem = class extends i$4 {
       this.handleClick(event);
     }
   }
+  get effectiveBadges() {
+    if (this.badges.length > 0) {
+      return this.badges;
+    }
+    if (!this.hasBadge) {
+      return [];
+    }
+    return [
+      {
+        type: this.badgeType || BadgeType.regular,
+        size: this.badgeSize || BadgeSize.regular,
+        count: this.badgeShowNumber ? this.badgeCount : void 0,
+        showIcon: this.showLeadingBadgeIcon,
+        iconSlotName: this.showLeadingBadgeIcon ? "badge-icon" : void 0
+      }
+    ];
+  }
+  renderBadge(badge) {
+    return b`
+      <obc-badge
+        class="badge"
+        .number=${badge.count ?? 0}
+        .type=${badge.type || BadgeType.regular}
+        .size=${badge.size || BadgeSize.regular}
+        .showNumber=${badge.count !== void 0}
+        .showIcon=${badge.showIcon ?? false}
+      >
+        ${badge.iconSlotName ? b`<slot name=${badge.iconSlotName} slot="badge-icon"></slot>` : A}
+      </obc-badge>
+    `;
+  }
   render() {
+    const badges = this.effectiveBadges;
+    const hasBadge = badges.length > 0;
     const wrapperClasses = {
       wrapper: true,
       hug: this.hug,
@@ -104670,7 +104711,7 @@ let ObcTabItem = class extends i$4 {
       "has-leading-icon": this.hasLeadingIcon,
       "has-title": this.hasTitle,
       "has-divider": this.hasDivider && !this.checked,
-      "has-badge": this.hasBadge,
+      "has-badge": hasBadge,
       "has-subtitle": this.showSubtitle,
       disabled: this.disabled,
       "center-content": this.centerContent
@@ -104697,31 +104738,13 @@ let ObcTabItem = class extends i$4 {
                   ${this.showSubtitle && this.subtitle ? b`<div class="subtitle">${this.subtitle}</div>` : A}
                 </div>
               ` : A}
-          ${this.centerContent && this.hasBadge ? b`
-                <obc-badge
-                  class="badge"
-                  .number=${this.badgeCount}
-                  .type=${this.badgeType || BadgeType.regular}
-                  .size=${this.badgeSize || BadgeSize.regular}
-                  .showNumber=${this.badgeShowNumber}
-                  .showIcon=${this.showLeadingBadgeIcon}
-                >
-                  ${this.showLeadingBadgeIcon ? b`<slot name="badge-icon" slot="badge-icon"></slot>` : A}
-                </obc-badge>
-              ` : A}
+          ${this.centerContent && hasBadge ? b`<div class="badges">
+                ${badges.map((badge) => this.renderBadge(badge))}
+              </div>` : A}
         </div>
-        ${!this.centerContent && this.hasBadge ? b`
-              <obc-badge
-                class="badge"
-                .number=${this.badgeCount}
-                .type=${this.badgeType || BadgeType.regular}
-                .size=${this.badgeSize || BadgeSize.regular}
-                .showNumber=${this.badgeShowNumber}
-                .showIcon=${this.showLeadingBadgeIcon}
-              >
-                ${this.showLeadingBadgeIcon ? b`<slot name="badge-icon" slot="badge-icon"></slot>` : A}
-              </obc-badge>
-            ` : A}
+        ${!this.centerContent && hasBadge ? b`<div class="badges">
+              ${badges.map((badge) => this.renderBadge(badge))}
+            </div>` : A}
         ${this.hasClose ? b`
               <obc-icon-button
                 class="close-button"
@@ -104758,6 +104781,9 @@ __decorateClass$t1([
 __decorateClass$t1([
   n$3({ type: Boolean, attribute: "has-divider" })
 ], ObcTabItem.prototype, "hasDivider", 2);
+__decorateClass$t1([
+  n$3({ type: Array, attribute: false })
+], ObcTabItem.prototype, "badges", 2);
 __decorateClass$t1([
   n$3({ type: Boolean, attribute: "has-badge" })
 ], ObcTabItem.prototype, "hasBadge", 2);
@@ -104843,6 +104869,7 @@ let ObcTabRow = class extends i$4 {
     this.tabs = [];
     this.selectedTabId = "";
     this.hasClose = false;
+    this.centerContent = false;
     this.hug = false;
     this.showSubtitle = false;
     this.hasAddNewTab = false;
@@ -104887,8 +104914,17 @@ let ObcTabRow = class extends i$4 {
   }
   renderTab(tab, index2) {
     const isFirst = index2 === 0;
+    const previousTabSelected = this.selectedTabId === this.tabs[index2 - 1]?.id;
     const isChecked = tab.id === this.selectedTabId;
     const showSubtitle = tab.showSubtitle ?? this.showSubtitle;
+    const badgeIconSlots = [
+      ...new Set(
+        (tab.badges ?? []).map((badge) => badge.iconSlotName).filter((slotName) => slotName !== void 0)
+      )
+    ];
+    if ((tab.showLeadingBadgeIcon ?? false) && !badgeIconSlots.includes("badge-icon")) {
+      badgeIconSlots.push("badge-icon");
+    }
     return b`
       <obc-tab-item
         .title=${tab.title}
@@ -104898,10 +104934,12 @@ let ObcTabRow = class extends i$4 {
         .hasClose=${this.hasClose}
         .hasLeadingIcon=${tab.hasLeadingIcon ?? true}
         .hasTitle=${true}
-        .hasDivider=${!isFirst}
+        .hasDivider=${!isFirst && !previousTabSelected}
         .hug=${this.hug}
+        .centerContent=${this.centerContent}
         .disabled=${tab.disabled || false}
-        .hasBadge=${tab.hasBadge || tab.badgeCount !== void 0 && tab.badgeCount > 0}
+        .badges=${tab.badges ?? []}
+        .hasBadge=${tab.hasBadge || false}
         .badgeCount=${tab.badgeCount || 0}
         .badgeType=${tab.badgeType ?? BadgeType.regular}
         .badgeSize=${tab.badgeSize ?? BadgeSize.regular}
@@ -104916,11 +104954,13 @@ let ObcTabRow = class extends i$4 {
               </slot>
             ` : ""}
         <span slot="title">${tab.title}</span>
-        ${tab.showLeadingBadgeIcon ? b`
-              <slot name="tab-${tab.id}-badge-icon" slot="badge-icon">
-                <obi-placeholder></obi-placeholder>
-              </slot>
-            ` : ""}
+        ${badgeIconSlots.map(
+      (slotName) => b`
+            <slot name="tab-${tab.id}-${slotName}" slot=${slotName}>
+              <obi-placeholder></obi-placeholder>
+            </slot>
+          `
+    )}
       </obc-tab-item>
     `;
   }
@@ -104956,6 +104996,9 @@ __decorateClass$t0([
 __decorateClass$t0([
   n$3({ type: Boolean, attribute: "has-close" })
 ], ObcTabRow.prototype, "hasClose", 2);
+__decorateClass$t0([
+  n$3({ type: Boolean })
+], ObcTabRow.prototype, "centerContent", 2);
 __decorateClass$t0([
   n$3({ type: Boolean })
 ], ObcTabRow.prototype, "hug", 2);