@yuuvis/client-components 3.0.0-beta.21.1

package/types/yuuvis-client-components-popout.d.ts

@@ -0,0 +1,106 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy, ElementRef } from '@angular/core';
+import * as i3 from '@yuuvis/material/panes';
+export { FullscreenDirective } from '@yuuvis/material/panes';
+
+declare enum PopoutTriggerPosition {
+    TOP_LEFT = "tl",
+    TOP_RIGHT = "tr",
+    BOTTOM_LEFT = "bl",
+    BOTTOM_RIGHT = "br",
+    NONE = "none"
+}
+interface PopoutTriggerConfig {
+    popoutIcon?: string;
+    popinIcon?: string;
+    popoutTooltip?: string;
+    popinTooltip?: string;
+}
+interface PopoutWindowConfig {
+    title?: string;
+    position?: {
+        blockStart?: number;
+        inlineStart?: number;
+    };
+    size?: {
+        width?: number;
+        height?: number;
+    };
+}
+
+/**
+ * Component that enables the wrapped content to be 'popped out' as new window.
+ * It will place a button (icon) to trigger popout on top of the wrapped content. You
+ * can place this trigger element setting the 'triggerPosition' input.
+ *
+ * Providing a 'popoutWindowConfig' will also enable you to influence the appearance of
+ * the spawned window.
+ *
+ */
+declare class PopoutComponent implements OnDestroy {
+    #private;
+    beforeunloadHandler(): void;
+    innerWrapper: _angular_core.Signal<ElementRef<any>>;
+    popoutWrapper: _angular_core.Signal<ElementRef<any>>;
+    /**
+     * Where the popout trigger should be located on the component
+     */
+    triggerPosition: _angular_core.InputSignal<PopoutTriggerPosition>;
+    /**
+     * Icon to be redered inside the trigger
+     */
+    triggerIcon: _angular_core.InputSignal<string>;
+    /**
+     * Tooltip text for the trigger button
+     */
+    triggerTooltip: _angular_core.InputSignal<string | undefined>;
+    /**
+     * configuration of the popped out window
+     */
+    popoutWindowConfig: _angular_core.InputSignal<PopoutWindowConfig | undefined>;
+    /**
+     * Whether or not to disable the undock feature
+     */
+    disabled: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Emitted when the child component is popped out
+     */
+    popOut: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Emitted when the child component is popped in again
+     */
+    popIn: _angular_core.OutputEmitterRef<boolean>;
+    poppedOut: _angular_core.Signal<boolean>;
+    get isPoppedOut(): boolean;
+    pop(e: MouseEvent): void;
+    private _popIn;
+    private _popOut;
+    private _createPopoutWindow;
+    private _getWindowPositioning;
+    private _close;
+    private _cloneStylesToPopoutWindow;
+    private _observeFutureStyleChanges;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoutComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopoutComponent, "yuv-popout", ["yuvPopout"], { "triggerPosition": { "alias": "triggerPosition"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "triggerTooltip": { "alias": "triggerTooltip"; "required": false; "isSignal": true; }; "popoutWindowConfig": { "alias": "popoutWindowConfig"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "popOut": "popOut"; "popIn": "popIn"; }, never, ["*"], true, never>;
+}
+
+declare class PopoutTriggerComponent {
+    private translate;
+    config: _angular_core.InputSignal<PopoutTriggerConfig | undefined>;
+    popout: _angular_core.InputSignal<PopoutComponent | undefined>;
+    icon: _angular_core.Signal<string>;
+    tooltip: _angular_core.Signal<any>;
+    trigger(e: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoutTriggerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PopoutTriggerComponent, "yuv-popout-trigger", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "popout": { "alias": "popout"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class YuvPopoutModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuvPopoutModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<YuvPopoutModule, never, [typeof PopoutComponent, typeof PopoutTriggerComponent, typeof i3.FullscreenDirective], [typeof PopoutComponent, typeof PopoutTriggerComponent, typeof i3.FullscreenDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<YuvPopoutModule>;
+}
+
+export { PopoutComponent, PopoutTriggerComponent, PopoutTriggerPosition, YuvPopoutModule };
+export type { PopoutTriggerConfig, PopoutWindowConfig };

package/types/yuuvis-client-components-split-view.d.ts

@@ -0,0 +1,197 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, AfterViewInit } from '@angular/core';
+import * as angular_split from 'angular-split';
+import { SplitAreaSize, SplitGutterInteractionEvent, SplitComponent, SplitDirection } from 'angular-split';
+
+interface SplitViewLayoutSettings {
+    disabled?: boolean;
+    areas: Array<SplitAreaLayoutSettings>;
+}
+interface SplitAreaLayoutSettings {
+    visible?: boolean;
+    lockSize?: boolean;
+    size?: SplitAreaSize;
+}
+type SplitViewOutputData = SplitGutterInteractionEvent;
+
+declare class SplitAreaDirective {
+    template: TemplateRef<any>;
+    size: _angular_core.InputSignal<SplitAreaSize | undefined>;
+    minSize: _angular_core.InputSignal<number | undefined>;
+    maxSize: _angular_core.InputSignal<number | undefined>;
+    panelClass: _angular_core.InputSignal<string | undefined>;
+    visible: _angular_core.InputSignal<boolean>;
+    lockSize: _angular_core.InputSignal<boolean>;
+    areaProperties: _angular_core.WritableSignal<{
+        size: SplitAreaSize | undefined;
+        visible: boolean;
+        lockSize: boolean;
+    }>;
+    updateSettings(s: SplitAreaLayoutSettings): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitAreaDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SplitAreaDirective, "[yuvSplitArea]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "lockSize": { "alias": "lockSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Component for creating a split view with resizable areas.
+ *
+ * Each area is defined using the `yuvSplitArea` directive on an `ng-template`.
+ * Areas can be resized by dragging the gutter between them.
+ *
+ * ### Basic usage
+ * ```html
+ * <yuv-split-view>
+ *   <ng-template yuvSplitArea [size]="20">Aside</ng-template>
+ *   <ng-template yuvSplitArea [size]="80">Main</ng-template>
+ * </yuv-split-view>
+ * ```
+ *
+ * ### Collapsible areas
+ * Areas can be shown, hidden, or toggled programmatically. Use a template
+ * reference variable to call the visibility methods from the template:
+ *
+ * ```html
+ * <yuv-split-view #sv>
+ *   <ng-template yuvSplitArea [size]="25">
+ *     <button (click)="sv.hideArea(0)">Collapse</button>
+ *     Left pane
+ *   </ng-template>
+ *   <ng-template yuvSplitArea [size]="75">
+ *     <button (click)="sv.showArea(0)">Expand left</button>
+ *     Main pane
+ *   </ng-template>
+ * </yuv-split-view>
+ * ```
+ *
+ * ### Persisting layout state
+ * Set `layoutSettingsID` to persist area sizes and visibility to
+ * localStorage. The saved state is automatically restored on init.
+ *
+ * ```html
+ * <yuv-split-view [layoutSettingsID]="'my-layout'">
+ *   ...
+ * </yuv-split-view>
+ * ```
+ */
+declare class SplitViewComponent implements AfterViewInit {
+    #private;
+    splitAreas: _angular_core.Signal<readonly SplitAreaDirective[]>;
+    asSplitComponent: _angular_core.Signal<SplitComponent>;
+    splitAreaSizes: SplitAreaSize[];
+    /**
+     * The split views direction. Could be 'horizontal' or 'vertical'. Defaults to 'horizontal'.
+     */
+    direction: _angular_core.InputSignal<SplitDirection>;
+    isVertical: _angular_core.Signal<boolean>;
+    isHorizontal: _angular_core.Signal<boolean>;
+    /**
+     * Size of the gutter in Pixel (defaults to 16).
+     */
+    gutterSize: _angular_core.InputSignal<number>;
+    /**
+     * If true, the gutter can only be moved in steps of 1%.
+     */
+    restrictMove: _angular_core.InputSignal<boolean>;
+    /**
+     * Disable the dragging feature (remove cursor/image on gutters).
+     */
+    disabledInput: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.WritableSignal<boolean>;
+    /**
+     * Layout settings are the state of the split view that could be persisted.
+     * Setting a `layoutSettingsID` will save the current state (split area sizes etc.)
+     * to the local storage. If the component is created, it will load those settings and
+     * re-apply them.
+     */
+    layoutSettingsID: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Emitted when the state (split area sizes etc.) of the split view changed.
+     */
+    layoutSettingsChange: _angular_core.OutputEmitterRef<SplitViewLayoutSettings>;
+    /**
+     * Emitted when dragging the split gutter starts
+     */
+    dragStart: _angular_core.OutputEmitterRef<angular_split.SplitGutterInteractionEvent>;
+    /**
+     * Emitted when dragging the split gutter ends
+     */
+    dragEnd: _angular_core.OutputEmitterRef<angular_split.SplitGutterInteractionEvent>;
+    /**
+     * Emitted when the split gutter is clicked.
+     */
+    gutterClick: _angular_core.OutputEmitterRef<angular_split.SplitGutterInteractionEvent>;
+    /**
+     * Emitted when the split gutter is double clicked (you may also want to
+     * set a different click duration indicating a double click). This could be
+     * set using the `gutterDblClickDuration` to a value in milliseconds (default is 400ms)
+     */
+    gutterDblClick: _angular_core.OutputEmitterRef<angular_split.SplitGutterInteractionEvent>;
+    dragging: _angular_core.WritableSignal<boolean>;
+    onDragStart(e: SplitViewOutputData): void;
+    onDragEnd(e: SplitViewOutputData): void;
+    /**
+     * Show a previously hidden split area, restoring it to its last known size.
+     *
+     * ```html
+     * <button (click)="sv.showArea(0)">Show left pane</button>
+     * ```
+     * @param index Zero-based index of the split area to show
+     */
+    showArea(index: number): void;
+    /**
+     * Hide a split area by collapsing it to zero width/height. The adjacent
+     * areas will expand to fill the freed space.
+     *
+     * ```html
+     * <button (click)="sv.hideArea(0)">Hide left pane</button>
+     * ```
+     * @param index Zero-based index of the split area to hide
+     */
+    hideArea(index: number): void;
+    /**
+     * Toggle the visibility of a split area. If the area is currently visible
+     * it will be collapsed; if it is hidden it will be restored.
+     *
+     * ```html
+     * <button (click)="sv.toggleArea(0)">Toggle left pane</button>
+     * ```
+     * @param index Zero-based index of the split area to toggle
+     */
+    toggleArea(index: number): void;
+    /**
+     * Returns whether a split area is currently visible. Useful for
+     * conditionally rendering expand/collapse buttons in the template.
+     *
+     * ```html
+     * @if (!sv.isAreaVisible(0)) {
+     *   <button (click)="sv.showArea(0)">Expand left</button>
+     * }
+     * ```
+     * @param index Zero-based index of the split area to check
+     * @returns `true` if the area is visible, `false` if hidden
+     */
+    isAreaVisible(index: number): boolean;
+    /** @deprecated Use `showArea()` / `hideArea()` instead */
+    splitAreaSetVisibility(index: number, visible: boolean): void;
+    /** @deprecated Use `toggleArea()` instead */
+    splitAreaToggleVisibility(index: number): void;
+    /**
+     * Programmatically apply layout settings (area sizes, visibility, disabled state).
+     * This is called automatically on init when `layoutSettingsID` is set, but can
+     * also be used to restore a specific layout configuration at any time.
+     * @param settings The layout settings to apply
+     */
+    applyLayoutSettings(settings: SplitViewLayoutSettings): void;
+    ngAfterViewInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitViewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SplitViewComponent, "yuv-split-view", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "gutterSize": { "alias": "gutterSize"; "required": false; "isSignal": true; }; "restrictMove": { "alias": "restrictMove"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; "layoutSettingsID": { "alias": "layoutSettingsID"; "required": false; "isSignal": true; }; }, { "layoutSettingsChange": "layoutSettingsChange"; "dragStart": "dragStart"; "dragEnd": "dragEnd"; "gutterClick": "gutterClick"; "gutterDblClick": "gutterDblClick"; }, ["splitAreas"], never, true, never>;
+}
+
+declare class YuvSplitViewModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuvSplitViewModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<YuvSplitViewModule, never, [typeof SplitAreaDirective, typeof SplitViewComponent], [typeof SplitAreaDirective, typeof SplitViewComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<YuvSplitViewModule>;
+}
+
+export { SplitAreaDirective, SplitViewComponent, YuvSplitViewModule };
+export type { SplitAreaLayoutSettings, SplitViewLayoutSettings, SplitViewOutputData };

package/types/yuuvis-client-components-widget-grid.d.ts

@@ -0,0 +1,299 @@
+import * as _angular_core from '@angular/core';
+import { Type, InputSignal, OutputEmitterRef, TemplateRef } from '@angular/core';
+import { GridType, GridsterItemConfig, Gridster, GridsterConfig } from 'angular-gridster2';
+import * as _angular_forms from '@angular/forms';
+import { FormControlStatus, FormControl } from '@angular/forms';
+import { AttributesMap } from 'ng-dynamic-component';
+import { MatDialogRef } from '@angular/material/dialog';
+import { TranslateService } from '@yuuvis/client-core';
+import { Observable } from 'rxjs';
+
+interface GridWidget<T> {
+    id: string;
+    label: string;
+    setupComponent?: Type<IWidgetComponent<T>>;
+    widgetComponent: Type<IWidgetComponent<T>>;
+}
+interface WidgetGridItemConfig extends GridsterItemConfig {
+    id: string;
+    widgetName: string;
+    widgetConfig: any;
+}
+interface WidgetGridItem extends WidgetGridItemConfig {
+    widget: Type<any>;
+    widgetConfigMap: AttributesMap;
+}
+interface IWidgetComponent<T> {
+    widgetConfig: InputSignal<T>;
+}
+interface IWidgetSetupComponent<T> extends IWidgetComponent<T> {
+    widgetConfigChange: OutputEmitterRef<T>;
+    widgetConfigStateChange: OutputEmitterRef<FormControlStatus>;
+}
+interface WidgetPickerData {
+    widgetId: string | undefined;
+    widgetName: string;
+    widgetConfigMap?: AttributesMap;
+}
+interface AddItemSize {
+    rows: number;
+    cols: number;
+}
+interface GridItemEvent {
+    action: string;
+    data: any;
+}
+interface WidgetGridConfig {
+    rows?: number;
+    columns?: number;
+    gap?: number;
+    newItemWidth?: number;
+    newItemHeight?: number;
+    gridType?: GridType;
+}
+interface WidgetPickerOptions {
+    pickerData?: WidgetPickerData;
+    buckets?: string[];
+}
+
+declare class YuvWidgetGridComponent {
+    #private;
+    gridster: _angular_core.Signal<Gridster | undefined>;
+    widgetPicker: _angular_core.Signal<TemplateRef<any>>;
+    options: GridsterConfig;
+    gridConfig: _angular_core.InputSignal<Partial<WidgetGridConfig> | undefined>;
+    _editMode: _angular_core.WritableSignal<boolean>;
+    /**
+     * Whether or not to enable edit mode. In edit mode controls
+     * for editing existing tiles and creating new ones are shown.
+     * This mode also enables positioning and resizing of the tiles.
+     */
+    editMode: _angular_core.InputSignal<boolean>;
+    gridItemConfig: _angular_core.InputSignal<WidgetGridItemConfig[] | undefined>;
+    /**
+     * Collection of buckets to load available widgets from. Wildcards are also posssible:
+     * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
+     *
+     * `*` represents any character 0-n times
+     * `?` represents exactly one character
+     */
+    buckets: _angular_core.InputSignal<string[] | undefined>;
+    /**
+     * Emitted when the grid has been changed
+     */
+    gridChange: _angular_core.OutputEmitterRef<WidgetGridItemConfig[]>;
+    gridItemEvent: _angular_core.OutputEmitterRef<GridItemEvent>;
+    /**
+     * Emitted when the widget picker is opened or closed in edit mode
+     */
+    widgetPickerOpen: _angular_core.OutputEmitterRef<boolean>;
+    widgetGrid: Array<WidgetGridItem>;
+    widgetPickerData: WidgetPickerData | undefined;
+    constructor();
+    openWidgetPicker(item?: WidgetGridItem): void;
+    /**
+     * Removes a widget from the grid
+     * @param item The widget to be removed
+     */
+    removeItem(item: WidgetGridItem): void;
+    /**
+     * Add a new widget to the grid by opening the widget picker
+     */
+    addItem(): void;
+    private emitChange;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuvWidgetGridComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuvWidgetGridComponent, "yuv-widget-grid", never, { "gridConfig": { "alias": "gridConfig"; "required": false; "isSignal": true; }; "editMode": { "alias": "editMode"; "required": false; "isSignal": true; }; "gridItemConfig": { "alias": "gridItemConfig"; "required": false; "isSignal": true; }; "buckets": { "alias": "buckets"; "required": false; "isSignal": true; }; }, { "gridChange": "gridChange"; "gridItemEvent": "gridItemEvent"; "widgetPickerOpen": "widgetPickerOpen"; }, never, [".empty"], true, never>;
+}
+
+interface WidgetGridWorkspace {
+    id: string;
+    label: string;
+    grid: WidgetGridItemConfig[];
+    translateLabel?: boolean;
+    preventDelete?: boolean;
+    preventEdit?: boolean;
+    preventRename?: boolean;
+}
+interface WidgetGridWorkspaceConfig {
+    currentWorkspace?: string;
+    workspaces: WidgetGridWorkspace[];
+}
+interface WidgetGridWorkspaceOptions {
+    gridConfig?: Partial<WidgetGridConfig>;
+}
+
+/**
+ * Component for managing multiple widget grids in  so called workspaces.
+ * Each workspace can have its own configuration and widgets. The user can
+ * switch between workspaces to use or edit the widgets in the current workspace.
+ */
+declare class YuvWidgetGridWorkspacesComponent {
+    #private;
+    readonly translate: TranslateService;
+    workspaceDialogRef?: MatDialogRef<any, any>;
+    workspaceForm: _angular_forms.FormGroup<{
+        id: FormControl<string | null>;
+        label: FormControl<string | null>;
+    }>;
+    get workspaceLabelControl(): FormControl;
+    options: _angular_core.InputSignal<WidgetGridWorkspaceOptions>;
+    _workspaceOptions: _angular_core.Signal<WidgetGridWorkspaceOptions>;
+    workspaceConfig: _angular_core.InputSignal<WidgetGridWorkspaceConfig | undefined>;
+    _workspaceConfig: _angular_core.WritableSignal<WidgetGridWorkspaceConfig | undefined>;
+    /**
+     * Collection of buckets to load available widgets from. Wildcards are also posssible:
+     * `[buckets]="['app.default', '*.public.*', 'app.no?.widgets']"`
+     *
+     * `*` represents any character 0-n times
+     * `?` represents exactly one character
+     */
+    buckets: _angular_core.InputSignal<string[] | undefined>;
+    configChange: _angular_core.OutputEmitterRef<WidgetGridWorkspaceConfig | undefined>;
+    gridItemEvent: _angular_core.OutputEmitterRef<GridItemEvent>;
+    editModeChange: _angular_core.OutputEmitterRef<boolean>;
+    editMode: _angular_core.WritableSignal<boolean>;
+    workspace: _angular_core.WritableSignal<WidgetGridWorkspace | undefined>;
+    workspaceLabel: _angular_core.WritableSignal<string>;
+    gridItemConfig: _angular_core.WritableSignal<WidgetGridItemConfig[] | undefined>;
+    getLabel(workspace: WidgetGridWorkspace): string;
+    setWorkspace(id: string, silent?: boolean): void;
+    openWorkspaceDialog(create: boolean, tplRef: TemplateRef<any>): void;
+    saveWorkspace(): void;
+    onGridEvent(e: GridItemEvent): void;
+    onGridChange(grid: Array<WidgetGridItemConfig>): void;
+    persistWorkspaceConfig(): void;
+    revertWorkspaceConfig(): void;
+    deleteCurrentWorkspace(): void;
+    emitConfigChange(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuvWidgetGridWorkspacesComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<YuvWidgetGridWorkspacesComponent, "yuv-widget-grid-workspaces", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "workspaceConfig": { "alias": "workspaceConfig"; "required": false; "isSignal": true; }; "buckets": { "alias": "buckets"; "required": false; "isSignal": true; }; }, { "configChange": "configChange"; "gridItemEvent": "gridItemEvent"; "editModeChange": "editModeChange"; }, never, never, true, never>;
+}
+
+declare class YuvWidgetGridModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<YuvWidgetGridModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<YuvWidgetGridModule, never, [typeof YuvWidgetGridComponent, typeof YuvWidgetGridWorkspacesComponent], [typeof YuvWidgetGridComponent, typeof YuvWidgetGridWorkspacesComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<YuvWidgetGridModule>;
+}
+
+/**
+ * This service provides the list of widgets that could be added
+ * to a widget grid. You could use it to register your own
+ * widgets.
+ */
+declare class WidgetGridRegistry {
+    #private;
+    readonly translate: TranslateService;
+    /**
+     * List of pre-registered widgets provided out-of-the-box
+     * by the widget grid module
+     */
+    private registeredWidgets;
+    /**
+     * Buckets are collection of widget references.
+     * You can put any widget registered gloabally into a bucket. Later on you can grab
+     * widgets from a certain bucket. This enables apps to structure their widgets when e.g.
+     * using multiple widget grids with their own set of available widgets.
+     */
+    private widgetBuckets;
+    /**
+     * Get the noop component. This component will be rendered in
+     * the grid tile if not matching widget could be found in the
+     * list of registered widgets. It will show some kind of 'not
+     * found' message and provide the controls to remove that none
+     * existing component from the widget grid.
+     * @returns NoopComponent
+     */
+    getNoopWidget(): GridWidget<any>;
+    /**
+     * Setup components are the administrative part of a widget. They
+     * are used to set up a widget. Not all the widgets will have a setup
+     * component.
+     * @param widgetName The widgets name
+     * @returns The setup component of a widget. Throws error if there
+     * is not widget registered with the given name
+     */
+    getWidgetSetupComponent(widgetName: string): Type<any> | undefined;
+    /**
+     * Get the component for a widget. This is the component that will
+     * be rendered in a grid tile.
+     * @param widgetName The widgets name
+     * @returns The widget component or noop component if there is
+     * no component registered with the given name
+     */
+    getWidgetComponent(widgetName: string): Type<any>;
+    /**
+     * Adds a new widget to the list of registered widgets. That way
+     * you can create custom widgets that are then available to be
+     * added to a users widget grid.
+     * @param widget The widget to be registered
+     * @param bucket List of buckets to register to. If a bucket does
+     * not exist it'll be created.
+     */
+    registerGridWidget(widget: GridWidget<any>, buckets?: string[]): void;
+    /**
+     * Register a collection of widgets
+     * @param widgets The widgets to be registered
+     * @param bucket List of buckets to register to. If a bucket does
+     * not exist it'll be created.
+     */
+    registerGridWidgets(widgets: GridWidget<any>[], buckets?: string[]): void;
+    private _addToBucket;
+    removeRegisteredWidget(id: string): void;
+    clearRegisteredWidget(): void;
+    /**
+     * Get registered widgets. This list could be narrowed down by a list
+     * of buckets. Buckets are lists of registered widgets registered for
+     * a certain key (the buckets name).
+     * @param buckets name of buckets to restrict the widgets to
+     * @returns Array of grid widgets
+     */
+    getRegisteredWidgets(buckets?: string[]): Array<GridWidget<any>>;
+    private _wildcardMatch;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WidgetGridRegistry, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<WidgetGridRegistry>;
+}
+
+/**
+ * Service managing a widget grid. Also includes a set of labels that will be
+ * used by the grid and its widgets. Default labels are provided out of the
+ * box. But if you want to use custom ones or add i18n you could overwrite
+ * them. The grid as well as the widgets will use those labels or fall back
+ * to their default ones. If you are developing own widgets you should
+ * consider using those labels as well.
+ */
+declare class WidgetGridService {
+    private widgetGridRegistry;
+    private widgetGrid;
+    private widgetGridSource;
+    widgetGrid$: Observable<WidgetGridItem[]>;
+    private widgetGridUpdateSource;
+    /**
+     * Emitted when the widget grid has been updated
+     */
+    widgetGridUpdate$: Observable<string>;
+    addItemSize: {
+        rows: number;
+        cols: number;
+    };
+    constructor(widgetGridRegistry: WidgetGridRegistry);
+    setWidgetGrid(gridItemConfig: Array<WidgetGridItemConfig> | undefined): void;
+    /**
+     * Update config of an existing widget
+     * @param widgetId ID of the widget to be updated
+     * @param setupWidgetConfig The updated configuration for that widget
+     */
+    updateWidget(widgetId: string, setupWidgetConfig: any): void;
+    replaceWidget(widgetId: string, widgetName: string, setupWidgetConfig?: any): void;
+    /**
+     * Add a new grid item to the widget grid.
+     * @param widgetName The name of the grid item to be added
+     * @param setupWidgetConfig
+     */
+    addWidget(widgetName: string, setupWidgetConfig?: any): void;
+    removeWidget(gridItemId: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WidgetGridService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<WidgetGridService>;
+}
+
+export { WidgetGridRegistry, WidgetGridService, YuvWidgetGridComponent, YuvWidgetGridModule, YuvWidgetGridWorkspacesComponent };
+export type { AddItemSize, GridItemEvent, GridWidget, IWidgetComponent, IWidgetSetupComponent, WidgetGridConfig, WidgetGridItem, WidgetGridItemConfig, WidgetGridWorkspace, WidgetGridWorkspaceConfig, WidgetGridWorkspaceOptions, WidgetPickerData, WidgetPickerOptions };

package/types/yuuvis-client-components.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from '@angular/core';
+
+declare class ClientComponentsComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClientComponentsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClientComponentsComponent, "ym-client-components", never, {}, {}, never, never, true, never>;
+}
+
+export { ClientComponentsComponent };

package/widget-grid/README.md

@@ -0,0 +1,48 @@
+# @yuuvis/client-components/widget-grid
+
+Module providing a configurable grid of widgets. Widgets are components that implement `IWidgetComponent`. Widgets may also come with a setup component that could be used to configure the widget.
+
+## Create a widget
+Widgets are just Angular components that implement the `IWidgetComponent` interface. 
+
+```ts
+import { Component } from '@angular/core';
+import { IWidgetComponent } from '@yuuvis/client-components/widget-grid';
+
+@Component({
+  selector: 'yuvtest-hello-widget',
+  template: '<h1>Hello Widget</h1>',
+  styleUrl: './hello-widget.component.scss'
+})
+export class HelloWidgetComponent implements IWidgetComponent<any> {
+  // Setter for the widget configuration.
+  widgetConfig;
+}
+```
+
+In order to use that widget in your grid you have to register it:
+
+```ts
+export class TestWidgetGridComponent {
+  #widgetGridRegistry = inject(WidgetGridRegistry);
+
+  constructor() {
+    const widget: GridWidget<any> = {
+      name: 'hello-widget',
+      label: 'Hello Widget',
+      widgetComponent: HelloWidgetComponent
+    }
+    this.#widgetGridRegistry.registerGridWidget(widget);
+  }
+}
+```
+Now the widget will be available in the picker dialog and users can add it to their grid. Notice: The label will be used as a key to fetch a translated label first. If that fails the label will be used as is.
+
+## Adding a setup component
+GridWidgets can also provide a setup component to configure the widget. For example let's add a setup for our HelloWidget to add a name to say hello to:
+
+```ts
+
+```
+ 
+## Setting up a grid