@open-rlb/ng-bootstrap 3.1.8 → 3.1.10

package/assets/scss/_custom.scss

@@ -32,7 +32,7 @@
 }
 
 .modal-backdrop {
-  z-index: 1002 !important;
+  z-index: 1050 !important;
 }
 
 .dropdown-toggle::after {

package/assets/scss/_variables.scss

@@ -131,7 +131,7 @@ $red:     #f46a6a;
 $orange:  #f1734f;
 $yellow:  #f1b44c;
 $green:   #34c38f;
-$teal:    #050505;
+$teal:    #20c997;
 $cyan:    #50a5f1;
 // scss-docs-end color-variables
 
@@ -180,7 +180,7 @@ $theme-colors: (
 
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
 // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
-$min-contrast-ratio:   1.8;
+$min-contrast-ratio:   3;
 
 // Customize the light and dark text colors for use in our color contrast function.
 $color-contrast-dark:      $black;
@@ -454,7 +454,7 @@ $escaped-characters: (
 
 $enable-caret:                false;
 $enable-rounded:              true;
-$enable-shadows:              false;
+$enable-shadows:              true;
 $enable-gradients:            false;
 $enable-transitions:          true;
 $enable-reduced-motion:       true;
@@ -605,7 +605,7 @@ $container-max-widths: (
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns:                12;
-$grid-gutter-width:           24px;
+$grid-gutter-width:           1.5rem;
 $grid-row-columns:            6;
 
 // Container padding
@@ -632,7 +632,7 @@ $border-color-translucent:    $gray-400;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
-$border-radius:               .25rem;
+$border-radius:               .375rem;
 $border-radius-sm:            .2rem;
 $border-radius-lg:            .4rem;
 $border-radius-xl:            1rem;
@@ -701,7 +701,7 @@ $font-family-code:            var(--#{$prefix}font-monospace);
 // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
 // $font-size-base effects the font size of the body text
 $font-size-root:              null;
-$font-size-base:              0.85rem;
+$font-size-base:              1rem;
 $font-size-sm:                $font-size-base * .875;
 $font-size-lg:                $font-size-base * 1.25;
 
@@ -820,7 +820,7 @@ $table-color:                 var(--#{$prefix}body-color);
 $table-bg:                    var(--#{$prefix}secondary-bg);
 $table-accent-bg:             transparent;
 
-$table-th-font-weight:        null;
+$table-th-font-weight:        600;
 
 $table-striped-color:         $table-color;
 $table-striped-bg-factor:     1;
@@ -1415,16 +1415,16 @@ $placeholder-opacity-min:           .2;
 // Cards
 
 // scss-docs-start card-variables
-$card-spacer-y:                     1.25rem;
-$card-spacer-x:                     1.25rem;
+$card-spacer-y:                     1.5rem;
+$card-spacer-x:                     1.5rem;
 $card-title-spacer-y:               $spacer * .5;
 $card-title-color:                  var(--#{$prefix}emphasis-color);
 $card-subtitle-color:               null;
 $card-border-width:                 0;
 $card-border-color:                 var(--#{$prefix}border-color);
-$card-border-radius:                var(--#{$prefix}border-radius);
-$card-box-shadow:                   null;
-$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
+$card-border-radius:                1rem; // Soft bubbly cards
+$card-box-shadow:                   0 0.5rem 1rem rgba(0, 0, 0, 0.08);
+$card-inner-border-radius:          calc(#{$card-border-radius} - 1px);
 $card-cap-padding-y:                $card-spacer-y * .5;
 $card-cap-padding-x:                $card-spacer-x;
 $card-cap-bg:                       var(--#{$prefix}tertiary-bg);
@@ -1824,18 +1824,3 @@ $kbd-bg:                            var(--#{$prefix}body-color);
 $nested-kbd-font-weight:            null; // Deprecated in v5.2.0, removing in v6
 
 $pre-color:                         null;
-
-
-// Dimensions and Light Shadows
-$enable-shadows: true;
-$card-border-radius: 1rem;
-$card-inner-border-radius: calc(#{$card-border-radius} - 1px);
-$card-spacer-y: 1.5rem;
-$card-spacer-x: 1.5rem;
-$card-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08); // Soft shadow for light mode
-$badge-border-radius: 0.375rem;
-
-
-$input-border-radius: 0.5rem;
-$input-padding-y: 0.65rem;
-$input-padding-x: 1rem;

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

@@ -105,20 +105,20 @@ rlb-sidebar {
     li {
       a {
         display: block;
-        padding: .625rem 1.5rem;
+        padding: var(--rlb-item-padding-y) var(--rlb-item-padding-x);
         color: var(--rlb-menu-item-color);
         position: relative;
-        font-size: 13px;
+        font-size: 0.95rem;
         transition: all .4s;
 
         margin: 0.1rem 0.3rem;
-        border-radius: 0.4rem;
+        border-radius: $border-radius;
 
         i {
           display: inline-block;
           min-width: 1.75rem;
           padding-bottom: .125em;
-          font-size: 1.15rem;
+          font-size: 1.25rem;
           line-height: 1.40625rem;
           vertical-align: middle;
           color: inherit;
@@ -176,8 +176,8 @@ rlb-sidebar {
             padding: 0;
             li {
               a {
-                padding: .4rem 1.5rem .4rem 2.5rem;
-                font-size: 13px;
+                padding: 0.4rem 1.5rem 0.4rem 3.75rem;
+                font-size: 0.8125rem;
               }
             }
           }
@@ -240,11 +240,11 @@ rlb-sidebar {
 }
 
 .menu-title {
-  padding: 12px 20px !important;
+  padding: 0.75rem 1.5rem !important;
   letter-spacing: .05em;
   pointer-events: none;
   cursor: default;
-  font-size: 11px;
+  font-size: 0.75rem;
   text-transform: uppercase;
   color: $sidebar-menu-item-icon-color;
   font-weight: $font-weight-semibold;

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

@@ -4480,7 +4480,7 @@ class NavbarComponent {
         this.navId = `nav${this.idService.id}`;
         effect(() => {
             const groups = this.navbarItemsGroups();
-            groups.forEach((group) => {
+            groups.forEach(group => {
                 // Since output() is not a Signal, we still need to subscribe,
                 // but we can manage the subscription here more cleanly.
                 // However, output().subscribe returns OutputRefSubscription which we should track.
@@ -4508,75 +4508,77 @@ class NavbarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarComponent, deps: [{ token: UniqueIdService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: NavbarComponent, isStandalone: false, selector: "rlb-navbar", inputs: { dark: { classPropertyName: "dark", publicName: "dark", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, enableDropdownToggler: { classPropertyName: "enableDropdownToggler", publicName: "enable-dropdown-toggler", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "navbarItemsGroups", predicate: NavbarItemsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: ` <ng-template #template>
-    <nav
-      class="navbar px-2 bg-{{ color() }} {{ placement() }} {{
-        _navExpand()
-      }} {{ cssClass() }}"
-      [attr.data-bs-theme]="dark() ? 'dark' : 'light'"
-    >
-      <div class="container-fluid">
-        <ng-content
-          select="[rlb-navbar-brand], [rlb-button][toggle], rlb-navbar-separator"
-        />
-        <button
-          class="navbar-toggler"
-          [class.d-none]="!enableDropdownToggler()"
-          type="button"
-          rlb-button
-          toggle="collapse"
-          [toggle-target]="navId"
-          aria-label="Toggle navigation"
-        >
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" [id]="navId">
-          <div class="p-3 d-flex w-100 flex-column flex-lg-row">
-            <ng-content
-              select="rlb-navbar-items, rlb-navbar-form, rlb-navbar-text, rlb-navbar-separator"
-            />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: NavbarComponent, isStandalone: false, selector: "rlb-navbar", inputs: { dark: { classPropertyName: "dark", publicName: "dark", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, enableDropdownToggler: { classPropertyName: "enableDropdownToggler", publicName: "enable-dropdown-toggler", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "navbarItemsGroups", predicate: NavbarItemsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, static: true }], ngImport: i0, template: `
+    <ng-template #template>
+      <nav
+        class="navbar px-2 bg-{{ color() }} {{ placement() }} {{ _navExpand() }} {{ cssClass() }}"
+        [attr.data-bs-theme]="dark() ? 'dark' : 'light'"
+      >
+        <div class="container-fluid">
+          <ng-content select="[rlb-navbar-brand], [rlb-button][toggle], rlb-navbar-separator" />
+          <button
+            class="navbar-toggler"
+            [class.d-none]="!enableDropdownToggler()"
+            type="button"
+            rlb-button
+            toggle="collapse"
+            [toggle-target]="navId"
+            aria-label="Toggle navigation"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div
+            class="collapse navbar-collapse"
+            [id]="navId"
+          >
+            <div class="p-3 d-flex w-100 flex-column flex-lg-row align-items-lg-center">
+              <ng-content
+                select="rlb-navbar-items, rlb-navbar-form, rlb-navbar-text, rlb-navbar-separator"
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </nav>
-  </ng-template>`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: ToggleDirective, selector: "\n    button[toggle],\n    a[toggle],\n    rlb-navbar-item[toggle],\n    rlb-button-toolbar[toggle]", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }] }); }
+      </nav>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: ToggleDirective, selector: "\n    button[toggle],\n    a[toggle],\n    rlb-navbar-item[toggle],\n    rlb-button-toolbar[toggle]", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rlb-navbar',
-                    template: ` <ng-template #template>
-    <nav
-      class="navbar px-2 bg-{{ color() }} {{ placement() }} {{
-        _navExpand()
-      }} {{ cssClass() }}"
-      [attr.data-bs-theme]="dark() ? 'dark' : 'light'"
-    >
-      <div class="container-fluid">
-        <ng-content
-          select="[rlb-navbar-brand], [rlb-button][toggle], rlb-navbar-separator"
-        />
-        <button
-          class="navbar-toggler"
-          [class.d-none]="!enableDropdownToggler()"
-          type="button"
-          rlb-button
-          toggle="collapse"
-          [toggle-target]="navId"
-          aria-label="Toggle navigation"
-        >
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" [id]="navId">
-          <div class="p-3 d-flex w-100 flex-column flex-lg-row">
-            <ng-content
-              select="rlb-navbar-items, rlb-navbar-form, rlb-navbar-text, rlb-navbar-separator"
-            />
+                    template: `
+    <ng-template #template>
+      <nav
+        class="navbar px-2 bg-{{ color() }} {{ placement() }} {{ _navExpand() }} {{ cssClass() }}"
+        [attr.data-bs-theme]="dark() ? 'dark' : 'light'"
+      >
+        <div class="container-fluid">
+          <ng-content select="[rlb-navbar-brand], [rlb-button][toggle], rlb-navbar-separator" />
+          <button
+            class="navbar-toggler"
+            [class.d-none]="!enableDropdownToggler()"
+            type="button"
+            rlb-button
+            toggle="collapse"
+            [toggle-target]="navId"
+            aria-label="Toggle navigation"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div
+            class="collapse navbar-collapse"
+            [id]="navId"
+          >
+            <div class="p-3 d-flex w-100 flex-column flex-lg-row align-items-lg-center">
+              <ng-content
+                select="rlb-navbar-items, rlb-navbar-form, rlb-navbar-text, rlb-navbar-separator"
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </nav>
-  </ng-template>`,
+      </nav>
+    </ng-template>
+  `,
                     standalone: false,
                 }]
         }], ctorParameters: () => [{ type: UniqueIdService }, { type: i0.ViewContainerRef }], propDecorators: { template: [{