@open-rlb/ng-bootstrap 3.3.33 → 3.3.34

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

@@ -10189,12 +10189,15 @@ class LanguageChipsComponent extends AbstractComponent {
         this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id' });
         this.selectKey = signal(0, ...(ngDevMode ? [{ debugName: "selectKey" }] : /* istanbul ignore next */ []));
         this.chips = computed(() => this.value() ?? [], ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
-        this.available = computed(() => this.options().filter(l => !this.chips().includes(l)), ...(ngDevMode ? [{ debugName: "available" }] : /* istanbul ignore next */ []));
         this.isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         this.addControl = new FormControl(null);
         this.addControl.valueChanges.pipe(filter(Boolean), takeUntilDestroyed()).subscribe(lang => {
             this.add(lang);
             this.addControl.setValue(null, { emitEvent: false });
+            // Reset the dropdown back to its placeholder after every pick, even when
+            // the value was ignored as a duplicate, so the already-selected option
+            // doesn't stay stuck as the visible selection.
+            this.selectKey.update(k => k + 1);
         });
     }
     add(lang) {
@@ -10202,7 +10205,6 @@ class LanguageChipsComponent extends AbstractComponent {
             return;
         const next = [...this.chips(), lang];
         this.setValue(next);
-        this.selectKey.update(k => k + 1);
         this.touch();
     }
     remove(lang) {
@@ -10217,14 +10219,14 @@ class LanguageChipsComponent extends AbstractComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LanguageChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LanguageChipsComponent, isStandalone: true, selector: "rlb-language-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "null" } }, usesInheritance: true, ngImport: i0, template: `
     <div class="d-flex flex-column gap-2">
-      @if (!isDisabled() && available().length > 0) {
+      @if (!isDisabled()) {
         @for (_ of [selectKey()]; track _) {
           <div class="lang-add-select">
             <rlb-select
               [formControl]="addControl"
               [placeholder]="placeholder()"
             >
-              @for (lang of available(); track lang) {
+              @for (lang of options(); track lang) {
                 <rlb-option [value]="lang">{{ lang }}</rlb-option>
               }
             </rlb-select>
@@ -10232,14 +10234,19 @@ class LanguageChipsComponent extends AbstractComponent {
         }
       }
       @if (chips().length > 0) {
-        <div class="d-flex flex-wrap align-items-center gap-2">
+        <div class="chips-box form-control d-flex flex-wrap align-items-center gap-2">
           @for (lang of chips(); track lang) {
-            <span class="badge rounded-pill bg-secondary d-inline-flex align-items-center gap-1">
-              {{ lang }}
+            <span
+              rlb-badge
+              pill
+              color="secondary"
+              class="chip d-inline-flex align-items-center gap-1 mw-100"
+            >
+              <span class="chip-label">{{ lang }}</span>
               @if (!isDisabled()) {
                 <button
                   type="button"
-                  class="btn-close btn-close-white btn-close-sm"
+                  class="btn-close btn-close-white btn-close-sm flex-shrink-0"
                   (click)="remove(lang)"
                   [attr.aria-label]="'Remove ' + lang"
                 ></button>
@@ -10249,20 +10256,20 @@ class LanguageChipsComponent extends AbstractComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".lang-add-select{min-width:130px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "inputId", "enable-validation"] }, { kind: "component", type: OptionComponent, selector: "rlb-option", inputs: ["value", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".lang-add-select{min-width:130px}.chips-box{height:auto;max-height:7.5rem;overflow-y:auto}.chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "inputId", "enable-validation"] }, { kind: "component", type: OptionComponent, selector: "rlb-option", inputs: ["value", "disabled"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LanguageChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rlb-language-chips', template: `
     <div class="d-flex flex-column gap-2">
-      @if (!isDisabled() && available().length > 0) {
+      @if (!isDisabled()) {
         @for (_ of [selectKey()]; track _) {
           <div class="lang-add-select">
             <rlb-select
               [formControl]="addControl"
               [placeholder]="placeholder()"
             >
-              @for (lang of available(); track lang) {
+              @for (lang of options(); track lang) {
                 <rlb-option [value]="lang">{{ lang }}</rlb-option>
               }
             </rlb-select>
@@ -10270,14 +10277,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }
       }
       @if (chips().length > 0) {
-        <div class="d-flex flex-wrap align-items-center gap-2">
+        <div class="chips-box form-control d-flex flex-wrap align-items-center gap-2">
           @for (lang of chips(); track lang) {
-            <span class="badge rounded-pill bg-secondary d-inline-flex align-items-center gap-1">
-              {{ lang }}
+            <span
+              rlb-badge
+              pill
+              color="secondary"
+              class="chip d-inline-flex align-items-center gap-1 mw-100"
+            >
+              <span class="chip-label">{{ lang }}</span>
               @if (!isDisabled()) {
                 <button
                   type="button"
-                  class="btn-close btn-close-white btn-close-sm"
+                  class="btn-close btn-close-white btn-close-sm flex-shrink-0"
                   (click)="remove(lang)"
                   [attr.aria-label]="'Remove ' + lang"
                 ></button>
@@ -10287,7 +10299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </div>
       }
     </div>
-  `, host: { '[attr.id]': 'null' }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, SelectComponent, OptionComponent], styles: [".lang-add-select{min-width:130px}\n"] }]
+  `, host: { '[attr.id]': 'null' }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ReactiveFormsModule, SelectComponent, OptionComponent, BadgeComponent], styles: [".lang-add-select{min-width:130px}.chips-box{height:auto;max-height:7.5rem;overflow-y:auto}.chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:12rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 class RadioComponent extends AbstractComponent {