@ngstarter-ui/components 21.0.49 → 21.0.50

package/ai/component-registry.json

@@ -4429,6 +4429,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 +4451,9 @@
         "FormBuilderSchema",
         "FormBuilderSection",
         "FormBuilderSectionSettingsContext",
+        "FormBuilderSelectDataSourceDefinition",
+        "FormBuilderSelectDataSourceOptions",
+        "FormBuilderSelectOptionsSource",
         "formBuilderSettings",
         "FormBuilderSettingsConfig",
         "FormBuilderSettingsContext",
@@ -4464,6 +4468,8 @@
         "provideFormBuilder",
         "provideFormBuilderField",
         "provideFormBuilderFields",
+        "provideFormBuilderSelectDataSource",
+        "provideFormBuilderSelectDataSources",
         "validatorsFromRules"
       ],
       "inputs": [
@@ -6029,6 +6035,7 @@
         "Menu With Icons",
         "Menu Divider",
         "Menu Heading",
+        "Data Driven Menu",
         "Menu Header & Footer",
         "Nested Menu",
         "Menu Positioning",
@@ -6051,10 +6058,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 +8014,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 +8029,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 +8062,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 +8106,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 +8134,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 +8152,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>"

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

@@ -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,