@tacdaed/fragments 1.0.0-beta.14 → 1.0.0-beta.15

package/fesm2022/tacdaed-fragments.mjs

@@ -7710,6 +7710,11 @@ class SelectionListComponent extends SelectionListBase {
             this.updateDropdownPosition();
         }
     }
+    ngOnChanges(changes) {
+        if (changes['items']) {
+            this.updateView(this.value);
+        }
+    }
     onSearch(event) {
         const target = event.target;
         if (target instanceof HTMLInputElement) {
@@ -7739,8 +7744,12 @@ class SelectionListComponent extends SelectionListBase {
     updateDisabledState(_isDisabled) {
         //Intentionally left void, to implement in case is needed
     }
-    updateView(_value) {
-        //Intentionally left void, to implement in case is needed
+    updateView(value) {
+        const matchedItem = this.findItemByValue(value);
+        this.selectedId = matchedItem?.id ?? '';
+        if (this.hasSearch) {
+            this.searchTerm = matchedItem?.label ?? '';
+        }
     }
     getDropdownAnchorElement() {
         return this.elementRef.nativeElement.querySelector('.custom-select, .options-search__input');
@@ -7773,8 +7782,29 @@ class SelectionListComponent extends SelectionListBase {
             ? this.optionButtons.map(ref => ref.nativeElement).filter(btn => !btn.disabled)
             : [];
     }
+    findItemByValue(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        const strictMatch = this.items.find((item) => item.value === value);
+        if (strictMatch) {
+            return strictMatch;
+        }
+        const valueId = this.extractComparableId(value);
+        if (valueId === null) {
+            return null;
+        }
+        return this.items.find((item) => this.extractComparableId(item.value) === valueId) ?? null;
+    }
+    extractComparableId(value) {
+        if (!value || typeof value !== 'object') {
+            return null;
+        }
+        const id = value['id'];
+        return typeof id === 'string' || typeof id === 'number' ? id : null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SelectionListComponent, isStandalone: true, selector: "frg-selection-list", inputs: { items: "items", optionTemplate: "optionTemplate", hasSearch: "hasSearch" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "optionButtons", predicate: ["optionButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"frg-selection-list\"\r\n  [class.selection-list-error]=\"hasError\"\r\n>\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n\r\n  @if(hasSearch){\r\n    <div class=\"options-search\">\r\n      <input\n        #searchInput\n        type=\"text\"\n        [attr.name]=\"id + '-options'\"\n        [attr.id]=\"id + '-options'\"\n        class=\"options-search__input\"\n        [disabled]=\"disabled\"\n        [class.open]=\"isOpen\"\n        [attr.placeholder]=\"'Select\u2026'\"\n        aria-label=\"Search options\"\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <div class=\"selection-list__actions\">\r\n        @if(searchTerm.length){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n          <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"frg-selection-list__handle-buttons\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"custom-select\"\r\n        [id]=\"id + '-options'\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [class.open]=\"isOpen\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-expanded]=\"isOpen\"\r\n        (click)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        [attr.aria-controls]=\"id + '-options'\"\r\n      >\r\n        <span class=\"item-label\" [class.selected]=\"selectedItem\">\r\n          {{ selectedItem?.label || placeholder || 'Select\u2026' }}\r\n        </span>\r\n      </button> \r\n\r\n      <div class=\"selection-list__actions\">\r\n        @if(value && selectedItem){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n            <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  >\r\n  </frg-input-validation>\r\n\r\n  @if (isOpen) {\n    <div \n      class=\"options\"\n      [id]=\"id + '-options'\"\n      [ngStyle]=\"dropdownStyles\"\n      [class.open-up]=\"openDirection === 'top'\"\n      [class.open-down]=\"openDirection === 'down'\"\n    >\n      @for (item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"item.id === selectedId\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          @if(optionTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-selection-list{position:relative;display:inline-block;width:100%}:host .frg-selection-list .options-search{position:relative;display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-selection-list .options-search.focus,:host .frg-selection-list .options-search:hover{border-color:#6ea8d9}:host .frg-selection-list .options-search:has(.options-search__input:disabled){cursor:not-allowed}:host .frg-selection-list .options-search:has(.options-search__input:disabled):hover,:host .frg-selection-list .options-search:has(.options-search__input:disabled).focus{border-color:#b9babc}:host .frg-selection-list .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-selection-list .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-selection-list .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons{display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-selection-list__handle-buttons:hover,:host .frg-selection-list__handle-buttons.focus{border-color:#6ea8d9}:host .frg-selection-list__handle-buttons:has(.custom-select:disabled){cursor:not-allowed}:host .frg-selection-list__handle-buttons:has(.custom-select:disabled):hover,:host .frg-selection-list__handle-buttons:has(.custom-select:disabled).focus{border-color:#b9babc}:host .frg-selection-list__handle-buttons .custom-select{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;display:flex;align-items:center;font-size:1rem}:host .frg-selection-list__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-selection-list__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-selection-list__handle-buttons .custom-select .item-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;color:#5e5f62;opacity:.7}:host .frg-selection-list__handle-buttons .custom-select .selected{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;opacity:1;color:#5e5f62}:host .frg-selection-list .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-selection-list .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-selection-list .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-selection-list .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-selection-list .options .option{display:block;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-selection-list .options .option:hover:not(:disabled),:host .frg-selection-list .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-selection-list .options .option.selected{background-color:#e9f2f9}:host .frg-selection-list .options .option:disabled,:host .frg-selection-list .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-selection-list .options.open-down{top:calc(100% + .25rem)}:host .frg-selection-list .options.open-up{bottom:calc(100% + .25rem)}:host .frg-selection-list .clear-button,:host .frg-selection-list .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-selection-list .clear-button{font-size:.75rem}:host .frg-selection-list .clear-button .fas{line-height:1}:host .frg-selection-list .selection-list__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.125rem;padding-right:.25rem}:host .frg-selection-list .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-selection-list .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-selection-list .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-selection-list .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-selection-list.selection-list-error .options-search,:host .frg-selection-list.selection-list-error .frg-selection-list__handle-buttons{border-bottom-color:#d66a6a}:host .frg-selection-list.selection-list-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SelectionListComponent, isStandalone: true, selector: "frg-selection-list", inputs: { items: "items", optionTemplate: "optionTemplate", hasSearch: "hasSearch" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "optionButtons", predicate: ["optionButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"frg-selection-list\"\r\n  [class.selection-list-error]=\"hasError\"\r\n>\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n\r\n  @if(hasSearch){\r\n    <div class=\"options-search\">\r\n      <input\n        #searchInput\n        type=\"text\"\n        [attr.name]=\"id + '-options'\"\n        [attr.id]=\"id + '-options'\"\n        class=\"options-search__input\"\n        [disabled]=\"disabled\"\n        [class.open]=\"isOpen\"\n        [attr.placeholder]=\"'Select\u2026'\"\n        aria-label=\"Search options\"\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <div class=\"selection-list__actions\">\r\n        @if(searchTerm.length){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n          <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"frg-selection-list__handle-buttons\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"custom-select\"\r\n        [id]=\"id + '-options'\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [class.open]=\"isOpen\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-expanded]=\"isOpen\"\r\n        (click)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        [attr.aria-controls]=\"id + '-options'\"\r\n      >\r\n        <span class=\"item-label\" [class.selected]=\"selectedItem\">\r\n          {{ selectedItem?.label || placeholder || 'Select\u2026' }}\r\n        </span>\r\n      </button> \r\n\r\n      <div class=\"selection-list__actions\">\r\n        @if(value && selectedItem){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n            <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  >\r\n  </frg-input-validation>\r\n\r\n  @if (isOpen) {\n    <div \n      class=\"options\"\n      [id]=\"id + '-options'\"\n      [ngStyle]=\"dropdownStyles\"\n      [class.open-up]=\"openDirection === 'top'\"\n      [class.open-down]=\"openDirection === 'down'\"\n    >\n      @for (item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"item.id === selectedId\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          @if(optionTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-selection-list{position:relative;display:inline-block;width:100%}:host .frg-selection-list .options-search{position:relative;display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-selection-list .options-search.focus,:host .frg-selection-list .options-search:hover{border-color:#6ea8d9}:host .frg-selection-list .options-search:has(.options-search__input:disabled){cursor:not-allowed}:host .frg-selection-list .options-search:has(.options-search__input:disabled):hover,:host .frg-selection-list .options-search:has(.options-search__input:disabled).focus{border-color:#b9babc}:host .frg-selection-list .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-selection-list .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-selection-list .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons{display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-selection-list__handle-buttons:hover,:host .frg-selection-list__handle-buttons.focus{border-color:#6ea8d9}:host .frg-selection-list__handle-buttons:has(.custom-select:disabled){cursor:not-allowed}:host .frg-selection-list__handle-buttons:has(.custom-select:disabled):hover,:host .frg-selection-list__handle-buttons:has(.custom-select:disabled).focus{border-color:#b9babc}:host .frg-selection-list__handle-buttons .custom-select{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;display:flex;align-items:center;font-size:1rem}:host .frg-selection-list__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-selection-list__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-selection-list__handle-buttons .custom-select .item-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;color:#5e5f62;opacity:.7}:host .frg-selection-list__handle-buttons .custom-select .selected{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;opacity:1;color:#5e5f62}:host .frg-selection-list .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-selection-list .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-selection-list .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-selection-list .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-selection-list .options .option{display:block;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-selection-list .options .option:hover:not(:disabled),:host .frg-selection-list .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-selection-list .options .option.selected{background-color:#e9f2f9}:host .frg-selection-list .options .option:disabled,:host .frg-selection-list .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-selection-list .options.open-down{top:calc(100% + .25rem)}:host .frg-selection-list .options.open-up{bottom:calc(100% + .25rem)}:host .frg-selection-list .clear-button,:host .frg-selection-list .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-selection-list .clear-button{font-size:.75rem}:host .frg-selection-list .clear-button .fas{line-height:1}:host .frg-selection-list .selection-list__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.125rem;padding-right:.25rem}:host .frg-selection-list .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-selection-list .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-selection-list .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-selection-list .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-selection-list.selection-list-error .options-search,:host .frg-selection-list.selection-list-error .frg-selection-list__handle-buttons{border-bottom-color:#d66a6a}:host .frg-selection-list.selection-list-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectionListComponent, decorators: [{
             type: Component,
@@ -8082,6 +8112,11 @@ class MultiSelectComponent extends SelectionListBase {
             this.updateDropdownPosition();
         }
     }
+    ngOnChanges(changes) {
+        if (changes['items']) {
+            this.updateView(this.value);
+        }
+    }
     onSearch(event) {
         const target = event.target;
         if (target instanceof HTMLInputElement) {
@@ -8120,8 +8155,18 @@ class MultiSelectComponent extends SelectionListBase {
             this.selectedIds.push(item.id);
         }
     }
-    updateView(_value) {
-        //Intentionally left void, to implement in case is needed
+    updateView(value) {
+        const nextValues = Array.isArray(value) ? value : [];
+        const matchedItems = nextValues
+            .map((currentValue) => this.findItemByValue(currentValue))
+            .filter((item) => item !== null);
+        const matchedIds = new Set(matchedItems.map((item) => item.id));
+        for (const item of this.items) {
+            item.selected = matchedIds.has(item.id);
+        }
+        this.selectedIds = this.items
+            .filter((item) => item.selected)
+            .map((item) => item.id);
     }
     getDropdownAnchorElement() {
         return this.elementRef.nativeElement.querySelector('.custom-select, .options-search__input');
@@ -8154,6 +8199,27 @@ class MultiSelectComponent extends SelectionListBase {
             ? this.optionButtons.map(ref => ref.nativeElement).filter(btn => !btn.disabled)
             : [];
     }
+    findItemByValue(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        const strictMatch = this.items.find((item) => item.value === value);
+        if (strictMatch) {
+            return strictMatch;
+        }
+        const valueId = this.extractComparableId(value);
+        if (valueId === null) {
+            return null;
+        }
+        return this.items.find((item) => this.extractComparableId(item.value) === valueId) ?? null;
+    }
+    extractComparableId(value) {
+        if (!value || typeof value !== 'object') {
+            return null;
+        }
+        const id = value['id'];
+        return typeof id === 'string' || typeof id === 'number' ? id : null;
+    }
     /**
      * Returns warning messages. Consumers may pass arbitrary warnings via `warningMessages`.
      * Falls back to DEFAULT_INPUT_MULTI_SELECT_WARNINGS_MESSAGES or a generic message.
@@ -8172,7 +8238,7 @@ class MultiSelectComponent extends SelectionListBase {
         return this.warningList.length > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: MultiSelectComponent, isStandalone: true, selector: "frg-multi-select", inputs: { items: "items", hasSearch: "hasSearch", optionTemplate: "optionTemplate", valuesTemplate: "valuesTemplate", showChips: "showChips", chipsStyle: "chipsStyle" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "optionButtons", predicate: ["optionButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"frg-multi-select\" [class.multi-select-error]=\"hasError\">\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n \r\n  @if(hasSearch) {\r\n    <div class=\"options-search\">\r\n      <input\n        #searchInput\n        type=\"text\"\n        [attr.name]=\"id + '-options'\"\n        [attr.id]=\"id + '-options'\"\n        class=\"options-search__input\"\n        [disabled]=\"disabled\"\n        [class.open]=\"isOpen\"\n        [attr.placeholder]=\"'Search\u2026'\"\n        aria-label=\"Search options\"\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n\r\n    @if(showChips && selectedItems.length) {\r\n      <div class=\"selected-chips selected-chips--below\">\r\n        @for(item of selectedItems; track item.id) {\r\n          <frg-chip\r\n            [id]=\"item.id\"\r\n            [label]=\"item.label || ''\"\r\n            size=\"sm\"\r\n            [style]=\"chipsStyle\"\r\n            [removable]=\"true\"\r\n            [disabled]=\"disabled\"\r\n            (removed)=\"removeItemById($event)\"\r\n          ></frg-chip>\r\n        }\r\n      </div>\r\n    } @else if(selectedItems.length) {\r\n      <div class=\"selected-labels\">\r\n        {{ selectedLabels }}\r\n      </div>\r\n    }\r\n  } @else {\r\n    <div class=\"frg-multi-select__handle-buttons\">\r\n      @if(showChips) {\r\n        <div\r\n          class=\"custom-select custom-select--chips\"\r\n          [id]=\"id + '-options'\"\r\n          [attr.name]=\"id + '-options'\"\r\n          [class.open]=\"isOpen\"\r\n          [class.disabled]=\"disabled\"\r\n          [attr.tabindex]=\"disabled ? -1 : 0\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          (click)=\"toggleDropdown($event)\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n          [attr.aria-controls]=\"id + '-options'\"\r\n        >\r\n          @if(selectedItems.length) {\r\n            <div class=\"selected-chips\">\r\n              @for(item of selectedItems; track item.id) {\r\n                <frg-chip\r\n                  [id]=\"item.id\"\r\n                  [label]=\"item.label || ''\"\r\n                  size=\"sm\"\r\n                  [style]=\"chipsStyle\"\r\n                  [removable]=\"true\"\r\n                  [disabled]=\"disabled\"\r\n                  (removed)=\"removeItemById($event)\"\r\n                ></frg-chip>\r\n              }\r\n            </div>\r\n          } @else {\r\n            <span class=\"selected-labels__text selected-labels__placeholder\">{{ placeholder || 'Select.' }}</span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"custom-select\"\r\n          [id]=\"id + '-options'\"\r\n          [attr.name]=\"id + '-options'\"\r\n          [class.open]=\"isOpen\"\r\n          [disabled]=\"disabled\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          (click)=\"toggleDropdown($event)\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n          [attr.aria-controls]=\"id + '-options'\"\r\n        >\r\n          @if(valuesTemplate) {\r\n            <ng-container \r\n              [ngTemplateOutlet]=\"valuesTemplate\" \r\n              [ngTemplateOutletContext]=\"{ $implicit: selectedItems }\"\r\n            ></ng-container>\r\n          } @else {\r\n            <span class=\"selected-labels__text\" [class.selected-labels__placeholder]=\"!selectedItems.length\">{{ selectedLabels }}</span>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if(isOpen) {\n    <div \n      class=\"options\"\n      [id]=\"id + '-options'\"\n      [ngStyle]=\"dropdownStyles\"\n      [class.open-up]=\"openDirection === 'top'\"\n      [class.open-down]=\"openDirection === 'down'\"\n    >\n      @for(item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"selectedIds.includes(item.id)\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            [attr.id]=\"id + '-option-' + idx\"\r\n            [attr.name]=\"id + '-option'\"\r\n            [checked]=\"item.selected\"\r\n            readonly\r\n          />\r\n          @if(optionTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  ></frg-input-validation>\r\n</div>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"multi-select__actions\">\r\n    @if((value && selectedItems.length) || (hasSearch && searchTerm.length)) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"clear-button\"\r\n        aria-label=\"Clear selection\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <span class=\"fas fa-xmark\"></span>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"arrow-button\"\r\n      [class.open]=\"isOpen\"\r\n      aria-label=\"Toggle dropdown\"\r\n      (click)=\"toggleDropdown($event)\"\r\n    >\r\n      <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-multi-select{position:relative;display:inline-block;width:100%}:host .frg-multi-select .options-search{position:relative;display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-multi-select .options-search:has(.open){border-color:#6ea8d9}:host .frg-multi-select .options-search.focus,:host .frg-multi-select .options-search:focus-visible,:host .frg-multi-select .options-search:hover{border-color:#6ea8d9}:host .frg-multi-select .options-search:has(.options-search__input:disabled){cursor:not-allowed}:host .frg-multi-select .options-search:has(.options-search__input:disabled):hover,:host .frg-multi-select .options-search:has(.options-search__input:disabled).focus,:host .frg-multi-select .options-search:has(.options-search__input:disabled):focus-visible{border-color:#b9babc}:host .frg-multi-select .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-multi-select .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons{display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-multi-select__handle-buttons:has(.open){border-color:#6ea8d9}:host .frg-multi-select__handle-buttons:hover,:host .frg-multi-select__handle-buttons:focus-visible,:host .frg-multi-select__handle-buttons.focus{border-color:#6ea8d9}:host .frg-multi-select__handle-buttons:has(.custom-select:disabled),:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled){cursor:not-allowed}:host .frg-multi-select__handle-buttons:has(.custom-select:disabled):hover,:host .frg-multi-select__handle-buttons:has(.custom-select:disabled):focus-visible,:host .frg-multi-select__handle-buttons:has(.custom-select:disabled).focus,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled):hover,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled):focus-visible,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled).focus{border-color:#b9babc}:host .frg-multi-select__handle-buttons .custom-select{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;font-size:1rem;overflow:hidden}:host .frg-multi-select__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-multi-select__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-multi-select__handle-buttons .custom-select .item-label{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.7}:host .frg-multi-select__handle-buttons .custom-select .selected{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .frg-multi-select__handle-buttons .custom-select--chips{min-height:2.25rem;cursor:pointer}:host .frg-multi-select__handle-buttons .custom-select--chips.disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select .multi-select__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding-right:.25rem}:host .frg-multi-select .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-multi-select .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-multi-select .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-multi-select .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-multi-select .options .option{display:inline-flex;gap:.75rem;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-multi-select .options .option:hover:not(:disabled),:host .frg-multi-select .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-multi-select .options .option.selected{background-color:#e9f2f9}:host .frg-multi-select .options .option:disabled,:host .frg-multi-select .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-multi-select .options.open-down{top:calc(100% + .25rem)}:host .frg-multi-select .options.open-up{bottom:calc(100% + .25rem)}:host .frg-multi-select .clear-button,:host .frg-multi-select .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-multi-select .clear-button .fas{line-height:1}:host .frg-multi-select .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-multi-select .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-multi-select .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-multi-select .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-multi-select .selected-labels{padding:.2rem .5rem;font-size:.875rem;color:#5e5f62}:host .frg-multi-select .selected-labels__text{color:#5e5f62}:host .frg-multi-select .selected-labels__placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .selected-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:1.5rem}:host .frg-multi-select .selected-chips--below{padding:.25rem .5rem 0}:host .frg-multi-select .custom-select--chips.disabled frg-chip{pointer-events:none;opacity:.6}:host .frg-multi-select.multi-select-error .options-search,:host .frg-multi-select.multi-select-error .frg-multi-select__handle-buttons{border-bottom-color:#d66a6a}:host .frg-multi-select.multi-select-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "component", type: ChipComponent, selector: "frg-chip", inputs: ["id", "label", "style", "size", "icon", "iconPosition", "disabled", "removable"], outputs: ["removed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: MultiSelectComponent, isStandalone: true, selector: "frg-multi-select", inputs: { items: "items", hasSearch: "hasSearch", optionTemplate: "optionTemplate", valuesTemplate: "valuesTemplate", showChips: "showChips", chipsStyle: "chipsStyle" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "optionButtons", predicate: ["optionButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"frg-multi-select\" [class.multi-select-error]=\"hasError\">\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n \r\n  @if(hasSearch) {\r\n    <div class=\"options-search\">\r\n      <input\n        #searchInput\n        type=\"text\"\n        [attr.name]=\"id + '-options'\"\n        [attr.id]=\"id + '-options'\"\n        class=\"options-search__input\"\n        [disabled]=\"disabled\"\n        [class.open]=\"isOpen\"\n        [attr.placeholder]=\"'Search\u2026'\"\n        aria-label=\"Search options\"\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n\r\n    @if(showChips && selectedItems.length) {\r\n      <div class=\"selected-chips selected-chips--below\">\r\n        @for(item of selectedItems; track item.id) {\r\n          <frg-chip\r\n            [id]=\"item.id\"\r\n            [label]=\"item.label || ''\"\r\n            size=\"sm\"\r\n            [style]=\"chipsStyle\"\r\n            [removable]=\"true\"\r\n            [disabled]=\"disabled\"\r\n            (removed)=\"removeItemById($event)\"\r\n          ></frg-chip>\r\n        }\r\n      </div>\r\n    } @else if(selectedItems.length) {\r\n      <div class=\"selected-labels\">\r\n        {{ selectedLabels }}\r\n      </div>\r\n    }\r\n  } @else {\r\n    <div class=\"frg-multi-select__handle-buttons\">\r\n      @if(showChips) {\r\n        <div\r\n          class=\"custom-select custom-select--chips\"\r\n          [id]=\"id + '-options'\"\r\n          [attr.name]=\"id + '-options'\"\r\n          [class.open]=\"isOpen\"\r\n          [class.disabled]=\"disabled\"\r\n          [attr.tabindex]=\"disabled ? -1 : 0\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          (click)=\"toggleDropdown($event)\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n          [attr.aria-controls]=\"id + '-options'\"\r\n        >\r\n          @if(selectedItems.length) {\r\n            <div class=\"selected-chips\">\r\n              @for(item of selectedItems; track item.id) {\r\n                <frg-chip\r\n                  [id]=\"item.id\"\r\n                  [label]=\"item.label || ''\"\r\n                  size=\"sm\"\r\n                  [style]=\"chipsStyle\"\r\n                  [removable]=\"true\"\r\n                  [disabled]=\"disabled\"\r\n                  (removed)=\"removeItemById($event)\"\r\n                ></frg-chip>\r\n              }\r\n            </div>\r\n          } @else {\r\n            <span class=\"selected-labels__text selected-labels__placeholder\">{{ placeholder || 'Select.' }}</span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"custom-select\"\r\n          [id]=\"id + '-options'\"\r\n          [attr.name]=\"id + '-options'\"\r\n          [class.open]=\"isOpen\"\r\n          [disabled]=\"disabled\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          (click)=\"toggleDropdown($event)\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n          [attr.aria-controls]=\"id + '-options'\"\r\n        >\r\n          @if(valuesTemplate) {\r\n            <ng-container \r\n              [ngTemplateOutlet]=\"valuesTemplate\" \r\n              [ngTemplateOutletContext]=\"{ $implicit: selectedItems }\"\r\n            ></ng-container>\r\n          } @else {\r\n            <span class=\"selected-labels__text\" [class.selected-labels__placeholder]=\"!selectedItems.length\">{{ selectedLabels }}</span>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if(isOpen) {\n    <div \n      class=\"options\"\n      [id]=\"id + '-options'\"\n      [ngStyle]=\"dropdownStyles\"\n      [class.open-up]=\"openDirection === 'top'\"\n      [class.open-down]=\"openDirection === 'down'\"\n    >\n      @for(item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"selectedIds.includes(item.id)\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            [attr.id]=\"id + '-option-' + idx\"\r\n            [attr.name]=\"id + '-option'\"\r\n            [checked]=\"item.selected\"\r\n            readonly\r\n          />\r\n          @if(optionTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  ></frg-input-validation>\r\n</div>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"multi-select__actions\">\r\n    @if((value && selectedItems.length) || (hasSearch && searchTerm.length)) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"clear-button\"\r\n        aria-label=\"Clear selection\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <span class=\"fas fa-xmark\"></span>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"arrow-button\"\r\n      [class.open]=\"isOpen\"\r\n      aria-label=\"Toggle dropdown\"\r\n      (click)=\"toggleDropdown($event)\"\r\n    >\r\n      <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-multi-select{position:relative;display:inline-block;width:100%}:host .frg-multi-select .options-search{position:relative;display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-multi-select .options-search:has(.open){border-color:#6ea8d9}:host .frg-multi-select .options-search.focus,:host .frg-multi-select .options-search:focus-visible,:host .frg-multi-select .options-search:hover{border-color:#6ea8d9}:host .frg-multi-select .options-search:has(.options-search__input:disabled){cursor:not-allowed}:host .frg-multi-select .options-search:has(.options-search__input:disabled):hover,:host .frg-multi-select .options-search:has(.options-search__input:disabled).focus,:host .frg-multi-select .options-search:has(.options-search__input:disabled):focus-visible{border-color:#b9babc}:host .frg-multi-select .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-multi-select .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons{display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-multi-select__handle-buttons:has(.open){border-color:#6ea8d9}:host .frg-multi-select__handle-buttons:hover,:host .frg-multi-select__handle-buttons:focus-visible,:host .frg-multi-select__handle-buttons.focus{border-color:#6ea8d9}:host .frg-multi-select__handle-buttons:has(.custom-select:disabled),:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled){cursor:not-allowed}:host .frg-multi-select__handle-buttons:has(.custom-select:disabled):hover,:host .frg-multi-select__handle-buttons:has(.custom-select:disabled):focus-visible,:host .frg-multi-select__handle-buttons:has(.custom-select:disabled).focus,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled):hover,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled):focus-visible,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled).focus{border-color:#b9babc}:host .frg-multi-select__handle-buttons .custom-select{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;font-size:1rem;overflow:hidden}:host .frg-multi-select__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-multi-select__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-multi-select__handle-buttons .custom-select .item-label{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.7}:host .frg-multi-select__handle-buttons .custom-select .selected{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .frg-multi-select__handle-buttons .custom-select--chips{min-height:2.25rem;cursor:pointer}:host .frg-multi-select__handle-buttons .custom-select--chips.disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select .multi-select__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding-right:.25rem}:host .frg-multi-select .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-multi-select .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-multi-select .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-multi-select .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-multi-select .options .option{display:inline-flex;gap:.75rem;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-multi-select .options .option:hover:not(:disabled),:host .frg-multi-select .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-multi-select .options .option.selected{background-color:#e9f2f9}:host .frg-multi-select .options .option:disabled,:host .frg-multi-select .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-multi-select .options.open-down{top:calc(100% + .25rem)}:host .frg-multi-select .options.open-up{bottom:calc(100% + .25rem)}:host .frg-multi-select .clear-button,:host .frg-multi-select .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-multi-select .clear-button .fas{line-height:1}:host .frg-multi-select .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-multi-select .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-multi-select .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-multi-select .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-multi-select .selected-labels{padding:.2rem .5rem;font-size:.875rem;color:#5e5f62}:host .frg-multi-select .selected-labels__text{color:#5e5f62}:host .frg-multi-select .selected-labels__placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .selected-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:1.5rem}:host .frg-multi-select .selected-chips--below{padding:.25rem .5rem 0}:host .frg-multi-select .custom-select--chips.disabled frg-chip{pointer-events:none;opacity:.6}:host .frg-multi-select.multi-select-error .options-search,:host .frg-multi-select.multi-select-error .frg-multi-select__handle-buttons{border-bottom-color:#d66a6a}:host .frg-multi-select.multi-select-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "component", type: ChipComponent, selector: "frg-chip", inputs: ["id", "label", "style", "size", "icon", "iconPosition", "disabled", "removable"], outputs: ["removed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,

package/index.d.ts

@@ -3155,7 +3155,7 @@ interface SelectionListItem<T> {
     disabled?: boolean;
 }
 
-declare class SelectionListComponent<T> extends SelectionListBase<T> {
+declare class SelectionListComponent<T> extends SelectionListBase<T> implements OnChanges {
     private readonly elementRef;
     items: Array<SelectionListItem<T>>;
     optionTemplate?: TemplateRef<unknown>;
@@ -3185,15 +3185,18 @@ declare class SelectionListComponent<T> extends SelectionListBase<T> {
     protected onOptionKeyDown(event: KeyboardEvent, item: SelectionListItem<T>, index: number): void;
     protected onBlur(event: FocusEvent): void;
     protected onFocus(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     protected onSearch(event: Event): void;
     protected onSearchKeyDown(event: KeyboardEvent): void;
     protected updateDisabledState(_isDisabled: boolean): void;
-    protected updateView(_value: T | null): void;
+    protected updateView(value: T | null): void;
     protected getDropdownAnchorElement(): HTMLElement | null;
     private focusFirstItem;
     private focusNextItem;
     private focusPreviousItem;
     private getEnabledButtons;
+    private findItemByValue;
+    private extractComparableId;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectionListComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectionListComponent<any>, "frg-selection-list", never, { "items": { "alias": "items"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -3338,7 +3341,7 @@ interface Chip extends StatusIndicator {
     removable?: boolean;
 }
 
-declare class MultiSelectComponent<T> extends SelectionListBase<Array<T>> {
+declare class MultiSelectComponent<T> extends SelectionListBase<Array<T>> implements OnChanges {
     private readonly elementRef;
     items: Array<SelectionListItem<T>>;
     hasSearch: boolean;
@@ -3365,16 +3368,19 @@ declare class MultiSelectComponent<T> extends SelectionListBase<Array<T>> {
     protected onOptionKeyDown(event: KeyboardEvent, item: SelectionListItem<T>, index: number): void;
     protected onBlur(event: FocusEvent): void;
     protected onFocus(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     protected onSearch(event: Event): void;
     protected onSearchKeyDown(event: KeyboardEvent): void;
     protected updateDisabledState(_isDisabled: boolean): void;
     protected updateSelection(item: SelectionListItem<T>, isAlreadySelected: boolean): void;
-    protected updateView(_value: Array<T> | null): void;
+    protected updateView(value: Array<T> | null): void;
     protected getDropdownAnchorElement(): HTMLElement | null;
     private focusFirstItem;
     private focusNextItem;
     private focusPreviousItem;
     private getEnabledButtons;
+    private findItemByValue;
+    private extractComparableId;
     /**
      * Returns warning messages. Consumers may pass arbitrary warnings via `warningMessages`.
      * Falls back to DEFAULT_INPUT_MULTI_SELECT_WARNINGS_MESSAGES or a generic message.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacdaed/fragments",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.15",
   "peerDependencies": {
     "@angular/common": "^20.2.0",
     "@angular/core": "^20.2.0",