@luzmo/analytics-components-kit 1.0.1-alpha.137 → 1.0.1-alpha.139

package/README.md

@@ -27,6 +27,7 @@ npm install @luzmo/analytics-components-kit
   - [Edit Components](#edit-components)
 - [Utilities](#utilities)
 - [Types](#types)
+- [Locale Management](#locale-management)
 - [Usage: Drag & Drop Data Flow](#usage-drag-drop-data-flow)
   - [Concept](#concept)
   - [Example Implementation](#example-implementation)
@@ -43,6 +44,7 @@ npm install @luzmo/analytics-components-kit
     - [Background Colors](#background-colors)
     - [Typography](#typography)
     - [Font Colors](#font-colors)
+    - [Scrollbars](#scrollbars)
     - [Primary Color](#primary-color)
     - [Secondary Color](#secondary-color)
     - [Semantic Colors](#semantic-colors)
@@ -73,11 +75,12 @@ npm install @luzmo/analytics-components-kit
 
 ### Data Components (Individual)
 
-| Component            | Import                                                 | Description                                             |
-| -------------------- | ------------------------------------------------------ | ------------------------------------------------------- |
-| Draggable Data Field | `@luzmo/analytics-components-kit/draggable-data-field` | Draggable representation of a dataset column or formula |
-| Droppable Slot       | `@luzmo/analytics-components-kit/droppable-slot`       | Drop target for data items in chart configuration       |
-| Slot Contents Picker | `@luzmo/analytics-components-kit/slot-contents-picker` | Picker-based slot content selection                     |
+| Component            | Import                                                 | Description                                                                                                                          |
+| -------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
+| Draggable Data Field | `@luzmo/analytics-components-kit/draggable-data-field` | Draggable representation of a dataset column or formula                                                                              |
+| Droppable Slot       | `@luzmo/analytics-components-kit/droppable-slot`       | Drop target for data items in chart configuration                                                                                    |
+| Slot Contents Picker | `@luzmo/analytics-components-kit/slot-contents-picker` | Picker-based slot content selection with expandable datetime/hierarchy sublevels                                                     |
+| Data Fields Select   | `@luzmo/analytics-components-kit/data-fields-select`   | Dropdown select for columns, saved formulas, and ad hoc formulas; datetime and hierarchy columns expand to show selectable sublevels |
 
 ### Filter Components
 
@@ -139,7 +142,12 @@ const chartOptions = itemTypes.map((item) => ({ label: item.label, value: item.t
 Import TypeScript types from the dedicated entrypoint:
 
 ```typescript
-import type { DatasetDataField, SlotContentsChangedEventDetail } from '@luzmo/analytics-components-kit/types';
+import type {
+  DatasetDataField,
+  AdHocFormulaFieldData,
+  AdHocFormulaInput,
+  SlotContentsChangedEventDetail
+} from '@luzmo/analytics-components-kit/types';
 import type { SlotConfig } from '@luzmo/dashboard-contents-types';
 ```
 
@@ -149,6 +157,38 @@ Runtime values are exported from the main package (or via `@luzmo/analytics-comp
 import { PeriodOverPeriodCondition } from '@luzmo/analytics-components-kit';
 ```
 
+## Locale Management
+
+Components support multiple languages via the `language` property. Supported locales: `en`, `nl`, `fr`, `de`, `es`.
+
+### Per-Component Language
+
+Set the `language` attribute on individual components:
+
+```html
+<luzmo-draggable-data-fields-panel language="nl"></luzmo-draggable-data-fields-panel>
+```
+
+### App-Wide Locale Control
+
+For app-wide locale control, import and call `setLocale` once at startup:
+
+```typescript
+import { setLocale } from '@luzmo/analytics-components-kit';
+
+// Set all components to Dutch
+setLocale('nl');
+```
+
+You can also query the current locale:
+
+```typescript
+import { getLocale, targetLocales } from '@luzmo/analytics-components-kit';
+
+console.log(getLocale()); // 'en'
+console.log(targetLocales); // ['de', 'es', 'fr', 'nl']
+```
+
 ## Usage: Drag & Drop Data Flow
 
 This library provides a complete drag-and-drop system for building Luzmo chart configurations. The flow consists of loading dataset columns/formulas as draggable items and dropping them into chart slots.
@@ -367,6 +407,18 @@ All components inherit global CSS variables defined on `html` / `:root`. Overrid
 | `--luzmo-font-color-down`         | `#111`    | Text color when pressed  |
 | `--luzmo-font-color-focus`        | `#333`    | Text color when focused  |
 
+#### Scrollbars
+
+| Variable                                   | Default                                    | Description                         |
+| ------------------------------------------ | ------------------------------------------ | ----------------------------------- |
+| `--luzmo-scrollbar-size`                   | `6px`                                      | Scrollbar size for WebKit browsers  |
+| `--luzmo-scrollbar-width`                  | `thin`                                     | Scrollbar width for Firefox         |
+| `--luzmo-scrollbar-track-background`       | `transparent`                              | Scrollbar track background          |
+| `--luzmo-scrollbar-track-border-radius`    | `var(--luzmo-border-radius-s)`             | Scrollbar track border radius       |
+| `--luzmo-scrollbar-thumb-background`       | `rgba(var(--luzmo-border-color-rgb), 0.3)` | Scrollbar thumb background          |
+| `--luzmo-scrollbar-thumb-border-radius`    | `var(--luzmo-border-radius-s)`             | Scrollbar thumb border radius       |
+| `--luzmo-scrollbar-thumb-hover-background` | `rgba(var(--luzmo-border-color-rgb), 0.4)` | Scrollbar thumb background on hover |
+
 #### Primary Color
 
 | Variable                        | Default       | Description                      |

package/angular/components/dataset-selector-list.component.ts

@@ -9,6 +9,7 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.show-search]="showSearch"
         [attr.search-placeholder]="searchPlaceholder"
         [attr.no-datasets-message]="noDatasetsMessage"
+        [attr.highlight-search-matches]="highlightSearchMatches"
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
         [attr.api-url]="apiUrl"
@@ -22,6 +23,7 @@ export class DatasetSelectorListComponent {
   @Input() showSearch?: boolean;
   @Input() searchPlaceholder?: string;
   @Input() noDatasetsMessage?: string;
+  @Input() highlightSearchMatches?: boolean;
   @Input() authKey?: string;
   @Input() authToken?: string;
   @Input() apiUrl?: string;

package/angular/components/display-settings-binning.component.ts

@@ -6,7 +6,6 @@ import type { GenericSlotContent } from '../types';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<luzmo-display-settings-binning
-        [attr.language]="language"
         [attr.slotContent]="slotContent"
         [attr.size]="size"
         (luzmo-slot-content-changed)="luzmoSlotContentChanged.emit($event)">
@@ -14,7 +13,6 @@ import type { GenericSlotContent } from '../types';
 </luzmo-display-settings-binning>`
 })
 export class DisplaySettingsBinningComponent {
-  @Input() language?: string;
   @Input() slotContent?: GenericSlotContent;
   @Input() size?: any;
   @Output() luzmoSlotContentChanged = new EventEmitter<CustomEvent>();

package/angular/components/display-settings-datetime.component.ts

@@ -6,7 +6,6 @@ import type { ElementSize, GenericSlotContent } from '../types';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<luzmo-display-settings-datetime
-        [attr.language]="language"
         [attr.contentLanguage]="contentLanguage"
         [attr.size]="size"
         [attr.slotContent]="slotContent"
@@ -15,7 +14,6 @@ import type { ElementSize, GenericSlotContent } from '../types';
 </luzmo-display-settings-datetime>`
 })
 export class DisplaySettingsDatetimeComponent {
-  @Input() language?: string;
   @Input() contentLanguage?: string;
   @Input() size?: ElementSize;
   @Input() slotContent?: GenericSlotContent;

package/angular/components/display-settings-grand-totals.component.ts

@@ -6,7 +6,6 @@ import type { GenericSlotContent } from '../types';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<luzmo-display-settings-grand-totals
-        [attr.language]="language"
         [attr.slotContent]="slotContent"
         [attr.size]="size"
         (luzmo-slot-content-changed)="luzmoSlotContentChanged.emit($event)">
@@ -14,7 +13,6 @@ import type { GenericSlotContent } from '../types';
 </luzmo-display-settings-grand-totals>`
 })
 export class DisplaySettingsGrandTotalsComponent {
-  @Input() language?: string;
   @Input() slotContent?: GenericSlotContent;
   @Input() size?: any;
   @Output() luzmoSlotContentChanged = new EventEmitter<CustomEvent>();

package/angular/components/display-settings-numeric.component.ts

@@ -6,7 +6,6 @@ import type { MeasureColumnsItem } from '../types';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<luzmo-display-settings-numeric
-        [attr.language]="language"
         [attr.measureColumns]="measureColumns"
         [attr.isAggregationDisabled]="isAggregationDisabled"
         [attr.isCumulativeSumEnabled]="isCumulativeSumEnabled"
@@ -16,7 +15,6 @@ import type { MeasureColumnsItem } from '../types';
 </luzmo-display-settings-numeric>`
 })
 export class DisplaySettingsNumericComponent {
-  @Input() language?: string;
   @Input() measureColumns?: MeasureColumnsItem[];
   @Input() isAggregationDisabled?: boolean;
   @Input() isCumulativeSumEnabled?: boolean;

package/angular/components/display-settings-period-over-period.component.ts

@@ -6,7 +6,6 @@ import type { PeriodOverPeriodCondition, Column } from '../types';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<luzmo-display-settings-period-over-period
-        [attr.language]="language"
         [attr.slot-content]="slotContent"
         [attr.period-over-period-type]="periodOverPeriodType"
         [attr.linked-dataset-datetime-columns]="linkedDatasetDatetimeColumns"
@@ -16,7 +15,6 @@ import type { PeriodOverPeriodCondition, Column } from '../types';
 </luzmo-display-settings-period-over-period>`
 })
 export class DisplaySettingsPeriodOverPeriodComponent {
-  @Input() language?: string;
   @Input() slotContent?: any;
   @Input() periodOverPeriodType?: PeriodOverPeriodCondition;
   @Input() linkedDatasetDatetimeColumns?: (Column & { datasetId: string })[];

package/angular/components/draggable-data-fields-panel.component.ts

@@ -9,7 +9,6 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.dataset-ids]="datasetIds"
         [attr.selected-dataset-id]="selectedDatasetId"
         [attr.dataset-picker]="datasetPicker"
-        [attr.language]="language"
         [attr.disabled]="disabled"
         [attr.pending]="pending"
         [attr.draggable-data-field-variant]="draggableDataFieldVariant"
@@ -34,7 +33,6 @@ export class DraggableDataFieldsPanelComponent {
   @Input() datasetIds?: string[];
   @Input() selectedDatasetId?: string;
   @Input() datasetPicker?: boolean;
-  @Input() language?: string;
   @Input() disabled?: boolean;
   @Input() pending?: boolean;
   @Input() draggableDataFieldVariant?: 'highlight' | 'normal';

package/angular/components/droppable-slot.component.ts

@@ -11,7 +11,6 @@ import type { VizItemType, SlotName, SlotConfig, VizItemSlot, Placement, InfoVis
         [attr.slotConfiguration]="slotConfiguration"
         [attr.slotsContents]="slotsContents"
         [attr.label]="label"
-        [attr.language]="language"
         [attr.drag-boundary]="dragBoundary"
         [attr.rotate]="rotate"
         [attr.api-url]="apiUrl"
@@ -36,7 +35,6 @@ export class DroppableSlotComponent {
   @Input() slotConfiguration?: SlotConfig;
   @Input() slotsContents?: VizItemSlot[];
   @Input() label?: string;
-  @Input() language?: string;
   @Input() dragBoundary?: string;
   @Input() rotate?: boolean;
   @Input() apiUrl?: string;

package/angular/components/edit-filters.component.ts

@@ -10,7 +10,6 @@ import type { ItemFilterGroup } from '../types';
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
         [attr.cache-time]="cacheTime"
-        [attr.language]="language"
         [attr.content-language]="contentLanguage"
         [attr.time-zone]="timeZone"
         [attr.dataset-ids]="datasetIds"
@@ -29,7 +28,6 @@ export class EditFiltersComponent {
   @Input() authKey?: string;
   @Input() authToken?: string;
   @Input() cacheTime?: number;
-  @Input() language?: string;
   @Input() contentLanguage?: string;
   @Input() timeZone?: string;
   @Input() datasetIds?: string[];

package/angular/components/filter-expression-picker.component.ts

@@ -6,7 +6,6 @@ import type { ColumnType, ColumnSubtype } from '../types';
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<luzmo-filter-expression-picker
-        [attr.language]="language"
         [attr.filter]="filter"
         [attr.has-label]="hasLabel"
         [attr.label]="label"
@@ -25,7 +24,6 @@ import type { ColumnType, ColumnSubtype } from '../types';
 </luzmo-filter-expression-picker>`
 })
 export class FilterExpressionPickerComponent {
-  @Input() language?: string;
   @Input() filter?: any;
   @Input() hasLabel?: boolean;
   @Input() label?: string;

package/angular/components/filter-item.component.ts

@@ -10,7 +10,6 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
         [attr.cache-time]="cacheTime"
-        [attr.language]="language"
         [attr.contentLanguage]="contentLanguage"
         [attr.time-zone]="timeZone"
         [attr.dataset-ids]="datasetIds"
@@ -28,7 +27,6 @@ export class FilterItemComponent {
   @Input() authKey?: string;
   @Input() authToken?: string;
   @Input() cacheTime?: number;
-  @Input() language?: string;
   @Input() contentLanguage?: string;
   @Input() timeZone?: string;
   @Input() datasetIds?: string[];

package/angular/components/filter-value-picker-datetime.component.ts

@@ -6,7 +6,6 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<luzmo-filter-value-picker-datetime
-        [attr.language]="language"
         [attr.content-language]="contentLanguage"
         [attr.time-zone]="timeZone"
         [attr.filter]="filter"
@@ -19,7 +18,6 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
 </luzmo-filter-value-picker-datetime>`
 })
 export class FilterValuePickerDatetimeComponent {
-  @Input() language?: string;
   @Input() contentLanguage?: string;
   @Input() timeZone?: string;
   @Input() filter?: any;

package/angular/components/filter-value-picker-hierarchy.component.ts

@@ -10,7 +10,6 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
         [attr.cache-time]="cacheTime"
-        [attr.language]="language"
         [attr.content-language]="contentLanguage"
         [attr.filter]="filter"
         [attr.size]="size"
@@ -26,7 +25,6 @@ export class FilterValuePickerHierarchyComponent {
   @Input() authKey?: string;
   @Input() authToken?: string;
   @Input() cacheTime?: number;
-  @Input() language?: string;
   @Input() contentLanguage?: string;
   @Input() filter?: any;
   @Input() size?: any;

package/angular/components/filter-value-picker-numeric.component.ts

@@ -10,7 +10,6 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
         [attr.cache-time]="cacheTime"
-        [attr.language]="language"
         [attr.content-language]="contentLanguage"
         [attr.filter]="filter"
         [attr.size]="size"
@@ -26,7 +25,6 @@ export class FilterValuePickerNumericComponent {
   @Input() authKey?: string;
   @Input() authToken?: string;
   @Input() cacheTime?: number;
-  @Input() language?: string;
   @Input() contentLanguage?: string;
   @Input() filter?: any;
   @Input() size?: any;

package/angular/components/filter-value-picker.component.ts

@@ -10,7 +10,6 @@ import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
         [attr.cache-time]="cacheTime"
-        [attr.language]="language"
         [attr.content-language]="contentLanguage"
         [attr.time-zone]="timeZone"
         [attr.value-type]="valueType"
@@ -28,7 +27,6 @@ export class FilterValuePickerComponent {
   @Input() authKey?: string;
   @Input() authToken?: string;
   @Input() cacheTime?: number;
-  @Input() language?: string;
   @Input() contentLanguage?: string;
   @Input() timeZone?: string;
   @Input() valueType?: 'hierarchy' | 'numeric' | 'datetime';

package/angular/components/grid-item-actions-menu.component.ts

@@ -8,7 +8,9 @@ import type { Placement, ActionGroup } from '../types';
   template: `<luzmo-grid-item-actions-menu
         [attr.placement]="placement"
         [attr.actions]="actions"
-        [attr.language]="language"
+        [attr.disabled]="disabled"
+        [attr.autofocus]="autofocus"
+        [attr.tabIndex]="tabIndex"
         (luzmo-grid-item-action)="luzmoGridItemAction.emit($event)">
   <ng-content></ng-content>
 </luzmo-grid-item-actions-menu>`
@@ -16,6 +18,8 @@ import type { Placement, ActionGroup } from '../types';
 export class GridItemActionsMenuComponent {
   @Input() placement?: Placement;
   @Input() actions?: ActionGroup[];
-  @Input() language?: string;
+  @Input() disabled?: any;
+  @Input() autofocus?: any;
+  @Input() tabIndex?: any;
   @Output() luzmoGridItemAction = new EventEmitter<CustomEvent>();
 }

package/angular/components/item-data-drop-panel.component.ts

@@ -7,7 +7,6 @@ import type { VizItemType, SlotConfig, SlotPositioningConfig, VizItemSlot, Place
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<luzmo-item-data-drop-panel
         [attr.item-type]="itemType"
-        [attr.language]="language"
         [attr.content-language]="contentLanguage"
         [attr.slotsConfiguration]="slotsConfiguration"
         [attr.positioningConfiguration]="positioningConfiguration"
@@ -31,7 +30,6 @@ import type { VizItemType, SlotConfig, SlotPositioningConfig, VizItemSlot, Place
 })
 export class ItemDataDropPanelComponent {
   @Input() itemType?: VizItemType | string;
-  @Input() language?: string;
   @Input() contentLanguage?: string;
   @Input() slotsConfiguration?: SlotConfig[];
   @Input() positioningConfiguration?: SlotPositioningConfig;

package/angular/components/item-data-picker-panel.component.ts

@@ -7,7 +7,6 @@ import type { VizItemType, SlotConfig, VizItemSlot, DatasetsDataFields, DatasetM
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<luzmo-item-data-picker-panel
         [attr.item-type]="itemType"
-        [attr.language]="language"
         [attr.content-language]="contentLanguage"
         [attr.slotsConfiguration]="slotsConfiguration"
         [attr.slotsContents]="slotsContents"
@@ -37,7 +36,6 @@ import type { VizItemType, SlotConfig, VizItemSlot, DatasetsDataFields, DatasetM
 })
 export class ItemDataPickerPanelComponent {
   @Input() itemType?: VizItemType | string;
-  @Input() language?: string;
   @Input() contentLanguage?: string;
   @Input() slotsConfiguration?: SlotConfig[];
   @Input() slotsContents?: VizItemSlot[];

package/angular/components/slot-contents-picker.component.ts

@@ -10,7 +10,6 @@ import type { VizItemType, SlotName, SlotConfig, SlotContent, DatasetsDataFields
         [attr.slot-name]="slotName"
         [attr.slotConfiguration]="slotConfiguration"
         [attr.slotContents]="slotContents"
-        [attr.language]="language"
         [attr.content-language]="contentLanguage"
         [attr.disabled]="disabled"
         [attr.grows]="grows"
@@ -36,7 +35,6 @@ export class SlotContentsPickerComponent {
   @Input() slotName?: SlotName;
   @Input() slotConfiguration?: SlotConfig;
   @Input() slotContents?: SlotContent[];
-  @Input() language?: string;
   @Input() contentLanguage?: string;
   @Input() disabled?: boolean;
   @Input() grows?: boolean;

package/angular/components/viz-item-menu.component.ts

@@ -7,7 +7,6 @@ import type { VizItemMenuButton } from '../types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<luzmo-viz-item-menu
         [attr.viz-item-id]="vizItemId"
-        [attr.language]="language"
         [attr.selected-button]="selectedButton"
         (selected-changed)="selectedChanged.emit($event)"
         (button-clicked)="buttonClicked.emit($event)"
@@ -17,7 +16,6 @@ import type { VizItemMenuButton } from '../types';
 })
 export class VizItemMenuComponent {
   @Input() vizItemId?: string;
-  @Input() language?: string;
   @Input() selectedButton?: VizItemMenuButton | null;
   @Output() selectedChanged = new EventEmitter<CustomEvent>();
   @Output() buttonClicked = new EventEmitter<CustomEvent>();

package/angular/esm/components/dataset-selector-list.component.d.ts

@@ -4,6 +4,7 @@ export declare class DatasetSelectorListComponent {
     showSearch?: boolean;
     searchPlaceholder?: string;
     noDatasetsMessage?: string;
+    highlightSearchMatches?: boolean;
     authKey?: string;
     authToken?: string;
     apiUrl?: string;
@@ -11,5 +12,5 @@ export declare class DatasetSelectorListComponent {
     flagOpendata?: boolean;
     datasetSelected: EventEmitter<CustomEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DatasetSelectorListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DatasetSelectorListComponent, "luzmo-dataset-selector-list", never, { "showSearch": { "alias": "showSearch"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "noDatasetsMessage": { "alias": "noDatasetsMessage"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "flagOpendata": { "alias": "flagOpendata"; "required": false; }; }, { "datasetSelected": "datasetSelected"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DatasetSelectorListComponent, "luzmo-dataset-selector-list", never, { "showSearch": { "alias": "showSearch"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "noDatasetsMessage": { "alias": "noDatasetsMessage"; "required": false; }; "highlightSearchMatches": { "alias": "highlightSearchMatches"; "required": false; }; "authKey": { "alias": "authKey"; "required": false; }; "authToken": { "alias": "authToken"; "required": false; }; "apiUrl": { "alias": "apiUrl"; "required": false; }; "appServer": { "alias": "appServer"; "required": false; }; "flagOpendata": { "alias": "flagOpendata"; "required": false; }; }, { "datasetSelected": "datasetSelected"; }, never, ["*"], true, never>;
 }

package/angular/esm/components/dataset-selector-list.component.js

@@ -4,6 +4,7 @@ export class DatasetSelectorListComponent {
     showSearch;
     searchPlaceholder;
     noDatasetsMessage;
+    highlightSearchMatches;
     authKey;
     authToken;
     apiUrl;
@@ -11,10 +12,11 @@ export class DatasetSelectorListComponent {
     flagOpendata;
     datasetSelected = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DatasetSelectorListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: DatasetSelectorListComponent, isStandalone: true, selector: "luzmo-dataset-selector-list", inputs: { showSearch: "showSearch", searchPlaceholder: "searchPlaceholder", noDatasetsMessage: "noDatasetsMessage", authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", flagOpendata: "flagOpendata" }, outputs: { datasetSelected: "datasetSelected" }, ngImport: i0, template: `<luzmo-dataset-selector-list
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: DatasetSelectorListComponent, isStandalone: true, selector: "luzmo-dataset-selector-list", inputs: { showSearch: "showSearch", searchPlaceholder: "searchPlaceholder", noDatasetsMessage: "noDatasetsMessage", highlightSearchMatches: "highlightSearchMatches", authKey: "authKey", authToken: "authToken", apiUrl: "apiUrl", appServer: "appServer", flagOpendata: "flagOpendata" }, outputs: { datasetSelected: "datasetSelected" }, ngImport: i0, template: `<luzmo-dataset-selector-list
         [attr.show-search]="showSearch"
         [attr.search-placeholder]="searchPlaceholder"
         [attr.no-datasets-message]="noDatasetsMessage"
+        [attr.highlight-search-matches]="highlightSearchMatches"
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
         [attr.api-url]="apiUrl"
@@ -22,7 +24,7 @@ export class DatasetSelectorListComponent {
         [attr.flag-opendata]="flagOpendata"
         (dataset-selected)="datasetSelected.emit($event)">
   <ng-content></ng-content>
-</luzmo-dataset-selector-list>`, isInline: true, dependencies: [{ kind: "component", type: DatasetSelectorListComponent, selector: "luzmo-dataset-selector-list", inputs: ["showSearch", "searchPlaceholder", "noDatasetsMessage", "authKey", "authToken", "apiUrl", "appServer", "flagOpendata"], outputs: ["datasetSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</luzmo-dataset-selector-list>`, isInline: true, dependencies: [{ kind: "component", type: DatasetSelectorListComponent, selector: "luzmo-dataset-selector-list", inputs: ["showSearch", "searchPlaceholder", "noDatasetsMessage", "highlightSearchMatches", "authKey", "authToken", "apiUrl", "appServer", "flagOpendata"], outputs: ["datasetSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DatasetSelectorListComponent, decorators: [{
             type: Component,
@@ -34,6 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
         [attr.show-search]="showSearch"
         [attr.search-placeholder]="searchPlaceholder"
         [attr.no-datasets-message]="noDatasetsMessage"
+        [attr.highlight-search-matches]="highlightSearchMatches"
         [attr.auth-key]="authKey"
         [attr.auth-token]="authToken"
         [attr.api-url]="apiUrl"
@@ -49,6 +52,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                 type: Input
             }], noDatasetsMessage: [{
                 type: Input
+            }], highlightSearchMatches: [{
+                type: Input
             }], authKey: [{
                 type: Input
             }], authToken: [{

package/angular/esm/components/display-settings-binning.component.d.ts

@@ -2,10 +2,9 @@ import { EventEmitter } from '@angular/core';
 import type { GenericSlotContent } from '../types';
 import * as i0 from "@angular/core";
 export declare class DisplaySettingsBinningComponent {
-    language?: string;
     slotContent?: GenericSlotContent;
     size?: any;
     luzmoSlotContentChanged: EventEmitter<CustomEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DisplaySettingsBinningComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DisplaySettingsBinningComponent, "luzmo-display-settings-binning", never, { "language": { "alias": "language"; "required": false; }; "slotContent": { "alias": "slotContent"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoSlotContentChanged": "luzmoSlotContentChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisplaySettingsBinningComponent, "luzmo-display-settings-binning", never, { "slotContent": { "alias": "slotContent"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "luzmoSlotContentChanged": "luzmoSlotContentChanged"; }, never, ["*"], true, never>;
 }

package/angular/esm/components/display-settings-binning.component.js

@@ -1,18 +1,16 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import * as i0 from "@angular/core";
 export class DisplaySettingsBinningComponent {
-    language;
     slotContent;
     size;
     luzmoSlotContentChanged = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DisplaySettingsBinningComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: DisplaySettingsBinningComponent, isStandalone: true, selector: "luzmo-display-settings-binning", inputs: { language: "language", slotContent: "slotContent", size: "size" }, outputs: { luzmoSlotContentChanged: "luzmoSlotContentChanged" }, ngImport: i0, template: `<luzmo-display-settings-binning
-        [attr.language]="language"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: DisplaySettingsBinningComponent, isStandalone: true, selector: "luzmo-display-settings-binning", inputs: { slotContent: "slotContent", size: "size" }, outputs: { luzmoSlotContentChanged: "luzmoSlotContentChanged" }, ngImport: i0, template: `<luzmo-display-settings-binning
         [attr.slotContent]="slotContent"
         [attr.size]="size"
         (luzmo-slot-content-changed)="luzmoSlotContentChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-display-settings-binning>`, isInline: true, dependencies: [{ kind: "component", type: DisplaySettingsBinningComponent, selector: "luzmo-display-settings-binning", inputs: ["language", "slotContent", "size"], outputs: ["luzmoSlotContentChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</luzmo-display-settings-binning>`, isInline: true, dependencies: [{ kind: "component", type: DisplaySettingsBinningComponent, selector: "luzmo-display-settings-binning", inputs: ["slotContent", "size"], outputs: ["luzmoSlotContentChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DisplaySettingsBinningComponent, decorators: [{
             type: Component,
@@ -21,16 +19,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<luzmo-display-settings-binning
-        [attr.language]="language"
         [attr.slotContent]="slotContent"
         [attr.size]="size"
         (luzmo-slot-content-changed)="luzmoSlotContentChanged.emit($event)">
   <ng-content></ng-content>
 </luzmo-display-settings-binning>`
                 }]
-        }], propDecorators: { language: [{
-                type: Input
-            }], slotContent: [{
+        }], propDecorators: { slotContent: [{
                 type: Input
             }], size: [{
                 type: Input

package/angular/esm/components/display-settings-datetime.component.d.ts

@@ -2,11 +2,10 @@ import { EventEmitter } from '@angular/core';
 import type { ElementSize, GenericSlotContent } from '../types';
 import * as i0 from "@angular/core";
 export declare class DisplaySettingsDatetimeComponent {
-    language?: string;
     contentLanguage?: string;
     size?: ElementSize;
     slotContent?: GenericSlotContent;
     luzmoSlotContentChanged: EventEmitter<CustomEvent<any>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DisplaySettingsDatetimeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DisplaySettingsDatetimeComponent, "luzmo-display-settings-datetime", never, { "language": { "alias": "language"; "required": false; }; "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "size": { "alias": "size"; "required": false; }; "slotContent": { "alias": "slotContent"; "required": false; }; }, { "luzmoSlotContentChanged": "luzmoSlotContentChanged"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisplaySettingsDatetimeComponent, "luzmo-display-settings-datetime", never, { "contentLanguage": { "alias": "contentLanguage"; "required": false; }; "size": { "alias": "size"; "required": false; }; "slotContent": { "alias": "slotContent"; "required": false; }; }, { "luzmoSlotContentChanged": "luzmoSlotContentChanged"; }, never, ["*"], true, never>;
 }

package/angular/esm/components/display-settings-datetime.component.js

@@ -1,20 +1,18 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import * as i0 from "@angular/core";
 export class DisplaySettingsDatetimeComponent {
-    language;
     contentLanguage;
     size;
     slotContent;
     luzmoSlotContentChanged = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DisplaySettingsDatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: DisplaySettingsDatetimeComponent, isStandalone: true, selector: "luzmo-display-settings-datetime", inputs: { language: "language", contentLanguage: "contentLanguage", size: "size", slotContent: "slotContent" }, outputs: { luzmoSlotContentChanged: "luzmoSlotContentChanged" }, ngImport: i0, template: `<luzmo-display-settings-datetime
-        [attr.language]="language"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", type: DisplaySettingsDatetimeComponent, isStandalone: true, selector: "luzmo-display-settings-datetime", inputs: { contentLanguage: "contentLanguage", size: "size", slotContent: "slotContent" }, outputs: { luzmoSlotContentChanged: "luzmoSlotContentChanged" }, ngImport: i0, template: `<luzmo-display-settings-datetime
         [attr.contentLanguage]="contentLanguage"
         [attr.size]="size"
         [attr.slotContent]="slotContent"
         (luzmo-slot-content-changed)="luzmoSlotContentChanged.emit($event)">
   <ng-content></ng-content>
-</luzmo-display-settings-datetime>`, isInline: true, dependencies: [{ kind: "component", type: DisplaySettingsDatetimeComponent, selector: "luzmo-display-settings-datetime", inputs: ["language", "contentLanguage", "size", "slotContent"], outputs: ["luzmoSlotContentChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+</luzmo-display-settings-datetime>`, isInline: true, dependencies: [{ kind: "component", type: DisplaySettingsDatetimeComponent, selector: "luzmo-display-settings-datetime", inputs: ["contentLanguage", "size", "slotContent"], outputs: ["luzmoSlotContentChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: DisplaySettingsDatetimeComponent, decorators: [{
             type: Component,
@@ -23,7 +21,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<luzmo-display-settings-datetime
-        [attr.language]="language"
         [attr.contentLanguage]="contentLanguage"
         [attr.size]="size"
         [attr.slotContent]="slotContent"
@@ -31,9 +28,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
   <ng-content></ng-content>
 </luzmo-display-settings-datetime>`
                 }]
-        }], propDecorators: { language: [{
-                type: Input
-            }], contentLanguage: [{
+        }], propDecorators: { contentLanguage: [{
                 type: Input
             }], size: [{
                 type: Input