@open-rlb/ng-bootstrap 3.3.41 → 3.3.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
- @use "sass:color";
2
- //
1
+ @use 'sass:color';
2
+ @use 'sass:map';
3
+ //
3
4
  // _badge.scss
4
- //
5
-
5
+ //
6
6
 
7
7
  .badge {
8
8
  &[href] {
@@ -13,59 +13,88 @@
13
13
  }
14
14
  }
15
15
 
16
- // Soft badge
17
- @mixin badge-variant-soft($bg) {
18
- color: $bg;
19
- background-color: rgba($bg, 0.18);
16
+ // Soft badge — tinted surface + emphasis text. Driven by the subtle custom properties so it
17
+ // re-derives under [data-bs-theme] and follows tenant re-points of --bs-*-bg-subtle (see the
18
+ // partner accent overrides). The previous version pinned `color: $value` on an rgba() tint,
19
+ // which is theme-blind: 1.66:1 for warning on a light surface.
20
+ @mixin badge-variant-soft($color) {
21
+ color: var(--#{$prefix}#{$color}-text-emphasis);
22
+ background-color: var(--#{$prefix}#{$color}-bg-subtle);
23
+ border: $border-width solid var(--#{$prefix}#{$color}-border-subtle);
20
24
 
21
25
  &[href] {
22
26
  &:hover,
23
27
  &:focus {
24
- color: $bg;
28
+ color: var(--#{$prefix}#{$color}-text-emphasis);
25
29
  text-decoration: none;
26
- background-color: rgba($bg, 0.4);
30
+ background-color: var(--#{$prefix}#{$color}-border-subtle);
27
31
  }
28
32
  }
29
33
  }
30
34
 
31
- @each $color, $value in $theme-colors {
32
- .badge {
33
- &.bg-#{$color} {
35
+ .badge {
36
+ &.bg-light {
37
+ color: var(--#{$prefix}body-color);
38
+
34
39
  &[href] {
35
40
  &:hover,
36
41
  &:focus {
37
- background-color: color.adjust($value, $lightness: -4%) !important;
42
+ color: var(--#{$prefix}body-color);
38
43
  }
39
44
  }
40
45
  }
41
46
  }
42
47
 
43
- .badge{
44
- &.bg-light{
45
- color: var(--#{$prefix}body-color);
46
-
47
- &[href] {
48
- &:hover,
49
- &:focus {
50
- color: var(--#{$prefix}body-color);
48
+ @each $color, $value in $theme-colors {
49
+ .badge {
50
+ &.bg-#{$color} {
51
+ &[href] {
52
+ &:hover,
53
+ &:focus {
54
+ background-color: color.adjust($value, $lightness: -4%) !important;
55
+ }
51
56
  }
52
57
  }
53
58
  }
54
- }
55
59
 
56
- .badge-soft-#{$color} {
57
- @include badge-variant-soft($value);
60
+ @if map.has-key($theme-colors-bg-subtle, $color) {
61
+ .badge-soft-#{$color} {
62
+ @include badge-variant-soft($color);
63
+ }
64
+ } @else {
65
+ // No subtle palette exists for this color. Fall back to an accessible solid so the class is
66
+ // never silently transparent.
67
+ .badge-soft-#{$color} {
68
+ color: color-contrast($value);
69
+ background-color: $value;
70
+ }
58
71
  }
59
-
60
72
  }
61
73
 
62
- .rounded-pill{
63
- padding-right: .6em;
64
- padding-left: .6em;
74
+ .rounded-pill {
75
+ padding-right: 0.6em;
76
+ padding-left: 0.6em;
65
77
  }
66
78
 
67
79
  // Dark badge
68
80
 
69
- .badge.bg-dark{
81
+ .badge.bg-dark {
70
82
  color: var(--#{$prefix}light);
71
- }
83
+ }
84
+
85
+ // Bootstrap sizes the badge around the font's em box (line-height: 1 plus symmetric padding) and
86
+ // places text on the baseline, so the box always reserves descender room below the baseline. Digits
87
+ // and capitals never use it, leaving the glyphs visibly high in the pill — by 2.8px at a 10.8px font
88
+ // size. Trimming to cap-height..baseline makes the padding wrap the real glyph box instead, so every
89
+ // badge centres identically regardless of its content or its rendered size.
90
+ //
91
+ // Firefox has not shipped text-box-trim: without the @supports guard it would take the padding bump
92
+ // without the trim, which is worse than the status quo.
93
+ @supports (text-box: trim-both cap alphabetic) {
94
+ .badge {
95
+ text-box: trim-both cap alphabetic;
96
+ // Drive Bootstrap's own custom property rather than padding-top/bottom, so consumer overrides
97
+ // and py-* utilities still compose.
98
+ --#{$prefix}badge-padding-y: #{$badge-padding-y-trimmed};
99
+ }
100
+ }
@@ -616,6 +616,7 @@ class BadgeComponent {
616
616
  this.color = input('primary', { ...(ngDevMode ? { debugName: "color" } : /* istanbul ignore next */ {}), alias: 'color' });
617
617
  this.hiddenText = input(undefined, { ...(ngDevMode ? { debugName: "hiddenText" } : /* istanbul ignore next */ {}), alias: 'hidden-text' });
618
618
  this.border = input(false, { ...(ngDevMode ? { debugName: "border" } : /* istanbul ignore next */ {}), alias: 'border', transform: booleanAttribute });
619
+ this.soft = input(false, { ...(ngDevMode ? { debugName: "soft" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
619
620
  this.cssClass = input(undefined, { ...(ngDevMode ? { debugName: "cssClass" } : /* istanbul ignore next */ {}), alias: 'class' });
620
621
  this.textColor = input(undefined, { ...(ngDevMode ? { debugName: "textColor" } : /* istanbul ignore next */ {}), alias: 'badge-text-color' });
621
622
  this.template = viewChild.required('template');
@@ -624,8 +625,9 @@ class BadgeComponent {
624
625
  if (this.pill()) {
625
626
  style += ` rounded-pill`;
626
627
  }
627
- if (this.color()) {
628
- style += ` bg-${this.color()}`;
628
+ const color = this.color();
629
+ if (color) {
630
+ style += this.soft() ? ` badge-soft-${color}` : ` bg-${color}`;
629
631
  }
630
632
  if (this.border()) {
631
633
  style += ` border`;
@@ -643,7 +645,7 @@ class BadgeComponent {
643
645
  this.viewContainerRef.element.nativeElement.remove();
644
646
  }
645
647
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
646
- 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: `
648
+ 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: `
647
649
  <ng-template #template>
648
650
  <span [class]="style()">
649
651
  <ng-content></ng-content>
@@ -670,7 +672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
670
672
  `,
671
673
  changeDetection: ChangeDetectionStrategy.OnPush,
672
674
  }]
673
- }], 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 }] }] } });
675
+ }], 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 }] }] } });
674
676
 
675
677
  class BadgeDirective {
676
678
  constructor() {
@@ -685,6 +687,7 @@ class BadgeDirective {
685
687
  this.textColor = input('dark', { ...(ngDevMode ? { debugName: "textColor" } : /* istanbul ignore next */ {}), alias: 'badge-text-color' });
686
688
  this.hiddenText = input(undefined, { ...(ngDevMode ? { debugName: "hiddenText" } : /* istanbul ignore next */ {}), alias: 'hidden-text' });
687
689
  this.dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), alias: 'badge-dot', transform: booleanAttribute });
690
+ this.soft = input(false, { ...(ngDevMode ? { debugName: "soft" } : /* istanbul ignore next */ {}), alias: 'badge-soft', transform: booleanAttribute });
688
691
  this.elementRef = inject(ElementRef);
689
692
  this.renderer = inject(Renderer2);
690
693
  effect(() => {
@@ -740,10 +743,13 @@ class BadgeDirective {
740
743
  if (border) {
741
744
  this.renderer.addClass(this.badgeElement, 'rounded-border');
742
745
  }
746
+ // A dot is pure color with no text — keep it solid.
747
+ const useSoft = this.soft() && !this.dot();
743
748
  if (color) {
744
- this.renderer.addClass(this.badgeElement, `bg-${color}`);
749
+ this.renderer.addClass(this.badgeElement, useSoft ? `badge-soft-${color}` : `bg-${color}`);
745
750
  }
746
- if (textColor) {
751
+ // textColor defaults to 'dark', and .text-dark is !important — it would beat the soft color.
752
+ if (textColor && !useSoft) {
747
753
  this.renderer.addClass(this.badgeElement, `text-${textColor}`);
748
754
  }
749
755
  if (badgeValue) {
@@ -787,12 +793,12 @@ class BadgeDirective {
787
793
  }
788
794
  }
789
795
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
790
- 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 }); }
796
+ 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 }); }
791
797
  }
792
798
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BadgeDirective, decorators: [{
793
799
  type: Directive,
794
- args: [{ selector: '[badge]', }]
795
- }], 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 }] }] } });
800
+ args: [{ selector: '[badge]' }]
801
+ }], 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 }] }] } });
796
802
 
797
803
  class BreadcrumbComponent {
798
804
  constructor() {
@@ -4420,7 +4426,7 @@ class ListItemImageComponent {
4420
4426
  </div>
4421
4427
  }
4422
4428
  </div>
4423
- `, 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 }); }
4429
+ `, 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 }); }
4424
4430
  }
4425
4431
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ListItemImageComponent, decorators: [{
4426
4432
  type: Component,
@@ -5597,7 +5603,7 @@ class SidebarItemComponent {
5597
5603
  </li>
5598
5604
  }
5599
5605
  </ng-template>
5600
- `, 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 }); }
5606
+ `, 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 }); }
5601
5607
  }
5602
5608
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SidebarItemComponent, decorators: [{
5603
5609
  type: Component,
@@ -10065,7 +10071,7 @@ class SelectChipsComponent extends AbstractComponent {
10065
10071
  </div>
10066
10072
  }
10067
10073
  </div>
10068
- `, 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 }); }
10074
+ `, 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 }); }
10069
10075
  }
10070
10076
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SelectChipsComponent, decorators: [{
10071
10077
  type: Component,