@luzmo/analytics-components-kit 1.0.1-alpha.10 → 1.0.1-alpha.100

package/LICENSE

@@ -1,6 +1,6 @@
 A kit of modern Luzmo Web Components for analytics in your web application.
 
-Copyright © 2024 Luzmo
+Copyright © 2025 Luzmo
 All rights reserved.
 Luzmo web components (“Luzmo Web Components”)
 must be used according to the Luzmo Terms of Service.

package/README.md

@@ -0,0 +1,195 @@
+# Luzmo Analytics Components Kit
+
+## Installation
+
+```bash
+npm install @luzmo/analytics-components-kit
+```
+
+```ts
+import '@luzmo/analytics-components-kit/draggable-data-item';
+import '@luzmo/analytics-components-kit/droppable-slot';
+import '@luzmo/analytics-components-kit/edit-item';
+```
+
+```html
+<luzmo-draggable-data-item></luzmo-draggable-data-item>
+<luzmo-droppable-slot></luzmo-droppable-slot>
+<luzmo-edit-item></luzmo-edit-item>
+```
+
+This repository is in alpha state. Do not use the web components in production.
+Expect breaking changes.
+
+## Dashboard Contents Version
+
+Needs to be used with dashboard contents version: 0.1.89
+
+## Browser Support
+
+Currently only supports evergreen browsers (Chrome, Firefox, Safari, Edge).
+
+## Working locally (standalone)
+The best way of working locally with this repo in a standalone mode (not integrating with any other project) is using Storybook.
+To do that be sure you ran `npm install` and then run the project in watch mode via `npm run dev` to finally run, in another terminal tab or instance, `npm run storybook`.
+
+## 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 (like axes, dimensions, measures, etc.).
+
+### Concept
+
+1. **Load datasets**: Use `loadDraggableItemsForDatasets()` to fetch datasets with their columns and formulas from the Luzmo API
+2. **Display draggable data items**: Render each column/formula as a `<luzmo-draggable-data-item>` component
+3. **Define droppable slots**: Create `<luzmo-droppable-slot>` components representing data slots of a Luzmo chart (e.g., 'Y-axis', 'Measure' and 'Legend' for a bar chart)
+4. **Handle drops on the slots**: On each `<luzmo-droppable-slot>`, listen to the `slot-contents-changed` event to capture data dropped into each slot
+5. **Use slot contents**: The slot contents are in the format expected by Luzmo charts and can be passed directly to the `slots` array of Luzmo Flex SDK visualization components.
+
+### Example Implementation
+
+#### TypeScript
+
+```ts
+import { loadDraggableItemsForDatasets } from '@luzmo/analytics-components-kit/utils';
+import type { DroppableSlotConfiguration } from '@luzmo/analytics-components-kit/droppable-slot';
+import type { GenericSlotContent } from '@luzmo/analytics-components-kit';
+import type { LuzmoDroppableSlot } from '@luzmo/analytics-components-kit/droppable-slot';
+import barChartSlotsConfig from '@luzmo/analytics-components-kit/item-definitions/bar-chart/bar-chart-slots.config';
+import '@luzmo/analytics-components-kit/draggable-data-item';
+import '@luzmo/analytics-components-kit/droppable-slot';
+
+// 1. Load specified datasets with their columns and formulas
+const datasets = await loadDraggableItemsForDatasets(
+  ['your-dataset-id'], 
+  {
+    dataBrokerConfig: {
+      apiUrl: 'https://api.luzmo.com',
+      authKey: 'your-auth-key',
+      authToken: 'your-auth-token'
+    }
+  }
+);
+
+// 2. Load slot configurations dynamically from bar chart config
+const slotConfigs: DroppableSlotConfiguration[] = barChartSlotsConfig;
+console.log('Available slots:', slotConfigs.map(s => s.name));
+// Output: ['measure', 'y-axis', 'legend']
+
+// 3. Handle slot content changes
+const slotContents = new Map<string, GenericSlotContent[]>();
+
+function handleSlotContentsChanged(event: CustomEvent<{ slotContents: GenericSlotContent[], linkedDatasetsIds: string[] }>) {
+  const slotName = (event.target as LuzmoDroppableSlot).slotName;
+  
+  // Store contents for this slot
+  if (slotName) {
+    slotContents.set(slotName, event.detail.slotContents);
+  }
+  
+  console.log(`Slot '${slotName}' updated:`, event.detail.slotContents);
+  
+  // slotContents can now be used to configure your chart
+  // It's in the format expected by Luzmo visualization components
+  console.log('All slot contents:', Object.fromEntries(slotContents));
+}
+
+// 4. Render the components (see HTML example below)
+```
+
+#### HTML
+
+```html
+<div class="chart-builder">
+  <!-- Left panel: Draggable data items -->
+  <div class="data-items-panel">
+    <h3>Available Data</h3>
+    <div id="draggable-items-container">
+      <!-- Dynamically populated with draggable items -->
+    </div>
+  </div>
+
+  <!-- Right panel: Droppable slots -->
+  <div class="chart-config-panel">
+    <h3>Bar Chart Configuration</h3>
+    <div id="droppable-slots-container">
+      <!-- Dynamically populated with droppable slots -->
+    </div>
+  </div>
+</div>
+
+<script type="module">
+  import { loadDraggableItemsForDatasets } from '@luzmo/analytics-components-kit/utils';
+  import barChartSlotsConfig from '@luzmo/analytics-components-kit/item-definitions/bar-chart/bar-chart-slots.config';
+
+  // Load and render draggable items
+  const datasets = await loadDraggableItemsForDatasets(
+    ['your-dataset-id'],
+    {
+      dataBrokerConfig: {
+        apiUrl: 'https://api.luzmo.com',
+        authKey: 'your-auth-key',
+        authToken: 'your-auth-token'
+      }
+    }
+  );
+
+  const itemsContainer = document.getElementById('draggable-items-container');
+  
+  datasets.forEach(dataset => {
+    // Add dataset label
+    const datasetLabel = document.createElement('h4');
+    datasetLabel.textContent = dataset.name.en || 'Dataset';
+    itemsContainer.appendChild(datasetLabel);
+
+    // Add draggable items for each column/formula
+    dataset.dataItems.forEach(dataItem => {
+      const draggableItem = document.createElement('luzmo-draggable-data-item');
+      draggableItem.data = dataItem;
+      draggableItem.size = 'm';
+      draggableItem.language = 'en';
+      itemsContainer.appendChild(draggableItem);
+    });
+  });
+
+  // Dynamically create droppable slots from bar chart config
+  const slotsContainer = document.getElementById('droppable-slots-container');
+  const slotContents = new Map();
+
+  barChartSlotsConfig.forEach(slotConfig => {
+    const slotWrapper = document.createElement('div');
+    slotWrapper.className = 'slot-wrapper';
+    
+    const slot = document.createElement('luzmo-droppable-slot');
+    slot.setAttribute('item-type', 'bar-chart');
+    slot.setAttribute('slot-name', slotConfig.name);
+    slot.setAttribute('label', slotConfig.label);
+    slot.setAttribute('size', 'm');
+    slot.setAttribute('language', 'en');
+    
+    // Pass the full configuration object
+    slot.slotConfiguration = slotConfig;
+    
+    // Handle slot content changes
+    slot.addEventListener('slot-contents-changed', (event) => {
+      slotContents.set(slotConfig.name, event.detail.slotContents);
+      console.log(`Slot '${slotConfig.name}' updated:`, event.detail);
+      console.log('All slot contents:', Object.fromEntries(slotContents));
+    });
+    
+    slotWrapper.appendChild(slot);
+    slotsContainer.appendChild(slotWrapper);
+  });
+</script>
+```
+
+### Key Points
+
+- **`loadDraggableItemsForDatasets()`** handles authentication, fetches datasets, and transforms them into the correct format for draggable items
+- **Chart slot configs** can be imported from `item-definitions/{chart-type}/{chart-type}-slots.config` to dynamically create appropriate drop zones
+- **`<luzmo-draggable-data-item>`** automatically handles drag behavior and displays columns/formulas with appropriate icons and hierarchy levels
+- **`<luzmo-droppable-slot>`** validates drops based on configuration (e.g., only numeric types for measures) and emits `slot-contents-changed` events
+- **Slot configurations** define validation rules like `canAcceptMultipleDataItems`, `canAcceptFormula`, and `acceptableDataItemTypes`
+- **Slot contents** returned from the event are already in the format expected by Luzmo chart components
+- The transformation from `DraggableDataItem` to `GenericSlotContent` happens automatically when dropping
+
+

package/angular/README.md

@@ -0,0 +1,59 @@
+# Luzmo Analytics Components - Angular wrappers
+
+> **Framework size: <2 kB per component (tree-shakeable)**
+
+This sub-package is generated automatically. Each wrapper is a thin
+layer produced by the internal `createComponent` helper which preserves the exact typing
+information of the underlying web component.
+
+## Installation
+
+```bash
+pnpm add @luzmo/analytics-components-kit @luzmo/analytics-components-kit-angular
+```
+
+## Usage (Angular 17+ standalone)
+
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AiChatMessageAssistantComponent } from '@luzmo/analytics-components-kit-angular';
+
+bootstrapApplication(AiChatMessageAssistantComponent);
+```
+
+## Available components
+- `AiChatMessageAssistantComponent` → <luzmo-ai-chat-message-assistant>
+- `AiChatMessageUserComponent` → <luzmo-ai-chat-message-user>
+- `AiChatMessagesContainerComponent` → <luzmo-ai-chat-messages-container>
+- `AiInteractionTextareaComponent` → <luzmo-ai-interaction-textarea>
+- `DataItemsSelectComponent` → <luzmo-data-items-select>
+- `DatasetIconComponent` → <luzmo-dataset-icon>
+- `DatasetSelectorListComponent` → <luzmo-dataset-selector-list>
+- `DatasetSelectorRowComponent` → <luzmo-dataset-selector-row>
+- `DisplaySettingsComponent` → <luzmo-display-settings>
+- `DisplaySettingsBinningComponent` → <luzmo-display-settings-binning>
+- `DisplaySettingsDatetimeComponent` → <luzmo-display-settings-datetime>
+- `DisplaySettingsGrandTotalsComponent` → <luzmo-display-settings-grand-totals>
+- `DisplaySettingsNumericComponent` → <luzmo-display-settings-numeric>
+- `DisplaySettingsPeriodOverPeriodComponent` → <luzmo-display-settings-period-over-period>
+- `DraggableDataItemComponent` → <luzmo-draggable-data-item>
+- `DraggableDataItemLevelComponent` → <luzmo-draggable-data-item-level>
+- `DroppableSlotComponent` → <luzmo-droppable-slot>
+- `EditFiltersComponent` → <luzmo-edit-filters>
+- `EditItemComponent` → <luzmo-edit-item>
+- `EditOptionComponent` → <luzmo-edit-option>
+- `EditOptionColorPickerComponent` → <luzmo-edit-option-color-picker>
+- `EditOptionColorRangeComponent` → <luzmo-edit-option-color-range>
+- `FilterExpressionPickerComponent` → <luzmo-filter-expression-picker>
+- `FilterItemComponent` → <luzmo-filter-item>
+- `FilterParameterPickerComponent` → <luzmo-filter-parameter-picker>
+- `FilterValuePickerComponent` → <luzmo-filter-value-picker>
+- `FilterValuePickerDatetimeComponent` → <luzmo-filter-value-picker-datetime>
+- `FilterValuePickerHierarchyComponent` → <luzmo-filter-value-picker-hierarchy>
+- `FilterValuePickerNumericComponent` → <luzmo-filter-value-picker-numeric>
+- `GridComponent` → <luzmo-grid>
+- `GridItemActionsMenuComponent` → <luzmo-grid-item-actions-menu>
+- `SlotContentsPickerComponent` → <luzmo-slot-contents-picker>
+- `SlotMenuComponent` → <luzmo-slot-menu>
+- `SlotMenuListComponent` → <luzmo-slot-menu-list>
+- `VizItemMenuComponent` → <luzmo-viz-item-menu>

package/angular/angular-core-stubs.d.ts

@@ -0,0 +1,33 @@
+declare module '@angular/core' {
+  // Runtime enums represented as const enums for compile-time evaluation
+  export enum ViewEncapsulation {
+    Emulated = 0,
+    None = 2,
+    ShadowDom = 3
+  }
+
+  export enum ChangeDetectionStrategy {
+    OnPush = 0,
+    Default = 1
+  }
+
+  export const CUSTOM_ELEMENTS_SCHEMA: any;
+
+  export function Component(meta: any): any;
+  export function Input(): any;
+  export function Output(): any;
+  export class EventEmitter<T = any> { emit(value?: T): void; }
+  export const ɵɵdefineComponent: any;
+  export const ɵɵdefineNgModule: any;
+  export const ɵɵdefineDirective: any;
+  export const ɵɵdefineInjector: any;
+  export const ɵɵdirectiveInject: any;
+  export const ɵɵelementStart: any;
+  export const ɵɵelementEnd: any;
+  export const ɵɵelement: any;
+  export const ɵɵtext: any;
+  export const ɵɵproperty: any;
+  export const ɵɵadvance: any;
+  export const ɵsetClassMetadata: any;
+  export const ɵɵlistener: any;
+}

package/angular/components/ai-chat-message-assistant.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { Placement } from '../types';
+
+@Component({
+  selector: 'luzmo-ai-chat-message-assistant',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-ai-chat-message-assistant
+        [attr.message]="message"
+        [attr.show-context-menu]="showContextMenu"
+        [attr.overlay-placement]="overlayPlacement"
+        (message-copied)="messageCopied.emit($event)"
+        (message-regenerate)="messageRegenerate.emit($event)"
+        (message-delete)="messageDelete.emit($event)">
+  <ng-content></ng-content>
+</luzmo-ai-chat-message-assistant>`
+})
+export class AiChatMessageAssistantComponent {
+  @Input() message?: string;
+  @Input() showContextMenu?: boolean;
+  @Input() overlayPlacement?: Placement;
+  @Output() messageCopied = new EventEmitter<CustomEvent>();
+  @Output() messageRegenerate = new EventEmitter<CustomEvent>();
+  @Output() messageDelete = new EventEmitter<CustomEvent>();
+}

package/angular/components/ai-chat-message-user.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-ai-chat-message-user',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-ai-chat-message-user
+        [attr.message]="message"
+>
+  <ng-content></ng-content>
+</luzmo-ai-chat-message-user>`
+})
+export class AiChatMessageUserComponent {
+  @Input() message?: string;
+
+}

package/angular/components/ai-chat-messages-container.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-ai-chat-messages-container',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-ai-chat-messages-container
+
+>
+  <ng-content></ng-content>
+</luzmo-ai-chat-messages-container>`
+})
+export class AiChatMessagesContainerComponent {
+
+
+}

package/angular/components/ai-interaction-textarea.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { Dataset } from '../types';
+
+@Component({
+  selector: 'luzmo-ai-interaction-textarea',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-ai-interaction-textarea
+        [attr.placeholder]="placeholder"
+        [attr.selectedDatasets]="selectedDatasets"
+        [attr.auth-key]="authKey"
+        [attr.auth-token]="authToken"
+        [attr.api-url]="apiUrl"
+        [attr.app-server]="appServer"
+        [attr.flag-opendata]="flagOpendata"
+        [attr.disabled]="disabled"
+        [attr.single-line]="singleLine"
+        [attr.hide-dataset-button]="hideDatasetButton"
+        [attr.is-generating]="isGenerating"
+        [attr.value]="value"
+        (prompt-submitted)="promptSubmitted.emit($event)">
+  <ng-content></ng-content>
+</luzmo-ai-interaction-textarea>`
+})
+export class AiInteractionTextareaComponent {
+  @Input() placeholder?: string;
+  @Input() selectedDatasets?: Dataset[];
+  @Input() authKey?: string;
+  @Input() authToken?: string;
+  @Input() apiUrl?: string;
+  @Input() appServer?: string;
+  @Input() flagOpendata?: boolean;
+  @Input() disabled?: boolean;
+  @Input() singleLine?: boolean;
+  @Input() hideDatasetButton?: boolean;
+  @Input() isGenerating?: boolean;
+  @Input() value?: string;
+  @Output() promptSubmitted = new EventEmitter<CustomEvent>();
+}

package/angular/components/data-items-select.component.ts

@@ -0,0 +1,67 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { DataItemExtended } from '../types';
+
+@Component({
+  selector: 'luzmo-data-items-select',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-data-items-select
+        [attr.language]="language"
+        [attr.content-language]="contentLanguage"
+        [attr.label]="label"
+        [attr.icons]="icons"
+        [attr.allow-empty]="allowEmpty"
+        [attr.placeholder]="placeholder"
+        [attr.selects]="selects"
+        [attr.data-item-ids]="dataItemIds"
+        [attr.loading]="loading"
+        [attr.invalid]="invalid"
+        [attr.clearable]="clearable"
+        [attr.pending]="pending"
+        [attr.disabled]="disabled"
+        [attr.placement]="placement"
+        [attr.datasetsDataItems]="datasetsDataItems"
+        [attr.size]="size"
+        [attr.autofocus]="autofocus"
+        [attr.tabIndex]="tabIndex"
+        (data-items-selected)="dataItemsSelected.emit($event)">
+  <ng-content></ng-content>
+</luzmo-data-items-select>`
+})
+export class DataItemsSelectComponent {
+  @Input() language?: string;
+  @Input() contentLanguage?: string;
+  @Input() label?: string;
+  @Input() icons?: 'none' | 'menu-only' | 'all';
+  @Input() allowEmpty?: boolean;
+  @Input() placeholder?: any;
+  @Input() selects?: 'single' | 'multiple';
+  @Input() dataItemIds?: string[];
+  @Input() loading?: boolean;
+  @Input() invalid?: boolean;
+  @Input() clearable?: boolean;
+  @Input() pending?: boolean;
+  @Input() disabled?: boolean;
+  @Input() placement?: | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end';
+  @Input() datasetsDataItems?: {
+    id: string;
+    name: { [key: string]: string };
+    columns: DataItemExtended[];
+    formulas: DataItemExtended[];
+  }[];
+  @Input() size?: any;
+  @Input() autofocus?: any;
+  @Input() tabIndex?: any;
+  @Output() dataItemsSelected = new EventEmitter<CustomEvent>();
+}

package/angular/components/dataset-icon.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { DatasetIcon } from '../types';
+
+@Component({
+  selector: 'luzmo-dataset-icon',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-dataset-icon
+        [attr.dataset]="dataset"
+        [attr.size]="size"
+        [attr.app-url]="appUrl"
+>
+  <ng-content></ng-content>
+</luzmo-dataset-icon>`
+})
+export class DatasetIconComponent {
+  @Input() dataset?: DatasetIcon;
+  @Input() size?: '16px' | '24px' | '32px' | '48px' | '64px';
+  @Input() appUrl?: string;
+
+}

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

@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-dataset-selector-list',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-dataset-selector-list
+        [attr.show-search]="showSearch"
+        [attr.search-placeholder]="searchPlaceholder"
+        [attr.no-datasets-message]="noDatasetsMessage"
+        [attr.auth-key]="authKey"
+        [attr.auth-token]="authToken"
+        [attr.api-url]="apiUrl"
+        [attr.app-server]="appServer"
+        [attr.flag-opendata]="flagOpendata"
+        (dataset-selected)="datasetSelected.emit($event)">
+  <ng-content></ng-content>
+</luzmo-dataset-selector-list>`
+})
+export class DatasetSelectorListComponent {
+  @Input() showSearch?: boolean;
+  @Input() searchPlaceholder?: string;
+  @Input() noDatasetsMessage?: string;
+  @Input() authKey?: string;
+  @Input() authToken?: string;
+  @Input() apiUrl?: string;
+  @Input() appServer?: string;
+  @Input() flagOpendata?: boolean;
+  @Output() datasetSelected = new EventEmitter<CustomEvent>();
+}

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

@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { Dataset } from '../types';
+
+@Component({
+  selector: 'luzmo-dataset-selector-row',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-dataset-selector-row
+        [attr.selectedDatasets]="selectedDatasets"
+        [attr.button-label]="buttonLabel"
+        [attr.auth-key]="authKey"
+        [attr.auth-token]="authToken"
+        [attr.api-url]="apiUrl"
+        [attr.app-server]="appServer"
+        [attr.flag-opendata]="flagOpendata"
+        [attr.disabled]="disabled"
+        (dataset-selected)="datasetSelected.emit($event)"
+        (dataset-removed)="datasetRemoved.emit($event)">
+  <ng-content></ng-content>
+</luzmo-dataset-selector-row>`
+})
+export class DatasetSelectorRowComponent {
+  @Input() selectedDatasets?: Dataset[];
+  @Input() buttonLabel?: string;
+  @Input() authKey?: string;
+  @Input() authToken?: string;
+  @Input() apiUrl?: string;
+  @Input() appServer?: string;
+  @Input() flagOpendata?: boolean;
+  @Input() disabled?: boolean;
+  @Output() datasetSelected = new EventEmitter<CustomEvent>();
+  @Output() datasetRemoved = new EventEmitter<CustomEvent>();
+}

package/angular/components/display-settings/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/angular/components/display-settings/types.ts

@@ -0,0 +1,6 @@
+import { GenericSlotContent } from '@luzmo/dashboard-contents-types';
+
+export interface InfoVisibilityChangedEventDetail {
+  isVisible: boolean;
+  slotContent: GenericSlotContent;
+}

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

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

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

@@ -0,0 +1,23 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { ElementSize, GenericSlotContent } from '../types';
+
+@Component({
+  selector: 'luzmo-display-settings-datetime',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-display-settings-datetime
+        [attr.language]="language"
+        [attr.contentLanguage]="contentLanguage"
+        [attr.size]="size"
+        [attr.slotContent]="slotContent"
+        (slot-content-changed)="slotContentChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-display-settings-datetime>`
+})
+export class DisplaySettingsDatetimeComponent {
+  @Input() language?: string;
+  @Input() contentLanguage?: string;
+  @Input() size?: ElementSize;
+  @Input() slotContent?: GenericSlotContent;
+  @Output() slotContentChanged = new EventEmitter<CustomEvent>();
+}

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

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

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

@@ -0,0 +1,27 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { MeasureColumnsItem } from '../types';
+
+@Component({
+  selector: 'luzmo-display-settings-numeric',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-display-settings-numeric
+        [attr.language]="language"
+        [attr.slotContent]="slotContent"
+        [attr.measureColumns]="measureColumns"
+        [attr.isAggregationDisabled]="isAggregationDisabled"
+        [attr.isCumulativeSumEnabled]="isCumulativeSumEnabled"
+        [attr.size]="size"
+        (slot-content-changed)="slotContentChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-display-settings-numeric>`
+})
+export class DisplaySettingsNumericComponent {
+  @Input() language?: string;
+  @Input() slotContent?: any;
+  @Input() measureColumns?: MeasureColumnsItem[];
+  @Input() isAggregationDisabled?: boolean;
+  @Input() isCumulativeSumEnabled?: boolean;
+  @Input() size?: any;
+  @Output() slotContentChanged = new EventEmitter<CustomEvent>();
+}