@open-rlb/ng-bootstrap 3.3.34 → 3.3.36

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, output, viewChild, ChangeDetectionStrategy, Component, signal, computed, inject, ElementRef, Renderer2, effect, Directive, Injectable, contentChild, ViewContainerRef, contentChildren, numberAttribute, model, isSignal, Pipe, DOCUMENT, ViewChild, ChangeDetectorRef, DestroyRef, Self, Optional, HostListener, InjectionToken, afterNextRender, untracked, viewChildren, NgModule } from '@angular/core';
+import { input, booleanAttribute, output, viewChild, ChangeDetectionStrategy, Component, signal, computed, inject, ElementRef, Renderer2, effect, Directive, Injectable, contentChild, ViewContainerRef, contentChildren, numberAttribute, model, isSignal, Pipe, DOCUMENT, ViewChild, ChangeDetectorRef, DestroyRef, Self, Optional, HostListener, InjectionToken, viewChildren, afterNextRender, untracked, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/router';
 import { RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { Collapse, Carousel, Dropdown, Modal, Toast, Offcanvas, ScrollSpy, Popover, Tooltip } from 'bootstrap';
@@ -7,7 +7,7 @@ import { NgTemplateOutlet, formatDate, NgClass, TitleCasePipe, JsonPipe, CommonM
 import { Subject, of, map, shareReplay, take, filter, switchMap, Subscription, debounceTime, distinctUntilChanged, Observable, lastValueFrom, takeUntil } from 'rxjs';
 import * as i2 from '@angular/cdk/layout';
 import * as i1 from '@angular/forms';
-import { FormsModule, NgControl, FormControl, ReactiveFormsModule, FormGroup, Validators } from '@angular/forms';
+import { FormsModule, NgControl, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { DateTz as DateTz$1 } from '@open-rlb/date-tz/date-tz';
 import { DateTz } from '@open-rlb/date-tz';
 import { CdkDropListGroup, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragPreview } from '@angular/cdk/drag-drop';
@@ -9970,6 +9970,165 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inputs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => InputComponent), { isSignal: true }] }], validation: [{ type: i0.ContentChild, args: [i0.forwardRef(() => InputValidationComponent), { isSignal: true }] }] } });
 
+class LanguageChipsComponent extends AbstractComponent {
+    constructor() {
+        super(...arguments);
+        this.options = input(['EN', 'IT', 'DE', 'FR', 'ES', 'PT'], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('Add...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** How many chips to render inline before collapsing the rest into "(+N others)". */
+        this.maxVisible = input(4, { ...(ngDevMode ? { debugName: "maxVisible" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id' });
+        this.open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        this.chips = computed(() => this.value() ?? [], ...(ngDevMode ? [{ debugName: "chips" }] : /* istanbul ignore next */ []));
+        this.visibleChips = computed(() => this.chips().slice(0, this.maxVisible()), ...(ngDevMode ? [{ debugName: "visibleChips" }] : /* istanbul ignore next */ []));
+        this.overflowCount = computed(() => Math.max(0, this.chips().length - this.maxVisible()), ...(ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        this.open.update(o => !o);
+    }
+    close() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+        this.touch();
+    }
+    toggleOption(lang) {
+        const next = this.chips().includes(lang)
+            ? this.chips().filter(l => l !== lang)
+            : [...this.chips(), lang];
+        this.setValue(next);
+        this.touch();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LanguageChipsComponent, deps: null, 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 }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", 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="rlb-language-chips position-relative">
+      <div
+        class="form-select chips-control d-flex align-items-center gap-1"
+        [class.disabled]="isDisabled()"
+        [class.is-invalid]="showError() && invalid()"
+        [class.is-valid]="showError() && !invalid()"
+        role="combobox"
+        [attr.aria-expanded]="open()"
+        [attr.tabindex]="isDisabled() ? null : 0"
+        (click)="toggle()"
+        (keydown.enter)="toggle()"
+        (keydown.space)="toggle(); $event.preventDefault()"
+        (blur)="touch()"
+      >
+        @if (chips().length === 0) {
+          <span class="text-muted text-truncate">{{ placeholder() }}</span>
+        } @else {
+          @for (lang of visibleChips(); track lang) {
+            <span
+              rlb-badge
+              pill
+              color="secondary"
+              class="chip d-inline-flex align-items-center flex-shrink-0"
+            >
+              {{ lang }}
+            </span>
+          }
+          @if (overflowCount() > 0) {
+            <span class="text-muted small flex-shrink-0">(+{{ overflowCount() }} others)</span>
+          }
+        }
+      </div>
+
+      @if (open() && !isDisabled()) {
+        <div
+          class="chips-backdrop"
+          (click)="close()"
+        ></div>
+        <div class="dropdown-menu show w-100 chips-menu">
+          @for (lang of options(); track lang) {
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center gap-2"
+              [class.active]="chips().includes(lang)"
+              (click)="toggleOption(lang)"
+            >
+              <input
+                type="checkbox"
+                class="form-check-input m-0 pe-none flex-shrink-0"
+                [checked]="chips().includes(lang)"
+                tabindex="-1"
+              />
+              <span class="text-truncate">{{ lang }}</span>
+            </button>
+          }
+        </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 }); }
+}
+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="rlb-language-chips position-relative">
+      <div
+        class="form-select chips-control d-flex align-items-center gap-1"
+        [class.disabled]="isDisabled()"
+        [class.is-invalid]="showError() && invalid()"
+        [class.is-valid]="showError() && !invalid()"
+        role="combobox"
+        [attr.aria-expanded]="open()"
+        [attr.tabindex]="isDisabled() ? null : 0"
+        (click)="toggle()"
+        (keydown.enter)="toggle()"
+        (keydown.space)="toggle(); $event.preventDefault()"
+        (blur)="touch()"
+      >
+        @if (chips().length === 0) {
+          <span class="text-muted text-truncate">{{ placeholder() }}</span>
+        } @else {
+          @for (lang of visibleChips(); track lang) {
+            <span
+              rlb-badge
+              pill
+              color="secondary"
+              class="chip d-inline-flex align-items-center flex-shrink-0"
+            >
+              {{ lang }}
+            </span>
+          }
+          @if (overflowCount() > 0) {
+            <span class="text-muted small flex-shrink-0">(+{{ overflowCount() }} others)</span>
+          }
+        }
+      </div>
+
+      @if (open() && !isDisabled()) {
+        <div
+          class="chips-backdrop"
+          (click)="close()"
+        ></div>
+        <div class="dropdown-menu show w-100 chips-menu">
+          @for (lang of options(); track lang) {
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center gap-2"
+              [class.active]="chips().includes(lang)"
+              (click)="toggleOption(lang)"
+            >
+              <input
+                type="checkbox"
+                class="form-check-input m-0 pe-none flex-shrink-0"
+                [checked]="chips().includes(lang)"
+                tabindex="-1"
+              />
+              <span class="text-truncate">{{ lang }}</span>
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `, host: { '[attr.id]': 'null' }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [BadgeComponent], 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"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", 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 OptionComponent {
     constructor() {
         this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
@@ -10019,289 +10178,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], template: [{ type: i0.ViewChild, args: ['element', { isSignal: true }] }], contentTemplate: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
 
-class SelectComponent extends AbstractComponent {
-    constructor() {
-        super();
-        this.placeholder = input(undefined, { ...(ngDevMode ? { debugName: "placeholder" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
-        this.size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), alias: 'size' });
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'disabled',
-            transform: booleanAttribute });
-        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), alias: 'readonly', transform: booleanAttribute });
-        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), alias: 'multiple', transform: booleanAttribute });
-        this.display = input(undefined, { ...(ngDevMode ? { debugName: "display" } : /* istanbul ignore next */ {}), alias: 'display', transform: numberAttribute });
-        this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'inputId',
-            transform: (v) => v || '' });
-        this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-validation' });
-        this.el = viewChild('select', ...(ngDevMode ? [{ debugName: "el" }] : /* istanbul ignore next */ []));
-        this._projectedDisplayOptions = viewChild('projectedDisplayOptions', { ...(ngDevMode ? { debugName: "_projectedDisplayOptions" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
-        this.options = contentChildren(OptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        afterNextRender(() => {
-            // This executes exactly when the DOM is fully painted and bindings are settled
-            this.onWrite(this.value());
-        });
-        effect(() => {
-            const vcr = this._projectedDisplayOptions(); // The ViewContainerRef in the Select
-            const options = this.options(); // The list of OptionComponents
-            if (!vcr)
-                return;
-            vcr.clear();
-            options.forEach(opt => {
-                const view = vcr.createEmbeddedView(opt.template());
-                view.detectChanges();
-            });
-            untracked(() => {
-                this.onWrite(this.value());
-                this.cdr.markForCheck();
-            });
-        });
-    }
-    update(ev) {
-        if (!this.disabled()) {
-            const t = ev;
-            if (this.multiple()) {
-                const selected = Array.from(t.selectedOptions)
-                    .filter(o => o.selected)
-                    .map(o => o.value);
-                this.setValue(selected);
-            }
-            else {
-                this.setValue(t?.value);
-            }
-        }
-    }
-    onWrite(data) {
-        const el = this.el?.();
-        if (el && el.nativeElement) {
-            if (data === undefined || data === null)
-                return;
-            const normalizedData = Array.isArray(data) ? data : [data];
-            if (this.multiple()) {
-                const opt = Array.from(el.nativeElement.options);
-                opt.forEach(o => {
-                    o.selected = normalizedData.includes(o.value);
-                });
-            }
-            else {
-                const singleData = normalizedData.length > 0 ? normalizedData[0] : undefined;
-                if (singleData === undefined)
-                    return;
-                const opt = Array.from(el.nativeElement.options);
-                const val = opt.find(o => o.value == singleData);
-                if (val)
-                    val.selected = true;
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "rlb-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "null" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], viewQueries: [{ propertyName: "el", first: true, predicate: ["select"], descendants: true, isSignal: true }, { propertyName: "_projectedDisplayOptions", first: true, predicate: ["projectedDisplayOptions"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <ng-content select="[before]"></ng-content>
-    <div class="input-group has-validation">
-      <select
-        #select
-        class="form-select d-inline-block"
-        [id]="id()"
-        [attr.disabled]="disabled() ? true : undefined"
-        [attr.readonly]="readonly() ? true : undefined"
-        [attr.multiple]="multiple() ? true : undefined"
-        [class.form-select-lg]="size() === 'large'"
-        [class.form-select-sm]="size() === 'small'"
-        [attr.placeholder]="placeholder()"
-        [attr.size]="display()"
-        (blur)="touch()"
-        [class.is-invalid]="control?.touched && control?.invalid && enableValidation()"
-        [class.is-valid]="control?.touched && control?.valid && enableValidation()"
-        (change)="update($event.target)"
-      >
-        @if (placeholder()) {
-          <option
-            selected
-            disabled
-          >
-            {{ placeholder() }}
-          </option>
-        }
-        <ng-container #projectedDisplayOptions></ng-container>
-      </select>
-      @if (errors() && showError()) {
-        <rlb-input-validation [errors]="errors()" />
-      }
-    </div>
-    <ng-content select="[after]"></ng-content>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"], outputs: ["errorsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'rlb-select',
-                    template: `
-    <ng-content select="[before]"></ng-content>
-    <div class="input-group has-validation">
-      <select
-        #select
-        class="form-select d-inline-block"
-        [id]="id()"
-        [attr.disabled]="disabled() ? true : undefined"
-        [attr.readonly]="readonly() ? true : undefined"
-        [attr.multiple]="multiple() ? true : undefined"
-        [class.form-select-lg]="size() === 'large'"
-        [class.form-select-sm]="size() === 'small'"
-        [attr.placeholder]="placeholder()"
-        [attr.size]="display()"
-        (blur)="touch()"
-        [class.is-invalid]="control?.touched && control?.invalid && enableValidation()"
-        [class.is-valid]="control?.touched && control?.valid && enableValidation()"
-        (change)="update($event.target)"
-      >
-        @if (placeholder()) {
-          <option
-            selected
-            disabled
-          >
-            {{ placeholder() }}
-          </option>
-        }
-        <ng-container #projectedDisplayOptions></ng-container>
-      </select>
-      @if (errors() && showError()) {
-        <rlb-input-validation [errors]="errors()" />
-      }
-    </div>
-    <ng-content select="[after]"></ng-content>
-  `,
-                    host: { '[attr.id]': 'null' },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        FormsModule,
-                        InputValidationComponent,
-                        DataTableActionComponent,
-                    ],
-                }]
-        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], el: [{ type: i0.ViewChild, args: ['select', { isSignal: true }] }], _projectedDisplayOptions: [{ type: i0.ViewChild, args: ['projectedDisplayOptions', { ...{
-                            read: ViewContainerRef,
-                        }, isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }] } });
-
-class LanguageChipsComponent extends AbstractComponent {
-    constructor() {
-        super();
-        this.options = input(['EN', 'IT', 'DE', 'FR', 'ES', 'PT'], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('Add...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        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.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) {
-        if (this.chips().includes(lang))
-            return;
-        const next = [...this.chips(), lang];
-        this.setValue(next);
-        this.touch();
-    }
-    remove(lang) {
-        const next = this.chips().filter(l => l !== lang);
-        this.setValue(next);
-        this.touch();
-    }
-    setDisabledState(isDisabled) {
-        super.setDisabledState?.(isDisabled);
-        isDisabled ? this.addControl.disable() : this.addControl.enable();
-    }
-    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()) {
-        @for (_ of [selectKey()]; track _) {
-          <div class="lang-add-select">
-            <rlb-select
-              [formControl]="addControl"
-              [placeholder]="placeholder()"
-            >
-              @for (lang of options(); track lang) {
-                <rlb-option [value]="lang">{{ lang }}</rlb-option>
-              }
-            </rlb-select>
-          </div>
-        }
-      }
-      @if (chips().length > 0) {
-        <div class="chips-box form-control d-flex flex-wrap align-items-center gap-2">
-          @for (lang of chips(); track 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 flex-shrink-0"
-                  (click)="remove(lang)"
-                  [attr.aria-label]="'Remove ' + lang"
-                ></button>
-              }
-            </span>
-          }
-        </div>
-      }
-    </div>
-  `, 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()) {
-        @for (_ of [selectKey()]; track _) {
-          <div class="lang-add-select">
-            <rlb-select
-              [formControl]="addControl"
-              [placeholder]="placeholder()"
-            >
-              @for (lang of options(); track lang) {
-                <rlb-option [value]="lang">{{ lang }}</rlb-option>
-              }
-            </rlb-select>
-          </div>
-        }
-      }
-      @if (chips().length > 0) {
-        <div class="chips-box form-control d-flex flex-wrap align-items-center gap-2">
-          @for (lang of chips(); track 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 flex-shrink-0"
-                  (click)="remove(lang)"
-                  [attr.aria-label]="'Remove ' + lang"
-                ></button>
-              }
-            </span>
-          }
-        </div>
-      }
-    </div>
-  `, 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 {
     constructor() {
         super();
@@ -10514,6 +10390,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], el: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
+class SelectComponent extends AbstractComponent {
+    constructor() {
+        super();
+        this.placeholder = input(undefined, { ...(ngDevMode ? { debugName: "placeholder" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+        this.size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), alias: 'size' });
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), alias: 'readonly', transform: booleanAttribute });
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), alias: 'multiple', transform: booleanAttribute });
+        this.display = input(undefined, { ...(ngDevMode ? { debugName: "display" } : /* istanbul ignore next */ {}), alias: 'display', transform: numberAttribute });
+        this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'inputId',
+            transform: (v) => v || '' });
+        this.enableValidation = input(false, { ...(ngDevMode ? { debugName: "enableValidation" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'enable-validation' });
+        this.el = viewChild('select', ...(ngDevMode ? [{ debugName: "el" }] : /* istanbul ignore next */ []));
+        this._projectedDisplayOptions = viewChild('projectedDisplayOptions', { ...(ngDevMode ? { debugName: "_projectedDisplayOptions" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        this.options = contentChildren(OptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            // This executes exactly when the DOM is fully painted and bindings are settled
+            this.onWrite(this.value());
+        });
+        effect(() => {
+            const vcr = this._projectedDisplayOptions(); // The ViewContainerRef in the Select
+            const options = this.options(); // The list of OptionComponents
+            if (!vcr)
+                return;
+            vcr.clear();
+            options.forEach(opt => {
+                const view = vcr.createEmbeddedView(opt.template());
+                view.detectChanges();
+            });
+            untracked(() => {
+                this.onWrite(this.value());
+                this.cdr.markForCheck();
+            });
+        });
+    }
+    update(ev) {
+        if (!this.disabled()) {
+            const t = ev;
+            if (this.multiple()) {
+                const selected = Array.from(t.selectedOptions)
+                    .filter(o => o.selected)
+                    .map(o => o.value);
+                this.setValue(selected);
+            }
+            else {
+                this.setValue(t?.value);
+            }
+        }
+    }
+    onWrite(data) {
+        const el = this.el?.();
+        if (el && el.nativeElement) {
+            if (data === undefined || data === null)
+                return;
+            const normalizedData = Array.isArray(data) ? data : [data];
+            if (this.multiple()) {
+                const opt = Array.from(el.nativeElement.options);
+                opt.forEach(o => {
+                    o.selected = normalizedData.includes(o.value);
+                });
+            }
+            else {
+                const singleData = normalizedData.length > 0 ? normalizedData[0] : undefined;
+                if (singleData === undefined)
+                    return;
+                const opt = Array.from(el.nativeElement.options);
+                const val = opt.find(o => o.value == singleData);
+                if (val)
+                    val.selected = true;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SelectComponent, isStandalone: true, selector: "rlb-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, enableValidation: { classPropertyName: "enableValidation", publicName: "enable-validation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "null" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], viewQueries: [{ propertyName: "el", first: true, predicate: ["select"], descendants: true, isSignal: true }, { propertyName: "_projectedDisplayOptions", first: true, predicate: ["projectedDisplayOptions"], descendants: true, read: ViewContainerRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-content select="[before]"></ng-content>
+    <div class="input-group has-validation">
+      <select
+        #select
+        class="form-select d-inline-block"
+        [id]="id()"
+        [attr.disabled]="disabled() ? true : undefined"
+        [attr.readonly]="readonly() ? true : undefined"
+        [attr.multiple]="multiple() ? true : undefined"
+        [class.form-select-lg]="size() === 'large'"
+        [class.form-select-sm]="size() === 'small'"
+        [attr.placeholder]="placeholder()"
+        [attr.size]="display()"
+        (blur)="touch()"
+        [class.is-invalid]="control?.touched && control?.invalid && enableValidation()"
+        [class.is-valid]="control?.touched && control?.valid && enableValidation()"
+        (change)="update($event.target)"
+      >
+        @if (placeholder()) {
+          <option
+            selected
+            disabled
+          >
+            {{ placeholder() }}
+          </option>
+        }
+        <ng-container #projectedDisplayOptions></ng-container>
+      </select>
+      @if (errors() && showError()) {
+        <rlb-input-validation [errors]="errors()" />
+      }
+    </div>
+    <ng-content select="[after]"></ng-content>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: InputValidationComponent, selector: "rlb-input-validation", inputs: ["errors"], outputs: ["errorsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rlb-select',
+                    template: `
+    <ng-content select="[before]"></ng-content>
+    <div class="input-group has-validation">
+      <select
+        #select
+        class="form-select d-inline-block"
+        [id]="id()"
+        [attr.disabled]="disabled() ? true : undefined"
+        [attr.readonly]="readonly() ? true : undefined"
+        [attr.multiple]="multiple() ? true : undefined"
+        [class.form-select-lg]="size() === 'large'"
+        [class.form-select-sm]="size() === 'small'"
+        [attr.placeholder]="placeholder()"
+        [attr.size]="display()"
+        (blur)="touch()"
+        [class.is-invalid]="control?.touched && control?.invalid && enableValidation()"
+        [class.is-valid]="control?.touched && control?.valid && enableValidation()"
+        (change)="update($event.target)"
+      >
+        @if (placeholder()) {
+          <option
+            selected
+            disabled
+          >
+            {{ placeholder() }}
+          </option>
+        }
+        <ng-container #projectedDisplayOptions></ng-container>
+      </select>
+      @if (errors() && showError()) {
+        <rlb-input-validation [errors]="errors()" />
+      }
+    </div>
+    <ng-content select="[after]"></ng-content>
+  `,
+                    host: { '[attr.id]': 'null' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        FormsModule,
+                        InputValidationComponent,
+                        DataTableActionComponent,
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], enableValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enable-validation", required: false }] }], el: [{ type: i0.ViewChild, args: ['select', { isSignal: true }] }], _projectedDisplayOptions: [{ type: i0.ViewChild, args: ['projectedDisplayOptions', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }] } });
+
 class SwitchComponent extends AbstractComponent {
     constructor() {
         super();
@@ -11503,7 +11540,7 @@ class RlbBootstrapModule {
             FormsModule,
             ReactiveFormsModule,
             TranslateModule,
-            RouterModule, DataTableComponent, SelectComponent, OptionComponent, LanguageChipsComponent, NavbarFormComponent, FormFieldsComponent] }); }
+            RouterModule, DataTableComponent, SelectComponent, OptionComponent, NavbarFormComponent, FormFieldsComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: RlbBootstrapModule, decorators: [{
             type: NgModule,