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

package/fesm2022/logosphere-ui-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, CUSTOM_ELEMENTS_SCHEMA, Component, ViewChild } from '@angular/core';
+import { input, output, CUSTOM_ELEMENTS_SCHEMA, Component, viewChild, effect, ViewChild } from '@angular/core';
 import '@logosphere-ui/core/badge';
 import '@logosphere-ui/core/button';
 import '@logosphere-ui/core/checkbox';
@@ -49,11 +49,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>
@@ -66,11 +66,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>
@@ -89,12 +89,12 @@ class LogosphereButton {
     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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <logosphere-button
-      [theme]="theme()"
-      [size]="size()"
-      [variant]="variant()"
-      [iconOnly]="iconOnly()"
-      [disabled]="disabled()"
-      [loading]="loading()"
+      [attr.theme]="theme()"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
+      [attr.icononly]="iconOnly() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.loading]="loading() ? '' : null"
     >
       <ng-content></ng-content>
     </logosphere-button>`, isInline: true });
@@ -106,12 +106,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-button
-      [theme]="theme()"
-      [size]="size()"
-      [variant]="variant()"
-      [iconOnly]="iconOnly()"
-      [disabled]="disabled()"
-      [loading]="loading()"
+      [attr.theme]="theme()"
+      [attr.size]="size()"
+      [attr.variant]="variant()"
+      [attr.icononly]="iconOnly() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.loading]="loading() ? '' : null"
     >
       <ng-content></ng-content>
     </logosphere-button>`,
@@ -135,11 +135,11 @@ class LogosphereCheckbox {
     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.disabled]="disabled() ? '' : null"
+      [attr.indeterminate]="indeterminate() ? '' : null"
+      [attr.label]="label()"
+      [attr.value]="value()"
+      [attr.type]="type()"
       (lgsChange)="onChange($event)"
     >
     </logosphere-checkbox>`, isInline: true });
@@ -152,11 +152,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     template: `
     <logosphere-checkbox
       [checked]="checked()"
-      [disabled]="disabled()"
-      [indeterminate]="indeterminate()"
-      [label]="label()"
-      [value]="value()"
-      [type]="type()"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.indeterminate]="indeterminate() ? '' : null"
+      [attr.label]="label()"
+      [attr.value]="value()"
+      [attr.type]="type()"
       (lgsChange)="onChange($event)"
     >
     </logosphere-checkbox>`,
@@ -177,21 +177,33 @@ class LogosphereFormField {
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline" }] : []));
     forceFocused = input(false, ...(ngDevMode ? [{ debugName: "forceFocused" }] : []));
+    fieldFocus = output();
+    fieldBlur = output();
+    onFieldFocus(event) {
+        const e = event;
+        this.fieldFocus.emit(e.detail);
+    }
+    onFieldBlur(event) {
+        const e = event;
+        this.fieldBlur.emit(e.detail);
+    }
     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: `
+    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 } }, outputs: { fieldFocus: "fieldFocus", fieldBlur: "fieldBlur" }, 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"
+      (field-focus)="onFieldFocus($event)"
+      (field-blur)="onFieldBlur($event)"
     >
       <ng-content></ng-content>
       <ng-content select="[slot=prefix]" slot="prefix"></ng-content>
@@ -207,18 +219,20 @@ 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"
+      (field-focus)="onFieldFocus($event)"
+      (field-blur)="onFieldBlur($event)"
     >
       <ng-content></ng-content>
       <ng-content select="[slot=prefix]" slot="prefix"></ng-content>
@@ -228,20 +242,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
   `,
                     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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], cursor: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursor", 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 }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], forceFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceFocused", required: false }] }] } });
+        }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], cursor: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursor", 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 }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], forceFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceFocused", required: false }] }], fieldFocus: [{ type: i0.Output, args: ["fieldFocus"] }], fieldBlur: [{ type: i0.Output, args: ["fieldBlur"] }] } });
 
 class LogosphereLoading {
     label = input('Yükleniyor', ...(ngDevMode ? [{ debugName: "label" }] : []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereLoading, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereLoading, isStandalone: true, selector: "lgs-loading", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<logosphere-loading [label]="label()" [variant]="variant()"></logosphere-loading>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereLoading, isStandalone: true, selector: "lgs-loading", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<logosphere-loading [attr.label]="label()" [attr.variant]="variant()"></logosphere-loading>`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereLoading, decorators: [{
             type: Component,
             args: [{
                     selector: 'lgs-loading',
                     imports: [],
-                    template: `<logosphere-loading [label]="label()" [variant]="variant()"></logosphere-loading>`,
+                    template: `<logosphere-loading [attr.label]="label()" [attr.variant]="variant()"></logosphere-loading>`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
@@ -259,11 +273,11 @@ class LogosphereNote {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereNote, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereNote, isStandalone: true, selector: "lgs-note", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, noteTitle: { classPropertyName: "noteTitle", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: `
     <logosphere-note
-      [variant]="variant()"
-      [size]="size()"
-      [title]="noteTitle()"
-      [text]="text()"
-      [width]="width()"
+      [attr.variant]="variant()"
+      [attr.size]="size()"
+      [attr.note-title]="noteTitle()"
+      [attr.text]="text()"
+      [attr.width]="width()"
       (close)="onClose($event)"
     >
       <ng-content></ng-content>
@@ -277,11 +291,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-note
-      [variant]="variant()"
-      [size]="size()"
-      [title]="noteTitle()"
-      [text]="text()"
-      [width]="width()"
+      [attr.variant]="variant()"
+      [attr.size]="size()"
+      [attr.note-title]="noteTitle()"
+      [attr.text]="text()"
+      [attr.width]="width()"
       (close)="onClose($event)"
     >
       <ng-content></ng-content>
@@ -313,18 +327,18 @@ class LogosphereSlider {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereSlider, isStandalone: true, selector: "lgs-slider", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null }, minDistance: { classPropertyName: "minDistance", publicName: "minDistance", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, showScale: { classPropertyName: "showScale", publicName: "showScale", isSignal: true, isRequired: false, transformFunction: null }, percentage: { classPropertyName: "percentage", publicName: "percentage", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliderChange: "sliderChange" }, ngImport: i0, template: `
     <logosphere-slider
-      [value]="value()"
-      [min]="min()"
-      [max]="max()"
-      [step]="step()"
-      [disabled]="disabled()"
-      [range]="range()"
-      [rangeStart]="rangeStart()"
-      [rangeEnd]="rangeEnd()"
-      [minDistance]="minDistance()"
-      [tooltip]="tooltip()"
-      [showScale]="showScale()"
-      [percentage]="percentage()"
+      [attr.value]="value()"
+      [attr.min]="min()"
+      [attr.max]="max()"
+      [attr.step]="step()"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.range]="range() ? '' : null"
+      [attr.rangestart]="rangeStart()"
+      [attr.rangeend]="rangeEnd()"
+      [attr.mindistance]="minDistance()"
+      [attr.tooltip]="tooltip()"
+      [attr.showscale]="showScale() ? '' : null"
+      [attr.percentage]="percentage() ? '' : null"
       [labels]="labels()"
       (change)="onSliderChange($event)"
     ></logosphere-slider>
@@ -337,18 +351,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-slider
-      [value]="value()"
-      [min]="min()"
-      [max]="max()"
-      [step]="step()"
-      [disabled]="disabled()"
-      [range]="range()"
-      [rangeStart]="rangeStart()"
-      [rangeEnd]="rangeEnd()"
-      [minDistance]="minDistance()"
-      [tooltip]="tooltip()"
-      [showScale]="showScale()"
-      [percentage]="percentage()"
+      [attr.value]="value()"
+      [attr.min]="min()"
+      [attr.max]="max()"
+      [attr.step]="step()"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.range]="range() ? '' : null"
+      [attr.rangestart]="rangeStart()"
+      [attr.rangeend]="rangeEnd()"
+      [attr.mindistance]="minDistance()"
+      [attr.tooltip]="tooltip()"
+      [attr.showscale]="showScale() ? '' : null"
+      [attr.percentage]="percentage() ? '' : null"
       [labels]="labels()"
       (change)="onSliderChange($event)"
     ></logosphere-slider>
@@ -362,17 +376,23 @@ class LogosphereSwitch {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     change = output();
+    lgsChange = output();
     onChange(event) {
         const e = event;
         this.change.emit(e.detail);
     }
+    onLgsChange(event) {
+        const e = event;
+        this.lgsChange.emit(e.detail);
+    }
     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: `
+    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", lgsChange: "lgsChange" }, 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)"
+      (lgsChange)="onLgsChange($event)"
     ></logosphere-switch>
   `, isInline: true });
 }
@@ -383,15 +403,16 @@ 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)"
+      (lgsChange)="onLgsChange($event)"
     ></logosphere-switch>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], lgsChange: [{ type: i0.Output, args: ["lgsChange"] }] } });
 
 class LogosphereAccordion {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -409,11 +430,11 @@ class LogosphereAccordion {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereAccordion, isStandalone: true, selector: "lgs-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accordionChange: "accordionChange" }, ngImport: i0, template: `
     <logosphere-accordion
       [items]="items()"
-      [multiple]="multiple()"
+      [attr.multiple]="multiple() ? '' : null"
       [defaultOpen]="defaultOpen()"
-      [border]="border()"
-      [iconPosition]="iconPosition()"
-      [size]="size()"
+      [attr.border]="border()"
+      [attr.iconposition]="iconPosition()"
+      [attr.size]="size()"
       (accordion-change)="onAccordionChange($event)"
     >
       <ng-content></ng-content>
@@ -428,11 +449,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     template: `
     <logosphere-accordion
       [items]="items()"
-      [multiple]="multiple()"
+      [attr.multiple]="multiple() ? '' : null"
       [defaultOpen]="defaultOpen()"
-      [border]="border()"
-      [iconPosition]="iconPosition()"
-      [size]="size()"
+      [attr.border]="border()"
+      [attr.iconposition]="iconPosition()"
+      [attr.size]="size()"
       (accordion-change)="onAccordionChange($event)"
     >
       <ng-content></ng-content>
@@ -444,14 +465,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
 
 class LogosphereBreadcrumb {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    set elRef(element) {
-        if (element) {
-            element.nativeElement.items = this.items();
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereBreadcrumb, isStandalone: true, selector: "lgs-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true }], ngImport: i0, template: `
-    <logosphere-breadcrumb #el></logosphere-breadcrumb>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereBreadcrumb, isStandalone: true, selector: "lgs-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <logosphere-breadcrumb [items]="items()"></logosphere-breadcrumb>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereBreadcrumb, decorators: [{
@@ -460,14 +476,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     selector: 'lgs-breadcrumb',
                     imports: [],
                     template: `
-    <logosphere-breadcrumb #el></logosphere-breadcrumb>
+    <logosphere-breadcrumb [items]="items()"></logosphere-breadcrumb>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], elRef: [{
-                type: ViewChild,
-                args: ['el', { static: false }]
-            }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });
 
 class LogosphereCard {
     cardTitle = input('', { ...(ngDevMode ? { debugName: "cardTitle" } : {}), alias: 'title' });
@@ -487,12 +500,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()"
     >
@@ -509,12 +522,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()"
     >
@@ -542,8 +555,8 @@ class LogosphereChipGroup {
     <logosphere-chip-group
       [items]="items()"
       [value]="value()"
-      [theme]="theme()"
-      [gap]="gap()"
+      [attr.theme]="theme()"
+      [attr.gap]="gap()"
       (chip-group-change)="onChipGroupChange($event)"
     ></logosphere-chip-group>
   `, isInline: true });
@@ -557,8 +570,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
     <logosphere-chip-group
       [items]="items()"
       [value]="value()"
-      [theme]="theme()"
-      [gap]="gap()"
+      [attr.theme]="theme()"
+      [attr.gap]="gap()"
       (chip-group-change)="onChipGroupChange($event)"
     ></logosphere-chip-group>
   `,
@@ -581,12 +594,12 @@ class LogosphereCollapse {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereCollapse, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereCollapse, isStandalone: true, selector: "lgs-collapse", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, ngImport: i0, template: `
     <logosphere-collapse
-      [title]="title()"
-      [expanded]="expanded()"
-      [disabled]="disabled()"
-      [border]="border()"
-      [iconPosition]="iconPosition()"
-      [size]="size()"
+      [attr.collapse-title]="title()"
+      [attr.expanded]="expanded() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.border]="border()"
+      [attr.iconposition]="iconPosition()"
+      [attr.size]="size()"
       (toggle)="onToggle($event)"
     >
       <ng-content></ng-content>
@@ -600,12 +613,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-collapse
-      [title]="title()"
-      [expanded]="expanded()"
-      [disabled]="disabled()"
-      [border]="border()"
-      [iconPosition]="iconPosition()"
-      [size]="size()"
+      [attr.collapse-title]="title()"
+      [attr.expanded]="expanded() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.border]="border()"
+      [attr.iconposition]="iconPosition()"
+      [attr.size]="size()"
       (toggle)="onToggle($event)"
     >
       <ng-content></ng-content>
@@ -653,8 +666,12 @@ class LogosphereInput {
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     pickOnly = input(false, ...(ngDevMode ? [{ debugName: "pickOnly" }] : []));
     mask = input('', ...(ngDevMode ? [{ debugName: "mask" }] : []));
+    showPasswordToggle = input(true, ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : []));
+    suppressNativeValidation = input(false, ...(ngDevMode ? [{ debugName: "suppressNativeValidation" }] : []));
+    errorDisplay = input('always', ...(ngDevMode ? [{ debugName: "errorDisplay" }] : []));
     inputEvent = output({ alias: 'inputChange' });
     change = output();
+    lgsChange = output();
     keydown = output();
     keyup = output();
     clear = output();
@@ -666,6 +683,10 @@ class LogosphereInput {
         const e = event;
         this.change.emit(e.detail);
     }
+    onLgsChange(event) {
+        const e = event;
+        this.lgsChange.emit(e.detail);
+    }
     onKeydown(event) {
         const e = event;
         this.keydown.emit(e.detail);
@@ -678,31 +699,35 @@ class LogosphereInput {
         this.clear.emit();
     }
     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 }, pickOnly: { classPropertyName: "pickOnly", publicName: "pickOnly", 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: `
+    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 }, pickOnly: { classPropertyName: "pickOnly", publicName: "pickOnly", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, suppressNativeValidation: { classPropertyName: "suppressNativeValidation", publicName: "suppressNativeValidation", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputEvent: "inputChange", change: "change", lgsChange: "lgsChange", 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()"
-      [pickOnly]="pickOnly()"
-      [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.pick-only]="pickOnly() ? '' : null"
+      [attr.mask]="mask()"
+      [showPasswordToggle]="showPasswordToggle()"
+      [attr.suppress-native-validation]="suppressNativeValidation() ? '' : null"
+      [attr.error-display]="errorDisplay()"
       (input)="onInput($event)"
       (change)="onChange($event)"
+      (lgsChange)="onLgsChange($event)"
       (keydown)="onKeydown($event)"
       (keyup)="onKeyup($event)"
       (clear)="onClear()"
@@ -719,29 +744,33 @@ 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()"
-      [pickOnly]="pickOnly()"
-      [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.pick-only]="pickOnly() ? '' : null"
+      [attr.mask]="mask()"
+      [showPasswordToggle]="showPasswordToggle()"
+      [attr.suppress-native-validation]="suppressNativeValidation() ? '' : null"
+      [attr.error-display]="errorDisplay()"
       (input)="onInput($event)"
       (change)="onChange($event)"
+      (lgsChange)="onLgsChange($event)"
       (keydown)="onKeydown($event)"
       (keyup)="onKeyup($event)"
       (clear)="onClear()"
@@ -752,7 +781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], 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 }] }], pickOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickOnly", 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"] }] } });
+        }], 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 }] }], pickOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickOnly", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], suppressNativeValidation: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressNativeValidation", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], inputEvent: [{ type: i0.Output, args: ["inputChange"] }], change: [{ type: i0.Output, args: ["change"] }], lgsChange: [{ type: i0.Output, args: ["lgsChange"] }], keydown: [{ type: i0.Output, args: ["keydown"] }], keyup: [{ type: i0.Output, args: ["keyup"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
 
 class LogosphereInputGroup {
     stretch = input(true, ...(ngDevMode ? [{ debugName: "stretch" }] : []));
@@ -792,31 +821,26 @@ class LogospherePagination {
     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: `
+    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" }, ngImport: i0, template: `
     <logosphere-pagination
-      #el
-      [variant]="variant()"
-      [page]="page()"
-      [pageSize]="pageSize()"
-      [total]="total()"
+      [attr.variant]="variant()"
+      [attr.page]="page()"
+      [attr.pagesize]="pageSize()"
+      [attr.total]="total()"
+      [pageSizeOptions]="pageSizeOptions()"
       [showPageSize]="showPageSize()"
       [showTotal]="showTotal()"
-      [disabled]="disabled()"
-      [prevLabel]="prevLabel()"
-      [nextLabel]="nextLabel()"
-      [pageLabel]="pageLabel()"
-      [perPageLabel]="perPageLabel()"
-      [totalLabel]="totalLabel()"
+      [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 });
@@ -828,36 +852,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-pagination
-      #el
-      [variant]="variant()"
-      [page]="page()"
-      [pageSize]="pageSize()"
-      [total]="total()"
+      [attr.variant]="variant()"
+      [attr.page]="page()"
+      [attr.pagesize]="pageSize()"
+      [attr.total]="total()"
+      [pageSizeOptions]="pageSizeOptions()"
       [showPageSize]="showPageSize()"
       [showTotal]="showTotal()"
-      [disabled]="disabled()"
-      [prevLabel]="prevLabel()"
-      [nextLabel]="nextLabel()"
-      [pageLabel]="pageLabel()"
-      [perPageLabel]="perPageLabel()"
-      [totalLabel]="totalLabel()"
+      [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 }]
-            }] } });
+        }], 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"] }] } });
 
 class LogospherePopover {
     popoverTitle = input('', { ...(ngDevMode ? { debugName: "popoverTitle" } : {}), alias: 'title' });
     trigger = input('click', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
     placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : []));
     offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    delay = input(0, ...(ngDevMode ? [{ debugName: "delay" }] : []));
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     closeOnOutsideClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : []));
+    noArrow = input(false, ...(ngDevMode ? [{ debugName: "noArrow" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     popoverOpen = output();
     popoverClose = output();
     onPopoverOpen() {
@@ -867,14 +891,17 @@ class LogospherePopover {
         this.popoverClose.emit();
     }
     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: `
+    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 }, delay: { classPropertyName: "delay", publicName: "delay", 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 }, noArrow: { classPropertyName: "noArrow", publicName: "noArrow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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.delay]="delay()"
+      [attr.open]="open() ? '' : null"
       [closeOnOutsideClick]="closeOnOutsideClick()"
+      [attr.noarrow]="noArrow() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
       (popover-open)="onPopoverOpen()"
       (popover-close)="onPopoverClose()"
     >
@@ -890,12 +917,15 @@ 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.delay]="delay()"
+      [attr.open]="open() ? '' : null"
       [closeOnOutsideClick]="closeOnOutsideClick()"
+      [attr.noarrow]="noArrow() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
       (popover-open)="onPopoverOpen()"
       (popover-close)="onPopoverClose()"
     >
@@ -905,7 +935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { popoverTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], popoverOpen: [{ type: i0.Output, args: ["popoverOpen"] }], popoverClose: [{ type: i0.Output, args: ["popoverClose"] }] } });
+        }], propDecorators: { popoverTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], noArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "noArrow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], popoverOpen: [{ type: i0.Output, args: ["popoverOpen"] }], popoverClose: [{ type: i0.Output, args: ["popoverClose"] }] } });
 
 class LogosphereSplitButton {
     label = input('Button', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -934,11 +964,11 @@ class LogosphereSplitButton {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereSplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereSplitButton, isStandalone: true, selector: "lgs-split-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownDisabled: { classPropertyName: "dropdownDisabled", publicName: "dropdownDisabled", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", dropdownOpen: "dropdownOpen", dropdownClose: "dropdownClose", itemSelect: "itemSelect" }, ngImport: i0, template: `
     <logosphere-split-button
-      [label]="label()"
-      [size]="size()"
-      [theme]="theme()"
-      [disabled]="disabled()"
-      [dropdownDisabled]="dropdownDisabled()"
+      [attr.label]="label()"
+      [attr.size]="size()"
+      [attr.theme]="theme()"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.dropdowndisabled]="dropdownDisabled() ? '' : null"
       [items]="items()"
       (action)="onAction()"
       (dropdown-open)="onDropdownOpen()"
@@ -956,11 +986,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-split-button
-      [label]="label()"
-      [size]="size()"
-      [theme]="theme()"
-      [disabled]="disabled()"
-      [dropdownDisabled]="dropdownDisabled()"
+      [attr.label]="label()"
+      [attr.size]="size()"
+      [attr.theme]="theme()"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.dropdowndisabled]="dropdownDisabled() ? '' : null"
       [items]="items()"
       (action)="onAction()"
       (dropdown-open)="onDropdownOpen()"
@@ -988,9 +1018,9 @@ class LogosphereStepper {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereStepper, isStandalone: true, selector: "lgs-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: `
     <logosphere-stepper
       [steps]="steps()"
-      [activeStep]="activeStep()"
-      [orientation]="orientation()"
-      [clickable]="clickable()"
+      [attr.activestep]="activeStep()"
+      [attr.orientation]="orientation()"
+      [attr.clickable]="clickable() ? '' : null"
       (step-change)="onStepChange($event)"
     ></logosphere-stepper>
   `, isInline: true });
@@ -1003,9 +1033,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     template: `
     <logosphere-stepper
       [steps]="steps()"
-      [activeStep]="activeStep()"
-      [orientation]="orientation()"
-      [clickable]="clickable()"
+      [attr.activestep]="activeStep()"
+      [attr.orientation]="orientation()"
+      [attr.clickable]="clickable() ? '' : null"
       (step-change)="onStepChange($event)"
     ></logosphere-stepper>
   `,
@@ -1036,6 +1066,9 @@ class LogosphereTextarea {
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     inputEvent = output({ alias: 'inputChange' });
     change = output();
+    lgsChange = output();
+    keydown = output();
+    keyup = output();
     clear = output();
     onInput(event) {
         const e = event;
@@ -1045,34 +1078,49 @@ class LogosphereTextarea {
         const e = event;
         this.change.emit(e.detail);
     }
+    onLgsChange(event) {
+        const e = event;
+        this.lgsChange.emit(e.detail);
+    }
+    onKeydown(event) {
+        const e = event;
+        this.keydown.emit(e.detail);
+    }
+    onKeyup(event) {
+        const e = event;
+        this.keyup.emit(e.detail);
+    }
     onClear() {
         this.clear.emit();
     }
     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: `
+    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", lgsChange: "lgsChange", keydown: "keydown", keyup: "keyup", 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)"
+      (lgsChange)="onLgsChange($event)"
+      (keydown)="onKeydown($event)"
+      (keyup)="onKeyup($event)"
       (clear)="onClear()"
     ></logosphere-textarea>
   `, isInline: true });
@@ -1084,34 +1132,37 @@ 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)"
+      (lgsChange)="onLgsChange($event)"
+      (keydown)="onKeydown($event)"
+      (keyup)="onKeyup($event)"
       (clear)="onClear()"
     ></logosphere-textarea>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", 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 }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", 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 }] }], inputEvent: [{ type: i0.Output, args: ["inputChange"] }], change: [{ type: i0.Output, args: ["change"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", 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 }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", 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 }] }], inputEvent: [{ type: i0.Output, args: ["inputChange"] }], change: [{ type: i0.Output, args: ["change"] }], lgsChange: [{ type: i0.Output, args: ["lgsChange"] }], keydown: [{ type: i0.Output, args: ["keydown"] }], keyup: [{ type: i0.Output, args: ["keyup"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
 
 class LogosphereTimePicker {
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -1125,28 +1176,34 @@ class LogosphereTimePicker {
     size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     change = output();
+    lgsChange = output();
     clear = output();
     onChange(event) {
         const e = event;
         this.change.emit(e.detail);
     }
+    onLgsChange(event) {
+        const e = event;
+        this.lgsChange.emit(e.detail);
+    }
     onClear() {
         this.clear.emit();
     }
     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: `
+    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", lgsChange: "lgsChange", 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)"
+      (lgsChange)="onLgsChange($event)"
       (clear)="onClear()"
     ></logosphere-timepicker>
   `, isInline: true });
@@ -1158,23 +1215,24 @@ 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)"
+      (lgsChange)="onLgsChange($event)"
       (clear)="onClear()"
     ></logosphere-timepicker>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", 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 }] }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", 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 }] }], 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], lgsChange: [{ type: i0.Output, args: ["lgsChange"] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
 
 class LogosphereCalendar {
     value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -1188,12 +1246,8 @@ class LogosphereCalendar {
     closable = input(false, ...(ngDevMode ? [{ debugName: "closable" }] : []));
     change = output();
     rangeChange = output();
+    calendarStateChange = output();
     closeRequest = output();
-    set elRef(element) {
-        if (element) {
-            element.nativeElement.disabledDays = this.disabledDays();
-        }
-    }
     onChange(event) {
         const e = event;
         this.change.emit(e.detail);
@@ -1202,23 +1256,36 @@ class LogosphereCalendar {
         const e = event;
         this.rangeChange.emit(e.detail);
     }
+    onStateChange(event) {
+        const e = event;
+        this.calendarStateChange.emit(e.detail);
+    }
     onCloseRequest() {
         this.closeRequest.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereCalendar, isStandalone: true, selector: "lgs-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", rangeChange: "rangeChange", closeRequest: "closeRequest" }, 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: LogosphereCalendar, isStandalone: true, selector: "lgs-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", rangeChange: "rangeChange", calendarStateChange: "calendarStateChange", closeRequest: "closeRequest" }, ngImport: i0, template: `
+    <!--
+      Skaler prop'lar bilinçli olarak attribute binding: SSR'da Angular yalnızca
+      attribute'ları HTML'e serialize eder, @lit-labs/ssr de Declarative Shadow DOM'u
+      o HTML string'inden üretir. Property binding kullanılırsa DSD varsayılanlarla
+      render edilir ve hydration'da düzeltme/blink oluşur.
+      Attribute adları Lit'in varsayılanıdır: "attribute:" verilmemişse property adının
+      KÜÇÜK HARFLİSİ (rangeMode -> rangemode). Kebab-case yazılırsa Lit görmez.
+    -->
     <logosphere-calendar
-      #el
       [attr.value]="value()"
       [attr.min]="min()"
       [attr.max]="max()"
-      [attr.disabled]="disabled() || null"
-      [attr.range-mode]="rangeMode() || null"
-      [attr.range-start]="rangeStart()"
-      [attr.range-end]="rangeEnd()"
-      [attr.closable]="closable() || null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.rangemode]="rangeMode() ? '' : null"
+      [attr.rangestart]="rangeStart()"
+      [attr.rangeend]="rangeEnd()"
+      [attr.closable]="closable() ? '' : null"
+      [disabledDays]="disabledDays()"
       (change)="onChange($event)"
       (rangeChange)="onRangeChange($event)"
+      (calendar-state-change)="onStateChange($event)"
       (close-request)="onCloseRequest()"
     ></logosphere-calendar>
   `, isInline: true });
@@ -1229,27 +1296,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     selector: 'lgs-calendar',
                     imports: [],
                     template: `
+    <!--
+      Skaler prop'lar bilinçli olarak attribute binding: SSR'da Angular yalnızca
+      attribute'ları HTML'e serialize eder, @lit-labs/ssr de Declarative Shadow DOM'u
+      o HTML string'inden üretir. Property binding kullanılırsa DSD varsayılanlarla
+      render edilir ve hydration'da düzeltme/blink oluşur.
+      Attribute adları Lit'in varsayılanıdır: "attribute:" verilmemişse property adının
+      KÜÇÜK HARFLİSİ (rangeMode -> rangemode). Kebab-case yazılırsa Lit görmez.
+    -->
     <logosphere-calendar
-      #el
       [attr.value]="value()"
       [attr.min]="min()"
       [attr.max]="max()"
-      [attr.disabled]="disabled() || null"
-      [attr.range-mode]="rangeMode() || null"
-      [attr.range-start]="rangeStart()"
-      [attr.range-end]="rangeEnd()"
-      [attr.closable]="closable() || null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.rangemode]="rangeMode() ? '' : null"
+      [attr.rangestart]="rangeStart()"
+      [attr.rangeend]="rangeEnd()"
+      [attr.closable]="closable() ? '' : null"
+      [disabledDays]="disabledDays()"
       (change)="onChange($event)"
       (rangeChange)="onRangeChange($event)"
+      (calendar-state-change)="onStateChange($event)"
       (close-request)="onCloseRequest()"
     ></logosphere-calendar>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }], elRef: [{
-                type: ViewChild,
-                args: ['el', { static: false }]
-            }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], calendarStateChange: [{ type: i0.Output, args: ["calendarStateChange"] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }] } });
 
 class LogosphereChatbot {
     returnUri = input('', ...(ngDevMode ? [{ debugName: "returnUri" }] : []));
@@ -1260,22 +1333,17 @@ class LogosphereChatbot {
     openInitially = input(false, ...(ngDevMode ? [{ debugName: "openInitially" }] : []));
     showFeedbackButtons = input(false, ...(ngDevMode ? [{ debugName: "showFeedbackButtons" }] : []));
     products = input([], ...(ngDevMode ? [{ debugName: "products" }] : []));
-    set chatbotElRef(element) {
-        if (element) {
-            element.nativeElement.products = this.products();
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereChatbot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereChatbot, isStandalone: true, selector: "lgs-chatbot", inputs: { returnUri: { classPropertyName: "returnUri", publicName: "returnUri", isSignal: true, isRequired: false, transformFunction: null }, questionPrompt: { classPropertyName: "questionPrompt", publicName: "questionPrompt", isSignal: true, isRequired: false, transformFunction: null }, minimizedIconOnly: { classPropertyName: "minimizedIconOnly", publicName: "minimizedIconOnly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, openInitially: { classPropertyName: "openInitially", publicName: "openInitially", isSignal: true, isRequired: false, transformFunction: null }, showFeedbackButtons: { classPropertyName: "showFeedbackButtons", publicName: "showFeedbackButtons", isSignal: true, isRequired: false, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chatbotElRef", first: true, predicate: ["chatbotEl"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereChatbot, isStandalone: true, selector: "lgs-chatbot", inputs: { returnUri: { classPropertyName: "returnUri", publicName: "returnUri", isSignal: true, isRequired: false, transformFunction: null }, questionPrompt: { classPropertyName: "questionPrompt", publicName: "questionPrompt", isSignal: true, isRequired: false, transformFunction: null }, minimizedIconOnly: { classPropertyName: "minimizedIconOnly", publicName: "minimizedIconOnly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, openInitially: { classPropertyName: "openInitially", publicName: "openInitially", isSignal: true, isRequired: false, transformFunction: null }, showFeedbackButtons: { classPropertyName: "showFeedbackButtons", publicName: "showFeedbackButtons", isSignal: true, isRequired: false, transformFunction: null }, products: { classPropertyName: "products", publicName: "products", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <logosphere-chatbot
-      #chatbotEl
+      [products]="products()"
       [attr.return-uri]="returnUri()"
       [attr.question-prompt]="questionPrompt()"
-      [attr.minimized-icon-only]="minimizedIconOnly() || null"
-      [attr.draggable]="draggable() || null"
-      [attr.resizable]="resizable() || null"
-      [attr.open-initially]="openInitially() || null"
-      [attr.show-feedback-buttons]="showFeedbackButtons() || null"
+      [attr.minimized-icon-only]="minimizedIconOnly() ? '' : null"
+      [attr.draggable]="draggable() ? '' : null"
+      [attr.resizable]="resizable() ? '' : null"
+      [attr.open-initially]="openInitially() ? '' : null"
+      [attr.show-feedback-buttons]="showFeedbackButtons() ? '' : null"
     ></logosphere-chatbot>
   `, isInline: true });
 }
@@ -1286,22 +1354,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-chatbot
-      #chatbotEl
+      [products]="products()"
       [attr.return-uri]="returnUri()"
       [attr.question-prompt]="questionPrompt()"
-      [attr.minimized-icon-only]="minimizedIconOnly() || null"
-      [attr.draggable]="draggable() || null"
-      [attr.resizable]="resizable() || null"
-      [attr.open-initially]="openInitially() || null"
-      [attr.show-feedback-buttons]="showFeedbackButtons() || null"
+      [attr.minimized-icon-only]="minimizedIconOnly() ? '' : null"
+      [attr.draggable]="draggable() ? '' : null"
+      [attr.resizable]="resizable() ? '' : null"
+      [attr.open-initially]="openInitially() ? '' : null"
+      [attr.show-feedback-buttons]="showFeedbackButtons() ? '' : null"
     ></logosphere-chatbot>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { returnUri: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUri", required: false }] }], questionPrompt: [{ type: i0.Input, args: [{ isSignal: true, alias: "questionPrompt", required: false }] }], minimizedIconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizedIconOnly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], openInitially: [{ type: i0.Input, args: [{ isSignal: true, alias: "openInitially", required: false }] }], showFeedbackButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFeedbackButtons", required: false }] }], products: [{ type: i0.Input, args: [{ isSignal: true, alias: "products", required: false }] }], chatbotElRef: [{
-                type: ViewChild,
-                args: ['chatbotEl', { static: false }]
-            }] } });
+        }], propDecorators: { returnUri: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnUri", required: false }] }], questionPrompt: [{ type: i0.Input, args: [{ isSignal: true, alias: "questionPrompt", required: false }] }], minimizedIconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimizedIconOnly", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], openInitially: [{ type: i0.Input, args: [{ isSignal: true, alias: "openInitially", required: false }] }], showFeedbackButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFeedbackButtons", required: false }] }], products: [{ type: i0.Input, args: [{ isSignal: true, alias: "products", required: false }] }] } });
 
 class LogosphereCombobox {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -1326,10 +1391,27 @@ class LogosphereCombobox {
     onSearch = input(undefined, ...(ngDevMode ? [{ debugName: "onSearch" }] : []));
     onFocus = input(undefined, ...(ngDevMode ? [{ debugName: "onFocus" }] : []));
     onLoadMore = input(undefined, ...(ngDevMode ? [{ debugName: "onLoadMore" }] : []));
+    elRef = viewChild('el', ...(ngDevMode ? [{ debugName: "elRef" }] : []));
+    constructor() {
+        // Angular, adı "on" ile başlayan property binding'lerini güvenlik gereği reddeder
+        // (NG0306, validateAgainstEventProperties) — bu bir runtime kontrolüdür, ngc yakalamaz.
+        // Bu yüzden core'un onSearch/onFocus/onLoadMore callback prop'ları şablondan değil
+        // buradan atanır. effect() sayesinde input değiştiğinde yeniden uygulanır.
+        effect(() => {
+            const ref = this.elRef();
+            if (!ref)
+                return;
+            const node = ref.nativeElement;
+            node.onSearch = this.onSearch();
+            node.onFocus = this.onFocus();
+            node.onLoadMore = this.onLoadMore();
+        });
+    }
     change = output();
     lgsChange = output();
     selected = output();
     searchChange = output();
+    loadMore = output();
     comboboxFocus = output();
     onChange(event) {
         const e = event;
@@ -1347,39 +1429,42 @@ class LogosphereCombobox {
         const e = event;
         this.searchChange.emit(e.detail);
     }
+    onLoadMoreEvent(event) {
+        const e = event;
+        this.loadMore.emit(e.detail);
+    }
     onComboboxFocus(event) {
         const e = event;
         this.comboboxFocus.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 }, loading: { classPropertyName: "loading", publicName: "loading", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: false, transformFunction: null }, onSearch: { classPropertyName: "onSearch", publicName: "onSearch", isSignal: true, isRequired: false, transformFunction: null }, onFocus: { classPropertyName: "onFocus", publicName: "onFocus", isSignal: true, isRequired: false, transformFunction: null }, onLoadMore: { classPropertyName: "onLoadMore", publicName: "onLoadMore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", lgsChange: "lgsChange", selected: "selected", searchChange: "searchChange", comboboxFocus: "comboboxFocus" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.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 }, loading: { classPropertyName: "loading", publicName: "loading", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: false, transformFunction: null }, onSearch: { classPropertyName: "onSearch", publicName: "onSearch", isSignal: true, isRequired: false, transformFunction: null }, onFocus: { classPropertyName: "onFocus", publicName: "onFocus", isSignal: true, isRequired: false, transformFunction: null }, onLoadMore: { classPropertyName: "onLoadMore", publicName: "onLoadMore", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", lgsChange: "lgsChange", selected: "selected", searchChange: "searchChange", loadMore: "loadMore", comboboxFocus: "comboboxFocus" }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <logosphere-combobox
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [placeholder]="placeholder()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readOnly]="readOnly()"
-      [loading]="loading()"
-      [variant]="variant()"
-      [multiple]="multiple()"
-      [filterable]="filterable()"
-      [optionLabel]="optionLabel()"
-      [optionValue]="optionValue()"
-      [emptyMessage]="emptyMessage()"
-      [size]="size()"
+      #el
+      [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.loading]="loading() ? '' : null"
+      [attr.variant]="variant()"
+      [attr.multiple]="multiple() ? '' : null"
+      [attr.filterable]="filterable() ? '' : null"
+      [attr.optionlabel]="optionLabel()"
+      [attr.optionvalue]="optionValue()"
+      [attr.emptymessage]="emptyMessage()"
+      [attr.size]="size()"
       [items]="items()"
       [value]="value()"
       [clearable]="clearable()"
       [itemRenderer]="itemRenderer()"
-      [onSearch]="onSearch()"
-      [onFocus]="onFocus()"
-      [onLoadMore]="onLoadMore()"
       (change)="onChange($event)"
       (lgsChange)="onLgsChange($event)"
       (selected)="onSelected($event)"
       (search-change)="onSearchChange($event)"
+      (load-more)="onLoadMoreEvent($event)"
       (combobox-focus)="onComboboxFocus($event)"
     ></logosphere-combobox>
   `, isInline: true });
@@ -1391,38 +1476,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-combobox
-      [label]="label()"
-      [helper]="helper()"
-      [error]="error()"
-      [placeholder]="placeholder()"
-      [required]="required()"
-      [disabled]="disabled()"
-      [readOnly]="readOnly()"
-      [loading]="loading()"
-      [variant]="variant()"
-      [multiple]="multiple()"
-      [filterable]="filterable()"
-      [optionLabel]="optionLabel()"
-      [optionValue]="optionValue()"
-      [emptyMessage]="emptyMessage()"
-      [size]="size()"
+      #el
+      [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.loading]="loading() ? '' : null"
+      [attr.variant]="variant()"
+      [attr.multiple]="multiple() ? '' : null"
+      [attr.filterable]="filterable() ? '' : null"
+      [attr.optionlabel]="optionLabel()"
+      [attr.optionvalue]="optionValue()"
+      [attr.emptymessage]="emptyMessage()"
+      [attr.size]="size()"
       [items]="items()"
       [value]="value()"
       [clearable]="clearable()"
       [itemRenderer]="itemRenderer()"
-      [onSearch]="onSearch()"
-      [onFocus]="onFocus()"
-      [onLoadMore]="onLoadMore()"
       (change)="onChange($event)"
       (lgsChange)="onLgsChange($event)"
       (selected)="onSelected($event)"
       (search-change)="onSearchChange($event)"
+      (load-more)="onLoadMoreEvent($event)"
       (combobox-focus)="onComboboxFocus($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 }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], itemRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemRenderer", required: false }] }], onSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSearch", required: false }] }], onFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "onFocus", required: false }] }], onLoadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLoadMore", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], lgsChange: [{ type: i0.Output, args: ["lgsChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], comboboxFocus: [{ type: i0.Output, args: ["comboboxFocus"] }] } });
+        }], ctorParameters: () => [], 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 }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], itemRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemRenderer", required: false }] }], onSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSearch", required: false }] }], onFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "onFocus", required: false }] }], onLoadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLoadMore", required: false }] }], elRef: [{ type: i0.ViewChild, args: ['el', { isSignal: true }] }], change: [{ type: i0.Output, args: ["change"] }], lgsChange: [{ type: i0.Output, args: ["lgsChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], comboboxFocus: [{ type: i0.Output, args: ["comboboxFocus"] }] } });
 
 class LogosphereDatePicker {
     value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -1433,6 +1517,7 @@ class LogosphereDatePicker {
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
     expandFactor = input(1.05, ...(ngDevMode ? [{ debugName: "expandFactor" }] : []));
     placeholder = input('GG/AA/YYYY veya GG.AA.YYYY', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    displayFormat = input('DD/MM/YYYY', ...(ngDevMode ? [{ debugName: "displayFormat" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     helper = input('', ...(ngDevMode ? [{ debugName: "helper" }] : []));
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
@@ -1443,41 +1528,49 @@ class LogosphereDatePicker {
     rangeStart = input(null, ...(ngDevMode ? [{ debugName: "rangeStart" }] : []));
     rangeEnd = input(null, ...(ngDevMode ? [{ debugName: "rangeEnd" }] : []));
     change = output();
+    lgsChange = output();
     rangeChange = output();
-    set elRef(element) {
-        if (element) {
-            element.nativeElement.disabledDays = this.disabledDays();
-            element.nativeElement.expandFactor = this.expandFactor();
-        }
-    }
     onChange(event) {
         const e = event;
         this.change.emit(e.detail);
     }
+    onLgsChange(event) {
+        const e = event;
+        this.lgsChange.emit(e.detail);
+    }
     onRangeChange(event) {
         const e = event;
         this.rangeChange.emit(e.detail);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereDatePicker, isStandalone: true, selector: "lgs-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, 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 }, expandFactor: { classPropertyName: "expandFactor", publicName: "expandFactor", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", rangeChange: "rangeChange" }, 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: LogosphereDatePicker, isStandalone: true, selector: "lgs-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, 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 }, expandFactor: { classPropertyName: "expandFactor", publicName: "expandFactor", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayFormat: { classPropertyName: "displayFormat", publicName: "displayFormat", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rangeMode: { classPropertyName: "rangeMode", publicName: "rangeMode", isSignal: true, isRequired: false, transformFunction: null }, disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, rangeStart: { classPropertyName: "rangeStart", publicName: "rangeStart", isSignal: true, isRequired: false, transformFunction: null }, rangeEnd: { classPropertyName: "rangeEnd", publicName: "rangeEnd", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", lgsChange: "lgsChange", rangeChange: "rangeChange" }, ngImport: i0, template: `
+    <!--
+      Skaler prop'lar bilinçli olarak attribute binding — SSR/DSD gerekçesi için
+      calendar.ts'teki nota bakınız. Attribute adı, core'da "attribute:" açıkça
+      verilmemişse property adının KÜÇÜK HARFLİSİDİR (rangeMode -> rangemode);
+      "display-format" core'da açıkça tanımlı olduğu için kebab kalır.
+    -->
     <logosphere-datepicker
-      #el
       [attr.value]="value()"
       [attr.min]="min()"
       [attr.max]="max()"
-      [attr.required]="required() || null"
-      [attr.disabled]="disabled() || null"
-      [attr.readonly]="readonly() || null"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readonly() ? '' : null"
+      [attr.expandfactor]="expandFactor()"
       [attr.placeholder]="placeholder()"
+      [attr.display-format]="displayFormat()"
       [attr.label]="label()"
       [attr.helper]="helper()"
       [attr.error]="error()"
       [attr.size]="size()"
       [attr.variant]="variant()"
-      [attr.range-mode]="rangeMode() || null"
-      [attr.range-start]="rangeStart()"
-      [attr.range-end]="rangeEnd()"
+      [attr.rangemode]="rangeMode() ? '' : null"
+      [attr.rangestart]="rangeStart()"
+      [attr.rangeend]="rangeEnd()"
+      [disabledDays]="disabledDays()"
       (change)="onChange($event)"
+      (lgsChange)="onLgsChange($event)"
       (rangeChange)="onRangeChange($event)"
     ></logosphere-datepicker>
   `, isInline: true });
@@ -1488,33 +1581,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     selector: 'lgs-datepicker',
                     imports: [],
                     template: `
+    <!--
+      Skaler prop'lar bilinçli olarak attribute binding — SSR/DSD gerekçesi için
+      calendar.ts'teki nota bakınız. Attribute adı, core'da "attribute:" açıkça
+      verilmemişse property adının KÜÇÜK HARFLİSİDİR (rangeMode -> rangemode);
+      "display-format" core'da açıkça tanımlı olduğu için kebab kalır.
+    -->
     <logosphere-datepicker
-      #el
       [attr.value]="value()"
       [attr.min]="min()"
       [attr.max]="max()"
-      [attr.required]="required() || null"
-      [attr.disabled]="disabled() || null"
-      [attr.readonly]="readonly() || null"
+      [attr.required]="required() ? '' : null"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.readonly]="readonly() ? '' : null"
+      [attr.expandfactor]="expandFactor()"
       [attr.placeholder]="placeholder()"
+      [attr.display-format]="displayFormat()"
       [attr.label]="label()"
       [attr.helper]="helper()"
       [attr.error]="error()"
       [attr.size]="size()"
       [attr.variant]="variant()"
-      [attr.range-mode]="rangeMode() || null"
-      [attr.range-start]="rangeStart()"
-      [attr.range-end]="rangeEnd()"
+      [attr.rangemode]="rangeMode() ? '' : null"
+      [attr.rangestart]="rangeStart()"
+      [attr.rangeend]="rangeEnd()"
+      [disabledDays]="disabledDays()"
       (change)="onChange($event)"
+      (lgsChange)="onLgsChange($event)"
       (rangeChange)="onRangeChange($event)"
     ></logosphere-datepicker>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", 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 }] }], expandFactor: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFactor", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], elRef: [{
-                type: ViewChild,
-                args: ['el', { static: false }]
-            }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", 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 }] }], expandFactor: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFactor", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayFormat", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], rangeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeMode", required: false }] }], disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], rangeStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeStart", required: false }] }], rangeEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEnd", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], lgsChange: [{ type: i0.Output, args: ["lgsChange"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }] } });
 
 class LogosphereDownloadManager {
     chunkSize = input(2 * 1024 * 1024, ...(ngDevMode ? [{ debugName: "chunkSize" }] : []));
@@ -1563,12 +1662,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()"
     >
@@ -1583,12 +1682,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()"
     >
@@ -1603,18 +1702,36 @@ class LogosphereLeftMenu {
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     openWidth = input(248, ...(ngDevMode ? [{ debugName: "openWidth" }] : []));
     storageKey = input('logosphere-leftmenu-state', ...(ngDevMode ? [{ debugName: "storageKey" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    defaultExpandedIds = input([], ...(ngDevMode ? [{ debugName: "defaultExpandedIds" }] : []));
+    leading = input(true, ...(ngDevMode ? [{ debugName: "leading" }] : []));
     itemClick = output();
+    toggleChange = output();
+    widthChange = output();
     onItemClick(event) {
         const e = event;
         this.itemClick.emit(e.detail);
     }
+    onToggleChange(event) {
+        const e = event;
+        this.toggleChange.emit(e.detail);
+    }
+    onWidthChange(event) {
+        const e = event;
+        this.widthChange.emit(e.detail);
+    }
     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 }, openWidth: { classPropertyName: "openWidth", publicName: "openWidth", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
+    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 }, openWidth: { classPropertyName: "openWidth", publicName: "openWidth", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, defaultExpandedIds: { classPropertyName: "defaultExpandedIds", publicName: "defaultExpandedIds", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", toggleChange: "toggleChange", widthChange: "widthChange" }, ngImport: i0, template: `
       <logosphere-leftmenu
-      [open]="open()"
-      [openWidth]="openWidth()"
-      [storageKey]="storageKey()"
+      [attr.open]="open() ? '' : null"
+      [attr.openwidth]="openWidth()"
+      [attr.storagekey]="storageKey()"
+      [items]="items()"
+      [defaultExpandedIds]="defaultExpandedIds()"
+      [leading]="leading()"
       (item-click)="onItemClick($event)"
+      (toggle-change)="onToggleChange($event)"
+      (width-change)="onWidthChange($event)"
     >
       <ng-content></ng-content>
     </logosphere-leftmenu>
@@ -1627,17 +1744,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
       <logosphere-leftmenu
-      [open]="open()"
-      [openWidth]="openWidth()"
-      [storageKey]="storageKey()"
+      [attr.open]="open() ? '' : null"
+      [attr.openwidth]="openWidth()"
+      [attr.storagekey]="storageKey()"
+      [items]="items()"
+      [defaultExpandedIds]="defaultExpandedIds()"
+      [leading]="leading()"
       (item-click)="onItemClick($event)"
+      (toggle-change)="onToggleChange($event)"
+      (width-change)="onWidthChange($event)"
     >
       <ng-content></ng-content>
     </logosphere-leftmenu>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "openWidth", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], openWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "openWidth", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], defaultExpandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpandedIds", required: false }] }], leading: [{ type: i0.Input, args: [{ isSignal: true, alias: "leading", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], toggleChange: [{ type: i0.Output, args: ["toggleChange"] }], widthChange: [{ type: i0.Output, args: ["widthChange"] }] } });
 
 class LogosphereLeftMenuItem {
     itemId = input('', ...(ngDevMode ? [{ debugName: "itemId" }] : []));
@@ -1678,29 +1800,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
 class LogosphereModal {
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     modalTitle = input('', { ...(ngDevMode ? { debugName: "modalTitle" } : {}), alias: 'title' });
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     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" }] : []));
+    showIcon = input(false, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
+    footer = input(true, ...(ngDevMode ? [{ debugName: "footer" }] : []));
+    okLabel = input('Tamam', ...(ngDevMode ? [{ debugName: "okLabel" }] : []));
+    cancelLabel = input('İptal', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
+    showCancel = input(true, ...(ngDevMode ? [{ debugName: "showCancel" }] : []));
     modalOpen = output();
     modalClose = output();
+    ok = output();
+    cancel = output();
     onModalOpen() {
         this.modalOpen.emit();
     }
     onModalClose() {
         this.modalClose.emit();
     }
+    onOk() {
+        this.ok.emit();
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
     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: `
+    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 }, size: { classPropertyName: "size", publicName: "size", 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 }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", 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 }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalOpen: "modalOpen", modalClose: "modalClose", ok: "ok", cancel: "cancel" }, ngImport: i0, template: `
     <logosphere-modal
-      [open]="open()"
-      [title]="modalTitle()"
+      [attr.open]="open() ? '' : null"
+      [attr.modal-title]="modalTitle()"
+      [attr.size]="size()"
       [closeOnEsc]="closeOnEsc()"
       [closeOnBackdrop]="closeOnBackdrop()"
-      [showBack]="showBack()"
+      [attr.showback]="showBack() ? '' : null"
       [showClose]="showClose()"
+      [attr.showicon]="showIcon() ? '' : null"
+      [footer]="footer()"
+      [attr.oklabel]="okLabel()"
+      [attr.cancellabel]="cancelLabel()"
+      [showCancel]="showCancel()"
       (modal-open)="onModalOpen()"
       (modal-close)="onModalClose()"
+      (ok)="onOk()"
+      (cancel)="onCancel()"
     >
       <ng-content></ng-content>
       <ng-content select="[slot=footer]" slot="footer"></ng-content>
@@ -1714,14 +1858,22 @@ 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()"
+      [attr.size]="size()"
       [closeOnEsc]="closeOnEsc()"
       [closeOnBackdrop]="closeOnBackdrop()"
-      [showBack]="showBack()"
+      [attr.showback]="showBack() ? '' : null"
       [showClose]="showClose()"
+      [attr.showicon]="showIcon() ? '' : null"
+      [footer]="footer()"
+      [attr.oklabel]="okLabel()"
+      [attr.cancellabel]="cancelLabel()"
+      [showCancel]="showCancel()"
       (modal-open)="onModalOpen()"
       (modal-close)="onModalClose()"
+      (ok)="onOk()"
+      (cancel)="onCancel()"
     >
       <ng-content></ng-content>
       <ng-content select="[slot=footer]" slot="footer"></ng-content>
@@ -1729,7 +1881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], modalTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closeOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEsc", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], modalOpen: [{ type: i0.Output, args: ["modalOpen"] }], modalClose: [{ type: i0.Output, args: ["modalClose"] }] } });
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], modalTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEsc", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], okLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "okLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], modalOpen: [{ type: i0.Output, args: ["modalOpen"] }], modalClose: [{ type: i0.Output, args: ["modalClose"] }], ok: [{ type: i0.Output, args: ["ok"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
 
 class LogosphereTab {
     tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
@@ -1737,22 +1889,17 @@ class LogosphereTab {
     lazy = input(true, ...(ngDevMode ? [{ debugName: "lazy" }] : []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     tabChange = output();
-    set elRef(element) {
-        if (element) {
-            element.nativeElement.tabs = this.tabs();
-        }
-    }
     onTabChange(event) {
         const e = event;
         this.tabChange.emit(e.detail);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: `
+    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" }, ngImport: i0, template: `
     <logosphere-tab
-      #el
-      [activeTab]="activeTab()"
+      [tabs]="tabs()"
+      [attr.activetab]="activeTab()"
       [lazy]="lazy()"
-      [variant]="variant()"
+      [attr.variant]="variant()"
       (tab-change)="onTabChange($event)"
     >
       <ng-content></ng-content>
@@ -1766,10 +1913,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-tab
-      #el
-      [activeTab]="activeTab()"
+      [tabs]="tabs()"
+      [attr.activetab]="activeTab()"
       [lazy]="lazy()"
-      [variant]="variant()"
+      [attr.variant]="variant()"
       (tab-change)="onTabChange($event)"
     >
       <ng-content></ng-content>
@@ -1777,10 +1924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], elRef: [{
-                type: ViewChild,
-                args: ['el', { static: false }]
-            }] } });
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
 
 class LogosphereTable {
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
@@ -1802,27 +1946,41 @@ class LogosphereTable {
     selectChangeHandler = (detail) => this.selectChange.emit(detail);
     searchHandler = (detail) => this.search.emit(detail);
     widthChangeHandler = (detail) => this.widthChange.emit(detail);
+    elRef = viewChild('el', ...(ngDevMode ? [{ debugName: "elRef" }] : []));
+    constructor() {
+        // Angular, adı "on" ile başlayan property binding'lerini güvenlik gereği reddeder
+        // (NG0306, validateAgainstEventProperties) — bu bir runtime kontrolüdür, ngc yakalamaz.
+        // Core'un onSortChange/onSelectChange/onSearch/onWidthChange callback prop'ları bu
+        // yüzden şablondan değil buradan atanır.
+        effect(() => {
+            const ref = this.elRef();
+            if (!ref)
+                return;
+            const node = ref.nativeElement;
+            node.onSortChange = this.sortChangeHandler;
+            node.onSelectChange = this.selectChangeHandler;
+            node.onSearch = this.searchHandler;
+            node.onWidthChange = this.widthChangeHandler;
+        });
+    }
     onRowClick(event) {
         const e = event;
         this.rowClick.emit(e.detail);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereTable, isStandalone: true, selector: "lgs-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actionColumn: { classPropertyName: "actionColumn", publicName: "actionColumn", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, stickySelection: { classPropertyName: "stickySelection", publicName: "stickySelection", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", sortChange: "sortChange", selectChange: "selectChange", search: "search", widthChange: "widthChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.7", type: LogosphereTable, isStandalone: true, selector: "lgs-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actionColumn: { classPropertyName: "actionColumn", publicName: "actionColumn", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, stickySelection: { classPropertyName: "stickySelection", publicName: "stickySelection", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", sortChange: "sortChange", selectChange: "selectChange", search: "search", widthChange: "widthChange" }, viewQueries: [{ propertyName: "elRef", first: true, predicate: ["el"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <logosphere-table
+      #el
       [columns]="columns()"
       [actionColumn]="actionColumn()"
       [rows]="rows()"
-      [rowKey]="rowKey()"
-      [emptyMessage]="emptyMessage()"
-      [maxHeight]="maxHeight()"
-      [selection]="selection()"
-      [stickySelection]="stickySelection()"
-      [resizable]="resizable()"
-      [borderless]="borderless()"
-      [onSortChange]="sortChangeHandler"
-      [onSelectChange]="selectChangeHandler"
-      [onSearch]="searchHandler"
-      [onWidthChange]="widthChangeHandler"
+      [attr.row-key]="rowKey()"
+      [attr.empty-message]="emptyMessage()"
+      [attr.max-height]="maxHeight()"
+      [attr.selection]="selection() ? '' : null"
+      [attr.sticky-selection]="stickySelection() ? '' : null"
+      [attr.resizable]="resizable() ? '' : null"
+      [attr.borderless]="borderless() ? '' : null"
       (row-click)="onRowClick($event)"
     ></logosphere-table>
   `, isInline: true });
@@ -1834,26 +1992,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-table
+      #el
       [columns]="columns()"
       [actionColumn]="actionColumn()"
       [rows]="rows()"
-      [rowKey]="rowKey()"
-      [emptyMessage]="emptyMessage()"
-      [maxHeight]="maxHeight()"
-      [selection]="selection()"
-      [stickySelection]="stickySelection()"
-      [resizable]="resizable()"
-      [borderless]="borderless()"
-      [onSortChange]="sortChangeHandler"
-      [onSelectChange]="selectChangeHandler"
-      [onSearch]="searchHandler"
-      [onWidthChange]="widthChangeHandler"
+      [attr.row-key]="rowKey()"
+      [attr.empty-message]="emptyMessage()"
+      [attr.max-height]="maxHeight()"
+      [attr.selection]="selection() ? '' : null"
+      [attr.sticky-selection]="stickySelection() ? '' : null"
+      [attr.resizable]="resizable() ? '' : null"
+      [attr.borderless]="borderless() ? '' : null"
       (row-click)="onRowClick($event)"
     ></logosphere-table>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], actionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionColumn", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], stickySelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickySelection", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], search: [{ type: i0.Output, args: ["search"] }], widthChange: [{ type: i0.Output, args: ["widthChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], actionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionColumn", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], stickySelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickySelection", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectChange: [{ type: i0.Output, args: ["selectChange"] }], search: [{ type: i0.Output, args: ["search"] }], widthChange: [{ type: i0.Output, args: ["widthChange"] }], elRef: [{ type: i0.ViewChild, args: ['el', { isSignal: true }] }] } });
 
 class LogosphereToast {
     type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
@@ -1863,21 +2018,27 @@ class LogosphereToast {
     closeable = input(true, ...(ngDevMode ? [{ debugName: "closeable" }] : []));
     duration = input(5000, ...(ngDevMode ? [{ debugName: "duration" }] : []));
     autoDismiss = input(true, ...(ngDevMode ? [{ debugName: "autoDismiss" }] : []));
+    action = input(undefined, ...(ngDevMode ? [{ debugName: "action" }] : []));
+    toastClose = output();
+    /** @deprecated `toastClose` kullanın — aynı anda yayınlanır. */
     dismiss = output();
-    onDismiss() {
+    onToastClose(event) {
+        const e = event;
+        this.toastClose.emit(e.detail);
         this.dismiss.emit();
     }
     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: `
+    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 }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toastClose: "toastClose", 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()"
+      [action]="action()"
+      (toast-close)="onToastClose($event)"
     ></logosphere-toast>
   `, isInline: true });
 }
@@ -1888,22 +2049,36 @@ 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()"
+      [action]="action()"
+      (toast-close)="onToastClose($event)"
     ></logosphere-toast>
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], toastTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], autoDismiss: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoDismiss", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], toastTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], autoDismiss: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoDismiss", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], toastClose: [{ type: i0.Output, args: ["toastClose"] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
 class LogosphereToastContainer {
+    el;
+    get host() {
+        return this.el.nativeElement;
+    }
+    show(options) {
+        return this.host.show(options);
+    }
+    close(id) {
+        this.host.close(id);
+    }
+    clear() {
+        this.host.clear();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereToastContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.7", type: LogosphereToastContainer, isStandalone: true, selector: "lgs-toast-container", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.7", type: LogosphereToastContainer, isStandalone: true, selector: "lgs-toast-container", viewQueries: [{ propertyName: "el", first: true, predicate: ["el"], descendants: true, static: true }], ngImport: i0, template: `
     <logosphere-toast-container #el></logosphere-toast-container>
   `, isInline: true });
 }
@@ -1917,7 +2092,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }] });
+        }], propDecorators: { el: [{
+                type: ViewChild,
+                args: ['el', { static: true }]
+            }] } });
 
 class LogosphereTreeMenu {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -1925,16 +2103,11 @@ class LogosphereTreeMenu {
     expandOnLabelClick = input(true, ...(ngDevMode ? [{ debugName: "expandOnLabelClick" }] : []));
     chevronPosition = input('left', ...(ngDevMode ? [{ debugName: "chevronPosition" }] : []));
     showLabels = input(true, ...(ngDevMode ? [{ debugName: "showLabels" }] : []));
+    leading = input(true, ...(ngDevMode ? [{ debugName: "leading" }] : []));
     iconSize = input(16, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
     toggle = output();
     itemClick = output();
     nodeClick = output();
-    set elRef(element) {
-        if (element) {
-            element.nativeElement.items = this.items();
-            element.nativeElement.expandedIds = this.expandedIds();
-        }
-    }
     onToggle(event) {
         const e = event;
         this.toggle.emit(e.detail);
@@ -1948,13 +2121,15 @@ class LogosphereTreeMenu {
         this.nodeClick.emit(e.detail);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.7", ngImport: i0, type: LogosphereTreeMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereTreeMenu, isStandalone: true, selector: "lgs-tree-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, expandOnLabelClick: { classPropertyName: "expandOnLabelClick", publicName: "expandOnLabelClick", isSignal: true, isRequired: false, transformFunction: null }, chevronPosition: { classPropertyName: "chevronPosition", publicName: "chevronPosition", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", itemClick: "itemClick", nodeClick: "nodeClick" }, 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: LogosphereTreeMenu, isStandalone: true, selector: "lgs-tree-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, expandOnLabelClick: { classPropertyName: "expandOnLabelClick", publicName: "expandOnLabelClick", isSignal: true, isRequired: false, transformFunction: null }, chevronPosition: { classPropertyName: "chevronPosition", publicName: "chevronPosition", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", itemClick: "itemClick", nodeClick: "nodeClick" }, ngImport: i0, template: `
     <logosphere-tree-menu
-      #el
+      [items]="items()"
+      [expandedIds]="expandedIds()"
       [expandOnLabelClick]="expandOnLabelClick()"
-      [chevronPosition]="chevronPosition()"
+      [attr.chevronposition]="chevronPosition()"
       [showLabels]="showLabels()"
-      [iconSize]="iconSize()"
+      [leading]="leading()"
+      [attr.iconsize]="iconSize()"
       (toggle)="onToggle($event)"
       (item-click)="onItemClick($event)"
       (node-click)="onNodeClick($event)"
@@ -1968,11 +2143,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     imports: [],
                     template: `
     <logosphere-tree-menu
-      #el
+      [items]="items()"
+      [expandedIds]="expandedIds()"
       [expandOnLabelClick]="expandOnLabelClick()"
-      [chevronPosition]="chevronPosition()"
+      [attr.chevronposition]="chevronPosition()"
       [showLabels]="showLabels()"
-      [iconSize]="iconSize()"
+      [leading]="leading()"
+      [attr.iconsize]="iconSize()"
       (toggle)="onToggle($event)"
       (item-click)="onItemClick($event)"
       (node-click)="onNodeClick($event)"
@@ -1980,10 +2157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
   `,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }], expandOnLabelClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnLabelClick", required: false }] }], chevronPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronPosition", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], elRef: [{
-                type: ViewChild,
-                args: ['el', { static: false }]
-            }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }], expandOnLabelClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandOnLabelClick", required: false }] }], chevronPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronPosition", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], leading: [{ type: i0.Input, args: [{ isSignal: true, alias: "leading", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }] } });
 
 class LogosphereUploader {
     files = input([], ...(ngDevMode ? [{ debugName: "files" }] : []));
@@ -2022,17 +2196,17 @@ class LogosphereUploader {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.7", type: LogosphereUploader, isStandalone: true, selector: "lgs-uploader", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", 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 }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, hideDropArea: { classPropertyName: "hideDropArea", publicName: "hideDropArea", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelSuffix: { classPropertyName: "labelSuffix", publicName: "labelSuffix", 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 } }, outputs: { filesAdded: "filesAdded", fileRemove: "fileRemove", fileRetry: "fileRetry", fileCancel: "fileCancel", fileSelect: "fileSelect" }, ngImport: i0, template: `
     <logosphere-uploader
       [files]="files()"
-      [accept]="accept()"
-      [multiple]="multiple()"
-      [maxSize]="maxSize()"
-      [disabled]="disabled()"
-      [size]="size()"
-      [selectable]="selectable()"
-      [hideDropArea]="hideDropArea()"
-      [label]="label()"
-      [labelSuffix]="labelSuffix()"
-      [helper]="helper()"
-      [error]="error()"
+      [attr.accept]="accept()"
+      [attr.multiple]="multiple() ? '' : null"
+      [attr.max-size]="maxSize()"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.size]="size()"
+      [attr.selectable]="selectable() ? '' : null"
+      [attr.hide-drop-area]="hideDropArea() ? '' : null"
+      [attr.label]="label()"
+      [attr.label-suffix]="labelSuffix()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
       (files-added)="onFilesAdded($event)"
       (file-remove)="onFileRemove($event)"
       (file-retry)="onFileRetry($event)"
@@ -2049,17 +2223,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.7", ngImpor
                     template: `
     <logosphere-uploader
       [files]="files()"
-      [accept]="accept()"
-      [multiple]="multiple()"
-      [maxSize]="maxSize()"
-      [disabled]="disabled()"
-      [size]="size()"
-      [selectable]="selectable()"
-      [hideDropArea]="hideDropArea()"
-      [label]="label()"
-      [labelSuffix]="labelSuffix()"
-      [helper]="helper()"
-      [error]="error()"
+      [attr.accept]="accept()"
+      [attr.multiple]="multiple() ? '' : null"
+      [attr.max-size]="maxSize()"
+      [attr.disabled]="disabled() ? '' : null"
+      [attr.size]="size()"
+      [attr.selectable]="selectable() ? '' : null"
+      [attr.hide-drop-area]="hideDropArea() ? '' : null"
+      [attr.label]="label()"
+      [attr.label-suffix]="labelSuffix()"
+      [attr.helper]="helper()"
+      [attr.error]="error()"
       (files-added)="onFilesAdded($event)"
       (file-remove)="onFileRemove($event)"
       (file-retry)="onFileRetry($event)"