@ngstarter-ui/components 21.0.41 → 21.0.43

package/README.md

@@ -102,7 +102,6 @@ The documentation site includes live demos and API examples for each component:
 - [Country Select](https://docs.ngstarter.com/forms/country)
 - [Currency Select](https://docs.ngstarter.com/forms/currency-select)
 - [Date Format Select](https://docs.ngstarter.com/forms/date-format-select)
-- [Form Renderer](https://docs.ngstarter.com/forms/form-renderer)
 - [Inline Text Edit](https://docs.ngstarter.com/forms/inline-text-edit)
 - [Input](https://docs.ngstarter.com/forms/input)
 - [Input Mask](https://docs.ngstarter.com/forms/input-mask)

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": 127,
+  "componentCount": 126,
   "conventions": {
     "importPattern": "@ngstarter-ui/components/<component>",
     "selectorPrefix": "ngs",
@@ -2892,15 +2892,23 @@
       "purpose": "Let users choose a country from the built-in country list and store its ISO country code.",
       "useWhen": "Use in addresses, user profiles, billing, shipping, legal forms, tax forms, tenant settings, and locale settings where the form value should be a country code such as US, PL, or DE. The component shows country flags and names, supports search by name or ISO code, and integrates with FormField. Do not use for phone dialing codes; use PhoneInput. Do not use for currency selection; use CurrencySelect. Do not use for custom region, city, office, or location lists; use Select or Autocomplete.",
       "exampleTopics": [
-        "Basic country select"
+        "Unselected country",
+        "Basic country select",
+        "Unselected country select"
       ],
-      "minimalExample": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Country</ngs-label>\n  <ngs-country-select [(ngModel)]=\"country\" placeholder=\"Select a country\"/>\n</ngs-form-field>\n<p>\n  Selected country: {{ country() }}\n</p>",
+      "minimalExample": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Country</ngs-label>\n  <ngs-country-select [(ngModel)]=\"country\" placeholder=\"Select a country\" clearable/>\n</ngs-form-field>\n<p>\n  Selected country: {{ country() }}\n</p>",
       "exampleFiles": [
         {
           "name": "basic-country-select-example",
           "title": "Basic country select",
           "file": "projects/docs/src/app/forms/country/_examples/basic-country-select-example/basic-country-select-example.html",
-          "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Country</ngs-label>\n  <ngs-country-select [(ngModel)]=\"country\" placeholder=\"Select a country\"/>\n</ngs-form-field>\n<p>\n  Selected country: {{ country() }}\n</p>"
+          "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Country</ngs-label>\n  <ngs-country-select [(ngModel)]=\"country\" placeholder=\"Select a country\" clearable/>\n</ngs-form-field>\n<p>\n  Selected country: {{ country() }}\n</p>"
+        },
+        {
+          "name": "unselected-country-select-example",
+          "title": "Unselected country select",
+          "file": "projects/docs/src/app/forms/country/_examples/unselected-country-select-example/unselected-country-select-example.html",
+          "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Country</ngs-label>\n  <ngs-country-select [(ngModel)]=\"country\" placeholder=\"Select a country\" clearable/>\n</ngs-form-field>\n<p>\n  Selected country: {{ country() || 'No country selected' }}\n</p>"
         }
       ],
       "previewAsset": "projects/components/country-select/preview.svg",
@@ -2910,18 +2918,28 @@
       "exportedSymbols": [
         "countries",
         "Country",
-        "CountrySelect"
+        "CountrySelect",
+        "CountrySelectValue"
       ],
       "inputs": [
+        "aria-describedby",
+        "aria-label",
+        "clearable",
         "disabled",
+        "hideCheckIcon",
+        "id",
+        "multiple",
         "placeholder",
         "required",
         "searchTerm",
-        "showCountryCode"
+        "showCountryCode",
+        "tabIndex",
+        "value"
       ],
       "outputs": [
         "closed",
-        "opened"
+        "opened",
+        "selectionChange"
       ],
       "cssTokens": [
         "--ngs-color-neutral-500",
@@ -4346,6 +4364,18 @@
       "docsOverviewSource": "projects/docs/src/app/libraries/form-builder/overview/overview.html",
       "purpose": "The NgStarter Angular Form Builder library provides a drag-and-drop form designer, schema model, runtime renderer, and provider registration API for custom field types and field-specific settings.",
       "useWhen": "Choose Form Builder when the workflow matches examples such as Basic form builder, Custom field registration, Form builder renderer.",
+      "schemaFormat": [
+        "FormBuilderSchema shape: { title?: string; fields?: FormBuilderField[]; layout?: FormBuilderLayoutItem[]; sections: FormBuilderSection[] }.",
+        "Root-level fields live in schema.fields and can be placed outside sections. Sections live in schema.sections and contain section.fields. The optional schema.layout array controls top-level canvas order with items like { kind: \"field\" | \"section\", id }.",
+        "FormBuilderSection shape: { id: string; title: string; description?: string; collapsed?: boolean; fields: FormBuilderField[] }.",
+        "FormBuilderField shape: { id: string; name: string; type: string; kind?: \"field\" | \"layout\" | \"static\"; label: string; placeholder?: string; hint?: string; defaultValue?: any; width?: 1..12; multiple?: boolean; clearable?: boolean; required?: boolean; disabled?: boolean; readonly?: boolean; options?: FormBuilderOption[]; validation?: FormBuilderValidationRule[]; visibility?: { form?: boolean; email?: boolean; pdf?: boolean; condition?: string }; settings?: Record<string, any>; children?: FormBuilderField[] }.",
+        "Layout blocks are represented as fields with kind: \"layout\". The built-in group block uses type: \"group\", width: 12, and children: FormBuilderField[]. Section is a top-level FormBuilderSection, not a child field, and should not be nested inside another section/group.",
+        "Static blocks are represented as fields with kind: \"static\". The built-in spacer block uses type: \"spacer\", width: 12, and settings.height with one of 8, 16, 24, 32, 48, or 64.",
+        "Use width as a 12-column span. Default fields are 12 columns unless a narrower width is set. Nested children in group are sorted and rendered inside that group container.",
+        "Option fields use options entries { label: string; value: any; selected?: boolean }. For select, multiple controls array values; clearable enables the clear action. For radio, settings.orientation is \"vertical\" by default and can be \"horizontal\". Date and time fields include type: \"date\" for a single date, type: \"time\" for HH:mm time values, and type: \"date-range\" for a DateRange-like value with start/end dates. Upload fields use type: \"upload\", multiple for File[] values, and settings.accept for comma-separated MIME types such as \"*/*\" or \"image/*,application/pdf\". Upload handling can be provided with [uploadCallback] on ngs-form-builder/ngs-form-renderer or globally through provideFormBuilder({ uploadCallback }). The callback receives { field, control, event, files, fileList, multiple } and may return sync/async value stored in the form control.",
+        "Use <ngs-form-renderer> from @ngstarter-ui/components/form-builder to render a saved FormBuilderSchema as a runtime form. The Angular class export is FormBuilderRenderer.",
+        "Register custom placeholders through provideFormBuilder({ fields/items/settings }) using formBuilderField(), formBuilderItem(), and formBuilderSettings(). Custom field definitions can provide defaults, renderer, settings, validators, acceptsChildren, group, icon, and kind."
+      ],
       "exampleTopics": [
         "Basic form builder",
         "Custom field registration",
@@ -4369,7 +4399,7 @@
           "name": "form-builder-renderer-example",
           "title": "Form builder renderer",
           "file": "projects/docs/src/app/libraries/form-builder/_examples/form-builder-renderer-example/form-builder-renderer-example.html",
-          "source": "<div class=\"grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]\">\n  <ngs-form-builder-renderer\n    [schema]=\"schema\"\n    [(value)]=\"value\"\n    submitLabel=\"Save profile\"\n    (formSubmit)=\"submittedValue.set($event)\"/>\n  <ngs-card>\n    <ngs-card-header>\n      <ngs-card-title>Submitted value</ngs-card-title>\n    </ngs-card-header>\n    <ngs-card-content>\n      <pre>{{ submittedValue() || value() | json }}</pre>\n    </ngs-card-content>\n  </ngs-card>\n</div>"
+          "source": "<div class=\"grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]\">\n  <ngs-form-renderer\n    [schema]=\"schema\"\n    [(value)]=\"value\"\n    submitLabel=\"Save profile\"\n    (formSubmit)=\"submittedValue.set($event)\"/>\n  <ngs-card>\n    <ngs-card-header>\n      <ngs-card-title>Submitted value</ngs-card-title>\n    </ngs-card-header>\n    <ngs-card-content>\n      <pre>{{ submittedValue() || value() | json }}</pre>\n    </ngs-card-content>\n  </ngs-card>\n</div>"
         }
       ],
       "previewAsset": null,
@@ -4379,8 +4409,8 @@
         "ngs-basic-form-builder-section-settings",
         "ngs-form-builder",
         "ngs-form-builder-field-host",
-        "ngs-form-builder-renderer",
-        "ngs-form-builder-settings-host"
+        "ngs-form-builder-settings-host",
+        "ngs-form-renderer"
       ],
       "exportedSymbols": [
         "BasicFormBuilderFieldSettings",
@@ -4392,6 +4422,7 @@
         "FORM_BUILDER_FIELDS",
         "FORM_BUILDER_ITEMS",
         "FORM_BUILDER_SETTINGS",
+        "FORM_BUILDER_UPLOAD_CALLBACK",
         "FormBuilder",
         "FormBuilderComponentImporter",
         "formBuilderField",
@@ -4415,6 +4446,8 @@
         "FormBuilderSettingsContext",
         "FormBuilderSettingsDefinition",
         "FormBuilderSettingsHost",
+        "FormBuilderUploadCallback",
+        "FormBuilderUploadContext",
         "FormBuilderValidationRule",
         "FormBuilderVisibility",
         "provideFormBuilder",
@@ -4432,7 +4465,8 @@
         "section",
         "settingsDefinitions",
         "showSubmit",
-        "submitLabel"
+        "submitLabel",
+        "uploadCallback"
       ],
       "outputs": [
         "fieldAdded",
@@ -4452,6 +4486,7 @@
         "--ngs-color-surface",
         "--ngs-color-surface-container-low",
         "--ngs-color-surface-container-lowest",
+        "--ngs-field-radius",
         "--ngs-font-size-base",
         "--ngs-font-size-lg",
         "--ngs-font-size-sm",
@@ -4465,7 +4500,9 @@
         "--ngs-tree-node-drop-line-color",
         "--ngs-tree-node-drop-target-bg",
         "--ngs-tree-node-drop-target-outline",
-        "--ngs-tree-node-gap"
+        "--ngs-tree-node-gap",
+        "--ngs-upload-area-border-radius",
+        "--ngs-upload-area-padding"
       ],
       "example": null
     },
@@ -4570,100 +4607,6 @@
       ],
       "example": null
     },
-    {
-      "name": "form-renderer",
-      "title": "Form Renderer",
-      "overviewName": "Form Renderer",
-      "category": "libraries",
-      "package": "@ngstarter-ui/components",
-      "importPath": "@ngstarter-ui/components/form-renderer",
-      "publicApi": "projects/components/form-renderer/public-api.ts",
-      "sourceRoot": "projects/components/form-renderer/src",
-      "docsPath": "/libraries/form-renderer",
-      "docsOverviewSource": "projects/docs/src/app/libraries/form-renderer/overview/overview.html",
-      "purpose": "Render backend-driven or config-driven forms from a FormConfig.",
-      "useWhen": "Use when the backend or an admin configuration defines the form structure: dynamic settings, surveys, onboarding schemas, profile or config forms, CMS forms, tenant-specific forms, and feature-specific forms where fields can change without editing the Angular template. FormRenderer creates a FormGroup, renders fields from elements, places them through layout, applies validators and crossValidators, handles initialValue, visibleWhen, disabled state, content blocks, and emits valueChanges, formSubmit, and initialized. Do not use for ordinary static forms where fields are known in Angular code; build those manually with TailwindCSS grid/flex layout and one ngs-form-field per control. Do not use as a replacement for FormField, a wizard/stepper workflow, or an arbitrary page builder.",
-      "exampleTopics": [
-        "Basic form renderer"
-      ],
-      "minimalExample": "<ngs-form-renderer #formRenderer\n  [config]=\"formConfig()\"\n  [initialValue]=\"initialValue()\"\n  (valueChanges)=\"onValueChanges($event)\"\n  (formSubmit)=\"onFormSubmit($event)\" />\n<div class=\"mt-3\">\n  <button ngsButton=\"filled\" (click)=\"formRenderer.submit()\">Submit</button>\n</div>\n@if(submittedData()) {\n  <div class=\"font-bold mb-3 mt-6\">Submitted data:</div>\n  <pre>{{ submittedData() | json }}</pre>\n}",
-      "exampleFiles": [
-        {
-          "name": "basic-form-renderer-example",
-          "title": "Basic form renderer",
-          "file": "projects/docs/src/app/libraries/form-renderer/_examples/basic-form-renderer-example/basic-form-renderer-example.html",
-          "source": "<ngs-form-renderer #formRenderer\n  [config]=\"formConfig()\"\n  [initialValue]=\"initialValue()\"\n  (valueChanges)=\"onValueChanges($event)\"\n  (formSubmit)=\"onFormSubmit($event)\" />\n<div class=\"mt-3\">\n  <button ngsButton=\"filled\" (click)=\"formRenderer.submit()\">Submit</button>\n</div>\n@if(submittedData()) {\n  <div class=\"font-bold mb-3 mt-6\">Submitted data:</div>\n  <pre>{{ submittedData() | json }}</pre>\n}"
-        }
-      ],
-      "previewAsset": "projects/components/form-renderer/preview.svg",
-      "selectors": [
-        "ngs-autocomplete-many-field",
-        "ngs-checkbox-field",
-        "ngs-component-loader",
-        "ngs-datepicker-field",
-        "ngs-divider-content",
-        "ngs-form-renderer",
-        "ngs-image-content",
-        "ngs-input-field",
-        "ngs-radio-group-field",
-        "ngs-select-field",
-        "ngs-text-content",
-        "ngs-textarea-field",
-        "ngs-timezone-field",
-        "ngs-toggle-field"
-      ],
-      "exportedSymbols": [
-        "AutocompleteManyField",
-        "CheckboxField",
-        "ComponentConfig",
-        "ComponentImporter",
-        "ComponentLoader",
-        "ComponentNode",
-        "ComponentRegistryService",
-        "ContentConfig",
-        "CrossValidatorFn",
-        "DatepickerField",
-        "DividerContent",
-        "FORM_RENDERER_FIELD_REGISTRY",
-        "FormConfig",
-        "FormFieldConfig",
-        "FormGeneratorService",
-        "FormRenderer",
-        "GridNode",
-        "ImageContent",
-        "InputField",
-        "LayoutNode",
-        "RadioGroupField",
-        "SelectField",
-        "TextareaField",
-        "TextContent",
-        "TimezoneField",
-        "ToggleField",
-        "ValidatorConfig",
-        "ValidatorRegistryService"
-      ],
-      "inputs": [
-        "colspan",
-        "componentConfig",
-        "config",
-        "control"
-      ],
-      "outputs": [
-        "formSubmit",
-        "initialized",
-        "valueChanges"
-      ],
-      "cssTokens": [
-        "--ngs-color-outline-variant",
-        "--ngs-font-size-xs",
-        "--ngs-form-field-outlined-label-text-color",
-        "--ngs-form-field-outlined-label-text-size",
-        "--ngs-form-field-subscript-text-size",
-        "--ngs-form-field-subscript-text-tracking",
-        "--ngs-form-field-subscript-text-weight"
-      ],
-      "example": null
-    },
     {
       "name": "gauge",
       "title": "Gauge",
@@ -7533,6 +7476,7 @@
       "useWhen": "Use ngs-radio-group with ngs-radio-button for simple text options in forms, settings, filters, and preference screens where all options should be visible and the user can choose only one. Put value on each radio button and bind the group value with value, ngModel, or formControlName. Use name when native form grouping matters, disabled on the group or individual radio button when needed, and change when the screen must react to selection changes. Do not use Radio for multiple selection; use Checkbox. Do not use for long option lists; use Select or Autocomplete. Do not use for rich options with descriptions, icons, or large clickable blocks; use RadioCard. Do not use as a segmented view switcher; use Segmented or ButtonToggle. Do not use for yes/no boolean settings when SlideToggle or Checkbox better matches the meaning.",
       "exampleTopics": [
         "Basic Radios",
+        "Radio Orientation",
         "Radio Card",
         "Basic radio"
       ],
@@ -7549,6 +7493,12 @@
           "title": "Radio card",
           "file": "projects/docs/src/app/forms/radio/_examples/radio-card-example/radio-card-example.html",
           "source": "<form [formGroup]=\"form\">\n  <ngs-radio-card-group formControlName=\"privacy\">\n    <ngs-radio-card value=\"open\">\n      <ngs-radio-card-title>\n        <ngs-icon name=\"fluent:globe-24-regular\"/>\n        Open\n      </ngs-radio-card-title>\n      <ngs-radio-card-content>\n        Posts and community members are public and visible to search engines.\n      </ngs-radio-card-content>\n    </ngs-radio-card>\n    <ngs-radio-card value=\"closed\">\n      <ngs-radio-card-title>\n        <ngs-icon name=\"fluent:lock-closed-24-regular\"/>\n        Closed\n      </ngs-radio-card-title>\n      <ngs-radio-card-content>\n        Only members can view community members and posts. Content is not visible to search engines.\n      </ngs-radio-card-content>\n    </ngs-radio-card>\n  </ngs-radio-card-group>\n</form>\n<div class=\"mt-10\">\n  <p>\n    <button ngsButton=\"filled\" (click)=\"toggleDisabled()\">\n      {{ form.get('privacy')?.disabled ? 'Enable' : 'Disable' }} Control\n    </button>\n  </p>\n  <p>Control value: {{ form.get('privacy')?.value }}</p>\n</div>"
+        },
+        {
+          "name": "radio-orientation-example",
+          "title": "Radio orientation",
+          "file": "projects/docs/src/app/forms/radio/_examples/radio-orientation-example/radio-orientation-example.html",
+          "source": "<div class=\"grid gap-8 md:grid-cols-2\">\n  <div class=\"flex flex-col gap-4\">\n    <h4 class=\"text-sm font-medium\">Vertical</h4>\n    <ngs-radio-group orientation=\"vertical\" aria-label=\"Notification frequency\">\n      <ngs-radio-button value=\"instant\">Instant</ngs-radio-button>\n      <ngs-radio-button value=\"daily\">Daily summary</ngs-radio-button>\n      <ngs-radio-button value=\"weekly\">Weekly digest</ngs-radio-button>\n    </ngs-radio-group>\n  </div>\n  <div class=\"flex flex-col gap-4\">\n    <h4 class=\"text-sm font-medium\">Horizontal</h4>\n    <ngs-radio-group orientation=\"horizontal\" aria-label=\"Billing cycle\">\n      <ngs-radio-button value=\"monthly\">Monthly</ngs-radio-button>\n      <ngs-radio-button value=\"annual\">Annual</ngs-radio-button>\n    </ngs-radio-group>\n  </div>\n</div>"
         }
       ],
       "previewAsset": "projects/components/radio/preview.svg",
@@ -7558,13 +7508,15 @@
       ],
       "exportedSymbols": [
         "RadioButton",
-        "RadioGroup"
+        "RadioGroup",
+        "RadioGroupOrientation"
       ],
       "inputs": [
         "checked",
         "disabled",
         "id",
         "name",
+        "orientation",
         "value"
       ],
       "outputs": [
@@ -7583,7 +7535,8 @@
         "--ngs-radio-button-inner-circle-size",
         "--ngs-radio-button-label-color",
         "--ngs-radio-button-size",
-        "--ngs-radio-button-unchecked-color"
+        "--ngs-radio-button-unchecked-color",
+        "--ngs-radio-group-gap"
       ],
       "example": null
     },
@@ -8676,11 +8629,13 @@
       ],
       "previewAsset": "projects/components/slide-toggle/preview.svg",
       "selectors": [
-        "ngs-slide-toggle"
+        "ngs-slide-toggle",
+        "ngs-slide-toggle-group"
       ],
       "exportedSymbols": [
         "SlideToggle",
-        "SlideToggleChange"
+        "SlideToggleChange",
+        "SlideToggleGroup"
       ],
       "inputs": [
         "aria-describedby",
@@ -8708,6 +8663,7 @@
         "--ngs-color-surface-container-highest",
         "--ngs-slide-toggle-bar-checked-color",
         "--ngs-slide-toggle-bar-color",
+        "--ngs-slide-toggle-group-gap",
         "--ngs-slide-toggle-height",
         "--ngs-slide-toggle-thumb-checked-color",
         "--ngs-slide-toggle-thumb-color",
@@ -10923,7 +10879,7 @@
       "docsPath": "/libraries/visual-builder",
       "docsOverviewSource": "projects/docs/src/app/libraries/visual-builder/overview/overview.html",
       "purpose": "Experimental scaffold for a future no-code or low-code visual workspace.",
-      "useWhen": "Do not use ngs-visual-builder for production admin screens, dashboards, visual editors, page builders, or real no-code/low-code workflows yet. The current component is only a placeholder: it has no inputs, outputs, layout regions, canvas, drag and drop, inspector, persistence, or editable block model. Mention it only as an experimental scaffold for future visual builder work. Use ContentEditor for block-based CMS/page content, ImageDesigner for creative image composition, Tiles for editable dashboard widgets or config-driven dashboard renderers, Grid for static dashboard layouts, FormRenderer for backend-driven forms, KanbanBoard for workflow columns, and normal NgStarter layout/components for admin screens.",
+      "useWhen": "Do not use ngs-visual-builder for production admin screens, dashboards, visual editors, page builders, or real no-code/low-code workflows yet. The current component is only a placeholder: it has no inputs, outputs, layout regions, canvas, drag and drop, inspector, persistence, or editable block model. Mention it only as an experimental scaffold for future visual builder work. Use ContentEditor for block-based CMS/page content, ImageDesigner for creative image composition, Tiles for editable dashboard widgets or config-driven dashboard renderers, Grid for static dashboard layouts, Form Builder for schema-driven forms, KanbanBoard for workflow columns, and normal NgStarter layout/components for admin screens.",
       "exampleTopics": [
         "Visual Builder"
       ],

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

@@ -269,16 +269,22 @@ class CountrySelect {
     _renderer = inject(Renderer2);
     _formField = inject(FORM_FIELD, { optional: true });
     static nextId = 0;
-    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 */ []));
+    valueSignal = model(null, { ...(ngDevMode ? { debugName: "valueSignal" } : /* istanbul ignore next */ {}), alias: 'value' });
     _focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "_focusedSignal" }] : /* istanbul ignore next */ []));
     _touched = false;
+    idSignal = input(`ngs-country-select-${CountrySelect.nextId++}`, { ...(ngDevMode ? { debugName: "idSignal" } : /* istanbul ignore next */ {}), alias: 'id' });
     placeholderInputSignal = input('', { ...(ngDevMode ? { debugName: "placeholderInputSignal" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
     isRequiredSignal = model(false, { ...(ngDevMode ? { debugName: "isRequiredSignal" } : /* istanbul ignore next */ {}), alias: 'required' });
     isDisabledSignal = model(false, { ...(ngDevMode ? { debugName: "isDisabledSignal" } : /* istanbul ignore next */ {}), alias: 'disabled' });
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hideCheckIcon = input(false, { ...(ngDevMode ? { debugName: "hideCheckIcon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    clearable = input(false, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    tabIndex = input(0, { ...(ngDevMode ? { debugName: "tabIndex" } : /* istanbul ignore next */ {}), transform: (value) => value == null ? 0 : parseInt(value + '', 10) });
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     showCountryCode = input(false, { ...(ngDevMode ? { debugName: "showCountryCode" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     internalCountries = countries;
     filteredCountries = computed(() => {
@@ -294,9 +300,30 @@ class CountrySelect {
     visibleCountries = computed(() => {
         return this.filteredCountries().slice(0, this.visibleCountryCount());
     }, ...(ngDevMode ? [{ debugName: "visibleCountries" }] : /* istanbul ignore next */ []));
+    selectedCountryDisplays = computed(() => {
+        const value = this.valueSignal();
+        const selectedCodes = Array.isArray(value)
+            ? value
+            : value
+                ? [value]
+                : [];
+        return selectedCodes
+            .map((code) => this.internalCountries.find((country) => country.code === code))
+            .filter((country) => !!country);
+    }, ...(ngDevMode ? [{ debugName: "selectedCountryDisplays" }] : /* istanbul ignore next */ []));
     selectedCountryDisplay = computed(() => {
-        return this.internalCountries.find(c => c.code === this._valueSignal());
+        return this.selectedCountryDisplays()[0] ?? null;
     }, ...(ngDevMode ? [{ debugName: "selectedCountryDisplay" }] : /* istanbul ignore next */ []));
+    selectedCountriesText = computed(() => {
+        return this.selectedCountryDisplays()
+            .map((country) => {
+            if (this.showCountryCode()) {
+                return `${country.name} (${country.code})`;
+            }
+            return country.name;
+        })
+            .join(', ');
+    }, ...(ngDevMode ? [{ debugName: "selectedCountriesText" }] : /* istanbul ignore next */ []));
     ngsSelect = viewChild.required('ngsSelect');
     searchInput = viewChild.required('searchInput');
     fm = inject(FocusMonitor);
@@ -305,6 +332,7 @@ class CountrySelect {
     destroyRef = inject(DestroyRef);
     opened = output();
     closed = output();
+    selectionChange = output();
     onChangeFn = () => { };
     onTouchedFn = () => { };
     _countryRenderTimeout;
@@ -319,14 +347,20 @@ class CountrySelect {
             this.stateChanges.complete();
         });
         effect(() => {
-            this.onChangeFn(this._valueSignal());
+            this.onChangeFn(this.valueSignal());
         });
         effect(() => {
-            this._valueSignal();
+            this.valueSignal();
             this._focusedSignal();
             this.isRequiredSignal();
             this.isDisabledSignal();
             this.placeholderInputSignal();
+            this.multiple();
+            this.hideCheckIcon();
+            this.clearable();
+            this.ariaLabel();
+            this.tabIndex();
+            this.ariaDescribedby();
             this.ngControl?.control?.status;
             this.stateChanges.next();
         });
@@ -349,11 +383,14 @@ class CountrySelect {
     ngOnDestroy() {
         this.clearCountrySelectTimeouts();
     }
+    get id() {
+        return this.idSignal();
+    }
     get value() {
-        return this._valueSignal();
+        return this.valueSignal();
     }
     set value(val) {
-        this._valueSignal.set(val);
+        this.valueSignal.set(val);
     }
     get focused() {
         return this._focusedSignal() || (this.ngsSelect?.()?.panelOpen() ?? false);
@@ -391,10 +428,14 @@ class CountrySelect {
         this.isDisabledSignal.set(coerceBooleanProperty(dis));
     }
     get empty() {
-        return !this._valueSignal();
+        const value = this.valueSignal();
+        if (Array.isArray(value)) {
+            return value.length === 0;
+        }
+        return !value;
     }
     get shouldLabelFloat() {
-        return this._focusedSignal() || !this.empty;
+        return this.focused || !this.empty;
     }
     get errorState() {
         return !!(this.ngControl?.invalid && (this.ngControl?.touched || this._touched));
@@ -416,7 +457,7 @@ class CountrySelect {
         this.ngsSelect().open();
     }
     writeValue(value) {
-        this._valueSignal.set(value);
+        this.valueSignal.set(value);
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -434,6 +475,7 @@ class CountrySelect {
     onSelectionChange(event) {
         this.value = event.value;
         this.onTouchedFn();
+        this.selectionChange.emit(event);
     }
     clearSearch(event) {
         event.stopPropagation();
@@ -468,7 +510,8 @@ class CountrySelect {
     }
     getInitialVisibleCountryCount() {
         const countries = this.filteredCountries();
-        const selectedCountryCode = this._valueSignal();
+        const value = this.valueSignal();
+        const selectedCountryCode = Array.isArray(value) ? value[0] : value;
         if (!selectedCountryCode) {
             return CountrySelect.COUNTRY_RENDER_CHUNK_SIZE;
         }
@@ -509,12 +552,12 @@ class CountrySelect {
         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: [
+    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 }, valueSignal: { classPropertyName: "valueSignal", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, idSignal: { classPropertyName: "idSignal", publicName: "id", 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 }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, hideCheckIcon: { classPropertyName: "hideCheckIcon", publicName: "hideCheckIcon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, showCountryCode: { classPropertyName: "showCountryCode", publicName: "showCountryCode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange", valueSignal: "valueChange", isRequiredSignal: "requiredChange", isDisabledSignal: "disabledChange", opened: "opened", closed: "closed", selectionChange: "selectionChange" }, host: { listeners: { "focus": "onFocusIn()", "blur": "onFocusOut($event)" }, properties: { "class.floating": "shouldLabelFloat", "id": "id", "attr.tabindex": "disabled ? -1 : tabIndex()" }, 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=\"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"] }] });
+        ], 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  [id]=\"id + '-select'\"\n  [placeholder]=\"placeholder\"\n  [required]=\"isRequiredSignal()\"\n  [disabled]=\"isDisabledSignal()\"\n  [multiple]=\"multiple()\"\n  [hideCheckIcon]=\"hideCheckIcon()\"\n  [clearable]=\"clearable()\"\n  [aria-label]=\"ariaLabel()\"\n  [tabIndex]=\"tabIndex()\"\n  [aria-describedby]=\"ariaDescribedby()\">\n  <ngs-select-trigger class=\"select-trigger\">\n    @let selectedCountries = selectedCountryDisplays();\n    @if (selectedCountries.length === 1) {\n      @let selectedCountry = selectedCountries[0];\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    } @else if (selectedCountries.length > 1) {\n      <span class=\"ngs-select-trigger-content\">\n        <span class=\"ngs-select-trigger-text\">\n          {{ selectedCountriesText() }}\n        </span>\n      </span>\n    }\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,
@@ -536,11 +579,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         'class': 'ngs-country-select',
                         '[class.floating]': 'shouldLabelFloat',
                         '[id]': 'id',
-                        '[attr.tabindex]': 'disabled ? -1 : 0',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex()',
                         '(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=\"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"] }] } });
+                    }, template: "<ngs-select\n  #ngsSelect\n  [value]=\"value\"\n  (selectionChange)=\"onSelectionChange($event)\"\n  (opened)=\"onSelectOpened()\"\n  (closed)=\"onSelectClosed()\"\n  [id]=\"id + '-select'\"\n  [placeholder]=\"placeholder\"\n  [required]=\"isRequiredSignal()\"\n  [disabled]=\"isDisabledSignal()\"\n  [multiple]=\"multiple()\"\n  [hideCheckIcon]=\"hideCheckIcon()\"\n  [clearable]=\"clearable()\"\n  [aria-label]=\"ariaLabel()\"\n  [tabIndex]=\"tabIndex()\"\n  [aria-describedby]=\"ariaDescribedby()\">\n  <ngs-select-trigger class=\"select-trigger\">\n    @let selectedCountries = selectedCountryDisplays();\n    @if (selectedCountries.length === 1) {\n      @let selectedCountry = selectedCountries[0];\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    } @else if (selectedCountries.length > 1) {\n      <span class=\"ngs-select-trigger-content\">\n        <span class=\"ngs-select-trigger-text\">\n          {{ selectedCountriesText() }}\n        </span>\n      </span>\n    }\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"] }], valueSignal: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], idSignal: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], 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"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], hideCheckIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCheckIcon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], 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"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.