@open-rlb/ng-bootstrap 3.3.42 → 3.3.43

package/assets/scss/custom/components/_badge.scss

@@ -1,4 +1,5 @@
 @use 'sass:color';
+@use 'sass:map';
 //
 // _badge.scss
 //
@@ -12,48 +13,61 @@
   }
 }
 
-// Soft badge
-@mixin badge-variant-soft($bg) {
-  color: $bg;
-  background-color: rgba($bg, 0.18);
+// Soft badge — tinted surface + emphasis text. Driven by the subtle custom properties so it
+// re-derives under [data-bs-theme] and follows tenant re-points of --bs-*-bg-subtle (see the
+// partner accent overrides). The previous version pinned `color: $value` on an rgba() tint,
+// which is theme-blind: 1.66:1 for warning on a light surface.
+@mixin badge-variant-soft($color) {
+  color: var(--#{$prefix}#{$color}-text-emphasis);
+  background-color: var(--#{$prefix}#{$color}-bg-subtle);
+  border: $border-width solid var(--#{$prefix}#{$color}-border-subtle);
 
   &[href] {
     &:hover,
     &:focus {
-      color: $bg;
+      color: var(--#{$prefix}#{$color}-text-emphasis);
       text-decoration: none;
-      background-color: rgba($bg, 0.4);
+      background-color: var(--#{$prefix}#{$color}-border-subtle);
     }
   }
 }
 
-@each $color, $value in $theme-colors {
-  .badge {
-    &.bg-#{$color} {
-      &[href] {
-        &:hover,
-        &:focus {
-          background-color: color.adjust($value, $lightness: -4%) !important;
-        }
+.badge {
+  &.bg-light {
+    color: var(--#{$prefix}body-color);
+
+    &[href] {
+      &:hover,
+      &:focus {
+        color: var(--#{$prefix}body-color);
       }
     }
   }
+}
 
+@each $color, $value in $theme-colors {
   .badge {
-    &.bg-light {
-      color: var(--#{$prefix}body-color);
-
+    &.bg-#{$color} {
       &[href] {
         &:hover,
         &:focus {
-          color: var(--#{$prefix}body-color);
+          background-color: color.adjust($value, $lightness: -4%) !important;
         }
       }
     }
   }
 
-  .badge-soft-#{$color} {
-    @include badge-variant-soft($value);
+  @if map.has-key($theme-colors-bg-subtle, $color) {
+    .badge-soft-#{$color} {
+      @include badge-variant-soft($color);
+    }
+  } @else {
+    // No subtle palette exists for this color. Fall back to an accessible solid so the class is
+    // never silently transparent.
+    .badge-soft-#{$color} {
+      color: color-contrast($value);
+      background-color: $value;
+    }
   }
 }
 

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

@@ -616,6 +616,7 @@ class BadgeComponent {
         this.color = input('primary', { ...(ngDevMode ? { debugName: "color" } : /* istanbul ignore next */ {}), alias: 'color' });
         this.hiddenText = input(undefined, { ...(ngDevMode ? { debugName: "hiddenText" } : /* istanbul ignore next */ {}), alias: 'hidden-text' });
         this.border = input(false, { ...(ngDevMode ? { debugName: "border" } : /* istanbul ignore next */ {}), alias: 'border', transform: booleanAttribute });
+        this.soft = input(false, { ...(ngDevMode ? { debugName: "soft" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.cssClass = input(undefined, { ...(ngDevMode ? { debugName: "cssClass" } : /* istanbul ignore next */ {}), alias: 'class' });
         this.textColor = input(undefined, { ...(ngDevMode ? { debugName: "textColor" } : /* istanbul ignore next */ {}), alias: 'badge-text-color' });
         this.template = viewChild.required('template');
@@ -624,8 +625,9 @@ class BadgeComponent {
             if (this.pill()) {
                 style += ` rounded-pill`;
             }
-            if (this.color()) {
-                style += ` bg-${this.color()}`;
+            const color = this.color();
+            if (color) {
+                style += this.soft() ? ` badge-soft-${color}` : ` bg-${color}`;
             }
             if (this.border()) {
                 style += ` border`;
@@ -643,7 +645,7 @@ class BadgeComponent {
         this.viewContainerRef.element.nativeElement.remove();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: BadgeComponent, isStandalone: true, selector: "span[rlb-badge], img[rlb-badge]", inputs: { pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hidden-text", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "badge-text-color", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: BadgeComponent, isStandalone: true, selector: "span[rlb-badge], img[rlb-badge]", inputs: { pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hidden-text", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, soft: { classPropertyName: "soft", publicName: "soft", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "badge-text-color", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #template>
       <span [class]="style()">
         <ng-content></ng-content>
@@ -670,7 +672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], hiddenText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden-text", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-text-color", required: false }] }], template: [{ type: i0.ViewChild, args: ['template', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], hiddenText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden-text", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], soft: [{ type: i0.Input, args: [{ isSignal: true, alias: "soft", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-text-color", required: false }] }], template: [{ type: i0.ViewChild, args: ['template', { isSignal: true }] }] } });
 
 class BadgeDirective {
     constructor() {
@@ -685,6 +687,7 @@ class BadgeDirective {
         this.textColor = input('dark', { ...(ngDevMode ? { debugName: "textColor" } : /* istanbul ignore next */ {}), alias: 'badge-text-color' });
         this.hiddenText = input(undefined, { ...(ngDevMode ? { debugName: "hiddenText" } : /* istanbul ignore next */ {}), alias: 'hidden-text' });
         this.dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), alias: 'badge-dot', transform: booleanAttribute });
+        this.soft = input(false, { ...(ngDevMode ? { debugName: "soft" } : /* istanbul ignore next */ {}), alias: 'badge-soft', transform: booleanAttribute });
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
         effect(() => {
@@ -740,10 +743,13 @@ class BadgeDirective {
         if (border) {
             this.renderer.addClass(this.badgeElement, 'rounded-border');
         }
+        // A dot is pure color with no text — keep it solid.
+        const useSoft = this.soft() && !this.dot();
         if (color) {
-            this.renderer.addClass(this.badgeElement, `bg-${color}`);
+            this.renderer.addClass(this.badgeElement, useSoft ? `badge-soft-${color}` : `bg-${color}`);
         }
-        if (textColor) {
+        // textColor defaults to 'dark', and .text-dark is !important — it would beat the soft color.
+        if (textColor && !useSoft) {
             this.renderer.addClass(this.badgeElement, `text-${textColor}`);
         }
         if (badgeValue) {
@@ -787,12 +793,12 @@ class BadgeDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: BadgeDirective, isStandalone: true, selector: "[badge]", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "badge-pill", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "badge-border", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "badge-top", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "badge-start", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "badge-color", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "badge-text-color", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hidden-text", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "badge-dot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: BadgeDirective, isStandalone: true, selector: "[badge]", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "badge-pill", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "badge-border", isSignal: true, isRequired: false, transformFunction: null }, top: { classPropertyName: "top", publicName: "badge-top", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "badge-start", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "badge-color", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "badge-text-color", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hidden-text", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "badge-dot", isSignal: true, isRequired: false, transformFunction: null }, soft: { classPropertyName: "soft", publicName: "badge-soft", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BadgeDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[badge]', }]
-        }], ctorParameters: () => [], propDecorators: { badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-pill", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-border", required: false }] }], top: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-top", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-start", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-color", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-text-color", required: false }] }], hiddenText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden-text", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-dot", required: false }] }] } });
+            args: [{ selector: '[badge]' }]
+        }], ctorParameters: () => [], propDecorators: { badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-pill", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-border", required: false }] }], top: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-top", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-start", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-color", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-text-color", required: false }] }], hiddenText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden-text", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-dot", required: false }] }], soft: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge-soft", required: false }] }] } });
 
 class BreadcrumbComponent {
     constructor() {
@@ -4420,7 +4426,7 @@ class ListItemImageComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AvatarComponent, selector: "rlb-avatar", inputs: ["size", "shape", "src", "class"] }, { kind: "component", type: BadgeComponent, selector: "span[rlb-badge], img[rlb-badge]", inputs: ["pill", "color", "hidden-text", "border", "class", "badge-text-color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AvatarComponent, selector: "rlb-avatar", inputs: ["size", "shape", "src", "class"] }, { kind: "component", type: BadgeComponent, selector: "span[rlb-badge], img[rlb-badge]", inputs: ["pill", "color", "hidden-text", "border", "soft", "class", "badge-text-color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ListItemImageComponent, decorators: [{
             type: Component,
@@ -5597,7 +5603,7 @@ class SidebarItemComponent {
         </li>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ToggleDirective, selector: "\n    button[toggle],\n    a[toggle],\n    rlb-navbar-item[toggle],\n    rlb-button-toolbar[toggle],\n    rlb-fab[toggle],", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }, { kind: "directive", type: BadgeDirective, selector: "[badge]", inputs: ["badge", "badge-pill", "badge-border", "badge-top", "badge-start", "badge-color", "badge-text-color", "hidden-text", "badge-dot"] }, { kind: "component", type: CollapseComponent, selector: "rlb-collapse", inputs: ["id", "orientation"], outputs: ["statusChange"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: ToggleDirective, selector: "\n    button[toggle],\n    a[toggle],\n    rlb-navbar-item[toggle],\n    rlb-button-toolbar[toggle],\n    rlb-fab[toggle],", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }, { kind: "directive", type: BadgeDirective, selector: "[badge]", inputs: ["badge", "badge-pill", "badge-border", "badge-top", "badge-start", "badge-color", "badge-text-color", "hidden-text", "badge-dot", "badge-soft"] }, { kind: "component", type: CollapseComponent, selector: "rlb-collapse", inputs: ["id", "orientation"], outputs: ["statusChange"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarItemComponent, decorators: [{
             type: Component,
@@ -10065,7 +10071,7 @@ class SelectChipsComponent extends AbstractComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".chips-control{cursor:pointer;overflow:hidden;flex-wrap:nowrap;white-space:nowrap;min-height:calc(1.5em + .75rem + calc(var(--bs-border-width, 1px) * 2))}.chips-control.disabled{pointer-events:none;background-color:var(--bs-secondary-bg);opacity:1}.chips-backdrop{position:fixed;inset:0;z-index:1040}.chips-menu{position:absolute;top:100%;left:0;z-index:1045;max-height:16rem;overflow-y:auto}.chips-menu .dropdown-item{cursor:pointer}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "span[rlb-badge], img[rlb-badge]", inputs: ["pill", "color", "hidden-text", "border", "class", "badge-text-color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".chips-control{cursor:pointer;overflow:hidden;flex-wrap:nowrap;white-space:nowrap;min-height:calc(1.5em + .75rem + calc(var(--bs-border-width, 1px) * 2))}.chips-control.disabled{pointer-events:none;background-color:var(--bs-secondary-bg);opacity:1}.chips-backdrop{position:fixed;inset:0;z-index:1040}.chips-menu{position:absolute;top:100%;left:0;z-index:1045;max-height:16rem;overflow-y:auto}.chips-menu .dropdown-item{cursor:pointer}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "span[rlb-badge], img[rlb-badge]", inputs: ["pill", "color", "hidden-text", "border", "soft", "class", "badge-text-color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SelectChipsComponent, decorators: [{
             type: Component,