@cauca-911/management 22.0.7 → 22.0.8

package/fesm2022/cauca-911-management.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injector, inject, Injectable, computed, ChangeDetectionStrategy, Component, ViewChild, signal, viewChild, resource, effect, untracked, model, input, HostListener, forwardRef, ViewEncapsulation, output } from '@angular/core';
-import { pendingChangesGuard, DialogService, PageTitleComponent, LoadingSpinnerIndicatorComponent, LoadingErrorComponent, StrokedButtonComponent, RaisedButtonComponent, ListPaginatorComponent, IconButtonComponent, LoadingStateService, GroupContainerComponent, ConfirmationResult, SavingErrorBoxComponent, MenuItemComponent, ExpandablePanelComponent, FieldErrorsComponent, PasswordSelectionComponent, PhoneNumberInputComponent, ControlFieldErrorsComponent } from '@cauca-911/material';
+import { pendingChangesGuard, DialogService, PageTitleComponent, LoadingSpinnerIndicatorComponent, LoadingErrorComponent, StrokedButtonComponent, RaisedButtonComponent, ListPaginatorComponent, IconButtonComponent, LoadingStateService, GroupContainerComponent, ConfirmationResult, SavingErrorBoxComponent, MenuItemComponent, ExpandablePanelComponent, FieldErrorsComponent, PasswordSelectionComponent, PhoneNumberInputComponent, ControlErrorStateDirective, ControlFieldErrorsComponent, DropdownChipAutocompleteComponent } from '@cauca-911/material';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -24,7 +24,7 @@ import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
-import { toSignal, toObservable, rxResource } from '@angular/core/rxjs-interop';
+import { toSignal, toObservable, rxResource, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { v4 } from 'uuid';
 import * as i4$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
@@ -39,10 +39,6 @@ import { MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, Mat
 import { schema, required, maxLength, validateHttp, email, readonly, pattern, FormField } from '@angular/forms/signals';
 import * as i3$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i2$2 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i3$3 from 'ngx-mat-select-search';
-import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 
 const MANAGEMENT_URL_PREFIX = new InjectionToken('MANAGEMENT_URL_PREFIX');
 const MANAGEMENT_ROUTE_SEGMENT = new InjectionToken('MANAGEMENT_ROUTE_SEGMENT');
@@ -363,7 +359,7 @@ class UserSearchService {
     }], null, null); })();
 
 const _c0$5 = ["resultPaginator"];
-const _forTrack0$5 = ($index, $item) => $item.id;
+const _forTrack0$4 = ($index, $item) => $item.id;
 function GroupUserSelectionDialogComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
     i0.ɵɵtext(1);
@@ -415,7 +411,7 @@ function GroupUserSelectionDialogComponent_Conditional_17_Template(rf, ctx) { if
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mat-selection-list", 18);
     i0.ɵɵlistener("selectionChange", function GroupUserSelectionDialogComponent_Conditional_17_Template_mat_selection_list_selectionChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectionChange($event)); });
-    i0.ɵɵrepeaterCreate(1, GroupUserSelectionDialogComponent_Conditional_17_For_2_Template, 4, 6, "mat-list-option", 19, _forTrack0$5);
+    i0.ɵɵrepeaterCreate(1, GroupUserSelectionDialogComponent_Conditional_17_For_2_Template, 4, 6, "mat-list-option", 19, _forTrack0$4);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(3, GroupUserSelectionDialogComponent_Conditional_17_Conditional_3_Template, 2, 2, "cauca-list-paginator", 20);
 } if (rf & 2) {
@@ -606,7 +602,7 @@ class GroupUserSelectionDialogComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GroupUserSelectionDialogComponent, { className: "GroupUserSelectionDialogComponent", filePath: "lib/components/group-user-selection-dialog/group-user-selection-dialog.component.ts", lineNumber: 46 }); })();
 
 const _c0$4 = ["paginator"];
-const _forTrack0$4 = ($index, $item) => $item.id;
+const _forTrack0$3 = ($index, $item) => $item.id;
 function GroupUserEditionListComponent_For_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11);
     i0.ɵɵtext(1);
@@ -756,7 +752,7 @@ class GroupUserEditionListComponent {
             i0.ɵɵtext(7, "search");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(8, "mat-list", 5);
-            i0.ɵɵrepeaterCreate(9, GroupUserEditionListComponent_For_10_Template, 8, 5, "mat-list-item", 6, _forTrack0$4, false, GroupUserEditionListComponent_ForEmpty_11_Template, 2, 1);
+            i0.ɵɵrepeaterCreate(9, GroupUserEditionListComponent_For_10_Template, 8, 5, "mat-list-item", 6, _forTrack0$3, false, GroupUserEditionListComponent_ForEmpty_11_Template, 2, 1);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(12, GroupUserEditionListComponent_Conditional_12_Template, 2, 2, "cauca-list-paginator", 7);
             i0.ɵɵelementStart(13, "cauca-raised-button", 8);
@@ -829,7 +825,7 @@ class PermissionManagementService {
             }]
     }], null, null); })();
 
-const _forTrack0$3 = ($index, $item) => $item.id;
+const _forTrack0$2 = ($index, $item) => $item.id;
 function GroupPermissionListComponent_For_9_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mat-list-item", 4)(1, "mat-checkbox", 6);
@@ -914,7 +910,7 @@ class GroupPermissionListComponent {
             i0.ɵɵtext(6, "search");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(7, "mat-selection-list", 3);
-            i0.ɵɵrepeaterCreate(8, GroupPermissionListComponent_For_9_Template, 3, 4, "mat-list-item", 4, _forTrack0$3, false, GroupPermissionListComponent_ForEmpty_10_Template, 6, 3, "div", 5);
+            i0.ɵɵrepeaterCreate(8, GroupPermissionListComponent_For_9_Template, 3, 4, "mat-list-item", 4, _forTrack0$2, false, GroupPermissionListComponent_ForEmpty_10_Template, 6, 3, "div", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -1196,7 +1192,7 @@ var UserPermissionOriginKind;
     UserPermissionOriginKind[UserPermissionOriginKind["UserOverride"] = 1] = "UserOverride";
 })(UserPermissionOriginKind || (UserPermissionOriginKind = {}));
 
-const _forTrack0$2 = ($index, $item) => $item.idModulePermission;
+const _forTrack0$1 = ($index, $item) => $item.idModulePermission;
 function UserPermissionListComponent_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " check ");
 } }
@@ -1306,7 +1302,7 @@ class UserPermissionListComponent {
             i0.ɵɵtext(6, "search");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(7, "mat-list", 4);
-            i0.ɵɵrepeaterCreate(8, UserPermissionListComponent_For_9_Template, 16, 11, "mat-list-item", 5, _forTrack0$2, false, UserPermissionListComponent_ForEmpty_10_Template, 6, 3, "div", 6);
+            i0.ɵɵrepeaterCreate(8, UserPermissionListComponent_For_9_Template, 16, 11, "mat-list-item", 5, _forTrack0$1, false, UserPermissionListComponent_ForEmpty_10_Template, 6, 3, "div", 6);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -1485,7 +1481,7 @@ class ScopeListGridColumnComponent extends BaseGridColumnComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ScopeListGridColumnComponent, { className: "ScopeListGridColumnComponent", filePath: "lib/components/scope-list-grid-column/scope-list-grid-column.component.ts", lineNumber: 28 }); })();
 
 const _c0$2 = () => ["userName"];
-const _forTrack0$1 = ($index, $item) => $item.prop;
+const _forTrack0 = ($index, $item) => $item.prop;
 function UserListGridComponent_For_9_Case_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "cauca-scope-list-grid-column", 6);
     i0.ɵɵpipe(1, "translate");
@@ -1623,7 +1619,7 @@ class UserListGridComponent {
             i0.ɵɵpipe(5, "translate");
             i0.ɵɵelement(6, "cauca-sortable-data-grid-column", 4);
             i0.ɵɵpipe(7, "translate");
-            i0.ɵɵrepeaterCreate(8, UserListGridComponent_For_9_Template, 3, 1, null, null, _forTrack0$1);
+            i0.ɵɵrepeaterCreate(8, UserListGridComponent_For_9_Template, 3, 1, null, null, _forTrack0);
             i0.ɵɵconditionalCreate(10, UserListGridComponent_Conditional_10_Template, 3, 3, "cauca-data-grid-menu-column", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
@@ -2000,17 +1996,6 @@ class UserPersonalInformationFieldsComponent {
     }], null, { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], isEmailReadOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmailReadOnly", required: false }] }], emailHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "emailHint", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserPersonalInformationFieldsComponent, { className: "UserPersonalInformationFieldsComponent", filePath: "lib/components/user-personal-information-fields/user-personal-information-fields.component.ts", lineNumber: 24 }); })();
 
-const _forTrack0 = ($index, $item) => $item.id;
-function UserGroupsSelectorComponent_For_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-option", 3);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const option_r1 = ctx.$implicit;
-    i0.ɵɵproperty("value", option_r1.id);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(option_r1.name);
-} }
 class UserGroupsSelectorComponent {
     constructor() {
         this.value = model([], /* @ts-ignore */
@@ -2034,78 +2019,87 @@ class UserGroupsSelectorComponent {
         this.errors = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         this.touch = output();
-        this.filterControl = new FormControl('');
+        // `DropdownChipAutocompleteComponent` is a `ControlValueAccessor` and stays one per ADR-0005,
+        // so a reactive control is the only channel through which its selection can be read back.
+        this.selectedGroupIds = new FormControl([], { nonNullable: true });
         this.options = computed(() => this.groups.value(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        this.filteredOptions = computed(() => {
-            const filter = toLowerCaseAndWithoutDiacritics(this.filterText() ?? '');
-            if (!filter) {
-                return this.options();
-            }
-            // MatSelect clears its selection model for any value whose option is not
-            // rendered, so a selection hidden by the filter is lost on the next pick.
-            const selected = new Set(this.value());
-            return this.options().filter((option) => selected.has(option.id) || toLowerCaseAndWithoutDiacritics(option.name).includes(filter));
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
-        this.isSelectDisabled = computed(() => this.disabled() || this.readonly() || this.options().length === 0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isSelectDisabled" }] : /* istanbul ignore next */ []));
+        this.isControlDisabled = computed(() => this.disabled() || this.readonly() || this.options().length === 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isControlDisabled" }] : /* istanbul ignore next */ []));
         this.assignableGroupsService = inject(AssignableGroupsService);
-        this.filterText = toSignal(this.filterControl.valueChanges, { initialValue: '' });
         this.groups = rxResource({
             stream: () => this.assignableGroupsService.getAssignableGroups(),
             defaultValue: [],
         });
+        this.selectedGroupIds.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe((groupIds) => this.onSelectionChange(groupIds));
+        effect(() => {
+            const groupIds = this.value();
+            if (!haveSameIds(groupIds, this.selectedGroupIds.value)) {
+                this.selectedGroupIds.setValue(groupIds, { emitEvent: false });
+            }
+        });
+        // Toggled through the control rather than a `[disabled]` binding, which logs a dev-mode
+        // warning on a reactive-forms host.
+        effect(() => {
+            if (this.isControlDisabled()) {
+                this.selectedGroupIds.disable({ emitEvent: false });
+            }
+            else {
+                this.selectedGroupIds.enable({ emitEvent: false });
+            }
+        });
     }
     onSelectionChange(groupIds) {
+        // `writeValue` on the chip autocomplete re-invokes its own change callback, so a value
+        // pushed in by the bound field echoes back here; without this guard it would report a
+        // programmatic write as a user touch.
+        if (haveSameIds(groupIds, this.value())) {
+            return;
+        }
         this.value.set(groupIds);
         this.touch.emit();
     }
     static { this.ɵfac = function UserGroupsSelectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserGroupsSelectorComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserGroupsSelectorComponent, selectors: [["cauca-user-groups-selector"]], inputs: { value: [1, "value"], label: [1, "label"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], invalid: [1, "invalid"], touched: [1, "touched"], name: [1, "name"], errors: [1, "errors"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 12, vars: 17, consts: [["subscriptSizing", "dynamic", 1, "user-groups-selector-field"], ["multiple", "", 3, "valueChange", "value", "disabled", "required"], [3, "formControl", "placeholderLabel", "noEntriesFoundLabel"], [3, "value"], [3, "touched", "errors"]], template: function UserGroupsSelectorComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserGroupsSelectorComponent, selectors: [["cauca-user-groups-selector"]], inputs: { value: [1, "value"], label: [1, "label"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], invalid: [1, "invalid"], touched: [1, "touched"], name: [1, "name"], errors: [1, "errors"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 6, vars: 14, consts: [["subscriptSizing", "dynamic", 1, "user-groups-selector-field"], ["caucaControlErrorState", "", "keyValue", "id", "displayValue", "name", 3, "touched", "errors", "formControl", "listAutoComplete", "allowRemove", "canRemoveAll", "required"], [3, "touched", "errors"]], template: function UserGroupsSelectorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mat-form-field", 0)(1, "mat-label");
             i0.ɵɵtext(2);
             i0.ɵɵpipe(3, "translate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "mat-select", 1);
-            i0.ɵɵlistener("valueChange", function UserGroupsSelectorComponent_Template_mat_select_valueChange_4_listener($event) { return ctx.onSelectionChange($event); });
-            i0.ɵɵelementStart(5, "mat-option");
-            i0.ɵɵelement(6, "ngx-mat-select-search", 2);
-            i0.ɵɵpipe(7, "translate");
-            i0.ɵɵpipe(8, "translate");
+            i0.ɵɵelement(4, "cauca-dropdown-chip-autocomplete", 1);
             i0.ɵɵcontrolCreate();
             i0.ɵɵelementEnd();
-            i0.ɵɵrepeaterCreate(9, UserGroupsSelectorComponent_For_10_Template, 2, 2, "mat-option", 3, _forTrack0);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelement(11, "cauca-control-field-errors", 4);
+            i0.ɵɵelement(5, "cauca-control-field-errors", 2);
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 11, ctx.label()));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 12, ctx.label()));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("value", ctx.value())("disabled", ctx.isSelectDisabled())("required", ctx.required());
+            i0.ɵɵproperty("touched", ctx.touched())("errors", ctx.errors())("formControl", ctx.selectedGroupIds)("listAutoComplete", ctx.options())("allowRemove", !ctx.isControlDisabled())("canRemoveAll", !ctx.isControlDisabled())("required", ctx.required());
             i0.ɵɵattribute("aria-invalid", ctx.invalid())("name", ctx.name() || null);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("formControl", ctx.filterControl)("placeholderLabel", i0.ɵɵpipeBind1(7, 13, "search"))("noEntriesFoundLabel", i0.ɵɵpipeBind1(8, 15, "noResult"));
             i0.ɵɵcontrol();
-            i0.ɵɵadvance(3);
-            i0.ɵɵrepeater(ctx.filteredOptions());
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("touched", ctx.touched())("errors", ctx.errors());
-        } }, dependencies: [ControlFieldErrorsComponent,
-            MatFormFieldModule, i1$2.MatFormField, i1$2.MatLabel, MatSelectModule, i2$2.MatSelect, i2$2.MatOption, NgxMatSelectSearchModule, i3$3.MatSelectSearchComponent, ReactiveFormsModule, i5.NgControlStatus, i5.FormControlDirective, TranslatePipe], styles: ["[_nghost-%COMP%]{display:block}.user-groups-selector-field[_ngcontent-%COMP%]{width:100%}"] }); }
+        } }, dependencies: [ControlErrorStateDirective,
+            ControlFieldErrorsComponent,
+            DropdownChipAutocompleteComponent,
+            MatFormFieldModule, i1$2.MatFormField, i1$2.MatLabel, ReactiveFormsModule, i5.NgControlStatus, i5.RequiredValidator, i5.FormControlDirective, TranslatePipe], styles: ["[_nghost-%COMP%]{display:block}.user-groups-selector-field[_ngcontent-%COMP%]{width:100%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserGroupsSelectorComponent, [{
         type: Component,
         args: [{ selector: 'cauca-user-groups-selector', imports: [
+                    ControlErrorStateDirective,
                     ControlFieldErrorsComponent,
+                    DropdownChipAutocompleteComponent,
                     MatFormFieldModule,
-                    MatSelectModule,
-                    NgxMatSelectSearchModule,
                     ReactiveFormsModule,
                     TranslatePipe,
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"user-groups-selector-field\" subscriptSizing=\"dynamic\">\n    <mat-label>{{ label() | translate }}</mat-label>\n    <mat-select multiple [value]=\"value()\" [disabled]=\"isSelectDisabled()\"\n                [required]=\"required()\"\n                [attr.aria-invalid]=\"invalid()\"\n                [attr.name]=\"name() || null\"\n                (valueChange)=\"onSelectionChange($event)\">\n        <mat-option>\n            <ngx-mat-select-search\n                [formControl]=\"filterControl\"\n                [placeholderLabel]=\"'search' | translate\"\n                [noEntriesFoundLabel]=\"'noResult' | translate\"/>\n        </mat-option>\n\n        @for (option of filteredOptions(); track option.id) {\n            <mat-option [value]=\"option.id\">{{ option.name }}</mat-option>\n        }\n    </mat-select>\n</mat-form-field>\n\n<cauca-control-field-errors [touched]=\"touched()\" [errors]=\"errors()\"/>\n", styles: [":host{display:block}.user-groups-selector-field{width:100%}\n"] }]
-    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserGroupsSelectorComponent, { className: "UserGroupsSelectorComponent", filePath: "lib/components/user-groups-selector/user-groups-selector.component.ts", lineNumber: 28 }); })();
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"user-groups-selector-field\" subscriptSizing=\"dynamic\">\n    <mat-label>{{ label() | translate }}</mat-label>\n\n    <cauca-dropdown-chip-autocomplete\n        caucaControlErrorState [touched]=\"touched()\" [errors]=\"errors()\"\n        [formControl]=\"selectedGroupIds\"\n        [listAutoComplete]=\"options()\"\n        keyValue=\"id\"\n        displayValue=\"name\"\n        [allowRemove]=\"!isControlDisabled()\"\n        [canRemoveAll]=\"!isControlDisabled()\"\n        [required]=\"required()\"\n        [attr.aria-invalid]=\"invalid()\"\n        [attr.name]=\"name() || null\"/>\n</mat-form-field>\n\n<cauca-control-field-errors [touched]=\"touched()\" [errors]=\"errors()\"/>\n", styles: [":host{display:block}.user-groups-selector-field{width:100%}\n"] }]
+    }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserGroupsSelectorComponent, { className: "UserGroupsSelectorComponent", filePath: "lib/components/user-groups-selector/user-groups-selector.component.ts", lineNumber: 29 }); })();
+function haveSameIds(left, right) {
+    return left.length === right.length && left.every((id, index) => id === right[index]);
+}
 
 /*
  * Public API Surface of cauca-management