@open-rlb/ng-bootstrap 3.1.10 → 3.1.12

package/assets/scss/custom/structure/_vertical.scss

@@ -87,7 +87,7 @@ rlb-sidebar {
       right: 1rem;
       top: 50%;
       display: block;
-      font-size: 1rem;
+      font-size: 1.2rem;
 
       // smoothly animate the transform
       transition: transform 0.3s ease-in-out;
@@ -104,7 +104,8 @@ rlb-sidebar {
   ul {
     li {
       a {
-        display: block;
+        display: flex;
+        align-items: center;
         padding: var(--rlb-item-padding-y) var(--rlb-item-padding-x);
         color: var(--rlb-menu-item-color);
         position: relative;
@@ -114,7 +115,16 @@ rlb-sidebar {
         margin: 0.1rem 0.3rem;
         border-radius: $border-radius;
 
+        .menu-text {
+          flex-grow: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-right: 0.5rem;
+        }
+
         i {
+          flex-shrink: 0;
           display: inline-block;
           min-width: 1.75rem;
           padding-bottom: .125em;
@@ -125,6 +135,11 @@ rlb-sidebar {
           transition: all .4s;
         }
 
+        .badge {
+          flex-shrink: 0;
+          margin-left: auto;
+        }
+
         &:hover {
           color: var(--rlb-menu-item-hover-color);
           //background-color: rgba(255,255,255, 0.05);
@@ -135,6 +150,10 @@ rlb-sidebar {
         }
       }
 
+      .has-arrow span {
+        margin-right: 1rem;
+      }
+
       .active,
       &.mm-active > a {
         color: var(--rlb-menu-item-active-color) !important;

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -4851,7 +4851,7 @@ class RlbPlaceholderLineComponent {
         this.size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
         this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
-        this.height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.height = input('1.5rem', ...(ngDevMode ? [{ debugName: "height" }] : []));
         this.rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
         this.hostClasses = computed(() => {
             const classes = ['placeholder', `bg-${this.color()}`];
@@ -5104,8 +5104,7 @@ class SidebarItemComponent {
         >
           {{ title() }}
         </li>
-      }
-      @if (!title()) {
+      } @else {
         <li>
           @if (children().length) {
             <a
@@ -5122,18 +5121,18 @@ class SidebarItemComponent {
               @if (icon()) {
                 <i [class]="icon()"></i>
               }
-              <span>{{ label() }}</span>
+              <span class="menu-text">{{ label() }}</span>
             </a>
-          }
-          <rlb-collapse [id]="'side-item' + _id">
-            <ul
-              class="sub-menu"
-              aria-expanded="false"
-            >
-              <ng-content select="rlb-sidebar-item"></ng-content>
-            </ul>
-          </rlb-collapse>
-          @if (!children().length) {
+
+            <rlb-collapse [id]="'side-item' + _id">
+              <ul
+                class="sub-menu"
+                aria-expanded="false"
+              >
+                <ng-content select="rlb-sidebar-item"></ng-content>
+              </ul>
+            </rlb-collapse>
+          } @else {
             <a
               [routerLink]="link()"
               [badge]="badgeCounter() && badgeCounter()! > 0 ? badgeCounter() : undefined"
@@ -5144,7 +5143,7 @@ class SidebarItemComponent {
               @if (icon()) {
                 <i [class]="icon()"></i>
               }
-              <ng-content></ng-content>
+              <span class="menu-text"><ng-content></ng-content></span>
             </a>
           }
         </li>
@@ -5165,8 +5164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         >
           {{ title() }}
         </li>
-      }
-      @if (!title()) {
+      } @else {
         <li>
           @if (children().length) {
             <a
@@ -5183,18 +5181,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
               @if (icon()) {
                 <i [class]="icon()"></i>
               }
-              <span>{{ label() }}</span>
+              <span class="menu-text">{{ label() }}</span>
             </a>
-          }
-          <rlb-collapse [id]="'side-item' + _id">
-            <ul
-              class="sub-menu"
-              aria-expanded="false"
-            >
-              <ng-content select="rlb-sidebar-item"></ng-content>
-            </ul>
-          </rlb-collapse>
-          @if (!children().length) {
+
+            <rlb-collapse [id]="'side-item' + _id">
+              <ul
+                class="sub-menu"
+                aria-expanded="false"
+              >
+                <ng-content select="rlb-sidebar-item"></ng-content>
+              </ul>
+            </rlb-collapse>
+          } @else {
             <a
               [routerLink]="link()"
               [badge]="badgeCounter() && badgeCounter()! > 0 ? badgeCounter() : undefined"
@@ -5205,7 +5203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
               @if (icon()) {
                 <i [class]="icon()"></i>
               }
-              <ng-content></ng-content>
+              <span class="menu-text"><ng-content></ng-content></span>
             </a>
           }
         </li>