@luzmo/analytics-components-kit 1.0.1-alpha.8 → 1.0.1-alpha.80

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/angular/README.md

@@ -0,0 +1,51 @@
+# 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 { DisplaySettingsComponent } from '@luzmo/analytics-components-kit-angular';
+
+bootstrapApplication(DisplaySettingsComponent);
+```
+
+## Available components
+- `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>
+- `EditItemComponent` → <luzmo-edit-item>
+- `EditOptionComponent` → <luzmo-edit-option>
+- `EditOptionColorPickerComponent` → <luzmo-edit-option-color-picker>
+- `EditOptionColorRangeComponent` → <luzmo-edit-option-color-range>
+- `FilterDataItemPickerComponent` → <luzmo-filter-data-item-picker>
+- `FilterExpressionPickerComponent` → <luzmo-filter-expression-picker>
+- `FilterGroupComponent` → <luzmo-filter-group>
+- `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>

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/display-settings-binning.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@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?: any;
+  @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 } 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?: any;
+  @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';
+
+
+@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?: any;
+  @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';
+
+
+@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?: any[];
+  @Input() isAggregationDisabled?: boolean;
+  @Input() isCumulativeSumEnabled?: boolean;
+  @Input() size?: any;
+  @Output() slotContentChanged = new EventEmitter<CustomEvent>();
+}

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

@@ -0,0 +1,25 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { PeriodOverPeriodCondition, Column } from '../types';
+
+@Component({
+  selector: 'luzmo-display-settings-period-over-period',
+  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"
+        [attr.size]="size"
+        (slot-content-changed)="slotContentChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-display-settings-period-over-period>`
+})
+export class DisplaySettingsPeriodOverPeriodComponent {
+  @Input() language?: string;
+  @Input() slotContent?: any;
+  @Input() periodOverPeriodType?: PeriodOverPeriodCondition;
+  @Input() linkedDatasetDatetimeColumns?: (Column & { datasetId: string })[];
+  @Input() size?: any;
+  @Output() slotContentChanged = new EventEmitter<CustomEvent>();
+}

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

@@ -0,0 +1,45 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { PeriodOverPeriodCondition } from '../types';
+
+@Component({
+  selector: 'luzmo-display-settings',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-display-settings
+        [attr.language]="language"
+        [attr.content-language]="contentLanguage"
+        [attr.hide-display-settings]="hideDisplaySettings"
+        [attr.isBinningDisabled]="isBinningDisabled"
+        [attr.areDatetimeOptionsEnabled]="areDatetimeOptionsEnabled"
+        [attr.areGrandTotalsEnabled]="areGrandTotalsEnabled"
+        [attr.isAggregationDisabled]="isAggregationDisabled"
+        [attr.isCumulativeSumEnabled]="isCumulativeSumEnabled"
+        [attr.periodOverPeriodUiType]="periodOverPeriodUiType"
+        [attr.show-remove-button]="showRemoveButton"
+        [attr.slot-type]="slotType"
+        [attr.slotContent]="slotContent"
+        [attr.measureColumns]="measureColumns"
+        [attr.size]="size"
+        (slot-content-changed)="slotContentChanged.emit($event)"
+        (remove-slot-content)="removeSlotContent.emit($event)">
+  <ng-content></ng-content>
+</luzmo-display-settings>`
+})
+export class DisplaySettingsComponent {
+  @Input() language?: string;
+  @Input() contentLanguage?: string;
+  @Input() hideDisplaySettings?: boolean;
+  @Input() isBinningDisabled?: boolean;
+  @Input() areDatetimeOptionsEnabled?: boolean;
+  @Input() areGrandTotalsEnabled?: boolean;
+  @Input() isAggregationDisabled?: boolean;
+  @Input() isCumulativeSumEnabled?: boolean;
+  @Input() periodOverPeriodUiType?: PeriodOverPeriodCondition | null;
+  @Input() showRemoveButton?: boolean;
+  @Input() slotType?: string;
+  @Input() slotContent?: any;
+  @Input() measureColumns?: any[];
+  @Input() size?: any;
+  @Output() slotContentChanged = new EventEmitter<CustomEvent>();
+  @Output() removeSlotContent = new EventEmitter<CustomEvent>();
+}

package/angular/components/draggable-data-item-level.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-draggable-data-item-level',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-draggable-data-item-level
+        [attr.variant]="variant"
+        [attr.hide-type-icon]="hideTypeIcon"
+        [attr.sublevel]="sublevel"
+        [attr.language]="language"
+        [attr.disabled]="disabled"
+        [attr.label]="label"
+        [attr.description]="description"
+        [attr.secondary-icon-type]="secondaryIconType"
+        [attr.data]="data"
+        [attr.size]="size"
+        (data-item-dropped)="dataItemDropped.emit($event)"
+        (data-item-drag-started)="dataItemDragStarted.emit($event)">
+  <ng-content></ng-content>
+</luzmo-draggable-data-item-level>`
+})
+export class DraggableDataItemLevelComponent {
+  @Input() variant?: 'highlight' | 'normal';
+  @Input() hideTypeIcon?: boolean;
+  @Input() sublevel?: boolean;
+  @Input() language?: string;
+  @Input() disabled?: boolean;
+  @Input() label?: string;
+  @Input() description?: string;
+  @Input() secondaryIconType?: 'derived' | 'formula';
+  @Input() data?: any;
+  @Input() size?: any;
+  @Output() dataItemDropped = new EventEmitter<CustomEvent>();
+  @Output() dataItemDragStarted = new EventEmitter<CustomEvent>();
+}

package/angular/components/draggable-data-item.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-draggable-data-item',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-draggable-data-item
+        [attr.variant]="variant"
+        [attr.language]="language"
+        [attr.disabled]="disabled"
+        [attr.hide-sublevels]="hideSublevels"
+        [attr.hide-type-icon]="hideTypeIcon"
+        [attr.secondary-icon-type]="secondaryIconType"
+        [attr.label]="label"
+        [attr.description]="description"
+        [attr.data]="data"
+        [attr.size]="size"
+        (data-item-dropped)="dataItemDropped.emit($event)"
+        (data-item-drag-started)="dataItemDragStarted.emit($event)">
+  <ng-content></ng-content>
+</luzmo-draggable-data-item>`
+})
+export class DraggableDataItemComponent {
+  @Input() variant?: 'highlight' | 'normal';
+  @Input() language?: string;
+  @Input() disabled?: boolean;
+  @Input() hideSublevels?: boolean;
+  @Input() hideTypeIcon?: boolean;
+  @Input() secondaryIconType?: 'derived' | 'formula';
+  @Input() label?: string;
+  @Input() description?: string;
+  @Input() data?: any;
+  @Input() size?: any;
+  @Output() dataItemDropped = new EventEmitter<CustomEvent>();
+  @Output() dataItemDragStarted = new EventEmitter<CustomEvent>();
+}

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

@@ -0,0 +1,51 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { ItemType, SlotName, VizItemSlots, Placement } from '../types';
+
+@Component({
+  selector: 'luzmo-droppable-slot',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-droppable-slot
+        [attr.item-type]="itemType"
+        [attr.slot-name]="slotName"
+        [attr.slotConfiguration]="slotConfiguration"
+        [attr.slotsContents]="slotsContents"
+        [attr.label]="label"
+        [attr.language]="language"
+        [attr.drag-boundary]="dragBoundary"
+        [attr.api-url]="apiUrl"
+        [attr.auth-key]="authKey"
+        [attr.auth-token]="authToken"
+        [attr.menu]="menu"
+        [attr.placement]="placement"
+        [attr.hide-delete]="hideDelete"
+        [attr.hide-configuration]="hideConfiguration"
+        [attr.size]="size"
+        (slot-menu-inactive)="slotMenuInactive.emit($event)"
+        (slot-menu-active)="slotMenuActive.emit($event)"
+        (slot-menu-highlight)="slotMenuHighlight.emit($event)"
+        (slot-contents-changed)="slotContentsChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-droppable-slot>`
+})
+export class DroppableSlotComponent {
+  @Input() itemType?: ItemType;
+  @Input() slotName?: SlotName;
+  @Input() slotConfiguration?: any;
+  @Input() slotsContents?: VizItemSlots;
+  @Input() label?: string;
+  @Input() language?: string;
+  @Input() dragBoundary?: string;
+  @Input() apiUrl?: string;
+  @Input() authKey?: string;
+  @Input() authToken?: string;
+  @Input() menu?: 'default' | 'draggable' | 'event-only';
+  @Input() placement?: Placement;
+  @Input() hideDelete?: boolean;
+  @Input() hideConfiguration?: boolean;
+  @Input() size?: any;
+  @Output() slotMenuInactive = new EventEmitter<CustomEvent>();
+  @Output() slotMenuActive = new EventEmitter<CustomEvent>();
+  @Output() slotMenuHighlight = new EventEmitter<CustomEvent>();
+  @Output() slotContentsChanged = new EventEmitter<CustomEvent>();
+}

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

@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { ElementSize } from '../types';
+
+@Component({
+  selector: 'luzmo-edit-item',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-edit-item
+        [attr.language]="language"
+        [attr.item-type]="itemType"
+        [attr.options]="options"
+        [attr.slots]="slots"
+        [attr.customOptionsConfiguration]="customOptionsConfiguration"
+        [attr.customTranslations]="customTranslations"
+        [attr.theme]="theme"
+        [attr.size]="size"
+        (options-changed)="optionsChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-edit-item>`
+})
+export class EditItemComponent {
+  @Input() language?: string;
+  @Input() itemType?: string;
+  @Input() options?: any;
+  @Input() slots?: any;
+  @Input() customOptionsConfiguration?: any;
+  @Input() customTranslations?: any;
+  @Input() theme?: any;
+  @Input() size?: ElementSize;
+  @Output() optionsChanged = new EventEmitter<CustomEvent>();
+}

package/angular/components/edit-option-color-picker.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-edit-option-color-picker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-edit-option-color-picker
+        [attr.swatches]="swatches"
+        [attr.rounding]="rounding"
+        [attr.shape]="shape"
+        [attr.debounce]="debounce"
+        [attr.placement]="placement"
+        [attr.value]="value"
+        [attr.disabled]="disabled"
+        [attr.noAlphaChannel]="noAlphaChannel"
+        (option-changed)="optionChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-edit-option-color-picker>`
+})
+export class EditOptionColorPickerComponent {
+  @Input() swatches?: string[];
+  @Input() rounding?: 'full' | 'light' | 'none';
+  @Input() shape?: 'circle' | 'rectangle';
+  @Input() debounce?: number;
+  @Input() placement?: any;
+  @Input() value?: any;
+  @Input() disabled?: any;
+  @Input() noAlphaChannel?: any;
+  @Output() optionChanged = new EventEmitter<CustomEvent>();
+}

package/angular/components/edit-option-color-range.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-edit-option-color-range',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-edit-option-color-range
+        [attr.value]="value"
+        [attr.default]="default"
+        [attr.disabled]="disabled"
+        [attr.percentage]="percentage"
+        [attr.no-alpha-channel]="noAlphaChannel"
+        [attr.edit-range-size]="editRangeSize"
+        [attr.no-values]="noValues"
+        [attr.minimum-range-size]="minimumRangeSize"
+        [attr.negative-infinity-value]="negativeInfinityValue"
+        [attr.read-only-color-picker]="readOnlyColorPicker"
+        [attr.reverse]="reverse"
+        [attr.debounce]="debounce"
+        [attr.parseValue]="parseValue"
+        [attr.toValue]="toValue"
+        (option-changed)="optionChanged.emit($event)">
+  <ng-content></ng-content>
+</luzmo-edit-option-color-range>`
+})
+export class EditOptionColorRangeComponent {
+  @Input() value?: any;
+  @Input() default?: any;
+  @Input() disabled?: any;
+  @Input() percentage?: any;
+  @Input() noAlphaChannel?: any;
+  @Input() editRangeSize?: any;
+  @Input() noValues?: any;
+  @Input() minimumRangeSize?: any;
+  @Input() negativeInfinityValue?: any;
+  @Input() readOnlyColorPicker?: any;
+  @Input() reverse?: any;
+  @Input() debounce?: any;
+  @Input() parseValue?: any;
+  @Input() toValue?: any;
+  @Output() optionChanged = new EventEmitter<CustomEvent>();
+}

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

@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { ElementSize } from '../types';
+
+@Component({
+  selector: 'luzmo-edit-option',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-edit-option
+        [attr.language]="language"
+        [attr.item-type]="itemType"
+        [attr.option-key]="optionKey"
+        [attr.customOptionConfiguration]="customOptionConfiguration"
+        [attr.customTranslations]="customTranslations"
+        [attr.options]="options"
+        [attr.slots]="slots"
+        [attr.theme]="theme"
+        [attr.size]="size"
+>
+  <ng-content></ng-content>
+</luzmo-edit-option>`
+})
+export class EditOptionComponent {
+  @Input() language?: string;
+  @Input() itemType?: string;
+  @Input() optionKey?: string;
+  @Input() customOptionConfiguration?: any;
+  @Input() customTranslations?: any;
+  @Input() options?: any;
+  @Input() slots?: any;
+  @Input() theme?: any;
+  @Input() size?: ElementSize;
+
+}

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

@@ -0,0 +1,50 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { DataItem } from '../types';
+
+@Component({
+  selector: 'luzmo-filter-data-item-picker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-filter-data-item-picker
+        [attr.language]="language"
+        [attr.content-language]="contentLanguage"
+        [attr.has-label]="hasLabel"
+        [attr.label]="label"
+        [attr.icons]="icons"
+        [attr.allow-empty]="allowEmpty"
+        [attr.placeholder]="placeholder"
+        [attr.data-item-id]="dataItemId"
+        [attr.loading]="loading"
+        [attr.invalid]="invalid"
+        [attr.datasetsDataItems]="datasetsDataItems"
+        [attr.size]="size"
+        [attr.disabled]="disabled"
+        [attr.autofocus]="autofocus"
+        [attr.tabIndex]="tabIndex"
+        (data-item-selected)="dataItemSelected.emit($event)">
+  <ng-content></ng-content>
+</luzmo-filter-data-item-picker>`
+})
+export class FilterDataItemPickerComponent {
+  @Input() language?: string;
+  @Input() contentLanguage?: string;
+  @Input() hasLabel?: boolean;
+  @Input() label?: string;
+  @Input() icons?: 'none' | 'only-menu' | 'all';
+  @Input() allowEmpty?: boolean;
+  @Input() placeholder?: string;
+  @Input() dataItemId?: string;
+  @Input() loading?: boolean;
+  @Input() invalid?: boolean;
+  @Input() datasetsDataItems?: {
+    id: string;
+    name: { [key: string]: string };
+    columns: DataItem[];
+    formulas: DataItem[];
+  }[];
+  @Input() size?: any;
+  @Input() disabled?: any;
+  @Input() autofocus?: any;
+  @Input() tabIndex?: any;
+  @Output() dataItemSelected = new EventEmitter<CustomEvent>();
+}

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

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import type { ColumnType, ColumnSubtype } from '../types';
+
+@Component({
+  selector: 'luzmo-filter-expression-picker',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-filter-expression-picker
+        [attr.language]="language"
+        [attr.filter]="filter"
+        [attr.has-label]="hasLabel"
+        [attr.label]="label"
+        [attr.allow-empty]="allowEmpty"
+        [attr.placeholder]="placeholder"
+        [attr.disabled]="disabled"
+        [attr.type]="type"
+        [attr.subtype]="subtype"
+        [attr.invalid]="invalid"
+        [attr.is-formula]="isFormula"
+        [attr.size]="size"
+        [attr.autofocus]="autofocus"
+        [attr.tabIndex]="tabIndex"
+        (expression-selected)="expressionSelected.emit($event)">
+  <ng-content></ng-content>
+</luzmo-filter-expression-picker>`
+})
+export class FilterExpressionPickerComponent {
+  @Input() language?: string;
+  @Input() filter?: any;
+  @Input() hasLabel?: boolean;
+  @Input() label?: string;
+  @Input() allowEmpty?: boolean;
+  @Input() placeholder?: string;
+  @Input() disabled?: boolean;
+  @Input() type?: ColumnType;
+  @Input() subtype?: ColumnSubtype;
+  @Input() invalid?: boolean;
+  @Input() isFormula?: boolean;
+  @Input() size?: any;
+  @Input() autofocus?: any;
+  @Input() tabIndex?: any;
+  @Output() expressionSelected = new EventEmitter<CustomEvent>();
+}

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

@@ -0,0 +1,29 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+
+
+@Component({
+  selector: 'luzmo-filter-group',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<luzmo-filter-group
+        [attr.language]="language"
+        [attr.content-language]="contentLanguage"
+        [attr.filters]="filters"
+        [attr.size]="size"
+        [attr.disabled]="disabled"
+        [attr.autofocus]="autofocus"
+        [attr.tabIndex]="tabIndex"
+>
+  <ng-content></ng-content>
+</luzmo-filter-group>`
+})
+export class FilterGroupComponent {
+  @Input() language?: string;
+  @Input() contentLanguage?: string;
+  @Input() filters?: any[];
+  @Input() size?: any;
+  @Input() disabled?: any;
+  @Input() autofocus?: any;
+  @Input() tabIndex?: any;
+
+}