quang 20.5.0 → 20.5.1

package/fesm2022/quang-components-paginator.mjs

@@ -42,10 +42,10 @@ class QuangPaginatorLanguageService extends PaginatorIntl {
             this.changes.update((x) => x);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangPaginatorLanguageService, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangPaginatorLanguageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangPaginatorLanguageService, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangPaginatorLanguageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangPaginatorLanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangPaginatorLanguageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -114,20 +114,20 @@ class QuangPaginatorComponent {
         this._currentPage.set(this._totalPages());
         this.changePage.emit(this._currentPage());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: QuangPaginatorComponent, isStandalone: true, selector: "quang-paginator", inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, sizeList: { classPropertyName: "sizeList", publicName: "sizeList", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, showTotalElementsCount: { classPropertyName: "showTotalElementsCount", publicName: "showTotalElementsCount", isSignal: true, isRequired: false, transformFunction: null }, totalItemsText: { classPropertyName: "totalItemsText", publicName: "totalItemsText", isSignal: true, isRequired: false, transformFunction: null }, sizeText: { classPropertyName: "sizeText", publicName: "sizeText", isSignal: true, isRequired: false, transformFunction: null }, pageRangeText: { classPropertyName: "pageRangeText", publicName: "pageRangeText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changePage: "changePage", changeSize: "changeSize" }, ngImport: i0, template: "<div\n  [id]=\"componentId()\"\n  [ngClass]=\"componentClass()\"\n  class=\"paginatorContainer\"\n>\n  @if (showTotalElementsCount()) {\n    <div class=\"me-3 pagination-label\">{{ totalItemsText() | transloco }} {{ totalItems() }}</div>\n  }\n  @if (sizeList().length > 0) {\n    <div class=\"me-3\">\n      <label\n        class=\"form-label pagination-label mb-0 text-center\"\n        for=\"pageSize\"\n      >\n        {{ sizeText() | transloco }}\n      </label>\n      <select\n        [id]=\"componentId() + '-quang-page-size'\"\n        [tabIndex]=\"componentTabIndex()\"\n        (change)=\"onChangeSize($event)\"\n        #input\n        autocomplete=\"off\"\n        class=\"form-select page-size\"\n        id=\"pageSize\"\n        name=\"pageSize\"\n      >\n        @for (pageSize of sizeList(); track pageSize) {\n          <option [selected]=\"pageSize === this._pageSize()\">\n            {{ pageSize }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n  <div class=\"pagination-label text-center\">\n    {{ pageRangeText() | transloco: { page: page(), amountPages: _totalPages() } }}\n  </div>\n  <div class=\"pagination\">\n    <ul>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToFirstPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToPreviousPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToNextPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToLastPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template\n  #nextTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M530-481 332-679l43-43 241 241-241 241-43-43 198-198Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #prevTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M561-240 320-481l241-241 43 43-198 198 198 198-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #lastTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"m272-245-43-43 192-192-192-192 43-43 235 235-235 235Zm388 5v-480h60v480h-60Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #firstTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M240-240v-480h60v480h-60Zm447-3L453-477l234-234 43 43-191 191 191 191-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n", styles: [":host{display:block}.paginatorContainer{display:flex;align-items:flex-end;flex-wrap:wrap}@media (min-width: 576px){.paginatorContainer{flex-wrap:nowrap;order:2}}.paginatorContainer .page-size{display:inline-block;margin-bottom:.5rem;order:2;min-width:80px}@media (min-width: 576px){.paginatorContainer .page-size{order:1}}.pagination{margin-bottom:.5rem}.pagination ul{padding:0;margin:0;display:flex}.pagination ul li{list-style-type:none}.pagination ul li.pagination-page{display:none}.pagination ul li .page-link{border-radius:50%;padding:.375rem;border:none;gap:1.5rem;padding:.25rem;background-color:transparent;color:var(--bs-body-color)}.pagination ul li .page-link:disabled svg path{opacity:40%}.pagination ul li .page-link:focus{box-shadow:unset;background-color:unset}.pagination ul li .page-link svg{vertical-align:bottom;width:30px;height:30px}.pagination-label{margin:0;margin-bottom:1rem;font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: QuangPaginatorComponent, isStandalone: true, selector: "quang-paginator", inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, componentTabIndex: { classPropertyName: "componentTabIndex", publicName: "componentTabIndex", isSignal: true, isRequired: false, transformFunction: null }, componentClass: { classPropertyName: "componentClass", publicName: "componentClass", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, sizeList: { classPropertyName: "sizeList", publicName: "sizeList", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, showTotalElementsCount: { classPropertyName: "showTotalElementsCount", publicName: "showTotalElementsCount", isSignal: true, isRequired: false, transformFunction: null }, totalItemsText: { classPropertyName: "totalItemsText", publicName: "totalItemsText", isSignal: true, isRequired: false, transformFunction: null }, sizeText: { classPropertyName: "sizeText", publicName: "sizeText", isSignal: true, isRequired: false, transformFunction: null }, pageRangeText: { classPropertyName: "pageRangeText", publicName: "pageRangeText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changePage: "changePage", changeSize: "changeSize" }, ngImport: i0, template: "<div\n  [id]=\"componentId()\"\n  [ngClass]=\"componentClass()\"\n  class=\"paginatorContainer\"\n>\n  @if (showTotalElementsCount()) {\n    <div class=\"me-3 pagination-label\">{{ totalItemsText() | transloco }} {{ totalItems() }}</div>\n  }\n  @if (sizeList().length > 0) {\n    <div class=\"me-3\">\n      <label\n        class=\"form-label pagination-label mb-0 text-center\"\n        for=\"pageSize\"\n      >\n        {{ sizeText() | transloco }}\n      </label>\n      <select\n        [id]=\"componentId() + '-quang-page-size'\"\n        [tabIndex]=\"componentTabIndex()\"\n        (change)=\"onChangeSize($event)\"\n        #input\n        autocomplete=\"off\"\n        class=\"form-select page-size\"\n        id=\"pageSize\"\n        name=\"pageSize\"\n      >\n        @for (pageSize of sizeList(); track pageSize) {\n          <option [selected]=\"pageSize === this._pageSize()\">\n            {{ pageSize }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n  <div class=\"pagination-label text-center\">\n    {{ pageRangeText() | transloco: { page: page(), amountPages: _totalPages() } }}\n  </div>\n  <div class=\"pagination\">\n    <ul>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToFirstPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToPreviousPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToNextPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToLastPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template\n  #nextTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M530-481 332-679l43-43 241 241-241 241-43-43 198-198Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #prevTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M561-240 320-481l241-241 43 43-198 198 198 198-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #lastTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"m272-245-43-43 192-192-192-192 43-43 235 235-235 235Zm388 5v-480h60v480h-60Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #firstTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M240-240v-480h60v480h-60Zm447-3L453-477l234-234 43 43-191 191 191 191-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n", styles: [":host{display:block}.paginatorContainer{display:flex;align-items:flex-end;flex-wrap:wrap}@media (min-width: 576px){.paginatorContainer{flex-wrap:nowrap;order:2}}.paginatorContainer .page-size{display:inline-block;margin-bottom:.5rem;order:2;min-width:80px}@media (min-width: 576px){.paginatorContainer .page-size{order:1}}.pagination{margin-bottom:.5rem}.pagination ul{padding:0;margin:0;display:flex}.pagination ul li{list-style-type:none}.pagination ul li.pagination-page{display:none}.pagination ul li .page-link{border-radius:50%;padding:.375rem;border:none;gap:1.5rem;padding:.25rem;background-color:transparent;color:var(--bs-body-color)}.pagination ul li .page-link:disabled svg path{opacity:40%}.pagination ul li .page-link:focus{box-shadow:unset;background-color:unset}.pagination ul li .page-link svg{vertical-align:bottom;width:30px;height:30px}.pagination-label{margin:0;margin-bottom:1rem;font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-paginator', imports: [TranslocoPipe, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [id]=\"componentId()\"\n  [ngClass]=\"componentClass()\"\n  class=\"paginatorContainer\"\n>\n  @if (showTotalElementsCount()) {\n    <div class=\"me-3 pagination-label\">{{ totalItemsText() | transloco }} {{ totalItems() }}</div>\n  }\n  @if (sizeList().length > 0) {\n    <div class=\"me-3\">\n      <label\n        class=\"form-label pagination-label mb-0 text-center\"\n        for=\"pageSize\"\n      >\n        {{ sizeText() | transloco }}\n      </label>\n      <select\n        [id]=\"componentId() + '-quang-page-size'\"\n        [tabIndex]=\"componentTabIndex()\"\n        (change)=\"onChangeSize($event)\"\n        #input\n        autocomplete=\"off\"\n        class=\"form-select page-size\"\n        id=\"pageSize\"\n        name=\"pageSize\"\n      >\n        @for (pageSize of sizeList(); track pageSize) {\n          <option [selected]=\"pageSize === this._pageSize()\">\n            {{ pageSize }}\n          </option>\n        }\n      </select>\n    </div>\n  }\n  <div class=\"pagination-label text-center\">\n    {{ pageRangeText() | transloco: { page: page(), amountPages: _totalPages() } }}\n  </div>\n  <div class=\"pagination\">\n    <ul>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToFirstPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M240-240v-480h80v480h-80Zm440 0L440-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() <= 1\"\n          (click)=\"goToPreviousPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToNextPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n      <li>\n        <button\n          [disabled]=\"_currentPage() >= _totalPages()\"\n          (click)=\"goToLastPage()\"\n          class=\"page-link\"\n          type=\"button\"\n        >\n          <svg\n            fill=\"currentColor\"\n            height=\"24\"\n            stroke=\"currentColor\"\n            viewBox=\"0 -960 960 960\"\n            width=\"24\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"m280-240-56-56 184-184-184-184 56-56 240 240-240 240Zm360 0v-480h80v480h-80Z\"\n              fill=\"currentColor\"\n              stroke=\"currentColor\"\n            />\n          </svg>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ng-template\n  #nextTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M530-481 332-679l43-43 241 241-241 241-43-43 198-198Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #prevTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M561-240 320-481l241-241 43 43-198 198 198 198-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #lastTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"m272-245-43-43 192-192-192-192 43-43 235 235-235 235Zm388 5v-480h60v480h-60Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n\n<ng-template\n  #firstTemplate\n  let-currentPage=\"currentPage\"\n  let-disabled=\"disabled\"\n>\n  <svg\n    fill=\"currentColor\"\n    fill=\"currentColor\"\n    height=\"48\"\n    stroke=\"currentColor\"\n    viewBox=\"0 -960 960 960\"\n    width=\"48\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M240-240v-480h60v480h-60Zm447-3L453-477l234-234 43 43-191 191 191 191-43 43Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n    />\n  </svg>\n</ng-template>\n", styles: [":host{display:block}.paginatorContainer{display:flex;align-items:flex-end;flex-wrap:wrap}@media (min-width: 576px){.paginatorContainer{flex-wrap:nowrap;order:2}}.paginatorContainer .page-size{display:inline-block;margin-bottom:.5rem;order:2;min-width:80px}@media (min-width: 576px){.paginatorContainer .page-size{order:1}}.pagination{margin-bottom:.5rem}.pagination ul{padding:0;margin:0;display:flex}.pagination ul li{list-style-type:none}.pagination ul li.pagination-page{display:none}.pagination ul li .page-link{border-radius:50%;padding:.375rem;border:none;gap:1.5rem;padding:.25rem;background-color:transparent;color:var(--bs-body-color)}.pagination ul li .page-link:disabled svg path{opacity:40%}.pagination ul li .page-link:focus{box-shadow:unset;background-color:unset}.pagination ul li .page-link svg{vertical-align:bottom;width:30px;height:30px}.pagination-label{margin:0;margin-bottom:1rem;font-size:.75rem}\n"] }]
         }], propDecorators: { componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: false }] }], componentTabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentTabIndex", required: false }] }], componentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentClass", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: true }] }], sizeList: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeList", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], showTotalElementsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotalElementsCount", required: false }] }], totalItemsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItemsText", required: false }] }], sizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeText", required: false }] }], pageRangeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageRangeText", required: false }] }], changePage: [{ type: i0.Output, args: ["changePage"] }], changeSize: [{ type: i0.Output, args: ["changeSize"] }] } });
 
 class PaginatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatorModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: PaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -142,10 +142,10 @@ class QuangPaginatorService {
         const end = (pageNumber + 1) * pageSize;
         return list.slice(start, end);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangPaginatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangPaginatorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangPaginatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangPaginatorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangPaginatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangPaginatorService, decorators: [{
             type: Injectable
         }] });
 

package/fesm2022/quang-components-select.mjs

@@ -28,8 +28,8 @@ class QuangSelectComponent extends QuangBaseComponent {
         this.selectOptions = input.required(...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
         this.scrollBehaviorOnOpen = input('smooth', ...(ngDevMode ? [{ debugName: "scrollBehaviorOnOpen" }] : []));
         this.selectButton = viewChild('selectButton', ...(ngDevMode ? [{ debugName: "selectButton" }] : []));
+        /** Whether the option list is currently visible */
         this._showOptions = signal(false, ...(ngDevMode ? [{ debugName: "_showOptions" }] : []));
-        this._optionHideTimeout = signal(undefined, ...(ngDevMode ? [{ debugName: "_optionHideTimeout" }] : []));
         this._selectedItems = computed(() => {
             if (this._value() !== null) {
                 const targetValue = this._value();
@@ -54,43 +54,34 @@ class QuangSelectComponent extends QuangBaseComponent {
             }
         });
     }
-    changeOptionsVisibility(skipTimeout = false) {
+    changeOptionsVisibility() {
         if (this.isReadonly())
             return;
         if (this._showOptions()) {
-            this._showOptions.set(skipTimeout);
+            this.hideOptionVisibility();
         }
         else {
             this.showOptionVisibility();
         }
     }
     showOptionVisibility() {
-        if (this._optionHideTimeout()) {
-            clearTimeout(this._optionHideTimeout());
-            this._optionHideTimeout.set(null);
-        }
         this._showOptions.set(true);
     }
-    hideOptionVisibility(skipTimeout = false) {
-        if (this._optionHideTimeout()) {
-            clearTimeout(this._optionHideTimeout());
-        }
-        this._optionHideTimeout.set(setTimeout(() => {
-            this._showOptions.set(false);
-        }, skipTimeout ? 0 : 50));
+    hideOptionVisibility() {
+        this._showOptions.set(false);
     }
     onBlurHandler() {
         if (this.selectionMode() === 'single') {
-            setTimeout(() => {
-                this.hideOptionVisibility();
-                super.onBlurHandler();
-            }, 100);
+            this.hideOptionVisibility();
+            super.onBlurHandler();
         }
     }
     onChangedHandler(value) {
         super.onChangedHandler(value);
         if (this.selectionMode() === 'single') {
             this.hideOptionVisibility();
+            // Return focus to button after selection
+            this.focusButton();
         }
     }
     onMouseLeaveCallback() {
@@ -98,8 +89,63 @@ class QuangSelectComponent extends QuangBaseComponent {
             this.hideOptionVisibility();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: QuangSelectComponent, isStandalone: true, selector: "quang-select", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    /**
+     * Handles keydown events on the select button for accessibility.
+     * @param event The keyboard event
+     */
+    onButtonKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                // Open dropdown if closed
+                if (!this._showOptions()) {
+                    event.preventDefault();
+                    this.showOptionVisibility();
+                }
+                break;
+            case ' ':
+            case 'Enter':
+                // Toggle dropdown with Space or Enter
+                if (!this._showOptions()) {
+                    event.preventDefault();
+                    this.showOptionVisibility();
+                }
+                break;
+            case 'Escape':
+                // Close dropdown and keep focus on button
+                if (this._showOptions()) {
+                    event.preventDefault();
+                    this.onEscapePressed();
+                }
+                break;
+        }
+    }
+    /**
+     * Handles Escape key press from option list.
+     * Closes dropdown and returns focus to button.
+     */
+    onEscapePressed() {
+        this.hideOptionVisibility();
+        this.focusButton();
+    }
+    /**
+     * Handles Tab key press from option list.
+     * Closes dropdown and allows natural tab navigation.
+     */
+    onTabPressed(_event) {
+        this.hideOptionVisibility();
+    }
+    /**
+     * Sets focus to the select button element.
+     */
+    focusButton() {
+        const buttonEl = this.selectButton()?.nativeElement;
+        if (buttonEl) {
+            buttonEl.focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: QuangSelectComponent, isStandalone: true, selector: "quang-select", inputs: { selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, optionListMaxHeight: { classPropertyName: "optionListMaxHeight", publicName: "optionListMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: true, transformFunction: null }, scrollBehaviorOnOpen: { classPropertyName: "scrollBehaviorOnOpen", publicName: "scrollBehaviorOnOpen", isSignal: true, isRequired: false, transformFunction: null }, translateValue: { classPropertyName: "translateValue", publicName: "translateValue", isSignal: true, isRequired: false, transformFunction: null }, nullOption: { classPropertyName: "nullOption", publicName: "nullOption", isSignal: true, isRequired: false, transformFunction: null }, autoSelectSingleOption: { classPropertyName: "autoSelectSingleOption", publicName: "autoSelectSingleOption", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => QuangSelectComponent),
@@ -109,9 +155,9 @@ class QuangSelectComponent extends QuangBaseComponent {
                 provide: QuangOptionListComponent,
                 multi: false,
             },
-        ], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      #selectButton\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val.value; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}:host .option-list-container{position:relative}.form-select{height:2.375rem}.form-select:disabled{background-image:unset}.content{text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      (keydown)=\"onButtonKeydown($event)\"\n      #selectButton\n      aria-haspopup=\"listbox\"\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val.value; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        (escapePressed)=\"onEscapePressed()\"\n        (tabPressed)=\"onTabPressed($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}:host .option-list-container{position:relative}.form-select{height:2.375rem}.form-select:disabled{background-image:unset}.content{text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: QuangOptionListComponent, selector: "quang-option-list", inputs: ["selectionMode", "optionListMaxHeight", "selectOptions", "selectButtonRef", "_value", "_isDisabled", "componentClass", "componentLabel", "componentTabIndex", "translateValue", "nullOption", "scrollBehaviorOnOpen", "parentType", "parentID"], outputs: ["changedHandler", "blurHandler", "escapePressed", "tabPressed"] }, { kind: "directive", type: QuangTooltipDirective, selector: "[quangTooltip]", inputs: ["quangTooltip", "showMethod"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: QuangSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QuangSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'quang-select', providers: [
                         {
@@ -123,7 +169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
                             provide: QuangOptionListComponent,
                             multi: false,
                         },
-                    ], imports: [TranslocoPipe, NgClass, QuangOptionListComponent, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      #selectButton\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val.value; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}:host .option-list-container{position:relative}.form-select{height:2.375rem}.form-select:disabled{background-image:unset}.content{text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"] }]
+                    ], imports: [TranslocoPipe, NgClass, QuangOptionListComponent, QuangTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      (keydown)=\"onButtonKeydown($event)\"\n      #selectButton\n      aria-haspopup=\"listbox\"\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val.value; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        (escapePressed)=\"onEscapePressed()\"\n        (tabPressed)=\"onTabPressed($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n", styles: [":host{display:block}:host .option-list-container{position:relative}.form-select{height:2.375rem}.form-select:disabled{background-image:unset}.content{text-align:left;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], optionListMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionListMaxHeight", required: false }] }], selectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOptions", required: true }] }], scrollBehaviorOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehaviorOnOpen", required: false }] }], selectButton: [{ type: i0.ViewChild, args: ['selectButton', { isSignal: true }] }], translateValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateValue", required: false }] }], nullOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullOption", required: false }] }], autoSelectSingleOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelectSingleOption", required: false }] }] } });
 
 /**

package/fesm2022/quang-components-select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"quang-components-select.mjs","sources":["../../../projects/quang/components/select/select.component.ts","../../../projects/quang/components/select/select.component.html","../../../projects/quang/components/select/quang-components-select.ts"],"sourcesContent":["import { NgClass } from '@angular/common'\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  forwardRef,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\nimport { combineLatest, filter } from 'rxjs'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-select',\n  templateUrl: './select.component.html',\n  styleUrl: './select.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangSelectComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n  imports: [TranslocoPipe, NgClass, QuangOptionListComponent, QuangTooltipDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Select component for choosing one or multiple options from a dropdown.\n *\n * @usageNotes\n * This component supports both single and multiple selection modes. It can be configured\n * to display a list of options and allows users to select one or more of them by setting the `selectionMode` property to either `single` or `multiple`.\n */\nexport class QuangSelectComponent\n  extends QuangBaseComponent<string | number | string[] | number[] | null>\n  implements AfterViewInit\n{\n  selectionMode = input<'single' | 'multiple'>('single')\n\n  /**\n   * Set the max height of the selection list before scrolling.\n   * Default: 18rem\n   * @default 18rem\n   */\n  optionListMaxHeight = input<string>('18rem')\n\n  selectOptions = input.required<SelectOption[]>()\n\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  selectButton = viewChild<ElementRef<HTMLButtonElement>>('selectButton')\n\n  _showOptions = signal<boolean>(false)\n\n  _optionHideTimeout = signal<any | undefined>(undefined)\n\n  _selectedItems = computed(() => {\n    if (this._value() !== null) {\n      const targetValue = this._value()\n      return this.selectOptions().filter((x) => {\n        if (Array.isArray(targetValue)) {\n          return targetValue.some((k) => k === x.value)\n        }\n        return targetValue === x.value\n      })\n    }\n    return null\n  })\n\n  translateValue = input<boolean>(true)\n\n  nullOption = input<boolean>(true)\n\n  autoSelectSingleOption = input<boolean>(false)\n\n  readonly ParentType = OptionListParentType.SELECT\n\n  constructor() {\n    super()\n    combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])\n      .pipe(\n        takeUntilDestroyed(this.destroyRef),\n        filter(([autoselect, options]) => autoselect === true && options.length === 1)\n      )\n      .subscribe(([_, options]) => {\n        if (this._value() === null || this._value() === undefined || this._value() === '') {\n          this.onChangedHandler(options[0].value)\n        }\n      })\n  }\n\n  changeOptionsVisibility(skipTimeout = false): void {\n    if (this.isReadonly()) return\n    if (this._showOptions()) {\n      this._showOptions.set(skipTimeout)\n    } else {\n      this.showOptionVisibility()\n    }\n  }\n\n  showOptionVisibility(): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n      this._optionHideTimeout.set(null)\n    }\n    this._showOptions.set(true)\n  }\n\n  hideOptionVisibility(skipTimeout = false): void {\n    if (this._optionHideTimeout()) {\n      clearTimeout(this._optionHideTimeout())\n    }\n    this._optionHideTimeout.set(\n      setTimeout(\n        () => {\n          this._showOptions.set(false)\n        },\n        skipTimeout ? 0 : 50\n      )\n    )\n  }\n\n  override onBlurHandler() {\n    if (this.selectionMode() === 'single') {\n      setTimeout(() => {\n        this.hideOptionVisibility()\n        super.onBlurHandler()\n      }, 100)\n    }\n  }\n\n  override onChangedHandler(value: string | number | string[] | number[] | null): void {\n    super.onChangedHandler(value)\n    if (this.selectionMode() === 'single') {\n      this.hideOptionVisibility()\n    }\n  }\n\n  onMouseLeaveCallback() {\n    if (this.selectionMode() === 'multiple') {\n      this.hideOptionVisibility()\n    }\n  }\n}\n","<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      #selectButton\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val.value; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"quang-components-select.mjs","sources":["../../../projects/quang/components/select/select.component.ts","../../../projects/quang/components/select/select.component.html","../../../projects/quang/components/select/quang-components-select.ts"],"sourcesContent":["import { NgClass } from '@angular/common'\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  forwardRef,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { QuangTooltipDirective } from 'quang/overlay/tooltip'\nimport { combineLatest, filter } from 'rxjs'\n\nimport {\n  OptionListParentType,\n  QuangBaseComponent,\n  QuangOptionListComponent,\n  SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n  selector: 'quang-select',\n  templateUrl: './select.component.html',\n  styleUrl: './select.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangSelectComponent),\n      multi: true,\n    },\n    {\n      provide: QuangOptionListComponent,\n      multi: false,\n    },\n  ],\n  imports: [TranslocoPipe, NgClass, QuangOptionListComponent, QuangTooltipDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Select component for choosing one or multiple options from a dropdown.\n *\n * @usageNotes\n * This component supports both single and multiple selection modes. It can be configured\n * to display a list of options and allows users to select one or more of them by setting the `selectionMode` property to either `single` or `multiple`.\n */\nexport class QuangSelectComponent\n  extends QuangBaseComponent<string | number | string[] | number[] | null>\n  implements AfterViewInit\n{\n  selectionMode = input<'single' | 'multiple'>('single')\n\n  /**\n   * Set the max height of the selection list before scrolling.\n   * Default: 18rem\n   * @default 18rem\n   */\n  optionListMaxHeight = input<string>('18rem')\n\n  selectOptions = input.required<SelectOption[]>()\n\n  scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n  selectButton = viewChild<ElementRef<HTMLButtonElement>>('selectButton')\n\n  /** Whether the option list is currently visible */\n  _showOptions = signal<boolean>(false)\n\n  _selectedItems = computed(() => {\n    if (this._value() !== null) {\n      const targetValue = this._value()\n      return this.selectOptions().filter((x) => {\n        if (Array.isArray(targetValue)) {\n          return targetValue.some((k) => k === x.value)\n        }\n        return targetValue === x.value\n      })\n    }\n    return null\n  })\n\n  translateValue = input<boolean>(true)\n\n  nullOption = input<boolean>(true)\n\n  autoSelectSingleOption = input<boolean>(false)\n\n  readonly ParentType = OptionListParentType.SELECT\n\n  constructor() {\n    super()\n    combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])\n      .pipe(\n        takeUntilDestroyed(this.destroyRef),\n        filter(([autoselect, options]) => autoselect === true && options.length === 1)\n      )\n      .subscribe(([_, options]) => {\n        if (this._value() === null || this._value() === undefined || this._value() === '') {\n          this.onChangedHandler(options[0].value)\n        }\n      })\n  }\n\n  changeOptionsVisibility(): void {\n    if (this.isReadonly()) return\n    if (this._showOptions()) {\n      this.hideOptionVisibility()\n    } else {\n      this.showOptionVisibility()\n    }\n  }\n\n  showOptionVisibility(): void {\n    this._showOptions.set(true)\n  }\n\n  hideOptionVisibility(): void {\n    this._showOptions.set(false)\n  }\n\n  override onBlurHandler() {\n    if (this.selectionMode() === 'single') {\n      this.hideOptionVisibility()\n      super.onBlurHandler()\n    }\n  }\n\n  override onChangedHandler(value: string | number | string[] | number[] | null): void {\n    super.onChangedHandler(value)\n    if (this.selectionMode() === 'single') {\n      this.hideOptionVisibility()\n      // Return focus to button after selection\n      this.focusButton()\n    }\n  }\n\n  onMouseLeaveCallback() {\n    if (this.selectionMode() === 'multiple') {\n      this.hideOptionVisibility()\n    }\n  }\n\n  /**\n   * Handles keydown events on the select button for accessibility.\n   * @param event The keyboard event\n   */\n  onButtonKeydown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n        // Open dropdown if closed\n        if (!this._showOptions()) {\n          event.preventDefault()\n          this.showOptionVisibility()\n        }\n        break\n      case ' ':\n      case 'Enter':\n        // Toggle dropdown with Space or Enter\n        if (!this._showOptions()) {\n          event.preventDefault()\n          this.showOptionVisibility()\n        }\n        break\n      case 'Escape':\n        // Close dropdown and keep focus on button\n        if (this._showOptions()) {\n          event.preventDefault()\n          this.onEscapePressed()\n        }\n        break\n    }\n  }\n\n  /**\n   * Handles Escape key press from option list.\n   * Closes dropdown and returns focus to button.\n   */\n  onEscapePressed(): void {\n    this.hideOptionVisibility()\n    this.focusButton()\n  }\n\n  /**\n   * Handles Tab key press from option list.\n   * Closes dropdown and allows natural tab navigation.\n   */\n  onTabPressed(_event: { shiftKey: boolean }): void {\n    this.hideOptionVisibility()\n  }\n\n  /**\n   * Sets focus to the select button element.\n   */\n  focusButton(): void {\n    const buttonEl = this.selectButton()?.nativeElement\n    if (buttonEl) {\n      buttonEl.focus()\n    }\n  }\n}\n","<div\n  (mouseleave)=\"onMouseLeaveCallback()\"\n  class=\"mb-3\"\n>\n  @if (componentLabel()) {\n    <label\n      [htmlFor]=\"componentId()\"\n      class=\"form-label d-flex gap-2\"\n    >\n      <div>\n        <span>{{ componentLabel() | transloco }}</span>\n        <span [hidden]=\"!_isRequired()\">*</span>\n      </div>\n      @if (helpMessage() && helpMessageTooltip()) {\n        <div [quangTooltip]=\"helpMessage() | transloco\">\n          <ng-content select=\"[help-icon]\" />\n        </div>\n      }\n    </label>\n  }\n  <div\n    [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n    [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n    class=\"option-list-container\"\n  >\n    <button\n      [attr.aria-controls]=\"_showOptions() ? 'optionList' : null\"\n      [attr.aria-expanded]=\"_showOptions()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n      [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [tabIndex]=\"componentTabIndex()\"\n      (click)=\"changeOptionsVisibility()\"\n      (keydown)=\"onButtonKeydown($event)\"\n      #selectButton\n      aria-haspopup=\"listbox\"\n      class=\"form-select\"\n      type=\"button\"\n    >\n      <div class=\"content\">\n        @if (_selectedItems()?.length) {\n          @for (val of _selectedItems(); track val.value; let last = $last) {\n            {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n          }\n        } @else {\n          <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n        }\n      </div>\n    </button>\n\n    @if (_showOptions()) {\n      <quang-option-list\n        [_isDisabled]=\"_isDisabled()\"\n        [_value]=\"_value()\"\n        [componentClass]=\"componentClass()\"\n        [componentLabel]=\"componentLabel()\"\n        [componentTabIndex]=\"componentTabIndex()\"\n        [nullOption]=\"nullOption()\"\n        [optionListMaxHeight]=\"optionListMaxHeight()\"\n        [parentType]=\"ParentType\"\n        [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n        [selectButtonRef]=\"selectButton\"\n        [selectionMode]=\"selectionMode()\"\n        [selectOptions]=\"selectOptions()\"\n        [translateValue]=\"translateValue()\"\n        (blurHandler)=\"onBlurHandler()\"\n        (changedHandler)=\"onChangedHandler($event)\"\n        (escapePressed)=\"onEscapePressed()\"\n        (tabPressed)=\"onTabPressed($event)\"\n        #optionList\n      ></quang-option-list>\n    }\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  @if (helpMessage() && !helpMessageTooltip()) {\n    <small\n      [hidden]=\"_showSuccess() || _showErrors()\"\n      aria-live=\"assertive\"\n      class=\"form-text text-muted\"\n    >\n      {{ helpMessage() | transloco }}\n    </small>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}