npm - @ngstarter-ui/components - Versions diffs - 21.0.49 → 21.0.51 - Mend

@ngstarter-ui/components 21.0.49 → 21.0.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/ai/component-registry.json CHANGED Viewed

@@ -3423,9 +3423,31 @@
       "docsPath": "/components/dialog",
       "docsOverviewSource": "projects/docs/src/app/components/dialog/overview/overview.html",
       "purpose": "Open custom focused modal workflows above the current page.",
-      "useWhen": "Use Dialog.open(ComponentOrTemplate, config) for forms, editing records, creating objects, settings, detail views, wizard-like steps, scrollable content, and custom modal workflows where users must complete or close the task before returning to the page. Structure custom dialog components with ngs-dialog-title, ngs-dialog-content, ngs-dialog-actions, DialogRef.close(...), ngs-dialog-close, and optional DIALOG_DATA. Use DialogConfig for data, sizing, disableClose, autofocus, backdrop, panel classes, and accessibility labels. Do not use for a short binary destructive confirmation; use Confirm. Do not use for global messages; use Announcement, Alert, or SnackBar. Do not use for mobile bottom action panels; use BottomSheet. Do not use for side inspectors, filters, or detail panels; use Drawer or SidePanel.",
+      "useWhen": "Use Dialog.open(ComponentOrTemplate, config) for forms, editing records, creating objects, settings, detail views, wizard-like steps, scrollable content, and custom modal workflows where users must complete or close the task before returning to the page. Structure custom dialog components with ngs-dialog-title, ngs-dialog-content, ngs-dialog-actions, DialogRef.close(...), ngs-dialog-close, and optional DIALOG_DATA. Use DialogConfig for data, sizing, disableClose, autofocus, backdrop, panel classes, accessibility labels, and showCloseButton when the dialog should render the built-in icon close button. Do not use for a short binary destructive confirmation; use Confirm. Do not use for global messages; use Announcement, Alert, or SnackBar. Do not use for mobile bottom action panels; use BottomSheet. Do not use for side inspectors, filters, or detail panels; use Drawer or SidePanel.",
+      "configOptions": [
+        "data",
+        "width",
+        "height",
+        "minWidth",
+        "minHeight",
+        "maxWidth",
+        "maxHeight",
+        "hasBackdrop",
+        "backdropClass",
+        "panelClass",
+        "disableClose",
+        "autoFocus",
+        "restoreFocus",
+        "ariaDescribedBy",
+        "ariaLabelledBy",
+        "ariaLabel",
+        "role",
+        "closeOnNavigation",
+        "showCloseButton"
+      ],
       "exampleTopics": [
         "Basic Dialog",
+        "Dialog Close",
         "Dialog With Scrollable Content",
         "Dialog Sizing (height, min-height)",
         "Dialog scrollable content",
@@ -3447,10 +3469,10 @@
           "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>What's your name?</ngs-label>\n  <input ngsInput [(ngModel)]=\"name\">\n</ngs-form-field>\n<div>\n  <button ngsButton=\"outlined\" (click)=\"openDialog()\">Pick one</button>\n</div>\n@if (animal) {\n  <p>You chose: <em>{{ animal }}</em></p>\n}"
         },
         {
-          "name": "dialog-scrollable-content",
-          "title": "Dialog scrollable content",
-          "file": "projects/docs/src/app/components/dialog/_examples/dialog-scrollable-content/dialog-scrollable-content.dialog.html",
-          "source": "<h3 ngs-dialog-title>Install Angular</h3>\n<ngs-dialog-content class=\"prose dark:prose-invert max-w-full\">\n  <h2>Develop across all platforms</h2>\n  <p>Learn one way to build applications with Angular and reuse your code and abilities to build\n    apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>\n  <h2>Speed &amp; Performance</h2>\n  <p>Achieve the maximum speed possible on the Web Platform today, and take it further, via Web\n    Workers and server-side rendering. Angular puts you in control over scalability. Meet huge\n    data requirements by building data models on RxJS, Immutable.js or another push-model.</p>\n  <h3>Incredible tooling</h3>\n  <p>Build features quickly with simple, declarative templates. Extend the template language with\n    your own components and use a wide array of existing components. Get immediate Angular-specific\n    help and feedback with nearly every IDE and editor. All this comes together so you can focus\n    on building amazing apps rather than trying to make the code work.</p>\n  <h3>Loved by millions</h3>\n  <p>From prototype through global deployment, Angular delivers the productivity and scalable\n    infrastructure that supports Google's largest applications.</p>\n  <h3>What is Angular?</h3>\n  <p>Angular is a platform that makes it easy to build applications with the web. Angular\n    combines declarative templates, dependency injection, end to end tooling, and integrated\n    best practices to solve development challenges. Angular empowers developers to build\n    applications that live on the web, mobile, or\n..."
+          "name": "dialog-close-example",
+          "title": "Dialog close",
+          "file": "projects/docs/src/app/components/dialog/_examples/dialog-close-example/dialog-close-example.html",
+          "source": "<button ngsButton=\"filled\" (click)=\"openDialog()\">Open close dialog</button>\n@if (result()) {\n  <p class=\"mt-3\">Result: {{ result() }}</p>\n}\n<ng-template #closeDialog>\n  <h3 ngs-dialog-title>Close dialog</h3>\n  <ngs-dialog-content>\n    <p>\n      This dialog enables the built-in close button through <code>showCloseButton</code>. Action\n      buttons can still use <code>ngs-dialog-close</code> to close the current dialog and optionally\n      return a result to the opener.\n    </p>\n  </ngs-dialog-content>\n  <ngs-dialog-actions align=\"end\">\n    <button ngsButton ngs-dialog-close>Cancel</button>\n    <button ngsButton=\"filled\" [ngs-dialog-close]=\"'Saved changes'\">Save</button>\n  </ngs-dialog-actions>\n</ng-template>"
         }
       ],
       "previewAsset": "projects/components/dialog/preview.svg",
@@ -3466,6 +3488,7 @@
         "ngs-dialog-actions",
         "ngs-dialog-container",
         "ngs-dialog-content",
+        "ngs-dialog-header",
         "ngs-dialog-title"
       ],
       "exportedSymbols": [
@@ -3477,6 +3500,7 @@
         "DialogConfig",
         "DialogContainer",
         "DialogContent",
+        "DialogHeader",
         "DialogRef",
         "DialogTitle"
       ],
@@ -4413,6 +4437,7 @@
         "ngs-form-builder",
         "ngs-form-builder-field-host",
         "ngs-form-builder-settings-host",
+        "ngs-form-logic",
         "ngs-form-renderer"
       ],
       "exportedSymbols": [
@@ -4429,6 +4454,7 @@
         "FORM_BUILDER_LAYOUT_BASE_SETTINGS_SCHEMA",
         "FORM_BUILDER_LAYOUT_CONTAINER_BASE_SETTINGS_SCHEMA",
         "FORM_BUILDER_SECTION_BASE_SETTINGS_SCHEMA",
+        "FORM_BUILDER_SELECT_DATA_SOURCES",
         "FORM_BUILDER_SETTINGS",
         "FORM_BUILDER_STATIC_BASE_SETTINGS_SCHEMA",
         "FORM_BUILDER_UPLOAD_CALLBACK",
@@ -4450,6 +4476,9 @@
         "FormBuilderSchema",
         "FormBuilderSection",
         "FormBuilderSectionSettingsContext",
+        "FormBuilderSelectDataSourceDefinition",
+        "FormBuilderSelectDataSourceOptions",
+        "FormBuilderSelectOptionsSource",
         "formBuilderSettings",
         "FormBuilderSettingsConfig",
         "FormBuilderSettingsContext",
@@ -4460,16 +4489,20 @@
         "FormBuilderUploadCallback",
         "FormBuilderUploadContext",
         "FormBuilderValidationRule",
+        "FormLogic",
         "FormRenderer",
         "provideFormBuilder",
         "provideFormBuilderField",
         "provideFormBuilderFields",
+        "provideFormBuilderSelectDataSource",
+        "provideFormBuilderSelectDataSources",
         "validatorsFromRules"
       ],
       "inputs": [
         "canvasDropPlaceholderDelay",
         "control",
         "definitions",
+        "description",
         "editableCanvas",
         "field",
         "inspectorTitle",
@@ -4480,6 +4513,7 @@
         "settingsDefinitions",
         "showSubmit",
         "submitLabel",
+        "title",
         "uploadCallback"
       ],
       "outputs": [
@@ -6029,6 +6063,7 @@
         "Menu With Icons",
         "Menu Divider",
         "Menu Heading",
+        "Data Driven Menu",
         "Menu Header & Footer",
         "Nested Menu",
         "Menu Positioning",
@@ -6051,10 +6086,10 @@
           "source": "<div class=\"w-[300px] h-[300px] p-10 rounded-2xl text-center border border-muted flex items-center justify-center\"\n     [ngsContextMenuTriggerFor]=\"contextMenu\">\n  Right click here to trigger a context menu\n</div>\n<ngs-menu #contextMenu>\n  <button ngs-menu-item>\n    <ngs-icon name=\"fluent:cut-24-regular\"/>\n    Cut\n  </button>\n  <button ngs-menu-item>\n    <ngs-icon name=\"fluent:copy-24-regular\"/>\n    Copy\n  </button>\n  <button ngs-menu-item>\n    <ngs-icon name=\"fluent:clipboard-text-24-regular\"/>\n    Paste\n  </button>\n  <button ngs-menu-item>\n    <ngs-icon name=\"fluent:print-24-regular\"/>\n    Print\n  </button>\n</ngs-menu>"
         },
         {
-          "name": "lazy-rendering-example",
-          "title": "Lazy rendering",
-          "file": "projects/docs/src/app/components/menu/_examples/lazy-rendering-example/lazy-rendering-example.html",
-          "source": "<ngs-menu #appMenu=\"ngsMenu\">\n  <ng-template ngsMenuContent let-name=\"name\">\n    <button ngs-menu-item>Settings</button>\n    <button ngs-menu-item>Log off {{name}}</button>\n  </ng-template>\n</ngs-menu>\n<button ngsIconButton [ngsMenuTriggerFor]=\"appMenu\" [ngsMenuTriggerData]=\"{name: 'Sally'}\">\n  <ngs-icon name=\"fluent:more-vertical-24-regular\"/>\n</button>\n<button ngsIconButton [ngsMenuTriggerFor]=\"appMenu\" [ngsMenuTriggerData]=\"{name: 'Bob'}\">\n  <ngs-icon name=\"fluent:more-vertical-24-regular\"/>\n</button>"
+          "name": "data-driven-menu-example",
+          "title": "Data driven menu",
+          "file": "projects/docs/src/app/components/menu/_examples/data-driven-menu-example/data-driven-menu-example.html",
+          "source": "<div class=\"flex flex-col items-start gap-3\">\n  <button ngsButton [ngsMenuTriggerFor]=\"projectMenu\">\n    Project actions\n  </button>\n  <span class=\"text-sm text-neutral-600\">{{ selectedAction() }}</span>\n</div>\n<ngs-menu #projectMenu=\"ngsMenu\">\n  @for (action of actions; track action.id) {\n    <button ngs-menu-item [disabled]=\"action.disabled ?? false\" (click)=\"selectAction(action)\">\n      <ngs-icon [name]=\"action.icon\"/>\n      <span>{{ action.label }}</span>\n    </button>\n  }\n</ngs-menu>"
         }
       ],
       "previewAsset": "projects/components/menu/preview.svg",
@@ -8007,10 +8042,12 @@
         "Multiple Selection",
         "Customizing the trigger label",
         "Select with search feature",
+        "Async Data Source",
         "Get set value",
         "Resetting value",
         "Custom trigger",
-        "Select search"
+        "Select search",
+        "Async data source select"
       ],
       "minimalExample": "<p>Basic ngs-select</p>\n<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Favorite food</ngs-label>\n  <ngs-select>\n    @for (food of foods; track food) {\n      <ngs-option [value]=\"food.value\">{{food.viewValue}}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>",
       "exampleFiles": [
@@ -8020,22 +8057,24 @@
           "file": "projects/docs/src/app/forms/select/_examples/basic-select-example/basic-select-example.html",
           "source": "<p>Basic ngs-select</p>\n<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Favorite food</ngs-label>\n  <ngs-select>\n    @for (food of foods; track food) {\n      <ngs-option [value]=\"food.value\">{{food.viewValue}}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>"
         },
+        {
+          "name": "async-data-source-select-example",
+          "title": "Async data source select",
+          "file": "projects/docs/src/app/forms/select/_examples/async-data-source-select-example/async-data-source-select-example.html",
+          "source": "<ngs-form-field class=\"w-full max-w-md\">\n  <ngs-label>Owner</ngs-label>\n  <ngs-select\n    [formControl]=\"owner\"\n    [dataSource]=\"usersDataSource\"\n    placeholder=\"Assign owner\"\n    searchable\n    clearable\n    [pageSize]=\"20\"\n    [searchDebounce]=\"150\">\n    <ng-template ngsOptionContentDef let-user let-label=\"label\">\n      <span class=\"flex min-w-0 flex-col\">\n        <span class=\"truncate\">{{ user.name }}</span>\n        <span class=\"truncate text-xs text-neutral-500\">{{ user.team }} - {{ label }}</span>\n      </span>\n    </ng-template>\n    <ng-template ngsSelectValueDef let-user>\n      {{ user.name }} - {{ user.team }}\n    </ng-template>\n  </ngs-select>\n</ngs-form-field>"
+        },
         {
           "name": "clearable-select-example",
           "title": "Clearable select",
           "file": "projects/docs/src/app/forms/select/_examples/clearable-select-example/clearable-select-example.html",
           "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Status</ngs-label>\n  <ngs-select [formControl]=\"status()\" clearable>\n    @for (statusOption of statuses(); track statusOption.value) {\n      <ngs-option [value]=\"statusOption.value\">{{ statusOption.label }}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>"
-        },
-        {
-          "name": "custom-trigger-example",
-          "title": "Custom trigger",
-          "file": "projects/docs/src/app/forms/select/_examples/custom-trigger-example/custom-trigger-example.html",
-          "source": "<ngs-form-field class=\"w-1/2\">\n  <ngs-label>Toppings</ngs-label>\n  <ngs-select [formControl]=\"toppings\" multiple>\n    <ngs-select-trigger>\n      {{ toppings.value?.[0] || '' }}\n      @if ((toppings.value?.length || 0) > 1) {\n        <span class=\"opacity-75 text-sm\">\n          (+{{ (toppings.value?.length || 0) - 1 }} {{ toppings.value?.length === 2 ? 'other' : 'others' }})\n        </span>\n      }\n    </ngs-select-trigger>\n    @for (topping of toppingList; track topping) {\n      <ngs-option [value]=\"topping\">{{topping}}</ngs-option>\n    }\n  </ngs-select>\n</ngs-form-field>"
         }
       ],
       "previewAsset": "projects/components/select/preview.svg",
       "selectors": [
         "ng-template[ngsFilterTriggerValue]",
+        "ng-template[ngsOptionContentDef]",
+        "ng-template[ngsSelectValueDef]",
         "ngs-filter-trigger",
         "ngs-select",
         "ngs-select-body",
@@ -8051,21 +8090,35 @@
         "SELECT",
         "SelectBody",
         "SelectChange",
+        "SelectDataSource",
+        "SelectDataSourceOption",
+        "SelectDataSourceRequest",
+        "SelectDataSourceResult",
         "SelectFooter",
         "SelectHeader",
-        "SelectTrigger"
+        "SelectOptionContentContext",
+        "SelectOptionContentDef",
+        "SelectTrigger",
+        "SelectValueContext",
+        "SelectValueDef"
       ],
       "inputs": [
         "aria-describedby",
         "aria-label",
         "clearable",
+        "dataSource",
         "disabled",
         "hideCheckIcon",
         "id",
+        "loadOnOpen",
         "maxCount",
+        "minSearchLength",
         "multiple",
+        "pageSize",
         "placeholder",
         "required",
+        "searchable",
+        "searchDebounce",
         "showZero",
         "tabIndex",
         "value"
@@ -8081,7 +8134,10 @@
         "--ngs-color-on-surface",
         "--ngs-color-on-surface-variant",
         "--ngs-color-outline",
+        "--ngs-color-outline-variant",
         "--ngs-color-primary",
+        "--ngs-color-surface-container-high",
+        "--ngs-color-surface-container-lowest",
         "--ngs-dropdown-bg",
         "--ngs-dropdown-border",
         "--ngs-dropdown-item-gap",
@@ -8106,6 +8162,7 @@
         "--ngs-filter-trigger-gap",
         "--ngs-filter-trigger-value-color",
         "--ngs-filter-trigger-value-font-weight",
+        "--ngs-font-size-sm",
         "--ngs-select-arrow-color",
         "--ngs-select-arrow-container-width",
         "--ngs-select-arrow-size",
@@ -8123,6 +8180,18 @@
         "--ngs-select-panel-max-height",
         "--ngs-select-panel-shadow",
         "--ngs-select-placeholder-color",
+        "--ngs-select-search-bg",
+        "--ngs-select-search-border",
+        "--ngs-select-search-color",
+        "--ngs-select-search-focus-border-color",
+        "--ngs-select-search-font-size",
+        "--ngs-select-search-height",
+        "--ngs-select-search-padding-inline",
+        "--ngs-select-state-action-color",
+        "--ngs-select-state-color",
+        "--ngs-select-state-font-size",
+        "--ngs-select-state-min-height",
+        "--ngs-select-state-padding",
         "--ngs-select-trigger-gap"
       ],
       "example": "<ngs-select [value]=\"value\">...</ngs-select>"
@@ -9251,6 +9320,7 @@
       "useWhen": "Use ngs-stepper with ngs-step when users must move through related steps and see their current progress. Good for onboarding, checkout, setup, import/export flows, account or tenant creation, review flows, and multi-step forms. Use linear mode with stepControl when each step must be valid before the user continues. Use ngsStepperNext and ngsStepperPrevious on NgStarter buttons for standard wizard navigation, ngsStepLabel or label for step labels, optional/completed/error states for step status, and horizontal or vertical orientation for responsive layouts. Do not use Stepper when you only need step state and validation logic without the default visual UI; use HeadlessStepper. Do not use for independent page sections; use Tabs or ExpansionPanel. Do not use for app route navigation; use Navigation, Breadcrumbs, Sidebar, or routing. Do not use for showing only a percentage; use ProgressBar. Do not use for product tours over existing UI; use GuidedTour.",
       "exampleTopics": [
         "Basic Stepper",
+        "Stepper In Dialog",
         "Stepper Vertical",
         "Stepper Header Position",
         "Stepper That Displays Errors In The Steps",
@@ -9273,10 +9343,10 @@
           "source": "<ngs-stepper headerPosition=\"bottom\" #stepper>\n  <ngs-step [stepControl]=\"firstFormGroup\">\n    <form [formGroup]=\"firstFormGroup\">\n      <ng-template ngsStepLabel>Fill out your name</ng-template>\n      <ngs-form-field class=\"w-1/2\">\n        <input ngsInput placeholder=\"Last name, First name\" formControlName=\"firstCtrl\" required>\n      </ngs-form-field>\n      <div>\n        <button ngsButton=\"filled\" ngsStepperNext>Next</button>\n      </div>\n    </form>\n  </ngs-step>\n  <ngs-step [stepControl]=\"secondFormGroup\" optional>\n    <form [formGroup]=\"secondFormGroup\">\n      <ng-template ngsStepLabel>Fill out your address</ng-template>\n      <ngs-form-field class=\"w-1/2\">\n        <input ngsInput placeholder=\"Address\" formControlName=\"secondCtrl\" required>\n      </ngs-form-field>\n      <div class=\"flex gap-3\">\n        <button ngsButton=\"outlined\" ngsStepperPrevious>Back</button>\n        <button ngsButton=\"filled\" ngsStepperNext>Next</button>\n      </div>\n    </form>\n  </ngs-step>\n  <ngs-step>\n    <ng-template ngsStepLabel>Done</ng-template>\n    You are now done.\n    <div class=\"flex gap-3\">\n      <button ngsButton=\"outlined\" ngsStepperPrevious>Back</button>\n      <button ngsButton=\"filled\" (click)=\"stepper.reset()\">Reset</button>\n    </div>\n  </ngs-step>\n</ngs-stepper>"
         },
         {
-          "name": "stepper-label-bottom-position-example",
-          "title": "Stepper label bottom position",
-          "file": "projects/docs/src/app/components/stepper/_examples/stepper-label-bottom-position-example/stepper-label-bottom-position-example.html",
-          "source": "<ngs-stepper labelPosition=\"bottom\" #stepper>\n  <ngs-step [stepControl]=\"firstFormGroup\">\n    <form [formGroup]=\"firstFormGroup\">\n      <ng-template ngsStepLabel>Fill out your name</ng-template>\n      <ngs-form-field class=\"w-1/2 mt-2\">\n        <ngs-label>Name</ngs-label>\n        <input ngsInput placeholder=\"Last name, First name\" formControlName=\"firstCtrl\" required>\n      </ngs-form-field>\n      <div>\n        <button ngsButton=\"filled\" ngsStepperNext>Next</button>\n      </div>\n    </form>\n  </ngs-step>\n  <ngs-step [stepControl]=\"secondFormGroup\" optional>\n    <form [formGroup]=\"secondFormGroup\">\n      <ng-template ngsStepLabel>Fill out your address</ng-template>\n      <ngs-form-field class=\"w-1/2 mt-2\">\n        <ngs-label>Address</ngs-label>\n        <input ngsInput formControlName=\"secondCtrl\" placeholder=\"Ex. 1 Main St, New York, NY\"\n               required>\n      </ngs-form-field>\n      <div class=\"flex gap-3\">\n        <button ngsButton=\"outlined\" ngsStepperPrevious>Back</button>\n        <button ngsButton=\"filled\" ngsStepperNext>Next</button>\n      </div>\n    </form>\n  </ngs-step>\n  <ngs-step>\n    <ng-template ngsStepLabel>Done</ng-template>\n    <p>You are now done.</p>\n    <div class=\"flex gap-3\">\n      <button ngsButton=\"outlined\" ngsStepperPrevious>Back</button>\n      <button ngsButton=\"filled\" (click)=\"stepper.reset()\">Reset</button>\n    </div>\n  </ngs-step>\n</ngs-stepper>"
+          "name": "stepper-in-dialog-example",
+          "title": "Stepper in dialog",
+          "file": "projects/docs/src/app/components/stepper/_examples/stepper-in-dialog-example/stepper-in-dialog-example.html",
+          "source": "<button ngsButton=\"filled\" (click)=\"openDialog()\">Open setup dialog</button>\n@if (result()) {\n  <p class=\"mt-3\">Result: {{ result() }}</p>\n}\n<ng-template #setupDialog>\n  <h3 ngs-dialog-title>Workspace setup</h3>\n  <ngs-dialog-content>\n    <ngs-stepper linear #stepper>\n      <ngs-step [stepControl]=\"workspaceForm\">\n        <ng-template ngsStepLabel>Workspace</ng-template>\n        <form [formGroup]=\"workspaceForm\" class=\"grid gap-4 md:grid-cols-2\">\n          <ngs-form-field>\n            <ngs-label>Workspace name</ngs-label>\n            <input\n              ngsInput\n              formControlName=\"workspaceName\"\n              placeholder=\"Atlas Operations\"\n              required\n            />\n          </ngs-form-field>\n          <ngs-form-field>\n            <ngs-label>Workspace slug</ngs-label>\n            <input ngsInput formControlName=\"slug\" placeholder=\"atlas-ops\" required />\n          </ngs-form-field>\n          <ngs-form-field>\n            <ngs-label>Region</ngs-label>\n            <input ngsInput formControlName=\"region\" placeholder=\"Europe / Warsaw\" required />\n          </ngs-form-field>\n          <ngs-form-field>\n            <ngs-label>Owner</ngs-label>\n            <input ngsInput formControlName=\"owner\" placeholder=\"Maya Chen\" required />\n          </ngs-form-field>\n          <ngs-form-field class=\"md:col-span-2\">\n            <ngs-label>Description</ngs-label>\n            <textarea\n              ngsInput\n              formControlName=\"description\"\n              placeholder=\"Describe what this workspace is used for\"\n              rows=\"4\"\n              required\n..."
         }
       ],
       "previewAsset": "projects/components/stepper/preview.svg",
@@ -9300,11 +9370,11 @@
       ],
       "outputs": [],
       "cssTokens": [
+        "--ngs-color-border",
         "--ngs-color-on-primary",
         "--ngs-color-on-success",
         "--ngs-color-on-surface",
         "--ngs-color-on-surface-variant",
-        "--ngs-color-outline-variant",
         "--ngs-color-primary",
         "--ngs-color-success",
         "--ngs-color-surface-container-high",

package/fesm2022/ngstarter-ui-components-confirm.mjs CHANGED Viewed

@@ -28,7 +28,7 @@ class Confirm {
     title = signal(this._data.title, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     description = signal(this._data.description, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Confirm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: Confirm, isStandalone: true, selector: "ngs-confirm", host: { classAttribute: "ngs-confirm" }, exportAs: ["ngsConfirm"], ngImport: i0, template: "<h3 ngs-dialog-title>{{ title() }}</h3>\n<ngs-dialog-content>\n  {{ description() }}\n</ngs-dialog-content>\n<ngs-dialog-actions align=\"end\">\n  <button ngsButton [ngs-dialog-close]=\"false\">Cancel</button>\n  <button ngsButton=\"filled\" [ngs-dialog-close]=\"true\">Confirm</button>\n</ngs-dialog-actions>\n", styles: [":host{display:block;width:500px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: DialogClose, selector: "[ngs-dialog-close], [ngsDialogClose]", inputs: ["ngs-dialog-close", "ngsDialogClose", "ariaLabel", "type"], exportAs: ["ngsDialogClose"] }, { kind: "component", type: DialogActions, selector: "ngs-dialog-actions, [ngs-dialog-actions], [ngsDialogActions]", inputs: ["align"] }, { kind: "component", type: DialogContent, selector: "ngs-dialog-content,[ngs-dialog-content],[ngsDialogContent]" }, { kind: "component", type: DialogTitle, selector: "ngs-dialog-title, [ngs-dialog-title], [ngsDialogTitle]", inputs: ["id"], exportAs: ["ngsDialogTitle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: Confirm, isStandalone: true, selector: "ngs-confirm", host: { classAttribute: "ngs-confirm" }, exportAs: ["ngsConfirm"], ngImport: i0, template: "<h3 ngs-dialog-title>{{ title() }}</h3>\n<ngs-dialog-content>\n  {{ description() }}\n</ngs-dialog-content>\n<ngs-dialog-actions align=\"end\">\n  <button ngsButton [ngs-dialog-close]=\"false\">Cancel</button>\n  <button ngsButton=\"filled\" [ngs-dialog-close]=\"true\">Confirm</button>\n</ngs-dialog-actions>\n", styles: [":host{display:block;width:500px}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: DialogClose, selector: "[ngs-dialog-close],[ngsDialogClose]", inputs: ["ngs-dialog-close", "ngsDialogClose", "ariaLabel", "type"], exportAs: ["ngsDialogClose"] }, { kind: "component", type: DialogActions, selector: "ngs-dialog-actions, [ngs-dialog-actions], [ngsDialogActions]", inputs: ["align"] }, { kind: "component", type: DialogContent, selector: "ngs-dialog-content,[ngs-dialog-content],[ngsDialogContent]" }, { kind: "component", type: DialogTitle, selector: "ngs-dialog-title, [ngs-dialog-title], [ngsDialogTitle]", inputs: ["id"], exportAs: ["ngsDialogTitle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Confirm, decorators: [{
             type: Component,

package/fesm2022/ngstarter-ui-components-confirm.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngstarter-ui-components-confirm.mjs","sources":["../../../projects/components/confirm/src/confirm-ref.ts","../../../projects/components/confirm/src/confirm/confirm.ts","../../../projects/components/confirm/src/confirm/confirm.html","../../../projects/components/confirm/src/confirm-manager.ts","../../../projects/components/confirm/ngstarter-ui-components-confirm.ts"],"sourcesContent":["import { EventEmitter } from '@angular/core';\n\nexport class ConfirmRef {\n readonly canceled = new EventEmitter();\n readonly confirmed = new EventEmitter();\n readonly closed = new EventEmitter();\n\n close(): void {\n this.closed.emit();\n }\n\n cancel(): void {\n this.canceled.emit();\n this.close();\n }\n\n confirm(): void {\n this.confirmed.emit();\n this.close();\n }\n}\n","import { Component, inject, signal } from '@angular/core';\nimport { DIALOG_DATA } from '@angular/cdk/dialog';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { Button } from '@ngstarter-ui/components/button';\nimport { DialogActions, DialogClose, DialogContent, DialogTitle } from '@ngstarter-ui/components/dialog';\n\n@Component({\n selector: 'ngs-confirm',\n exportAs: 'ngsConfirm',\n imports: [\n ReactiveFormsModule,\n Button,\n DialogClose,\n DialogActions,\n DialogContent,\n DialogTitle\n ],\n templateUrl: './confirm.html',\n styleUrl: './confirm.scss',\n host: {\n 'class': 'ngs-confirm'\n }\n})\nexport class Confirm {\n private _data = inject(DIALOG_DATA);\n\n title = signal(this._data.title);\n description = signal(this._data.description);\n}\n","<h3 ngs-dialog-title>{{ title() }}</h3>\n<ngs-dialog-content>\n {{ description() }}\n</ngs-dialog-content>\n<ngs-dialog-actions align=\"end\">\n <button ngsButton [ngs-dialog-close]=\"false\">Cancel</button>\n <button ngsButton=\"filled\" [ngs-dialog-close]=\"true\">Confirm</button>\n</ngs-dialog-actions>\n","import { DestroyRef, inject, Injectable } from '@angular/core';\nimport { ConfirmOptions } from './types';\nimport { ConfirmRef } from './confirm-ref';\nimport { Confirm } from './confirm/confirm';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { Dialog } from '@ngstarter-ui/components/dialog';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class ConfirmManager {\n private _dialog = inject(Dialog);\n private _destroyRef = inject(DestroyRef);\n\n open(options: ConfirmOptions): ConfirmRef {\n const confirmRef = new ConfirmRef();\n const dialogRef = this._dialog.open(Confirm, {\n data: options,\n closeOnNavigation: true,\n disableClose: true\n });\n dialogRef\n .afterClosed()\n .pipe(takeUntilDestroyed(this._destroyRef))\n .subscribe((isConfirmed: boolean) => {\n if (isConfirmed) {\n confirmRef.confirm();\n } else {\n confirmRef.cancel();\n }\n });\n return confirmRef;\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;MAEa,UAAU,CAAA;AACZ,IAAA,QAAQ,GAAG,IAAI,YAAY,EAAE;AAC7B,IAAA,SAAS,GAAG,IAAI,YAAY,EAAE;AAC9B,IAAA,MAAM,GAAG,IAAI,YAAY,EAAE;IAEpC,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACpB;IAEA,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;QACpB,IAAI,CAAC,KAAK,EAAE;IACd;IAEA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;QACrB,IAAI,CAAC,KAAK,EAAE;IACd;AACD;;MCGY,OAAO,CAAA;AACV,IAAA,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;IAEnC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;IAChC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;uGAJjC,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvBpB,yTAQA,EAAA,MAAA,EAAA,CAAA,uGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDEI,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACnB,MAAM,EAAA,QAAA,EAAA,mFAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,eAAA,EAAA,SAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,eAAA,EAAA,SAAA,EAAA,WAAA,EAAA,kBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACN,WAAW,EAAA,QAAA,EAAA,~~sCAAA~~,EAAA,MAAA,EAAA,CAAA,kBAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,MAAA,CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,aAAa,EAAA,QAAA,EAAA,8DAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACb,aAAa,uGACb,WAAW,EAAA,QAAA,EAAA,wDAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,QAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAQF,OAAO,EAAA,UAAA,EAAA,CAAA;kBAjBnB,SAAS;+BACE,aAAa,EAAA,QAAA,EACb,YAAY,EAAA,OAAA,EACb;wBACP,mBAAmB;wBACnB,MAAM;wBACN,WAAW;wBACX,aAAa;wBACb,aAAa;wBACb;qBACD,EAAA,IAAA,EAGK;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,yTAAA,EAAA,MAAA,EAAA,CAAA,uGAAA,CAAA,EAAA;;;MEXU,cAAc,CAAA;AACjB,IAAA,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC;AACxB,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;AAExC,IAAA,IAAI,CAAC,OAAuB,EAAA;AAC1B,QAAA,MAAM,UAAU,GAAG,IAAI,UAAU,EAAE;QACnC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;AAC3C,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,YAAY,EAAE;AACf,SAAA,CAAC;QACF;AACG,aAAA,WAAW;AACX,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC;AACzC,aAAA,SAAS,CAAC,CAAC,WAAoB,KAAI;YAClC,IAAI,WAAW,EAAE;gBACf,UAAU,CAAC,OAAO,EAAE;YACtB;iBAAO;gBACL,UAAU,CAAC,MAAM,EAAE;YACrB;AACF,QAAA,CAAC,CAAC;AACJ,QAAA,OAAO,UAAU;IACnB;uGAtBW,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAd,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,cAFb,MAAM,EAAA,CAAA;;2FAEP,cAAc,EAAA,UAAA,EAAA,CAAA;kBAH1B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE;AACb,iBAAA;;;ACTD;;AAEG;;;;"}
1	+ {"version":3,"file":"ngstarter-ui-components-confirm.mjs","sources":["../../../projects/components/confirm/src/confirm-ref.ts","../../../projects/components/confirm/src/confirm/confirm.ts","../../../projects/components/confirm/src/confirm/confirm.html","../../../projects/components/confirm/src/confirm-manager.ts","../../../projects/components/confirm/ngstarter-ui-components-confirm.ts"],"sourcesContent":["import { EventEmitter } from '@angular/core';\n\nexport class ConfirmRef {\n readonly canceled = new EventEmitter();\n readonly confirmed = new EventEmitter();\n readonly closed = new EventEmitter();\n\n close(): void {\n this.closed.emit();\n }\n\n cancel(): void {\n this.canceled.emit();\n this.close();\n }\n\n confirm(): void {\n this.confirmed.emit();\n this.close();\n }\n}\n","import { Component, inject, signal } from '@angular/core';\nimport { DIALOG_DATA } from '@angular/cdk/dialog';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { Button } from '@ngstarter-ui/components/button';\nimport { DialogActions, DialogClose, DialogContent, DialogTitle } from '@ngstarter-ui/components/dialog';\n\n@Component({\n selector: 'ngs-confirm',\n exportAs: 'ngsConfirm',\n imports: [\n ReactiveFormsModule,\n Button,\n DialogClose,\n DialogActions,\n DialogContent,\n DialogTitle\n ],\n templateUrl: './confirm.html',\n styleUrl: './confirm.scss',\n host: {\n 'class': 'ngs-confirm'\n }\n})\nexport class Confirm {\n private _data = inject(DIALOG_DATA);\n\n title = signal(this._data.title);\n description = signal(this._data.description);\n}\n","<h3 ngs-dialog-title>{{ title() }}</h3>\n<ngs-dialog-content>\n {{ description() }}\n</ngs-dialog-content>\n<ngs-dialog-actions align=\"end\">\n <button ngsButton [ngs-dialog-close]=\"false\">Cancel</button>\n <button ngsButton=\"filled\" [ngs-dialog-close]=\"true\">Confirm</button>\n</ngs-dialog-actions>\n","import { DestroyRef, inject, Injectable } from '@angular/core';\nimport { ConfirmOptions } from './types';\nimport { ConfirmRef } from './confirm-ref';\nimport { Confirm } from './confirm/confirm';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { Dialog } from '@ngstarter-ui/components/dialog';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class ConfirmManager {\n private _dialog = inject(Dialog);\n private _destroyRef = inject(DestroyRef);\n\n open(options: ConfirmOptions): ConfirmRef {\n const confirmRef = new ConfirmRef();\n const dialogRef = this._dialog.open(Confirm, {\n data: options,\n closeOnNavigation: true,\n disableClose: true\n });\n dialogRef\n .afterClosed()\n .pipe(takeUntilDestroyed(this._destroyRef))\n .subscribe((isConfirmed: boolean) => {\n if (isConfirmed) {\n confirmRef.confirm();\n } else {\n confirmRef.cancel();\n }\n });\n return confirmRef;\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

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

@@ -557,7 +557,7 @@ class CountrySelect {
                 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  [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"] }] });
+        ], 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", "dataSource", "pageSize", "searchable", "searchDebounce", "minSearchLength", "loadOnOpen", "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,