@ngstarter-ui/components 21.0.31 → 21.0.33

package/ai/component-registry.json

@@ -3,7 +3,7 @@
   "generatedBy": "scripts/generate-ai-metadata.mjs",
   "package": "@ngstarter-ui/components",
   "description": "AI-readable registry for NgStarter UI Angular secondary entry points.",
-  "componentCount": 124,
+  "componentCount": 125,
   "conventions": {
     "importPattern": "@ngstarter-ui/components/<component>",
     "selectorPrefix": "ngs",
@@ -2925,7 +2925,9 @@
       ],
       "cssTokens": [
         "--ngs-color-neutral-500",
-        "--ngs-dropdown-item-gap"
+        "--ngs-color-on-surface-variant",
+        "--ngs-dropdown-item-gap",
+        "--ngs-font-size-sm"
       ],
       "example": null
     },
@@ -3028,7 +3030,9 @@
       ],
       "cssTokens": [
         "--ngs-color-neutral-500",
-        "--ngs-dropdown-item-gap"
+        "--ngs-color-on-surface-variant",
+        "--ngs-dropdown-item-gap",
+        "--ngs-font-size-sm"
       ],
       "example": null
     },
@@ -5916,7 +5920,6 @@
         "--ngs-menu-border",
         "--ngs-menu-divider-color",
         "--ngs-menu-divider-margin",
-        "--ngs-menu-footer-padding",
         "--ngs-menu-item-active-background",
         "--ngs-menu-item-color",
         "--ngs-menu-item-disabled-color",
@@ -5931,6 +5934,7 @@
         "--ngs-menu-max-width",
         "--ngs-menu-min-width",
         "--ngs-menu-padding",
+        "--ngs-menu-panel-bg",
         "--ngs-menu-shadow"
       ],
       "example": null
@@ -6842,6 +6846,97 @@
       ],
       "example": null
     },
+    {
+      "name": "pdf-viewer",
+      "title": "Pdf Viewer",
+      "overviewName": "PDF Viewer",
+      "category": "libraries",
+      "package": "@ngstarter-ui/components",
+      "importPath": "@ngstarter-ui/components/pdf-viewer",
+      "publicApi": "projects/components/pdf-viewer/public-api.ts",
+      "sourceRoot": "projects/components/pdf-viewer/src",
+      "docsPath": "/libraries/pdf-viewer",
+      "docsOverviewSource": "projects/docs/src/app/libraries/pdf-viewer/overview/overview.html",
+      "purpose": "Import PDF Viewer from &#64;ngstarter-ui/components/pdf-viewer .",
+      "useWhen": "Choose Pdf Viewer when the workflow matches examples such as Basic pdf viewer.",
+      "exampleTopics": [
+        "Basic pdf viewer"
+      ],
+      "minimalExample": "<div class=\"pdf-viewer-example-toolbar\">\n  <input\n    #pdfFileInput\n    class=\"pdf-viewer-example-file-input\"\n    type=\"file\"\n    accept=\"application/pdf,.pdf\"\n    (change)=\"onPdfSelected($event)\" />\n  <button ngsButton=\"tonal\" type=\"button\" (click)=\"pdfFileInput.click()\">\n    <ngs-icon name=\"fluent:arrow-upload-24-regular\" />\n    Upload PDF\n  </button>\n</div>\n<ngs-pdf-viewer\n  [src]=\"src()\"\n  [wasmUrl]=\"wasmUrl\"\n  class=\"pdf-viewer-example\" />",
+      "exampleFiles": [
+        {
+          "name": "basic-pdf-viewer-example",
+          "title": "Basic pdf viewer",
+          "file": "projects/docs/src/app/libraries/pdf-viewer/_examples/basic-pdf-viewer-example/basic-pdf-viewer-example.html",
+          "source": "<div class=\"pdf-viewer-example-toolbar\">\n  <input\n    #pdfFileInput\n    class=\"pdf-viewer-example-file-input\"\n    type=\"file\"\n    accept=\"application/pdf,.pdf\"\n    (change)=\"onPdfSelected($event)\" />\n  <button ngsButton=\"tonal\" type=\"button\" (click)=\"pdfFileInput.click()\">\n    <ngs-icon name=\"fluent:arrow-upload-24-regular\" />\n    Upload PDF\n  </button>\n</div>\n<ngs-pdf-viewer\n  [src]=\"src()\"\n  [wasmUrl]=\"wasmUrl\"\n  class=\"pdf-viewer-example\" />"
+        }
+      ],
+      "previewAsset": "projects/components/pdf-viewer/preview.svg",
+      "selectors": [
+        "ngs-pdf-viewer"
+      ],
+      "exportedSymbols": [
+        "PdfViewer",
+        "PdfViewerEngineService",
+        "PdfViewerLoadedEvent",
+        "PdfViewerPageRenderedEvent",
+        "PdfViewerPageView",
+        "PdfViewerSelectionRectView",
+        "PdfViewerSource",
+        "PdfViewerTextGlyphView",
+        "PdfViewerTextRectView",
+        "PdfViewerThumbnailView"
+      ],
+      "inputs": [
+        "maxScale",
+        "minScale",
+        "page",
+        "renderAll",
+        "scale",
+        "showPageList",
+        "showToolbar",
+        "src",
+        "wasmUrl",
+        "withAnnotations",
+        "withForms",
+        "zoomStep"
+      ],
+      "outputs": [
+        "error",
+        "loaded",
+        "pageChanged",
+        "pageRendered"
+      ],
+      "cssTokens": [
+        "--ngs-color-danger",
+        "--ngs-color-on-surface",
+        "--ngs-color-on-surface-variant",
+        "--ngs-color-outline",
+        "--ngs-color-outline-variant",
+        "--ngs-color-primary",
+        "--ngs-color-primary-container",
+        "--ngs-color-surface",
+        "--ngs-color-surface-container-low",
+        "--ngs-font-size-sm",
+        "--ngs-font-size-xs",
+        "--ngs-pdf-viewer-background",
+        "--ngs-pdf-viewer-border-color",
+        "--ngs-pdf-viewer-height",
+        "--ngs-pdf-viewer-page-background",
+        "--ngs-pdf-viewer-page-shadow",
+        "--ngs-pdf-viewer-radius",
+        "--ngs-pdf-viewer-selection-background",
+        "--ngs-pdf-viewer-sidebar-width",
+        "--ngs-radius-md",
+        "--ngs-shadow-md",
+        "--ngs-shadow-xs",
+        "--ngs-spacing-1",
+        "--ngs-spacing-2",
+        "--ngs-spacing-3",
+        "--ngs-spacing-6"
+      ],
+      "example": null
+    },
     {
       "name": "phone-input",
       "title": "Phone Input",
@@ -6911,7 +7006,8 @@
       "cssTokens": [
         "--ngs-color-neutral-500",
         "--ngs-color-neutral-600",
-        "--ngs-icon-size",
+        "--ngs-color-on-surface-variant",
+        "--ngs-font-size-sm",
         "--ngs-phone-input-color",
         "--ngs-phone-input-flag-display",
         "--ngs-phone-input-opacity"

package/fesm2022/ngstarter-ui-components-country-select.mjs

@@ -263,6 +263,8 @@ const countries = [
 ];
 
 class CountrySelect {
+    static COUNTRY_RENDER_CHUNK_SIZE = 32;
+    static COUNTRY_RENDER_CHUNK_DELAY = 50;
     _elementRef = inject(ElementRef);
     _renderer = inject(Renderer2);
     _formField = inject(FORM_FIELD, { optional: true });
@@ -270,6 +272,7 @@ class CountrySelect {
     id = `ngs-country-select-${CountrySelect.nextId++}`;
     stateChanges = new Subject();
     searchTerm = model('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    visibleCountryCount = signal(CountrySelect.COUNTRY_RENDER_CHUNK_SIZE, ...(ngDevMode ? [{ debugName: "visibleCountryCount" }] : /* istanbul ignore next */ []));
     _valueSignal = signal(null, ...(ngDevMode ? [{ debugName: "_valueSignal" }] : /* istanbul ignore next */ []));
     _focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "_focusedSignal" }] : /* istanbul ignore next */ []));
     _touched = false;
@@ -288,6 +291,9 @@ class CountrySelect {
         return countries.filter(country => country.name.toLowerCase().includes(filterValue) ||
             country.code.toLowerCase().includes(filterValue));
     }, ...(ngDevMode ? [{ debugName: "filteredCountries" }] : /* istanbul ignore next */ []));
+    visibleCountries = computed(() => {
+        return this.filteredCountries().slice(0, this.visibleCountryCount());
+    }, ...(ngDevMode ? [{ debugName: "visibleCountries" }] : /* istanbul ignore next */ []));
     selectedCountryDisplay = computed(() => {
         return this.internalCountries.find(c => c.code === this._valueSignal());
     }, ...(ngDevMode ? [{ debugName: "selectedCountryDisplay" }] : /* istanbul ignore next */ []));
@@ -301,11 +307,14 @@ class CountrySelect {
     closed = output();
     onChangeFn = () => { };
     onTouchedFn = () => { };
+    _countryRenderTimeout;
+    _countrySearchFocusTimeout;
     constructor() {
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
         this.destroyRef.onDestroy(() => {
+            this.clearCountrySelectTimeouts();
             this.fm.stopMonitoring(this.elRef.nativeElement);
             this.stateChanges.complete();
         });
@@ -338,6 +347,7 @@ class CountrySelect {
         }
     }
     ngOnDestroy() {
+        this.clearCountrySelectTimeouts();
     }
     get value() {
         return this._valueSignal();
@@ -427,18 +437,27 @@ class CountrySelect {
     }
     clearSearch(event) {
         event.stopPropagation();
-        this.searchTerm.set('');
+        this.onCountrySearch('');
         this.searchInput().nativeElement.focus();
     }
+    onCountrySearch(searchTerm) {
+        this.searchTerm.set(searchTerm);
+        this.visibleCountryCount.set(CountrySelect.COUNTRY_RENDER_CHUNK_SIZE);
+        this.scheduleCountryRendering();
+    }
     onSelectOpened() {
-        setTimeout(() => {
+        this.visibleCountryCount.set(this.getInitialVisibleCountryCount());
+        this.scheduleCountryRendering();
+        this._countrySearchFocusTimeout = setTimeout(() => {
             this.searchInput().nativeElement.focus();
         });
         this.opened.emit();
     }
     onSelectClosed() {
+        this.clearCountrySelectTimeouts();
         this._focusedSignal.set(false);
         this.searchTerm.set('');
+        this.visibleCountryCount.set(CountrySelect.COUNTRY_RENDER_CHUNK_SIZE);
         if (!this._touched) {
             this.onTouchedFn();
         }
@@ -447,13 +466,55 @@ class CountrySelect {
     focus() {
         this.ngsSelect()?.focus();
     }
+    getInitialVisibleCountryCount() {
+        const countries = this.filteredCountries();
+        const selectedCountryCode = this._valueSignal();
+        if (!selectedCountryCode) {
+            return CountrySelect.COUNTRY_RENDER_CHUNK_SIZE;
+        }
+        const selectedCountryIndex = countries.findIndex((country) => country.code === selectedCountryCode);
+        if (selectedCountryIndex === -1) {
+            return CountrySelect.COUNTRY_RENDER_CHUNK_SIZE;
+        }
+        return Math.min(Math.max(selectedCountryIndex + 1, CountrySelect.COUNTRY_RENDER_CHUNK_SIZE), countries.length);
+    }
+    scheduleCountryRendering() {
+        this.clearCountryRenderTimeout();
+        if (this.visibleCountryCount() >= this.filteredCountries().length) {
+            return;
+        }
+        this._countryRenderTimeout = setTimeout(() => {
+            this.visibleCountryCount.update((count) => {
+                return Math.min(count + CountrySelect.COUNTRY_RENDER_CHUNK_SIZE, this.filteredCountries().length);
+            });
+            this.scheduleCountryRendering();
+        }, CountrySelect.COUNTRY_RENDER_CHUNK_DELAY);
+    }
+    clearCountrySelectTimeouts() {
+        this.clearCountryRenderTimeout();
+        this.clearCountrySearchFocusTimeout();
+    }
+    clearCountryRenderTimeout() {
+        if (!this._countryRenderTimeout) {
+            return;
+        }
+        clearTimeout(this._countryRenderTimeout);
+        this._countryRenderTimeout = undefined;
+    }
+    clearCountrySearchFocusTimeout() {
+        if (!this._countrySearchFocusTimeout) {
+            return;
+        }
+        clearTimeout(this._countrySearchFocusTimeout);
+        this._countrySearchFocusTimeout = undefined;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CountrySelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: CountrySelect, isStandalone: true, selector: "ngs-country-select", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, placeholderInputSignal: { classPropertyName: "placeholderInputSignal", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, isRequiredSignal: { classPropertyName: "isRequiredSignal", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isDisabledSignal: { classPropertyName: "isDisabledSignal", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showCountryCode: { classPropertyName: "showCountryCode", publicName: "showCountryCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange", isRequiredSignal: "requiredChange", isDisabledSignal: "disabledChange", opened: "opened", closed: "closed" }, host: { listeners: { "focus": "onFocusIn()", "blur": "onFocusOut($event)" }, properties: { "class.floating": "shouldLabelFloat", "id": "id", "attr.tabindex": "disabled ? -1 : 0" }, classAttribute: "ngs-country-select" }, providers: [
             {
                 provide: FormFieldControl,
                 useExisting: forwardRef(() => CountrySelect),
             },
-        ], viewQueries: [{ propertyName: "ngsSelect", first: true, predicate: ["ngsSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["ngsCountrySelect"], ngImport: i0, template: "<ngs-select\n  #ngsSelect\n  [value]=\"value\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  (opened)=\"onSelectOpened()\"\n  (closed)=\"onSelectClosed()\"\n  [placeholder]=\"placeholder\"\n  [required]=\"isRequiredSignal()\"\n  [disabled]=\"isDisabledSignal()\">\n  <ngs-select-trigger class=\"select-trigger\">\n    @let selectedCountry = selectedCountryDisplay();\n    @if (selectedCountry) {\n      <span class=\"ngs-select-trigger-content\">\n        <span class=\"ngs-select-trigger-icon\">{{ selectedCountry.flag }}</span>\n        <span class=\"ngs-select-trigger-text\">\n          {{ selectedCountry.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ selectedCountry.code }})</span>\n          }\n        </span>\n      </span>\n    }\n\n    @if (!selectedCountryDisplay() && placeholder) {\n      <span class=\"ngs-select-trigger-text placeholder-text\">\n        {{ placeholder }}\n      </span>\n    }\n  </ngs-select-trigger>\n\n  <ngs-select-header>\n    <div class=\"sticky top-0 z-1 bg-surface-container-lowest\">\n      <input #searchInput\n             type=\"text\"\n             placeholder=\"Search...\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"searchTerm\"\n             class=\"w-full text-sm focus:outline-none border-b border-surface-container-high focus:border-b-primary h-14 px-3\">\n      @if (searchTerm().trim()) {\n        <div class=\"absolute end-1 top-1/2 -translate-y-1/2\">\n          <button\n            ngsIconButton\n            (click)=\"clearSearch($event)\"\n            class=\"clear-button\"\n            type=\"button\"\n            aria-label=\"Clear search\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n      }\n    </div>\n  </ngs-select-header>\n\n  @for (country of filteredCountries(); track country.code) {\n    <ngs-option [value]=\"country.code\">\n      <span class=\"select-option-content\">\n        <span class=\"select-option-icon\">{{ country.flag }}</span>\n        <span class=\"select-option-text\">\n          {{ country.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ country.code }})</span>\n          }\n        </span>\n      </span>\n    </ngs-option>\n  } @empty {\n    @if (searchTerm()) {\n      <div class=\"text-sm px-4 py-3\">\n        <span i18n>Country not found</span>.\n      </div>\n    }\n  }\n</ngs-select>\n", styles: [":host{display:block}:host .ngs-select-trigger-icon,:host .select-option-icon{font-size:1.25rem}:host .select-option-content{display:flex;align-items:center;gap:var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2));min-width:0;width:100%;height:100%;overflow:hidden;white-space:nowrap}:host .select-option-icon{flex:none;line-height:0}:host .select-option-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .code{text-transform:uppercase;color:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "directive", type: SelectTrigger, selector: "ngs-select-trigger" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: SelectHeader, selector: "ngs-select-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "ngsSelect", first: true, predicate: ["ngsSelect"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], exportAs: ["ngsCountrySelect"], ngImport: i0, template: "<ngs-select\n  #ngsSelect\n  [value]=\"value\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  (opened)=\"onSelectOpened()\"\n  (closed)=\"onSelectClosed()\"\n  [placeholder]=\"placeholder\"\n  [required]=\"isRequiredSignal()\"\n  [disabled]=\"isDisabledSignal()\">\n  <ngs-select-trigger class=\"select-trigger\">\n    @let selectedCountry = selectedCountryDisplay();\n    @if (selectedCountry) {\n      <span class=\"ngs-select-trigger-content\">\n        <span class=\"flag-icon\" aria-hidden=\"true\">{{ selectedCountry.flag }}</span>\n        <span class=\"ngs-select-trigger-text\">\n          {{ selectedCountry.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ selectedCountry.code }})</span>\n          }\n        </span>\n      </span>\n    }\n\n    @if (!selectedCountryDisplay() && placeholder) {\n      <span class=\"ngs-select-trigger-text placeholder-text\">\n        {{ placeholder }}\n      </span>\n    }\n  </ngs-select-trigger>\n\n  <ngs-select-header>\n    <div class=\"sticky top-0 z-1 bg-surface-container-lowest\">\n      <input #searchInput\n             type=\"text\"\n             placeholder=\"Search...\"\n             autocomplete=\"off\"\n             [ngModel]=\"searchTerm()\"\n             (ngModelChange)=\"onCountrySearch($event)\"\n             class=\"w-full text-sm focus:outline-none border-b border-surface-container-high focus:border-b-primary h-14 px-3\">\n      @if (searchTerm().trim()) {\n        <div class=\"absolute end-1 top-1/2 -translate-y-1/2\">\n          <button\n            ngsIconButton\n            (click)=\"clearSearch($event)\"\n            class=\"clear-button\"\n            type=\"button\"\n            aria-label=\"Clear search\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n      }\n    </div>\n  </ngs-select-header>\n\n  @for (country of visibleCountries(); track country.code) {\n    <ngs-option [value]=\"country.code\">\n      <div class=\"flex items-center gap-2\">\n        <span class=\"select-option-icon text-2xl\" aria-hidden=\"true\">{{ country.flag }}</span>\n        <span class=\"select-option-text\">\n        {{ country.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ country.code }})</span>\n          }\n      </span>\n      </div>\n    </ngs-option>\n  } @empty {\n    @if (searchTerm()) {\n      <div class=\"text-sm px-4 py-3\">\n        <span i18n>Country not found</span>.\n      </div>\n    }\n  }\n\n  @if (visibleCountryCount() < filteredCountries().length) {\n    <div class=\"select-loading\">\n      Loading more countries...\n    </div>\n  }\n</ngs-select>\n", styles: [":host{display:block}:host .flag-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;font-size:22px;line-height:1}:host .select-option-content{display:flex;align-items:center;gap:var(--ngs-dropdown-item-gap);min-width:0;width:100%;height:100%;overflow:hidden;white-space:nowrap}:host .select-option-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .code{text-transform:uppercase;color:var(--ngs-color-neutral-500)}:host .select-loading{padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Option, selector: "ngs-option", inputs: ["value", "data", "disabled", "selected"], outputs: ["onSelectionChange"], exportAs: ["ngsOption"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: Select, selector: "ngs-select", inputs: ["id", "placeholder", "disabled", "required", "multiple", "hideCheckIcon", "clearable", "aria-label", "tabIndex", "aria-describedby", "value"], outputs: ["selectionChange", "opened", "closed", "valueChange"], exportAs: ["ngsSelect"] }, { kind: "directive", type: SelectTrigger, selector: "ngs-select-trigger" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: SelectHeader, selector: "ngs-select-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CountrySelect, decorators: [{
             type: Component,
@@ -478,7 +539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '[attr.tabindex]': 'disabled ? -1 : 0',
                         '(focus)': 'onFocusIn()',
                         '(blur)': 'onFocusOut($event)',
-                    }, template: "<ngs-select\n  #ngsSelect\n  [value]=\"value\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  (opened)=\"onSelectOpened()\"\n  (closed)=\"onSelectClosed()\"\n  [placeholder]=\"placeholder\"\n  [required]=\"isRequiredSignal()\"\n  [disabled]=\"isDisabledSignal()\">\n  <ngs-select-trigger class=\"select-trigger\">\n    @let selectedCountry = selectedCountryDisplay();\n    @if (selectedCountry) {\n      <span class=\"ngs-select-trigger-content\">\n        <span class=\"ngs-select-trigger-icon\">{{ selectedCountry.flag }}</span>\n        <span class=\"ngs-select-trigger-text\">\n          {{ selectedCountry.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ selectedCountry.code }})</span>\n          }\n        </span>\n      </span>\n    }\n\n    @if (!selectedCountryDisplay() && placeholder) {\n      <span class=\"ngs-select-trigger-text placeholder-text\">\n        {{ placeholder }}\n      </span>\n    }\n  </ngs-select-trigger>\n\n  <ngs-select-header>\n    <div class=\"sticky top-0 z-1 bg-surface-container-lowest\">\n      <input #searchInput\n             type=\"text\"\n             placeholder=\"Search...\"\n             autocomplete=\"off\"\n             [(ngModel)]=\"searchTerm\"\n             class=\"w-full text-sm focus:outline-none border-b border-surface-container-high focus:border-b-primary h-14 px-3\">\n      @if (searchTerm().trim()) {\n        <div class=\"absolute end-1 top-1/2 -translate-y-1/2\">\n          <button\n            ngsIconButton\n            (click)=\"clearSearch($event)\"\n            class=\"clear-button\"\n            type=\"button\"\n            aria-label=\"Clear search\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n      }\n    </div>\n  </ngs-select-header>\n\n  @for (country of filteredCountries(); track country.code) {\n    <ngs-option [value]=\"country.code\">\n      <span class=\"select-option-content\">\n        <span class=\"select-option-icon\">{{ country.flag }}</span>\n        <span class=\"select-option-text\">\n          {{ country.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ country.code }})</span>\n          }\n        </span>\n      </span>\n    </ngs-option>\n  } @empty {\n    @if (searchTerm()) {\n      <div class=\"text-sm px-4 py-3\">\n        <span i18n>Country not found</span>.\n      </div>\n    }\n  }\n</ngs-select>\n", styles: [":host{display:block}:host .ngs-select-trigger-icon,:host .select-option-icon{font-size:1.25rem}:host .select-option-content{display:flex;align-items:center;gap:var(--ngs-dropdown-item-gap, calc(var(--spacing, .25rem) * 2));min-width:0;width:100%;height:100%;overflow:hidden;white-space:nowrap}:host .select-option-icon{flex:none;line-height:0}:host .select-option-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .code{text-transform:uppercase;color:var(--ngs-color-neutral-500)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<ngs-select\n  #ngsSelect\n  [value]=\"value\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  (opened)=\"onSelectOpened()\"\n  (closed)=\"onSelectClosed()\"\n  [placeholder]=\"placeholder\"\n  [required]=\"isRequiredSignal()\"\n  [disabled]=\"isDisabledSignal()\">\n  <ngs-select-trigger class=\"select-trigger\">\n    @let selectedCountry = selectedCountryDisplay();\n    @if (selectedCountry) {\n      <span class=\"ngs-select-trigger-content\">\n        <span class=\"flag-icon\" aria-hidden=\"true\">{{ selectedCountry.flag }}</span>\n        <span class=\"ngs-select-trigger-text\">\n          {{ selectedCountry.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ selectedCountry.code }})</span>\n          }\n        </span>\n      </span>\n    }\n\n    @if (!selectedCountryDisplay() && placeholder) {\n      <span class=\"ngs-select-trigger-text placeholder-text\">\n        {{ placeholder }}\n      </span>\n    }\n  </ngs-select-trigger>\n\n  <ngs-select-header>\n    <div class=\"sticky top-0 z-1 bg-surface-container-lowest\">\n      <input #searchInput\n             type=\"text\"\n             placeholder=\"Search...\"\n             autocomplete=\"off\"\n             [ngModel]=\"searchTerm()\"\n             (ngModelChange)=\"onCountrySearch($event)\"\n             class=\"w-full text-sm focus:outline-none border-b border-surface-container-high focus:border-b-primary h-14 px-3\">\n      @if (searchTerm().trim()) {\n        <div class=\"absolute end-1 top-1/2 -translate-y-1/2\">\n          <button\n            ngsIconButton\n            (click)=\"clearSearch($event)\"\n            class=\"clear-button\"\n            type=\"button\"\n            aria-label=\"Clear search\">\n            <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n          </button>\n        </div>\n      }\n    </div>\n  </ngs-select-header>\n\n  @for (country of visibleCountries(); track country.code) {\n    <ngs-option [value]=\"country.code\">\n      <div class=\"flex items-center gap-2\">\n        <span class=\"select-option-icon text-2xl\" aria-hidden=\"true\">{{ country.flag }}</span>\n        <span class=\"select-option-text\">\n        {{ country.name }}\n          @if (showCountryCode()) {\n            <span class=\"code\">({{ country.code }})</span>\n          }\n      </span>\n      </div>\n    </ngs-option>\n  } @empty {\n    @if (searchTerm()) {\n      <div class=\"text-sm px-4 py-3\">\n        <span i18n>Country not found</span>.\n      </div>\n    }\n  }\n\n  @if (visibleCountryCount() < filteredCountries().length) {\n    <div class=\"select-loading\">\n      Loading more countries...\n    </div>\n  }\n</ngs-select>\n", styles: [":host{display:block}:host .flag-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;font-size:22px;line-height:1}:host .select-option-content{display:flex;align-items:center;gap:var(--ngs-dropdown-item-gap);min-width:0;width:100%;height:100%;overflow:hidden;white-space:nowrap}:host .select-option-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .code{text-transform:uppercase;color:var(--ngs-color-neutral-500)}:host .select-loading{padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 4);color:var(--ngs-color-on-surface-variant);font-size:var(--ngs-font-size-sm)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }, { type: i0.Output, args: ["searchTermChange"] }], placeholderInputSignal: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], isRequiredSignal: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }, { type: i0.Output, args: ["requiredChange"] }], isDisabledSignal: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], showCountryCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCountryCode", required: false }] }], ngsSelect: [{ type: i0.ViewChild, args: ['ngsSelect', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**