@logosphere-ui/angular 0.0.1 → 1.0.0-beta.2

package/ssr/README.md

@@ -0,0 +1,111 @@
+# `@logosphere-ui/angular/ssr`
+
+Server-side rendering support for Logosphere components in **`@angular/ssr`** (Angular 17+).
+
+Angular's server renderer emits the Logosphere custom elements as bare host tags
+(attributes + projected content, but **no shadow DOM** — Domino doesn't upgrade
+custom elements). This package renders that shadow DOM as **Declarative Shadow
+DOM** server-side, and the client **hydrates** it instead of re-rendering.
+
+---
+
+## 1. Server: inject Declarative Shadow DOM
+
+`renderLogosphereShadowRoots(html)` takes the HTML string Angular produced and
+returns it with `<template shadowrootmode="open">…</template>` injected into every
+registered `logosphere-*` element (recursively). Everything else passes through
+untouched.
+
+> ⚠️ **Server-only.** Import it **only** in `server.ts`. It pulls in `@lit-labs/ssr`
+> (Node) and must never reach the browser bundle. It is deliberately not exported
+> from the main `@logosphere-ui/angular` entry point.
+
+### CommonEngine (returns an HTML string)
+
+```ts
+// server.ts
+import { renderLogosphereShadowRoots } from '@logosphere-ui/angular/ssr';
+
+const html = await commonEngine.render({ bootstrap, documentFilePath, url, publicPath });
+res.send(await renderLogosphereShadowRoots(html));
+```
+
+### AngularNodeAppEngine (Angular 19+, returns a `Response`)
+
+```ts
+// server.ts
+import { renderLogosphereShadowRoots } from '@logosphere-ui/angular/ssr';
+
+const response = await angularApp.handle(req);
+if (response) {
+  const original = await response.text();
+  const transformed = await renderLogosphereShadowRoots(original);
+  return new Response(transformed, response); // keep status/headers
+}
+```
+
+The components must be **registered** in the server process before rendering.
+They already are: your Angular wrapper components (`lgs-button`, …) import the
+core elements. No extra registration step is needed.
+
+---
+
+## 2. Client: enable hydration
+
+Lit needs its hydration support loaded **before** any component/`lit` import, or
+it will re-render (and flash) instead of hydrating. Make it the **very first**
+line of your browser entry:
+
+```ts
+// main.ts — FIRST import, before everything else
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
+
+import { bootstrapApplication } from '@angular/platform-browser';
+// …
+```
+
+Keep Angular's own hydration on too:
+
+```ts
+providers: [provideClientHydration()]
+```
+
+---
+
+## 3. Browser support
+
+Declarative Shadow DOM is native in Chrome/Edge 90+, Safari 16.4+, Firefox 123+.
+For older browsers add a DSD polyfill **before** hydration runs (tiny, inline):
+
+```html
+<script>
+  if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode')) {
+    /* apply a declarative-shadow-dom polyfill here */
+  }
+</script>
+```
+
+---
+
+## ⚠️ Verify first: attribute vs. property serialization
+
+The transform only sees what Angular **serializes into the HTML** — i.e.
+**attributes**. The wrapper binds primitive inputs as **properties**
+(`[theme]="theme()"`), and Angular may set those as DOM properties on Domino
+**without** reflecting them to attributes. If so, the host tag in the SSR HTML
+won't carry `theme="primary"`, and the server-rendered shadow DOM falls back to
+defaults (then corrects on client hydration — a visible flash).
+
+**Check your real SSR output** for a component with non-default inputs:
+
+- If attributes (`theme="primary"`) are present → full SSR works as-is. ✅
+- If they're missing → reflect primitives to attributes. Options:
+  - bind `[attr.theme]="theme()"` in the wrapper (string/boolean inputs), or
+  - mark the corresponding core `@property` as `reflect: true`.
+
+**Complex object inputs** (e.g. Chatbot `products`, data arrays) cannot round-trip
+through an HTML attribute and will server-render with defaults, then populate on
+hydration. That's expected — structure is SSR'd, data fills in on the client.
+
+Report back what your SSR HTML actually contains and we'll wire the reflection
+accordingly.

package/types/logosphere-ui-angular-src-lib-accordion.d.ts

@@ -0,0 +1,26 @@
+import * as _angular_core from '@angular/core';
+
+interface AccordionItem {
+    title: string;
+    content: string;
+    disabled?: boolean;
+}
+declare class LogosphereAccordion {
+    items: _angular_core.InputSignal<AccordionItem[]>;
+    multiple: _angular_core.InputSignal<boolean>;
+    defaultOpen: _angular_core.InputSignal<number | number[]>;
+    border: _angular_core.InputSignal<"full" | "bottom">;
+    iconPosition: _angular_core.InputSignal<"left" | "right">;
+    size: _angular_core.InputSignal<"default" | "large">;
+    accordionChange: _angular_core.OutputEmitterRef<{
+        index: number;
+        expanded: boolean;
+        openIndices: number[];
+    }>;
+    onAccordionChange(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereAccordion, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereAccordion, "lgs-accordion", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "accordionChange": "accordionChange"; }, never, ["*"], true, never>;
+}
+
+export { LogosphereAccordion };
+export type { AccordionItem };

package/types/logosphere-ui-angular-src-lib-badge.d.ts

@@ -0,0 +1,15 @@
+import * as _angular_core from '@angular/core';
+
+declare class LogosphereBadge {
+    variant: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<string>;
+    text: _angular_core.InputSignal<string>;
+    closeable: _angular_core.InputSignal<boolean>;
+    isRound: _angular_core.InputSignal<boolean>;
+    close: _angular_core.OutputEmitterRef<void>;
+    onClose(_event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereBadge, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereBadge, "lgs-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; "isRound": { "alias": "isRound"; "required": false; "isSignal": true; }; }, { "close": "close"; }, never, ["*"], true, never>;
+}
+
+export { LogosphereBadge };

package/types/logosphere-ui-angular-src-lib-breadcrumb.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+type BreadcrumbItem = {
+    label: string;
+    href?: string;
+    active?: boolean;
+};
+declare class LogosphereBreadcrumb {
+    items: i0.InputSignal<BreadcrumbItem[]>;
+    set elRef(element: ElementRef | undefined);
+    static ɵfac: i0.ɵɵFactoryDeclaration<LogosphereBreadcrumb, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LogosphereBreadcrumb, "lgs-breadcrumb", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { LogosphereBreadcrumb };
+export type { BreadcrumbItem };

package/types/logosphere-ui-angular-src-lib-button.d.ts

@@ -5,8 +5,10 @@ declare class LogosphereButton {
     size: _angular_core.InputSignal<string>;
     variant: _angular_core.InputSignal<string>;
     iconOnly: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    loading: _angular_core.InputSignal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereButton, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereButton, "lgs-button", never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereButton, "lgs-button", never, { "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { LogosphereButton };

package/types/logosphere-ui-angular-src-lib-calendar.d.ts

@@ -0,0 +1,30 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+declare class LogosphereCalendar {
+    value: _angular_core.InputSignal<string | null>;
+    min: _angular_core.InputSignal<string | null>;
+    max: _angular_core.InputSignal<string | null>;
+    disabled: _angular_core.InputSignal<boolean>;
+    rangeMode: _angular_core.InputSignal<boolean>;
+    disabledDays: _angular_core.InputSignal<number[]>;
+    rangeStart: _angular_core.InputSignal<string | null>;
+    rangeEnd: _angular_core.InputSignal<string | null>;
+    closable: _angular_core.InputSignal<boolean>;
+    change: _angular_core.OutputEmitterRef<{
+        value: string | null;
+    }>;
+    rangeChange: _angular_core.OutputEmitterRef<{
+        start: string;
+        end: string;
+    }>;
+    closeRequest: _angular_core.OutputEmitterRef<void>;
+    set elRef(element: ElementRef | undefined);
+    onChange(event: Event): void;
+    onRangeChange(event: Event): void;
+    onCloseRequest(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereCalendar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereCalendar, "lgs-calendar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rangeMode": { "alias": "rangeMode"; "required": false; "isSignal": true; }; "disabledDays": { "alias": "disabledDays"; "required": false; "isSignal": true; }; "rangeStart": { "alias": "rangeStart"; "required": false; "isSignal": true; }; "rangeEnd": { "alias": "rangeEnd"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "change": "change"; "rangeChange": "rangeChange"; "closeRequest": "closeRequest"; }, never, never, true, never>;
+}
+
+export { LogosphereCalendar };

package/types/logosphere-ui-angular-src-lib-card.d.ts

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+declare class LogosphereCard {
+    cardTitle: _angular_core.InputSignal<string>;
+    description: _angular_core.InputSignal<string>;
+    header: _angular_core.InputSignal<boolean>;
+    footer: _angular_core.InputSignal<boolean>;
+    okLabel: _angular_core.InputSignal<string>;
+    cancelLabel: _angular_core.InputSignal<string>;
+    ok: _angular_core.OutputEmitterRef<void>;
+    cancel: _angular_core.OutputEmitterRef<void>;
+    onOk(): void;
+    onCancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereCard, "lgs-card", never, { "cardTitle": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "footer": { "alias": "footer"; "required": false; "isSignal": true; }; "okLabel": { "alias": "okLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; }, { "ok": "ok"; "cancel": "cancel"; }, never, ["*", "[slot=header]", "[slot=footer]"], true, never>;
+}
+
+export { LogosphereCard };

package/types/logosphere-ui-angular-src-lib-chatbot.d.ts

@@ -1,4 +1,5 @@
 import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
 
 type ChatbotProduct = {
     id: string;
@@ -14,8 +15,7 @@ declare class LogosphereChatbot {
     openInitially: _angular_core.InputSignal<boolean>;
     showFeedbackButtons: _angular_core.InputSignal<boolean>;
     products: _angular_core.InputSignal<ChatbotProduct[]>;
-    private chatbotEl?;
-    constructor();
+    set chatbotElRef(element: ElementRef | undefined);
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereChatbot, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereChatbot, "lgs-chatbot", never, { "returnUri": { "alias": "returnUri"; "required": false; "isSignal": true; }; "questionPrompt": { "alias": "questionPrompt"; "required": false; "isSignal": true; }; "minimizedIconOnly": { "alias": "minimizedIconOnly"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "openInitially": { "alias": "openInitially"; "required": false; "isSignal": true; }; "showFeedbackButtons": { "alias": "showFeedbackButtons"; "required": false; "isSignal": true; }; "products": { "alias": "products"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/types/logosphere-ui-angular-src-lib-checkbox.d.ts

@@ -11,7 +11,7 @@ declare class LogosphereCheckbox {
     checked: _angular_core.InputSignal<boolean>;
     label: _angular_core.InputSignal<string>;
     value: _angular_core.InputSignal<string>;
-    type: _angular_core.InputSignal<"checkbox" | "switch">;
+    type: _angular_core.InputSignal<"checkbox" | "switch" | "radio">;
     change: _angular_core.OutputEmitterRef<CheckboxChangeEvent>;
     onChange(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereCheckbox, never>;

package/types/logosphere-ui-angular-src-lib-chip-group.d.ts

@@ -0,0 +1,24 @@
+import * as _angular_core from '@angular/core';
+
+interface ChipItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+declare class LogosphereChipGroup {
+    items: _angular_core.InputSignal<ChipItem[]>;
+    value: _angular_core.InputSignal<string[]>;
+    theme: _angular_core.InputSignal<string>;
+    gap: _angular_core.InputSignal<string>;
+    chipGroupChange: _angular_core.OutputEmitterRef<{
+        value: string[];
+        item: ChipItem;
+        selected: boolean;
+    }>;
+    onChipGroupChange(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereChipGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereChipGroup, "lgs-chip-group", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, { "chipGroupChange": "chipGroupChange"; }, never, never, true, never>;
+}
+
+export { LogosphereChipGroup };
+export type { ChipItem };

package/types/logosphere-ui-angular-src-lib-collapse.d.ts

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+declare class LogosphereCollapse {
+    title: _angular_core.InputSignal<string>;
+    expanded: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    border: _angular_core.InputSignal<"full" | "bottom">;
+    iconPosition: _angular_core.InputSignal<"left" | "right">;
+    size: _angular_core.InputSignal<"default" | "large">;
+    toggle: _angular_core.OutputEmitterRef<{
+        expanded: boolean;
+    }>;
+    onToggle(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereCollapse, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereCollapse, "lgs-collapse", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "toggle": "toggle"; }, never, ["*"], true, never>;
+}
+
+export { LogosphereCollapse };

package/types/logosphere-ui-angular-src-lib-combobox.d.ts

@@ -0,0 +1,67 @@
+import * as _angular_core from '@angular/core';
+
+type ComboboxItem = Record<string, unknown>;
+type ComboboxItemRenderer = (item: ComboboxItem, context: {
+    index: number;
+    selected: boolean;
+    focused: boolean;
+    multiple: boolean;
+}) => unknown;
+type ComboboxSearchChangeDetail = {
+    value: string;
+};
+type ComboboxFocusDetail = {
+    originalEvent: FocusEvent;
+    value: unknown;
+};
+type ComboboxLoadMoreDetail = {
+    value: string;
+};
+type ComboboxChangeDetail = {
+    value: unknown;
+};
+type ComboboxLgsChangeDetail = {
+    value: unknown;
+    selected: ComboboxItem[];
+};
+declare class LogosphereCombobox {
+    label: _angular_core.InputSignal<string>;
+    helper: _angular_core.InputSignal<string>;
+    error: _angular_core.InputSignal<string>;
+    placeholder: _angular_core.InputSignal<string>;
+    required: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    readOnly: _angular_core.InputSignal<boolean>;
+    loading: _angular_core.InputSignal<boolean>;
+    variant: _angular_core.InputSignal<"default" | "subtle">;
+    multiple: _angular_core.InputSignal<boolean>;
+    filterable: _angular_core.InputSignal<boolean>;
+    optionLabel: _angular_core.InputSignal<string>;
+    optionValue: _angular_core.InputSignal<string>;
+    emptyMessage: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<"default" | "large">;
+    items: _angular_core.InputSignal<ComboboxItem[]>;
+    value: _angular_core.InputSignal<unknown>;
+    clearable: _angular_core.InputSignal<boolean>;
+    itemRenderer: _angular_core.InputSignal<ComboboxItemRenderer | undefined>;
+    onSearch: _angular_core.InputSignal<((detail: ComboboxSearchChangeDetail) => void | Promise<unknown>) | undefined>;
+    onFocus: _angular_core.InputSignal<((detail: ComboboxFocusDetail) => void | Promise<unknown>) | undefined>;
+    onLoadMore: _angular_core.InputSignal<((detail: ComboboxLoadMoreDetail) => void | Promise<unknown>) | undefined>;
+    change: _angular_core.OutputEmitterRef<ComboboxChangeDetail>;
+    lgsChange: _angular_core.OutputEmitterRef<ComboboxLgsChangeDetail>;
+    selected: _angular_core.OutputEmitterRef<{
+        selected: ComboboxItem[];
+    }>;
+    searchChange: _angular_core.OutputEmitterRef<ComboboxSearchChangeDetail>;
+    comboboxFocus: _angular_core.OutputEmitterRef<ComboboxFocusDetail>;
+    onChange(event: Event): void;
+    onLgsChange(event: Event): void;
+    onSelected(event: Event): void;
+    onSearchChange(event: Event): void;
+    onComboboxFocus(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereCombobox, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereCombobox, "lgs-combobox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "filterable": { "alias": "filterable"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "itemRenderer": { "alias": "itemRenderer"; "required": false; "isSignal": true; }; "onSearch": { "alias": "onSearch"; "required": false; "isSignal": true; }; "onFocus": { "alias": "onFocus"; "required": false; "isSignal": true; }; "onLoadMore": { "alias": "onLoadMore"; "required": false; "isSignal": true; }; }, { "change": "change"; "lgsChange": "lgsChange"; "selected": "selected"; "searchChange": "searchChange"; "comboboxFocus": "comboboxFocus"; }, never, never, true, never>;
+}
+
+export { LogosphereCombobox };
+export type { ComboboxChangeDetail, ComboboxFocusDetail, ComboboxItem, ComboboxItemRenderer, ComboboxLgsChangeDetail, ComboboxLoadMoreDetail, ComboboxSearchChangeDetail };

package/types/logosphere-ui-angular-src-lib-datepicker.d.ts

@@ -0,0 +1,36 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+declare class LogosphereDatePicker {
+    value: _angular_core.InputSignal<string | null>;
+    min: _angular_core.InputSignal<string | null>;
+    max: _angular_core.InputSignal<string | null>;
+    required: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    expandFactor: _angular_core.InputSignal<number>;
+    placeholder: _angular_core.InputSignal<string>;
+    label: _angular_core.InputSignal<string>;
+    helper: _angular_core.InputSignal<string>;
+    error: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<"default" | "large">;
+    variant: _angular_core.InputSignal<"default" | "subtle">;
+    rangeMode: _angular_core.InputSignal<boolean>;
+    disabledDays: _angular_core.InputSignal<number[]>;
+    rangeStart: _angular_core.InputSignal<string | null>;
+    rangeEnd: _angular_core.InputSignal<string | null>;
+    change: _angular_core.OutputEmitterRef<{
+        value: string | null;
+    }>;
+    rangeChange: _angular_core.OutputEmitterRef<{
+        start: string;
+        end: string;
+    }>;
+    set elRef(element: ElementRef | undefined);
+    onChange(event: Event): void;
+    onRangeChange(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereDatePicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereDatePicker, "lgs-datepicker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "expandFactor": { "alias": "expandFactor"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "rangeMode": { "alias": "rangeMode"; "required": false; "isSignal": true; }; "disabledDays": { "alias": "disabledDays"; "required": false; "isSignal": true; }; "rangeStart": { "alias": "rangeStart"; "required": false; "isSignal": true; }; "rangeEnd": { "alias": "rangeEnd"; "required": false; "isSignal": true; }; }, { "change": "change"; "rangeChange": "rangeChange"; }, never, never, true, never>;
+}
+
+export { LogosphereDatePicker };

package/types/logosphere-ui-angular-src-lib-download-manager.d.ts

@@ -0,0 +1,11 @@
+import * as _angular_core from '@angular/core';
+
+declare class LogosphereDownloadManager {
+    chunkSize: _angular_core.InputSignal<number>;
+    maxConcurrentDownloads: _angular_core.InputSignal<number>;
+    maxConcurrentChunks: _angular_core.InputSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereDownloadManager, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereDownloadManager, "lgs-download-manager", never, { "chunkSize": { "alias": "chunkSize"; "required": false; "isSignal": true; }; "maxConcurrentDownloads": { "alias": "maxConcurrentDownloads"; "required": false; "isSignal": true; }; "maxConcurrentChunks": { "alias": "maxConcurrentChunks"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { LogosphereDownloadManager };

package/types/logosphere-ui-angular-src-lib-drawer.d.ts

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+declare class LogosphereDrawer {
+    open: _angular_core.InputSignal<boolean>;
+    drawerTitle: _angular_core.InputSignal<string>;
+    position: _angular_core.InputSignal<"left" | "right">;
+    width: _angular_core.InputSignal<number>;
+    closeOnEsc: _angular_core.InputSignal<boolean>;
+    containerSelector: _angular_core.InputSignal<string>;
+    drawerOpen: _angular_core.OutputEmitterRef<void>;
+    drawerClose: _angular_core.OutputEmitterRef<void>;
+    onDrawerOpen(): void;
+    onDrawerClose(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereDrawer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereDrawer, "lgs-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "drawerTitle": { "alias": "title"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "closeOnEsc": { "alias": "closeOnEsc"; "required": false; "isSignal": true; }; "containerSelector": { "alias": "containerSelector"; "required": false; "isSignal": true; }; }, { "drawerOpen": "drawerOpen"; "drawerClose": "drawerClose"; }, never, ["*"], true, never>;
+}
+
+export { LogosphereDrawer };

package/types/logosphere-ui-angular-src-lib-formfield.d.ts

@@ -0,0 +1,20 @@
+import * as _angular_core from '@angular/core';
+
+declare class LogosphereFormField {
+    label: _angular_core.InputSignal<string>;
+    helper: _angular_core.InputSignal<string>;
+    error: _angular_core.InputSignal<string>;
+    placeholder: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<"default" | "large">;
+    variant: _angular_core.InputSignal<"default" | "subtle">;
+    cursor: _angular_core.InputSignal<"default" | "text" | "pointer">;
+    required: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    multiline: _angular_core.InputSignal<boolean>;
+    forceFocused: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereFormField, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereFormField, "lgs-formfield", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "cursor": { "alias": "cursor"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "forceFocused": { "alias": "forceFocused"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[slot=prefix]", "[slot=suffix]", "[slot=clear]"], true, never>;
+}
+
+export { LogosphereFormField };

package/types/logosphere-ui-angular-src-lib-icon.d.ts

@@ -0,0 +1,10 @@
+import * as _angular_core from '@angular/core';
+
+declare class LogosphereIcon {
+    name: _angular_core.InputSignal<string>;
+    size: _angular_core.InputSignal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereIcon, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereIcon, "lgs-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { LogosphereIcon };

package/types/logosphere-ui-angular-src-lib-input-group.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from '@angular/core';
+
+declare class LogosphereInputGroup {
+    stretch: i0.InputSignal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LogosphereInputGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LogosphereInputGroup, "lgs-input-group", never, { "stretch": { "alias": "stretch"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { LogosphereInputGroup };

package/types/logosphere-ui-angular-src-lib-input.d.ts

@@ -0,0 +1,48 @@
+import * as _angular_core from '@angular/core';
+
+declare class LogosphereInput {
+    value: _angular_core.InputSignal<string>;
+    type: _angular_core.InputSignal<string>;
+    placeholder: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string>;
+    autocomplete: _angular_core.InputSignal<string>;
+    minlength: _angular_core.InputSignal<number | undefined>;
+    maxlength: _angular_core.InputSignal<number | undefined>;
+    pattern: _angular_core.InputSignal<string>;
+    min: _angular_core.InputSignal<number | undefined>;
+    max: _angular_core.InputSignal<number | undefined>;
+    step: _angular_core.InputSignal<number | undefined>;
+    size: _angular_core.InputSignal<"default" | "large">;
+    variant: _angular_core.InputSignal<"default" | "subtle">;
+    label: _angular_core.InputSignal<string>;
+    helper: _angular_core.InputSignal<string>;
+    error: _angular_core.InputSignal<string>;
+    required: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    readonly: _angular_core.InputSignal<boolean>;
+    pickOnly: _angular_core.InputSignal<boolean>;
+    mask: _angular_core.InputSignal<string>;
+    inputEvent: _angular_core.OutputEmitterRef<{
+        value: string;
+        rawValue: string;
+    }>;
+    change: _angular_core.OutputEmitterRef<{
+        value: string;
+    }>;
+    keydown: _angular_core.OutputEmitterRef<{
+        key: string;
+    }>;
+    keyup: _angular_core.OutputEmitterRef<{
+        key: string;
+    }>;
+    clear: _angular_core.OutputEmitterRef<void>;
+    onInput(event: Event): void;
+    onChange(event: Event): void;
+    onKeydown(event: Event): void;
+    onKeyup(event: Event): void;
+    onClear(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereInput, "lgs-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "minlength": { "alias": "minlength"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "pickOnly": { "alias": "pickOnly"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; }, { "inputEvent": "inputChange"; "change": "change"; "keydown": "keydown"; "keyup": "keyup"; "clear": "clear"; }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
+}
+
+export { LogosphereInput };

package/types/logosphere-ui-angular-src-lib-left-menu.d.ts

@@ -0,0 +1,24 @@
+import * as _angular_core from '@angular/core';
+
+declare class LogosphereLeftMenu {
+    open: _angular_core.InputSignal<boolean>;
+    openWidth: _angular_core.InputSignal<number>;
+    storageKey: _angular_core.InputSignal<string>;
+    itemClick: _angular_core.OutputEmitterRef<{
+        item: unknown;
+    }>;
+    onItemClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereLeftMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereLeftMenu, "lgs-left-menu", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "openWidth": { "alias": "openWidth"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*"], true, never>;
+}
+
+declare class LogosphereLeftMenuItem {
+    itemId: _angular_core.InputSignal<string>;
+    label: _angular_core.InputSignal<string>;
+    disabled: _angular_core.InputSignal<boolean>;
+    active: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereLeftMenuItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereLeftMenuItem, "lgs-left-menu-item", never, { "itemId": { "alias": "itemId"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { LogosphereLeftMenu, LogosphereLeftMenuItem };

package/types/logosphere-ui-angular-src-lib-loading.d.ts

@@ -0,0 +1,10 @@
+import * as _angular_core from '@angular/core';
+
+declare class LogosphereLoading {
+    label: _angular_core.InputSignal<string>;
+    variant: _angular_core.InputSignal<"default" | "small">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereLoading, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereLoading, "lgs-loading", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { LogosphereLoading };

package/types/logosphere-ui-angular-src-lib-modal.d.ts

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+declare class LogosphereModal {
+    open: _angular_core.InputSignal<boolean>;
+    modalTitle: _angular_core.InputSignal<string>;
+    closeOnEsc: _angular_core.InputSignal<boolean>;
+    closeOnBackdrop: _angular_core.InputSignal<boolean>;
+    showBack: _angular_core.InputSignal<boolean>;
+    showClose: _angular_core.InputSignal<boolean>;
+    modalOpen: _angular_core.OutputEmitterRef<void>;
+    modalClose: _angular_core.OutputEmitterRef<void>;
+    onModalOpen(): void;
+    onModalClose(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LogosphereModal, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LogosphereModal, "lgs-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "modalTitle": { "alias": "title"; "required": false; "isSignal": true; }; "closeOnEsc": { "alias": "closeOnEsc"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "showBack": { "alias": "showBack"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; }, { "modalOpen": "modalOpen"; "modalClose": "modalClose"; }, never, ["*", "[slot=footer]"], true, never>;
+}
+
+export { LogosphereModal };