@ngstarter-ui/components 21.0.40 → 21.0.42

package/ai/component-registry.json

@@ -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",
@@ -4375,6 +4393,8 @@
       "previewAsset": null,
       "selectors": [
         "ngs-basic-form-builder-field-settings",
+        "ngs-basic-form-builder-layout-settings",
+        "ngs-basic-form-builder-section-settings",
         "ngs-form-builder",
         "ngs-form-builder-field-host",
         "ngs-form-builder-renderer",
@@ -4382,9 +4402,13 @@
       ],
       "exportedSymbols": [
         "BasicFormBuilderFieldSettings",
+        "BasicFormBuilderLayoutSettings",
+        "BasicFormBuilderSectionSettings",
         "createDefaultFormBuilderSchema",
         "DEFAULT_FORM_BUILDER_FIELDS",
+        "DEFAULT_FORM_BUILDER_ITEMS",
         "FORM_BUILDER_FIELDS",
+        "FORM_BUILDER_ITEMS",
         "FORM_BUILDER_SETTINGS",
         "FormBuilder",
         "FormBuilderComponentImporter",
@@ -4394,12 +4418,17 @@
         "FormBuilderFieldDefinition",
         "FormBuilderFieldHost",
         "FormBuilderFieldRenderContext",
+        "FormBuilderFieldSettingsContext",
         "FormBuilderFieldWidth",
+        "formBuilderItem",
+        "FormBuilderItemDefinition",
+        "FormBuilderItemKind",
         "FormBuilderLayoutItem",
         "FormBuilderOption",
         "FormBuilderRenderer",
         "FormBuilderSchema",
         "FormBuilderSection",
+        "FormBuilderSectionSettingsContext",
         "formBuilderSettings",
         "FormBuilderSettingsContext",
         "FormBuilderSettingsDefinition",
@@ -4418,6 +4447,7 @@
         "paletteTitle",
         "readonly",
         "schema",
+        "section",
         "settingsDefinitions",
         "showSubmit",
         "submitLabel"
@@ -4429,7 +4459,6 @@
         "formReady"
       ],
       "cssTokens": [
-        "--ngs-button-height",
         "--ngs-card-padding",
         "--ngs-color-danger",
         "--ngs-color-on-primary-container",
@@ -4446,11 +4475,9 @@
         "--ngs-font-size-sm",
         "--ngs-font-size-xs",
         "--ngs-line-height-base",
-        "--ngs-radius-full",
         "--ngs-radius-lg",
         "--ngs-radius-md",
         "--ngs-radius-sm",
-        "--ngs-shadow-lg",
         "--ngs-state-focus-ring",
         "--ngs-tab-label-height",
         "--ngs-tree-node-drop-line-color",
@@ -7524,6 +7551,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"
       ],
@@ -7540,6 +7568,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",
@@ -7549,13 +7583,15 @@
       ],
       "exportedSymbols": [
         "RadioButton",
-        "RadioGroup"
+        "RadioGroup",
+        "RadioGroupOrientation"
       ],
       "inputs": [
         "checked",
         "disabled",
         "id",
         "name",
+        "orientation",
         "value"
       ],
       "outputs": [
@@ -7574,7 +7610,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
     },
@@ -8667,11 +8704,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",
@@ -8699,6 +8738,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",
@@ -10562,6 +10602,7 @@
         "ngsTreeNodePadding",
         "ngsTreeNodePaddingIndent",
         "ngsTreeNodeToggleRecursive",
+        "nodePaddingIndent",
         "recursive",
         "reorderOnDrop",
         "selectable",
@@ -10588,7 +10629,6 @@
         "--ngs-nav-item-height",
         "--ngs-nav-item-hover-bg",
         "--ngs-nav-item-hover-color",
-        "--ngs-nav-item-padding",
         "--ngs-nav-item-radius",
         "--ngs-shadow-md",
         "--ngs-tree-container-background-color",

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.