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

package/fesm2022/tacdaed-fragments.mjs

@@ -7532,6 +7532,10 @@ class SelectionListComponent extends SelectionListBase {
     constructor() {
         super(...arguments);
         this.elementRef = inject(ElementRef);
+        this.required = false;
+        this.label = '';
+        this.placeholder = '';
+        this.showValidation = true;
         this.items = [];
         this.hasSearch = false;
         this.searchTerm = "";
@@ -7632,6 +7636,8 @@ class SelectionListComponent extends SelectionListBase {
     }
     clearValue(event) {
         event.stopPropagation();
+        if (this.disabled)
+            return;
         this.selectedId = '';
         this.value = null;
         this.searchTerm = '';
@@ -7804,12 +7810,20 @@ class SelectionListComponent extends SelectionListBase {
         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, 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SelectionListComponent, isStandalone: true, selector: "frg-selection-list", inputs: { required: "required", label: "label", placeholder: "placeholder", showValidation: "showValidation", 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 | inputRequiredLabel: required }}</label>\r\n\r\n  @if(hasSearch){\r\n    <div class=\"options-search\">\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [attr.id]=\"id + '-options'\"\r\n        class=\"options-search__input\"\r\n        [disabled]=\"disabled\"\r\n        [class.open]=\"isOpen\"\r\n        [attr.placeholder]=\"'Select\u2026'\"\r\n        aria-label=\"Search options\"\r\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            [disabled]=\"disabled\"\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            [disabled]=\"disabled\"\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  @if(showValidation){\r\n    <frg-input-validation\r\n      [errorList]=\"errorList\"\r\n      [isFormInvalid]=\"hasError\"\r\n    >\r\n    </frg-input-validation>\r\n  }\r\n\r\n  @if (isOpen) {\r\n    <div \r\n      class=\"options\"\r\n      [id]=\"id + '-options'\"\r\n      [ngStyle]=\"dropdownStyles\"\r\n      [class.open-up]=\"openDirection === 'top'\"\r\n      [class.open-down]=\"openDirection === 'down'\"\r\n    >\r\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"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "frg-selection-list", imports: [NgTemplateOutlet, NgStyle, InputValidationComponent], 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"] }]
-        }], propDecorators: { items: [{
+            args: [{ selector: "frg-selection-list", imports: [NgTemplateOutlet, NgStyle, InputValidationComponent, InputRequiredLabelPipe], template: "<div class=\"frg-selection-list\"\r\n  [class.selection-list-error]=\"hasError\"\r\n>\r\n  <label [attr.for]=\"id + '-options'\">{{ label | inputRequiredLabel: required }}</label>\r\n\r\n  @if(hasSearch){\r\n    <div class=\"options-search\">\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [attr.id]=\"id + '-options'\"\r\n        class=\"options-search__input\"\r\n        [disabled]=\"disabled\"\r\n        [class.open]=\"isOpen\"\r\n        [attr.placeholder]=\"'Select\u2026'\"\r\n        aria-label=\"Search options\"\r\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            [disabled]=\"disabled\"\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            [disabled]=\"disabled\"\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  @if(showValidation){\r\n    <frg-input-validation\r\n      [errorList]=\"errorList\"\r\n      [isFormInvalid]=\"hasError\"\r\n    >\r\n    </frg-input-validation>\r\n  }\r\n\r\n  @if (isOpen) {\r\n    <div \r\n      class=\"options\"\r\n      [id]=\"id + '-options'\"\r\n      [ngStyle]=\"dropdownStyles\"\r\n      [class.open-up]=\"openDirection === 'top'\"\r\n      [class.open-down]=\"openDirection === 'down'\"\r\n    >\r\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"] }]
+        }], propDecorators: { required: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], showValidation: [{
+                type: Input
+            }], items: [{
                 type: Input
             }], optionTemplate: [{
                 type: Input
@@ -7919,6 +7933,10 @@ class MultiSelectComponent extends SelectionListBase {
     constructor() {
         super(...arguments);
         this.elementRef = inject(ElementRef);
+        this.required = false;
+        this.label = '';
+        this.placeholder = '';
+        this.showValidation = true;
         this.items = [];
         this.hasSearch = false;
         this.showChips = false;
@@ -8036,6 +8054,8 @@ class MultiSelectComponent extends SelectionListBase {
     }
     clearValue(event) {
         event.stopPropagation();
+        if (this.disabled)
+            return;
         for (const selectedItem of this.selectedItems) {
             selectedItem.selected = false;
         }
@@ -8238,12 +8258,20 @@ 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, 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: MultiSelectComponent, isStandalone: true, selector: "frg-multi-select", inputs: { required: "required", label: "label", placeholder: "placeholder", showValidation: "showValidation", 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 | inputRequiredLabel: required }}</label>\r\n \r\n  @if(hasSearch) {\r\n    <div class=\"options-search\">\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [attr.id]=\"id + '-options'\"\r\n        class=\"options-search__input\"\r\n        [disabled]=\"disabled\"\r\n        [class.open]=\"isOpen\"\r\n        [attr.placeholder]=\"'Search\u2026'\"\r\n        aria-label=\"Search options\"\r\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) {\r\n    <div \r\n      class=\"options\"\r\n      [id]=\"id + '-options'\"\r\n      [ngStyle]=\"dropdownStyles\"\r\n      [class.open-up]=\"openDirection === 'top'\"\r\n      [class.open-down]=\"openDirection === 'down'\"\r\n    >\r\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  @if(showValidation){\r\n    <frg-input-validation\r\n      [errorList]=\"errorList\"\r\n      [isFormInvalid]=\"hasError\"\r\n    ></frg-input-validation>\r\n  }\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        [disabled]=\"disabled\"\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"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: "frg-multi-select", imports: [NgTemplateOutlet, NgStyle, InputValidationComponent, ChipComponent], 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"] }]
-        }], propDecorators: { items: [{
+            args: [{ selector: "frg-multi-select", imports: [NgTemplateOutlet, NgStyle, InputValidationComponent, ChipComponent, InputRequiredLabelPipe], template: "<div class=\"frg-multi-select\" [class.multi-select-error]=\"hasError\">\r\n  <label [attr.for]=\"id + '-options'\">{{ label | inputRequiredLabel: required }}</label>\r\n \r\n  @if(hasSearch) {\r\n    <div class=\"options-search\">\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [attr.id]=\"id + '-options'\"\r\n        class=\"options-search__input\"\r\n        [disabled]=\"disabled\"\r\n        [class.open]=\"isOpen\"\r\n        [attr.placeholder]=\"'Search\u2026'\"\r\n        aria-label=\"Search options\"\r\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) {\r\n    <div \r\n      class=\"options\"\r\n      [id]=\"id + '-options'\"\r\n      [ngStyle]=\"dropdownStyles\"\r\n      [class.open-up]=\"openDirection === 'top'\"\r\n      [class.open-down]=\"openDirection === 'down'\"\r\n    >\r\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  @if(showValidation){\r\n    <frg-input-validation\r\n      [errorList]=\"errorList\"\r\n      [isFormInvalid]=\"hasError\"\r\n    ></frg-input-validation>\r\n  }\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        [disabled]=\"disabled\"\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"] }]
+        }], propDecorators: { required: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], showValidation: [{
+                type: Input
+            }], items: [{
                 type: Input
             }], hasSearch: [{
                 type: Input

package/index.d.ts

@@ -3157,6 +3157,10 @@ interface SelectionListItem<T> {
 
 declare class SelectionListComponent<T> extends SelectionListBase<T> implements OnChanges {
     private readonly elementRef;
+    required: boolean;
+    label: string;
+    placeholder: string;
+    showValidation: boolean;
     items: Array<SelectionListItem<T>>;
     optionTemplate?: TemplateRef<unknown>;
     hasSearch: boolean;
@@ -3198,7 +3202,7 @@ declare class SelectionListComponent<T> extends SelectionListBase<T> implements
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectionListComponent<any>, "frg-selection-list", never, { "required": { "alias": "required"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "showValidation": { "alias": "showValidation"; "required": false; }; "items": { "alias": "items"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -3343,6 +3347,10 @@ interface Chip extends StatusIndicator {
 
 declare class MultiSelectComponent<T> extends SelectionListBase<Array<T>> implements OnChanges {
     private readonly elementRef;
+    required: boolean;
+    label: string;
+    placeholder: string;
+    showValidation: boolean;
     items: Array<SelectionListItem<T>>;
     hasSearch: boolean;
     optionTemplate?: TemplateRef<unknown>;
@@ -3391,7 +3399,7 @@ declare class MultiSelectComponent<T> extends SelectionListBase<Array<T>> implem
      */
     protected get hasWarning(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent<any>, "frg-multi-select", never, { "items": { "alias": "items"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; }; "valuesTemplate": { "alias": "valuesTemplate"; "required": false; }; "showChips": { "alias": "showChips"; "required": false; }; "chipsStyle": { "alias": "chipsStyle"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent<any>, "frg-multi-select", never, { "required": { "alias": "required"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "showValidation": { "alias": "showValidation"; "required": false; }; "items": { "alias": "items"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; }; "valuesTemplate": { "alias": "valuesTemplate"; "required": false; }; "showChips": { "alias": "showChips"; "required": false; }; "chipsStyle": { "alias": "chipsStyle"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**

package/package.json

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