ngx-com 0.0.21 → 0.1.0

package/types/ngx-com-components-dropdown.d.ts

@@ -143,6 +143,8 @@ declare function generateDropdownId(prefix?: string): string;
 /**
  * Directive to mark a template as the custom option template.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-dropdown [options]="users()">
@@ -172,6 +174,8 @@ declare class ComDropdownOptionTpl<T> {
 /**
  * Directive to mark a template as the custom selected value template.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-dropdown [options]="users()">
@@ -203,6 +207,8 @@ declare class ComDropdownSelectedTpl<T> {
 /**
  * Directive to mark a template as the custom empty state template.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-dropdown [options]="users()" [searchable]="true">
@@ -230,6 +236,8 @@ declare class ComDropdownEmptyTpl {
 /**
  * Directive to mark a template as the custom group header template.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-dropdown [options]="users()" [groupBy]="groupByDepartment">
@@ -257,6 +265,8 @@ declare class ComDropdownGroupTpl {
 /**
  * Directive to mark a template as the custom tag template (multi-select mode).
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-dropdown [options]="users()" [multiple]="true">
@@ -322,7 +332,7 @@ type DropdownTriggerVariants = VariantProps<typeof dropdownTriggerVariants>;
 /**
  * CVA variants for the dropdown panel (overlay).
  *
- * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`, `--radius-overlay`
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border-subtle`, `--shadow-overlay`, `--radius-overlay`
  */
 declare const dropdownPanelVariants: (props?: {
     size?: DropdownSize;
@@ -456,6 +466,8 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     private readonly triggerRef;
     /** Reference to the panel template. */
     private readonly panelTemplateRef;
+    /** Reference to the virtual scroll viewport (when enabled). */
+    private readonly virtualViewport;
     /** Content query for custom option template. */
     protected readonly optionTemplate: Signal<ComDropdownOptionTpl<T> | undefined>;
     /** Content query for custom selected template. */
@@ -483,7 +495,7 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     /** Search input placeholder. */
     readonly searchPlaceholder: InputSignal<string>;
     /** Disable the dropdown. */
-    readonly disabled: InputSignal<boolean>;
+    readonly disabled: ModelSignal<boolean>;
     /** Mark as required. */
     readonly required: InputSignal<boolean>;
     /** Show clear button. */
@@ -514,6 +526,8 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     readonly searchDebounceMs: InputSignal<number>;
     /** Virtual scroll threshold. */
     readonly virtualScrollThreshold: InputSignal<number>;
+    /** Item size in pixels for virtual scrolling. */
+    readonly virtualScrollItemSize: InputSignal<number>;
     /** Maximum number of tags to display in multi-select mode. Set to null for no limit. */
     readonly maxVisibleTags: InputSignal<number | null>;
     /** Custom error state matcher for determining when to show errors. */
@@ -642,6 +656,8 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     protected selectOption(value: T): void;
     protected removeValue(value: T): void;
     protected trackByValue(item: T, _index: number): unknown;
+    /** Track function for virtual scroll options. */
+    protected trackByOption(_index: number, option: ComDropdownProcessedOption<T>): string;
     protected getGlobalIndex(groupKey: string, localIndex: number): number;
     private createOverlay;
     private destroyOverlay;
@@ -657,12 +673,14 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     private navigateOptions;
     private navigateToFirst;
     private navigateToLast;
+    /** Scrolls the active option into view, using virtual viewport or native scroll. */
+    private scrollActiveOptionIntoView;
     private selectActiveOption;
     private flattenGroupedOptions;
     private typeAhead;
     private announce;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComDropdown<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComDropdown<any>, "com-dropdown", ["comDropdown"], { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "filterWith": { "alias": "filterWith"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "searchDebounceMs": { "alias": "searchDebounceMs"; "required": false; "isSignal": true; }; "virtualScrollThreshold": { "alias": "virtualScrollThreshold"; "required": false; "isSignal": true; }; "maxVisibleTags": { "alias": "maxVisibleTags"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; }, ["optionTemplate", "selectedTemplate", "emptyTemplate", "groupTemplate", "tagTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDropdown<any>, "com-dropdown", ["comDropdown"], { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "filterWith": { "alias": "filterWith"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "searchDebounceMs": { "alias": "searchDebounceMs"; "required": false; "isSignal": true; }; "virtualScrollThreshold": { "alias": "virtualScrollThreshold"; "required": false; "isSignal": true; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; "isSignal": true; }; "maxVisibleTags": { "alias": "maxVisibleTags"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; }, ["optionTemplate", "selectedTemplate", "emptyTemplate", "groupTemplate", "tagTemplate"], never, true, never>;
 }
 
 /**
@@ -715,7 +733,7 @@ declare class ComDropdownOption<T> {
     protected readonly optionClasses: Signal<string>;
     /** Template context for custom option templates. */
     protected readonly templateContext: Signal<ComDropdownOptionContext<T>>;
-    protected onOptionClick(event: MouseEvent): void;
+    protected onOptionClick(event: Event): void;
     protected onMouseEnter(): void;
     /** Scrolls this option into view. */
     scrollIntoView(): void;

package/types/ngx-com-components-empty-state.d.ts

@@ -243,6 +243,8 @@ declare class ComEmptyStateDescription {
  * Apply to a container element. Place buttons inside.
  * Styling automatically adapts to the parent's `size` input.
  *
+ * @tokens none
+ *
  * @example Single action
  * ```html
  * <div comEmptyStateActions>

package/types/ngx-com-components-form-field.d.ts

@@ -20,7 +20,7 @@ import { VariantProps } from 'class-variance-authority';
  * }
  * ```
  */
-declare abstract class FormFieldControl<T = unknown> {
+declare abstract class FormFieldControl<_T = unknown> {
     /** The NgControl bound to this control (if any). */
     abstract readonly ngControl: NgControl | null;
     /** Whether the control is focused. */
@@ -47,6 +47,8 @@ declare abstract class FormFieldControl<T = unknown> {
  * The form field automatically associates this label with the inner control
  * and positions it appropriately based on appearance and float state.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-form-field>
@@ -542,6 +544,7 @@ declare class ComFormField {
     protected readonly subscriptClasses: Signal<string>;
     constructor();
     protected onContainerClick(event: MouseEvent): void;
+    protected onContainerActivate(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComFormField, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ComFormField, "com-form-field", ["comFormField"], { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "hideRequiredMarker": { "alias": "hideRequiredMarker"; "required": false; "isSignal": true; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["control", "inputDirective", "labelChild", "hintChildren", "errorChildren", "prefixChild", "suffixChild"], ["[comPrefix]", "[comLabel]", "*", "[comSuffix]", "[comError]", "[comHint]:not([align='end'])", "[comHint][align='end']"], true, never>;
 }

package/types/ngx-com-components-icon-lucide.d.ts

@@ -0,0 +1,32 @@
+import { Provider } from '@angular/core';
+import { LucideIconData, LucideIcons } from 'lucide-angular';
+import { ComIconData } from 'ngx-com/components/icon';
+
+/**
+ * Converts a single Lucide icon to the generic `ComIconData` format.
+ *
+ * Lucide's `LucideIconData` is `readonly [string, Record<string, string>][]`
+ * which is structurally identical to `ComIconData`. This function exists for
+ * type-level conversion and explicit intent.
+ */
+declare function fromLucideIcon(icon: LucideIconData): ComIconData;
+/**
+ * Registers Lucide icons for use with `com-icon`.
+ *
+ * Drop-in replacement for `provideComIcons` that accepts Lucide icon imports directly.
+ *
+ * @example Root-level (app.config.ts)
+ * ```ts
+ * import { provideComLucideIcons } from 'ngx-com/components/icon/lucide';
+ * import { ChevronRight, Star, Check } from 'lucide-angular';
+ *
+ * export const appConfig = {
+ *   providers: [
+ *     provideComLucideIcons({ ChevronRight, Star, Check })
+ *   ]
+ * };
+ * ```
+ */
+declare function provideComLucideIcons(icons: LucideIcons): Provider;
+
+export { fromLucideIcon, provideComLucideIcons };

package/types/ngx-com-components-icon.d.ts

@@ -1,8 +1,14 @@
 import * as i0 from '@angular/core';
 import { InputSignal, Signal, InjectionToken, Provider } from '@angular/core';
-import { LucideIconData, LucideIcons } from 'lucide-angular';
 import { VariantProps } from 'class-variance-authority';
 
+/** A single SVG element: [tagName, attributes]. */
+type ComIconNode = readonly [string, Readonly<Record<string, string | number>>];
+/** Icon data: array of SVG child elements rendered inside the `<svg>` wrapper. */
+type ComIconData = readonly ComIconNode[];
+/** Map of PascalCase icon names to their SVG data. */
+type ComIconMap = Record<string, ComIconData>;
+
 type IconColor = 'current' | 'primary' | 'accent' | 'warn' | 'success' | 'muted' | 'disabled';
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 declare const iconVariants: (props?: {
@@ -14,27 +20,30 @@ declare const ICON_SIZE_PX: Record<IconSize, number>;
 type IconVariants = VariantProps<typeof iconVariants>;
 
 /**
- * Icon component — renders Lucide icons with CVA-powered color and size variants.
+ * Icon component — renders SVG icons with CVA-powered color and size variants.
  *
  * Icons inherit `currentColor` by default, making them automatically match
  * surrounding text. Use the `color` input for semantic color variants that
  * respond to theme changes.
  *
+ * Icon data is vendor-agnostic — register icons via `provideComIcons` (raw SVG data)
+ * or `provideComLucideIcons` from `ngx-com/components/icon/lucide` (Lucide adapter).
+ *
  * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`,
  *         `--color-muted-foreground`, `--color-disabled-foreground`,
  *         `--size-icon-xs`, `--size-icon-sm`, `--size-icon-md`,
  *         `--size-icon-lg`, `--size-icon-xl`, `--size-icon-2xl`
  *
- * @example Basic usage (requires icon registration via provideComIcons)
+ * @example Basic usage (requires icon registration via provideComLucideIcons)
  * ```html
  * <com-icon name="star" />
  * <com-icon name="check" color="success" size="sm" />
  * <com-icon name="alert-triangle" color="warn" />
  * ```
  *
- * @example Direct icon reference (no provider needed)
+ * @example Direct icon data (no provider needed)
  * ```html
- * <com-icon [img]="StarIcon" color="accent" size="2xl" />
+ * <com-icon [img]="starIconData" color="accent" size="2xl" />
  * ```
  *
  * @example Accessible icon (not decorative)
@@ -50,12 +59,15 @@ type IconVariants = VariantProps<typeof iconVariants>;
  * ```
  */
 declare class ComIcon {
+    private readonly doc;
+    private readonly rd;
+    private readonly elRef;
     private readonly registry;
     private readonly _registrar;
-    /** Icon name in kebab-case (e.g. 'chevron-right'). Requires provideComIcons registration. */
+    /** Icon name in kebab-case (e.g. 'chevron-right'). Requires icon registration. */
     readonly name: InputSignal<string | undefined>;
-    /** Direct Lucide icon reference. Takes precedence over `name`. */
-    readonly img: InputSignal<LucideIconData | undefined>;
+    /** Direct icon data (SVG element tuples). Takes precedence over `name`. */
+    readonly img: InputSignal<ComIconData | undefined>;
     /** Semantic color variant. Defaults to 'current' (inherits from parent). */
     readonly color: InputSignal<IconColor>;
     /** Size variant. Defaults to 'lg' (24px). */
@@ -67,25 +79,30 @@ declare class ComIcon {
     /** Applies aria-label and removes aria-hidden. Use for meaningful icons. */
     readonly ariaLabel: InputSignal<string | undefined>;
     /** Resolves icon data from either `img` (direct ref) or `name` (registry lookup). */
-    protected readonly resolvedIcon: Signal<LucideIconData | undefined>;
+    protected readonly resolvedIcon: Signal<ComIconData | undefined>;
     protected readonly sizeInPx: Signal<number>;
+    protected readonly effectiveStrokeWidth: Signal<number>;
     protected readonly hostClasses: Signal<string>;
+    constructor();
+    /** Builds and inserts the SVG element, or clears the host if no icon data is available. */
+    private renderSvg;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComIcon, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ComIcon, "com-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "img": { "alias": "img"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "absoluteStrokeWidth": { "alias": "absoluteStrokeWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
- * Singleton registry for Lucide icons used by `com-icon`.
+ * Singleton registry for icons used by `com-icon`.
  *
- * Unlike lucide-angular's `LUCIDE_ICONS` token (which gets shadowed by child injectors),
- * this registry lives at root and merges all icons registered via `provideComIcons()`.
+ * Stores generic `ComIconData` (SVG element tuples) rather than any
+ * vendor-specific format. Use the Lucide adapter (`ngx-com/components/icon/lucide`)
+ * or register raw SVG data directly via `provideComIcons`.
  */
 declare class ComIconRegistry {
     private readonly icons;
     /** Merges the given icons into the registry. */
-    register(icons: LucideIcons): void;
+    register(icons: ComIconMap): void;
     /** Returns the icon data for the given PascalCase name, or `null` if not registered. */
-    get(name: string): LucideIconData | null;
+    get(name: string): ComIconData | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComIconRegistry, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ComIconRegistry>;
 }
@@ -99,42 +116,39 @@ declare class ComIconRegistry {
  */
 declare const COM_ICON_REGISTRAR: InjectionToken<void[]>;
 /**
- * Provides Lucide icons for use with `com-icon`.
+ * Provides icons for use with `com-icon`.
+ *
+ * Accepts generic `ComIconData` (SVG element tuples). For Lucide icons,
+ * use `provideComLucideIcons` from `ngx-com/components/icon/lucide` instead.
  *
  * Works at **all** injector levels: app root, lazy route, and component.
  * Icons are merged into the root-level `ComIconRegistry`, so multiple calls
  * accumulate rather than shadow.
  *
- * @example Root-level (app.config.ts)
+ * @example Root-level with raw SVG data
  * ```ts
  * import { provideComIcons } from 'ngx-com/components/icon';
- * import { ChevronRight, Star, Check, AlertTriangle } from 'lucide-angular';
+ *
+ * const myIcons = {
+ *   Star: [['polygon', { points: '12 2 15.09 6.26 ...' }]],
+ * };
  *
  * export const appConfig = {
- *   providers: [
- *     provideComIcons({ ChevronRight, Star, Check, AlertTriangle })
- *   ]
+ *   providers: [provideComIcons(myIcons)]
  * };
  * ```
  *
- * @example Lazy route adds more icons without losing root icons
+ * @example With Lucide adapter (recommended)
  * ```ts
- * // feature.routes.ts
- * export const routes: Routes = [{
- *   path: '',
- *   providers: [provideComIcons({ Settings, User })],
- *   component: FeatureComponent,
- * }];
- * ```
+ * import { provideComLucideIcons } from 'ngx-com/components/icon/lucide';
+ * import { Star, Check } from 'lucide-angular';
  *
- * @example Component-level registration for tree-shaking
- * ```ts
- * @Component({
- *   providers: [provideComIcons({ Trash2, Edit })],
- * })
+ * export const appConfig = {
+ *   providers: [provideComLucideIcons({ Star, Check })]
+ * };
  * ```
  */
-declare function provideComIcons(icons: LucideIcons): Provider;
+declare function provideComIcons(icons: ComIconMap): Provider;
 
 export { COM_ICON_REGISTRAR, ComIcon, ComIconRegistry, ICON_SIZE_PX, iconVariants, provideComIcons };
-export type { IconColor, IconSize, IconVariants };
+export type { ComIconData, ComIconMap, ComIconNode, IconColor, IconSize, IconVariants };

package/types/ngx-com-components-item.d.ts

@@ -12,6 +12,8 @@ import { VariantProps } from 'class-variance-authority';
  * Use this for custom avatars (with images or initials), bare icons,
  * custom images, or any other leading visual.
  *
+ * @tokens none
+ *
  * @example Custom avatar with image
  * ```html
  * <com-item title="Jane Doe" description="jane@example.com">
@@ -45,6 +47,8 @@ declare class ComItemLeading {
  * rich projected content. Use this when the title needs formatting,
  * links, or other custom markup.
  *
+ * @tokens none
+ *
  * @example Title with link
  * ```html
  * <com-item icon="link">
@@ -65,11 +69,13 @@ declare class ComItemTitle {
  * Content appears on the same line as the title, immediately after it.
  * Use this for badges, tags, status indicators, or other inline metadata.
  *
+ * @tokens none
+ *
  * @example Badge suffix
  * ```html
  * <com-item title="My BP datasource" description="View and manage configuration">
  *   <ng-template comItemSuffix>
- *     <span class="inline-flex items-center gap-1 rounded-pill border border-primary/30 bg-primary-subtle px-2 py-0.5 text-xs font-medium text-primary">
+ *     <span class="inline-flex items-center gap-1 rounded-pill border border-primary-border-subtle bg-primary-subtle px-2 py-0.5 text-xs font-medium text-primary">
  *       Bluetooth
  *     </span>
  *   </ng-template>
@@ -88,6 +94,8 @@ declare class ComItemSuffix {
  * with rich projected content. Use this when the description needs
  * formatting, code snippets, or other custom markup.
  *
+ * @tokens none
+ *
  * @example Description with code
  * ```html
  * <com-item title="API Key" icon="key">
@@ -110,6 +118,8 @@ declare class ComItemDescription {
  * action buttons, navigation chevrons, toggles, timestamps, or
  * any other trailing content.
  *
+ * @tokens none
+ *
  * @example Trailing chevron
  * ```html
  * <com-item title="Settings" icon="settings" [interactive]="true">
@@ -221,7 +231,7 @@ type ItemVariants = VariantProps<typeof itemVariants>;
  *   size="lg"
  * >
  *   <ng-template comItemSuffix>
- *     <span class="inline-flex items-center gap-1 rounded-pill border border-primary/30 bg-primary-subtle px-2 py-0.5 text-xs font-medium text-primary">
+ *     <span class="inline-flex items-center gap-1 rounded-pill border border-primary-border-subtle bg-primary-subtle px-2 py-0.5 text-xs font-medium text-primary">
  *       <com-icon name="bluetooth" size="xs" /> Bluetooth
  *     </span>
  *   </ng-template>