@logosphere-ui/angular 0.0.1-alpha.1 → 0.0.1-alpha.10

package/fesm2022/logosphere-ui-angular.mjs

@@ -8,6 +8,7 @@ import '@logosphere-ui/core/switch';
 import '@logosphere-ui/core/breadcrumb';
 import '@logosphere-ui/core/card';
 import '@logosphere-ui/core/input';
+import '@logosphere-ui/core/pagination';
 import '@logosphere-ui/core/popover';
 import '@logosphere-ui/core/textarea';
 import '@logosphere-ui/core/timepicker';
@@ -36,11 +37,11 @@ class LogosphereBadge {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereBadge, isStandalone: true, selector: "lgs-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, isRound: { classPropertyName: "isRound", publicName: "isRound", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: `
     <logosphere-badge
-      [variant]="variant()"
-      [size]="size()"
-      [text]="text()"
-      [closeable]="closeable()"
-      [isRound]="isRound()"
+      [attr.variant]="variant()"
+      [attr.size]="size()"
+      [attr.text]="text()"
+      [attr.closeable]="closeable() ? '' : null"
+      [attr.isround]="isRound() ? '' : null"
       (close)="onClose($event)"
     >
       <ng-content></ng-content>
@@ -53,11 +54,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-badge
-      [variant]="variant()"
-      [size]="size()"
-      [text]="text()"
-      [closeable]="closeable()"
-      [isRound]="isRound()"
+      [attr.variant]="variant()"
+      [attr.size]="size()"
+      [attr.text]="text()"
+      [attr.closeable]="closeable() ? '' : null"
+      [attr.isround]="isRound() ? '' : null"
       (close)="onClose($event)"
     >
       <ng-content></ng-content>
@@ -69,11 +70,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
 class LogosphereButton {
     theme = input('primary', ...(ngDevMode ? [{ debugName: "theme" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereButton, isStandalone: true, selector: "lgs-button", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <logosphere-button [theme]="theme()" [size]="size()" [variant]="variant()" [iconOnly]="iconOnly()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereButton, isStandalone: true, selector: "lgs-button", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <logosphere-button
+      [attr.theme]="theme()"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
+      [attr.icononly]="iconOnly() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+    >
       <ng-content></ng-content>
     </logosphere-button>`, isInline: true });
 }
@@ -83,12 +91,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     selector: 'lgs-button',
                     imports: [],
                     template: `
-    <logosphere-button [theme]="theme()" [size]="size()" [variant]="variant()" [iconOnly]="iconOnly()">
+    <logosphere-button
+      [attr.theme]="theme()"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
+      [attr.icononly]="iconOnly() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+    >
       <ng-content></ng-content>
     </logosphere-button>`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
+        }], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class LogosphereCheckbox {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -105,12 +119,12 @@ class LogosphereCheckbox {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereCheckbox, isStandalone: true, selector: "lgs-checkbox", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: `
     <logosphere-checkbox
-      [checked]="checked()"
-      [disabled]="disabled()"
-      [indeterminate]="indeterminate()"
-      [label]="label()"
-      [value]="value()"
-      [type]="type()"
+      [attr.checked]="checked() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.indeterminate]="indeterminate() ? '' : null"
+      [attr.label]="label()"
+      [attr.value]="value()"
+      [attr.type]="type()"
       (lgsChange)="onChange($event)"
     >
     </logosphere-checkbox>`, isInline: true });
@@ -122,12 +136,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-checkbox
-      [checked]="checked()"
-      [disabled]="disabled()"
-      [indeterminate]="indeterminate()"
-      [label]="label()"
-      [value]="value()"
-      [type]="type()"
+      [attr.checked]="checked() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.indeterminate]="indeterminate() ? '' : null"
+      [attr.label]="label()"
+      [attr.value]="value()"
+      [attr.type]="type()"
       (lgsChange)="onChange($event)"
     >
     </logosphere-checkbox>`,
@@ -151,18 +165,18 @@ class LogosphereFormField {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereFormField, isStandalone: true, selector: "lgs-formfield", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, cursor: { classPropertyName: "cursor", publicName: "cursor", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, forceFocused: { classPropertyName: "forceFocused", publicName: "forceFocused", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <logosphere-formfield
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [placeholder]="placeholder()"
-      [size]="size()"
-      [variant]="variant()"
-      [cursor]="cursor()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readonly]="readonly()"
-      [multiline]="multiline()"
-      [forceFocused]="forceFocused()"
+      [attr.label]="label()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
+      [attr.placeholder]="placeholder()"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
+      [attr.cursor]="cursor()"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readonly() ? '' : null"
+      [attr.multiline]="multiline() ? '' : null"
+      [attr.forcefocused]="forceFocused() ? '' : null"
     >
       <ng-content></ng-content>
       <ng-content select="[slot=prefix]" slot="prefix"></ng-content>
@@ -178,18 +192,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-formfield
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [placeholder]="placeholder()"
-      [size]="size()"
-      [variant]="variant()"
-      [cursor]="cursor()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readonly]="readonly()"
-      [multiline]="multiline()"
-      [forceFocused]="forceFocused()"
+      [attr.label]="label()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
+      [attr.placeholder]="placeholder()"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
+      [attr.cursor]="cursor()"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readonly() ? '' : null"
+      [attr.multiline]="multiline() ? '' : null"
+      [attr.forcefocused]="forceFocused() ? '' : null"
     >
       <ng-content></ng-content>
       <ng-content select="[slot=prefix]" slot="prefix"></ng-content>
@@ -213,9 +227,9 @@ class LogosphereSwitch {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereSwitch, isStandalone: true, selector: "lgs-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, ngImport: i0, template: `
     <logosphere-switch
-      [checked]="checked()"
-      [disabled]="disabled()"
-      [size]="size()"
+      [attr.checked]="checked() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.size]="size()"
       (change)="onChange($event)"
     ></logosphere-switch>
   `, isInline: true });
@@ -227,9 +241,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-switch
-      [checked]="checked()"
-      [disabled]="disabled()"
-      [size]="size()"
+      [attr.checked]="checked() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.size]="size()"
       (change)="onChange($event)"
     ></logosphere-switch>
   `,
@@ -282,12 +296,12 @@ class LogosphereCard {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereCard, isStandalone: true, selector: "lgs-card", inputs: { cardTitle: { classPropertyName: "cardTitle", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, okLabel: { classPropertyName: "okLabel", publicName: "okLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ok: "ok", cancel: "cancel" }, ngImport: i0, template: `
     <logosphere-card
-      [title]="cardTitle()"
-      [description]="description()"
+      [attr.card-title]="cardTitle()"
+      [attr.description]="description()"
       [header]="header()"
       [footer]="footer()"
-      [okLabel]="okLabel()"
-      [cancelLabel]="cancelLabel()"
+      [attr.oklabel]="okLabel()"
+      [attr.cancellabel]="cancelLabel()"
       (ok)="onOk()"
       (cancel)="onCancel()"
     >
@@ -304,12 +318,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-card
-      [title]="cardTitle()"
-      [description]="description()"
+      [attr.card-title]="cardTitle()"
+      [attr.description]="description()"
       [header]="header()"
       [footer]="footer()"
-      [okLabel]="okLabel()"
-      [cancelLabel]="cancelLabel()"
+      [attr.oklabel]="okLabel()"
+      [attr.cancellabel]="cancelLabel()"
       (ok)="onOk()"
       (cancel)="onCancel()"
     >
@@ -370,26 +384,26 @@ class LogosphereInput {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereInput, isStandalone: true, selector: "lgs-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputEvent: "inputChange", change: "change", keydown: "keydown", keyup: "keyup", clear: "clear" }, ngImport: i0, template: `
     <logosphere-input
-      [value]="value()"
-      [type]="type()"
-      [placeholder]="placeholder()"
-      [name]="name()"
-      [autocomplete]="autocomplete()"
+      [attr.value]="value()"
+      [attr.type]="type()"
+      [attr.placeholder]="placeholder()"
+      [attr.name]="name()"
+      [attr.autocomplete]="autocomplete()"
       [attr.minlength]="minlength()"
       [attr.maxlength]="maxlength()"
-      [pattern]="pattern()"
+      [attr.pattern]="pattern()"
       [attr.min]="min()"
       [attr.max]="max()"
       [attr.step]="step()"
-      [size]="size()"
-      [variant]="variant()"
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readonly]="readonly()"
-      [mask]="mask()"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
+      [attr.label]="label()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readonly() ? '' : null"
+      [attr.mask]="mask()"
       (input)="onInput($event)"
       (change)="onChange($event)"
       (keydown)="onKeydown($event)"
@@ -408,26 +422,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-input
-      [value]="value()"
-      [type]="type()"
-      [placeholder]="placeholder()"
-      [name]="name()"
-      [autocomplete]="autocomplete()"
+      [attr.value]="value()"
+      [attr.type]="type()"
+      [attr.placeholder]="placeholder()"
+      [attr.name]="name()"
+      [attr.autocomplete]="autocomplete()"
       [attr.minlength]="minlength()"
       [attr.maxlength]="maxlength()"
-      [pattern]="pattern()"
+      [attr.pattern]="pattern()"
       [attr.min]="min()"
       [attr.max]="max()"
       [attr.step]="step()"
-      [size]="size()"
-      [variant]="variant()"
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readonly]="readonly()"
-      [mask]="mask()"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
+      [attr.label]="label()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readonly() ? '' : null"
+      [attr.mask]="mask()"
       (input)="onInput($event)"
       (change)="onChange($event)"
       (keydown)="onKeydown($event)"
@@ -442,6 +456,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], inputEvent: [{ type: i0.Output, args: ["inputChange"] }], change: [{ type: i0.Output, args: ["change"] }], keydown: [{ type: i0.Output, args: ["keydown"] }], keyup: [{ type: i0.Output, args: ["keyup"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
 
+class LogospherePagination {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    page = input(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
+    pageSize = input(25, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    total = input(0, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    showPageSize = input(true, ...(ngDevMode ? [{ debugName: "showPageSize" }] : []));
+    showTotal = input(true, ...(ngDevMode ? [{ debugName: "showTotal" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    prevLabel = input('Önceki', ...(ngDevMode ? [{ debugName: "prevLabel" }] : []));
+    nextLabel = input('Sonraki', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    pageLabel = input('Sayfa', ...(ngDevMode ? [{ debugName: "pageLabel" }] : []));
+    perPageLabel = input('/ sayfa', ...(ngDevMode ? [{ debugName: "perPageLabel" }] : []));
+    totalLabel = input('kayıt', ...(ngDevMode ? [{ debugName: "totalLabel" }] : []));
+    pageChange = output({ alias: 'page-change' });
+    set elRef(element) {
+        if (element) {
+            element.nativeElement.pageSizeOptions = this.pageSizeOptions();
+        }
+    }
+    onPageChange(event) {
+        const e = event;
+        this.pageChange.emit(e.detail);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogospherePagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogospherePagination, isStandalone: true, selector: "lgs-pagination", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, showTotal: { classPropertyName: "showTotal", publicName: "showTotal", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLabel: { classPropertyName: "pageLabel", publicName: "pageLabel", isSignal: true, isRequired: false, transformFunction: null }, perPageLabel: { classPropertyName: "perPageLabel", publicName: "perPageLabel", isSignal: true, isRequired: false, transformFunction: null }, totalLabel: { classPropertyName: "totalLabel", publicName: "totalLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "page-change" }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true }], ngImport: i0, template: `
+    <logosphere-pagination
+      #el
+      [attr.variant]="variant()"
+      [attr.page]="page()"
+      [attr.pagesize]="pageSize()"
+      [attr.total]="total()"
+      [showPageSize]="showPageSize()"
+      [showTotal]="showTotal()"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.prevlabel]="prevLabel()"
+      [attr.nextlabel]="nextLabel()"
+      [attr.pagelabel]="pageLabel()"
+      [attr.perpagelabel]="perPageLabel()"
+      [attr.totallabel]="totalLabel()"
+      (page-change)="onPageChange($event)"
+    ></logosphere-pagination>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogospherePagination, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lgs-pagination',
+                    imports: [],
+                    template: `
+    <logosphere-pagination
+      #el
+      [attr.variant]="variant()"
+      [attr.page]="page()"
+      [attr.pagesize]="pageSize()"
+      [attr.total]="total()"
+      [showPageSize]="showPageSize()"
+      [showTotal]="showTotal()"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.prevlabel]="prevLabel()"
+      [attr.nextlabel]="nextLabel()"
+      [attr.pagelabel]="pageLabel()"
+      [attr.perpagelabel]="perPageLabel()"
+      [attr.totallabel]="totalLabel()"
+      (page-change)="onPageChange($event)"
+    ></logosphere-pagination>
+  `,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], showTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotal", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], pageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLabel", required: false }] }], perPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPageLabel", required: false }] }], totalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["page-change"] }], elRef: [{
+                type: ViewChild,
+                args: ['el', { static: false }]
+            }] } });
+
 class LogospherePopover {
     popoverTitle = input('', { ...(ngDevMode ? { debugName: "popoverTitle" } : {}), alias: 'title' });
     trigger = input('click', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
@@ -460,11 +548,11 @@ class LogospherePopover {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogospherePopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogospherePopover, isStandalone: true, selector: "lgs-popover", inputs: { popoverTitle: { classPropertyName: "popoverTitle", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { popoverOpen: "popoverOpen", popoverClose: "popoverClose" }, ngImport: i0, template: `
     <logosphere-popover
-      [title]="popoverTitle()"
-      [trigger]="trigger()"
-      [placement]="placement()"
-      [offset]="offset()"
-      [open]="open()"
+      [attr.popover-title]="popoverTitle()"
+      [attr.trigger]="trigger()"
+      [attr.placement]="placement()"
+      [attr.offset]="offset()"
+      [attr.open]="open() ? '' : null"
       [closeOnOutsideClick]="closeOnOutsideClick()"
       (popover-open)="onPopoverOpen()"
       (popover-close)="onPopoverClose()"
@@ -481,11 +569,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-popover
-      [title]="popoverTitle()"
-      [trigger]="trigger()"
-      [placement]="placement()"
-      [offset]="offset()"
-      [open]="open()"
+      [attr.popover-title]="popoverTitle()"
+      [attr.trigger]="trigger()"
+      [attr.placement]="placement()"
+      [attr.offset]="offset()"
+      [attr.open]="open() ? '' : null"
       [closeOnOutsideClick]="closeOnOutsideClick()"
       (popover-open)="onPopoverOpen()"
       (popover-close)="onPopoverClose()"
@@ -536,26 +624,26 @@ class LogosphereTextarea {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereTextarea, isStandalone: true, selector: "lgs-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputEvent: "inputChange", change: "change", clear: "clear" }, ngImport: i0, template: `
     <logosphere-textarea
-      [value]="value()"
-      [placeholder]="placeholder()"
-      [name]="name()"
-      [autocomplete]="autocomplete()"
+      [attr.value]="value()"
+      [attr.placeholder]="placeholder()"
+      [attr.name]="name()"
+      [attr.autocomplete]="autocomplete()"
       [attr.minlength]="minlength()"
       [attr.maxlength]="maxlength()"
-      [rows]="rows()"
-      [maxRows]="maxRows()"
+      [attr.rows]="rows()"
+      [attr.maxrows]="maxRows()"
       [attr.cols]="cols()"
-      [wrap]="wrap()"
-      [resize]="resize()"
+      [attr.wrap]="wrap()"
+      [attr.resize]="resize()"
       [autoResize]="autoResize()"
-      [size]="size()"
-      [variant]="variant()"
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readonly]="readonly()"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
+      [attr.label]="label()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readonly() ? '' : null"
       (input)="onInput($event)"
       (change)="onChange($event)"
       (clear)="onClear()"
@@ -569,26 +657,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-textarea
-      [value]="value()"
-      [placeholder]="placeholder()"
-      [name]="name()"
-      [autocomplete]="autocomplete()"
+      [attr.value]="value()"
+      [attr.placeholder]="placeholder()"
+      [attr.name]="name()"
+      [attr.autocomplete]="autocomplete()"
       [attr.minlength]="minlength()"
       [attr.maxlength]="maxlength()"
-      [rows]="rows()"
-      [maxRows]="maxRows()"
+      [attr.rows]="rows()"
+      [attr.maxrows]="maxRows()"
       [attr.cols]="cols()"
-      [wrap]="wrap()"
-      [resize]="resize()"
+      [attr.wrap]="wrap()"
+      [attr.resize]="resize()"
       [autoResize]="autoResize()"
-      [size]="size()"
-      [variant]="variant()"
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readonly]="readonly()"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
+      [attr.label]="label()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readonly() ? '' : null"
       (input)="onInput($event)"
       (change)="onChange($event)"
       (clear)="onClear()"
@@ -621,16 +709,16 @@ class LogosphereTimePicker {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereTimePicker, isStandalone: true, selector: "lgs-timepicker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", clear: "clear" }, ngImport: i0, template: `
     <logosphere-timepicker
-      [value]="value()"
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [placeholder]="placeholder()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readonly]="readonly()"
-      [size]="size()"
-      [variant]="variant()"
+      [attr.value]="value()"
+      [attr.label]="label()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
+      [attr.placeholder]="placeholder()"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readonly() ? '' : null"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
       (change)="onChange($event)"
       (clear)="onClear()"
     ></logosphere-timepicker>
@@ -643,16 +731,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-timepicker
-      [value]="value()"
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [placeholder]="placeholder()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readonly]="readonly()"
-      [size]="size()"
-      [variant]="variant()"
+      [attr.value]="value()"
+      [attr.label]="label()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
+      [attr.placeholder]="placeholder()"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readonly() ? '' : null"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
       (change)="onChange($event)"
       (clear)="onClear()"
     ></logosphere-timepicker>
@@ -804,13 +892,11 @@ class LogosphereCombobox {
     emptyMessage = input('Sonuç yok', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
     size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    itemRenderer = input(undefined, ...(ngDevMode ? [{ debugName: "itemRenderer" }] : []));
     change = output();
     selected = output();
     set elRef(element) {
-        console.log(element);
         if (element) {
-            console.log(element.nativeElement);
-            console.log(this.items());
             element.nativeElement.items = this.items();
         }
     }
@@ -823,23 +909,24 @@ class LogosphereCombobox {
         this.selected.emit(e.detail);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereCombobox, isStandalone: true, selector: "lgs-combobox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", selected: "selected" }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereCombobox, isStandalone: true, selector: "lgs-combobox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", selected: "selected" }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true }], ngImport: i0, template: `
     <logosphere-combobox
       #el
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [placeholder]="placeholder()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readOnly]="readOnly()"
-      [variant]="variant()"
-      [multiple]="multiple()"
-      [filterable]="filterable()"
-      [optionLabel]="optionLabel()"
-      [optionValue]="optionValue()"
-      [emptyMessage]="emptyMessage()"
-      [size]="size()"
+      [attr.label]="label()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
+      [attr.placeholder]="placeholder()"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readOnly() ? '' : null"
+      [attr.variant]="variant()"
+      [attr.multiple]="multiple() ? '' : null"
+      [attr.filterable]="filterable() ? '' : null"
+      [attr.optionlabel]="optionLabel()"
+      [attr.optionvalue]="optionValue()"
+      [attr.emptymessage]="emptyMessage()"
+      [attr.size]="size()"
+      [itemRenderer]="itemRenderer()"
       (change)="onChange($event)"
       (selected)="onSelected($event)"
     ></logosphere-combobox>
@@ -853,27 +940,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     template: `
     <logosphere-combobox
       #el
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [placeholder]="placeholder()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readOnly]="readOnly()"
-      [variant]="variant()"
-      [multiple]="multiple()"
-      [filterable]="filterable()"
-      [optionLabel]="optionLabel()"
-      [optionValue]="optionValue()"
-      [emptyMessage]="emptyMessage()"
-      [size]="size()"
+      [attr.label]="label()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
+      [attr.placeholder]="placeholder()"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readOnly() ? '' : null"
+      [attr.variant]="variant()"
+      [attr.multiple]="multiple() ? '' : null"
+      [attr.filterable]="filterable() ? '' : null"
+      [attr.optionlabel]="optionLabel()"
+      [attr.optionvalue]="optionValue()"
+      [attr.emptymessage]="emptyMessage()"
+      [attr.size]="size()"
+      [itemRenderer]="itemRenderer()"
       (change)="onChange($event)"
       (selected)="onSelected($event)"
     ></logosphere-combobox>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], selected: [{ type: i0.Output, args: ["selected"] }], elRef: [{
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemRenderer", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], selected: [{ type: i0.Output, args: ["selected"] }], elRef: [{
                 type: ViewChild,
                 args: ['el', { static: false }]
             }] } });
@@ -977,9 +1065,9 @@ class LogosphereDownloadManager {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereDownloadManager, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereDownloadManager, isStandalone: true, selector: "lgs-download-manager", inputs: { chunkSize: { classPropertyName: "chunkSize", publicName: "chunkSize", isSignal: true, isRequired: false, transformFunction: null }, maxConcurrentDownloads: { classPropertyName: "maxConcurrentDownloads", publicName: "maxConcurrentDownloads", isSignal: true, isRequired: false, transformFunction: null }, maxConcurrentChunks: { classPropertyName: "maxConcurrentChunks", publicName: "maxConcurrentChunks", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <download-manager
-      [chunkSize]="chunkSize()"
-      [maxConcurrentDownloads]="maxConcurrentDownloads()"
-      [maxConcurrentChunks]="maxConcurrentChunks()"
+      [attr.chunksize]="chunkSize()"
+      [attr.maxconcurrentdownloads]="maxConcurrentDownloads()"
+      [attr.maxconcurrentchunks]="maxConcurrentChunks()"
     ></download-manager>
   `, isInline: true });
 }
@@ -990,9 +1078,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <download-manager
-      [chunkSize]="chunkSize()"
-      [maxConcurrentDownloads]="maxConcurrentDownloads()"
-      [maxConcurrentChunks]="maxConcurrentChunks()"
+      [attr.chunksize]="chunkSize()"
+      [attr.maxconcurrentdownloads]="maxConcurrentDownloads()"
+      [attr.maxconcurrentchunks]="maxConcurrentChunks()"
     ></download-manager>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -1017,12 +1105,12 @@ class LogosphereDrawer {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereDrawer, isStandalone: true, selector: "lgs-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, drawerTitle: { classPropertyName: "drawerTitle", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, containerSelector: { classPropertyName: "containerSelector", publicName: "containerSelector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { drawerOpen: "drawerOpen", drawerClose: "drawerClose" }, ngImport: i0, template: `
     <logosphere-drawer
-      [open]="open()"
-      [title]="drawerTitle()"
-      [position]="position()"
-      [width]="width()"
+      [attr.open]="open() ? '' : null"
+      [attr.drawer-title]="drawerTitle()"
+      [attr.position]="position()"
+      [attr.width]="width()"
       [closeOnEsc]="closeOnEsc()"
-      [containerSelector]="containerSelector()"
+      [attr.containerselector]="containerSelector()"
       (drawer-open)="onDrawerOpen()"
       (drawer-close)="onDrawerClose()"
     >
@@ -1037,12 +1125,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-drawer
-      [open]="open()"
-      [title]="drawerTitle()"
-      [position]="position()"
-      [width]="width()"
+      [attr.open]="open() ? '' : null"
+      [attr.drawer-title]="drawerTitle()"
+      [attr.position]="position()"
+      [attr.width]="width()"
       [closeOnEsc]="closeOnEsc()"
-      [containerSelector]="containerSelector()"
+      [attr.containerselector]="containerSelector()"
       (drawer-open)="onDrawerOpen()"
       (drawer-close)="onDrawerClose()"
     >
@@ -1072,11 +1160,11 @@ class LogosphereLeftMenu {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereLeftMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereLeftMenu, isStandalone: true, selector: "lgs-left-menu", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, closedWidth: { classPropertyName: "closedWidth", publicName: "closedWidth", isSignal: true, isRequired: false, transformFunction: null }, openWidth: { classPropertyName: "openWidth", publicName: "openWidth", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pinChange: "pinChange", itemClick: "itemClick" }, ngImport: i0, template: `
     <logosphere-leftmenu
-      [open]="open()"
-      [pinned]="pinned()"
-      [closedWidth]="closedWidth()"
-      [openWidth]="openWidth()"
-      [storageKey]="storageKey()"
+      [attr.open]="open() ? '' : null"
+      [attr.pinned]="pinned() ? '' : null"
+      [attr.closedwidth]="closedWidth()"
+      [attr.openwidth]="openWidth()"
+      [attr.storagekey]="storageKey()"
       (pin-change)="onPinChange($event)"
       (item-click)="onItemClick($event)"
     >
@@ -1091,11 +1179,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-leftmenu
-      [open]="open()"
-      [pinned]="pinned()"
-      [closedWidth]="closedWidth()"
-      [openWidth]="openWidth()"
-      [storageKey]="storageKey()"
+      [attr.open]="open() ? '' : null"
+      [attr.pinned]="pinned() ? '' : null"
+      [attr.closedwidth]="closedWidth()"
+      [attr.openwidth]="openWidth()"
+      [attr.storagekey]="storageKey()"
       (pin-change)="onPinChange($event)"
       (item-click)="onItemClick($event)"
     >
@@ -1114,10 +1202,10 @@ class LogosphereLeftMenuItem {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereLeftMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereLeftMenuItem, isStandalone: true, selector: "lgs-left-menu-item", inputs: { itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <leftmenu-item
-      [itemId]="itemId()"
-      [label]="label()"
-      [disabled]="disabled()"
-      [active]="active()"
+      [attr.itemid]="itemId()"
+      [attr.label]="label()"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.active]="active() ? '' : null"
     >
       <ng-content></ng-content>
     </leftmenu-item>
@@ -1130,10 +1218,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <leftmenu-item
-      [itemId]="itemId()"
-      [label]="label()"
-      [disabled]="disabled()"
-      [active]="active()"
+      [attr.itemid]="itemId()"
+      [attr.label]="label()"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.active]="active() ? '' : null"
     >
       <ng-content></ng-content>
     </leftmenu-item>
@@ -1148,7 +1236,7 @@ class LogosphereModal {
     closeOnEsc = input(true, ...(ngDevMode ? [{ debugName: "closeOnEsc" }] : []));
     closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : []));
     showBack = input(false, ...(ngDevMode ? [{ debugName: "showBack" }] : []));
-    showClose = input(false, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
+    showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
     modalOpen = output();
     modalClose = output();
     onModalOpen() {
@@ -1160,11 +1248,11 @@ class LogosphereModal {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereModal, isStandalone: true, selector: "lgs-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, modalTitle: { classPropertyName: "modalTitle", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose" }, ngImport: i0, template: `
     <logosphere-modal
-      [open]="open()"
-      [title]="modalTitle()"
+      [attr.open]="open() ? '' : null"
+      [attr.modal-title]="modalTitle()"
       [closeOnEsc]="closeOnEsc()"
       [closeOnBackdrop]="closeOnBackdrop()"
-      [showBack]="showBack()"
+      [attr.showback]="showBack() ? '' : null"
       [showClose]="showClose()"
       (modal-open)="onModalOpen()"
       (modal-close)="onModalClose()"
@@ -1181,11 +1269,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-modal
-      [open]="open()"
-      [title]="modalTitle()"
+      [attr.open]="open() ? '' : null"
+      [attr.modal-title]="modalTitle()"
       [closeOnEsc]="closeOnEsc()"
       [closeOnBackdrop]="closeOnBackdrop()"
-      [showBack]="showBack()"
+      [attr.showback]="showBack() ? '' : null"
       [showClose]="showClose()"
       (modal-open)="onModalOpen()"
       (modal-close)="onModalClose()"
@@ -1217,9 +1305,9 @@ class LogosphereTab {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereTab, isStandalone: true, selector: "lgs-tab", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true }], ngImport: i0, template: `
     <logosphere-tab
       #el
-      [activeTab]="activeTab()"
+      [attr.activetab]="activeTab()"
       [lazy]="lazy()"
-      [variant]="variant()"
+      [attr.variant]="variant()"
       (tab-change)="onTabChange($event)"
     >
       <ng-content></ng-content>
@@ -1234,9 +1322,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     template: `
     <logosphere-tab
       #el
-      [activeTab]="activeTab()"
+      [attr.activetab]="activeTab()"
       [lazy]="lazy()"
-      [variant]="variant()"
+      [attr.variant]="variant()"
       (tab-change)="onTabChange($event)"
     >
       <ng-content></ng-content>
@@ -1255,7 +1343,7 @@ class LogosphereToast {
     text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
     closeable = input(true, ...(ngDevMode ? [{ debugName: "closeable" }] : []));
-    duration = input(5000, ...(ngDevMode ? [{ debugName: "duration" }] : []));
+    duration = input(6000, ...(ngDevMode ? [{ debugName: "duration" }] : []));
     autoDismiss = input(true, ...(ngDevMode ? [{ debugName: "autoDismiss" }] : []));
     dismiss = output();
     onDismiss() {
@@ -1264,12 +1352,12 @@ class LogosphereToast {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereToast, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereToast, isStandalone: true, selector: "lgs-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, toastTitle: { classPropertyName: "toastTitle", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, autoDismiss: { classPropertyName: "autoDismiss", publicName: "autoDismiss", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, ngImport: i0, template: `
     <logosphere-toast
-      [type]="type()"
-      [title]="toastTitle()"
-      [text]="text()"
-      [icon]="icon()"
+      [attr.type]="type()"
+      [attr.toast-title]="toastTitle()"
+      [attr.text]="text()"
+      [attr.icon]="icon()"
       [closeable]="closeable()"
-      [duration]="duration()"
+      [attr.duration]="duration()"
       [autoDismiss]="autoDismiss()"
       (dismiss)="onDismiss()"
     ></logosphere-toast>
@@ -1282,12 +1370,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-toast
-      [type]="type()"
-      [title]="toastTitle()"
-      [text]="text()"
-      [icon]="icon()"
+      [attr.type]="type()"
+      [attr.toast-title]="toastTitle()"
+      [attr.text]="text()"
+      [attr.icon]="icon()"
       [closeable]="closeable()"
-      [duration]="duration()"
+      [attr.duration]="duration()"
       [autoDismiss]="autoDismiss()"
       (dismiss)="onDismiss()"
     ></logosphere-toast>
@@ -1346,9 +1434,9 @@ class LogosphereTreeMenu {
     <logosphere-tree-menu
       #el
       [expandOnLabelClick]="expandOnLabelClick()"
-      [chevronPosition]="chevronPosition()"
+      [attr.chevronposition]="chevronPosition()"
       [showLabels]="showLabels()"
-      [iconSize]="iconSize()"
+      [attr.iconsize]="iconSize()"
       (toggle)="onToggle($event)"
       (item-click)="onItemClick($event)"
       (node-click)="onNodeClick($event)"
@@ -1364,9 +1452,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
     <logosphere-tree-menu
       #el
       [expandOnLabelClick]="expandOnLabelClick()"
-      [chevronPosition]="chevronPosition()"
+      [attr.chevronposition]="chevronPosition()"
       [showLabels]="showLabels()"
-      [iconSize]="iconSize()"
+      [attr.iconsize]="iconSize()"
       (toggle)="onToggle($event)"
       (item-click)="onItemClick($event)"
       (node-click)="onNodeClick($event)"
@@ -1386,5 +1474,5 @@ const WRAPPER_VERSION = '1.0.0';
  * Generated bundle index. Do not edit.
  */
 
-export { LogosphereBadge, LogosphereBreadcrumb, LogosphereButton, LogosphereCalendar, LogosphereCard, LogosphereChatbot, LogosphereCheckbox, LogosphereCombobox, LogosphereDatePicker, LogosphereDownloadManager, LogosphereDrawer, LogosphereFormField, LogosphereInput, LogosphereLeftMenu, LogosphereLeftMenuItem, LogosphereModal, LogospherePopover, LogosphereSwitch, LogosphereTab, LogosphereTextarea, LogosphereTimePicker, LogosphereToast, LogosphereToastContainer, LogosphereTreeMenu, WRAPPER_VERSION };
+export { LogosphereBadge, LogosphereBreadcrumb, LogosphereButton, LogosphereCalendar, LogosphereCard, LogosphereChatbot, LogosphereCheckbox, LogosphereCombobox, LogosphereDatePicker, LogosphereDownloadManager, LogosphereDrawer, LogosphereFormField, LogosphereInput, LogosphereLeftMenu, LogosphereLeftMenuItem, LogosphereModal, LogospherePagination, LogospherePopover, LogosphereSwitch, LogosphereTab, LogosphereTextarea, LogosphereTimePicker, LogosphereToast, LogosphereToastContainer, LogosphereTreeMenu, WRAPPER_VERSION };
 //# sourceMappingURL=logosphere-ui-angular.mjs.map